/* ============================================================
   Ranch House Doors - Design System
   "Redefining the Entrance" since 1990
   ============================================================ */

/* --- Font Faces --- */
@font-face {
  font-family: 'RocGroteskWide';
  src: url('/static/fonts/rocgroteskwide-bold.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Ampersand fix for the DEMO Roc Grotesk Wide font.
   The DEMO version replaces & with a visible watermark glyph. We render
   ampersands in Source Serif 4 italic instead -- this also reads as the
   stylistic "&" architects expect in collection names. Remove once the
   licensed Roc Grotesk is in place. */
.amp {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  color: inherit;
  text-transform: none;
}

/* --- CSS Custom Properties (Brand Tokens) --- */
:root {
  /* Brand palette */
  --slate-blue: #5B7184;
  --nautical-white: #F4F4F2;
  --matte-black: #3A3A3A;
  --brushed-nickel: #9DA5A9;
  --surface: #F4F4F2;
  --surface-2: #EEEEED;
  --white: #ffffff;
  --slate-blue-dk: #4a5e6f;
  --slate-blue-lt: #7a8fa0;

  /* Typography stacks */
  --font-headline: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  --font-subhead: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing scale */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 2rem;
  --sp-xl: 3rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;
  --sp-4xl: 8rem;

  /* Layout */
  --nav-h: 96px;
  --max-w: 1280px;
  --radius: 2px;
  --transition: 0.3s ease;
}


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

html {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.75;
  color: var(--matte-black);
  background: var(--white);
}

button, input, select, textarea {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.92;
}

p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.65;
}

img, video {
  max-width: 100%;
  display: block;
  /* height: auto removed so child rules with
     explicit height (e.g. hero images using
     object-fit: cover) can take effect. Modern
     browsers compute height from the intrinsic
     aspect ratio when only width is set. */
}

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

ul, ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.t-headline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.92;
}

.t-subhead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0em;
  line-height: 1.5;
}

.t-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.75;
  font-size: 0.9375rem;
}

.t-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Headline sizes */
.t-h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.t-h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.t-h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.t-h4 { font-size: clamp(1.125rem, 2vw, 1.5rem); }

/* Body sizes */
.t-large { font-size: 1.125rem; }
.t-small { font-size: 0.875rem; }
.t-xs    { font-size: 0.75rem; }


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: all 0.22s ease;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--slate-blue);
  color: var(--nautical-white);
  border-color: var(--slate-blue);
}
.btn-primary:hover {
  background: var(--slate-blue-dk);
  border-color: var(--slate-blue-dk);
}

.btn-ghost {
  background: transparent;
  color: var(--nautical-white);
  border-color: rgba(244, 244, 242, 0.45);
}
.btn-ghost:hover {
  background: rgba(244, 244, 242, 0.08);
  border-color: rgba(244, 244, 242, 0.75);
}

.btn-ghost-dark {
  background: transparent;
  color: var(--matte-black);
  border-color: rgba(58, 58, 58, 0.25);
}
.btn-ghost-dark:hover {
  background: rgba(58, 58, 58, 0.04);
  border-color: var(--matte-black);
}

.btn-outline-dark {
  background: transparent;
  color: var(--matte-black);
  border-color: var(--matte-black);
}
.btn-outline-dark:hover {
  background: var(--matte-black);
  color: var(--nautical-white);
}

.btn-dark {
  background: var(--matte-black);
  color: var(--nautical-white);
  border-color: var(--matte-black);
}
.btn-dark:hover {
  background: #222;
  border-color: #222;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-lg);
  z-index: 1000;
  transition: background var(--transition);
}

.nav.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--surface-2);
}

/* Logo swap is driven by JS (#navLogo .src) so a single <img> renders.
   Server picks initial src by path; JS handles the scroll transition. */

/* Nav text + controls flip to dark when nav has white background. */
.nav.scrolled .nav-link {
  color: var(--matte-black);
}
.nav.scrolled .nav-link:hover {
  color: var(--slate-blue);
}
.nav.scrolled .nav-cta {
  color: var(--matte-black);
  border-color: rgba(58, 58, 58, 0.35);
}
.nav.scrolled .nav-cta:hover {
  background: var(--matte-black);
  color: var(--nautical-white);
  border-color: var(--matte-black);
}
.nav.scrolled .nav-ham-line {
  background: var(--matte-black);
}

.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0;
  gap: 14px;
}

.nav-brand:hover .nav-logo {
  opacity: 0.7;
  transition: opacity 0.2s;
}

.nav-logo {
  height: 78px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .nav { height: 70px; }
  .nav-logo { height: 50px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}

.nav-item {
  position: relative;
}

.nav-link {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.75);
  transition: color var(--transition);
  cursor: pointer;
  /* Keep multi-word labels (e.g. "Door Studio") on a single
     line so a narrowed window never breaks one nav item onto
     two rows while the others stay single-line. */
  white-space: nowrap;
}
.nav-link:hover {
  color: var(--nautical-white);
}

/* Nav dropdowns */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--surface-2);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  min-width: 220px;
  padding: 8px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown.open .nav-dropdown {
  opacity: 1;
  pointer-events: all;
}
.nav-dropdown-link {
  display: block;
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--matte-black);
  transition: background var(--transition);
}
.nav-dropdown-link:hover {
  background: var(--surface);
  color: var(--slate-blue);
}
.nav-dropdown-divider {
  height: 1px;
  background: var(--surface-2);
  margin: 6px 0;
}
.nav-dropdown-section-label {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  padding: 4px 16px 2px;
}

/* Resources has enough items to read better as two columns -- this
   also keeps it short enough to never need the dropdown scrollbar. */
#resourcesDropdown {
  min-width: 380px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px;
  gap: 0;
}

#resourcesDropdown .nav-dropdown-link {
  padding: 9px 14px;
}

#resourcesDropdown .nav-dropdown-divider {
  grid-column: 1 / -1;
}

.nav-cta {
  padding: 8px 20px;
  border: 1px solid rgba(244, 244, 242, 0.4);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nautical-white);
  transition: all var(--transition);
}
.nav-cta:hover {
  background: var(--nautical-white);
  color: var(--matte-black);
  border-color: var(--nautical-white);
}

/* ----- Mobile hamburger button ----- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1100;
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.nav-ham-line {
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(244, 244, 242, 0.85);
  border-radius: 0;
  transition: all 0.25s ease;
  transform-origin: center;
  flex-shrink: 0;
}

.nav-hamburger.open .nav-ham-line {
  background: var(--matte-black);
}

.nav-hamburger.open .nav-ham-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open .nav-ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.open .nav-ham-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----- Mobile slide-in menu ----- */
.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 999;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile-menu.open {
  transform: translateX(0);
}

.nav-mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--matte-black);
  padding: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-mobile-nav {
  flex: 1;
  padding: 24px 32px 24px;
  display: flex;
  flex-direction: column;
}

.nav-mobile-item {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--surface-2);
  display: block;
  min-height: 44px;
}

.nav-mobile-group {
  border-bottom: 1px solid var(--surface-2);
}

.nav-mobile-group-toggle {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  cursor: pointer;
  min-height: 44px;
}

.nav-mobile-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--brushed-nickel);
}

.nav-mobile-group-toggle.open .nav-mobile-chevron {
  transform: rotate(180deg);
}

.nav-mobile-group-items {
  display: none;
  flex-direction: column;
  padding: 0 0 12px 16px;
}

.nav-mobile-group-items.open {
  display: flex;
}

.nav-mobile-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-2);
  display: flex;
  align-items: center;
  min-height: 44px;
}

.nav-mobile-sub:last-child {
  border-bottom: none;
}

.nav-mobile-sub-divider {
  height: 1px;
  background: var(--surface-2);
  margin: 4px 0;
}

.nav-mobile-footer {
  padding: 24px 32px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--surface-2);
}

.nav-mobile-dealer-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px;
}

@media (max-width: 960px) {
  .nav-hamburger { display: flex; }
  .nav-mobile-menu { display: flex; }
}


/* ============================================================
   SECTION EYEBROW
   ============================================================ */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--slate-blue);
  margin-bottom: var(--sp-lg);
}

.section-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--slate-blue);
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.20s; }
.reveal-d3 { transition-delay: 0.32s; }


/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(58, 58, 58, 0.08);
}

.card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--surface-2);
}

.card-body {
  padding: var(--sp-lg);
}

.card-title {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--sp-sm);
}

.card-text {
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
}


/* ============================================================
   GRID SYSTEM
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}

.grid {
  display: grid;
  gap: var(--sp-lg);
}

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

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
}


/* ============================================================
   HERO
   ============================================================ */

/* Hero: one video plays to end, crossfades into a static photo. */
.hero {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: var(--matte-black);
}

/* Static hero photo. */
.hero-photo-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-photo-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    160deg,
    rgba(20, 26, 32, 0.35) 0%,
    rgba(20, 26, 32, 0.15) 40%,
    rgba(20, 26, 32, 0.65) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 5rem 5.5rem;
}

.hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.65);
  margin-bottom: 0.75rem;
}

.hero-h1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1.5rem;
  line-height: 0.88;
}

/* All three headline lines render at one identical size - "THE"
   is no longer a smaller accent line. */
.hero-line-1,
.hero-line-2,
.hero-line-3 {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 11vw, 10rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.88;
  display: block;
  font-style: normal;
}

.hero-sub {
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  color: rgba(244, 244, 242, 0.78);
  margin-bottom: 2.5rem;
  max-width: 480px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}

.scroll-line {
  width: 40px;
  height: 1px;
  background: rgba(244, 244, 242, 0.3);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--nautical-white);
  animation: scanline 2s ease-in-out infinite;
}
@keyframes scanline {
  0% { left: -100%; }
  100% { left: 100%; }
}

.scroll-cue span {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.45);
  font-weight: 400;
  font-family: 'Inter', sans-serif;
}

@media (max-width: 960px) {
  .hero-content { padding: 0 2rem 4rem; }
  .scroll-cue { left: 2rem; }
  .hero-line-1,
  .hero-line-2,
  .hero-line-3 { font-size: clamp(2.8rem, 10vw, 4.5rem); }
}


/* ============================================================
   SECTIONS
   ============================================================ */

.section {
  padding: 6rem 0;
}

.section-dark {
  background: var(--matte-black);
  color: var(--nautical-white);
}

.section-surface {
  background: var(--surface);
}

.section-header {
  margin-bottom: var(--sp-3xl);
}

.section-header .t-headline {
  margin-top: var(--sp-sm);
}


/* ============================================================
   VALUE PROPS
   ============================================================ */

.value-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--white);
}

.vp {
  padding: 5rem 4rem;
  border-right: 1px solid var(--surface-2);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.vp.visible { opacity: 1; transform: none; }
.vp:first-child { transition-delay: 0s; }
.vp:nth-child(2) { transition-delay: 0.12s; }
.vp:last-child { border-right: none; transition-delay: 0.24s; }

.vp-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--slate-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease 0.3s;
}
.vp.visible .vp-bar { transform: scaleX(1); }

.vp-num {
  position: absolute;
  bottom: -1rem;
  right: 0.5rem;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 10rem;
  line-height: 1;
  color: var(--surface-2);
  letter-spacing: -0.06em;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.vp-content {
  position: relative;
  z-index: 1;
}

.vp-icon {
  width: 36px;
  height: 1px;
  background: var(--slate-blue);
  margin-bottom: 2.25rem;
}

.vp-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.vp-text {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--brushed-nickel);
  letter-spacing: -0.01em;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: #2a2a2a;
  color: var(--nautical-white);
  padding: 5rem 5rem 3rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-2xl);
  margin-bottom: var(--sp-3xl);
}

.footer-brand {
  display: inline-block;
}

.footer-logo {
  height: 30px;
  width: auto;
  display: block;
}

.footer-brand-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: rgba(244, 244, 242, 0.35);
  margin-top: var(--sp-md);
  max-width: 320px;
}

.footer-col-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-lg);
  color: rgba(244, 244, 242, 0.55);
}

.footer-link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(244, 244, 242, 0.4);
  margin-bottom: var(--sp-sm);
  transition: color var(--transition);
}
.footer-link:hover {
  color: rgba(244, 244, 242, 0.85);
}

.footer-staff-link {
  color: rgba(244, 244, 242, 0.18);
}
.footer-staff-link:hover {
  color: rgba(244, 244, 242, 0.18);
}


/* ============================================================
   FEATURED PHOTO GRID (large left + two stacked right)
   ============================================================ */

.featured-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-md);
  height: 600px;
}

.featured-grid-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.featured-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  transition: transform 0.6s ease, filter 0.4s ease;
  filter: brightness(0.88);
}

.featured-grid-item.featured-tall img {
  object-position: center 60%;
}

/* Modern Spanish hero crops the left edge of the door - shift the
   crop window leftward so the full door shows. */
.featured-grid-item[data-slug="modern-spanish"] img {
  object-position: 18% 60%;
}

.featured-grid-item:hover img {
  transform: scale(1.03);
  filter: brightness(1.0);
}

.featured-grid-item.featured-tall {
  grid-row: 1 / 3;
}

.featured-grid-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(
    to top,
    rgba(15,20,25,0.65) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.featured-grid-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 2;
}

.featured-grid-caption .t-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.85);
  margin-bottom: 0;
}


/* ============================================================
   GALLERY GRID (3-column photo grid)
   ============================================================ */

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

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  cursor: pointer;
}

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

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

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(58, 58, 58, 0.65) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-lg);
  color: var(--nautical-white);
}

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

.gallery-item-style {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: var(--sp-xs);
}

.gallery-item-name {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}


/* ============================================================
   VIDEO WRAP (premium video treatment - no flash on end)
   ============================================================ */

.video-wrap {
  position: relative;
  overflow: hidden;
  background: var(--matte-black);
}

.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   COLLECTIONS STRIP (6 cards, horizontal)
   ============================================================ */

.collections-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-md);
}

.collection-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3/4;
  cursor: pointer;
}

.collection-card img,
.collection-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.collection-card:hover img,
.collection-card:hover video {
  transform: scale(1.05);
}

.collection-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(58, 58, 58, 0.7) 0%, transparent 40%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-lg);
  color: var(--nautical-white);
}

.collection-card-title {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
}


/* Value props grid - see .value-props / .vp rules in VALUE PROPS section above */

/* Story section */
.story-quote {
  border-left: 3px solid var(--slate-blue);
  padding-left: 2rem;
  margin: 2.5rem 0;
}
.story-quote p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--matte-black);
  margin-bottom: 0.75rem;
}
.story-quote cite {
  display: block;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
}

.story-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  border-top: 1px solid var(--surface-2);
  padding-top: 2.5rem;
}
.story-stat-number {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--slate-blue);
  display: block;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}
.story-stat-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
}

/* Materials chips */
.materials-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.material-chip {
  border: 1px solid rgba(244, 244, 242, 0.20);
  color: rgba(244, 244, 242, 0.7);
  padding: 10px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}
.material-chip:hover {
  background: rgba(244, 244, 242, 0.1);
  color: var(--nautical-white);
}

/* Dealer CTA cards */
.dealer-cta-card {
  display: flex;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2.5rem;
  transition: background var(--transition), border-color var(--transition);
}
.dealer-cta-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.20);
}
.dealer-cta-icon {
  width: 40px;
  height: 40px;
  background: var(--slate-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--nautical-white);
}

/* Gallery teaser */
.gallery-teaser-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
}
.gallery-teaser-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.4s ease, transform 0.4s ease;
}
.gallery-teaser-card:hover img {
  filter: brightness(1) !important;
  transform: scale(1.04);
}
.gallery-teaser-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(58, 58, 58, 0.85);
  color: var(--nautical-white);
  font-size: 9px;
  padding: 3px 7px;
  letter-spacing: 0.1em;
}

/* Collection card v2 (for doors page and homepage) */
.collection-card-v2 {
  display: block;
  background: var(--white);
  overflow: hidden;
  border-radius: var(--radius);
  transition: box-shadow var(--transition), transform var(--transition);
}
.collection-card-v2:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}
.collection-card-v2-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.collection-card-v2-media img,
.collection-card-v2-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: brightness(0.92);
  transition: transform 0.65s ease, filter 0.4s ease;
  display: block;
}
/* Modern Spanish card crops the left edge of the door - shift the
   crop window leftward so the full door shows (homepage + /doors). */
.collection-card-v2[data-slug="modern-spanish"] .collection-card-v2-media img {
  object-position: 30% 45%;
}
.collection-card-v2:hover .collection-card-v2-media img,
.collection-card-v2:hover .collection-card-v2-media video {
  transform: scale(1.04);
  filter: brightness(1);
}
.collection-card-v2-body {
  padding: 2rem;
  border-top: 2px solid var(--slate-blue);
}
.collection-card-v2-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin: 0.5rem 0;
}
.collection-card-v2-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.collection-card-v2-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--slate-blue);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.collection-card-v2-link span:last-child {
  display: inline-block;
  transition: transform 0.25s ease;
}
.collection-card-v2:hover .collection-card-v2-link span:last-child {
  transform: translateX(4px);
}
.collection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.75rem 0;
}
.collection-chip {
  border: 1px solid var(--surface-2);
  padding: 4px 10px;
  font-size: 9px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
}


/* ============================================================
   PAGE HEADER
   ============================================================ */

.page-header {
  padding: calc(var(--nav-h) + 3rem) 0 3rem;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
}
.page-header-dark {
  background: var(--matte-black);
  color: var(--nautical-white);
  min-height: 280px;
}

.breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--brushed-nickel);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--brushed-nickel); }
.breadcrumb a:hover { color: var(--nautical-white); }
.breadcrumb span { margin: 0 0.5rem; }


/* ============================================================
   GALLERY PAGE
   ============================================================ */

/* /doors section divider between garage doors and entry doors/gates */
.doors-section-divider {
  grid-column: 1 / -1;
  padding: 2rem 0 0.5rem;
  border-top: 1px solid var(--surface-2);
  margin-top: 1rem;
}

.doors-section-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
}


/* Compact dark header.
   Top padding includes --nav-h so the eyebrow + title clear
   the position:fixed nav, then adds 3rem of visual breathing room. */
.gallery-page-header {
  background: var(--matte-black);
  padding: calc(var(--nav-h) + 3rem) 4rem 2.5rem;
}

.gallery-page-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-page-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244, 244, 242, 0.5);
  margin-bottom: 0.5rem;
}

.gallery-page-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.9;
  margin-bottom: 0.5rem;
}

