/* ============================================================
   Cuore — Custom Styles
   Luxury modular kitchen & furniture aesthetic
   ============================================================ */

:root {
  --navy: #0a1628;
  --navy-deep: #06101c;
  --navy-mid: #0f2744;
  --navy-light: #1a365d;
  /* Brighter brand orange (clearer on navy + cream) */
  --gold: #d46a0c;
  --gold-light: #e8841c;
  --gold-hover: #ed9028;
  --gold-dark: #b35508;
  --gold-soft: rgba(212, 106, 12, 0.16);
  --wood: #8b6914;
  --wood-warm: #a67c52;
  --cream: #f7f4ef;
  --cream-dark: #ebe6dc;
  --white: #ffffff;
  /*
   * Text system (sitewide):
   * - UI / light surfaces: navy --text (#0a1628)
   * - Body secondary on cream: --text-muted (#3d3d3d)
   * - Hero on dark photos: white + --text-outline-black
   * - Hero on light photos: black + --text-outline-white
   * - Accent only (CTAs/labels): --gold (never long body copy)
   */
  --text: #0a1628;
  --text-muted: #3d3d3d;
  --text-on-dark: #ffffff;
  --text-on-light: #000000;
  /*
   * Hero type — two modes only:
   * 1) Dark photos: white fill + 100% black outline (--text-outline-black)
   * 2) Light photos: black fill + 60% white outline (--text-outline-white)
   * Use .theme-dark / default .page-hero for (1); .theme-light / .page-hero-dark-text for (2).
   */
  --text-outline-black:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
    -1px  0   0 #000,
     1px  0   0 #000,
    -1px  1px 0 #000,
     0    1px 0 #000,
     1px  1px 0 #000;
  --text-outline-white:
     0   -1px 0 rgba(255, 255, 255, 0.6),
     0    1px 0 rgba(255, 255, 255, 0.6),
    -1px  0   0 rgba(255, 255, 255, 0.6),
     1px  0   0 rgba(255, 255, 255, 0.6);
  --border: rgba(10, 22, 40, 0.1);
  --border-gold: rgba(212, 106, 12, 0.45);
  --shadow: 0 12px 40px rgba(10, 22, 40, 0.08);
  --shadow-lg: 0 24px 64px rgba(10, 22, 40, 0.14);
  --radius-sm: 2px;
  --section-y: clamp(4.5rem, 8vw, 7.5rem);
  --transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --img-zoom-scale: 1.07;
  --img-zoom-duration: 0.9s;
  /* Sitewide photo brightness — change here to update all images (incl. future adds) */
  --img-brightness: 1.14;
  --img-brightness-hover: 1.16;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.18;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* Home page: keep original heading weight */
body.page-home h1,
body.page-home h2,
body.page-home h3,
body.page-home h4,
body.page-home h5,
body.page-home h6 {
  font-weight: 600;
}

/* Utilities for photo overlays */
.text-on-dark { color: var(--text-on-dark) !important; }
.text-on-light { color: var(--text-on-light) !important; }

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

/*
 * Sitewide photo brightness (matches Gallery).
 * Logos / UI SVGs excluded. Component rules that set `filter` should
 * include brightness(var(--img-brightness)) so they stay in sync.
 */
img:not(.brand-logo):not([src$=".svg"]) {
  filter: brightness(var(--img-brightness));
}

/* Background-image photo surfaces (no text inside) */
.hero-slide,
.cat-img,
.service-tile-img {
  filter: brightness(var(--img-brightness));
}

/* Text-over-photo sections: brighten plate, restore children to natural */
.page-hero,
.feature-bleed,
.cta-banner {
  filter: brightness(var(--img-brightness));
}
.page-hero > *,
.feature-bleed > *,
.cta-banner > * {
  filter: brightness(calc(1 / var(--img-brightness)));
}

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

/* ---------- Top Bar ---------- */
.top-bar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(212, 106, 12, 0.2);
}

.top-bar a {
  color: rgba(255, 255, 255, 0.85);
}

.top-bar a:hover {
  color: var(--gold-light);
}

.top-bar .btn-brochure {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 0;
  transition: var(--transition);
}

.top-bar .btn-brochure:hover {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

/* ---------- Navbar ---------- */
/*
 * Fix: Tailwind CDN defines .collapse { visibility: collapse }
 * which hides Bootstrap's navbar menu. Restore Bootstrap behavior.
 */
.collapse {
  visibility: visible !important;
}

.collapse:not(.show) {
  display: none;
}

.collapse.show {
  display: block;
}

.collapsing {
  visibility: visible !important;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    visibility: visible !important;
  }

  .navbar-expand-lg .navbar-collapse.collapse {
    display: flex !important;
  }

  .navbar-expand-lg .navbar-nav {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    visibility: visible !important;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none !important;
  }
}

/* Sticky site header (top bar + nav stick together)
 * Header must stack ABOVE the fixed image strip (z-index ~1000),
 * otherwise By Style / By Finish text menus paint behind the photos.
 */
.site-header.sticky-top,
.navbar-vnc.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1100;
}

.site-header {
  width: 100%;
  background: var(--navy-deep);
  z-index: 1100;
  /* New stacking context so all nav menus live above the image strip */
  isolation: isolate;
}

/* Reserve header height while includes/header.html is fetched */
.site-header[data-include="header"]:empty {
  min-height: 7rem;
}
@media (max-width: 767.98px) {
  .site-header[data-include="header"]:empty {
    min-height: 4.75rem;
  }
}

.site-header .navbar-vnc {
  /* nav sits inside sticky header */
  position: relative;
  z-index: 2;
}

.navbar-vnc {
  background: #0a1628 !important;
  backdrop-filter: blur(12px);
  /* Compact size (matches sticky header) — fixed padding avoids height jitter */
  padding: 0.55rem 0;
  transition: box-shadow 0.3s ease, background 0.3s ease;
  border-bottom: 1px solid rgba(212, 106, 12, 0.15);
  z-index: 2;
  width: 100%;
}

.navbar-vnc.scrolled,
.site-header.is-stuck .navbar-vnc,
body.nav-scrolled .navbar-vnc {
  padding: 0.55rem 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
  background: rgba(10, 22, 40, 0.98) !important;
}

body.nav-scrolled .site-header {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/*
 * Collapse top bar without display:none flicker.
 * Fixed max-height transition keeps the sticky header stable.
 */
.site-header .top-bar {
  max-height: 3rem;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease, border 0.28s ease;
}

body.nav-scrolled .site-header .top-bar {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
}

/* Nav primary CTA */
.btn-nav-cta {
  display: inline-block;
  background: var(--gold);
  color: #ffffff !important;
  border: 1px solid var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.15rem;
  border-radius: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.btn-nav-cta:hover {
  background: var(--gold-dark);
  color: #ffffff !important;
  border-color: var(--gold-dark);
}

.navbar-vnc .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.navbar-brand-vnc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  margin-right: 1rem;
  margin-left: 0.75rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

.navbar-brand-vnc .brand-logo {
  display: block;
  /* Compact logo — same as sticky header */
  height: 58px;
  width: auto;
  max-width: min(280px, 52vw);
  object-fit: contain;
  /* Keep wordmark crisp/bright on navy header */
  filter: brightness(1.12) contrast(1.05);
}

.navbar-brand-vnc .brand-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.04em;
}

.navbar-brand-vnc .brand-name span {
  color: var(--gold);
}

.navbar-brand-vnc .brand-tag {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  margin-top: 2px;
}

@media (max-width: 575.98px) {
  .navbar-brand-vnc .brand-logo {
    height: 54px;
    max-width: 220px;
  }
}

.navbar-vnc .navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.navbar-vnc .nav-item {
  flex-shrink: 0;
}

.navbar-vnc .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem !important;
  position: relative;
  display: block;
  white-space: nowrap;
  /* Stable underline via box-shadow — no ::after fight with dropdown caret, no layout shake */
  box-shadow: inset 0 -1.5px 0 0 transparent;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

/* Do not use .nav-link::after for underline (Bootstrap dropdown-toggle needs ::after caret) */
.navbar-vnc .nav-link:not(.dropdown-toggle)::after {
  display: none;
}

.navbar-vnc .nav-link:hover,
.navbar-vnc .nav-link.active {
  color: var(--gold-light) !important;
  box-shadow: inset 0 -1.5px 0 0 var(--gold);
}

.navbar-toggler {
  border: 1px solid rgba(212, 106, 12, 0.5) !important;
  padding: 0.4rem 0.6rem;
  background: transparent;
  cursor: pointer;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.15rem rgba(212, 106, 12, 0.25);
  outline: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28212, 106, 12, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Mobile expanded menu panel */
@media (max-width: 991.98px) {
  .navbar-vnc .navbar-collapse {
    flex-basis: 100%;
  }

  .navbar-vnc .navbar-collapse.show {
    display: block !important;
    visibility: visible !important;
    background: #06101c;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid rgba(212, 106, 12, 0.2);
    width: 100%;
    height: auto !important;
    overflow: visible !important;
  }

  .navbar-vnc .navbar-nav {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
    height: auto !important;
    flex-shrink: 0;
  }

  .navbar-vnc .nav-item {
    flex: 0 0 auto;
    height: auto !important;
    max-height: none;
    overflow: visible;
  }

  .navbar-vnc .nav-link {
    padding: 0.85rem 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    box-shadow: none;
  }

  .navbar-vnc .nav-link:hover,
  .navbar-vnc .nav-link.active {
    box-shadow: inset 3px 0 0 0 var(--gold);
  }

  .navbar-vnc .nav-item:last-child .nav-link {
    border-bottom: none;
  }
}

/* ---------- Buttons ---------- */
.btn-gold {
  background: var(--gold);
  color: #ffffff;
  border: 1.5px solid var(--gold);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 0.9rem 1.9rem;
  border-radius: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 14px rgba(212, 106, 12, 0.18);
}

.btn-gold:hover {
  background: var(--gold-dark);
  color: #ffffff;
  border-color: var(--gold-dark);
  box-shadow: 0 6px 16px rgba(181, 106, 18, 0.22);
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold-dark);
  border: 1.5px solid var(--gold);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 0.9rem 1.9rem;
  border-radius: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-outline-gold:hover {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

/* Heroes / captions: orange buttons on photos */
.hero .btn-outline-gold,
.hero-slide-caption .btn-outline-gold,
.page-hero .btn-outline-gold {
  color: #ffffff;
  border-color: var(--gold);
  background: transparent;
}

.hero .btn-outline-gold:hover,
.hero-slide-caption .btn-outline-gold:hover,
.page-hero .btn-outline-gold:hover {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

.hero .btn-gold,
.hero-slide-caption .btn-gold,
.page-hero .btn-gold {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
  box-shadow: 0 5px 16px rgba(212, 106, 12, 0.2);
}

.hero .btn-gold:hover,
.hero-slide-caption .btn-gold:hover,
.page-hero .btn-gold:hover {
  background: var(--gold-dark);
  color: #ffffff;
  border-color: var(--gold-dark);
}

/* Dark panels */
.feature-bleed .btn-outline-gold,
.process-section .btn-outline-gold {
  color: #fff;
  border-color: var(--gold);
  background: transparent;
}

.feature-bleed .btn-outline-gold:hover,
.process-section .btn-outline-gold:hover {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

/* CTA banner */
.cta-banner .btn-gold {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
  box-shadow: 0 5px 16px rgba(212, 106, 12, 0.2);
}

.cta-banner .btn-gold:hover {
  background: var(--gold-dark);
  color: #ffffff;
  border-color: var(--gold-dark);
}

.cta-banner .btn-outline-gold {
  color: #ffffff;
  border-color: var(--gold);
  background: transparent;
}

.cta-banner .btn-outline-gold:hover {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

.btn-navy {
  background: var(--navy);
  color: var(--white);
  border: 1.5px solid var(--navy);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 0.9rem 1.9rem;
  border-radius: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-navy:hover {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

.btn-navy.btn-sm:hover {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

/* ---------- Section Helpers ---------- */
.section-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-light);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.section-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.section-label.center,
.text-center .section-label {
  justify-content: center;
}

/* Sitewide display titles — refined aesthetic scale */
.section-title,
h1.section-title,
h2.section-title,
h3.section-title {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
  line-height: 1.18;
  font-weight: 400;
  font-synthesis: none;
  text-wrap: balance;
}

body.page-home .section-title {
  font-weight: 600;
}

/* Home: keep previously lightened titles as-is */
body.page-home .section-title.section-title-compact,
body.page-home .services-tiles-section .section-title,
body.page-home .testimonials-section .section-title {
  font-weight: 400;
  font-synthesis: none;
}

body.page-home .feature-bleed h2,
body.page-home .feature-bleed .section-head h2 {
  font-weight: 500;
}

/* Non-home: lighter head text overrides that still force 600–700 */
body:not(.page-home) .page-hero h1,
body:not(.page-home) .page-hero-copy h1,
body:not(.page-home) .planner-intro .section-title,
body:not(.page-home) .create-own-box .section-title,
body:not(.page-home) .category-card h3,
body:not(.page-home) .service-detail-card h3,
body:not(.page-home) .modal-title {
  font-weight: 400;
  font-synthesis: none;
}

/* Compact variant — same refined scale, slightly tighter margin */
.section-title.section-title-compact {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.65rem;
}

/* Home about: two-line title, even tracking and line stack */
.about-teaser-editorial .about-home-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1em;
  margin: 0;
  line-height: 1.18;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  font-size: clamp(1.38rem, 2.45vw, 1.88rem) !important;
}
.about-teaser-editorial .about-home-heading-line {
  display: block;
  margin: 0;
  padding: 0;
}

.about-teaser-editorial .lead-text {
  font-size: 1.12rem;
  line-height: 1.68;
  margin: 0;
  max-width: 36em;
}

.about-teaser-editorial .about-editorial-tagline {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 36em;
}

.lead-text {
  max-width: 34em;
  text-wrap: pretty;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 0.98rem;
  max-width: 540px;
  line-height: 1.55;
  margin-top: 0;
  margin-bottom: 0;
  text-wrap: balance;
}

.divider-gold {
  width: 48px;
  height: 1.5px;
  background: var(--gold);
  margin: 0.5rem 0 0.75rem;
  opacity: 0.85;
}

.divider-gold.center {
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.section-head.tight {
  margin-bottom: 1.25rem;
}

/* ---------- Hero (editorial cinematic) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--navy-deep);
}

.hero.hero-slider {
  display: block;
  padding: 0;
}

.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
  height: 100%;
  /* Fit under sticky header so hero + copy show without scrolling */
  min-height: calc(100vh - 5.5rem);
  min-height: calc(100dvh - 5.5rem);
}

.hero-slide {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 5.5rem);
  min-height: calc(100dvh - 5.5rem);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.03);
  animation: heroKenBurns 18s var(--ease-out) infinite alternate;
  filter: brightness(var(--img-brightness));
}

@keyframes heroKenBurns {
  0% { transform: scale(1.03) translate3d(0, 0, 0); }
  100% { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); }
}

/* No dark overlay on hero images — keep photos bright */
.hero-carousel::after {
  display: none;
  content: none;
}

/* Hero copy — upper-left editorial block */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  padding: clamp(1.25rem, 3.5vh, 2.5rem) 0 2rem;
}

.hero-content .container {
  pointer-events: auto;
}

.hero-content-inner {
  max-width: 620px;
}

/* Eyebrow: high-contrast pill — readable on light and dark hero photos */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e8841c;
  background: rgba(6, 16, 28, 0.9);
  border: 1px solid rgba(212, 106, 12, 0.55);
  padding: 0.35rem 0.75rem 0.35rem 0.65rem;
  border-radius: 2px;
  text-shadow: none;
  box-shadow: 0 3px 12px rgba(6, 16, 28, 0.22);
}

.hero-eyebrow::before {
  content: "";
  width: 18px;
  height: 1.5px;
  background: #e8841c;
  flex-shrink: 0;
}

/* Hero type — match first carousel slide (Playfair 400 title + Outfit 400 sub) */
.hero-title,
h1.hero-title,
h2.hero-title,
h3.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.48rem, 2.65vw, 2.05rem) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em !important;
  color: #ffffff !important;
  margin: 0 0 0.55rem;
  max-width: none;
  -webkit-text-stroke: 0;
  text-shadow: none;
  text-wrap: balance;
  font-synthesis: none;
}

.hero-title em {
  font-style: italic;
  font-weight: 400 !important;
  color: inherit !important;
  -webkit-text-stroke: 0;
  letter-spacing: -0.01em;
  font-synthesis: none;
}

.hero-sub {
  margin: 0 0 0.95rem;
  max-width: min(100%, 26rem);
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 1.1vw, 0.94rem) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  -webkit-text-stroke: 0;
  text-shadow: none;
  text-wrap: wrap;
  text-align: left;
}

/* Home carousel: one left-aligned copy column (stable sub width) */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(100%, 24rem);
  width: 100%;
}
.hero-copy .hero-title {
  display: block;
  width: auto;
  max-width: min(100%, 14em);
  margin: 0 0 0.5rem;
  margin-left: -0.03em; /* optical: serif vs body */
  text-align: left;
  text-wrap: balance;
}
.hero-copy .hero-sub {
  display: block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 0.95rem;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  text-wrap: wrap;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.hero-actions .btn {
  padding: 0.62rem 1.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-weight: 800 !important;
}

.hero-actions .btn-outline-gold {
  color: var(--navy);
  border-color: var(--navy);
  background: rgba(255, 255, 255, 0.92);
}

.hero-actions .btn-outline-gold:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/*
 * Hero nav arrows
 * Idle  → original small frosted circle + chevron
 * Hover / focus / active → circular peek of adjacent slide photo
 */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  z-index: 5;
  width: 4.25rem;
  top: 0;
  bottom: 0;
  transform: none;
  opacity: 0.55;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent !important;
  background-image: none !important;
  transition: opacity 0.35s ease;
}

.hero:hover .carousel-control-prev,
.hero:hover .carousel-control-next,
.hero:focus-within .carousel-control-prev,
.hero:focus-within .carousel-control-next {
  opacity: 0.95;
}

.hero-carousel .carousel-control-prev {
  left: 0;
  right: auto;
  justify-content: center;
}