.gallery-page-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(244, 244, 242, 0.45);
}

.gallery-page-count {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(244, 244, 242, 0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: 2rem;
  padding-bottom: 4px;
}

/* Unified sticky control bar */
.gallery-control-bar {
  position: sticky;
  top: var(--nav-h, 64px);
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--surface-2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.gallery-control-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Pills wrap onto as many rows as needed and stay centered, so the full
   catalog is visible at once -- no arrows, no horizontal scroll. */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 0;
}

/* Clean, obviously-clickable pills. Active one is filled dark. */
.gallery-tab {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.gallery-tab:hover {
  color: var(--matte-black);
  background: var(--surface-2);
}

.gallery-tab.active {
  color: var(--white);
  background: var(--matte-black);
  border-color: var(--matte-black);
}

/* Grid wrapper: grid starts flush below the control bar */
.gallery-grid-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2px;
}

@media (max-width: 960px) {
  .gallery-page-header { padding: calc(var(--nav-h) + 2rem) 2rem 1.5rem; }
  .gallery-page-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .gallery-page-count { margin-left: 0; padding-bottom: 0; }
  .gallery-control-inner { padding: 0 1rem; }
}

.filter-tab {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 1.25rem;
  height: 100%;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--brushed-nickel);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.filter-tab:hover { color: var(--matte-black); }
.filter-tab.active {
  color: var(--slate-blue);
  border-bottom-color: var(--slate-blue);
}

.gallery-count {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  white-space: nowrap;
}

/* ----- Gallery grid + cards -----
   Square thumbnail with a number caption rendered BELOW the
   image. No badge overlay. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
  padding: 2px;
}

/* Photo grid: 3 columns on desktop, 2 columns on all mobile widths.
   This is the single source of truth for the gallery column count. */
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

.gallery-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: var(--white);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-card.hidden {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  display: none;
}

.gallery-card-img {
  position: relative;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  background: var(--matte-black);
  flex-shrink: 0;
}

/* Entry doors are portrait (~0.75 ratio). Override the panoramic
   ratio so the full door shows without heavy cropping. */
.gallery-card[data-collection="entry-doors"] .gallery-card-img {
  aspect-ratio: 3 / 4;
}
.gallery-card[data-collection="entry-doors"] .gallery-card-img img {
  object-position: center center;
}
.gallery-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease, filter 0.3s ease;
  filter: brightness(0.88);
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.gallery-card:hover .gallery-card-img img {
  transform: scale(1.04);
  filter: brightness(1.0);
}

/* Number caption below the image. */
.gallery-card-caption {
  background: var(--white);
  text-align: center;
  padding: 5px 4px 6px;
  flex-shrink: 0;
  border-top: 1px solid var(--surface-2);
}
.gallery-number {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--matte-black);
  font-style: normal;
  text-align: center;
  padding: 0.5rem 0;
  letter-spacing: 0.04em;
}

/* Hover overlay sits over the image portion only -- caption stays visible. */
.gallery-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 0.75rem 0.75rem;
  background: linear-gradient(to top, rgba(15, 20, 25, 0.90) 0%, transparent 100%);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 2;
}
.gallery-card:hover .gallery-card-overlay {
  transform: translateY(0);
}

.gallery-card-collection {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 242, 244, 0.65);
  margin-bottom: 4px;
}
.gallery-card-link {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-blue-lt);
  text-decoration: none;
  transition: color 0.2s;
}
.gallery-card-link:hover { color: var(--nautical-white); }

/* Empty-state message inside the grid when a collection has no items. */
.gallery-empty-state {
  grid-column: 1 / -1;
  padding: 5rem 2rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  background: var(--white);
}

@media (max-width: 768px) {
  .gallery-number { font-size: 0.75rem; }
}

.gallery-load-more {
  border-color: rgba(244, 244, 242, 0.35);
  color: var(--nautical-white);
}
.gallery-load-more:hover {
  background: var(--nautical-white);
  color: var(--matte-black);
  border-color: var(--nautical-white);
}


/* ============================================================
   GALLERY LIGHTBOX
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.94);
  cursor: pointer;
}

.lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  width: calc(100vw - 80px);
  max-height: calc(100vh - 80px);
}

.lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: rgba(244, 244, 242, 0.6);
  cursor: pointer;
  padding: 8px;
  transition: color 0.15s;
}

.lightbox-close:hover {
  color: var(--nautical-white);
}

.lightbox-img-wrap {
  width: 100%;
  max-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--matte-black);
}

.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  max-height: calc(100vh - 180px);
}

.lightbox-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0 0;
  width: 100%;
}

.lightbox-number {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(244, 244, 242, 0.5);
  letter-spacing: 0.06em;
}

.lightbox-collection {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nautical-white);
  flex: 1;
}

.lightbox-cta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  padding: 10px 20px;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(244, 244, 242, 0.15);
  color: rgba(244, 244, 242, 0.7);
  cursor: pointer;
  padding: 12px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-prev { left: -60px; }
.lightbox-next { right: -60px; }

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(20, 20, 20, 0.9);
  color: var(--nautical-white);
  border-color: rgba(244, 244, 242, 0.3);
}

@media (max-width: 768px) {
  .lightbox-content {
    width: calc(100vw - 32px);
  }
  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 80px;
    transform: none;
  }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}


/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */

.accordion-section {
  border-bottom: 1px solid var(--surface-2);
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.accordion-header h2 {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
}
.accordion-icon {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--slate-blue);
  transition: transform 0.35s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion-body.open {
  max-height: 5000px;
}
.accordion-item {
  border-bottom: 1px solid var(--surface-2);
}
.accordion-item:last-child { border-bottom: none; }
.accordion-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--matte-black);
  transition: color 0.2s ease;
}
.accordion-q:hover { color: var(--slate-blue); }
.accordion-q.active { color: var(--slate-blue); }
.accordion-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion-a.open {
  max-height: 1000px;
}
.accordion-a p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--brushed-nickel);
  padding: 0 0 1rem;
}


/* ============================================================
   PROCESS STEPS
   ============================================================ */

.process-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  padding: 5rem 0;
  border-bottom: 1px solid var(--surface-2);
  align-items: center;
  position: relative;
}
.process-step.reverse {
  direction: rtl;
}
.process-step.reverse > * {
  direction: ltr;
}
.process-step-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius);
}
.process-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.88);
  transition: filter 0.4s ease, transform 0.5s ease;
}
.process-step-img:hover img {
  filter: brightness(1);
  transform: scale(1.02);
}
.process-step-content {
  position: relative;
  z-index: 1;
}
.process-step-number {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-size: 8rem;
  font-weight: 900;
  color: var(--surface-2);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  display: block;
  pointer-events: none;
  user-select: none;
}
.process-step-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.process-inline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.process-inline-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.process-inline-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-2);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 10px;
}


/* ============================================================
   DOOR DETAIL
   ============================================================ */

.door-hero {
  position: relative;
  min-height: 80vh;
  background-size: cover;
  /* Door product is usually mid-frame; bias background toward the door
     rather than letting sky/roof dominate. */
  background-position: center 55%;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 2rem) 0 3rem;
}

/* When a door-hero uses an <img> (video-typed heroes), apply the same
   cropping bias. */
.door-hero img,
.door-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.door-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.10) 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* Asset-rich pages (FEQ, Contemporary) drop a tab nav
   directly under the hero, so the headline sits flush
   to that nav without breathing room. Add bottom padding
   so the title floats clear of the section break. */
.door-hero.asset-rich-hero {
  padding-bottom: 5rem;
}

.door-detail-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 5rem;
  align-items: flex-start;
}
.door-detail-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.door-detail-cta-box {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.door-detail-specs {
  border: 1px solid var(--surface-2);
  padding: 1.5rem;
  border-radius: var(--radius);
}
.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--surface-2);
  font-size: 0.8125rem;
}
.spec-row:last-child { border-bottom: none; }
.spec-label { color: var(--brushed-nickel); }
.spec-value { font-weight: 500; text-align: right; max-width: 60%; }


/* ============================================================
   FORMS
   ============================================================ */

.form-group {
  margin-bottom: 1.25rem;
  flex: 1;
}
.form-row {
  display: flex;
  gap: 1.25rem;
}
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--matte-black);
}
.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--surface-2);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--matte-black);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
}
.form-input:focus {
  outline: none;
  border-color: var(--slate-blue);
}
.form-input.invalid {
  border-color: #c0392b;
}
.form-error {
  font-size: 11px;
  color: #c0392b;
  margin-top: 4px;
}
textarea.form-input {
  resize: vertical;
}
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%239DA5A9' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}


/* ============================================================
   MISC COMPONENTS
   ============================================================ */

.fire-cert-box {
  background: var(--matte-black);
  border-left: 3px solid var(--nautical-white);
  padding: 2.5rem;
  border-radius: 0;
  min-width: 300px;
}

.contact-note {
  background: var(--slate-blue);
  padding: 1.5rem 1.75rem;
  border-radius: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
}
.contact-note p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
}

.warranty-card,
.faq-teaser-card,
.value-card {
  background: var(--white);
  padding: 2rem;
  border-top: 2px solid var(--slate-blue);
  border-radius: 0;
}
.warranty-card h3,
.value-card h3 {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 1rem;
}
.faq-teaser-card {
  background: var(--surface);
}
.faq-teaser-card h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--matte-black);
  margin-bottom: 0.75rem;
}

.content-block { max-width: 720px; }
.content-list { padding-left: 1.25rem; list-style: disc; }
.content-list li { margin-bottom: 0.5rem; }

.product-card {
  display: block;
  background: var(--white);
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--surface-2);
  transition: box-shadow var(--transition);
}
.product-card:hover {
  box-shadow: 0 8px 32px rgba(58, 58, 58, 0.08);
}
.product-card-media {
  height: 300px;
  overflow: hidden;
}
.product-card-media img,
.product-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-card:hover .product-card-media img,
.product-card:hover .product-card-media video {
  transform: scale(1.04);
}
.product-card-body {
  padding: 2rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  color: rgba(244, 244, 242, 0.25);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-white  { color: var(--white); }
.text-slate  { color: var(--slate-blue); }
.text-muted  { color: var(--brushed-nickel); }

.bg-white    { background: var(--white); }
.bg-surface  { background: var(--surface); }
.bg-dark     { background: var(--matte-black); }

.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }
.mt-xl  { margin-top: var(--sp-xl); }
.mt-2xl { margin-top: var(--sp-2xl); }

.mb-sm  { margin-bottom: var(--sp-sm); }
.mb-md  { margin-bottom: var(--sp-md); }
.mb-lg  { margin-bottom: var(--sp-lg); }
.mb-xl  { margin-bottom: var(--sp-xl); }
.mb-2xl { margin-bottom: var(--sp-2xl); }

.py-sm  { padding-top: var(--sp-sm); padding-bottom: var(--sp-sm); }
.py-md  { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }
.py-lg  { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
.py-xl  { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm      { gap: var(--sp-sm); }
.gap-md      { gap: var(--sp-md); }
.gap-lg      { gap: var(--sp-lg); }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .collections-strip { grid-template-columns: repeat(3, 1fr); }
  .door-detail-layout { grid-template-columns: 1fr; }
  .door-detail-sidebar { position: static; }
}

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }

  .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .container { padding: 0 2rem; }
  .section { padding: 4rem 0; }
}

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 2rem; }

  .hero-content-bl { padding: 0 2rem 3rem; }
  .hero-scroll-cue { left: 2rem; }

  .value-props { grid-template-columns: 1fr; }
  .vp {
    border-right: none;
    border-bottom: 1px solid var(--surface-2);
    padding: 4rem 2.5rem;
  }
  .vp:last-child { border-bottom: none; }

  .featured-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .featured-grid-item.featured-tall { grid-row: auto; }

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

  .process-step { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
  .process-step.reverse { direction: ltr; }
  .process-step-number { font-size: 5rem; }

  .form-row { flex-direction: column; gap: 0; }

  .footer { padding: 3rem 2rem 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; }

  .story-stats { grid-template-columns: 1fr 1fr; }

  .section { padding: 4rem 0; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .collections-strip { grid-template-columns: 1fr; }
  .container { padding: 0 1.25rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 3rem 0; }
}


/* ============================================================
   BROCHURES PAGE
   ============================================================ */

.brochures-subhead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.125rem;
  color: rgba(244, 244, 242, 0.7);
  margin-top: var(--sp-md);
}

.brochure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--matte-black);
  padding: 3px;
}

.brochure-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
  background: var(--matte-black);
}

.brochure-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transition: transform 0.5s ease;
  padding: 0;
}

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

.brochure-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem 1.5rem 1.25rem;
  background: linear-gradient(to top, rgba(15, 20, 25, 0.92) 0%, transparent 100%);
}

.brochure-card-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.brochure-card-action {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 242, 244, 0.55);
}

.brochure-download-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  opacity: 0;
  transition: opacity 0.25s;
  color: var(--nautical-white);
}

.brochure-card:hover .brochure-download-icon {
  opacity: 0.7;
}

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


/* ============================================================
   IMAGE CAPTIONS (rendered when a content_blocks caption exists)
   ============================================================ */
.img-caption {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--brushed-nickel);
  margin-top: 0.5rem;
  line-height: 1.5;
  font-style: italic;
}


/* ============================================================
   Dealers page - homeowner + dealer two-form layout (no map)
   ============================================================ */
.dealers-hero {
  background: var(--matte-black);
  padding: calc(96px + 4rem) 5rem 4rem;
  text-align: center;
}
.dealers-hero-headline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  color: var(--nautical-white);
  line-height: 0.92;
  margin-bottom: 1rem;
}
.dealers-hero-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(244,244,242,0.6);
  max-width: 480px;
  margin: 0 auto;
}
.dealers-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}
.dealers-col {
  padding: 4rem 5rem;
}
.dealers-col-homeowner {
  background: var(--white);
  border-right: 1px solid var(--surface-2);
}
.dealers-col-dealer {
  background: var(--surface);
}
.dealers-col-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 0.5rem;
  display: block;
}
.dealers-col-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  letter-spacing: -0.02em;
  color: var(--matte-black);
  line-height: 1;
  margin-bottom: 1rem;
}
.dealers-col-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 420px;
}
.dealers-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dealers-form-row.full { grid-template-columns: 1fr; }
/* Grid items default to min-width:auto, so a select's longest
   option (state names, long "how heard" choices) forces its 1fr
   track wider than a phone viewport and pushes the form sideways.
   min-width:0 lets the track shrink to its share of the row. */
.dealers-field { min-width: 0; }
.dealers-field input,
.dealers-field select,
.dealers-field textarea { max-width: 100%; }
.dealers-field label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  margin-bottom: 5px;
}
.dealers-field input,
.dealers-field select,
.dealers-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--surface-2);
  background: var(--white);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--matte-black);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  border-radius: 0;
}
.dealers-field textarea { resize: vertical; min-height: 64px; }
.dealers-field input:focus,
.dealers-field select:focus,
.dealers-field textarea:focus {
  border-color: var(--slate-blue);
}
.dealers-submit-homeowner {
  width: 100%;
  padding: 14px;
  background: var(--slate-blue);
  color: var(--nautical-white);
  border: none;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 1.5rem;
  transition: background 0.2s;
}
.dealers-submit-homeowner:hover { background: var(--slate-blue-dk); }
.dealers-submit-dealer {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--matte-black);
  border: 2px solid var(--matte-black);
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 1.5rem;
  transition: all 0.2s;
}
.dealers-submit-dealer:hover {
  background: var(--matte-black);
  color: var(--nautical-white);
}
.dealers-success {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: #eef6ec;
  border: 1px solid #cfe3c9;
  border-left: 4px solid #5a7a5a;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  color: #2d4a2d;
  line-height: 1.6;
  outline: none;
}
.dealers-success-icon {
  flex-shrink: 0;
  color: #4a7a4a;
  margin-top: 1px;
}
.dealers-success-text strong {
  display: block;
  font-weight: 600;
  color: #1f3d1f;
  margin-bottom: 2px;
}
@media (max-width: 960px) {
  .dealers-split { grid-template-columns: 1fr; }
  .dealers-col { padding: 3rem 2rem; }
  .dealers-col-homeowner {
    border-right: none;
    border-bottom: 1px solid var(--surface-2);
  }
  .dealers-form-row { grid-template-columns: 1fr; }
  .dealers-hero { padding: calc(68px + 2rem) 1.5rem 3rem; }
}

/* ============================================================
   CUSTOMIZE PAGE
   ============================================================ */

.customize-hero {
  background: var(--matte-black);
  padding: 6rem 5rem 5rem;
  position: relative;
  overflow: hidden;
}
.customize-hero-inner {
  max-width: 600px;
  position: relative;
  z-index: 1;
}
.customize-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 1rem;
}
.customize-headline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.9;
  margin-bottom: 1.5rem;
}
.customize-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(244,244,242,0.65);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 420px;
}

/* Tab nav */
.customize-tabs-wrap {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--surface-2);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.customize-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 3rem;
  gap: 0;
}
.customize-tabs::-webkit-scrollbar { display: none; }
.ctab {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.ctab:hover { color: var(--matte-black); }
.ctab.active {
  color: var(--matte-black);
  border-bottom-color: var(--slate-blue);
}

/* Tab panels */
.customize-content {
  background: var(--surface);
  min-height: 60vh;
}
.ctab-panel {
  display: none;
  padding: 4rem 5rem;
  max-width: 1400px;
  margin: 0 auto;
}
.ctab-panel.active { display: block; }

/* Section headers */
.cmat-section-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--surface-2);
}
.cmat-section-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.cmat-section-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
  max-width: 640px;
}

/* Material grid */
.cmat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: transparent;
}
.cmat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cmat-card {
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cmat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  z-index: 1;
  position: relative;
}
.cmat-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
}
.cmat-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.5s ease;
  filter: brightness(0.95) saturate(1.08);
}
.cmat-card:hover .cmat-img-wrap img {
  transform: scale(1.04);
  filter: brightness(1.0) saturate(1.12);
}
.cmat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--slate-blue);
  color: var(--nautical-white);
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
}
.cmat-badge-premium { background: var(--matte-black); }
.cmat-body {
  padding: 1.25rem 1.25rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cmat-grade {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 4px;
}
.cmat-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 1.1;
  margin-bottom: 0.6rem;
}
.cmat-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex: 1;
}
.cmat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.cmat-pill {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  background: var(--surface);
  color: var(--brushed-nickel);
  border: 1px solid var(--surface-2);
  white-space: nowrap;
}

/* Paint grade cards (no photo - gradient swatch) */
.cmat-paint-swatch {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  flex-shrink: 0;
}
.cmat-paint-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* Material warranty row */
.cmat-warranty-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
  margin-top: 3rem;
}
.cmat-warranty-card {
  background: var(--white);
  padding: 2rem;
  text-align: center;
}
.cmat-warranty-highlight { background: var(--matte-black); }
.cmat-warranty-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  margin-bottom: 0.5rem;
}
.cmat-warranty-highlight .cmat-warranty-label { color: rgba(244,244,242,0.5); }
.cmat-warranty-years {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 3.5rem;
  letter-spacing: -0.04em;
  color: var(--slate-blue);
  line-height: 1;
}
.cmat-warranty-sub {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 300;
  color: var(--brushed-nickel);
  margin-top: 4px;
}
.cmat-warranty-highlight .cmat-warranty-sub { color: rgba(244,244,242,0.4); }
.cmat-warranty-note {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  background: var(--white);
  border-left: 3px solid #c07040;
  line-height: 1.6;
}

/* Glass grid */
.cglass-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: transparent;
}
.cglass-card {
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.cglass-card:hover {
  transform: translateY(-3px);
  z-index: 1;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.cglass-swatch {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Real-photo glass cards use an <img> in place of the CSS swatch. */
.cglass-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center center;
  display: block;
  flex-shrink: 0;
}
.cglass-meta {
  margin-top: auto;
  padding-top: 0.5rem;
}
.cglass-swatch-icon {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.25);
}
.cglass-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cglass-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.5rem;
  line-height: 1.1;
}
.cglass-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 0.75rem;
}
.cglass-tempered {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  width: fit-content;
}
.cglass-tempered.yes {
  background: rgba(74,106,74,0.1);
  color: #4a6a4a;
  border: 1px solid rgba(74,106,74,0.25);
}
.cglass-tempered.no {
  background: var(--surface);
  color: var(--brushed-nickel);
  border: 1px solid var(--surface-2);
}

/* Textures */
.ctexture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: transparent;
}
.ctexture-card {
  background: var(--white);
  padding: 2rem 1.5rem;
}
.ctexture-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.6rem;
}
.ctexture-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
}

/* Hardware */
.chardware-sections {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.chardware-group-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--surface-2);
}
.chardware-swatches {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.chardware-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.chardware-color {
  width: 56px;
  height: 56px;
}
.chardware-swatch span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--brushed-nickel);
  letter-spacing: 0.06em;
}
.chardware-note {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  font-style: italic;
}
.chardware-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: transparent;
}
.chardware-item {
  background: var(--white);
  padding: 1.5rem;
}
.chardware-item-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.4rem;
}
.chardware-item-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
}

/* Sizes */
.csizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
  margin-bottom: 2rem;
}
.csizes-group {
  background: var(--white);
  padding: 2rem;
}
.csizes-group-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 1rem;
}
.csizes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.csizes-item {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--matte-black);
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-2);
}
.csizes-notes {
  background: var(--white);
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--slate-blue);
}
.csizes-note-item {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.csizes-note-item strong {
  font-weight: 500;
  color: var(--matte-black);
}

/* Fire Rating */
.cfire-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 800px;
}
.cfire-cert-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.25rem;
}
.cfire-cert-standard {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 1rem;
}
.cfire-who-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.75rem;
}
.cfire-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.cfire-note {
  background: var(--surface);
  border-left: 3px solid var(--slate-blue);
  padding: 1rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
}

/* Warranty */
.cwarranty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
  margin-bottom: 2rem;
}
.cwarranty-card {
  background: var(--white);
  padding: 2.5rem 2rem;
  text-align: center;
}
.cwarranty-highlight { background: var(--matte-black); }
.cwarranty-years {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 5rem;
  letter-spacing: -0.04em;
  color: var(--slate-blue);
  line-height: 1;
}
.cwarranty-unit {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  margin-bottom: 0.5rem;
}
.cwarranty-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 1rem;
}
.cwarranty-highlight .cwarranty-name { color: var(--nautical-white); }
.cwarranty-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.65;
  text-align: left;
}
.cwarranty-highlight .cwarranty-desc { color: rgba(244,244,242,0.55); }
.cwarranty-notes {
  background: var(--white);
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--surface-2);
}
.cwarranty-notes p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
}

/* CTA */
.customize-cta {
  background: var(--matte-black);
  padding: 5rem;
  text-align: center;
}
.customize-cta-headline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.92;
  margin-bottom: 1rem;
}
.customize-cta-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(244,244,242,0.6);
  max-width: 420px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.customize-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Responsive */
@media (max-width: 1200px) {
  .cmat-grid { grid-template-columns: repeat(3, 1fr); }
  .cglass-grid { grid-template-columns: repeat(3, 1fr); }
  .ctexture-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .ctab-panel { padding: 3rem 2rem; }
  .cmat-grid { grid-template-columns: repeat(2, 1fr); }
  .cmat-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cglass-grid { grid-template-columns: repeat(2, 1fr); }
  .ctexture-grid { grid-template-columns: repeat(2, 1fr); }
  .chardware-list { grid-template-columns: 1fr; }
  .csizes-grid { grid-template-columns: 1fr; }
  .cwarranty-grid { grid-template-columns: 1fr; }
  .cmat-warranty-row { grid-template-columns: 1fr; }
  .customize-tabs { padding: 0 1rem; }
  .customize-hero { padding: 4rem 2rem 3rem; }
  .customize-cta { padding: 3rem 2rem; }
}
@media (max-width: 480px) {
  .cmat-grid { grid-template-columns: 1fr; }
  .cglass-grid { grid-template-columns: 1fr; }
  .ctexture-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESOURCE PAGES (fire-rating, wind-load, warranty)
   ============================================================ */

.resource-hero {
  background: var(--matte-black);
  padding: 6rem 5rem 5rem;
}

.resource-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 1rem;
}

.warranty-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
  margin: 1.5rem 0;
}

.warranty-card-simple {
  background: var(--white);
  padding: 1.5rem;
}

.warranty-card-highlight {
  background: var(--matte-black);
}

.warranty-card-years {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--slate-blue);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}

.warranty-card-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.75rem;
}

.warranty-card-highlight .warranty-card-name {
  color: var(--nautical-white);
}

.warranty-card-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
}

.warranty-card-highlight .warranty-card-desc {
  color: rgba(244, 244, 242, 0.55);
}

.maintenance-schedule {
  border: 1px solid var(--surface-2);
  margin: 1rem 0;
}

.maintenance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--surface-2);
  font-family: 'Inter', sans-serif;
}

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

.maintenance-exposure {
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--matte-black);
}

.maintenance-frequency {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--slate-blue);
}

@media (max-width: 640px) {
  .warranty-cards {
    grid-template-columns: 1fr;
  }
}

.resource-hero-headline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.92;
  margin-bottom: 1rem;
  max-width: 700px;
}

.resource-hero-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(244,244,242,0.6);
  line-height: 1.7;
  max-width: 560px;
}

.resource-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 5rem;
}

.resource-section {
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--surface-2);
}

.resource-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.resource-section-heading {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 1.25rem;
}

.resource-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.resource-body strong {
  color: var(--matte-black);
  font-weight: 500;
}

.resource-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.resource-list li {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
  padding: 0.5rem 0 0.5rem 1rem;
  border-bottom: 1px solid var(--surface-2);
  position: relative;
}

.resource-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--slate-blue);
  border-radius: 50%;
}

.resource-note {
  background: var(--surface);
  border-left: 3px solid var(--slate-blue);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
}

.resource-note-warning {
  border-left-color: #c07040;
  background: #fdf8f4;
}

.resource-cta {
  background: var(--surface);
  padding: 3rem 5rem;
  text-align: center;
  border-top: 1px solid var(--surface-2);
}

.resource-cta-text {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--brushed-nickel);
  margin-bottom: 1.5rem;
}

@media (max-width: 720px) {
  .resource-hero { padding: 4rem 2rem 3rem; }
  .resource-content { padding: 3rem 2rem; }
  .resource-cta { padding: 2.5rem 2rem; }
}

/* ============================================================
   404 ERROR PAGE
   ============================================================ */

.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: 5rem 2rem;
}

.error-page-inner {
  text-align: center;
  max-width: 560px;
}

.error-number {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(6rem, 15vw, 12rem);
  letter-spacing: -0.05em;
  color: var(--surface-2);
  line-height: 1;
  margin-bottom: 0;
}

.error-headline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 1;
  margin-bottom: 1.25rem;
}

.error-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.error-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.error-nav-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.error-nav-links a {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.error-nav-links a:hover {
  color: var(--matte-black);
}


/* ============================================================
   SITE-WIDE SEARCH
   ============================================================ */

/* Nav search bar - looks like an input, acts as an overlay trigger. */
.nav-search-bar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(58,58,58,0.2);
  padding: 8px 14px;
  background: rgba(244,244,242,0.06);
  cursor: text;
  transition: border-color 0.2s, background 0.2s;
  min-width: 240px;
}

/* When nav is transparent (homepage top) */
.nav:not(.scrolled) .nav-search-bar-wrap {
  border-color: rgba(244,244,242,0.25);
  background: rgba(255,255,255,0.08);
}

.nav:not(.scrolled) .nav-search-bar-wrap:hover {
  border-color: rgba(244,244,242,0.5);
  background: rgba(255,255,255,0.12);
}

.nav-search-bar-wrap:hover,
.nav-search-bar-wrap:focus-within {
  border-color: var(--slate-blue);
  background: rgba(244,244,242,0.1);
}

.nav-search-bar-icon {
  color: var(--brushed-nickel);
  flex-shrink: 0;
}

.nav:not(.scrolled) .nav-search-bar-icon {
  color: rgba(244,244,242,0.5);
}

.nav-search-bar-input {
  border: none;
  background: transparent;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--matte-black);
  outline: none;
  width: 100%;
  caret-color: var(--slate-blue);
}

.nav:not(.scrolled) .nav-search-bar-input {
  color: rgba(244,244,242,0.8);
}

.nav:not(.scrolled) .nav-search-bar-input::placeholder {
  color: rgba(244,244,242,0.4);
}

.nav-search-bar-input::placeholder {
  color: var(--brushed-nickel);
  font-weight: 900;
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Rotating placeholder hint: fade out before swapping text. */
.nav-search-bar-input.ph-fading::placeholder {
  opacity: 0;
}

@media (max-width: 1100px) {
  .nav-search-bar-wrap { min-width: 180px; }
}

@media (max-width: 960px) {
  .nav-search-bar-wrap { display: none; }
}

/* Clear (x) button inside the nav search bar */
.nav-search-clear-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  color: var(--brushed-nickel);
  transition: color 0.15s;
}

.nav-search-clear-btn:hover {
  color: var(--matte-black);
}

.nav:not(.scrolled) .nav-search-clear-btn {
  color: rgba(244,244,242,0.5);
}

.nav:not(.scrolled) .nav-search-clear-btn:hover {
  color: var(--nautical-white);
}

/* Inline results dropdown below the nav search bar */
.nav-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 380px;
  background: var(--white);
  border: 1px solid var(--surface-2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 500;
  max-height: 480px;
  overflow-y: auto;
}

.nav-search-no-results {
  padding: 1.25rem 1rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
}

.nav-search-group {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--surface-2);
}

.nav-search-group:last-child {
  border-bottom: none;
}

.nav-search-group-label {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  padding: 0.5rem 1rem 0.25rem;
}

.nav-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}

.nav-search-item:hover {
  background: var(--surface);
}

.nav-search-item-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
}

.nav-search-item-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  color: var(--brushed-nickel);
  margin-top: 1px;
}

.nav-search-item-arrow {
  color: var(--brushed-nickel);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.nav-search-item:hover .nav-search-item-arrow {
  transform: translateX(3px);
  color: var(--matte-black);
}

/* View all results link */
.nav-search-view-all {
  display: block;
  padding: 0.875rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--slate-blue);
  text-decoration: none;
  text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--surface-2);
  transition: background 0.15s;
}

.nav-search-view-all:hover {
  background: var(--surface-2);
}

/* Mobile menu search bar. Top margin clears the absolute close
   button; nav-mobile-nav's top padding is reduced to compensate. */
.nav-mobile-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--surface-2);
  padding: 12px 16px;
  margin: 72px 32px 0;
  cursor: pointer;
}

.nav-mobile-search svg {
  color: var(--brushed-nickel);
  flex-shrink: 0;
}

.nav-mobile-search-input {
  border: none;
  background: transparent;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--matte-black);
  outline: none;
  width: 100%;
  cursor: pointer;
}

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(244, 244, 242, 0.97);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.search-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.search-overlay-inner {
  width: 100%;
  max-width: 720px;
  padding: 80px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.search-bar-wrap {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--matte-black);
  padding-bottom: 12px;
  margin-bottom: 32px;
  gap: 12px;
}

.search-bar-icon {
  color: var(--brushed-nickel);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--matte-black);
  outline: none;
  caret-color: var(--slate-blue);
}

.search-input::placeholder {
  color: var(--brushed-nickel);
  font-weight: 300;
}

.search-close-btn {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--brushed-nickel);
  background: none;
  border: 1px solid var(--surface-2);
  padding: 4px 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.search-close-btn:hover {
  color: var(--matte-black);
  border-color: var(--matte-black);
}

.search-results {
  flex: 1;
  overflow-y: auto;
}

.search-empty-hint {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
}

/* Search result items */
.search-result-group {
  margin-bottom: 28px;
}

.search-result-group-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--surface-2);
}

.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface-2);
  text-decoration: none;
  cursor: pointer;
  transition: padding-left 0.15s;
}

.search-result-item:hover {
  padding-left: 8px;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
}

.search-result-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  margin-top: 2px;
}

.search-result-arrow {
  color: var(--brushed-nickel);
  font-size: 1.25rem;
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 0.15s;
}

.search-result-item:hover .search-result-arrow {
  transform: translateX(4px);
  color: var(--matte-black);
}

/* Door results: slightly tighter than Collection/Page rows. */
.search-result-group[data-group="Door"] .search-result-name {
  font-size: 0.875rem;
}

.search-no-results {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  padding: 8px 0;
}

@media (max-width: 640px) {
  .search-overlay-inner {
    padding: 60px 20px 24px;
  }
  .search-input {
    font-size: 1.25rem;
  }
}


/* ============================================================
   MOBILE OVERHAUL
   Target: iPhone 14 (390px) and modern phones.
   Lives at end of file so it can refine earlier rules without
   refactoring them. Breakpoints used: 960 / 768 / 480.
   ============================================================ */

/* ---------- Base behavior (all viewports) ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
* {
  -webkit-tap-highlight-color: transparent;
}
button, a {
  touch-action: manipulation;
}

/* ---------- Tablet/mobile: 768px ---------- */
@media (max-width: 768px) {

  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  /* Belt-and-braces overflow guards for the off-screen lightbox arrows
     (left:-60 / right:-60) when the lightbox is in the DOM but closed. */
  .lightbox:not(.open) {
    overflow: hidden;
  }

  /* Hero typography compresses cleanly */
  .hero-content { padding: 0 20px 40px; }
  .hero-line-1,
  .hero-line-2,
  .hero-line-3 { font-size: clamp(2.4rem, 11vw, 4rem); letter-spacing: -0.02em; }
  .hero-sub    { font-size: 1rem; }
  .hero-actions { gap: 0.75rem; }
  .hero-actions .btn { padding: 12px 24px; }
  .scroll-cue { left: 20px; bottom: 1.5rem; }

  /* Nav: safe-area insets so notched phones aren't clipped */
  .nav {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* Resource heros (fire-rating, wind-load, warranty, etc) */
  .resource-hero { padding: 3rem 24px 2.5rem; }
  .resource-hero-headline { font-size: clamp(2rem, 8vw, 3.5rem); }
  .resource-content { padding: 2rem 24px; }
  .resource-section-heading { font-size: clamp(1.25rem, 5vw, 1.6rem); }

  /* Customize hero + tabs */
  .customize-hero { padding: 3rem 24px 2.5rem; }
  .customize-headline { font-size: clamp(2rem, 9vw, 3.5rem); }
  .customize-tabs-wrap { top: 70px; }
  .customize-tabs { padding: 0 12px; }
  .ctab { padding: 1rem 0.875rem; font-size: 0.5625rem; min-height: 44px; }
  .ctab-panel { padding: 2rem 20px; }
  .cmat-section-title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .cmat-img-wrap { height: 220px; }
  .customize-cta { padding: 3rem 24px; }
  .customize-cta-actions { flex-direction: column; align-items: stretch; }
  .customize-cta-actions .btn { width: 100%; text-align: center; }

  /* Dealers two-form layout */
  .dealers-hero { padding: 3rem 24px 2.5rem; }
  .dealers-hero-headline { font-size: clamp(2rem, 8vw, 3.5rem); }
  .dealers-col { padding: 2.5rem 24px; }
  .dealers-col-homeowner {
    border-right: none;
    border-bottom: 2px solid var(--surface-2);
  }
  .dealers-submit-homeowner,
  .dealers-submit-dealer { padding: 16px; font-size: 0.6875rem; }

  /* Page headers (about, doors, gallery legacy, faq, etc) */
  .page-header { padding: calc(var(--nav-h) + 2rem) 0 2rem; }

  /* Gallery: sharpen tap targets on mobile */
  .gallery-page-header { padding: calc(var(--nav-h) + 1.5rem) 20px 1.5rem; }
  .gallery-page-title { font-size: clamp(2rem, 9vw, 3rem); }
  .gallery-tab {
    padding: 0.625rem 0.8rem;
    font-size: 0.5625rem;
    display: inline-flex;
    align-items: center;
  }

  /* Doors collection grid: 2 columns on mobile (overrides the 1-col global rule) */
  #doors-grid.grid.grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
  .collection-card-v2-body { padding: 1rem; }
  .collection-card-v2-name { font-size: 0.8125rem; }
  .collection-chips { gap: 0.25rem; }
  .collection-chip { font-size: 8px; padding: 3px 6px; }
  .doors-section-divider { padding: 1.5rem 0 0.5rem; margin-top: 0.5rem; }

  /* Door detail hero */
  .door-hero {
    min-height: 60vw;
    padding: calc(var(--nav-h) + 1.5rem) 0 2rem;
  }

  /* Footer respects bottom safe-area */
  .footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }

  /* Brochures: keep 2 columns on phones, not 1 */
  .brochure-grid { grid-template-columns: repeat(2, 1fr); }

  /* Warranty cards / maintenance schedule stack */
  .warranty-cards { grid-template-columns: 1fr; }
  .maintenance-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px;
  }

  /* Process / About */
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .story-quote { padding-left: 1.25rem; margin: 1.75rem 0; }
  .story-quote p { font-size: 1.2rem; }

  /* Contact form spacing */
  .rhd-form { padding: 0 4px; }
  .contact-note { padding: 1.25rem; }

  /* Minimum 44px touch targets on common interactive elements */
  .btn,
  .nav-cta,
  .nav-mobile-item,
  .filter-tab { min-height: 44px; }

  /* Search overlay: align top so iOS keyboard doesn't push content out */
  .search-overlay {
    align-items: flex-start;
    overflow-y: auto;
  }
  .search-overlay-inner { padding: 72px 20px 24px; }
  .search-input { font-size: 1.125rem; }
  .search-results {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---------- Small mobile: 480px ---------- */
@media (max-width: 480px) {

  /* Collections strip looks lonely at 1 column; keep 2-up on phones */
  .collections-strip { grid-template-columns: repeat(2, 1fr); }

  /* Lightbox: full-bleed on small phones */
  .lightbox-content { width: 100vw; }
  .lightbox-img-wrap { max-height: 60vh; }
  .lightbox-info {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lightbox-cta { width: 100%; text-align: center; }
  .lightbox-close {
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 8px;
  }

  /* Doors grid stays 2-up at 390px so cards remain photo-sized */
  #doors-grid.grid.grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Door detail content padding */
  .door-detail-layout { gap: 2rem; }
}

/* ---------- Disable sticky hover on touch devices ---------- */
@media (hover: none) {
  .gallery-card:hover .gallery-card-img img {
    transform: none;
    filter: brightness(0.88);
  }
  .gallery-card:hover .gallery-card-overlay {
    transform: translateY(100%);
  }
  .cmat-card:hover,
  .cglass-card:hover {
    transform: none;
    box-shadow: none;
  }
  .collection-card-v2:hover { box-shadow: none; }
  .collection-card-v2:hover .collection-card-v2-media img,
  .collection-card-v2:hover .collection-card-v2-media video {
    transform: none;
    filter: brightness(0.92);
  }
  .nav-brand:hover .nav-logo { opacity: 1; }
}


/* ============================================================
   COLLECTION DETAIL PAGE (cd-*)
   Digital-brochure layout: alternating light/surface/dark sections.
   ============================================================ */

.cd-section { padding: 4rem 0; }
.cd-section-light   { background: var(--white); }
.cd-section-surface { background: var(--surface); }
.cd-section-dark    { background: var(--matte-black); }

.cd-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
}

/* Section header pieces */
.cd-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  margin-bottom: 0.4rem;
}
.cd-eyebrow-light { color: rgba(244, 244, 242, 0.4); }