.hero-carousel .carousel-control-next {
  right: 0;
  left: auto;
  justify-content: center;
}

.hero-carousel .hero-nav-peek {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Peek photo — hidden when idle */
.hero-carousel .hero-nav-peek-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(4.5rem, 7.5vw, 6.25rem);
  height: clamp(4.5rem, 7.5vw, 6.25rem);
  margin: 0;
  border-radius: 50%;
  background-color: transparent;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  box-shadow: none;
  filter: brightness(0.92);
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.32s var(--ease-out, ease),
    box-shadow 0.28s ease,
    filter 0.28s ease;
  z-index: 1;
}

/* Idle arrow chip — matches previous frosted circle style */
.hero-carousel .hero-nav-peek-arrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  background-color: rgba(6, 16, 28, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
  text-shadow: none;
  pointer-events: none;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease;
}

.hero-carousel .hero-nav-peek-arrow i {
  display: block;
  line-height: 1;
}

.hero-carousel .hero-nav-peek .carousel-control-prev-icon,
.hero-carousel .hero-nav-peek .carousel-control-next-icon {
  display: none;
}

/* Hover / keyboard focus / press — reveal circular slide peek */
.hero-carousel .hero-nav-peek:hover,
.hero-carousel .hero-nav-peek:focus-visible,
.hero-carousel .hero-nav-peek:active {
  opacity: 1;
}

.hero-carousel .hero-nav-peek:hover .hero-nav-peek-thumb,
.hero-carousel .hero-nav-peek:focus-visible .hero-nav-peek-thumb,
.hero-carousel .hero-nav-peek:active .hero-nav-peek-thumb {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  box-shadow:
    0 12px 32px rgba(6, 16, 28, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.75),
    0 0 0 4px rgba(212, 106, 12, 0.35);
  filter: brightness(1);
}

.hero-carousel .hero-nav-peek:hover .hero-nav-peek-arrow,
.hero-carousel .hero-nav-peek:focus-visible .hero-nav-peek-arrow,
.hero-carousel .hero-nav-peek:active .hero-nav-peek-arrow {
  background-color: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  transform: scale(1.06);
}

.hero-carousel .hero-nav-peek:focus-visible {
  outline: none;
}

.hero-carousel .carousel-indicators {
  z-index: 5;
  margin-bottom: 1.75rem;
  gap: 0.45rem;
  justify-content: flex-end;
  max-width: min(92vw, 1140px);
  margin-left: auto;
  margin-right: auto;
  padding-right: 1rem;
  left: 0;
  right: 0;
}

.hero-carousel .carousel-indicators [data-bs-target] {
  width: 28px;
  height: 2px;
  border-radius: 0;
  border: none;
  background-color: rgba(10, 22, 40, 0.35);
  opacity: 1;
  text-indent: -9999px;
  margin: 0;
  flex: 0 0 auto;
  transition: background-color 0.3s ease, width 0.3s ease;
}

.hero-carousel .carousel-indicators .active {
  background-color: var(--gold);
  width: 40px;
  transform: none;
}

/* Trust bar */
.trust-bar {
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.85rem 0;
}

.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.trust-item {
  text-align: center;
  padding: 0.4rem 0.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.trust-item:last-child {
  border-right: none;
}

.trust-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.trust-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

/* Service photo tiles */
.services-tiles-section {
  padding: var(--section-y) 0;
  background: var(--cream);
}

/* Home: less empty cream above “What we offer” */
body.page-home .services-tiles-section {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.services-tiles-section .section-title {
  font-weight: 400;
  font-synthesis: none;
}

.service-tile {
  display: block;
  height: 100%;
  background: var(--white);
  color: inherit;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: none;
  transition: var(--transition);
}

.service-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: inherit;
  border-color: transparent;
}

.service-tile-img {
  height: 280px;
  background-size: cover;
  background-position: center;
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
  filter: brightness(var(--img-brightness));
  will-change: transform;
}

.service-tile:hover .service-tile-img {
  transform: scale(1.07);
  filter: brightness(var(--img-brightness-hover));
}

.service-tile-body {
  padding: 1.75rem 1.6rem 1.9rem;
}

.service-tile-num {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.55rem;
}

.service-tile-body h3 {
  font-size: 1.4rem;
  margin-bottom: 0.7rem;
  letter-spacing: -0.02em;
}

.service-tile-body p {
  font-size: 0.94rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

.service-tile-link {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.service-tile-link i {
  margin-left: 0.35rem;
  transition: transform 0.3s ease;
}

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

.service-tile:hover .service-tile-link i {
  transform: translateX(5px);
}

/* Editorial about — image + copy share one equal-height row (zoom-stable) */
.about-teaser-editorial {
  padding: var(--section-y) 0;
  background: var(--white);
}

/*
 * Image height follows the copy block (content-driven), so top/bottom edges
 * stay aligned without a forced tall frame and a big empty gap before buttons.
 */
.about-teaser-editorial .about-teaser-split {
  align-items: stretch;
}

.about-teaser-editorial .about-teaser-media-col,
.about-teaser-editorial .about-teaser-copy-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.about-editorial-media {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--cream-dark, #ebe6dc);
}

.about-editorial-media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1s var(--ease-out), filter 0.5s ease;
  will-change: transform;
}

.about-editorial-media:hover img {
  transform: scale(1.05);
  filter: brightness(var(--img-brightness-hover));
}

.about-editorial-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
  height: 100%;
  /* Even vertical rhythm: intro → body → signature → CTAs */
  gap: 1.35rem;
}

.about-editorial-copy-main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 1) Eyebrow */
.about-teaser-editorial .section-label {
  margin: 0 0 0.7rem;
}

/* 2) Title sits tight under label */
.about-teaser-editorial .about-home-heading {
  margin: 0 0 0.85rem;
}

/* 3) Gold rule — breathing room before body copy */
.about-teaser-editorial .divider-gold {
  margin: 0 0 1.35rem;
  width: 2.75rem;
}

/* 4) Body paragraphs — equal gap, no extra bottom on last */
.about-teaser-editorial .about-editorial-copy-main > .lead-text {
  margin: 0 0 1.05rem;
}

.about-teaser-editorial .about-editorial-copy-main > .lead-text:last-of-type {
  margin-bottom: 1.15rem;
}

/* 5) Signature line — slight lift from body, quiet color */
.about-editorial-tagline,
.about-teaser-editorial .about-editorial-tagline {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* 6) Buttons — clear band under signature, not cramped */
.about-editorial-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding-top: 0.15rem;
}

.about-editorial-actions .btn {
  margin: 0;
}

@media (max-width: 991.98px) {
  .about-editorial-media {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .about-editorial-media img {
    min-height: 0;
    height: 100%;
  }

  .about-editorial-copy {
    height: auto;
    gap: 1.2rem;
  }

  .about-teaser-editorial .about-editorial-copy-main > .lead-text {
    margin-bottom: 0.95rem;
  }

  .about-teaser-editorial .about-editorial-copy-main > .lead-text:last-of-type {
    margin-bottom: 1.05rem;
  }
}

.lead-text {
  font-size: 1.2rem;
  color: var(--navy);
  line-height: 1.65;
  margin-bottom: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.about-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.about-pill {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid var(--border);
  padding: 0.5rem 0.9rem;
  background: var(--cream);
}

/* ---------- Process strip ---------- */
.process-section {
  padding: var(--section-y) 0;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  overflow: hidden;
}

.process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(212, 106, 12, 0.08), transparent 55%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(255, 255, 255, 0.03), transparent 50%);
  pointer-events: none;
}

.process-section .section-label {
  color: rgba(255, 255, 255, 0.55);
}

.process-section .section-title {
  color: #fff;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
  margin-top: 0.5rem;
}

.process-step {
  padding: 2rem 1.75rem 2rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.process-step:last-child {
  border-right: none;
  padding-right: 0;
}

.process-step:first-child {
  padding-left: 0;
}

.process-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}

.process-step h3 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 0.65rem;
  letter-spacing: -0.015em;
}

.process-step p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  max-width: 22em;
  text-wrap: balance;
}

/* ---------- Materials strip ---------- */
.materials-strip {
  padding: var(--section-y) 0;
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.materials-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.85rem;
}

.material-swatch {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: var(--transition);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.material-swatch:hover {
  border-color: rgba(10, 22, 40, 0.2);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.material-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(10, 22, 40, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.material-dot.wood { background: linear-gradient(135deg, #8b5a2b, #c4a574); }
.material-dot.pu { background: linear-gradient(135deg, #e8e4dc, #f5f2eb); }
.material-dot.veneer { background: linear-gradient(135deg, #6b4423, #a67c52); }
.material-dot.glass { background: linear-gradient(135deg, #c5d5e0, #eef4f8); }
.material-dot.acrylic { background: linear-gradient(135deg, #2c2c2c, #5a5a5a); }
.material-dot.laminate { background: linear-gradient(135deg, #d4c4a8, #f0e6d2); }

.material-swatch h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  color: var(--navy);
}

/* ---------- Full-bleed project moment ---------- */
.feature-bleed {
  /*
   * Heading sits in normal flow at the TOP of the section.
   * Change ONLY --feature-bleed-pad-top to move the title up/down.
   * Cards are pushed to the bottom with margin-top: auto (no absolute overlay).
   * PINNED — do not let font/card changes alter this pad.
   */
  --feature-bleed-pad-top: 1.15rem; /* slight nudge down from 0.75rem — locked pin */
  --feature-bleed-pad-bottom: 3rem;
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: stretch;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.feature-bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(6, 16, 28, 0.9) 0%,
    rgba(6, 16, 28, 0.55) 38%,
    rgba(6, 16, 28, 0.45) 58%,
    rgba(6, 16, 28, 0.22) 100%
  );
}

.feature-bleed-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--feature-bleed-pad-top) 0 var(--feature-bleed-pad-bottom);
  box-sizing: border-box;
}

.feature-bleed-inner > .container {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

/*
 * Why-choose title — top of the column (not absolute).
 * Opacity-only fade so transform never shifts it.
 */
.feature-bleed .section-head {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  margin: 0 auto 1.25rem !important;
  max-width: 42rem;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0 16px !important;
  box-sizing: border-box;
  gap: 8px;
  row-gap: 8px;
  overflow: visible;
  transform: none !important;
  translate: none !important;
  inset: auto !important;
  flex-shrink: 0;
}

.feature-bleed .section-head.fade-up {
  opacity: 0;
  transform: none !important;
  transition: opacity 0.7s ease !important;
}
.feature-bleed .section-head.fade-up.visible {
  opacity: 1;
  transform: none !important;
}

.feature-bleed .section-head .eyebrow,
.feature-bleed .section-head h2,
.feature-bleed .section-head h2.text-white,
.feature-bleed .section-head > p {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

.feature-bleed .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  font-weight: 700;
  margin: 0;
  opacity: 1;
  text-shadow: none;
  -webkit-text-stroke: 0;
  line-height: 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
}

.feature-bleed .eyebrow::before {
  content: "";
  width: 18px;
  height: 1.5px;
  background: #ffffff;
  flex-shrink: 0;
}

.feature-bleed .section-head h2,
.feature-bleed .section-head h2.text-white {
  color: var(--text-on-dark) !important;
  font-family: var(--font-display);
  font-size: 32px;
  max-width: none;
  width: auto;
  margin: 0 auto !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  height: auto;
  min-height: 0;
  max-height: none;
  font-weight: 500;
  opacity: 1 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  -webkit-text-stroke: 0;
  text-align: center;
  white-space: normal;
  overflow: visible;
}

.feature-bleed .section-head > p {
  color: var(--text-on-dark) !important;
  max-width: 34rem;
  width: 100%;
  font-size: 15px;
  margin: 0 auto !important;
  line-height: 1.45;
  height: auto;
  min-height: 0;
  max-height: none;
  font-weight: 400;
  opacity: 1 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  -webkit-text-stroke: 0;
  text-align: center;
  text-wrap: balance;
  overflow: visible;
}

/* Cards + CTA sit at the bottom of the tall bleed */
.feature-bleed .why-choose-grid {
  margin-top: auto;
  flex-shrink: 0;
}

/* Home “Design that feels personal” only — warm cream + black outline */
.feature-bleed h2.feature-bleed-title-warm {
  color: #f7f4ef !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--text-outline-black) !important;
}
.feature-bleed p.feature-bleed-sub-warm {
  color: #e8e2d9 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--text-outline-black) !important;
}

/* Keep why-choose card body weight (override lightened bleed p rule) */
.feature-bleed .why-choose-item p {
  font-weight: 500 !important;
}

.feature-bleed .btn-outline-gold {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.feature-bleed .btn-outline-gold:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

/* Shared overlay — disabled so hero images stay bright */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: none !important;
  display: none;
}

/*
 * Page Hero (inner pages) — vertical band matches Contact Us
 * (Home carousel is separate; Contact keeps its own explicit rule below.)
 */
.page-hero {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: flex-start;
  background-size: cover;
  background-position: center;
  padding: clamp(9.5rem, 24vh, 13.5rem) 0 clamp(5.5rem, 13vh, 8.5rem);
}

/* Tall inner heroes — same copy position as Contact */
body.page-kitchens .page-hero,
body.page-wardrobes .page-hero,
body.page-designs .page-hero,
body.page-services .page-hero,
body.page-about .page-hero,
body.page-gallery .page-hero,
body.page-legal .page-hero {
  min-height: min(70vh, 680px);
  min-height: min(70dvh, 680px);
  padding: clamp(9.5rem, 24vh, 13.5rem) 0 clamp(5.5rem, 13vh, 8.5rem);
  align-items: flex-start;
  background-size: cover;
  background-position: center center;
}

/* Contact hero — reference position (unchanged) */
body.page-contact .page-hero {
  min-height: min(70vh, 680px);
  min-height: min(70dvh, 680px);
  padding-top: clamp(9.5rem, 24vh, 13.5rem);
  padding-bottom: clamp(5.5rem, 13vh, 8.5rem);
  align-items: flex-start;
  background-size: cover;
  background-position: center center;
}

body.page-contact .page-hero > .container {
  max-width: 100%;
  transform: none;
}

/*
 * Hero text position — match Contact Us (full-width container + same inset).
 * Home carousel is separate and unchanged.
 */
.page-hero > .container {
  max-width: 100%;
  transform: none;
  /* Same left inset as Contact hero */
  padding-left: clamp(1.75rem, 5vw, 3.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/*
 * Hero copy column: shared left edge + stable sub width
 * (no longer locked to title pixel-width)
 */
.page-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(100%, 26rem);
  width: 100%;
}
.page-hero-copy h1 {
  display: block;
  width: auto;
  max-width: 100%;
  margin-left: -0.03em !important; /* optical: Playfair vs Outfit */
  margin-right: 0 !important;
  margin-bottom: 0.45rem;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  text-wrap: balance;
}
.page-hero-copy .page-hero-sub {
  display: block;
  width: auto;
  min-width: 0;
  max-width: 100% !important;
  box-sizing: border-box;
  margin-top: 0.45rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  text-wrap: wrap;
  overflow-wrap: break-word;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
/* Breadcrumb aligns to same column as title/sub */
.page-hero > .container > .breadcrumb-vnc {
  max-width: min(100%, 26rem);
  margin-top: 0.6rem;
  width: 100%;
}

/* Kitchens main hero — same vertical band as Contact */
.page-hero.page-hero-kitchens {
  padding: clamp(9.5rem, 24vh, 13.5rem) 0 clamp(5.5rem, 13vh, 8.5rem);
  min-height: min(70vh, 680px);
  min-height: min(70dvh, 680px);
  align-items: flex-start;
}
body.page-kitchens .page-hero.page-hero-kitchens {
  min-height: min(70vh, 680px);
  min-height: min(70dvh, 680px);
  padding: clamp(9.5rem, 24vh, 13.5rem) 0 clamp(5.5rem, 13vh, 8.5rem);
}

/* Style detail heroes — same vertical band as Contact */
body.page-kitchens .page-hero.page-hero-style-detail {
  min-height: min(70vh, 680px);
  min-height: min(70dvh, 680px);
  padding: clamp(9.5rem, 24vh, 13.5rem) 0 clamp(5.5rem, 13vh, 8.5rem);
  background-size: cover;
  background-position: center center;
  align-items: flex-start;
}

body.page-kitchens .page-hero.page-hero-style-detail h1 {
  margin-bottom: 0.45rem;
}

body.page-kitchens .page-hero.page-hero-style-detail .page-hero-sub {
  margin-top: 0.45rem !important;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

body.page-kitchens .page-hero.page-hero-style-detail .breadcrumb-vnc {
  margin-top: 0.55rem;
}

/* Veneer & Laminate — same vertical band as Contact */
body.page-kitchens .page-hero.page-hero-veneer-laminate {
  padding-top: clamp(9.5rem, 24vh, 13.5rem);
  padding-bottom: clamp(5.5rem, 13vh, 8.5rem);
}

/* No page-specific X/Y nudges — all match Contact container inset */
body.page-kitchens .page-hero.page-hero-shaker > .container,
body.page-kitchens .page-hero.page-hero-modern > .container,
body.page-kitchens .page-hero.page-hero-acrylic > .container,
body.page-kitchens .page-hero.page-hero-style-detail > .container,
body.page-kitchens .page-hero.page-hero-kitchens > .container,
body.page-wardrobes .page-hero.page-hero-wardrobes-style > .container,
.page-hero.page-hero-kitchens > .container {
  padding-left: clamp(1.75rem, 5vw, 3.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2rem);
  max-width: 100%;
  transform: none;
  top: 0;
}

body.page-services .page-hero.page-hero-services > .container {
  position: relative;
  top: 0;
}

.page-hero.page-hero-kitchens h1 {
  margin-bottom: 0.4rem;
}
.page-hero.page-hero-kitchens .page-hero-sub {
  margin-top: 0.45rem !important;
}

/* Finish heroes — same flex-start band as Contact (no bottom-align) */
.page-hero.page-hero-finish {
  padding-bottom: clamp(5.5rem, 13vh, 8.5rem);
  align-items: flex-start;
}
.page-hero.page-hero-finish > .container {
  padding-bottom: 0;
}
.page-hero.page-hero-finish h1 {
  margin-bottom: 0.35rem;
}
.page-hero.page-hero-finish .page-hero-sub {
  margin-bottom: 0.35rem !important;
}
.page-hero.page-hero-finish .breadcrumb-vnc {
  margin-top: 0.4rem;
  margin-bottom: 0;
}

.page-hero .hero-overlay {
  display: none;
  background: none !important;
}

/* Default page heroes: bold solid white on dark photos */
.page-hero h1 {
  color: #ffffff !important;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.14;
  position: relative;
  z-index: 2;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  font-weight: 700 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--text-outline-black) !important;
  text-wrap: balance;
  max-width: 100%;
}

.page-hero .breadcrumb-vnc {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  margin-top: 0.6rem;
  text-transform: uppercase;
  font-weight: 700;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--text-outline-black) !important;
  text-align: left;
}

.page-hero .breadcrumb-vnc a {
  color: #ffffff !important;
  font-weight: 700;
}

.page-hero .breadcrumb-vnc a:hover {
  color: var(--gold-light) !important;
}

/* Light photo heroes: bold black type with white outline */
.page-hero.page-hero-dark-text h1 {
  color: #000000 !important;
  font-weight: 700 !important;
  text-shadow: var(--text-outline-white) !important;
  -webkit-text-stroke: 0 !important;
}
.page-hero.page-hero-dark-text .page-hero-sub,
.page-hero.page-hero-dark-text p,
.page-hero.page-hero-dark-text .text-white {
  color: #000000 !important;
  font-weight: 700 !important;
  text-shadow: var(--text-outline-white) !important;
  -webkit-text-stroke: 0 !important;
}
.page-hero.page-hero-dark-text .breadcrumb-vnc,
.page-hero.page-hero-dark-text .breadcrumb-vnc a {
  color: #000000 !important;
  font-weight: 700 !important;
  text-shadow: var(--text-outline-white) !important;
}
.page-hero.page-hero-dark-text .breadcrumb-vnc a:hover {
  color: #000000 !important;
  opacity: 0.7;
}

/* Keep hero placement; width capped by .page-hero-copy */
.page-hero.page-hero-dark-text .page-hero-sub {
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* Subtitles — bold white with black outline for photo contrast */
.page-hero .page-hero-sub,
.page-hero .text-white,
.page-hero p.text-white,
.page-hero p,
.page-hero .container > p {
  color: #ffffff !important;
  opacity: 1 !important;
  font-family: var(--font-body);
  font-weight: 700 !important;
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  line-height: 1.45;
  margin-top: 0.45rem !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--text-outline-black) !important;
  text-wrap: wrap;
  text-align: left;
}
/* Free-floating hero subs (no .page-hero-copy) use same column width */
.page-hero > .container > .page-hero-sub {
  max-width: min(100%, 26rem);
}

/* Variants inherit white + black outline */
.page-hero.page-hero-ink h1,
.page-hero.page-hero-light h1 {
  color: #ffffff !important;
  font-weight: 700 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--text-outline-black) !important;
}

.page-hero.page-hero-ink .page-hero-sub,
.page-hero.page-hero-ink p,
.page-hero.page-hero-ink .text-white,
.page-hero.page-hero-ink p.text-white,
.page-hero.page-hero-light .page-hero-sub,
.page-hero.page-hero-light p {
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--text-outline-black) !important;
}

.page-hero.page-hero-ink .breadcrumb-vnc,
.page-hero.page-hero-light .breadcrumb-vnc {
  color: #ffffff !important;
  font-weight: 700 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--text-outline-black) !important;
}

.page-hero.page-hero-ink .breadcrumb-vnc a,
.page-hero.page-hero-light .breadcrumb-vnc a {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.page-hero.page-hero-ink .breadcrumb-vnc a:hover,
.page-hero.page-hero-light .breadcrumb-vnc a:hover {
  color: var(--gold-light) !important;
}

/* ---------- About Teaser ---------- */
.about-teaser {
  padding: var(--section-y) 0;
  background: var(--white);
}

.feature-icon-box {
  text-align: center;
  padding: 1.5rem 1rem;
  transition: var(--transition);
}

.feature-icon-box .icon-wrap {
  width: 70px;
  height: 70px;
  margin: 0 auto 1.25rem;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.6rem;
  transition: var(--transition);
}

.feature-icon-box:hover .icon-wrap {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold-light);
}

.feature-icon-box h5 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.feature-icon-box p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- Stats ---------- */
.stats-section {
  background: var(--navy);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/hero-kitchen-island.jpg") center/cover;
  opacity: 0.08;
}

.stat-item {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 1.5rem 1rem;
}

.stat-item .stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-item .stat-number .suffix {
  font-size: 0.55em;
}

.stat-item .stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Projects Grid ---------- */
.projects-section {
  padding: var(--section-y) 0;
  background: var(--white);
}

.project-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  cursor: pointer;
  height: 100%;
  background: var(--navy-deep);
}

.project-card img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
  filter: brightness(var(--img-brightness)) saturate(0.94);
}

.project-card-featured img {
  height: 500px;
}

.project-card-tall img {
  height: 500px;
}

.project-card .project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 16, 28, 0.9) 0%, transparent 58%);
  opacity: 0;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.85rem;
}

/* Always-visible captions (mobile-friendly + editorial) */
.project-card .project-overlay-visible {
  opacity: 1;
  background: linear-gradient(to top, rgba(6, 16, 28, 0.78) 0%, transparent 52%);
}

.project-card:hover img {
  transform: scale(1.07);
  filter: brightness(var(--img-brightness-hover)) saturate(1);
}

.project-card:hover .project-overlay {
  opacity: 1;
  background: linear-gradient(to top, rgba(6, 16, 28, 0.88) 0%, transparent 55%);
}

.project-card .project-overlay h5 {
  color: var(--white);
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
  letter-spacing: 0.005em;
  transform: translateY(4px);
  transition: transform 0.4s var(--ease-out);
}

.project-card:hover .project-overlay h5 {
  transform: translateY(0);
}

.project-card .project-overlay span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  order: -1;
  margin-bottom: 0.4rem;
}

.project-grid-editorial {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.project-grid-editorial .project-card {
  margin-bottom: 0;
}

/* ---------- Top Sellers / Collections grid ---------- */
.sellers-section {
  padding: var(--section-y) 0;
  background: var(--cream);
}

.seller-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  transition: var(--transition);
  height: 100%;
  border: 1px solid var(--border);
}

.seller-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}

.seller-card .img-wrap {
  position: relative;
  overflow: hidden;
  height: 260px;
  aspect-ratio: 4 / 3;
  height: auto;
}

.seller-card .img-wrap img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
  will-change: transform;
}

.seller-card:hover .img-wrap img {
  transform: scale(1.07);
  filter: brightness(var(--img-brightness-hover));
}

.seller-card .badge-top {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(6, 16, 28, 0.88);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.seller-card .card-body-vnc {
  padding: 1.5rem 1.5rem 1.65rem;
}

.seller-card h5 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.005em;
}

.seller-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
  line-height: 1.65;
}

.seller-card .view-link {
  color: var(--navy);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.seller-card .view-link:hover {
  color: var(--gold);
}

.seller-card .view-link i {
  transition: transform 0.3s ease;
  display: inline-block;
}

.seller-card:hover .view-link i {
  transform: translateX(4px);
}

/* ---------- Blog Cards ---------- */
.blog-section {
  padding: var(--section-y) 0;
  background: var(--white);
}

.blog-card {
  background: var(--cream);
  overflow: hidden;
  height: 100%;
  transition: var(--transition);
  box-shadow: none;
  border: 1px solid var(--border);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}

.blog-card .img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.blog-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
  will-change: transform;
}

.blog-card:hover .img-wrap img {
  transform: scale(1.07);
  filter: brightness(var(--img-brightness-hover));
}

.blog-card .date-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 0.5rem 0.65rem;
  min-width: 52px;
  z-index: 2;
}