.cd-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.cd-title-light { color: var(--nautical-white); }

.cd-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 2rem;
}
.cd-sub-light { color: rgba(244, 244, 242, 0.5); }

.cd-sub-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.75rem;
}

.cd-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1.5rem;
}

.cd-brochure-btn {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-blue);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.cd-brochure-btn:hover { opacity: 0.7; }

.cd-note {
  background: var(--surface);
  border-left: 3px solid var(--slate-blue);
  padding: 0.875rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.cd-note-dark {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(244, 244, 242, 0.5);
}

/* 3-step process */
.cd-steps {
  background: var(--matte-black);
  padding: 3rem 0;
}
.cd-steps-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, 0.05);
}
.cd-step {
  background: var(--matte-black);
  padding: 2rem;
}
.cd-step-num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--slate-blue);
  line-height: 1;
  margin-bottom: 0.75rem;
  letter-spacing: -0.03em;
}
.cd-step-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--nautical-white);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.cd-step-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(244, 244, 242, 0.45);
  line-height: 1.65;
}

/* Models grid */
.cd-models-search {
  width: 280px;
  max-width: 100%;
  border: none;
  border-bottom: 1px solid var(--surface-2);
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--matte-black);
  padding: 8px 0;
  outline: none;
  margin-bottom: 1.5rem;
  display: block;
  caret-color: var(--slate-blue);
}
.cd-models-search::placeholder { color: var(--brushed-nickel); }

.cd-models-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: transparent;
}

.cd-model-card {
  background: var(--white);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  transition: background 0.15s;
}
.cd-model-card:hover { background: #fafaf8; }

.cd-model-series {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 6px;
}
.cd-model-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--surface-2);
}
.cd-model-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 1.1;
}
.cd-model-rhd {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: var(--brushed-nickel);
  white-space: nowrap;
  flex-shrink: 0;
}
.cd-model-specs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.cd-model-spec {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.cd-spec-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  white-space: nowrap;
  width: 52px;
  flex-shrink: 0;
}
.cd-spec-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--matte-black);
  line-height: 1.3;
}
.cd-model-gallery-link {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-blue);
  text-decoration: none;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--surface-2);
  display: block;
  transition: opacity 0.15s;
}
.cd-model-gallery-link:hover { opacity: 0.7; }

/* Contemporary series */
.cd-series-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
}
.cd-series-card {
  background: rgba(255, 255, 255, 0.04);
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cd-series-code {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 6px;
}
.cd-series-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--nautical-white);
  margin-bottom: 0.6rem;
}
.cd-series-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(244, 244, 242, 0.5);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.cd-series-models {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cd-series-model-pill {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 400;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 244, 242, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Wood options */
.cd-wood-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: transparent;
}
.cd-wood-col {
  background: var(--white);
  padding: 1.5rem;
}
.cd-wood-grade-header {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding: 8px 12px;
  margin-bottom: 0.75rem;
  display: inline-block;
}
.cd-wood-grade-header.stain {
  background: var(--surface);
  color: var(--matte-black);
}
.cd-wood-grade-header.paint {
  background: var(--matte-black);
  color: var(--nautical-white);
}
.cd-wood-grade-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.cd-wood-recommended-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 6px;
}
.cd-wood-item {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--matte-black);
  padding: 7px 0;
  border-bottom: 1px solid var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cd-wood-recommended { font-weight: 400; }
.cd-wood-star {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--slate-blue);
  color: white;
  padding: 2px 6px;
  flex-shrink: 0;
}
.cd-wood-badge {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  background: var(--surface-2);
  color: var(--brushed-nickel);
  padding: 2px 6px;
  flex-shrink: 0;
}
.cd-wood-divider {
  height: 1px;
  background: var(--surface-2);
  margin: 8px 0;
}
.cd-dark-colors-note {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #fdf8f0;
  border-left: 3px solid #c07040;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--brushed-nickel);
  line-height: 1.5;
}

/* Wood-type specification table (Rail & Stile, Semi-Custom) */
.cd-wood-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
}
.cd-wood-type-card {
  background: var(--white);
  padding: 1.25rem;
}
.cd-wood-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cd-wood-type-code {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
}
.cd-grade-badge {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
}
.cd-grade-badge.stain {
  background: var(--surface);
  color: var(--matte-black);
  border: 1px solid var(--surface-2);
}
.cd-grade-badge.paint {
  background: var(--matte-black);
  color: var(--nautical-white);
}
.cd-wood-type-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--matte-black);
  margin-bottom: 4px;
}
.cd-wood-type-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--brushed-nickel);
  line-height: 1.5;
}

/* Metal cladding (Contemporary, Mountain Modern) */
.cd-metal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: transparent;
}
.cd-metal-item {
  background: var(--white);
  padding: 1rem;
}
.cd-metal-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--matte-black);
  margin-bottom: 3px;
}
.cd-metal-note {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  color: var(--brushed-nickel);
}

/* Textures */
.cd-textures-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: transparent;
}
.cd-texture-card {
  background: var(--white);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.cd-texture-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
}
.cd-texture-charge {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  width: fit-content;
}
.cd-texture-charge.no-charge {
  background: var(--surface);
  color: var(--matte-black);
  border: 1px solid var(--surface-2);
}
.cd-texture-charge.upgrade {
  background: var(--slate-blue);
  color: white;
}

/* Glass */
.cd-glass-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
}
.cd-glass-item {
  background: var(--white);
  padding: 1rem 1.25rem;
}
.cd-glass-name {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--matte-black);
  margin-bottom: 3px;
}
.cd-glass-note {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  color: var(--brushed-nickel);
  letter-spacing: 0.04em;
}

/* Hardware list */
.cd-hardware-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: transparent;
}
.cd-hardware-item {
  background: var(--white);
  padding: 1rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--matte-black);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}

/* Kick plates / swing options */
.cd-kick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
}
.cd-kick-card {
  background: var(--white);
  padding: 1rem 1.25rem;
}
.cd-kick-size {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 4px;
}
.cd-kick-pieces {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
}
.cd-swing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: transparent;
  margin-bottom: 1rem;
}
.cd-swing-card {
  background: var(--white);
  padding: 1.25rem;
}
.cd-swing-type {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--surface-2);
}
.cd-swing-option {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  padding: 5px 0;
  border-bottom: 1px solid var(--surface-2);
}
.cd-pill {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  color: var(--matte-black);
  margin: 4px 4px 0 0;
}

/* Construction (dark section) */
.cd-construction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.cd-construction-item {
  background: rgba(255, 255, 255, 0.03);
  padding: 1.25rem;
}
.cd-construction-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.4);
  margin-bottom: 6px;
}
.cd-construction-val {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(244, 244, 242, 0.75);
  line-height: 1.5;
}
.cd-tg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.cd-tg-item {
  background: rgba(255, 255, 255, 0.03);
  padding: 0.875rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(244, 244, 242, 0.6);
}
.cd-construction-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cd-construction-list-item {
  background: rgba(255, 255, 255, 0.03);
  padding: 0.75rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(244, 244, 242, 0.65);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

/* Technical drawings */
.cd-drawings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: transparent;
}
.cd-drawing-card {
  background: var(--white);
  overflow: hidden;
}
.cd-drawing-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--surface-2);
}
.cd-drawing-img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
}
.cd-drawing-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.2s;
}
.cd-drawing-img-wrap:hover .cd-drawing-img { opacity: 0.85; }
.cd-drawing-zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  opacity: 0;
  transition: opacity 0.2s;
}
.cd-drawing-img-wrap:hover .cd-drawing-zoom-hint { opacity: 1; }

/* Certifications */
.cd-cert-grid {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.cd-cert-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--surface-2);
  padding: 1rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--matte-black);
}

/* Installed-examples gallery */
.cd-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.cd-gallery-card {
  position: relative;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  display: block;
}
.cd-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s;
  opacity: 0.85;
}
.cd-gallery-card:hover img {
  transform: scale(1.04);
  opacity: 1;
}
.cd-gallery-number {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 300;
  color: rgba(244, 244, 242, 0.6);
  letter-spacing: 0.06em;
}

/* CTA */
.cd-cta {
  background: var(--matte-black);
  padding: 5rem 4rem;
  text-align: center;
}
.cd-cta-inner {
  max-width: 560px;
  margin: 0 auto;
}
.cd-cta-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.92;
  margin-bottom: 1rem;
}
.cd-cta-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(244, 244, 242, 0.5);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.cd-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 960px) {
  .cd-section-inner { padding: 0 2rem; }
  .cd-steps-inner { grid-template-columns: 1fr; padding: 0 2rem; }
  .cd-models-grid       { grid-template-columns: repeat(2, 1fr); }
  .cd-series-grid       { grid-template-columns: repeat(2, 1fr); }
  .cd-wood-types-grid   { grid-template-columns: repeat(2, 1fr); }
  .cd-metal-grid        { grid-template-columns: repeat(2, 1fr); }
  .cd-textures-grid     { grid-template-columns: repeat(2, 1fr); }
  .cd-glass-grid        { grid-template-columns: repeat(2, 1fr); }
  .cd-hardware-list     { grid-template-columns: 1fr; }
  .cd-gallery-grid      { grid-template-columns: repeat(2, 1fr); }
  .cd-drawings-grid     { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .cd-section { padding: 3rem 0; }
  .cd-section-inner { padding: 0 20px; }
  .cd-steps { padding: 2rem 0; }
  .cd-steps-inner { padding: 0 20px; }
  .cd-models-grid     { grid-template-columns: 1fr; }
  .cd-wood-grid       { grid-template-columns: 1fr; }
  .cd-series-grid     { grid-template-columns: 1fr; }
  .cd-wood-types-grid { grid-template-columns: 1fr; }
  .cd-metal-grid      { grid-template-columns: repeat(2, 1fr); }
  .cd-textures-grid   { grid-template-columns: repeat(2, 1fr); }
  .cd-kick-grid       { grid-template-columns: 1fr; }
  .cd-swing-grid      { grid-template-columns: 1fr; }
  .cd-construction-grid { grid-template-columns: 1fr; }
  .cd-tg-grid         { grid-template-columns: 1fr; }
  .cd-gallery-grid    { grid-template-columns: repeat(2, 1fr); }
  .cd-section-header  { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cd-cta { padding: 3rem 20px; }
  .cd-cta-actions { flex-direction: column; align-items: center; }
  .cd-cta-actions .btn { width: 100%; text-align: center; }
}


/* ============================================================
   COLLECTION ASSETS
   Auto-discovered design-asset sections on collection pages
   (Contemporary, FEQ). Markup lives in door_detail.html, data
   comes from helpers/collection_assets.py.
   ============================================================ */

/* Table of contents bar */
.ca-toc-bar {
  position: sticky;
  top: 96px;
  z-index: 80;
  background: var(--matte-black);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
  scrollbar-width: none;
}

.ca-toc-bar::-webkit-scrollbar { display: none; }

.ca-toc-inner {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
  gap: 0;
}

.ca-toc-link {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.4);
  text-decoration: none;
  padding: 0.875rem 1rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.ca-toc-link:hover {
  color: rgba(244,244,242,0.8);
}

.ca-toc-link.active {
  color: var(--nautical-white);
  border-bottom-color: var(--slate-blue);
}

/* Section containers */
.ca-section {
  padding: 4rem 0;
}

.ca-section-light { background: var(--white); }
.ca-section-surface { background: var(--surface); }
.ca-section-dark { background: var(--matte-black); }

.ca-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
}

/* Section header */
.ca-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}

.ca-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  margin-bottom: 0.35rem;
}

.ca-section-dark .ca-eyebrow {
  color: rgba(244,244,242,0.35);
}

.ca-section-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 1;
}

.ca-section-dark .ca-section-title {
  color: var(--nautical-white);
}

.ca-count {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  white-space: nowrap;
  flex-shrink: 0;
  padding-bottom: 4px;
}

/* DOOR SERIES GRID
   Portrait cards for CAD door drawings */
.ca-door-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
}

.ca-door-card {
  background: var(--white);
  cursor: pointer;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.ca-door-card:hover {
  transform: translateY(-2px);
  z-index: 1;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.ca-door-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f8f8f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ca-door-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8px;
  transition: transform 0.4s ease;
}

.ca-door-card:hover .ca-door-img-wrap img {
  transform: scale(1.04);
}

.ca-door-label {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--matte-black);
  padding: 0.75rem 0.875rem;
  border-top: 1px solid var(--surface-2);
  line-height: 1.2;
  text-align: center;
}

/* INSTALLED PHOTOS GRID */
.ca-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.06);
}

/* Cap at 6 cells - hide any photo beyond a clean 3x2 grid */
.ca-photo-card:nth-child(n+7) {
  display: none;
}

.ca-photo-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  background: var(--matte-black);
}

.ca-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s;
  opacity: 0.92;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.ca-photo-card:hover img {
  transform: scale(1.04);
  opacity: 1;
}

.ca-photo-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(244,244,242,0.7);
}

/* DETAIL SECTIONS GRID
   Smaller cards for options, profiles, materials */
.ca-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
}

.ca-section-dark .ca-detail-grid {
  background: rgba(255,255,255,0.06);
}

.ca-detail-card {
  background: var(--white);
  cursor: pointer;
  transition: transform 0.2s ease,
              box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ca-section-dark .ca-detail-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.ca-detail-card:hover {
  transform: translateY(-2px);
  z-index: 1;
  position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.ca-detail-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.ca-detail-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  padding: 6px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.ca-detail-card:hover .ca-detail-img-wrap img {
  transform: scale(1.04);
}

.ca-detail-label {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--matte-black);
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--surface-2);
  line-height: 1.3;
  text-align: center;
}

.ca-section-dark .ca-detail-label {
  color: rgba(244,244,242,0.8);
  border-top-color: rgba(255,255,255,0.08);
}

/* LIGHTBOX */
.ca-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.ca-lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.ca-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.95);
  cursor: pointer;
}

.ca-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ca-lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  color: rgba(244,244,242,0.6);
  cursor: pointer;
  padding: 10px;
  transition: color 0.15s;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ca-lightbox-close:hover {
  color: var(--nautical-white);
}

.ca-lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  background: #fff;
}

.ca-lightbox-label {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.6);
  text-align: center;
}

/* Responsive */
@media (max-width: 1100px) {
  .ca-door-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .ca-section-inner { padding: 0 2rem; }
  .ca-toc-inner { padding: 0 1rem; }
  .ca-door-grid { grid-template-columns: repeat(3, 1fr); }
  .ca-detail-grid { grid-template-columns: repeat(3, 1fr); }
  .ca-photos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ca-section { padding: 2.5rem 0; }
  .ca-section-inner { padding: 0 20px; }
  .ca-toc-inner { padding: 0 16px; }
  .ca-toc-bar { top: 70px; }
  .gallery-control-bar { top: 70px; }
  .ca-door-grid { grid-template-columns: repeat(2, 1fr); }
  .ca-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .ca-photos-grid { grid-template-columns: repeat(2, 1fr); }
  .ca-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .ca-lightbox-content {
    max-width: 95vw;
  }
}