.blog-card .date-badge .day {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}

.blog-card .date-badge .month {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.blog-card .card-body-vnc {
  padding: 1.5rem;
}

.blog-card .category {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.blog-card h5 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.blog-card h5 a {
  color: var(--navy);
}

.blog-card h5 a:hover {
  color: var(--gold);
}

.blog-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.blog-card .read-more {
  color: var(--navy);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(10, 22, 40, 0.2);
  padding-bottom: 2px;
}

.blog-card .read-more:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ---------- CTA Banner ---------- */
.cta-banner {
  position: relative;
  padding: clamp(5rem, 10vw, 7.5rem) 0;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  text-align: center;
}

.cta-banner .hero-overlay {
  display: none;
  background: none !important;
}

.cta-banner .content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.cta-banner h2 {
  color: #ffffff;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-shadow: none;
}

.cta-banner p {
  color: #ffffff;
  font-size: 1.08rem;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  margin-bottom: 2rem;
  line-height: 1.7;
  text-shadow: none;
}

/* ---------- Partners ---------- */
.partners-section {
  padding: 2.75rem 0;
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.partner-logo {
  opacity: 0.45;
  filter: none;
  transition: var(--transition);
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--navy);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.75rem;
  font-weight: 500;
}

.partner-logo:hover {
  opacity: 1;
  color: var(--navy);
}

/* ---------- Footer ---------- */
.footer-vnc {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.65);
  padding: 2.5rem 0 0;
}

/* Even footer column rhythm after 4-column layout */
.footer-vnc .row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
  align-items: flex-start;
}

@media (min-width: 992px) {
  .footer-vnc .row {
    justify-content: space-between;
  }
}

.footer-vnc h5 {
  color: var(--white);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.9rem;
  position: relative;
  padding-bottom: 0.55rem;
}

/* Fixed-width gold accent — same length under every footer heading */
.footer-vnc h5::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2rem; /* fixed, not proportional to label length */
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}

.footer-brand .brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.25rem;
}

.footer-brand .brand-name span {
  color: var(--gold);
}

.footer-brand .brand-logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  margin-bottom: 0.35rem;
  filter: brightness(1.12) contrast(1.05);
}

.footer-brand p {
  font-size: 0.82rem;
  margin-top: 0.65rem;
  margin-bottom: 0;
  line-height: 1.55;
}

.footer-vnc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.footer-vnc ul a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
}

.footer-vnc ul a:hover {
  color: var(--gold-light);
  padding-left: 4px;
}

.footer-contact li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
  min-width: 0;
}

.footer-contact li > i {
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-contact-row {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 0.4rem;
}

.footer-contact-row a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer-contact .email-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--gold);
}

.footer-contact .bi-geo-alt {
  color: #EA4335;
}

.footer-contact .bi-telephone {
  color: #0A84FF;
}

.footer-contact .bi-envelope {
  color: #31C3F2;
}

.social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.social-links a {
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.95rem;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.social-links a[aria-label="WhatsApp"] {
  background: #25D366;
  border-color: #25D366;
}

.social-links a[aria-label="Call"] {
  background: #0A84FF;
  border-color: #0A84FF;
}

.social-links a[aria-label="Email"] {
  background: transparent;
  border: 0;
  padding: 0;
}

.social-links a[aria-label="Email"] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.social-links a[aria-label="Email"]:hover {
  background: transparent;
}

.social-links a[aria-label="Instagram"] {
  background: linear-gradient(135deg, #833ab4 0%, #c13584 22%, #e1306c 45%, #fd1d1d 68%, #f77737 84%, #fcaf45 100%);
  border-color: transparent;
}

.social-links a:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .social-links a {
    transition: none;
  }

  .social-links a:hover {
    transform: none;
  }
}

/* Compact social icons in footer only */
.footer-vnc .social-links {
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.footer-vnc .social-links a {
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  border-radius: 8px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 1.5rem;
  padding: 0.85rem 0;
  font-size: 0.8rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.6);
  margin-left: 1rem;
}

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

/* ---------- Legal pages (Privacy / Terms) ---------- */
.legal-section {
  background: var(--cream);
  padding: 3.5rem 0 4.5rem;
}

.legal-content {
  max-width: 780px;
  margin: 0 auto;
  background: var(--white);
  padding: 2.5rem 2.25rem;
  border: 1px solid rgba(10, 22, 40, 0.06);
  box-shadow: 0 8px 30px rgba(10, 22, 40, 0.04);
}

.legal-content .legal-meta {
  font-size: 0.85rem;
  color: rgba(10, 22, 40, 0.5);
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--navy);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.legal-content p,
.legal-content li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(10, 22, 40, 0.78);
}

.legal-content ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.legal-content li {
  margin-bottom: 0.4rem;
}

.legal-content a {
  color: var(--navy-mid, #0f2744);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover {
  color: var(--gold);
}

@media (max-width: 575.98px) {
  .legal-content {
    padding: 1.5rem 1.15rem;
  }
}

/* ---------- About Page ---------- */
/* Who we are: all media frames use sharp (square) edges */
body.page-about .about-zigzag-media > img,
body.page-about .about-zigzag-media-graphic > img,
body.page-about .about-factory-carousel,
body.page-about .about-factory-carousel .carousel-item img,
body.page-about .about-lifestyle-collage,
body.page-about .about-lifestyle-tile,
body.page-about .about-lifestyle-tile img,
body.page-about .about-finish-collage,
body.page-about .about-finish-tile,
body.page-about .about-finish-tile img,
body.page-about .about-finish-tile-face,
body.page-about .about-lifestyle-tile-face {
  border-radius: 0 !important;
}

/* Zigzag story rows — text + photo slots for later images */
.about-zigzag {
  padding: var(--section-y) 0;
  background: var(--cream);
}

.about-zigzag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.about-zigzag-row:last-child {
  margin-bottom: 0;
}

.about-zigzag-row-reverse .about-zigzag-copy {
  order: 2;
}

.about-zigzag-row-reverse .about-zigzag-media {
  order: 1;
}

.about-zigzag-copy .section-title {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 400 !important;
  font-synthesis: none;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 0.75rem;
}

.about-zigzag-copy p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
  margin: 0 0 0.5rem;
  max-width: 36em;
}

.about-zigzag-media {
  min-height: 280px;
}

.about-photo-slot {
  width: 100%;
  min-height: clamp(260px, 36vw, 420px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background:
    linear-gradient(145deg, var(--cream-dark) 0%, #e4dfd6 100%);
  border: 1.5px dashed rgba(10, 22, 40, 0.18);
  color: var(--text-muted);
  text-align: center;
  padding: 2rem 1.25rem;
}

.about-photo-slot-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.about-photo-slot-hint {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-dark);
  opacity: 0.9;
}

/* When real photo is added: place <img> inside .about-zigzag-media */
.about-zigzag-media > img {
  width: 100%;
  height: clamp(260px, 36vw, 420px);
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Full graphic (e.g. Trusted By banner) — keep text readable, no crop */
.about-zigzag-media-graphic > img {
  height: auto;
  min-height: clamp(220px, 30vw, 360px);
  object-fit: contain;
  background: var(--cream, #faf8f5);
  border-radius: 0;
}

/* Factory carousel in German Precision Manufacturing row */
.about-factory-carousel {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(6, 16, 28, 0.12);
  background: var(--navy-deep);
}

.about-factory-carousel .carousel-inner,
.about-factory-carousel .carousel-item {
  height: clamp(260px, 36vw, 420px);
}

.about-factory-carousel .carousel-item {
  cursor: zoom-in;
}

.about-factory-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-factory-carousel .carousel-caption {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.75rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(6, 16, 28, 0.75), transparent);
  text-align: left;
}

.about-factory-carousel .carousel-caption span {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.about-factory-carousel .carousel-control-prev,
.about-factory-carousel .carousel-control-next {
  width: 12%;
  opacity: 0.85;
}

.about-factory-carousel .carousel-control-prev-icon,
.about-factory-carousel .carousel-control-next-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(120, 120, 120, 0.55);
  background-size: 50% 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.about-factory-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.about-factory-carousel .carousel-control-next:hover .carousel-control-next-icon,
.about-factory-carousel .carousel-control-prev:focus-visible .carousel-control-prev-icon,
.about-factory-carousel .carousel-control-next:focus-visible .carousel-control-next-icon {
  background-color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(212, 106, 12, 0.4);
  transform: scale(1.06);
  opacity: 1;
}

.about-factory-carousel .carousel-indicators {
  margin-bottom: 0.35rem;
}

.about-factory-carousel .carousel-indicators [data-bs-target] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  border: none;
}

.about-factory-carousel .carousel-indicators .active {
  background-color: var(--gold);
}

.about-factory-hint {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

/* More Than a Manufacturer — 3 side-by-side panels in standard zigzag media slot */
.about-lifestyle-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 100%;
  height: auto;
  /* Larger media block; still landscape-leaning so photos stay mostly uncropped */
  aspect-ratio: 1.9 / 1;
  min-height: clamp(260px, 34vw, 360px);
  max-height: clamp(340px, 46vw, 520px);
  align-self: center;
  border-radius: 0;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow:
    0 12px 32px rgba(6, 16, 28, 0.12),
    0 0 0 1px rgba(10, 22, 40, 0.06);
}

.about-lifestyle-tile {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #111;
  cursor: zoom-in;
}

/* Different from finishes fall: blur + zoom settle (Ken Burns style) */
.about-lifestyle-tile-face {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.16);
  filter: blur(6px);
  will-change: transform, opacity, filter;
  background: #111;
}

.about-lifestyle-collage.is-animated .about-lifestyle-tile-face {
  animation: aboutLifestyleReveal 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about-lifestyle-collage.is-animated .about-lifestyle-tile:nth-child(1) .about-lifestyle-tile-face { animation-delay: 0.2s; }
.about-lifestyle-collage.is-animated .about-lifestyle-tile:nth-child(2) .about-lifestyle-tile-face { animation-delay: 0.42s; }
.about-lifestyle-collage.is-animated .about-lifestyle-tile:nth-child(3) .about-lifestyle-tile-face { animation-delay: 0.64s; }

@keyframes aboutLifestyleReveal {
  0% {
    opacity: 0;
    transform: scale(1.16);
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.about-lifestyle-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.5s ease;
}

.about-lifestyle-tile:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .about-lifestyle-tile-face {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }

  .about-lifestyle-collage.is-animated .about-lifestyle-tile-face {
    animation: none;
  }
}

@media (max-width: 767.98px) {
  .about-lifestyle-collage {
    aspect-ratio: 1.85 / 1;
    min-height: 240px;
    max-height: none;
  }
}

/* World's Finest Surfaces — ONE collage frame in zigzag media slot */
/* Single poster frame: sharp edges (Who we are only) */
.about-finish-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px; /* hairline only — reads as one collage */
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 0;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow:
    0 12px 32px rgba(6, 16, 28, 0.12),
    0 0 0 1px rgba(10, 22, 40, 0.06);
}

/* Fill zigzag media column like other row photos */
.about-zigzag-media > .about-finish-collage {
  height: clamp(260px, 36vw, 420px);
  aspect-ratio: auto;
}

.about-finish-tile {
  position: relative;
  overflow: hidden;
  background: #111;
  min-height: 0;
  min-width: 0;
  cursor: zoom-in;
}

/* Face drops into the cell (slot stays fixed; content falls vertically) */
.about-finish-tile-face {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(-105%);
  will-change: transform, opacity;
}

.about-finish-collage.is-animated .about-finish-tile-face {
  animation: aboutFinishFall 0.7s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
}

/* Stagger + base delay so the section is readable before cards fall */
.about-finish-collage.is-animated .about-finish-tile:nth-child(1) .about-finish-tile-face { animation-delay: 0.06s; }
.about-finish-collage.is-animated .about-finish-tile:nth-child(2) .about-finish-tile-face { animation-delay: 0.12s; }
.about-finish-collage.is-animated .about-finish-tile:nth-child(3) .about-finish-tile-face { animation-delay: 0.18s; }
.about-finish-collage.is-animated .about-finish-tile:nth-child(4) .about-finish-tile-face { animation-delay: 0.24s; }
.about-finish-collage.is-animated .about-finish-tile:nth-child(5) .about-finish-tile-face { animation-delay: 0.30s; }
.about-finish-collage.is-animated .about-finish-tile:nth-child(6) .about-finish-tile-face { animation-delay: 0.36s; }

@keyframes aboutFinishFall {
  0% {
    opacity: 0;
    transform: translateY(-105%);
  }
  55% {
    opacity: 1;
  }
  78% {
    transform: translateY(5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-finish-tile-face {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .about-finish-collage.is-animated .about-finish-tile-face {
    animation: none;
  }
}

.about-finish-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.about-finish-tile:hover img {
  transform: scale(1.06);
}

.about-finish-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.25rem, 3vw, 1.85rem) clamp(0.55rem, 1.5vw, 0.85rem) clamp(0.55rem, 1.4vw, 0.75rem);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    transparent 100%
  );
  color: #fff;
  pointer-events: none;
}

.about-finish-overlay h4 {
  margin: 0 0 0.15rem;
  font-size: clamp(0.65rem, 1.35vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff !important;
  font-family: var(--font-body);
}

.about-finish-overlay p {
  margin: 0;
  font-size: clamp(0.58rem, 1.1vw, 0.72rem);
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.3;
  font-weight: 500;
}

/* Dark title cell — top-left of the collage */
.about-finish-tile-intro {
  background:
    radial-gradient(ellipse 90% 80% at 15% 90%, rgba(212, 106, 12, 0.22), transparent 50%),
    linear-gradient(165deg, #121820 0%, #0a1018 45%, #060b12 100%);
  display: flex;
  align-items: flex-end;
  padding: clamp(0.85rem, 2.2vw, 1.25rem);
}

.about-finish-intro-inner {
  color: #fff;
}

.about-finish-brand {
  display: inline-block;
  font-size: clamp(0.55rem, 1.1vw, 0.65rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
}

.about-finish-tile-intro h3 {
  margin: 0;
  color: #fff !important;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.7vw, 1.05rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about-finish-num {
  display: block;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin-bottom: 0.12rem;
  color: #fff;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .about-zigzag-media > .about-finish-collage {
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 240px;
  }
}

@media (max-width: 419.98px) {
  .about-zigzag-media > .about-finish-collage {
    aspect-ratio: 3 / 2.15;
  }

  .about-finish-overlay p {
    display: none; /* keep names readable on tiny screens */
  }
}

/* ---------- Factory enlarge carousel (bright, full-screen) ---------- */
body.factory-lightbox-open {
  overflow: hidden;
}

.factory-lightbox {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.factory-lightbox[hidden] {
  display: none !important;
}

.factory-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 24, 0.42);
  cursor: zoom-out;
}

.factory-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 1080px);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.factory-lightbox-stage {
  width: 100%;
  background: #ffffff;
  border-radius: 6px;
  padding: 0.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

.factory-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 820px);
  width: auto;
  height: auto;
  object-fit: contain;
  /* Match sitewide photo brightness */
  filter: brightness(var(--img-brightness)) !important;
  opacity: 1 !important;
  transition: opacity 0.2s ease;
  border-radius: 3px;
}

.factory-lightbox-stage img.is-fading {
  opacity: 0.15;
}

.factory-lightbox-close {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.factory-lightbox-close:hover {
  background: var(--gold);
  color: #fff;
}

.factory-lightbox-nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.factory-lightbox-nav:hover {
  background: var(--gold);
  color: #fff;
}

.factory-lightbox-prev { left: -0.35rem; }
.factory-lightbox-next { right: -0.35rem; }

.factory-lightbox-meta {
  text-align: center;
  width: 100%;
}

.factory-lightbox-title {
  margin: 0;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.factory-lightbox-counter {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.factory-lightbox-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.factory-lightbox-dots button {
  width: 9px;
  height: 9px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.factory-lightbox-dots button.is-active {
  background: var(--gold);
  transform: scale(1.2);
}

.factory-lightbox-dots button:hover {
  background: #fff;
}

@media (max-width: 767.98px) {
  .factory-lightbox-prev { left: 0.15rem; }
  .factory-lightbox-next { right: 0.15rem; }
  .factory-lightbox-stage img {
    max-height: 62vh;
  }
}

@media (max-width: 991.98px) {
  .about-zigzag-row,
  .about-zigzag-row-reverse {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about-zigzag-row-reverse .about-zigzag-copy,
  .about-zigzag-row-reverse .about-zigzag-media {
    order: unset;
  }

  /* On mobile: always show image after its text for reading flow */
  .about-zigzag-row-reverse .about-zigzag-copy {
    order: 1;
  }

  .about-zigzag-row-reverse .about-zigzag-media {
    order: 2;
  }
}

.about-content {
  padding: var(--section-y) 0;
  background: var(--navy-deep);
}

.about-image-wrap {
  position: relative;
}

.about-image-wrap img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.about-image-wrap .years-badge {
  position: absolute;
  bottom: -20px;
  right: 20px;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 1.5rem 1.75rem;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.about-image-wrap .years-badge .num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  display: block;
  color: var(--navy-deep);
}

.about-image-wrap .years-badge .txt {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy-deep);
}

/* Light text on navy — high contrast with dark about panel */
.about-content .about-story-copy .section-label {
  color: var(--gold-light);
}

.about-content .about-story-copy .section-label::before {
  background: var(--gold);
}

.about-content .about-story-copy .section-title {
  color: #ffffff;
}

.about-content .about-story-copy .divider-gold {
  background: var(--gold);
}

.about-content .about-story-lead {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1rem;
  line-height: 1.65;
}

.about-content .about-story-text {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1rem;
  line-height: 1.75;
  font-size: 0.98rem;
}

.about-content .about-story-copy .btn-outline-gold {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}

.about-content .about-story-copy .btn-outline-gold:hover {
  background: #fff;
  color: var(--navy-deep);
  border-color: #fff;
}

.materials-grid .material-item {
  background: var(--white);
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  height: 100%;
}

.materials-grid .material-item:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.materials-grid .material-item i {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}

.materials-grid .material-item h5 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.materials-grid .material-item p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Testimonials + horizontal scroll */
.testimonials-section {
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 var(--section-y);
  background: var(--navy-deep);
}

.testimonials-section .section-label,
.testimonials-section .section-title {
  color: var(--white);
}

.testimonials-section .section-title {
  font-weight: 400;
  font-synthesis: none;
}

.testimonials-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: visible;
}

.testimonials-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Room so hover zoom is not clipped */
  padding: 1.25rem 0.5rem 1.35rem;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255, 255, 255, 0.08);
}

.testimonials-scroll::-webkit-scrollbar {
  height: 6px;
}

.testimonials-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.testimonials-scroll::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 999px;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 106, 12, 0.2);
  padding: 2.25rem;
  transition:
    border-color 0.4s ease,
    background 0.4s ease,
    transform 0.55s var(--ease-out),
    box-shadow 0.4s ease;
  flex: 0 0 min(100%, 340px);
  scroll-snap-align: center;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transform-origin: center center;
  will-change: transform;
  cursor: default;
}

/* Middle card in view — slight zoom while scrolling / autoplay */
.testimonial-card.is-center {
  transform: scale(1.04);
  border-color: rgba(232, 146, 32, 0.55);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(232, 146, 32, 0.18);
  z-index: 2;
  position: relative;
}

@media (min-width: 768px) {
  .testimonial-card {
    flex-basis: min(100%, 360px);
  }
}

@media (min-width: 1200px) {
  .testimonial-card {
    flex-basis: min(100%, 380px);
  }
}

/* Hover: larger zoom for comfortable reading */
.testimonial-card:hover,
.testimonial-card.is-center:hover {
  transform: scale(1.06);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(232, 146, 32, 0.35);
  z-index: 3;
  position: relative;
}

.testimonial-card:hover p {
  color: rgba(255, 255, 255, 0.95);
}

.testimonial-card .stars {
  color: var(--gold);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.testimonial-card p {
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  line-height: 1.7;
  flex: 0 1 auto;
}

.testimonial-card p.testimonial-lead {
  color: rgba(255, 255, 255, 0.95);
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  flex: 0 0 auto;
}

.testimonial-card p:not(.testimonial-lead) {
  flex: 1;
  margin-bottom: 1.5rem;
}

.testimonial-card .author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}

.testimonial-card .author h6 {
  color: var(--white);
  font-size: 0.95rem;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
}

.testimonial-card .author span {
  color: var(--gold);
  font-size: 0.8rem;
  display: block;
  line-height: 1.35;
}

.testimonial-scroll-btn {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(212, 106, 12, 0.45);
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  z-index: 2;
}

.testimonial-scroll-btn:hover,
.testimonial-scroll-btn:focus-visible {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  outline: none;
}

.testimonial-scroll-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .testimonials-scroll-wrap {
    gap: 0.35rem;
  }

  .testimonial-scroll-btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.9rem;
  }

  .testimonial-card {
    flex-basis: min(100%, 86vw);
    padding: 1.65rem 1.35rem;
    min-height: 260px;
  }
}

/* ---------- Projects / Gallery ---------- */
.projects-gallery-section {
  padding: var(--section-y) 0;
  background: var(--cream);
}

.filter-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
}

.filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.65rem 1.35rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease, box-shadow 0.25s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Gallery category filters — larger chips, site gold hover */
.gallery-cat-filters {
  gap: 0.75rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}
.gallery-cat-filters .filter-btn {
  font-size: clamp(0.78rem, 1.5vw, 0.9rem);
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 0.95rem 1.65rem;
  min-height: 3.1rem;
  border-width: 1.5px;
  border-radius: 2px;
  color: var(--navy);
  border-color: rgba(10, 22, 40, 0.18);
  background: var(--white);
}
.gallery-cat-filters .filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 8px 20px rgba(6, 16, 28, 0.18);
}
.gallery-cat-filters .filter-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(212, 106, 12, 0.28);
}
.gallery-cat-filters .filter-btn.active:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.gallery-cat-filters .filter-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 106, 12, 0.22);
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-cat-filters .filter-btn:hover,
  .gallery-cat-filters .filter-btn:active {
    transform: none;
  }
}

.gallery-item {
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform 0.85s var(--ease-out), filter 0.35s ease;
  filter: brightness(var(--img-brightness)) saturate(1.03);
}

.gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 16, 28, 0.85) 0%, rgba(6, 16, 28, 0.2) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.5rem;
  opacity: 1;
  transition: var(--transition);
}

.gallery-item:hover img {
  transform: scale(1.07);
  filter: brightness(var(--img-brightness-hover)) saturate(1.06);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
  background: linear-gradient(to top, rgba(6, 16, 28, 0.9) 0%, rgba(6, 16, 28, 0.25) 55%, transparent 100%);
}

.gallery-item .gallery-overlay h5 {
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: 0.2rem;
  letter-spacing: 0.005em;
}

.gallery-item .gallery-overlay span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  order: -1;
  margin-bottom: 0.35rem;
}

.gallery-item .gallery-overlay .zoom-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 0.85rem;
  font-size: 0.95rem;
  transition: var(--transition);
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: 0;
}

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

.gallery-item .gallery-overlay .zoom-icon:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

/* Lightbox carousel — full photo, no empty white frame
 * Stage shrink-wraps the image so only the photo shows (no blank side panels).
 * Title / counter / dots sit under the photo; whole group is centered.
 */
.lightbox-modal.modal {
  --bs-modal-bg: transparent;
  --lightbox-edge: 0.75rem;
  /* Keep whole frame (image + meta) slightly below geometric center */
  --lightbox-center-nudge: 3.5rem;
  --lightbox-meta-h: 5rem;
  --lightbox-side-room: 3.5rem; /* room for prev/next outside the photo */
  z-index: 1200;
}

body:has(.lightbox-modal.show) .modal-backdrop {
  background-color: rgba(18, 22, 28, 0.62) !important;
  opacity: 1 !important;
  z-index: 1190;
}

.lightbox-modal .modal-dialog {
  /* Size to the photo, not a fixed wide white box */
  width: max-content;
  max-width: calc(100vw - var(--lightbox-edge) * 2);
  margin: var(--lightbox-edge) auto;
  max-height: none;
}

.lightbox-modal .modal-dialog-centered {
  min-height: calc(100% - (var(--lightbox-edge) * 2));
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-modal .modal-content {
  background: transparent;
  border: none;
  position: relative;
  /* Horizontal padding only for nav arrows — no full-width cream panel */
  padding: 0 var(--lightbox-side-room) 0.5rem;
  box-shadow: none;
  max-height: none;
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: visible;
  transform: translateY(var(--lightbox-center-nudge));
}

/* Close control: black X on white; hover = orange fill + white X */
.lightbox-modal .btn-close {
  --lb-close-x: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a1628'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  --lb-close-x-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  position: absolute;
  right: 0.15rem;
  top: -0.15rem;
  z-index: 12;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(10, 22, 40, 0.12);
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  /* Keep icon + fill as separate layers (solid background alone hid the X) */
  background-color: #ffffff;
  background-image: var(--lb-close-x);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.85rem;
  filter: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lightbox-modal .btn-close:hover,
.lightbox-modal .btn-close:focus-visible {
  opacity: 1;
  background-color: var(--gold);
  background-image: var(--lb-close-x-white);
  border-color: var(--gold);
  box-shadow: 0 6px 16px rgba(212, 106, 12, 0.35);
  outline: none;
}

/*
 * Uniform stage: JS sets --lb-inner-w / --lb-inner-h from the tallest image
 * so every slide shares one frame. Photos fill full height (no top/bottom blank);
 * only side blanks from padding / narrower aspect ratios.
 */
.lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: content-box;
  width: var(--lb-inner-w, min(92vw, 1400px));
  height: var(--lb-inner-h, min(80vh, 900px));
  max-width: 100%;
  margin: 0 auto;
  /* Side blanks only — zero top/bottom pad */
  padding: 0 1.35rem;
  background: #faf9f7;
  border-radius: 4px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  line-height: 0;
}

.lightbox-modal img,
.lightbox-stage img {
  /* Fill stage height fully — no letterbox top/bottom */
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  object-position: center center;
  display: block;
  border-radius: 0;
  filter: brightness(var(--img-brightness)) saturate(0.94) !important;
  /* opacity must NOT use !important — slide transitions depend on it */
  opacity: 1;
  box-shadow: none;
  will-change: opacity, transform;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  background: transparent;
}

/* Kitchen / wardrobe cards: match Who we are Finest Surfaces zoom */
.lightbox-modal.is-surfaces-zoom {
  --lightbox-center-nudge: 3.75rem;
  --lightbox-side-room: 0;
}

.lightbox-modal.is-surfaces-zoom .modal-dialog {
  width: min(96vw, 1080px);
  max-width: min(96vw, calc(100vw - var(--lightbox-edge) * 2));
}

.lightbox-modal.is-surfaces-zoom .modal-content {
  width: 100%;
  max-width: 100%;
}

.lightbox-modal.is-surfaces-zoom .lightbox-prev {
  left: -0.35rem;
}

.lightbox-modal.is-surfaces-zoom .lightbox-next {
  right: -0.35rem;
}

.lightbox-stage.is-surfaces {
  width: 100%;
  height: auto;
  min-height: 50vh;
  max-width: 100%;
  padding: 0.5rem;
  background: #ffffff;
  overflow: hidden;
}

.lightbox-modal .lightbox-stage.is-surfaces img,
.lightbox-stage.is-surfaces img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(78vh, 820px);
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .lightbox-modal.is-surfaces-zoom {
    --lightbox-center-nudge: 1.5rem;
  }
  .lightbox-modal.is-surfaces-zoom .lightbox-prev {
    left: 0.15rem;
  }
  .lightbox-modal.is-surfaces-zoom .lightbox-next {
    right: 0.15rem;
  }
  .lightbox-modal .lightbox-stage.is-surfaces img,
  .lightbox-stage.is-surfaces img {
    max-height: 62vh;
  }
}

.lightbox-modal .lightbox-stage {
  background: #faf9f7;
}

.lightbox-modal .lightbox-title,
.lightbox-modal .lightbox-counter,
.lightbox-modal .lightbox-dots {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  transition: opacity 0.35s ease;
}

.lightbox-modal .lightbox-title.is-fading,
.lightbox-modal .lightbox-counter.is-fading,
.lightbox-modal .lightbox-dots.is-fading {
  opacity: 0.35;
}

/* Smooth slide / fade between cards */
.lightbox-stage img.lightbox-slide-out {
  opacity: 0;
  transform: translate3d(-22px, 0, 0);
}