@media (max-width: 480px) {
  .ca-door-grid { grid-template-columns: repeat(2, 1fr); }
  .ca-detail-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   FIX 1: EMPTY GRID CELLS - NO GRAY FILL

   Card grids previously used a surface-2 background so the 2px
   gap read as a hairline rule - but uneven last rows then showed
   that color as gray blocks. Make the grid background transparent
   (empty cells now match the section) and give the cards a 1px
   box-shadow outline so adjacent cards still read as separated.
   ============================================================ */
.ca-door-grid,
.ca-detail-grid,
.cd-models-grid,
.cd-wood-types-grid,
.cd-metal-grid,
.cd-series-grid,
.cd-textures-grid,
.cd-glass-grid,
.cd-kick-grid,
.cd-swing-grid,
.cd-construction-grid,
.cd-tg-grid,
.warranty-cards,
.cmat-grid,
.cglass-grid,
.ctexture-grid,
.gallery-grid {
  background: transparent;
  gap: 2px;
}

/* Dark-section detail grid also drops its tint. */
.ca-section-dark .ca-detail-grid {
  background: transparent;
}

/* Cards keep their own background; a 1px outline gives the
   separation the grid background used to provide. */
.ca-door-card,
.ca-detail-card,
.cd-model-card {
  box-shadow: 0 0 0 1px var(--surface-2);
}


/* ============================================================
   FIX 3: TABBED ASSET NAVIGATION (asset-rich collection pages)
   ============================================================ */
.ca-tab-nav {
  position: sticky;
  top: 96px;
  z-index: 80;
  background: var(--white);
  border-bottom: 2px solid var(--surface-2);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  display: flex;
  align-items: stretch;
}

/* Mobile: sit flush below the 70px mobile nav (base top:96px is for the
   96px desktop nav). Placed after the base rule so it actually wins. */
@media (max-width: 768px) {
  .ca-tab-nav { top: 70px; }
}

.ca-tab-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
  display: flex;
  gap: 0;
}

.ca-tab-btn {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 1.25rem 2rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  margin-bottom: -2px;
}

.ca-tab-btn:hover {
  color: var(--matte-black);
}

.ca-tab-btn.active {
  color: var(--matte-black);
  border-bottom-color: var(--slate-blue);
}

.ca-tab-panel {
  display: block;
}

@media (max-width: 768px) {
  .ca-tab-nav-inner {
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ca-tab-nav-inner::-webkit-scrollbar {
    display: none;
  }
  .ca-tab-btn {
    padding: 1rem 1.25rem;
    font-size: 0.625rem;
    flex-shrink: 0;
  }
}


/* ============================================================
   WORK WITH US
   ============================================================ */

.wwu-hero {
  background: var(--matte-black);
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 8rem 5rem 6rem;
  position: relative;
  overflow: hidden;
}

.wwu-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 70% 50%,
    rgba(91,113,132,0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.wwu-hero-inner {
  max-width: 680px;
  position: relative;
  z-index: 1;
}

.wwu-hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 1.25rem;
}

.wwu-hero-headline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.9;
  margin-bottom: 1.5rem;
}

.wwu-hero-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  color: rgba(244,244,242,0.55);
  line-height: 1.75;
  margin-bottom: 2.5rem;
  max-width: 520px;
}

/* Stats band */
.wwu-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--slate-blue);
}

.wwu-stat {
  padding: 2rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.15);
}

.wwu-stat:last-child { border-right: none; }

.wwu-stat-num {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  color: var(--nautical-white);
  line-height: 1;
  margin-bottom: 4px;
}

.wwu-stat-label {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(244,244,242,0.6);
  letter-spacing: 0.06em;
}

/* Sections */
.wwu-section { padding: 6rem 0; }
.wwu-section-light { background: var(--white); }
.wwu-section-surface { background: var(--surface); }
.wwu-section-dark { background: var(--matte-black); }

.wwu-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5rem;
}

.wwu-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  margin-bottom: 0.5rem;
}

.wwu-eyebrow-light {
  color: rgba(244,244,242,0.4);
}

.wwu-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 0.95;
  margin-bottom: 1.25rem;
}

.wwu-title-light { color: var(--nautical-white); }

.wwu-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.wwu-body-light {
  color: rgba(244,244,242,0.5);
}

/* Two column layout */
.wwu-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.wwu-hero-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}

/* Check list */
.wwu-check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 1.5rem;
}

.wwu-check-item {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--matte-black);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

.wwu-check-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Perks grid */
.wwu-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.06);
  margin-top: 2.5rem;
}

.wwu-perk {
  background: rgba(255,255,255,0.03);
  padding: 2rem;
}

.wwu-perk-num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--slate-blue);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 1rem;
}

.wwu-perk-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--nautical-white);
  margin-bottom: 0.6rem;
}

.wwu-perk-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(244,244,242,0.5);
  line-height: 1.7;
}

/* Collections strip */
.wwu-collections-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wwu-col-chip {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--matte-black);
  background: var(--white);
  border: 1px solid var(--surface-2);
  padding: 6px 14px;
  text-decoration: none;
  transition: all 0.15s;
}

.wwu-col-chip:hover {
  background: var(--matte-black);
  color: var(--nautical-white);
  border-color: var(--matte-black);
}

/* Process steps */
.wwu-process-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 2.5rem;
}

.wwu-process-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wwu-process-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--slate-blue);
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.wwu-process-connector {
  width: 60px;
  height: 1px;
  background: var(--surface-2);
  margin-top: 28px;
  flex-shrink: 0;
}

.wwu-process-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.5rem;
}

.wwu-process-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
  max-width: 180px;
}

/* Form */
.wwu-form-inner {
  max-width: 760px;
}

.wwu-form-header {
  margin-bottom: 3rem;
}

.wwu-success {
  background: rgba(91,113,132,0.15);
  border-left: 3px solid var(--slate-blue);
  padding: 1.25rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244,244,242,0.7);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.wwu-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wwu-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.wwu-form-row-full {
  grid-template-columns: 1fr;
}

.wwu-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wwu-field label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.4);
}

.wwu-field input,
.wwu-field select,
.wwu-field textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--nautical-white);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.wwu-field input:focus,
.wwu-field select:focus,
.wwu-field textarea:focus {
  border-color: var(--slate-blue);
}

.wwu-field select option {
  background: var(--matte-black);
  color: var(--nautical-white);
}

.wwu-submit {
  background: var(--slate-blue);
  color: var(--nautical-white);
  border: none;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 18px 40px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 1rem;
  width: fit-content;
}

.wwu-submit:hover {
  background: #4a6070;
}

/* Responsive */
@media (max-width: 960px) {
  .wwu-hero { padding: 6rem 2rem 4rem; }
  .wwu-inner { padding: 0 2rem; }
  .wwu-perks-grid { grid-template-columns: repeat(2, 1fr); }
  .wwu-two-col { grid-template-columns: 1fr; gap: 2rem; }
  .wwu-col-img { display: none; }
  .wwu-stats { grid-template-columns: repeat(2, 1fr); }
  .wwu-process-steps { flex-direction: column; gap: 1.5rem; }
  .wwu-process-connector { display: none; }
  .wwu-process-step { align-items: flex-start; text-align: left; flex-direction: row; gap: 1rem; }
  .wwu-process-num { flex-shrink: 0; }
  .wwu-process-desc { max-width: none; }
}

@media (max-width: 768px) {
  .wwu-section { padding: 4rem 0; }
  .wwu-inner { padding: 0 20px; }
  .wwu-hero { min-height: 60vh; padding: 5rem 20px 3rem; }
  .wwu-perks-grid { grid-template-columns: 1fr; }
  .wwu-form-row { grid-template-columns: 1fr; }
  .wwu-stats { grid-template-columns: repeat(2, 1fr); }
  .wwu-submit { width: 100%; }
}


/* ============================================================
   AI DOOR CONFIGURATOR
   ============================================================ */

.cfg-hero {
  background: var(--matte-black);
  padding: 8rem 5rem 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cfg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(91,113,132,0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.cfg-hero-inner {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cfg-hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 1rem;
}

.cfg-hero-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.92;
  margin-bottom: 1.25rem;
}

.cfg-hero-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(244,244,242,0.5);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto;
}

/* Main area */
.cfg-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

/* Mode bar */
.cfg-mode-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  justify-content: center;
}

.cfg-mode-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  background: none;
  border: 1.5px solid var(--surface-2);
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.cfg-mode-btn:hover {
  border-color: var(--matte-black);
  color: var(--matte-black);
}

.cfg-mode-btn.active {
  background: var(--matte-black);
  border-color: var(--matte-black);
  color: var(--nautical-white);
}

.cfg-mode-divider {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
}

/* Upload area */
.cfg-upload-area {
  border: 2px dashed var(--surface-2);
  padding: 4rem 2rem;
  text-align: center;
  transition: border-color 0.2s;
  cursor: pointer;
}

.cfg-upload-area.dragover {
  border-color: var(--slate-blue);
  background: rgba(91,113,132,0.04);
}

.cfg-upload-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin: 1.25rem 0 0.75rem;
}

.cfg-upload-hint {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto 1.5rem;
}

.cfg-upload-btn {
  margin-bottom: 0.75rem;
}

.cfg-upload-drag-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--brushed-nickel);
}

/* Preview */
.cfg-upload-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.cfg-upload-preview img {
  max-height: 380px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.cfg-preview-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.cfg-preview-change {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--brushed-nickel);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Questions */
.cfg-questions {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.cfg-q-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 1.25rem;
}

.cfg-options-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: transparent;
}

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

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

.cfg-options-grid.cfg-options-4 {
  grid-template-columns: repeat(4, 1fr);
}

.cfg-option {
  background: var(--white);
  border: none;
  padding: 1.25rem;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.15s;
  position: relative;
  min-height: 80px;
}

.cfg-option:hover {
  background: #f8f8f6;
}

.cfg-option.selected {
  background: var(--matte-black);
}

.cfg-option.selected .cfg-option-label {
  color: var(--nautical-white);
}

.cfg-option.selected .cfg-option-sub {
  color: rgba(244,244,242,0.5);
}

.cfg-option.selected .cfg-color-swatch {
  outline: 2px solid var(--slate-blue);
  outline-offset: 2px;
}

.cfg-option-label {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 1.2;
}

.cfg-option-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  color: var(--brushed-nickel);
  line-height: 1.4;
}

.cfg-color-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.cfg-submit-btn {
  align-self: flex-start;
  margin-top: 1rem;
}

.cfg-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Loading */
.cfg-loading {
  text-align: center;
  padding: 6rem 2rem;
}

.cfg-spinner {
  width: 48px;
  height: 48px;
  border: 2px solid var(--surface-2);
  border-top-color: var(--slate-blue);
  border-radius: 50%;
  animation: cfgSpin 0.8s linear infinite;
  margin: 0 auto 2rem;
}

@keyframes cfgSpin {
  to { transform: rotate(360deg); }
}

.cfg-loading-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.75rem;
}

.cfg-loading-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto;
}

/* Results */
.cfg-result-hero {
  background: var(--matte-black);
  padding: 4rem 0;
}

.cfg-result-hero-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cfg-result-badge {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 1.5rem;
}

.cfg-result-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.cfg-result-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244,244,242,0.4);
  margin-bottom: 0.5rem;
}

.cfg-result-collection {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.92;
  margin-bottom: 1.25rem;
}

.cfg-result-reasoning {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244,244,242,0.6);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.cfg-result-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 2rem;
}

.cfg-result-spec {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.cfg-result-spec-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.3);
  width: 72px;
  flex-shrink: 0;
}

.cfg-result-spec-value {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244,244,242,0.8);
}

.cfg-result-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Home photo */
.cfg-result-home-photo {
  position: relative;
}

.cfg-result-home-photo img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cfg-result-home-label {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.7);
  background: rgba(0,0,0,0.5);
  padding: 4px 8px;
}

/* Warnings */
.cfg-warnings {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cfg-warning {
  background: rgba(180,100,40,0.15);
  border-left: 3px solid #c07040;
  padding: 0.875rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(244,244,242,0.7);
  line-height: 1.55;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Alternatives */
.cfg-alternatives {
  background: var(--surface);
  padding: 3rem 0;
}

.cfg-alt-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cfg-alt-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brushed-nickel);
  margin-bottom: 1.25rem;
}

.cfg-alt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: transparent;
}

.cfg-alt-card {
  background: var(--white);
  padding: 1.5rem;
  text-decoration: none;
  display: block;
  transition: background 0.15s;
}

.cfg-alt-card:hover {
  background: #fafaf8;
}

.cfg-alt-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 6px;
}

.cfg-alt-reason {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.55;
}

/* Gallery CTA */
.cfg-gallery-section {
  background: var(--white);
  padding: 3rem 0;
  border-top: 1px solid var(--surface-2);
}

.cfg-gallery-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.cfg-gallery-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.5rem;
}

.cfg-gallery-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--brushed-nickel);
  margin-bottom: 1.5rem;
}

/* Restart */
.cfg-restart {
  text-align: center;
  padding: 2rem;
  background: var(--surface);
}

.cfg-restart-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--brushed-nickel);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Error state */
.cfg-error {
  background: rgba(180,60,60,0.08);
  border-left: 3px solid #c05050;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--matte-black);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .cfg-hero { padding: 5rem 20px 3rem; }
  .cfg-main { padding: 2rem 20px 4rem; }
  .cfg-mode-bar {
    flex-direction: column;
    gap: 0.75rem;
  }
  .cfg-mode-btn { width: 100%; justify-content: center; }
  .cfg-options-grid { grid-template-columns: repeat(2, 1fr); }
  .cfg-options-grid.cfg-options-3 { grid-template-columns: 1fr; }
  .cfg-options-grid.cfg-options-4 { grid-template-columns: repeat(2, 1fr); }
  .cfg-options-grid.cfg-options-2 { grid-template-columns: 1fr; }
  .cfg-result-main { grid-template-columns: 1fr; gap: 2rem; }
  .cfg-alt-grid { grid-template-columns: 1fr; }
  .cfg-result-actions { flex-direction: column; }
  .cfg-result-actions .btn { text-align: center; }
}


/* ============================================================
   DOOR STUDIO -- ROLLS ROYCE REDESIGN
   Light editorial theme. Clean slate. Photography leads,
   typography restrained, nothing fights.

   Palette:
     bg          #F4F4F2  (nautical white)
     surface     #EDEDE9
     dark        #1A1A18
     accent      var(--slate-blue) #5B7184
     text-1      #1A1A18
     text-2      rgba(26,26,24,0.45)
     text-3      rgba(26,26,24,0.25)
     border      rgba(26,26,24,0.08)
   ============================================================ */

.ds-root {
  min-height: 100vh;
  background: #F4F4F2;
  padding-top: 96px;
}

@media (max-width: 768px) {
  .ds-root { padding-top: 68px; }
}

/* ----- Stage system ----- */
.ds-stage {
  display: none;
  min-height: calc(100vh - 96px);
  will-change: opacity;
}

.ds-stage.active {
  display: flex;
  /* No flex-direction here -- each stage sets its own
     (.ds-stage-entry is row; the rest are column). The
     more-specific .ds-stage.active selector would
     override per-stage directions if we set one. */
}

@media (max-width: 768px) {
  .ds-stage { min-height: calc(100vh - 68px); }
}

@keyframes dsIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ENTRY
   ============================================================ */
.ds-stage-entry {
  flex-direction: row;
  align-items: stretch;
  background: #F4F4F2;
}

.ds-entry-left {
  flex: 0 0 48%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5rem;
  border-right: 1px solid rgba(26,26,24,0.08);
}

.ds-entry-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0;
}

.ds-entry-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 2rem;
  display: block;
}

.ds-entry-headline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 5vw, 5.5rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #1A1A18;
  line-height: 0.88;
  margin-bottom: 2rem;
}

.ds-entry-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(26,26,24,0.5);
  line-height: 1.8;
  max-width: 360px;
  margin-bottom: 3rem;
}

.ds-entry-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* ----- Buttons ----- */
.ds-btn-primary {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #1A1A18;
  color: #F4F4F2;
  border: none;
  padding: 16px 40px;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-block;
  text-decoration: none;
}

.ds-btn-primary:hover {
  background: #2a2a28;
}

.ds-btn-ghost {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(26,26,24,0.4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.ds-btn-ghost:hover {
  color: rgba(26,26,24,0.8);
}

.ds-btn-outline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: #1A1A18;
  border: 1px solid rgba(26,26,24,0.25);
  padding: 14px 28px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}

.ds-btn-outline:hover {
  border-color: #1A1A18;
  background: #1A1A18;
  color: #F4F4F2;
}

.ds-entry-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26,26,24,0.2);
}

.ds-entry-right {
  flex: 0 0 52%;
  position: relative;
  overflow: hidden;
  background: #EDEDE9;
  min-height: calc(100vh - 96px);
}

/* .ds-entry-img-wrap + .ds-entry-img rules consolidated
   into the single final hero block at end of file. */

.ds-entry-img-caption {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.5);
  background: rgba(26,26,24,0.3);
  backdrop-filter: blur(8px);
  padding: 5px 10px;
}

@media (max-width: 768px) {
  .ds-stage-entry { flex-direction: column; }
  .ds-entry-right {
    height: 50vw;
    flex: none;
    order: -1;
  }
  .ds-entry-img-wrap { position: relative; height: 100%; }
  .ds-entry-left { padding: 2rem 1.5rem; flex: 1; }
  .ds-entry-content { padding: 1rem 0; }
  .ds-entry-headline {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
}

/* ============================================================
   STAGE HEADER (shared)
   ============================================================ */
.ds-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  border-bottom: 1px solid rgba(26,26,24,0.08);
  background: #F4F4F2;
  flex-shrink: 0;
}

.ds-back-btn {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26,26,24,0.35);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.ds-back-btn:hover {
  color: rgba(26,26,24,0.8);
}

.ds-stage-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(26,26,24,0.2);
}

.ds-progress-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ds-progress-bar {
  width: 160px;
  height: 1px;
  background: rgba(26,26,24,0.1);
}

.ds-progress-fill {
  height: 100%;
  background: #1A1A18;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.ds-progress-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26,26,24,0.25);
}

/* ============================================================
   STAGE 2A: PHOTO UPLOAD
   ============================================================ */
.ds-stage-photo {
  background: #F4F4F2;
  flex-direction: column;
}

.ds-photo-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.ds-photo-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #1A1A18;
  margin-bottom: 0.75rem;
}

.ds-photo-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(26,26,24,0.4);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.ds-upload-zone {
  width: 100%;
  border: 1px solid rgba(26,26,24,0.12);
  padding: 3rem 2rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  background: #fff;
  cursor: pointer;
}

.ds-upload-zone.dragover {
  border-color: var(--slate-blue);
  background: rgba(91,113,132,0.04);
}

.ds-upload-hint {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(26,26,24,0.3);
  margin: 1rem 0 1.5rem;
}

.ds-drag-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: rgba(26,26,24,0.2);
  margin-top: 0.75rem;
}