.lightbox-stage img.lightbox-slide-out.is-next {
  transform: translate3d(22px, 0, 0);
}

.lightbox-stage img.lightbox-slide-in {
  opacity: 0;
  transform: translate3d(22px, 0, 0);
}

.lightbox-stage img.lightbox-slide-in.is-prev {
  transform: translate3d(-22px, 0, 0);
}

.lightbox-stage img.lightbox-slide-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-modal img,
  .lightbox-stage img,
  .lightbox-modal .lightbox-title,
  .lightbox-modal .lightbox-counter,
  .lightbox-modal .lightbox-dots {
    transition: none !important;
  }
}

.lightbox-nav {
  position: absolute;
  /* Align with photo mid-height (not whole panel including title) */
  top: 42%;
  transform: translateY(-50%);
  z-index: 11;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 50%;
  border: 1px solid rgba(212, 106, 12, 0.55);
  background: rgba(255, 255, 255, 0.96);
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  outline: none;
}

.lightbox-prev {
  left: 0;
}

.lightbox-next {
  right: 0;
}

.lightbox-title {
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  margin-top: 1.35rem !important;
  margin-bottom: 0.35rem !important;
}

.lightbox-counter {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 0.15rem !important;
}

.lightbox-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.15rem;
  margin-bottom: 0.65rem;
  padding: 0;
  list-style: none;
}

.lightbox-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-dots button.active {
  background: var(--gold);
  transform: scale(1.25);
}

.lightbox-dots button:hover {
  background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 575.98px) {
  .lightbox-modal.modal {
    --lightbox-edge: 0.4rem;
    --lightbox-center-nudge: 0.75rem;
    --lightbox-meta-h: 4.5rem;
    --lightbox-side-room: 2.6rem;
  }
  .lightbox-modal.is-surfaces-zoom {
    --lightbox-center-nudge: 1.25rem;
  }

  .lightbox-modal .modal-dialog {
    max-width: 100vw;
    width: max-content;
  }

  .lightbox-modal .modal-content {
    padding: 0 var(--lightbox-side-room) 0.4rem;
  }

  .lightbox-nav {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.15rem;
  }
}

/* ---------- Kitchens Page ---------- */
/* Equal elegant catalog grid */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  align-items: stretch;
}

.catalog-grid .catalog-item {
  min-width: 0;
  display: flex;
  height: 100%;
}

.catalog-grid .catalog-item.is-hidden {
  display: none !important;
}

.kitchen-card {
  background: var(--white);
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 2px;
  position: relative;
  cursor: zoom-in;
}

.kitchen-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.kitchen-card:hover {
  box-shadow: 0 18px 40px rgba(10, 22, 40, 0.1);
  transform: translateY(-4px);
  border-color: rgba(212, 106, 12, 0.35);
}

.kitchen-card:hover::after {
  opacity: 1;
}

.kitchen-card .img-wrap {
  aspect-ratio: 4 / 3;
  height: auto;
  overflow: hidden;
  position: relative;
  background: var(--cream-dark, #f0ebe3);
  flex-shrink: 0;
}

.kitchen-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.85s var(--ease-out);
  filter: brightness(var(--img-brightness)) saturate(0.94);
}

.kitchen-card:hover .img-wrap img {
  transform: scale(1.07);
  filter: brightness(var(--img-brightness-hover)) saturate(1);
}

.kitchen-card .style-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  right: auto;
  background: rgba(6, 16, 28, 0.9);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(212, 106, 12, 0.35);
  z-index: 1;
}

.kitchen-card .card-body-vnc {
  padding: 1.35rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.kitchen-card h5 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 0.45rem;
  letter-spacing: 0.005em;
  color: var(--navy);
  font-weight: 500;
  font-synthesis: none;
}

body.page-home .kitchen-card h5 {
  font-weight: 600;
}

.kitchen-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 1.15rem;
  flex: 1 1 auto;
  text-wrap: pretty;
}

.kitchen-card .card-body-vnc .btn {
  align-self: flex-start;
  margin-top: auto;
}

.kitchen-card[data-lightbox] {
  cursor: zoom-in;
}

/* Linked cards (style/finish hubs) — go to page, no magnify/lightbox */
.kitchen-card.kitchen-card--nav {
  cursor: default;
}
.kitchen-card.kitchen-card--nav .kitchen-card-media {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.kitchen-card.kitchen-card--nav .kitchen-zoom {
  display: none !important;
}

.kitchen-card .kitchen-zoom {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(6, 16, 28, 0.78);
  color: #fff;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease;
  z-index: 2;
  border: 1px solid rgba(232, 146, 32, 0.45);
  pointer-events: none;
}

.kitchen-card:hover .kitchen-zoom {
  opacity: 1;
  transform: translateY(0);
}
.kitchen-card.kitchen-card--nav:hover .kitchen-zoom {
  opacity: 0;
}

.kitchen-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

.kitchen-card-actions .btn {
  margin-top: 0;
}

.kitchens-about .style-intro-grid {
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.kitchens-path-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
}

.kitchens-path-links a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 106, 12, 0.45);
  padding-bottom: 0.1rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.kitchens-path-links a:hover {
  color: var(--gold-dark);
  border-color: var(--gold);
}

.kitchens-collection .section-subtitle {
  max-width: 36em;
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.kitchens-process {
  background: var(--navy);
  color: #fff;
  padding: clamp(2.75rem, 5vw, 3.75rem) 0;
}

.kitchens-process .process-step-num {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.kitchens-process h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.kitchens-process p {
  margin: 0 auto;
  max-width: 22em;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 991.98px) {
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.15rem;
  }
}

@media (max-width: 575.98px) {
  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .kitchen-card .img-wrap {
    aspect-ratio: 16 / 10;
  }

  .kitchen-card .kitchen-zoom {
    opacity: 1;
    transform: none;
  }

  .kitchen-card-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Modal kitchen details */
.modal-kitchen .modal-content {
  border-radius: 0;
  border: none;
}

.modal-kitchen .modal-header {
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 1.25rem 1.5rem;
}

.modal-kitchen .modal-header .modal-title {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1.3rem;
}

.modal-kitchen .modal-header .btn-close {
  filter: invert(1);
}

.modal-kitchen .modal-body img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  margin-bottom: 1.5rem;
}

/* ---------- Contact ---------- */
.contact-section {
  padding: var(--section-y) 0;
}

.contact-info-card {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.8);
  padding: 2.5rem;
  height: 100%;
}

.contact-info-card h1,
.contact-info-card h4 {
  color: var(--white);
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.contact-info-card .divider-gold {
  margin-bottom: 2rem;
}

.contact-info-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.contact-info-item .icon {
  width: 45px;
  height: 45px;
  border: 1px solid rgba(212, 106, 12, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}

.contact-info-item h6 {
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.contact-info-item p,
.contact-info-item a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  margin: 0;
}

.contact-info-item a:hover {
  color: var(--gold-light);
}

.contact-email-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.email-copy-btn {
  border: 0;
  background: transparent;
  color: var(--gold);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.1rem 0.15rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.18s ease;
}

.email-copy-btn:hover,
.email-copy-btn.is-copied {
  color: var(--gold-light);
}

.contact-form-wrap {
  background: var(--white);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  height: 100%;
}

.contact-form-wrap > h3 {
  font-size: 1.5rem;
  font-weight: 500;
  font-synthesis: none;
}

.contact-form-wrap .form-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.contact-form-wrap .form-control {
  border: 1px solid rgba(10, 22, 40, 0.12);
  border-radius: 0;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  background: var(--cream);
  transition: var(--transition);
}

.contact-form-wrap .form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 0.15rem rgba(212, 106, 12, 0.15);
  background: var(--white);
}

.contact-form-wrap .form-control.is-invalid {
  border-color: #dc3545;
}

.contact-form-wrap .invalid-feedback {
  font-size: 0.8rem;
}

.contact-submit-row {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.contact-captcha {
  display: flex;
  align-items: center;
  background: var(--cream);
  border: 1px solid rgba(10, 22, 40, 0.12);
  min-height: 46px;
  padding: 0.15rem 0.2rem 0.15rem 0.35rem;
}

.contact-captcha.is-invalid {
  border-color: #dc3545;
}

.contact-captcha:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 0.15rem rgba(212, 106, 12, 0.15);
  background: var(--white);
}

.contact-captcha-image {
  flex: 0 0 auto;
  height: 44px;
  display: flex;
  align-items: center;
}

.contact-captcha-image svg {
  display: block;
  height: 44px;
  width: auto;
}

.contact-form-wrap .contact-captcha-input.form-control {
  width: 7.2rem;
  flex: 0 0 7.2rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  height: auto;
  padding: 0.35rem 0.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85rem;
}

.contact-form-wrap .contact-captcha-input.form-control:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.contact-captcha-refresh {
  border: 0;
  background: transparent;
  color: var(--navy);
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.contact-captcha-refresh:hover {
  color: var(--gold);
}

.contact-submit-row .btn-gold {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-captcha-error {
  color: #dc3545;
  font-size: 0.8rem;
  margin: 0.45rem 0 0;
}

.map-placeholder {
  background: var(--navy-mid);
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
}

.map-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/map-background.jpg") center/cover;
  opacity: 0.25;
}

.map-placeholder .map-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.map-placeholder i {
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}

.map-placeholder h5 {
  color: var(--white);
  margin-bottom: 0.5rem;
}

/* ---------- Blog Post ---------- */
.blog-post-content {
  padding: 4rem 0 6rem;
}

.blog-post-content .post-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.blog-post-content .post-meta a {
  color: var(--gold);
}

.blog-post-content .featured-img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  margin-bottom: 2.5rem;
}

.blog-post-content .post-body {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.9;
}

.blog-post-content .post-body h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.blog-post-content .post-body p {
  margin-bottom: 1.25rem;
}

.blog-sidebar .widget {
  background: var(--white);
  padding: 1.75rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.blog-sidebar .widget h5 {
  font-size: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gold);
}

.blog-sidebar .recent-post {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.blog-sidebar .recent-post img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-sidebar .recent-post h6 {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.blog-sidebar .recent-post h6 a {
  color: var(--navy);
}

.blog-sidebar .recent-post h6 a:hover {
  color: var(--gold);
}

.blog-sidebar .recent-post span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ---------- Animations ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- FAQ Accordion ---------- */
.faq-section {
  padding: var(--section-y) 0;
  background: var(--cream);
}

#faqAccordion .accordion-item {
  background: var(--white);
  border-radius: 0;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

#faqAccordion .accordion-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--white);
  box-shadow: none;
  padding: 1.2rem 1.35rem;
}

#faqAccordion .accordion-button:not(.collapsed) {
  color: var(--navy);
  background: var(--white);
  box-shadow: none;
}

#faqAccordion .accordion-button:focus {
  box-shadow: 0 0 0 0.15rem rgba(212, 106, 12, 0.2);
  border-color: transparent;
}

#faqAccordion .accordion-button::after {
  filter: none;
}

#faqAccordion .accordion-body {
  background: var(--white);
  padding: 0 1.25rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.75;
}

#faqAccordion .accordion-body a {
  color: var(--gold);
  font-weight: 600;
}

#faqAccordion .accordion-body a:hover {
  color: var(--navy);
}

/* ---------- Back to Top ---------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 45px;
  height: 45px;
  background: var(--gold);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--gold-dark);
  color: #ffffff;
}

/* ---------- Success Toast ---------- */
.form-success-msg {
  display: none;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.form-error-msg {
  display: none;
  background: #f8d7da;
  border: 1px solid #f5c2c7;
  color: #842029;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4);
  transition: var(--transition);
}

.whatsapp-float:hover {
  color: #fff !important;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.5);
}

.back-to-top {
  right: 1.25rem;
  bottom: 5.5rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none !important;
  }

  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .category-card:hover,
  .service-tile:hover,
  .blog-card:hover,
  .seller-card:hover,
  .kitchen-card:hover {
    transform: none;
  }

  .category-card:hover .cat-img,
  .service-tile:hover .service-tile-img,
  .blog-card:hover .img-wrap img,
  .seller-card:hover .img-wrap img,
  .kitchen-card:hover .img-wrap img,
  .gallery-item:hover img,
  .project-card:hover img,
  .about-editorial-media:hover img,
  .planner-card:hover .planner-visual img,
  .about-lifestyle-tile:hover img,
  .about-finish-tile:hover img,
  .navbar-vnc .style-card-link:hover .style-card-img img,
  .navbar-vnc .style-card-link:focus-visible .style-card-img img,
  .testimonial-card:hover,
  .testimonial-card.is-center,
  .testimonial-card.is-center:hover {
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .hero,
  .hero-carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item,
  .hero-slide {
    min-height: calc(100vh - 4.5rem);
    min-height: calc(100dvh - 4.5rem);
  }

  .hero {
    height: calc(100vh - 4.5rem);
    height: calc(100dvh - 4.5rem);
  }

  .hero-content {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
    align-items: flex-start;
  }

  .hero-title {
    max-width: 12ch;
  }

  .hero-carousel .carousel-indicators {
    margin-bottom: 1.25rem;
    justify-content: center;
    padding-right: 0;
  }

  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    opacity: 0.7;
    width: 3rem;
  }

  .hero-carousel .hero-nav-peek-arrow {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.95rem;
  }

  .hero-carousel .hero-nav-peek-thumb {
    width: clamp(3.75rem, 14vw, 4.75rem);
    height: clamp(3.75rem, 14vw, 4.75rem);
  }

  .trust-bar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 0.5rem;
  }

  .trust-item {
    border-right: none;
  }

  .trust-item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }

  .process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .process-step {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.75rem 1rem 1.75rem 0;
  }

  .process-step:nth-child(odd) {
    padding-right: 1.25rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }

  .process-step:nth-child(even) {
    padding-left: 1.25rem;
  }

  .process-step:nth-last-child(-n + 2) {
    border-bottom: none;
  }

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

  .project-card-featured img,
  .project-card-tall img {
    height: 360px;
  }

  .about-editorial-media img {
    height: 380px;
    object-fit: cover;
    object-position: center;
  }

  .feature-bleed {
    min-height: 60vh;
    --feature-bleed-pad-top: 0.9rem; /* mobile pin — slight nudge down, locked */
    --feature-bleed-pad-bottom: 2rem;
  }

  .feature-bleed-inner {
    min-height: 60vh;
  }

  .feature-bleed .section-head h2 {
    white-space: normal;
    font-size: 26px;
    line-height: 1.2;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .feature-bleed .section-head {
    height: auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 1rem !important;
  }

  .cta-banner {
    background-attachment: scroll;
  }

  .about-image-wrap img {
    height: 350px;
    object-fit: cover;
    object-position: center;
  }

  .about-image-wrap .years-badge {
    position: relative;
    bottom: auto;
    right: auto;
    display: inline-block;
    margin-top: 1rem;
  }

  .blog-post-content .featured-img {
    height: 280px;
  }

  .site-header .navbar-vnc .navbar-collapse.show {
    background: rgba(6, 16, 28, 0.97);
    border: 1px solid rgba(212, 106, 12, 0.2);
  }

  .btn-nav-cta {
    display: inline-block;
    margin-top: 0.75rem;
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .top-bar .d-none-xs {
    display: none !important;
  }

  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    width: 3rem;
  }

  .hero-carousel .hero-nav-peek-arrow {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.9rem;
  }

  .hero-carousel .hero-nav-peek-thumb {
    width: 3.5rem;
    height: 3.5rem;
  }

  .hero-content {
    padding-bottom: 4.75rem;
  }

  .hero-title,
  h1.hero-title,
  h2.hero-title,
  .hero-carousel .hero-slide-caption .hero-title {
    font-size: clamp(1.35rem, 6.5vw, 1.85rem) !important;
    font-weight: 400 !important;
  }

  .hero-sub,
  .hero-carousel .hero-slide-caption .hero-sub {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
  }

  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }

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

  .process-step,
  .process-step:nth-child(odd),
  .process-step:nth-child(even) {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem 0;
  }

  .process-step:last-child {
    border-bottom: none;
  }

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

  .section-title,
  h1.section-title,
  h2.section-title {
    font-size: 1.45rem;
  }

  .project-card img,
  .project-card-featured img,
  .project-card-tall img,
  .gallery-item img {
    height: 260px;
    object-fit: cover;
    object-position: center center;
  }

  .seller-card .img-wrap img {
    min-height: 0;
  }

  .service-tile-img {
    height: 200px;
  }

  .contact-form-wrap,
  .contact-info-card {
    padding: 1.75rem;
  }

  .filter-btn {
    font-size: 0.7rem;
    padding: 0.5rem 0.9rem;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    right: 1rem;
    bottom: 1rem;
  }
}

/* Bootstrap carousel overrides for sellers */
.sellers-carousel .carousel-control-prev,
.sellers-carousel .carousel-control-next {
  width: 45px;
  height: 45px;
  background: var(--navy);
  opacity: 1;
  top: 40%;
  border-radius: 0;
}

.sellers-carousel .carousel-control-prev {
  left: -10px;
}

.sellers-carousel .carousel-control-next {
  right: -10px;
}

.sellers-carousel .carousel-control-prev-icon,
.sellers-carousel .carousel-control-next-icon {
  width: 1rem;
  height: 1rem;
}

.sellers-carousel .carousel-control-prev:hover,
.sellers-carousel .carousel-control-next:hover,
.sellers-carousel .carousel-control-prev:focus-visible,
.sellers-carousel .carousel-control-next:focus-visible {
  background: var(--gold);
  opacity: 1;
}

@media (min-width: 992px) {
  .sellers-carousel .carousel-control-prev {
    left: -55px;
  }
  .sellers-carousel .carousel-control-next {
    right: -55px;
  }
}

/* ============================================================
   Content brief additions — nav dropdowns, filters, planner, services
   ============================================================ */

/* Nav dropdowns */
.navbar-vnc .dropdown-menu {
  background: var(--navy-deep);
  border: 1px solid rgba(212, 106, 12, 0.25);
  border-radius: 0;
  padding: 0.5rem 0;
  min-width: 14rem;
  margin-top: 0;
  box-shadow: var(--shadow-lg);
}
.navbar-vnc .dropdown-item {
  color: rgba(255,255,255,0.88);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.25rem;
  font-weight: 500;
  /* Opaque so full-width image strip never shows through menu text */
  background: var(--navy-deep);
}
.navbar-vnc .dropdown-item:hover,
.navbar-vnc .dropdown-item:focus {
  background: #132038;
  color: var(--gold-light);
}
.navbar-vnc .dropdown-toggle::after {
  margin-left: 0.4em;
  vertical-align: 0.15em;
  border-top-color: rgba(255,255,255,0.55);
}

/*
 * Full-width horizontal image strip for:
 * Kitchens → By Style / By Finish; Wardrobes opens cards on hover.
 * Nested panels are SIBLINGS of the text menu (not nested inside rows),
 * so By Style / By Finish text always stays fully visible on top.
 */
.navbar-vnc .dropdown-menu-style-cards {
  --style-cards-top: 5.5rem;
  /* Equal outer inset on left/right ends of the full strip */
  --style-cards-edge: 1.5rem;
  --style-cards-gap: 1.875rem; /* between cards */
  display: none;
  padding: 0;
  min-width: 0;
  background: var(--navy-deep, #0a1628);
  border: none;
  border-top: 1px solid rgba(212, 106, 12, 0.28);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
  z-index: 1000;
  box-sizing: border-box;
}
.navbar-vnc .dropdown-menu-style-cards.is-panel-open {
  display: block;
}
.navbar-vnc .style-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /*
   * Uniform spacing:
   * - same gap between every card
   * - same edge inset on far left and far right
   */
  gap: var(--style-cards-gap);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--style-cards-edge);
  box-sizing: border-box;
  background: var(--navy-deep, #0a1628);
}
.navbar-vnc .style-cards-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* keep same gap/edge as 3-up so ends stay balanced */
  gap: var(--style-cards-gap);
}
.navbar-vnc .style-card-link {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  text-decoration: none;
  color: #fff;
  padding: 0;
  border-radius: 8px;
  overflow: hidden; /* clip scaled image — same pattern as .gallery-item / .seller-card */
  min-height: clamp(14rem, 28vh, 20rem);
  border-right: none;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  background: #12161c;
}
.navbar-vnc .style-card-link:last-child {
  border-right: none;
}
.navbar-vnc .style-card-link:hover,
.navbar-vnc .style-card-link:focus-visible {
  color: #fff;
  z-index: 1;
}
/* Fill the card; overflow is clipped by .style-card-link */
.navbar-vnc .style-card-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #12161c;
}
/*
 * Smooth hover zoom — same approach as gallery/seller cards on this site:
 * transform scale only, long ease-out curve, no layout changes.
 */
.navbar-vnc .style-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none; /* beat global img { max-width:100%; height:auto } */
  max-height: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  /* translateZ promotes a compositor layer so scale eases smoothly */
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  transition: transform var(--img-zoom-duration) var(--ease-out), filter 0.5s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.navbar-vnc .style-card-link:hover .style-card-img img,
.navbar-vnc .style-card-link:focus-visible .style-card-img img {
  transform: translate3d(0, 0, 0) scale(var(--img-zoom-scale));
}

/* Prefer reduced motion: no zoom animation */
@media (prefers-reduced-motion: reduce) {
  .navbar-vnc .style-card-img img {
    transition: none !important;
    transform: none !important;
    will-change: auto;
  }
  .navbar-vnc .style-card-link:hover .style-card-img img,
  .navbar-vnc .style-card-link:focus-visible .style-card-img img {
    transform: none !important;
  }
}
/* Label overlaid on the image */
.navbar-vnc .style-card-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 2.25rem 1rem 1.15rem;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.1vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  line-height: 1.3;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(6, 16, 28, 0.92) 0%,
    rgba(6, 16, 28, 0.55) 55%,
    rgba(6, 16, 28, 0) 100%
  );
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.navbar-vnc .style-card-link:hover .style-card-label {
  color: var(--gold-light);
}

/* Desktop hover dropdowns only — mobile uses Bootstrap .show + static menus */
@media (min-width: 992px) {
  .navbar-vnc .dropdown-menu {
    display: none;
  }
  .navbar-vnc .nav-item.dropdown:hover > .dropdown-menu,
  .navbar-vnc .nav-item.dropdown.show > .dropdown-menu,
  .navbar-vnc .nav-item.dropdown.is-panel-parent-open > .dropdown-menu-text {
    display: block !important;
  }

  /* Nested flyout (legacy text-only submenus, if any) */
  .navbar-vnc .dropdown-menu .dropend {
    position: relative;
  }
  .navbar-vnc .dropdown-menu .dropend > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -0.5rem;
    margin-left: 0;
    min-width: 12.5rem;
  }
  .navbar-vnc .dropdown-menu .dropend:hover > .dropdown-menu,
  .navbar-vnc .dropdown-menu .dropend.show > .dropdown-menu {
    display: block;
  }

  .navbar-vnc .nav-item.dropdown {
    position: relative;
    z-index: 5;
  }
  .navbar-vnc .nav-item.dropdown:hover,
  .navbar-vnc .nav-item.dropdown.show,
  .navbar-vnc .nav-item.dropdown.is-panel-parent-open {
    z-index: 20;
  }

  /* Text menu always above the full-width image strip */
  .navbar-vnc .dropdown-menu-text {
    position: absolute;
    z-index: 1200;
    background: var(--navy-deep);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    overflow: visible;
  }
  .navbar-vnc .dropdown-menu-text > li {
    position: relative;
    z-index: 2;
    background: var(--navy-deep);
  }
  .navbar-vnc .dropend-style-trigger > .dropdown-item {
    position: relative;
    z-index: 3;
    background: var(--navy-deep);
  }
  .navbar-vnc .dropend-style-trigger.is-trigger-active > .dropdown-item,
  .navbar-vnc .dropend-style-trigger:hover > .dropdown-item {
    background: #132038;
    color: var(--gold-light);
  }

  /* Full-viewport image strip — sibling of text menu, lower z-index */
  .navbar-vnc .dropdown-has-style-panels > .dropdown-menu-style-cards.is-panel-open {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--style-cards-top, 5.5rem) !important;
    /* Use left+right (not 100vw) so scrollbar doesn't unbalance left/right edges */
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1000 !important;
    padding: 0 !important;
    border-radius: 0;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }
  /* Hover bridge into the strip */
  .navbar-vnc .dropdown-has-style-panels > .dropdown-menu-style-cards.is-panel-open::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1.25rem;
    height: 1.25rem;
    background: transparent;
  }

  .navbar-vnc .dropdown-menu .dropdown-item.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .navbar-vnc .dropdown-menu .dropdown-item.dropdown-toggle::after {
    margin-left: 0.5rem;
    border-top: 0.32em solid transparent;
    border-bottom: 0.32em solid transparent;
    border-left: 0.35em solid rgba(255, 255, 255, 0.55);
    border-right: 0;
    vertical-align: 0;
  }
  .navbar-vnc .dropend-style-trigger:hover > .dropdown-item.dropdown-toggle::after,
  .navbar-vnc .dropend-style-trigger.is-trigger-active > .dropdown-item.dropdown-toggle::after {
    border-left-color: var(--gold-light);
  }
}

/* Mobile: stacked image cards inside collapse menu */
@media (max-width: 991.98px) {
  .navbar-vnc .dropdown-menu-style-cards {
    display: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.4rem 0 0.6rem;
    position: static !important;
    transform: none !important;
    float: none;
    width: 100%;
    max-width: 100%;
    top: auto !important;
    z-index: auto;
    overflow: hidden;
  }
  .navbar-vnc .dropdown-menu-style-cards.is-panel-open {
    display: block;
    overflow: visible;
  }
  .navbar-vnc .style-cards-grid,
  .navbar-vnc .style-cards-grid-5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0.15rem 0 0.2rem;
    --style-cards-edge: 0;
    --style-cards-gap: 0.6rem;
  }
  .navbar-vnc .style-card-link {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    border-right: none;
    border-radius: 10px;
  }
  /* In-flow 16:10 frame so grid rows grow (absolute imgs don't size the row) */
  .navbar-vnc .style-card-link::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 62.5%;
  }
  .navbar-vnc .style-card-img {
    border-radius: 10px;
  }
  .navbar-vnc .style-card-img img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
  }
  .navbar-vnc .style-card-label {
    font-size: 0.72rem;
    padding: 1.5rem 0.85rem 0.75rem;
    text-align: left;
  }
}

/* Hero captions — mid-left, just below + beside the side scroll arrows (sitewide) */
.hero-slide-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; /* same vertical band as carousel side arrows */
  justify-content: flex-start;
  z-index: 2;
  background: none;
  /* Slightly higher than vertical center; pad left to sit next to prev control */
  padding: clamp(3.25rem, 6vh, 4.75rem) clamp(1rem, 3vw, 2rem) 4.5rem clamp(3.6rem, 5.2vw, 5.25rem);
  pointer-events: none;
}
.hero-slide-caption .container {
  pointer-events: none;
  max-width: none;
  margin: 0;
  padding: 0;
  width: auto;
}
.hero-slide-caption .caption-inner {
  max-width: min(32rem, 70vw);
  margin-left: 0;
  padding-left: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-slide-caption .hero-eyebrow {
  font-family: var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.55rem;
}
.hero-slide-caption .hero-title,
.hero-slide-caption h1.hero-title,
.hero-slide-caption h2.hero-title,
.hero-slide-caption h3.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.48rem, 2.65vw, 2.05rem) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.5rem;
  max-width: min(100%, 14em);
  text-align: left;
  font-synthesis: none;
}
.hero-slide-caption .hero-copy {
  max-width: min(100%, 24rem);
}
.hero-slide-caption .hero-copy .hero-title {
  max-width: min(100%, 14em);
  margin-left: -0.03em;
}
.hero-slide-caption .hero-sub {
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 1.1vw, 0.94rem) !important;
  font-weight: 400 !important;
  margin-bottom: 0.95rem;
  max-width: min(100%, 26rem);
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
  text-wrap: wrap;
  text-align: left;
}
.hero-slide-caption .hero-copy .hero-sub {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.hero-slide-caption .hero-actions .btn {
  padding: 0.62rem 1.2rem;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em;
  font-weight: 800 !important;
}

/* Eyebrow pills stay as-is (dark gold badge) on every slide */
.hero-slide-caption.theme-light .hero-eyebrow,
.hero-slide-caption.theme-dark .hero-eyebrow {
  color: #e8841c;
  background: rgba(6, 16, 28, 0.9);
  border-color: rgba(212, 106, 12, 0.55);
  text-shadow: none;
}

/*
 * Unified carousel type (all slides = first slide “Extraordinaire”):
 * same size + boldness (title/sub 400). Color/outline still adapt for photo contrast.
 */
.hero-carousel .hero-slide-caption .hero-title,
.hero-carousel .hero-slide-caption h1.hero-title,
.hero-carousel .hero-slide-caption h2.hero-title,
.hero-carousel .hero-slide-caption.theme-light .hero-title,
.hero-carousel .hero-slide-caption.theme-dark .hero-title,
.hero-carousel .hero-slide-caption.hero-caption-modern .hero-title,
.hero-carousel .hero-slide-caption.hero-caption-spaces .hero-title,
.hero-carousel .hero-slide-caption.hero-caption-ambiance .hero-title {
  font-size: clamp(1.48rem, 2.65vw, 2.05rem) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em !important;
  font-synthesis: none !important;
  -webkit-text-stroke: 0 !important;
}

.hero-carousel .hero-slide-caption .hero-sub,
.hero-carousel .hero-slide-caption.theme-light .hero-sub,
.hero-carousel .hero-slide-caption.theme-dark .hero-sub,
.hero-carousel .hero-slide-caption.hero-caption-modern .hero-sub,
.hero-carousel .hero-slide-caption.hero-caption-spaces .hero-sub,
.hero-carousel .hero-slide-caption.hero-caption-ambiance .hero-sub {
  font-size: clamp(0.82rem, 1.1vw, 0.94rem) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
  opacity: 1 !important;
  -webkit-text-stroke: 0 !important;
}

.hero-carousel .hero-slide-caption .hero-eyebrow {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
}

/* Light photos: solid black type with softer white outline */
.hero-slide-caption.theme-light .hero-title {
  color: #000000 !important;
  text-shadow:
    -0.5px -0.5px 0 rgba(255, 255, 255, 0.7),
     0.5px -0.5px 0 rgba(255, 255, 255, 0.7),
    -0.5px  0.5px 0 rgba(255, 255, 255, 0.7),
     0.5px  0.5px 0 rgba(255, 255, 255, 0.7) !important;
}
.hero-slide-caption.theme-light .hero-sub {
  color: #000000 !important;
  text-shadow: none !important;
}
/* Black outline CTAs on light heroes — same weight as first-slide buttons */
.hero-slide-caption.theme-light .btn-outline-gold {
  color: #000000 !important;
  border-color: var(--gold);
  background: transparent;
  font-weight: 800 !important;
  -webkit-font-smoothing: antialiased;
}
.hero-slide-caption.theme-light .btn-outline-gold:hover {
  background: var(--gold);
  color: #ffffff !important;
  border-color: var(--gold);
}
/* Spaces / Modern: white title + subtitle with solid black outline (same weight as first) */
.hero-slide-caption.hero-caption-spaces .hero-title,
.hero-slide-caption.hero-caption-spaces .hero-sub,
.hero-slide-caption.hero-caption-modern .hero-title,
.hero-slide-caption.hero-caption-modern .hero-sub {
  color: #ffffff !important;
  text-shadow: var(--text-outline-black) !important;
}
/* Spaces slide only: Book Appointment — white, same button weight */
.hero-slide-caption.hero-caption-spaces .btn-outline-gold {
  color: #ffffff !important;
  font-weight: 800 !important;
}
.hero-slide-caption.hero-caption-spaces .btn-outline-gold:hover {
  color: #ffffff !important;
}
.hero-slide-caption.theme-light .btn-gold {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
  box-shadow: 0 5px 16px rgba(212, 106, 12, 0.2);
  font-weight: 800 !important;
}
.hero-slide-caption.theme-light .btn-gold:hover {
  background: var(--gold-dark);
  color: #ffffff;
  border-color: var(--gold-dark);
}

/* Dark / mid-tone photos: bright white type with solid black outline (first-slide style) */
.hero-slide-caption.theme-dark .hero-title {
  color: #ffffff !important;
  text-shadow: var(--text-outline-black) !important;
}
.hero-slide-caption.theme-dark .hero-sub {
  color: #ffffff !important;
  text-shadow: var(--text-outline-black) !important;
}
.hero-slide-caption.theme-dark .btn-outline-gold {
  color: var(--text-on-dark);
  border-color: var(--gold);
  background: transparent;
  font-weight: 800 !important;
}
.hero-slide-caption.theme-dark .btn-outline-gold:hover {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

/* Ambiance slide only: Contact outline button — black text, white on hover */
.hero-slide-caption.hero-caption-ambiance .btn-outline-gold {
  color: #0a1628 !important;
  border-color: var(--gold);
  background: transparent;
  font-weight: 800 !important;
}
.hero-slide-caption.hero-caption-ambiance .btn-outline-gold:hover {
  color: #ffffff !important;
  background: var(--gold);
  border-color: var(--gold);
}
.hero-slide-caption.theme-dark .btn-gold {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
  box-shadow: 0 5px 16px rgba(212, 106, 12, 0.2);
  font-weight: 800 !important;
}
.hero-slide-caption.theme-dark .btn-gold:hover {
  background: var(--gold-dark);
  color: #ffffff;
  border-color: var(--gold-dark);
}

.hero-carousel .carousel-item {
  position: relative;
}
.hero-carousel .hero-slide {
  min-height: min(calc(100dvh - 5.5rem), 820px);
  background-size: cover;
  background-position: center;
}

/* USP band */
.usp-band {
  background: var(--navy);
  color: #fff;
  padding: 2.75rem 0;
  text-align: center;
}
.usp-band p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-style: italic;
  font-weight: 300;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  max-width: 48rem;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.01em;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.usp-band .usp-label {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.85rem;
}

/* Service category cards on home — lift + image zoom browse feel */
.services-tiles-section .row > [class*="col"] {
  display: flex;
}
.category-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s ease,
    border-color 0.35s ease;
  will-change: transform;
}
.category-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 75%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
}
.category-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 44px rgba(6, 16, 28, 0.14),
    0 8px 16px rgba(6, 16, 28, 0.08);
  border-color: rgba(212, 106, 12, 0.35);
  z-index: 2;
}
.category-card:hover::after {
  opacity: 1;
}
.category-card .cat-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
  filter: brightness(var(--img-brightness));
  will-change: transform;
}
.category-card:hover .cat-img {
  transform: scale(1.07);
  filter: brightness(var(--img-brightness-hover));
}
.category-card .cat-body {
  padding: 1.5rem 1.35rem 1.75rem;
  position: relative;
  z-index: 1;
  background: var(--white);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.category-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  transition: color 0.25s ease;
}
.category-card:hover h3 {
  color: var(--navy);
}
.category-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 0.85rem;
  text-wrap: pretty;
}
.category-card .cat-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: auto;
  transition: gap 0.3s ease, color 0.25s ease;
}
.category-card:hover .cat-link {
  gap: 0.55rem;
  color: var(--gold-dark);
}
.category-card .cat-link i {
  transition: transform 0.3s ease;
}
.category-card:hover .cat-link i {
  transform: translateX(3px);
}

/* Why choose us on design bleed */
.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 767.98px) {
  .why-choose-grid { grid-template-columns: 1fr; }
}
.why-choose-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(212, 106, 12, 0.35);
  padding: 1.65rem 1.35rem 1.5rem;
  backdrop-filter: blur(6px);
  box-sizing: border-box;
}
.why-choose-item .icon {
  color: var(--gold-light);
  font-size: 1.55rem;
  margin: 0 0 0.75rem;
  display: block;
  line-height: 1;
  height: 1.55rem;
  flex-shrink: 0;
}
.why-choose-item h3 {
  color: #fff;
  font-size: 1.12rem;
  margin: 0 0 0.65rem;
  line-height: 1.25;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
  text-align: center;
  width: 100%;
  max-width: 16rem;
  -webkit-text-stroke: 0;
  text-shadow: var(--text-outline-black);
}
.feature-bleed .why-choose-item p,
.why-choose-item p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.88rem;
  margin: 0 auto !important;
  line-height: 1.5;
  flex: 1 1 auto;
  max-width: 17.5rem;
  width: 100%;
  min-height: 4.2em; /* even body block across cards */
  text-align: center;
  text-wrap: pretty;
  -webkit-text-stroke: 0 !important;
  font-weight: 500 !important;
  text-shadow: var(--text-outline-black) !important;
  letter-spacing: 0.01em;
}