.ds-change-photo {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: rgba(26,26,24,0.35);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-upload-ready img {
  max-height: 400px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto 1.5rem;
}

.ds-upload-ready-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ds-upload-btn {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #1A1A18;
  color: #F4F4F2;
  border: none;
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.2s;
}

.ds-upload-btn:hover { background: #2a2a28; }

/* ============================================================
   STAGE 2B: QUESTIONS
   ============================================================ */
.ds-stage-questions {
  background: #F4F4F2;
  flex-direction: column;
}

/* Questions: opacity-based show/hide so GSAP doesn't fight
   display:none reflows. Active question takes the layout
   space (position:relative); inactive ones overlay
   absolutely so they stay laid out but invisible. */
.ds-questions-inner {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.ds-question {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 5rem;
  gap: 8rem;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  max-width: 1200px;
  margin: 0 auto;
}

.ds-question.active {
  opacity: 1;
  pointer-events: all;
  position: relative;
}

.ds-q-left {
  flex: 0 0 320px;
  flex-shrink: 0;
}

.ds-q-number {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-blue);
  display: block;
  margin-bottom: 1.5rem;
}

.ds-q-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #1A1A18;
  line-height: 0.92;
  margin-bottom: 1rem;
}

.ds-q-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(26,26,24,0.4);
  line-height: 1.7;
}

.ds-q-right { flex: 1; }

.ds-q-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(26,26,24,0.08);
}

.ds-q-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(26,26,24,0.08);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, padding-left 0.2s;
  position: relative;
}

.ds-q-item:hover { padding-left: 0.75rem; }
.ds-q-item:hover .ds-q-item-arrow {
  color: #1A1A18;
  transform: translateX(4px);
}

.ds-q-item.selected {
  background: rgba(91,113,132,0.06);
  padding-left: 0.75rem;
}

.ds-q-item.selected .ds-q-item-name {
  color: var(--slate-blue);
}

.ds-q-item.selected .ds-q-item-arrow {
  color: var(--slate-blue);
}

.ds-q-item-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ds-q-item-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #1A1A18;
  flex: 1;
}

.ds-q-item-hint {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(26,26,24,0.35);
  margin-left: auto;
  margin-right: 1rem;
  white-space: nowrap;
}

.ds-q-item-arrow {
  font-size: 1rem;
  color: rgba(26,26,24,0.2);
  flex-shrink: 0;
  transition: color 0.15s, transform 0.2s;
}

/* Glass option variant */
.ds-q-item-glass {
  padding: 0.75rem 0;
  gap: 1rem;
}

.ds-q-glass-img-wrap {
  width: 64px;
  height: 48px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8e8e4;
}

.ds-q-glass-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-q-glass-none {
  background: linear-gradient(135deg, #c8b89a, #b8a888);
}

.ds-q-glass-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 900px) {
  .ds-question {
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 2rem;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
  }
  .ds-q-left { flex: none; }
  .ds-q-item-hint { display: none; }
}

/* ============================================================
   STAGE 3: PROCESSING (cinematic)
   Concentric arc with a travelling dot, italic eyebrow,
   one focused step title that crossfades, tiny step counter.
   ============================================================ */
.ds-stage-processing {
  background: #F4F4F2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ds-processing-inner {
  text-align: center;
  padding: 2rem;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
}

.ds-processing-mark {
  position: relative;
  width: 120px;
  height: 120px;
}

.ds-processing-mark svg {
  display: block;
  animation: dsMarkSpin 6s linear infinite;
  transform-origin: center center;
}

@keyframes dsMarkSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ds-processing-arc {
  animation: dsArcPulse 2.4s ease-in-out infinite;
}

@keyframes dsArcPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.ds-processing-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(26,26,24,0.35);
  margin: 0;
}

.ds-processing-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1A1A18;
  line-height: 0.95;
  margin: 0;
  min-height: 2.1em;
  will-change: opacity, transform;
}

.ds-processing-counter {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(26,26,24,0.2);
  margin: 0;
}

/* ============================================================
   STAGE 4: RESULTS
   ============================================================ */
.ds-stage-results {
  background: #F4F4F2;
  flex-direction: column;
  min-height: auto;
}

/* Hero: photo LEFT, text RIGHT */
.ds-result-hero {
  display: grid;
  grid-template-columns: 58% 42%;
  min-height: 100vh;
  background: #F4F4F2;
}

/* .ds-result-photo-side rules consolidated into the
   single final hero block at end of file. */

.ds-result-photo-tag {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.6);
  background: rgba(26,26,24,0.4);
  backdrop-filter: blur(8px);
  padding: 5px 10px;
}

.ds-result-text-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #F4F4F2;
  border-left: 1px solid rgba(26,26,24,0.08);
}

.ds-result-text-inner {
  padding: 5rem 4rem;
  opacity: 0;
}

.ds-result-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate-blue);
  display: block;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(26,26,24,0.08);
}

.ds-result-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(26,26,24,0.35);
  margin-bottom: 0.5rem;
  display: block;
}

.ds-result-collection {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #1A1A18;
  line-height: 0.9;
  margin-bottom: 1.5rem;
  word-break: normal;
  overflow-wrap: normal;
}

.ds-result-reasoning {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(26,26,24,0.5);
  line-height: 1.8;
  margin-bottom: 1.25rem;
  max-width: 380px;
}

.ds-result-confidence {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26,26,24,0.2);
  margin-bottom: 1.5rem;
}

.ds-result-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 2.5rem;
}

.ds-result-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(26,26,24,0.45);
}

.ds-result-highlight svg {
  flex-shrink: 0;
  color: var(--slate-blue);
}

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

.ds-result-work-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  color: rgba(26,26,24,0.3);
  text-decoration: none;
  transition: color 0.2s;
}

.ds-result-work-link:hover {
  color: rgba(26,26,24,0.7);
}

/* Sections */
.ds-result-section {
  padding: 5rem 0;
  background: #F4F4F2;
}

.ds-section-warm { background: #EDEDE9; }

.ds-result-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5rem;
}

.ds-result-section-header { margin-bottom: 2.5rem; }

.ds-section-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(26,26,24,0.35);
  margin-bottom: 0.35rem;
  display: block;
}

.ds-section-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1A1A18;
  line-height: 1;
}

.ds-section-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(26,26,24,0.35);
  margin-top: 0.5rem;
  line-height: 1.6;
}

/* Wood cards */
.ds-wood-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(26,26,24,0.06);
}

.ds-wood-card {
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* GSAP owns initial opacity/transform via fromTo, so
     CSS keeps cards visible by default (works even when
     GSAP fails to load). */
  will-change: opacity, transform;
}

.ds-wood-card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F4F4F2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
}

.ds-wood-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  transform: translateZ(0);
}

.ds-wood-card-no-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #EDEDE9;
}

.ds-wood-primary-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--slate-blue);
  color: white;
  padding: 4px 8px;
}

.ds-wood-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(26,26,24,0.06);
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-wood-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ds-wood-card-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #1A1A18;
}

.ds-wood-card-grade {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  flex-shrink: 0;
  white-space: nowrap;
}

.ds-wood-card-grade.stain {
  background: #EDEDE9;
  color: rgba(26,26,24,0.4);
}

.ds-wood-card-grade.paint {
  background: #1A1A18;
  color: #F4F4F2;
}

.ds-wood-card-why {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(26,26,24,0.4);
  line-height: 1.6;
}

.ds-wood-note { display: none !important; }

/* Glass cards */
.ds-glass-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
}

.ds-glass-card {
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: opacity, transform;
}

.ds-glass-card-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ds-glass-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.ds-glass-card:hover .ds-glass-card-img {
  transform: scale(1.03);
}

.ds-glass-card-swatch {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #EDEDE9;
}

.ds-glass-card-body {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(26,26,24,0.06);
}

.ds-glass-card-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #1A1A18;
  margin-bottom: 3px;
}

.ds-glass-card-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(26,26,24,0.4);
  line-height: 1.5;
}

/* Drawings strip */
.ds-drawings-strip {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(26,26,24,0.06);
  cursor: grab;
}

.ds-drawings-strip::-webkit-scrollbar { display: none; }
.ds-drawings-strip:active { cursor: grabbing; }

.ds-drawing-card {
  flex-shrink: 0;
  width: 260px;
  background: #fff;
  cursor: pointer;
  will-change: opacity, transform;
  transition: background 0.15s;
}

.ds-drawing-card:hover { background: #fafaf8; }

.ds-drawing-card img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  display: block;
  background: #fff;
}

.ds-drawing-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26,26,24,0.3);
  padding: 0.625rem 1rem;
  border-top: 1px solid rgba(26,26,24,0.06);
}

.ds-drawings-cta { margin-top: 1.5rem; }

/* Alternatives */
.ds-alt-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: transparent;
  margin-top: 1.5rem;
}

.ds-alt-card {
  background: #fff;
  padding: 2rem;
  text-decoration: none;
  display: block;
  will-change: opacity, transform;
  transition: background 0.15s;
  border-left: 2px solid transparent;
}

.ds-alt-card:hover {
  background: #fafaf8;
  border-left-color: var(--slate-blue);
}

.ds-alt-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #1A1A18;
  margin-bottom: 6px;
}

.ds-alt-reason {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(26,26,24,0.4);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.ds-alt-link {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-blue);
}

/* Warnings */
.ds-warnings {
  background: #fdf6ec;
  padding: 1.5rem 5rem;
  border-top: 1px solid rgba(180,100,20,0.1);
  border-bottom: 1px solid rgba(180,100,20,0.1);
}

.ds-warning-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: #6a3a0a;
  line-height: 1.6;
  padding: 6px 0;
}

/* CTA (dark band) */
.ds-result-cta {
  background: #1A1A18;
  padding: 8rem 0;
  text-align: center;
}

.ds-result-cta-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 2rem;
}

.ds-result-cta-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244,244,242,0.3);
  margin-bottom: 0.75rem;
  display: block;
}

.ds-result-cta-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #F4F4F2;
  line-height: 0.88;
  margin-bottom: 1.25rem;
}

.ds-result-cta-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244,244,242,0.35);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.ds-result-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ds-result-cta .ds-btn-primary {
  background: #F4F4F2;
  color: #1A1A18;
}

.ds-result-cta .ds-btn-primary:hover {
  background: #fff;
}

.ds-restart-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(244,244,242,0.25);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.ds-restart-link:hover {
  color: rgba(244,244,242,0.6);
}

/* Lightbox */
.ds-lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.ds-lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.ds-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,24,0.95);
  cursor: pointer;
}

.ds-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ds-lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  color: rgba(244,244,242,0.4);
  cursor: pointer;
  padding: 10px;
  transition: color 0.15s;
}

.ds-lightbox-close:hover {
  color: rgba(244,244,242,0.9);
}

.ds-lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  background: #fff;
  display: block;
}

.ds-lightbox-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.3);
}

/* Error toast */
.ds-error-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1A18;
  color: #F4F4F2;
  padding: 1rem 1.5rem;
  z-index: 9999;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  animation: dsToastIn 0.3s ease;
}

@keyframes dsToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Mobile results */
@media (max-width: 768px) {
  .ds-result-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ds-result-photo-side {
    height: 60vw;
    min-height: 280px;
  }
  .ds-result-text-inner { padding: 2.5rem 1.5rem; }
  .ds-wood-cards { grid-template-columns: repeat(2, 1fr); }
  .ds-glass-cards { grid-template-columns: 1fr; }
  .ds-alt-cards { grid-template-columns: 1fr; }
  .ds-result-section-inner { padding: 0 1.5rem; }
  .ds-warnings { padding: 1.25rem 1.5rem; }
  .ds-result-cta { padding: 5rem 0; }
  .ds-result-cta-actions { flex-direction: column; }
}

@media (max-width: 900px) {
  .ds-result-section-inner { padding: 0 2rem; }
}

/* ============================================================
   HERO IMAGE FINAL OVERRIDES
   The single canonical block for Door Studio + collection
   hero images. Both the entry and the results photo use
   object-fit: contain so the full photo always shows --
   landscape source photos no longer get cropped vertically
   to fit a tall portrait container. The warm grey backdrop
   becomes a framed-photograph treatment.
   ============================================================ */

/* Door Studio entry */
.ds-entry-right {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 96px);
  flex: 0 0 52%;
  background: #EDEDE9;
}

.ds-entry-img-wrap {
  position: absolute;
  inset: 0;
  padding: 2.5rem;
  box-sizing: border-box;
}

.ds-entry-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Door Studio results. Uploaded user photos and recommended
   collection door shots both go through contain so the whole
   image is visible regardless of source aspect ratio. */
.ds-result-photo-side {
  position: relative;
  overflow: hidden;
  background: #EDEDE9;
  min-height: 500px;
}

.ds-result-photo-side img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  padding: 2.5rem;
  box-sizing: border-box;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Collection detail heroes (door_detail.html uses an
   .door-hero <section> with background-image; these rules
   also cover any <img>-based hero variant). */
.cd-hero {
  position: relative;
  overflow: hidden;
}

.cd-hero img,
.cd-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================================
   Multi-select question UI
   ============================================================ */
.ds-q-multi-hint {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--slate-blue);
  margin-top: 1rem;
  display: block;
}

.ds-q-continue {
  margin-top: 2rem;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #1A1A18;
  color: #F4F4F2;
  border: none;
  padding: 16px 40px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  display: inline-block;
}

.ds-q-continue:hover:not(:disabled) {
  background: #2a2a28;
}

.ds-q-continue:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Multi-select items get a visible check mark so users
   understand multiple are picked. Replaces the arrow with
   a tasteful tick for selected items. */
.ds-q-list[data-multi="true"] .ds-q-item.selected
  .ds-q-item-arrow {
  visibility: hidden;
}

.ds-q-list[data-multi="true"] .ds-q-item.selected::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slate-blue);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'><polyline points='1 4 3.5 6.5 9 1' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================================
   DOOR STUDIO -- CROSS-DEVICE RESPONSIVE PASS
   Mobile (≤480), small tablet (≤768), large tablet (≤900),
   small desktop (≤1100). Keeps touch targets ≥44px, scales
   padding and typography, and never lets the photo container
   collapse to 0.
   ============================================================ */

/* ----- ≤1100 small desktops / large tablets ----- */
@media (max-width: 1100px) {
  .ds-question {
    padding: 0 3rem;
    gap: 5rem;
  }
  .ds-q-left {
    flex: 0 0 260px;
  }
  .ds-entry-left {
    padding: 4rem 3rem;
  }
  .ds-entry-content {
    padding: 2rem 0;
  }
  .ds-entry-headline {
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  }
  .ds-result-text-inner {
    padding: 4rem 3rem;
  }
  .ds-result-section-inner {
    padding: 0 3rem;
  }
}

/* ----- ≤900 tablets: question stacks, list takes full width ----- */
@media (max-width: 900px) {
  /* Layout (does NOT touch position: that stays absolute for
     inactive questions so they overlay invisibly; the .active
     rule below makes only the visible question take flow). */
  .ds-question {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    padding: 2rem 1.5rem;
  }
  .ds-question.active {
    position: relative;
    inset: auto;
    overflow-y: auto;
  }
  .ds-q-left { flex: none; width: 100%; }
  .ds-q-right { width: 100%; }
  .ds-q-item-hint { display: none; }
  .ds-q-continue { width: 100%; padding: 18px 24px; }
}

/* ----- ≤768 mobile: entry stacks, single-column grids ----- */
@media (max-width: 768px) {
  /* Door Studio root + stages */
  .ds-root { padding-top: 70px; }
  .ds-stage,
  .ds-stage-entry,
  .ds-stage-questions,
  .ds-stage-photo,
  .ds-stage-processing,
  .ds-stage-results {
    min-height: calc(100vh - 70px);
  }

  /* Entry */
  .ds-stage-entry { flex-direction: column; }
  .ds-entry-right {
    flex: none;
    height: 56vw;
    min-height: 220px;
    order: -1;
  }
  .ds-entry-img-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
  }
  .ds-entry-left {
    padding: 2rem 1.25rem;
    border-right: none;
  }
  .ds-entry-content { padding: 1.5rem 0; }
  .ds-entry-headline {
    font-size: clamp(2.25rem, 10vw, 4rem);
  }
  .ds-entry-body { font-size: 0.9375rem; }
  .ds-entry-actions { width: 100%; }
  .ds-btn-primary {
    padding: 16px 32px;
    width: auto;
    min-height: 48px;
  }
  .ds-entry-meta { font-size: 8px; }

  /* Stage header */
  .ds-stage-header { padding: 1rem 1.25rem; }
  .ds-progress-bar { width: 100px; }

  /* Questions */
  .ds-questions-inner { padding: 0; }
  .ds-question { padding: 1.5rem 1.25rem; gap: 1.5rem; }
  .ds-q-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .ds-q-sub { font-size: 0.8125rem; }
  .ds-q-item {
    padding: 1rem 0;
    min-height: 56px; /* touch-friendly tap target */
  }
  .ds-q-item-name { font-size: 0.875rem; }
  .ds-q-multi-hint { margin-top: 0.75rem; }

  /* Photo upload */
  .ds-photo-inner { padding: 2rem 1.25rem; }
  .ds-upload-zone { padding: 2rem 1.25rem; }

  /* Processing: smaller mark on mobile */
  .ds-processing-mark {
    width: 96px;
    height: 96px;
  }
  .ds-processing-mark svg {
    width: 96px;
    height: 96px;
  }
  .ds-processing-inner { gap: 1.75rem; padding: 1.5rem; }
  .ds-processing-title {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
  }

  /* Results hero stacks */
  .ds-result-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ds-result-photo-side {
    height: 64vw;
    min-height: 280px;
    order: -1;
  }
  .ds-result-photo-side img {
    padding: 1.5rem;
  }
  .ds-result-text-inner { padding: 2.5rem 1.25rem; }
  .ds-result-collection {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  /* Card grids collapse to single column */
  .ds-wood-cards,
  .ds-glass-cards,
  .ds-alt-cards {
    grid-template-columns: 1fr;
  }
  .ds-result-section { padding: 3.5rem 0; }
  .ds-result-section-inner { padding: 0 1.25rem; }
  .ds-result-cta { padding: 5rem 0; }
  .ds-result-cta-actions { flex-direction: column; gap: 1rem; }
  .ds-result-cta-actions .ds-btn-primary { width: 100%; }
  .ds-warnings { padding: 1.25rem 1.25rem; }

  /* Drawing cards narrower on mobile */
  .ds-drawing-card { width: 220px; }
  .ds-drawing-card img { height: 170px; padding: 12px; }
}

/* ----- ≤480 phones ----- */
@media (max-width: 480px) {
  .ds-entry-headline {
    font-size: clamp(2rem, 11vw, 3rem);
  }
  .ds-entry-body { font-size: 0.875rem; }
  .ds-q-title { font-size: clamp(1.375rem, 7vw, 1.875rem); }
  .ds-q-item { gap: 0.75rem; padding: 0.875rem 0; }
  .ds-q-item-name { font-size: 0.8125rem; }
  .ds-q-glass-img-wrap { width: 52px; height: 40px; }
  .ds-processing-mark {
    width: 80px;
    height: 80px;
  }
  .ds-processing-mark svg {
    width: 80px;
    height: 80px;
  }
  .ds-result-collection {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }
}

/* ============================================================
   HORIZONTAL SCROLL CONTROLS
   Door Studio drawings strip + collection page tab nav.
   Arrow buttons appear on desktop when content overflows;
   on mobile the buttons hide and native touch scroll +
   snap-to-card works.
   ============================================================ */

/* ----- Drawings strip ----- */
.ds-drawings-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 1.5rem;
}

.ds-scroll-btn {
  flex-shrink: 0;
  width: 44px;
  min-height: 44px;
  background: #fff;
  border: 1px solid rgba(26,26,24,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26,26,24,0.5);
  transition: opacity 0.2s, background 0.2s,
              color 0.2s, border-color 0.2s;
  z-index: 2;
}

.ds-scroll-btn:hover {
  background: #1A1A18;
  color: #F4F4F2;
  border-color: #1A1A18;
}

/* The strip itself reuses .ds-drawings-strip styles but
   needs scroll-behavior + iOS momentum. */
.ds-drawings-strip {
  flex: 1;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .ds-scroll-btn { display: none; }
  .ds-drawings-strip {
    scroll-snap-type: x mandatory;
  }
  .ds-drawing-card {
    scroll-snap-align: start;
  }
}

/* ----- Tab nav scroll buttons ----- */
.ca-tab-scroll-btn {
  flex-shrink: 0;
  width: 40px;
  min-height: 52px;
  background: var(--white);
  border: none;
  border-right: 1px solid var(--surface-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brushed-nickel);
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  opacity: 0;
  pointer-events: none;
}

.ca-tab-scroll-btn.ca-tab-scroll-right {
  border-right: none;
  border-left: 1px solid var(--surface-2);
}

.ca-tab-scroll-btn:hover {
  background: var(--surface);
  color: var(--matte-black);
}

/* Make the tab list always scrollable on desktop too --
   the inline rule used to only enable overflow at ≤768px,
   which silently clipped overflowing tabs on desktop. */
.ca-tab-nav-inner {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.ca-tab-nav-inner::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  .ca-tab-scroll-btn { display: none; }
}

/* ============================================================
   GALLERY FILTER SCROLL BUTTONS
   Same pattern as the collection tab nav: arrows on desktop
   when filters overflow, native touch scroll on mobile.
   ============================================================ */
/* Collection page tab nav arrows -- tap-friendly, clear against the strip. */
.ca-tab-scroll-btn {
  background: var(--surface);
  color: var(--matte-black);
}

.ca-tab-scroll-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.ca-tab-scroll-btn:hover {
  background: var(--matte-black);
  color: var(--white);
}

/* ============================================================
   DOOR STUDIO -- MOBILE QUESTION REFINEMENT
   Tightens the stage header and question typography on
   phones so the question content sits high in the viewport
   with no perceived whitespace above. The actual "whitespace
   above" bug was that the ≤900 media-query was un-scoping
   position: relative onto every .ds-question, which made
   inactive questions stack in flow and push the active
   question down -- fixed above. These rules layer on
   compact tweaks for phone widths.
   ============================================================ */
@media (max-width: 768px) {
  .ds-stage-header {
    padding: 0.875rem 1.25rem;
  }
  .ds-progress-bar { width: 100px; }
  .ds-back-btn { font-size: 8px; }
  .ds-progress-label { font-size: 8px; }

  .ds-questions-inner {
    padding: 0;
  }
  .ds-question {
    padding: 1.5rem 1.25rem;
    gap: 1.5rem;
    min-height: auto;
  }
  .ds-q-number { margin-bottom: 0.75rem; }
  .ds-q-title {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    margin-bottom: 0.5rem;
  }
  .ds-q-sub {
    font-size: 0.875rem;
    margin-bottom: 0;
  }
  .ds-q-left { padding-bottom: 0; }
  .ds-q-right { flex: none; }
  .ds-q-list { width: 100%; }
  .ds-q-item { padding: 1rem 0; }
  .ds-q-item-glass { padding: 0.75rem 0; }
  .ds-q-glass-img-wrap { width: 52px; height: 40px; }
}

/* ============================================================
   FLOATING COLLECTION CARD
   Minimal vertical icon strip on the right edge. Each button
   is a 48px-wide tile with a tiny in-tile label. On hover,
   a tooltip slides in to the left of the strip with the
   verbose label (data-tip).
   Hidden below 1024px.
   ============================================================ */

.cd-float-card {
  position: fixed;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%) translateX(120%);
  z-index: 150;
  transition: transform 0.4s
    cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 48px;
}

.cd-float-card.visible {
  transform: translateY(-50%) translateX(0);
  pointer-events: all;
}

.cd-float-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 8px;
  background: #1A1A18;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: rgba(244,244,242,0.45);
  position: relative;
}

.cd-float-action:hover {
  background: #2a2a28;
  color: rgba(244,244,242,0.9);
}

.cd-float-action svg {
  flex-shrink: 0;
}

.cd-float-action span {
  font-family: 'Inter', sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

.cd-float-action-accent {
  background: var(--slate-blue);
  color: rgba(244,244,242,0.8);
  margin-top: 4px;
}

.cd-float-action-accent:hover {
  background: #4a6070;
  color: var(--nautical-white);
}

/* Tooltip: shows the data-tip verbose label to the left
   of the tile on hover. */
.cd-float-action::before {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1A1A18;
  color: rgba(244,244,242,0.7);
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  border: 1px solid rgba(255,255,255,0.06);
}

.cd-float-action:hover::before {
  opacity: 1;
}

@media (max-width: 1024px) {
  .cd-float-card { display: none; }
}

/* ============================================================
   MOBILE SIZING PASS (≤768)
   Layered on top of existing rules to tighten every major
   surface for phone viewports.
   ============================================================ */
@media (max-width: 768px) {
  /* 3A: Nav */
  .nav-logo { height: 44px; }
  .nav-inner { padding: 0 16px; }
  .btn.nav-cta {
    font-size: 0.5625rem;
    padding: 8px 14px;
    letter-spacing: 0.08em;
  }
  .nav-search-bar-wrap { display: none; }

  /* 3B: Collection hero (uses .door-hero in this site;
     the .cd-hero/.collection-hero aliases also targeted in
     case a different template variant uses them). */
  .door-hero,
  .cd-hero {
    height: 60vw;
    min-height: 280px;
    max-height: 400px;
  }
  .cd-hero-title,
  .door-hero .t-headline {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .cd-hero-inner { padding: 1.5rem; }

  /* 3C: Collection tab nav buttons (nav offset set in the block above) */
  .ca-tab-btn {
    font-size: 0.5625rem;
    padding: 0.875rem 1rem;
    letter-spacing: 0.08em;
  }

  /* 3D: Collection asset sections */
  .ca-section-inner { padding: 2rem 1.25rem; }
  .ca-section-title {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
  }
  .ca-door-grid { grid-template-columns: repeat(2, 1fr); }
  .ca-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .ca-count { display: none; }

  .gallery-control-bar {
    padding: 0.25rem 0.5rem;
  }
  .gallery-tab {
    font-size: 0.5625rem;
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
  }

  /* 3F: Homepage */
  .hero-title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-steps { flex-direction: column; }
  .process-connector { display: none; }

  /* 3G: Work With Us */
  .wwu-perks-grid { grid-template-columns: 1fr; }
  .wwu-form-row { grid-template-columns: 1fr; }
  .wwu-hero { padding: 4rem 1.25rem 3rem; }
  .wwu-inner { padding: 0 1.25rem; }

  /* 3H: Door Studio */
  .ds-stage-entry { flex-direction: column; }
  .ds-entry-left {
    padding: 2rem 1.25rem;
    border-right: none;
    border-bottom: 1px solid rgba(26,26,24,0.08);
    flex: none;
  }
  .ds-entry-right {
    flex: none;
    height: 55vw;
    min-height: 240px;
    width: 100%;
  }
  .ds-entry-headline {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
  .ds-entry-body { font-size: 0.875rem; }

  .ds-result-hero { grid-template-columns: 1fr; }
  .ds-result-photo-side {
    height: 55vw;
    min-height: 240px;
  }
  .ds-result-text-inner { padding: 2rem 1.25rem; }
  .ds-result-collection {
    font-size: clamp(1.75rem, 8vw, 3rem);
  }

  .ds-wood-cards { grid-template-columns: repeat(2, 1fr); }
  .ds-glass-cards,
  .ds-alt-cards { grid-template-columns: 1fr; }

  .ds-result-section-inner { padding: 0 1.25rem; }
  .ds-result-cta { padding: 4rem 0; }
  .ds-result-cta-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .ds-result-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .ds-result-hero-actions .ds-btn-primary,
  .ds-result-hero-actions .ds-btn-outline {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   MATERIAL LIBRARY (/resources)
   ============================================================ */

.rl-hero {
  background: var(--matte-black);
  padding: calc(96px + 4rem) 0 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rl-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 3rem;
}
.rl-hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate-blue);
  display: block;
  margin-bottom: 1rem;
}
.rl-hero-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.9;
  margin-bottom: 1.25rem;
}
.rl-hero-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(244,244,242,0.4);
  line-height: 1.8;
  max-width: 560px;
}

.rl-nav {
  position: sticky;
  top: 96px;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--surface-2);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.rl-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.rl-nav-inner::-webkit-scrollbar { display: none; }
.rl-nav-link {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,26,24,0.35);
  text-decoration: none;
  padding: 1.125rem 1.5rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  margin-bottom: -1px;
}
.rl-nav-link:hover { color: var(--matte-black); }
.rl-nav-link.active {
  color: var(--matte-black);
  border-bottom-color: var(--slate-blue);
}

.rl-body { background: var(--white); }

.rl-category {
  border-bottom: 2px solid var(--surface-2);
  scroll-margin-top: 140px;
}
.rl-category-header {
  background: var(--matte-black);
  padding: 3rem 0;
}
.rl-category-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.rl-cat-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244,244,242,0.3);
  flex-basis: 100%;
  margin-bottom: 0.25rem;
}
.rl-cat-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 1;
}
.rl-cat-count {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.2);
  margin-left: auto;
}

.rl-section {
  border-bottom: 1px solid rgba(26,26,24,0.06);
  padding: 3rem 0;
  background: #FFFFFF;
}
.rl-section:nth-child(even) {
  background: #F4F4F2;
}
.rl-section:last-child { border-bottom: none; }
.rl-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
}
.rl-section-header { margin-bottom: 2rem; }
.rl-section-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.5rem;
}
.rl-section-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--brushed-nickel);
  line-height: 1.7;
  max-width: 560px;
}

.rl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
}
.rl-card {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rl-card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

.rl-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}
.rl-card-body {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--surface-2);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rl-card-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 1.2;
  /* Reserve a uniform 2-line block so 1-line and 2-line
     names produce identical card heights. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.rl-card-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--brushed-nickel);
  line-height: 1.6;
  /* Clamp to a uniform 4-line block so every material card
     is the same height regardless of description length.
     The full text remains available in the card lightbox. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 6.4em;
}

.rl-cta {
  background: var(--matte-black);
  padding: 6rem 0;
  text-align: center;
}
.rl-cta-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 2rem;
}
.rl-cta-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244,244,242,0.3);
  display: block;
  margin-bottom: 0.75rem;
}
.rl-cta-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.9;
  margin-bottom: 1rem;
}
.rl-cta-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(244,244,242,0.35);
  line-height: 1.8;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .rl-hero { padding: calc(68px + 2rem) 0 2.5rem; }
  .rl-hero-inner { padding: 0 1.25rem; }
  /* Use position:fixed on mobile because the global mobile
     overrides set body { overflow-x: hidden } which makes
     body its own scroll container and silently breaks
     position:sticky for children. Mirror the global .nav
     pattern (also fixed) instead. */
  .rl-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
  }
  /* Push content below the fixed nav so it doesn't slide
     under it. 44px = rl-nav height at this breakpoint. */
  .rl-body { padding-top: 44px; }
  .rl-nav-inner { padding: 0 8px; }
  .rl-nav-link {
    font-size: 0.5625rem;
    padding: 0.875rem 0.875rem;
  }
  .rl-category { scroll-margin-top: 112px; }
  .rl-category-header { padding: 2rem 0; }
  .rl-category-header-inner { padding: 0 1.25rem; }
  .rl-section { padding: 2rem 0; }
  .rl-section-inner { padding: 0 1.25rem; }
  .rl-grid { grid-template-columns: repeat(2, 1fr); }
  .rl-cta { padding: 4rem 0; }
}

/* ===== MATERIAL LIBRARY LIGHTBOX ===== */

.rl-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rl-card[role="button"] { cursor: pointer; }
.rl-card[role="button"]:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  position: relative;
  z-index: 1;
}
.rl-card[role="button"]:focus-visible {
  outline: 2px solid var(--slate-blue);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.rl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.rl-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.rl-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.92);
  cursor: pointer;
}
.rl-lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: min(92vw, 860px);
  max-height: 90vh;
  padding: 1rem;
}
.rl-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: rgba(244,244,242,0.5);
  cursor: pointer;
  padding: 8px;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-lightbox-close:hover { color: rgba(244,244,242,0.9); }
.rl-lightbox-img-wrap {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  /* Defined box so small swatches (320x200) scale up instead of
     rendering at their tiny natural size. */
  width: min(88vw, 640px);
  max-height: 76vh;
  overflow: hidden;
}
.rl-lightbox-img {
  width: 100%;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  display: block;
}
.rl-lightbox-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  max-width: 560px;
}
.rl-lightbox-label {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--nautical-white);
}
.rl-lightbox-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(244,244,242,0.45);
  line-height: 1.7;
}

/* ===== MATERIAL LIBRARY TIERS ===== */
.rl-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 0.75rem;
}
.rl-tier-recommended {
  background: rgba(91,113,132,0.1);
  color: var(--slate-blue);
}
.rl-tier-thermo {
  background: rgba(92,53,32,0.08);
  color: #7A4A2E;
}
.rl-tier-traditional {
  background: rgba(26,26,24,0.06);
  color: rgba(26,26,24,0.4);
}

/* Pros/cons two-column layout under thermalized section */
.rl-procon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1.25rem 0 1.5rem;
  max-width: 720px;
}
@media (max-width: 640px) {
  .rl-procon { grid-template-columns: 1fr; gap: 1.25rem; }
}
.rl-procon-col {}
.rl-procon-heading {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.rl-procon-heading-pros { color: var(--slate-blue); }
.rl-procon-heading-cons { color: #8A5A2C; }

.rl-pros-list,
.rl-cons-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.rl-pros-item,
.rl-cons-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(26,26,24,0.6);
  line-height: 1.5;
}
.rl-pros-item svg,
.rl-cons-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.rl-pros-item svg { color: var(--slate-blue); }
.rl-cons-item svg { color: #8A5A2C; }

/* Swatch cards (thermalized products with no photo) */
.rl-card-swatch-block {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}
.rl-swatch-finish-note {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.22);
  padding: 3px 7px;
  backdrop-filter: blur(4px);
}
.rl-card-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7A4A2E;
  margin-top: 2px;
}

/* ===== RHD CHAT BUBBLE ===== */

.rhd-chat-wrap {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* CRITICAL: the wrap is a large fixed-position box - the
     closed panel still occupies layout space (opacity:0, not
     display:none). Without this the wrap intercepts every
     tap/click in the bottom-right region and blocks the nav
     and page content site-wide. Only the trigger and the
     open panel re-enable pointer events below. */
  pointer-events: none;
}

.rhd-chat-trigger {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1A1A18;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F4F4F2;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: background 0.2s, transform 0.2s;
  position: relative;
  flex-shrink: 0;
  /* Re-enable taps on the trigger - pointer-events is an
     inherited property, so it would otherwise inherit the
     wrap's "none". The open panel already sets its own. */
  pointer-events: all;
}

.rhd-chat-trigger:hover {
  background: #2a2a28;
  transform: scale(1.05);
}

.rhd-chat-icon-open,
.rhd-chat-icon-close {
  position: absolute;
  transition: opacity 0.2s, transform 0.2s;
}

.rhd-chat-icon-close {
  opacity: 0;
  transform: rotate(-90deg);
}

.rhd-chat-wrap.open .rhd-chat-icon-open {
  opacity: 0;
  transform: rotate(90deg);
}

.rhd-chat-wrap.open .rhd-chat-icon-close {
  opacity: 1;
  transform: rotate(0deg);
}

.rhd-chat-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  background: #5B7184;
  border-radius: 50%;
  border: 2px solid #1A1A18;
  display: none;
}

.rhd-chat-dot.visible { display: block; }

.rhd-chat-panel {
  width: 340px;
  background: #1A1A18;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  max-height: 520px;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.25s ease,
              transform 0.25s ease;
  transform-origin: bottom right;
}

.rhd-chat-wrap.open .rhd-chat-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.rhd-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.rhd-chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rhd-chat-avatar {
  width: 30px;
  height: 30px;
  background: #5B7184;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.rhd-chat-header-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #F4F4F2;
  line-height: 1;
}

.rhd-chat-header-status {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 300;
  color: rgba(244,244,242,0.3);
  margin-top: 2px;
}

.rhd-chat-header-close {
  background: none;
  border: none;
  color: rgba(244,244,242,0.3);
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
  display: flex;
  align-items: center;
}

.rhd-chat-header-close:hover {
  color: rgba(244,244,242,0.8);
}

.rhd-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1)
                   transparent;
  min-height: 120px;
}

.rhd-chat-messages::-webkit-scrollbar {
  width: 3px;
}

.rhd-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
}

.rhd-msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
}

.rhd-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}

.rhd-msg-ai {
  align-self: flex-start;
  align-items: flex-start;
}

.rhd-msg-bubble {
  padding: 0.5rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.6;
  word-break: break-word;
}

.rhd-msg-user .rhd-msg-bubble {
  background: #5B7184;
  color: #F4F4F2;
}