/* Catalog controls — subnav + filter toolbar */
.catalog-controls {
  margin-bottom: 2rem;
}

.catalog-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.4rem;
  background: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(10, 22, 40, 0.03);
}

.catalog-subnav a,
.catalog-subnav button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--navy);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  transition: var(--transition);
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1.2;
}

.catalog-subnav a:hover,
.catalog-subnav button:hover {
  background: rgba(10, 22, 40, 0.04);
  color: var(--navy);
}

.catalog-subnav a.active,
.catalog-subnav button.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ---------- Finish / type sibling switcher (wardrobes, etc.) ---------- */
.finish-switcher-wrap {
  background: var(--white);
  border-bottom: 1px solid rgba(10, 22, 40, 0.08);
  padding: 0.85rem 0;
  position: sticky;
  top: 5.25rem;
  z-index: 30;
  box-shadow: 0 4px 16px rgba(10, 22, 40, 0.04);
}
body.nav-scrolled .finish-switcher-wrap {
  top: 4rem;
}

.finish-switcher {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 0.15rem 0;
}

.finish-switcher-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(10, 22, 40, 0.12);
  background: var(--cream, #faf8f5);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.finish-switcher-item:hover {
  border-color: rgba(212, 106, 12, 0.45);
  color: var(--gold-dark, #b85a0a);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 22, 40, 0.08);
}

.finish-switcher-item.is-active,
.finish-switcher-item[aria-current="page"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(10, 22, 40, 0.18);
}

.finish-switcher-item.finish-switcher-all {
  margin-left: auto;
  background: transparent;
  border-color: rgba(212, 106, 12, 0.4);
  color: var(--gold-dark, #b85a0a);
}

.finish-switcher-item.finish-switcher-all:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.finish-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(10, 22, 40, 0.08);
}

.finish-pager-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--navy);
  padding: 0.55rem 0.85rem;
  border-radius: 2px;
  border: 1px solid rgba(10, 22, 40, 0.12);
  background: #fff;
  transition: var(--transition);
}

.finish-pager-link:hover {
  border-color: var(--gold);
  color: var(--gold-dark, #b85a0a);
  box-shadow: 0 6px 16px rgba(10, 22, 40, 0.08);
  transform: translateY(-2px);
}

.finish-pager-link i {
  font-size: 0.95rem;
  line-height: 1;
}

.finish-pager-hub {
  margin-left: auto;
  margin-right: auto;
  order: 0;
}

.finish-pager-prev {
  order: -1;
}

.finish-pager-next {
  order: 1;
  margin-left: auto;
}

.finish-pager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  width: 100%;
  margin-top: 0.35rem;
}

@media (max-width: 767.98px) {
  .finish-switcher-item.finish-switcher-all {
    margin-left: 0;
  }
  .finish-pager {
    flex-direction: column;
    align-items: stretch;
  }
  .finish-pager-prev,
  .finish-pager-next,
  .finish-pager-hub {
    order: 0;
    margin: 0;
    justify-content: center;
    width: 100%;
  }
}

/* Horizontal filter rows: label | chips */
.catalog-toolbar {
  background: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  padding: 0.35rem 0;
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(10, 22, 40, 0.03);
  overflow: hidden;
}

.catalog-filter-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  align-items: center;
  padding: 0.85rem 1.35rem;
  border-bottom: 1px solid rgba(10, 22, 40, 0.06);
}

.catalog-filter-row:last-child {
  border-bottom: none;
}

.catalog-toolbar .toolbar-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  font-weight: 700;
  opacity: 0.55;
  line-height: 1.2;
}

.catalog-toolbar .filter-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  margin: 0;
}

.catalog-toolbar .filter-btn {
  margin: 0;
  padding: 0.42rem 0.85rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  line-height: 1.25;
  border-radius: 2px;
  white-space: nowrap;
  background: #f7f5f1;
  border: 1px solid rgba(10, 22, 40, 0.08);
  color: var(--navy);
}

.catalog-toolbar .filter-btn:hover {
  border-color: rgba(212, 106, 12, 0.45);
  background: #fff;
  color: var(--navy);
}

.catalog-toolbar .filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

@media (max-width: 767.98px) {
  .catalog-filter-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem;
  }

  .catalog-toolbar .toolbar-label {
    opacity: 0.7;
  }

  .catalog-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* Style intro cards */
.style-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  height: 100%;
}
.style-intro-card {
  background: var(--navy) !important;
  border: 1px solid rgba(10, 22, 40, 0.2);
  padding: 1.5rem 1.35rem 1.5rem 1.5rem;
  height: 100%;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(10, 22, 40, 0.16);
  color: #ffffff;
  transform: translateY(0);
  /* Springy elevate/bounce on hover */
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    color 0.25s ease;
  will-change: transform;
}
/* Orange streak along the left edge of the box */
.style-intro-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #e89220;
  opacity: 1;
  z-index: 1;
}
.style-intro-card:hover {
  border-color: rgba(232, 146, 32, 0.55);
  box-shadow:
    0 22px 44px rgba(10, 22, 40, 0.28),
    0 10px 18px rgba(10, 22, 40, 0.14);
  transform: translateY(-10px) scale(1.02);
  background: var(--navy) !important;
  color: #e89220;
  z-index: 2;
}
a.style-intro-card-link:hover,
a.style-intro-card-link:focus-visible {
  transform: translateY(-10px) scale(1.02);
}
.style-intro-card:hover::before {
  background: #e89220;
}
.style-intro-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.55rem;
  color: #ffffff !important;
  font-weight: 400;
  font-synthesis: none;
  transition: color 0.25s ease;
}

body.page-home .style-intro-card h3 {
  font-weight: 600;
}
.style-intro-card p {
  color: #ffffff !important;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.92;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.style-intro-card:hover h3,
.style-intro-card:hover p {
  color: #e89220 !important;
  opacity: 1;
}
a.style-intro-card-link {
  display: block;
  text-decoration: none;
  color: #ffffff !important;
  cursor: pointer;
  /* Same spring so the whole link elevates cleanly */
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    color 0.25s ease;
}
a.style-intro-card-link:hover h3,
a.style-intro-card-link:hover p {
  color: #e89220 !important;
}
a.style-intro-card-link:focus-visible {
  outline: 2px solid #e89220;
  outline-offset: 3px;
}
a.style-intro-card-link .view-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  color: #e89220;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
a.style-intro-card-link:hover .view-link {
  color: var(--gold-light);
}

/* Sibling type-card nav: tighter spacing, lead aligned with cards */
.style-sibling-nav {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}
.style-sibling-nav > .container {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.style-sibling-nav .row.g-3 {
  --bs-gutter-y: 0.85rem;
}
.style-sibling-nav > .container > p.text-muted,
.style-sibling-nav .style-sibling-lead {
  max-width: 40rem;
  margin-top: 1.15rem !important;
  margin-bottom: 0 !important;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted, #5c6570) !important;
}
/* Collection block sits closer under sibling nav + lead */
.style-sibling-nav + section.py-5 {
  padding-top: 2.25rem !important;
}

/* Current type card on sibling pages — beige bg, black text, orange streak */
.style-intro-card.is-current,
a.style-intro-card-link.is-current {
  background: var(--cream, #faf8f5) !important;
  border: 1px solid rgba(10, 22, 40, 0.1);
  color: #0a1628;
  box-shadow:
    0 14px 32px rgba(10, 22, 40, 0.12),
    0 4px 12px rgba(10, 22, 40, 0.06);
  transform: none;
  pointer-events: none;
  cursor: default;
}
.style-intro-card.is-current::before,
a.style-intro-card-link.is-current::before {
  background: #e89220;
  width: 4px;
  opacity: 1;
}
.style-intro-card.is-current h3,
a.style-intro-card-link.is-current h3 {
  color: #0a1628 !important;
}
.style-intro-card.is-current p,
a.style-intro-card-link.is-current p {
  color: rgba(10, 22, 40, 0.72) !important;
  opacity: 1;
}
.style-intro-card.is-current .view-link,
a.style-intro-card-link.is-current .view-link {
  color: #e89220;
  font-weight: 700;
}
.style-intro-card.is-current:hover,
a.style-intro-card-link.is-current:hover {
  transform: none;
  background: var(--cream, #faf8f5) !important;
  color: #0a1628;
  box-shadow:
    0 14px 32px rgba(10, 22, 40, 0.12),
    0 4px 12px rgba(10, 22, 40, 0.06);
}
.style-intro-card.is-current:hover h3,
.style-intro-card.is-current:hover p,
a.style-intro-card-link.is-current:hover h3,
a.style-intro-card-link.is-current:hover p {
  color: inherit !important;
}
.style-intro-card.is-current:hover h3 {
  color: #0a1628 !important;
}
.style-intro-card.is-current:hover p {
  color: rgba(10, 22, 40, 0.72) !important;
}
.color-palette-group {
  /* Extra offset for sticky header + finish switcher */
  scroll-margin-top: 9.5rem;
  margin-top: 2.5rem;
}
.color-palette-group:first-of-type {
  margin-top: 0.5rem;
}
.color-palette-heading {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  color: var(--navy);
  font-weight: 600;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
}
@media (max-width: 767.98px) {
  .style-intro-grid {
    grid-template-columns: 1fr;
  }
  .color-palette-group {
    scroll-margin-top: 5.25rem;
  }
}

/* Create your own band */
.create-own-section {
  background: var(--cream-dark);
  padding: var(--section-y) 0;
}
.create-own-box {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  align-items: stretch;
}
@media (max-width: 991.98px) {
  .create-own-box { grid-template-columns: 1fr; }
}
.create-own-box h2 {
  margin-bottom: 1rem;
}
.create-own-box p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* Photo column — fixed square-ish frame so crops display as designed */
.create-own-box > div:last-child {
  min-height: 100%;
  display: flex;
  align-items: stretch;
}
.create-own-box img,
.create-own-box .create-own-media-img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 1 / 1.03;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 2px;
}

/* Planner / Our Designs */
/* ---------- Designs page planners ---------- */
.planner-section {
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(212, 106, 12, 0.07), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 20%, rgba(15, 39, 68, 0.05), transparent 50%),
    var(--cream);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

/* Nudge page head text up (no hero) — designs, gallery, services, about, contact */
body.page-designs .planner-section {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
body.page-gallery .projects-gallery-section.gallery-page-section {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
/* Gallery page head: tighter stack under title / divider / subtitle / filters */
body.page-gallery .gallery-page-section .section-head {
  margin-bottom: 1.25rem;
}
body.page-gallery .gallery-page-section .section-title {
  margin-bottom: 0.55rem;
}
body.page-gallery .gallery-page-section .divider-gold {
  margin: 0.55rem auto 0.75rem;
}
body.page-gallery .gallery-page-section .section-subtitle {
  margin: 0 auto;
  line-height: 1.45;
  font-size: 0.98rem;
}
body.page-gallery .gallery-page-section .gallery-cat-filters {
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  margin-top: 0;
}
body.page-services > section.py-5:first-of-type {
  padding-top: clamp(1.5rem, 3vw, 2.25rem) !important;
}
body.page-services > section.py-5:first-of-type > .container.py-4 {
  padding-top: 0.75rem !important;
}
body.page-about .about-zigzag {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
/* Contact: call strip above footer */
body.page-contact .contact-call-strip {
  background: #0a1628;
  margin: 0;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(212, 106, 12, 0.15);
}
body.page-contact .contact-call-strip-text {
  text-align: center;
  color: var(--white);
  margin: 0;
  letter-spacing: 0.03em;
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  line-height: 1.4;
}
body.page-contact .contact-call-strip-text a {
  text-decoration: none;
  color: var(--gold-light);
  font-weight: 600;
  white-space: nowrap;
}
body.page-contact .contact-call-strip-text a:hover {
  color: var(--gold);
}
body.page-contact .contact-section {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.planner-intro {
  max-width: 36rem;
  margin: 0 auto 2.75rem;
}

.planner-intro .section-title {
  margin-bottom: 0.75rem;
}

.planner-intro-text {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
}

/* ---------- Planner tabs ---------- */
.planner-tabs-wrap {
  background: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(10, 22, 40, 0.05);
  overflow: hidden;
  position: relative;
}

.planner-tabs-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent 85%);
  z-index: 2;
  pointer-events: none;
}

.planner-tabs {
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 1px solid rgba(10, 22, 40, 0.08);
  gap: 0;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #fff 0%, #faf8f5 100%);
}

.planner-tabs .nav-item {
  flex: 1 1 50%;
  margin: 0;
}

.planner-tab-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.45rem) clamp(1rem, 2.5vw, 1.75rem);
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  color: var(--navy);
  text-align: left;
  margin: 0;
  box-shadow: none !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.35s ease;
}

.planner-tab-btn:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  isolation: isolate;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(10, 22, 40, 0.1);
  z-index: 1;
  position: relative;
}

.planner-tab-btn.active {
  background: var(--navy) !important;
  border-bottom-color: var(--gold) !important;
  color: #fff;
}

.planner-tab-btn.active .planner-acc-name {
  color: #fff;
}

.planner-tab-btn.active .planner-acc-label {
  color: var(--gold-light);
  background: rgba(212, 106, 12, 0.18);
  border-color: rgba(212, 106, 12, 0.35);
}

.planner-tab-btn.active .planner-acc-sub {
  color: rgba(255, 255, 255, 0.72);
}

.planner-tab-btn.active .planner-card-icon {
  background: var(--gold);
  color: var(--navy);
}

.planner-tab-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.planner-tab-btn .planner-card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--gold-light);
  font-size: 1.3rem;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(10, 22, 40, 0.12);
}

.planner-tab-btn:not(.active) .planner-card-icon {
  background: var(--navy);
  color: var(--gold-light);
}

/* Small eyebrow */
.planner-acc-label {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212, 106, 12, 0.12);
  border: 1px solid rgba(212, 106, 12, 0.28);
  padding: 0.18rem 0.5rem;
  border-radius: 2px;
  line-height: 1.2;
}

/* Main planner name — primary header */
.planner-acc-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 400;
  font-synthesis: none;
}

/* Supporting line under the name */
.planner-acc-sub {
  display: block;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-muted);
  font-weight: 400;
}

.planner-tab-content {
  background: var(--white);
}

.planner-tab-pane {
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

.planner-tab-pane .planner-steps {
  margin-top: 0.25rem;
}

.planner-tab-pane .planner-step .step-body {
  max-width: none;
}

/* Legacy card pieces still used as text classes */
.planner-card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--gold-light);
  font-size: 1.35rem;
  border-radius: 2px;
}

.planner-card-tag {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.planner-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 1.75rem);
  color: var(--navy);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-weight: 600;
}

.planner-card-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 32em;
}

@media (max-width: 767.98px) {
  .planner-tabs {
    flex-direction: column;
  }

  .planner-tabs .nav-item {
    flex: 1 1 auto;
    width: 100%;
  }

  .planner-tab-btn {
    border-bottom: 1px solid rgba(10, 22, 40, 0.06) !important;
    border-left: 3px solid transparent !important;
  }

  .planner-tab-btn.active {
    border-left-color: var(--gold) !important;
    border-bottom-color: rgba(10, 22, 40, 0.06) !important;
  }
}

@media (max-width: 575.98px) {
  .planner-acc-sub {
    display: none;
  }

  .planner-tab-btn {
    gap: 0.75rem;
    padding: 1rem 1.1rem;
  }

  .planner-tab-btn .planner-card-icon {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }

  .planner-acc-name {
    font-size: 1.3rem;
  }
}

.planner-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  position: relative;
}

.planner-steps::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(212, 106, 12, 0.15));
  opacity: 0.55;
}

.planner-step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  margin-bottom: 0;
  padding: 0.85rem 0;
  border-bottom: 0;
  position: relative;
}

.planner-step:not(:last-child) {
  margin-bottom: 0.15rem;
}

.planner-step .step-num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid rgba(212, 106, 12, 0.35);
  border-radius: 50%;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
}

.planner-step .step-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0.15rem 0 0.35rem;
  letter-spacing: -0.01em;
}

.planner-step .step-body p {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.layout-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.layout-chips span {
  background: var(--cream);
  border: 1px solid rgba(10, 22, 40, 0.08);
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.layout-chips span:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold-light);
}

/* Planner image grids — full width, equal spacing */
.layout-plans {
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  box-sizing: border-box;
  /* Room for elevated hover cards */
  padding: 0.35rem 0.15rem 0.85rem;
  overflow: visible;
}

.layout-plans--wardrobe-inventory {
  grid-template-columns: repeat(3, 1fr);
}

.layout-plans--wardrobe-style,
.layout-plans--wardrobe-zones {
  grid-template-columns: repeat(4, 1fr);
}

.planner-tab-pane .layout-plans,
#kitchen-planner .layout-plans,
.planner-tab-pane .layout-plans--wardrobe-inventory,
.planner-tab-pane .layout-plans--wardrobe-style,
.planner-tab-pane .layout-plans--wardrobe-zones {
  width: 100%;
  max-width: none;
}

.layout-plan {
  margin: 0;
  width: 100%;
  min-width: 0;
  background: var(--cream);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 3px;
  overflow: hidden;
  transition:
    border-color 0.35s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.34, 1.45, 0.64, 1);
  cursor: default;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.layout-plan:hover {
  border-color: rgba(212, 106, 12, 0.65);
  box-shadow:
    0 18px 36px rgba(10, 22, 40, 0.14),
    0 8px 16px rgba(10, 22, 40, 0.08);
  transform: translateY(-10px) scale(1.02);
  z-index: 2;
  position: relative;
}