.rhd-msg-ai .rhd-msg-bubble {
  background: rgba(255,255,255,0.07);
  color: rgba(244,244,242,0.85);
  border: 1px solid rgba(255,255,255,0.05);
}

.rhd-typing-bubble {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 0.625rem 0.875rem;
  display: flex;
  gap: 4px;
  align-items: center;
  align-self: flex-start;
}

.rhd-typing-dot {
  width: 4px;
  height: 4px;
  background: rgba(244,244,242,0.4);
  border-radius: 50%;
  animation: rhdTyping 1.2s infinite;
}

.rhd-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.rhd-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes rhdTyping {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.rhd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-self: flex-start;
  max-width: 100%;
  margin-top: 2px;
}

.rhd-chip {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 300;
  color: rgba(244,244,242,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  background: none;
  padding: 4px 9px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.rhd-chip:hover {
  color: #F4F4F2;
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}

.rhd-lead-form {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rhd-lead-form-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #F4F4F2;
  margin-bottom: 0.875rem;
}

.rhd-lead-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  color: #F4F4F2;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  padding: 7px 11px;
  margin-bottom: 7px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.rhd-lead-input:focus {
  border-color: #5B7184;
}

.rhd-lead-input option {
  background: #1A1A18;
  color: #F4F4F2;
}

.rhd-lead-input::placeholder {
  color: rgba(244,244,242,0.2);
}

.rhd-lead-textarea {
  resize: none;
  min-height: 60px;
}

.rhd-lead-submit {
  width: 100%;
  background: #5B7184;
  color: #F4F4F2;
  border: none;
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 2px;
  margin-bottom: 7px;
}

.rhd-lead-submit:hover { background: #4a6070; }
.rhd-lead-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rhd-lead-cancel {
  width: 100%;
  background: none;
  border: none;
  color: rgba(244,244,242,0.2);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  cursor: pointer;
  padding: 3px;
  text-align: center;
  transition: color 0.15s;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rhd-lead-cancel:hover {
  color: rgba(244,244,242,0.5);
}

.rhd-lead-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 300;
  color: rgba(244,244,242,0.18);
  line-height: 1.5;
  margin-top: 8px;
  text-align: center;
}

.rhd-chat-input-wrap {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.rhd-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.rhd-chat-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  color: #F4F4F2;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  padding: 7px 11px;
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
  transition: border-color 0.15s;
  border-radius: 0;
}

.rhd-chat-input:focus {
  border-color: rgba(255,255,255,0.2);
}

.rhd-chat-input::placeholder {
  color: rgba(244,244,242,0.2);
}

.rhd-chat-send {
  width: 34px;
  height: 34px;
  background: #5B7184;
  border: none;
  color: #F4F4F2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

.rhd-chat-send:hover { background: #4a6070; }
.rhd-chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rhd-chat-footer-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.625rem;
  font-weight: 300;
  color: rgba(244,244,242,0.12);
  margin-top: 5px;
  text-align: center;
}

.rhd-chat-footer-note a {
  color: rgba(244,244,242,0.2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===== CHAT BROCHURE CARD ===== */

.rhd-brochure-card {
  align-self: flex-start;
  width: 100%;
  max-width: 280px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 4px;
}

.rhd-brochure-img-wrap {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: #2a2a28;
}

.rhd-brochure-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  transition: transform 0.4s ease;
}

.rhd-brochure-card:hover .rhd-brochure-img {
  transform: scale(1.03);
}

.rhd-brochure-body {
  padding: 0.75rem;
}

.rhd-brochure-name {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #F4F4F2;
  margin-bottom: 0.625rem;
  line-height: 1.3;
}

.rhd-brochure-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rhd-brochure-btn {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 8px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.rhd-brochure-dl {
  background: #5B7184;
  color: #F4F4F2;
  border: none;
}

.rhd-brochure-dl:hover {
  background: #4a6070;
}

.rhd-brochure-view {
  background: transparent;
  color: rgba(244,244,242,0.5);
  border: 1px solid rgba(255,255,255,0.12);
}

.rhd-brochure-view:hover {
  color: #F4F4F2;
  border-color: rgba(255,255,255,0.3);
}

/* Quote bar */
.rhd-chat-quote-bar {
  padding: 0.5rem 1.25rem 0;
  flex-shrink: 0;
}

.rhd-chat-quote-btn {
  width: 100%;
  background: rgba(91,113,132,0.15);
  border: 1px solid rgba(91,113,132,0.3);
  color: rgba(244,244,242,0.7);
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rhd-chat-quote-btn:hover {
  background: rgba(91,113,132,0.3);
  color: #F4F4F2;
  border-color: rgba(91,113,132,0.5);
}

/* ===== CHAT BROCHURE CARD OVERRIDES ===== */
/* These sit last so they win over the earlier .rhd-brochure
   rules and the global img reset. flex-shrink:0 and the explicit
   min-height stop the flex message column from collapsing the
   card's fixed-height image well. */

.rhd-brochure-card {
  align-self: flex-start;
  width: 100%;
  max-width: 280px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 4px;
  flex-shrink: 0;
}

.rhd-brochure-img-wrap {
  width: 100% !important;
  height: 120px !important;
  min-height: 120px !important;
  overflow: hidden !important;
  background: #2a2a28 !important;
  display: block !important;
  position: relative !important;
}

.rhd-brochure-img-wrap img,
.rhd-brochure-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 120px !important;
  object-fit: cover !important;
  object-position: center 55% !important;
  display: block !important;
  transform: translateZ(0) !important;
}

/* ===== CHAT BUBBLE - MOBILE ===== */

@media (max-width: 768px) {

  /* Position: bottom right, smaller gap */
  .rhd-chat-wrap {
    bottom: 1rem;
    right: 1rem;
    gap: 8px;
  }

  /* Trigger button: same size, easier tap */
  .rhd-chat-trigger {
    width: 48px;
    height: 48px;
  }

  /* Panel: full width minus margins */
  .rhd-chat-panel {
    width: calc(100vw - 2rem);
    max-height: 75vh;
    max-width: 420px;
  }

  /* Header: tighter */
  .rhd-chat-header {
    padding: 0.75rem 1rem;
  }

  .rhd-chat-header-name {
    font-size: 0.5625rem;
  }

  /* Messages: tighter padding */
  .rhd-chat-messages {
    padding: 0.875rem 1rem;
    gap: 6px;
  }

  /* Message bubbles: slightly smaller text */
  .rhd-msg-bubble {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }

  /* Quick reply chips: wrap cleanly */
  .rhd-chips {
    gap: 4px;
    max-width: 100%;
  }

  .rhd-chip {
    font-size: 0.625rem;
    padding: 5px 8px;
    white-space: normal;
    text-align: left;
  }

  /* Brochure card: full width on mobile */
  .rhd-brochure-card {
    max-width: 100%;
    width: 100%;
  }

  .rhd-brochure-img-wrap {
    height: 100px !important;
    min-height: 100px !important;
  }

  .rhd-brochure-img-wrap img,
  .rhd-brochure-img {
    min-height: 100px !important;
  }

  .rhd-brochure-body {
    padding: 0.625rem;
  }

  .rhd-brochure-name {
    font-size: 0.5625rem;
    margin-bottom: 0.5rem;
  }

  .rhd-brochure-btn {
    font-size: 0.5625rem;
    padding: 5px 6px;
    gap: 4px;
  }

  /* Quote bar: full width, easier tap */
  .rhd-chat-quote-bar {
    padding: 0.5rem 1rem 0;
  }

  .rhd-chat-quote-btn {
    padding: 9px;
    font-size: 0.5625rem;
  }

  /* Input area: tighter */
  .rhd-chat-input-wrap {
    padding: 0.625rem 1rem;
  }

  .rhd-chat-input {
    font-size: 0.875rem;
    padding: 7px 10px;
  }

  .rhd-chat-send {
    width: 34px;
    height: 34px;
  }

  .rhd-chat-footer-note {
    font-size: 0.5625rem;
  }

  /* Lead form: tighter spacing */
  .rhd-lead-form {
    padding: 0.875rem 1rem;
  }

  .rhd-lead-form-title {
    font-size: 0.6875rem;
    margin-bottom: 0.75rem;
  }

  .rhd-lead-input {
    font-size: 0.875rem;
    padding: 8px 10px;
    margin-bottom: 6px;
  }

  /* rows is an HTML attribute, not CSS; min-height is the
     real control. */
  .rhd-lead-textarea {
    min-height: 56px;
  }

  .rhd-lead-submit {
    padding: 10px;
    font-size: 0.5625rem;
  }

  .rhd-lead-cancel {
    font-size: 0.6875rem;
  }

  .rhd-lead-note {
    font-size: 0.625rem;
  }

  /* Typing indicator */
  .rhd-typing-bubble {
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 480px) {

  /* Panel: edge to edge on small phones */
  .rhd-chat-wrap {
    bottom: 0.75rem;
    right: 0.75rem;
  }

  .rhd-chat-panel {
    width: calc(100vw - 1.5rem);
    max-height: 78vh;
  }

  /* Brochure card: stack buttons vertically
     on very small screens */
  .rhd-brochure-actions {
    flex-direction: column;
    gap: 4px;
  }

  .rhd-brochure-btn {
    width: 100%;
    justify-content: center;
  }

  /* Chips: full width on tiny screens */
  .rhd-chip {
    flex: 1 1 calc(50% - 4px);
  }
}

/* Materials added an 8th top-level nav link (2026-05). The desktop
   nav needs ~1384px to lay out all links + search + Get Started CTA,
   so below standard desktop the CTA was overflowing off-screen.
   Tighten the link gap and type below 1400px to claw that back. */
@media (max-width: 1400px) {
  .nav-links { gap: var(--sp-md); }
  .nav-link {
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
  }
}

/* Mobile (2026-05): several sections carry large inline horizontal
   padding (5rem to 5.5rem) that does not adapt to phone widths,
   squeezing copy into a narrow column. Override at the existing
   768px breakpoint. !important is required to beat inline styles. */
@media (max-width: 768px) {
  /* About: slate-blue mission band (inline padding: 7rem 5rem) */
  .about-mission { padding: 3rem 1.5rem !important; }
  .about-split { gap: 2rem !important; }

  /* Homepage: story copy block (inline padding: 5.5rem) */
  .home-story-text { padding: 3rem 1.5rem !important; }
  /* Homepage: materials band (inline padding: 4rem 5rem) */
  .home-materials-band { padding: 3rem 1.5rem !important; }
  /* Homepage: dealer CTA band (inline padding: 9rem 5rem) */
  .home-dealer-cta { padding: 4rem 1.5rem !important; }
  /* Dealer CTA action buttons: allow wrap so the two buttons do not
     force the section grid column wider than the phone viewport. */
  .dealer-cta-actions { flex-wrap: wrap; }

  /* Homepage: Story-section photo. It shares a .split grid column
     with the story text, and the .story-stats block widens that
     column past the viewport. Pin the photo to the viewport width
     and trim its forced 600px height to a tidy banner. */
  .home-story-media { width: 100vw; }
  .home-story-media img {
    height: 320px !important;
    min-height: 0 !important;
  }
}


/* ===== AUTHENTICITY PAGE ===== */

.auth-hero {
  position: relative;
  background: var(--matte-black);
}

.auth-hero-overlay {
  display: flex;
  align-items: flex-end;
  padding: calc(96px + 3rem) 4rem 3.5rem;
}

.auth-hero-inner {
  max-width: 700px;
}

.auth-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.5);
  display: block;
  margin-bottom: 1rem;
}

.auth-headline {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 0.9;
}

/* Intro */
.auth-intro {
  background: var(--matte-black);
  padding: 5rem 0;
}

.auth-intro-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 3rem;
  text-align: center;
}

.auth-lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: rgba(244,244,242,0.7);
  line-height: 1.8;
}

/* Plate section */
.auth-plate-section {
  background: var(--nautical-white);
  padding: 6rem 0;
}

.auth-plate-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.auth-plate-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.auth-section-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate-blue);
  display: block;
  margin-bottom: 1rem;
}

.auth-section-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--matte-black);
  line-height: 0.92;
  margin-bottom: 1.5rem;
}

.auth-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(26,26,24,0.55);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Meaning section */
.auth-meaning {
  background: #F4F4F2;
  padding: 6rem 0;
}

.auth-meaning-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 3rem;
}

.auth-meaning-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}

.auth-body-centered {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.auth-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: rgba(26,26,24,0.06);
}

.auth-feature {
  background: white;
  padding: 2.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.auth-feature-icon {
  width: 36px;
  height: 36px;
  background: var(--slate-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-feature-title {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--matte-black);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.auth-feature-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(26,26,24,0.5);
  line-height: 1.7;
}

/* Statement */
.auth-statement {
  background: var(--matte-black);
  padding: 8rem 0;
  text-align: center;
}

.auth-statement-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 2rem;
}

.auth-logos {
  margin-bottom: 3rem;
}

.auth-logo {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.6;
}

.auth-quote {
  font-family: 'RocGroteskWide', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nautical-white);
  line-height: 1;
  margin-bottom: 1.5rem;
  font-style: normal;
}

.auth-statement-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(244,244,242,0.4);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.auth-cta {
  display: inline-block;
}

/* Mobile */
@media (max-width: 768px) {
  .auth-hero-overlay {
    padding: calc(68px + 2rem) 1.5rem 2.25rem;
  }
  .auth-intro { padding: 3rem 0; }
  .auth-intro-inner { padding: 0 1.5rem; }
  .auth-plate-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 0 1.5rem;
  }
  .auth-plate-section { padding: 3.5rem 0; }
  .auth-meaning { padding: 3.5rem 0; }
  .auth-meaning-inner { padding: 0 1.5rem; }
  .auth-features {
    grid-template-columns: 1fr;
  }
  .auth-feature { padding: 1.75rem; }
  .auth-statement { padding: 5rem 0; }
}

/* ===== FOOTER PARTNER LOGOS ===== */

.footer-partners {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 1.25rem;
}

.footer-partners-label {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.2);
  white-space: nowrap;
  flex-shrink: 0;
}

.footer-partners-logos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-partner-link {
  display: flex;
  align-items: center;
  opacity: 0.35;
  transition: opacity 0.2s;
}

.footer-partner-link:hover {
  opacity: 0.65;
}

.footer-partner-logo {
  height: 24px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
  .footer-partners {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ===== FAQ PARTNER BADGES ===== */

.faq-partner-badge {
  margin-bottom: 1rem;
}

.faq-partner-logo {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0.7;
}

/* ===== MATERIAL LIBRARY LIGHTBOX PARTNER LOGO ===== */

.rl-lightbox-partner {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(26,26,24,0.08);
}

.rl-lightbox-partner-logo {
  height: 24px;
  width: auto;
  display: block;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.rl-lightbox-partner-logo:hover {
  opacity: 1;
}

/* ===== STANDARDIZED CARD IMAGE FIT (material library + collection
   detail cards) =====
   Swatches are now 320x200 (16:10), glass 400x300 (4:3), hardware
   200x200 (1:1), and line-art (kick plates) padded to 320x200. Using
   object-fit: contain on a uniform 16:10 wrap shows every image fully,
   centered, regardless of its native ratio. End-of-file so these win. */
.ca-detail-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.ca-detail-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease;
}

.rl-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* ===== AUTHENTICITY PAGE - MOBILE OVERFLOW FIX =====
   Fixed padding values did not shrink enough on mobile, pushing long
   words past the viewport. These overrides sit at end-of-file so they
   win over the earlier auth-* mobile block (equal specificity, later
   source order). */
@media (max-width: 768px) {
  .auth-hero-overlay {
    padding: calc(68px + 1.5rem) 1.25rem 2rem;
  }

  .auth-intro {
    padding: 3rem 0;
  }

  .auth-intro-inner {
    padding: 0 1.25rem;
    max-width: 100%;
  }

  .auth-lead {
    font-size: 1rem;
  }

  .auth-plate-section {
    padding: 3rem 0;
  }

  .auth-plate-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.25rem;
  }

  .auth-meaning {
    padding: 3rem 0;
  }

  .auth-meaning-inner {
    padding: 0 1.25rem;
  }

  .auth-meaning-header {
    padding: 0;
  }

  .auth-features {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .auth-feature {
    padding: 1.5rem 1.25rem;
  }

  .auth-statement {
    padding: 4rem 0;
  }

  .auth-statement-inner {
    padding: 0 1.25rem;
  }

  .auth-quote {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .auth-section-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .auth-headline {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

@media (max-width: 480px) {
  .auth-intro-inner {
    padding: 0 1rem;
  }

  .auth-plate-inner {
    padding: 0 1rem;
  }

  .auth-meaning-inner {
    padding: 0 1rem;
  }

  .auth-statement-inner {
    padding: 0 1rem;
  }

  .auth-feature {
    padding: 1.25rem 1rem;
  }
}

/* ============================================================
   MOBILE FIX: DEALERS FORM OVERFLOW
   Constrain the dealers columns/grid so the form content never
   pushes past the 390px viewport. End-of-file so these win.
   ============================================================ */
@media (max-width: 768px) {
  .dealers-col {
    padding: 2rem 1.25rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .dealers-split {
    grid-template-columns: 1fr;
    width: 100%;
    overflow: hidden;
  }
  .dealers-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .dealers-col {
    padding: 1.5rem 1rem;
  }
}

/* ============================================================
   MOBILE FIX: DOOR STUDIO RESULT OVERFLOW
   Keep material recommendations and alternate cards inside the
   viewport on mobile.
   ============================================================ */
@media (max-width: 768px) {
  .ds-result-text-inner {
    padding: 1.5rem 1.25rem;
    max-width: 100%;
    overflow: hidden;
  }
  .ds-alt-cards {
    grid-template-columns: 1fr;
  }
  .ds-result-section-inner {
    padding: 0 1.25rem;
    max-width: 100%;
    overflow: hidden;
  }
  .ds-warnings {
    margin: 0 1.25rem;
  }
}

/* ============================================================
   CONTACT PAGE SPLIT
   The contact info/form split used an inline grid-template-columns
   (2fr 3fr) which, being inline, overrode the responsive .split
   media queries and kept two columns on mobile, overflowing the
   viewport. Moving the desktop layout to a class lets the mobile
   rule below win by source order. Mobile rule is placed AFTER the
   desktop rule because media queries add no specificity.
   ============================================================ */
.contact-split {
  grid-template-columns: 2fr 3fr;
  gap: 5rem;
}

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