.layout-plan img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  background: #faf8f5;
  flex: 1 1 auto;
}

.layout-plan figcaption {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0.5rem 0.35rem 0.55rem;
  background: var(--white);
  border-top: 1px solid rgba(10, 22, 40, 0.06);
  margin: 0;
}

.layout-plan:hover figcaption {
  color: var(--gold);
}

@media (max-width: 991.98px) {
  .layout-plans {
    gap: 0.85rem;
  }

  /* Keep equal columns; wrap naturally at full width */
  .layout-plans:not([class*="wardrobe"]) {
    grid-template-columns: repeat(5, 1fr);
  }

  .layout-plans--wardrobe-inventory {
    grid-template-columns: repeat(3, 1fr);
  }

  .layout-plans--wardrobe-style,
  .layout-plans--wardrobe-zones {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767.98px) {
  .layout-plans:not([class*="wardrobe"]),
  .layout-plans--wardrobe-style,
  .layout-plans--wardrobe-zones {
    grid-template-columns: repeat(2, 1fr);
  }

  .layout-plans--wardrobe-inventory {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575.98px) {
  .layout-plans,
  .layout-plans:not([class*="wardrobe"]),
  .layout-plans--wardrobe-inventory,
  .layout-plans--wardrobe-style,
  .layout-plans--wardrobe-zones {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

.planner-visual {
  position: relative;
  margin: 1.25rem 0 0.5rem;
  overflow: hidden;
  border-radius: 2px;
}

.planner-visual img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
  will-change: transform;
}

.planner-card:hover .planner-visual img {
  transform: scale(1.07);
  filter: brightness(var(--img-brightness-hover));
}

.planner-visual-caption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  background: rgba(6, 16, 28, 0.78);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  backdrop-filter: blur(4px);
}

.planner-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(10, 22, 40, 0.06);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.planner-card-link:hover {
  color: var(--gold);
  gap: 0.65rem;
}

.planner-cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.planner-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.planner-cta-inner::after {
  content: "";
  position: absolute;
  right: -20%;
  top: -60%;
  width: 50%;
  height: 200%;
  background: radial-gradient(circle, rgba(212, 106, 12, 0.18), transparent 65%);
  pointer-events: none;
}

.planner-cta-inner h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  color: #fff;
  margin: 0 0 0.35rem;
  font-weight: 400;
  font-synthesis: none;
}

.planner-cta-inner p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.8;
  max-width: 28em;
}

.planner-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 575.98px) {
  .planner-card-head {
    flex-direction: column;
    gap: 0.85rem;
  }

  .planner-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Services page */
.service-detail-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 2rem;
  height: 100%;
  border-radius: 2px;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  will-change: transform;
}
.service-detail-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 18px 40px rgba(6, 16, 28, 0.14),
    0 6px 14px rgba(6, 16, 28, 0.08);
  border-color: var(--border-gold);
  z-index: 2;
  position: relative;
}
.service-detail-card .svc-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 1.35rem;
  margin-bottom: 1.15rem;
}
.service-detail-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.service-detail-card p {
  color: var(--text-muted);
  margin: 0;
  line-height: 1.7;
}
.full-circle-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--navy);
  color: #fff;
  height: 100%;
  border: 1px solid rgba(212, 106, 12, 0.2);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.full-circle-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 106, 12, 0.35);
  border-color: rgba(212, 106, 12, 0.55);
}
.full-circle-card i {
  font-size: 1.75rem;
  color: var(--gold-light);
  margin-bottom: 1rem;
  display: block;
}
.full-circle-card h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}
.full-circle-card p {
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.65;
}

/* Appointment page */
.appointment-intro {
  max-width: 40rem;
}
.design-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 576px) {
  .design-type-grid { grid-template-columns: repeat(3, 1fr); }
}
.design-type-option {
  position: relative;
}
.design-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.design-type-option label {
  display: block;
  border: 1px solid var(--border);
  padding: 0.85rem 0.75rem;
  text-align: center;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: var(--transition);
  background: var(--cream);
  color: var(--navy);
  margin: 0;
}
.design-type-option input:checked + label {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.design-type-option label:hover {
  border-color: var(--gold);
}

/* Map embed */
.map-embed {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  filter: grayscale(0.15);
}
.map-wrap {
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Footer visiting hours */
.footer-hours {
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-hours li {
  margin-bottom: 0.25rem !important;
}

/* Catalog product cards multi-attr */
.catalog-item.is-hidden {
  display: none !important;
}

/* Hours strip on contact */
.hours-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(212, 106, 12,0.12);
  border: 1px solid var(--border-gold);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--navy);
  margin-top: 0.75rem;
}

/* Sticky logo stays same compact size as main menu */
body.nav-scrolled .navbar-brand-vnc .brand-logo {
  height: 58px;
  max-width: min(280px, 52vw);
}

/* ============================================================
   Mobile layout polish
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/* Tablet + phone: header / nav */
@media (max-width: 991.98px) {
  .navbar-brand-vnc {
    margin-left: 0.35rem;
    margin-right: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  .navbar-brand-vnc .brand-logo {
    height: 50px;
    max-width: min(220px, calc(100vw - 7.5rem));
  }

  body.nav-scrolled .navbar-brand-vnc .brand-logo {
    height: 50px;
    max-width: min(220px, calc(100vw - 7.5rem));
  }

  .navbar-vnc .container {
    flex-wrap: wrap;
  }

  .navbar-vnc .navbar-toggler {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Dropdowns inside mobile collapse (not floating) */
  .navbar-vnc .nav-item.dropdown:hover > .dropdown-menu {
    display: none;
  }

  .navbar-vnc .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    min-width: 0;
    margin: 0 0 0.35rem;
    padding: 0.25rem 0 0.35rem;
    border: none;
    border-left: 2px solid rgba(212, 106, 12, 0.35);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.25);
    transform: none !important;
  }

  .navbar-vnc .dropdown-menu.show {
    display: block !important;
  }

  .navbar-vnc .dropdown-item {
    padding: 0.65rem 1rem 0.65rem 1.15rem;
    white-space: normal;
    font-size: 0.74rem;
  }

  /* Nested By Style submenu — indented under parent on mobile */
  .navbar-vnc .dropdown-menu .dropend > .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.15rem 0 0.25rem;
    border: none;
    border-left: 2px solid rgba(212, 106, 12, 0.28);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.18);
    transform: none !important;
  }
  .navbar-vnc .dropdown-menu .dropend > .dropdown-menu .dropdown-item {
    padding-left: 1.5rem;
    font-size: 0.7rem;
  }
  .navbar-vnc .dropdown-menu .dropdown-item.dropdown-toggle::after {
    float: right;
    margin-top: 0.35em;
  }

  .navbar-vnc .nav-link {
    white-space: normal;
  }

  .navbar-vnc .nav-item.ms-lg-2 {
    margin-left: 0 !important;
    margin-top: 0.5rem;
  }

  .btn-nav-cta {
    width: 100%;
    text-align: center;
    margin-top: 0.25rem;
  }

  /* Hero captions on tablet/phone — still near side arrow, slightly tighter */
  .hero-carousel .hero-slide {
    min-height: min(calc(100dvh - 4.5rem), 620px);
  }

  .hero-slide-caption {
    align-items: center;
    padding: clamp(2.75rem, 6vh, 4rem) 1rem 3rem clamp(3rem, 8vw, 4rem);
    background: none;
  }

  .hero-slide-caption .caption-inner {
    max-width: min(100%, 18rem);
    margin-left: 0;
  }

  .hero-slide-caption .hero-title {
    font-size: clamp(1.32rem, 4.4vw, 1.68rem);
    line-height: 1.14;
    max-width: none;
  }

  .hero-slide-caption .hero-copy .hero-title {
    max-width: min(100%, 12em);
  }

  .hero-slide-caption .hero-sub {
    font-size: clamp(0.8rem, 2.6vw, 0.92rem);
  }

  .hero-slide-caption .hero-sub {
    font-size: 0.8rem;
    margin-bottom: 0.85rem;
  }

  .hero-slide-caption .hero-copy .hero-sub {
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .hero-slide-caption .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .hero-slide-caption .hero-actions .btn {
    flex: 1 1 auto;
    min-width: 9.5rem;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-carousel .carousel-indicators {
    margin-bottom: 0.65rem;
  }

  /* Catalog / filters */
  .catalog-subnav a,
  .catalog-subnav button {
    flex: 0 0 auto;
  }

  .catalog-toolbar .filter-btns,
  .filter-btns {
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 0.4rem;
  }

  .catalog-toolbar .filter-btn,
  .filter-btn {
    margin: 0;
  }

  .page-hero {
    min-height: 220px;
    padding: clamp(6rem, 14vh, 8rem) 0 3.5rem;
  }

  body.page-kitchens .page-hero,
  body.page-wardrobes .page-hero,
  body.page-designs .page-hero,
  body.page-services .page-hero,
  body.page-about .page-hero,
  body.page-gallery .page-hero,
  body.page-legal .page-hero {
    min-height: min(58vh, 480px);
    min-height: min(58dvh, 480px);
    padding: clamp(6rem, 14vh, 8rem) 0 3.5rem;
    align-items: flex-start;
  }

  /* Contact mobile — reference (unchanged) */
  body.page-contact .page-hero {
    min-height: min(58vh, 480px);
    min-height: min(58dvh, 480px);
    padding-top: clamp(6rem, 14vh, 8rem);
    padding-bottom: 3.5rem;
  }

  .page-hero h1 {
    font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  }

  .page-hero .page-hero-sub,
  .page-hero p {
    font-size: 0.78rem;
  }

  body.page-kitchens .page-hero.page-hero-kitchens {
    min-height: min(58vh, 480px);
    min-height: min(58dvh, 480px);
    padding: clamp(6rem, 14vh, 8rem) 0 3.5rem;
  }

  body.page-kitchens .page-hero.page-hero-style-detail {
    min-height: min(58vh, 480px);
    min-height: min(58dvh, 480px);
    padding: clamp(6rem, 14vh, 8rem) 0 3.5rem;
  }

  body.page-kitchens .page-hero.page-hero-veneer-laminate {
    padding-top: clamp(6rem, 14vh, 8rem);
    padding-bottom: 3.5rem;
  }

  .page-hero > .container {
    padding-left: 1.35rem;
  }

  .map-embed {
    height: 280px;
  }

  .footer-vnc .row > [class*="col-"] {
    margin-bottom: 0.5rem;
  }

  .footer-brand .brand-logo {
    height: 44px;
    max-width: min(200px, 75vw);
  }

  .create-own-box img,
  .create-own-box .create-own-media-img {
    aspect-ratio: 1 / 1.03;
    min-height: 0;
  }

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

  .planner-step {
    grid-template-columns: 2.3rem 1fr;
    gap: 0.75rem;
  }

  .planner-steps::before {
    left: 1.05rem;
  }

  /* Float buttons: stack without overlap */
  .whatsapp-float {
    right: 1rem;
    bottom: 1rem;
  }

  .back-to-top {
    right: 1rem;
    bottom: 4.75rem;
  }
}

/* Phones */
@media (max-width: 575.98px) {
  .navbar-brand-vnc {
    margin-left: 0.15rem;
  }

  .navbar-brand-vnc .brand-logo {
    height: 42px;
    max-width: min(180px, calc(100vw - 6.5rem));
  }

  body.nav-scrolled .navbar-brand-vnc .brand-logo {
    height: 42px;
    max-width: min(180px, calc(100vw - 6.5rem));
  }

  .navbar-vnc {
    padding: 0.45rem 0;
  }

  body.nav-scrolled .navbar-vnc {
    padding: 0.45rem 0;
  }

  .hero-carousel .hero-slide {
    min-height: min(calc(100dvh - 4rem), 560px);
  }

  .hero-slide-caption {
    align-items: center;
    padding: clamp(2.5rem, 5.5vh, 3.75rem) 0.85rem 2.75rem 2.75rem;
  }

  .hero-slide-caption .caption-inner {
    margin-left: 0;
    max-width: min(100%, 20rem);
  }

  .hero-slide-caption .hero-eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
  }

  .hero-slide-caption .hero-title {
    font-size: clamp(1.15rem, 4.8vw, 1.4rem);
    margin-bottom: 0.4rem;
    line-height: 1.14;
  }

  .hero-slide-caption .hero-sub {
    font-size: 0.76rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
  }

  .hero-slide-caption .hero-copy .hero-sub {
    width: auto;
    min-width: 0;
    max-width: 100%;
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .hero-slide-caption .hero-actions {
    flex-direction: column;
  }

  .hero-slide-caption .hero-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .usp-band {
    padding: 2rem 1rem;
  }

  .usp-band p {
    font-size: 1.05rem;
  }

  .section-head {
    margin-bottom: 2rem;
  }

  .category-card .cat-img {
    height: 170px;
  }

  .why-choose-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .sellers-grid .seller-card .img-wrap img,
  .kitchen-card .img-wrap img {
    height: 220px;
    object-fit: cover;
  }

  .contact-form-wrap .btn-gold,
  .appointment-form-wrap .btn-gold {
    width: 100%;
  }

  .contact-submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-captcha {
    width: 100%;
  }

  .contact-form-wrap .contact-captcha-input.form-control {
    flex: 1 1 auto;
    width: auto;
  }

  .contact-form-wrap .contact-submit-row .btn-gold {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  .map-embed {
    height: 240px;
  }

  .hours-pill {
    flex-wrap: wrap;
    font-size: 0.8rem;
  }

  /* Reduce horizontal padding collisions with float buttons */
  .cta-banner .content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Very small phones */
@media (max-width: 379.98px) {
  .navbar-brand-vnc .brand-logo {
    height: 42px;
    max-width: min(168px, calc(100vw - 5.75rem));
  }

  .hero-slide-caption .hero-title {
    font-size: 1.15rem;
  }
}

/* Gallery page — kitchen / wardrobe only */
.gallery-page-section .gallery-item {
  cursor: pointer;
  overflow: hidden;
  background: var(--navy-deep);
}
.gallery-page-section .gallery-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
  filter: brightness(var(--img-brightness)) saturate(1.03);
}
.gallery-page-section .gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(var(--img-brightness-hover)) saturate(1.06);
}
.gallery-cat-filters {
  justify-content: center;
}

#galleryGrid .gallery-item.is-hidden {
  display: none !important;
}


/* Centered dual CTAs below card grids (outline + solid gold) */
.card-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}
.card-cta-actions .btn {
  margin: 0;
}


/* Sibling prev/next nav above image grids (mirrors bottom finish-pager) */
.finish-pager-top {
  margin-top: 2rem;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 1.25rem;
  border-top: none;
  border-bottom: 1px solid rgba(10, 22, 40, 0.08);
}

/*
 * Sitewide slight photo zoom: GPU-composited scale only.
 * Same ease-out curve on hover in and hover out (menu, cards, gallery).
 */
:is(
  .gallery-item img,
  .gallery-page-section .gallery-item img,
  .project-card img,
  .seller-card .img-wrap img,
  .blog-card .img-wrap img,
  .kitchen-card .img-wrap img,
  .about-editorial-media img,
  .about-lifestyle-tile img,
  .about-finish-tile img,
  .planner-visual img,
  .navbar-vnc .style-card-img img,
  .service-tile-img,
  .category-card .cat-img
) {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  transition: transform var(--img-zoom-duration) var(--ease-out), filter 0.5s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

:is(
  .gallery-item:hover img,
  .gallery-page-section .gallery-item:hover img,
  .project-card:hover img,
  .seller-card:hover .img-wrap img,
  .blog-card:hover .img-wrap img,
  .kitchen-card:hover .img-wrap img,
  .about-editorial-media:hover img,
  .about-lifestyle-tile:hover img,
  .about-finish-tile:hover img,
  .planner-card:hover .planner-visual img,
  .navbar-vnc .style-card-link:hover .style-card-img img,
  .navbar-vnc .style-card-link:focus-visible .style-card-img img,
  .service-tile:hover .service-tile-img,
  .category-card:hover .cat-img
) {
  transform: translate3d(0, 0, 0) scale(var(--img-zoom-scale));
}

/* ---------- Error pages (404 / 500) ---------- */
.page-error {
  background: var(--navy-deep);
}
.error-stage {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 7rem);
  min-height: calc(100dvh - 7rem);
  display: flex;
  align-items: center;
  padding: clamp(3.5rem, 8vh, 6rem) 0 clamp(4rem, 9vh, 6.5rem);
  background: var(--navy-deep);
  overflow: hidden;
}
.error-stage-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  filter: brightness(0.42) saturate(0.85);
}
.error-stage-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 16, 28, 0.92) 0%, rgba(6, 16, 28, 0.72) 42%, rgba(6, 16, 28, 0.45) 100%),
    linear-gradient(180deg, rgba(6, 16, 28, 0.25) 0%, rgba(6, 16, 28, 0.55) 100%);
}
.error-copy {
  position: relative;
  z-index: 1;
  max-width: 36rem;
  color: #fff;
}
.page-error .error-copy .section-label {
  color: var(--gold-light);
}
.error-code {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4.75rem, 16vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--gold);
  margin: 0.15rem 0 0.85rem;
}
.page-error .error-copy .section-title {
  color: #fff;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  margin-bottom: 0.85rem;
}
.page-error .error-copy .divider-gold {
  margin-bottom: 1.15rem;
}
.error-lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 32rem;
  margin-bottom: 1.75rem;
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.error-actions .btn {
  min-width: 10.5rem;
}
.page-error .error-actions .btn-outline-gold {
  color: #ffffff;
  border-color: var(--gold);
  background: transparent;
}
.page-error .error-actions .btn-outline-gold:hover,
.page-error .error-actions .btn-outline-gold:focus-visible {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}
.page-error .error-actions .btn-gold {
  color: #ffffff;
}
.error-shortcuts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}
.error-shortcuts a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
}
.error-shortcuts a:hover,
.error-shortcuts a:focus-visible {
  color: var(--gold-light);
}
@media (max-width: 575.98px) {
  .error-stage {
    min-height: calc(100dvh - 4.75rem);
    padding: 2.75rem 0 3.25rem;
  }
  .error-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .error-actions .btn {
    width: 100%;
    min-width: 0;
    text-align: center;
  }
}