/* ═══════════════════════════════════════════
   A1 WINDOWS — Custom Styles
   Tailwind CDN handles utility classes;
   this file covers gradients, animations,
   patterns, and component-specific styles.
   ═══════════════════════════════════════════ */

/* ─── Brand color tokens (mirrors tailwind.config.js) ─── */
:root {
  --color-brand-500: #2563eb;
  --color-brand-800: #1e3a5f;
  --color-brand-900: #0f172a;
  --color-frame: #f5f0e8;
  --color-frame-dark: #e8e2d8;
  --color-frame-shadow: #d6cfc3;
  --color-hardware: #b8a88a;
  --color-hardware-dark: #a0926e;
}

/* ─── Base ─── */
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* ─── Navbar height utility ─── */
.h-18 {
  height: 4.5rem;
}

/* ─── Hero Gradient ─── */
.hero-gradient {
  background: linear-gradient(
    135deg,
    var(--color-brand-900) 0%,
    var(--color-brand-800) 35%,
    #1e40af 65%,
    var(--color-brand-500) 100%
  );
}

/* ─── CTA Section Gradient ─── */
.cta-gradient {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(37, 99, 235, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(30, 64, 175, 0.2) 0%, transparent 50%);
}

/* ─── Grid pattern overlay ─── */
.hero-grid-pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ─── Text gradient for hero emphasis ─── */
.text-gradient-light {
  background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #dbeafe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Brand gradient for "Windows" wordmark — original blue, with a cyan starting note echoing the logo ─── */
.text-gradient-brand {
  background: linear-gradient(135deg, #00c3e1 0%, #2563eb 40%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Lighter variant for footer (dark background) — same cyan start, lighter blues for contrast */
.text-gradient-brand-light {
  background: linear-gradient(135deg, #00c3e1 0%, #93c5fd 50%, #dbeafe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Hamburger menu animation ─── */
.hamburger-line {
  display: block;
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #1e293b;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-line-1 {
  transform: translateY(-6px);
}

.hamburger-line-2 {
  transform: translateY(0);
}

.hamburger-line-3 {
  transform: translateY(6px);
}

/* Active state */
.menu-open .hamburger-line-1 {
  transform: rotate(45deg);
}

.menu-open .hamburger-line-2 {
  opacity: 0;
  transform: scaleX(0);
}

.menu-open .hamburger-line-3 {
  transform: rotate(-45deg);
}

/* ─── Mobile Menu ─── */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open {
  max-height: 80vh;
  overflow-y: auto;
}

/* ─── Scroll-triggered reveal animations ─── */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-up:nth-child(2) { transition-delay: 0.08s; }
.reveal-up:nth-child(3) { transition-delay: 0.16s; }
.reveal-up:nth-child(4) { transition-delay: 0.24s; }

/* ─── Navbar shadow on scroll ─── */
.navbar-scrolled {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ─── Focus styles ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Form input autofill styling ─── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #f8fafc inset;
  -webkit-text-fill-color: var(--color-brand-900);
  transition: background-color 5000s ease-in-out 0s;
}

/* ─── Smooth hover for service cards ─── */
.service-card:hover {
  will-change: transform, box-shadow;
}

/* ─── Selection color ─── */
::selection {
  background-color: var(--color-brand-500);
  color: white;
}

/* ─── Mega Menu ─── */
.mega-panel {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.mega-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-trigger.active {
  color: var(--color-brand-500) !important;
  background: #eff6ff !important;
}

.mega-trigger.active .mega-chevron {
  transform: rotate(180deg);
}

.mega-item {
  cursor: pointer;
}

/* The prebuilt Tailwind has no bg-brand-900/[0.88], bg-white/15 or hover:bg-white/10, so the panel was see-through and the tiles
   had no hover state (Rafael, 2026-10-02: the hero text behind the menu was fighting the menu). Plain CSS instead: */
.mega-panel {
  background: rgba(15, 23, 42, 0.94);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  backdrop-filter: blur(28px) saturate(1.1);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.mega-item { border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.mega-item:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.mega-item[class~="bg-white/15"] { background: rgba(255, 255, 255, 0.13); border-color: rgba(96, 165, 250, 0.45); }   /* the current page's tile */
.mega-item img { transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.38s ease; will-change: transform; }
.mega-item:hover img { transform: perspective(520px) rotateY(-18deg) translateY(-5px) scale(1.14); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.5)); }   /* the tile turns like the Studio does */
.mega-cta-wide:hover img, .mega-cta-wide:hover svg { transform: translateY(-4px) scale(1.1); }
@media (prefers-reduced-motion: reduce) { .mega-item, .mega-item img { transition: none; } .mega-item:hover, .mega-item:hover img { transform: none; } }

/* ─── Mobile Accordion ─── */
.mobile-acc-body.open {
  display: flex !important;
}

.acc-chevron.open {
  transform: rotate(180deg);
}

/* ─── Double Hung Window — Interactive Demo ─── */
/*
 * JS-driven 4-phase slider:
 *   Phase 0: Bottom sash slides up
 *   Phase 1: Top sash slides down
 *   Phase 2: Both open together
 *   Phase 3: Bottom sash tilts in for cleaning
 */

.dh-scene {
  max-width: 420px;
  margin: 0 auto;
}

/* Wall background */
.dh-wall {
  position: relative;
  width: 100%;
  padding-top: 125%;
  background: linear-gradient(180deg, #d4c5b0 0%, #c9b89d 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.3),
    inset 0 0 60px rgba(0,0,0,0.05);
}

/* Brick/stucco texture */
.dh-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 22px,
      rgba(0,0,0,0.03) 22px, rgba(0,0,0,0.03) 23px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 46px,
      rgba(0,0,0,0.02) 46px, rgba(0,0,0,0.02) 47px
    );
  z-index: 1;
  pointer-events: none;
}

/* Exterior scene */
.dh-exterior {
  position: absolute;
  top: 6%;
  left: 12%;
  right: 12%;
  bottom: 18%;
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
}

.dh-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #87CEEB 0%, #b8dff0 50%, #d4eaf7 100%);
}

/* Clouds */
.dh-cloud {
  position: absolute;
  background: white;
  border-radius: 50px;
  opacity: 0.85;
}
.dh-cloud::before,
.dh-cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}

.dh-cloud-1 {
  width: 60px; height: 18px; top: 15%; left: -10%;
  animation: dh-drift 25s linear infinite;
}
.dh-cloud-1::before { width: 28px; height: 28px; top: -14px; left: 10px; }
.dh-cloud-1::after  { width: 20px; height: 20px; top: -8px;  left: 32px; }

.dh-cloud-2 {
  width: 45px; height: 14px; top: 28%; left: 20%;
  animation: dh-drift 32s linear infinite;
  animation-delay: -10s;
}
.dh-cloud-2::before { width: 22px; height: 22px; top: -11px; left: 8px; }
.dh-cloud-2::after  { width: 16px; height: 16px; top: -6px;  left: 24px; }

@keyframes dh-drift {
  0%   { transform: translateX(-20px); }
  100% { transform: translateX(350px); }
}

/* Trees */
.dh-trees {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
}
.dh-tree { position: absolute; bottom: 0; }
.dh-tree::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, #5a8f3e, #3d6b2e 60%, #2d5420);
}
.dh-tree::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  background: #5c3d2e;
  border-radius: 2px;
}
.dh-tree-1 { left: 10%; }
.dh-tree-1::before { width: 70px; height: 80px;  bottom: 20px; left: -20px; }
.dh-tree-1::after  { width: 8px;  height: 28px; }

.dh-tree-2 { left: 45%; }
.dh-tree-2::before { width: 90px; height: 100px; bottom: 24px; left: -30px; }
.dh-tree-2::after  { width: 10px; height: 32px; }

.dh-tree-3 { right: 5%; }
.dh-tree-3::before { width: 60px; height: 70px;  bottom: 18px; left: -18px; }
.dh-tree-3::after  { width: 7px;  height: 24px; }

.dh-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 20%;
  background: linear-gradient(180deg, #6aaa45 0%, #4d8a30 100%);
}

/* ── Window frame ── */
.dh-frame {
  position: absolute;
  top: 6%; left: 12%; right: 12%; bottom: 18%;
  border: 8px solid #f5f0e8;
  border-radius: 3px;
  z-index: 2;
  box-shadow:
    inset 0 0 0 2px #d6cfc3,
    0 2px 10px rgba(0,0,0,0.15),
    inset 0 0 20px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* ── Sash shared ── */
.dh-sash {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  z-index: 3;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dh-sash-upper {
  top: 0;
  z-index: 3;
  transform: translateY(0);
}

.dh-sash-lower {
  bottom: 0;
  z-index: 4;
  transform-origin: 50% 50%;
  transform: translateY(0);
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 1.2s ease;
  box-shadow: none;
}

/* JS applies these state classes */
.dh-sash-lower.dh-open    { transform: translateY(-38%); }
.dh-sash-upper.dh-open    { transform: translateY(25%); }

/* Tilt: perspective on parent frame — eye at ~40% from top
   gives a balanced view of both inside and outside faces */
.dh-frame.dh-frame-tilt {
  perspective: 500px;
  perspective-origin: 50% 40%;
}

.dh-sash-lower.dh-tilt {
  transform: rotateX(-38deg);
  z-index: 10;
  box-shadow:
    0 25px 40px -8px rgba(0,0,0,0.3),
    0 12px 16px -4px rgba(0,0,0,0.12);
}

/*
 * With pivot at 50%, when tilted:
 *  - Top half swings TOWARD the viewer (you see its top surface)
 *  - Bottom half swings AWAY from viewer (you see its underside/bottom frame)
 */

/* ── Top edge thickness — visible as the top comes toward you ── */
.dh-sash-lower::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(180deg, #f5f0e8, #ddd5c5);
  transform-origin: bottom center;
  transition: height 1.2s cubic-bezier(0.4,0,0.2,1),
              top 1.2s cubic-bezier(0.4,0,0.2,1);
  z-index: 8;
  border-radius: 1px 1px 0 0;
}

.dh-sash-lower.dh-tilt::before {
  height: 14px;
  top: -14px;
  background: linear-gradient(180deg, #ede7db 0%, #d6cfc3 50%, #c4bba8 100%);
  box-shadow:
    0 -2px 6px rgba(0,0,0,0.1),
    inset 0 2px 0 rgba(255,255,255,0.5);
}

/* ── Bottom frame underside — visible as the bottom recedes away ── */
.dh-sash-lower::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: #c4bba8;
  transition: height 1.2s cubic-bezier(0.4,0,0.2,1),
              bottom 1.2s cubic-bezier(0.4,0,0.2,1),
              opacity 1.2s ease;
  opacity: 0;
  z-index: -1;
}

.dh-sash-lower.dh-tilt::after {
  height: 14px;
  bottom: -14px;
  opacity: 1;
  background: linear-gradient(0deg, #968a76 0%, #a89c88 30%, #bbb0a0 100%);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Top rail shows its depth/surface */
.dh-sash-lower.dh-tilt .dh-sash-rail-top {
  height: 14px;
  background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 40%, #d6cfc3 100%);
  box-shadow:
    0 -1px 3px rgba(0,0,0,0.12),
    inset 0 2px 0 rgba(255,255,255,0.6);
}

/* Bottom rail (visible from below, darker) */
.dh-sash-lower.dh-tilt .dh-glass {
  background: linear-gradient(
    180deg,
    rgba(180,210,235,0.22) 0%,
    rgba(255,255,255,0.18) 40%,
    rgba(135,206,235,0.08) 100%
  );
  border-bottom-color: #c4bba8;
}

/* Reflection — glare shifts to a wide horizontal band */
.dh-sash-lower.dh-tilt .dh-reflection {
  opacity: 0.55;
  width: 90%;
  height: 60%;
  top: 10%;
  transform: rotate(-3deg);
}

/* Shadow cast onto the wall/exterior behind the tilted sash */
.dh-tilt-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(0,0,0,0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 60%);
}

.dh-tilt-shadow.dh-visible {
  opacity: 1;
}

/* ── Glass ── */
.dh-glass {
  position: absolute;
  inset: 3px;
  background: linear-gradient(
    135deg,
    rgba(135,206,235,0.12) 0%,
    rgba(255,255,255,0.05) 40%,
    rgba(135,206,235,0.08) 100%
  );
  border: 2px solid #e8e2d8;
  border-radius: 1px;
  overflow: hidden;
}

/* Glass reflection */
.dh-reflection {
  position: absolute;
  top: -20%; left: -20%;
  width: 60%; height: 140%;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgba(255,255,255,0.25) 40%,
    rgba(255,255,255,0.08) 50%,
    transparent 60%
  );
  transform: rotate(-15deg);
  transition: opacity 0.8s ease;
}

.dh-reflection-lower {
  left: 10%;
  opacity: 0.7;
}

/* Dim reflections when sash is moving */
.dh-open .dh-reflection,
.dh-tilt .dh-reflection { opacity: 0.25; }

/* ── Muntin bar ── */
.dh-muntin-v {
  position: absolute;
  top: 3px; bottom: 3px;
  left: 50%; width: 5px; margin-left: -2.5px;
  background: linear-gradient(90deg, #e8e2d8, #f5f0e8, #e8e2d8);
  z-index: 5;
  box-shadow: 0 0 3px rgba(0,0,0,0.08);
}

/* ── Sash rails ── */
.dh-sash-rail {
  position: absolute;
  left: 0; right: 0; height: 8px;
  background: linear-gradient(180deg, #f5f0e8, #e8e2d8);
  z-index: 6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dh-sash-rail-bottom { bottom: 0; }
.dh-sash-rail-top    { top: 0; }

/* ── Lock hardware ── */
.dh-lock {
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 8px;
  background: linear-gradient(180deg, #b8a88a, #a0926e);
  border-radius: 2px 2px 0 0;
  z-index: 7;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.dh-lock::after {
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 4px;
  background: #8a7c60;
  border-radius: 1px;
}

/* ── Frame shadow ── */
.dh-frame-shadow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.08);
  z-index: 8;
  pointer-events: none;
}

/* ── Sill ── */
.dh-sill {
  position: absolute;
  bottom: 16.2%; left: 10%; right: 10%;
  height: 10px;
  background: linear-gradient(180deg, #f5f0e8, #e8e2d8);
  border-radius: 0 0 2px 2px;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.dh-sill-front {
  position: absolute;
  bottom: 14.7%; left: 9%; right: 9%;
  height: 12px;
  background: linear-gradient(180deg, #ede7db, #ddd5c5);
  border-radius: 0 0 3px 3px;
  z-index: 5;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ── Breeze lines ── */
.dh-breeze {
  position: absolute;
  top: 20%; right: 5%;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.dh-breeze-line {
  width: 30px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), transparent);
  border-radius: 2px;
  margin-bottom: 6px;
}
.dh-breeze-1 { animation: dh-breeze-flow 1.5s ease-in-out infinite;        width: 24px; }
.dh-breeze-2 { animation: dh-breeze-flow 1.5s ease-in-out 0.3s infinite;   width: 32px; margin-left: 4px; }
.dh-breeze-3 { animation: dh-breeze-flow 1.5s ease-in-out 0.6s infinite;   width: 20px; margin-left: 2px; }

@keyframes dh-breeze-flow {
  0%   { transform: translateX(0) scaleX(1);   opacity: 0.7; }
  50%  { transform: translateX(12px) scaleX(1.3); opacity: 1; }
  100% { transform: translateX(24px) scaleX(0.5); opacity: 0; }
}

/* Breeze visibility — JS toggles .dh-visible */
.dh-breeze-bottom,
.dh-breeze-top {
  transition: opacity 0.6s ease;
}
.dh-breeze.dh-visible { opacity: 1; }

/* ── Label (single, text swapped by JS) ── */
.dh-label {
  position: absolute;
  bottom: 3.5%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.dh-label.dh-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dh-label-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 58, 95, 0.88);
  backdrop-filter: blur(8px);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.dh-label-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  background: rgba(37, 99, 235, 0.6);
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Slider controls ── */
.dh-controls {
  margin-top: 16px;
}

.dh-tabs {
  display: flex;
  gap: 6px;
}

.dh-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dh-tab:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}

.dh-tab.active {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.4);
}

.dh-tab-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  transition: all 0.3s;
}

.dh-tab.active .dh-tab-num {
  background: var(--color-brand-500);
  color: white;
}

.dh-tab-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-align: center;
  line-height: 1.2;
  transition: color 0.3s;
}

.dh-tab.active .dh-tab-label {
  color: rgba(255,255,255,0.9);
}

/* Progress bar inside each tab */
.dh-tab-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.dh-tab-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-brand-500);
  border-radius: 0 0 12px 12px;
  transition: width 0.1s linear;
}

.dh-tab.active .dh-tab-bar {
  animation: dh-progress 5s linear forwards;
}

@keyframes dh-progress {
  0%   { width: 0%; }
  100% { width: 100%; }
}

/* ─── Casement Window Scene ─── */

.cm-scene {
  max-width: 480px;
  margin: 0 auto;
}

.cm-wall {
  position: relative;
  width: 100%;
  padding-top: 70%; /* wide horizontal aspect */
  background: linear-gradient(180deg, #c9b89d 0%, #baa886 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3), inset 0 0 60px rgba(0,0,0,0.05);
}

/* Stucco texture */
.cm-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 18px, rgba(0,0,0,0.03) 18px, rgba(0,0,0,0.03) 19px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 40px, rgba(0,0,0,0.02) 40px, rgba(0,0,0,0.02) 41px);
  z-index: 1;
  pointer-events: none;
}

/* Garden exterior */
.cm-exterior {
  position: absolute;
  top: 12%;
  left: 8%;
  right: 8%;
  bottom: 18%;
  overflow: hidden;
  z-index: 0;
}

.cm-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #87CEEB 0%, #a8d8ea 40%, #c8e6c9 100%);
}

.cm-trees {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75%;
}

.cm-tree {
  position: absolute;
  bottom: 0;
}

.cm-tree::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #6aaa45, #4d8a30 50%, #3a7025);
}

.cm-tree::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #5c3d2e;
  border-radius: 2px;
}

.cm-tree-1 { left: 5%; }
.cm-tree-1::before { width: 60px; height: 70px; bottom: 15px; left: -15px; }
.cm-tree-1::after { width: 6px; height: 20px; }

.cm-tree-2 { left: 30%; }
.cm-tree-2::before { width: 80px; height: 95px; bottom: 20px; left: -25px; background: radial-gradient(ellipse at 45% 35%, #5a9f3e, #3d7a28 50%, #2d6020); }
.cm-tree-2::after { width: 8px; height: 26px; }

.cm-tree-3 { right: 20%; }
.cm-tree-3::before { width: 70px; height: 80px; bottom: 18px; left: -22px; background: radial-gradient(ellipse at 40% 40%, #5ea043, #468a2e 55%, #357020); }
.cm-tree-3::after { width: 7px; height: 22px; }

.cm-tree-4 { right: 0; }
.cm-tree-4::before { width: 55px; height: 65px; bottom: 14px; left: -18px; }
.cm-tree-4::after { width: 6px; height: 18px; }

/* Flower bed */
.cm-flowers {
  position: absolute;
  bottom: 15%;
  left: 10%;
  right: 20%;
  height: 12%;
  background:
    radial-gradient(circle at 10% 50%, #e879a0 3px, transparent 3px),
    radial-gradient(circle at 25% 40%, #c084fc 3px, transparent 3px),
    radial-gradient(circle at 40% 60%, #f9a8d4 3px, transparent 3px),
    radial-gradient(circle at 55% 35%, #fbbf24 3px, transparent 3px),
    radial-gradient(circle at 70% 55%, #e879a0 3px, transparent 3px),
    radial-gradient(circle at 85% 45%, #c084fc 3px, transparent 3px),
    linear-gradient(180deg, transparent 40%, #4d8a30 100%);
  z-index: 1;
}

.cm-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18%;
  background: linear-gradient(180deg, #6aaa45 0%, #4d8a30 100%);
}

/* Window frame (white to match double-hung) */
.cm-frame {
  position: absolute;
  top: 12%;
  left: 8%;
  right: 8%;
  bottom: 18%;
  border: 8px solid #f5f0e8;
  border-radius: 3px;
  z-index: 2;
  box-shadow:
    inset 0 0 0 2px #d6cfc3,
    0 2px 10px rgba(0,0,0,0.15),
    inset 0 0 20px rgba(0,0,0,0.05);
  perspective: 500px;
  perspective-origin: 70% 50%;
}

/* Center mullion (vertical divider) */
.cm-mullion {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  margin-left: -3px;
  background: linear-gradient(90deg, #e8e2d8, #f5f0e8, #e8e2d8);
  z-index: 6;
  box-shadow: 0 0 3px rgba(0,0,0,0.08);
}

/* Panels */
.cm-panel {
  position: absolute;
  top: 0;
  bottom: 0;
}

/* Left panel — hinged on left, swings outward */
.cm-panel-left {
  left: 0;
  width: 50%;
  transform-origin: left center;
  transform: rotateY(0deg);
  z-index: 5;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* JS applies .cm-open to swing panels outward */
.cm-panel-left.cm-open {
  transform: rotateY(40deg);
}

/* Panel frame edges (white to match outer frame) */
.cm-panel-frame-top,
.cm-panel-frame-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(180deg, #f5f0e8, #e8e2d8);
  z-index: 3;
}
.cm-panel-frame-top { top: 0; }
.cm-panel-frame-bottom { bottom: 0; }

.cm-panel-frame-left,
.cm-panel-frame-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(90deg, #f5f0e8, #e8e2d8);
  z-index: 3;
}
.cm-panel-frame-left { left: 0; }
.cm-panel-frame-right { right: 0; }

/* Right panel — hinged on right, swings outward (mirrored) */
.cm-panel-right {
  right: 0;
  width: 50%;
  z-index: 3;
  transform-origin: right center;
  transform: rotateY(0deg);
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cm-panel-right.cm-open {
  transform: rotateY(-40deg);
}

/* Glass */
.cm-glass {
  position: absolute;
  inset: 4px;
  background: linear-gradient(
    135deg,
    rgba(135,206,235,0.08) 0%,
    rgba(255,255,255,0.03) 50%,
    rgba(135,206,235,0.06) 100%
  );
  border: 2px solid #e8e2d8;
  border-radius: 1px;
  overflow: hidden;
}

.cm-glass-closed {
  background: linear-gradient(
    135deg,
    rgba(135,206,235,0.12) 0%,
    rgba(255,255,255,0.06) 40%,
    rgba(135,206,235,0.1) 100%
  );
}

/* Glass reflection */
.cm-reflection {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 130%;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgba(255,255,255,0.2) 40%,
    rgba(255,255,255,0.06) 50%,
    transparent 60%
  );
  transform: rotate(-15deg);
}

.cm-reflection-right {
  left: 10%;
  width: 60%;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgba(255,255,255,0.25) 35%,
    rgba(255,255,255,0.1) 50%,
    transparent 60%
  );
}

/* Handle (brass, like double-hung lock) */
.cm-handle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 20px;
  background: linear-gradient(180deg, #b8a88a, #a0926e);
  border-radius: 2px;
  z-index: 4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.cm-handle-right {
  left: 6px;
  right: auto;
}

/* Sill (white/cream to match frame) */
.cm-sill {
  position: absolute;
  bottom: 16.2%;
  left: 6%;
  right: 6%;
  height: 10px;
  background: linear-gradient(180deg, #f5f0e8, #e8e2d8);
  border-radius: 0 0 2px 2px;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.cm-sill-front {
  position: absolute;
  bottom: 14.5%;
  left: 5%;
  right: 5%;
  height: 12px;
  background: linear-gradient(180deg, #ede7db, #ddd5c5);
  border-radius: 0 0 3px 3px;
  z-index: 5;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Breeze lines */
.cm-breeze {
  position: absolute;
  top: 30%;
  left: 2%;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.cm-breeze.cm-visible {
  opacity: 1;
}

.cm-breeze-line {
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.5), transparent);
  border-radius: 2px;
  margin-bottom: 8px;
}

.cm-bl-1 { animation: dh-breeze-flow 1.8s ease-in-out infinite; width: 22px; }
.cm-bl-2 { animation: dh-breeze-flow 1.8s ease-in-out 0.35s infinite; width: 30px; margin-left: 5px; }
.cm-bl-3 { animation: dh-breeze-flow 1.8s ease-in-out 0.7s infinite; width: 18px; margin-left: 2px; }

/* ─── Scroll-Driven Video Scrubbing ─── */

.scrub-section {
  height: 400vh; /* tall scroll runway — 4x viewport gives smooth control */
  position: relative;
}

.scrub-sticky {
  position: fixed;
  inset: 0;
  z-index: 20; /* above page content, below navbar (z-50) and sticky CTA (z-40) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0f1f30; /* dark bg lives here, not on the section — avoids dark flash before/after scrub */
  visibility: hidden; /* JS adds .scrub-fixed-active when section is in view */
}

.scrub-sticky.scrub-fixed-active {
  visibility: visible;
}


.scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content slides overlaid on video */
.scrub-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.scrub-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.scrub-slide.scrub-active {
  opacity: 1;
  pointer-events: auto;
}

.scrub-slide-content {
  max-width: 480px;
  padding: 0 2rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

/* Positioning variants */
.scrub-slide-center {
  margin: 0 auto;
  text-align: center;
}

.scrub-slide-left {
  margin-left: 5%;
}

.scrub-slide-right {
  margin-left: auto;
  margin-right: 5%;
}

/* Frosted card for feature callouts */
.scrub-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px;
}

@media (max-width: 767px) {
  .scrub-slide-left,
  .scrub-slide-right {
    margin: 0 auto;
    text-align: center;
  }

  .scrub-slide-content {
    padding: 0 1.5rem;
  }
}

/* Scroll hint */
.scrub-scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.5s ease;
}

/* Progress bar at bottom */
.scrub-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.1);
  z-index: 3;
}

.scrub-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-brand-500);
  transition: width 0.05s linear;
}

/* ─── Bay Window Scene ─── */

.bay-scene {
  max-width: 460px;
  margin: 0 auto;
}

/* Exterior — wider to accommodate the bay projection */
.bay-exterior {
  position: absolute;
  top: 8%;
  left: 6%;
  right: 6%;
  bottom: 16%;
  overflow: hidden;
  z-index: 0;
}

/* Bay frame container — uses 3D perspective to show the angled panels */
.bay-frame {
  position: absolute;
  top: 8%;
  left: 6%;
  right: 6%;
  bottom: 16%;
  z-index: 2;
  display: flex;
  perspective: 600px;
  perspective-origin: 50% 50%;
}

/* Shared panel styles */
.bay-panel {
  position: relative;
  border: 6px solid #f5f0e8;
  box-shadow: inset 0 0 0 1px #d6cfc3;
  overflow: hidden;
}

/* Left angled panel — rotated inward */
.bay-panel-left {
  flex: 0 0 22%;
  transform-origin: right center;
  transform: rotateY(35deg);
  z-index: 3;
  border-radius: 2px 0 0 2px;
}

/* Center panel — flat, largest */
.bay-panel-center {
  flex: 0 0 56%;
  z-index: 4;
  border-left: none;
  border-right: none;
}

/* Right angled panel — rotated inward (mirrored) */
.bay-panel-right {
  flex: 0 0 22%;
  transform-origin: left center;
  transform: rotateY(-35deg);
  z-index: 3;
  border-radius: 0 2px 2px 0;
}

/* Glass */
.bay-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(135,206,235,0.08) 0%,
    rgba(255,255,255,0.03) 50%,
    rgba(135,206,235,0.06) 100%
  );
  overflow: hidden;
}

.bay-glass-center {
  background: linear-gradient(
    135deg,
    rgba(135,206,235,0.1) 0%,
    rgba(255,255,255,0.05) 40%,
    rgba(135,206,235,0.08) 100%
  );
}

/* Sill — follows the bay shape */
.bay-sill {
  position: absolute;
  bottom: 14.5%;
  left: 4%;
  right: 4%;
  height: 10px;
  background: linear-gradient(180deg, #f5f0e8, #e8e2d8);
  border-radius: 0 0 2px 2px;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.bay-sill-front {
  position: absolute;
  bottom: 13%;
  left: 3%;
  right: 3%;
  height: 12px;
  background: linear-gradient(180deg, #ede7db, #ddd5c5);
  border-radius: 0 0 3px 3px;
  z-index: 5;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ─── Awning Window Scene ─── */

.aw-scene {
  max-width: 420px;
  margin: 0 auto;
}

/* Exterior positioned for awning (taller window, higher on wall) */
.aw-exterior {
  position: absolute;
  top: 10%;
  left: 12%;
  right: 12%;
  bottom: 18%;
  overflow: hidden;
  z-index: 0;
}

/* Frame */
.aw-frame {
  position: absolute;
  top: 10%;
  left: 12%;
  right: 12%;
  bottom: 18%;
  border: 8px solid #f5f0e8;
  border-radius: 3px;
  z-index: 2;
  box-shadow:
    inset 0 0 0 2px #d6cfc3,
    0 2px 10px rgba(0,0,0,0.15),
    inset 0 0 20px rgba(0,0,0,0.05);
  overflow: visible;
  perspective: 500px;
  perspective-origin: 50% 80%;
}

/* Sash — hinged at top, bottom swings outward */
.aw-sash {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transform: rotateX(0deg);
  z-index: 3;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 1.2s ease;
}

/* JS applies these — negative rotateX = bottom swings OUTWARD (away from viewer) */
.aw-sash.aw-partial {
  transform: rotateX(-25deg);
  box-shadow: 0 -8px 20px -5px rgba(0,0,0,0.1);
}

.aw-sash.aw-full {
  transform: rotateX(-42deg);
  box-shadow: 0 -12px 30px -8px rgba(0,0,0,0.15);
}

/* Glass */
.aw-glass {
  position: absolute;
  inset: 3px;
  background: linear-gradient(
    135deg,
    rgba(135,206,235,0.1) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(135,206,235,0.07) 100%
  );
  border: 2px solid #e8e2d8;
  border-radius: 1px;
  overflow: hidden;
}

/* Sash frame rails */
.aw-rail {
  position: absolute;
  background: linear-gradient(180deg, #f5f0e8, #e8e2d8);
  z-index: 4;
}

.aw-rail-top, .aw-rail-bottom {
  left: 0; right: 0; height: 5px;
}
.aw-rail-top { top: 0; }
.aw-rail-bottom {
  bottom: 0;
  transition: height 1.2s ease, background 1.2s ease;
}

.aw-rail-left, .aw-rail-right {
  top: 0; bottom: 0; width: 5px;
}
.aw-rail-left { left: 0; }
.aw-rail-right { right: 0; }

/* Top surface of bottom rail visible when tilted outward */
.aw-sash.aw-partial .aw-rail-bottom,
.aw-sash.aw-full .aw-rail-bottom {
  height: 12px;
  background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 40%, #d6cfc3 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5);
}

/* Top rail (hinge side) thickens slightly */
.aw-sash.aw-partial .aw-rail-top,
.aw-sash.aw-full .aw-rail-top {
  height: 8px;
  background: linear-gradient(180deg, #d6cfc3 0%, #c4bba8 100%);
}

/* Handle */
.aw-handle {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 6px;
  background: linear-gradient(180deg, #b8a88a, #a0926e);
  border-radius: 2px;
  z-index: 5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Reflection dims when open */
.aw-sash.aw-partial .cm-reflection,
.aw-sash.aw-full .cm-reflection {
  opacity: 0.3;
}

/* Breeze — rises from below when open */
.aw-breeze {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.aw-breeze.aw-visible {
  opacity: 1;
}

.aw-breeze-line {
  width: 2px;
  height: 24px;
  background: linear-gradient(0deg, rgba(255,255,255,0.5), transparent);
  border-radius: 2px;
  display: inline-block;
  margin: 0 8px;
}

.aw-bl-1 { animation: aw-rise 1.6s ease-in-out infinite;        height: 20px; }
.aw-bl-2 { animation: aw-rise 1.6s ease-in-out 0.3s infinite;   height: 28px; }
.aw-bl-3 { animation: aw-rise 1.6s ease-in-out 0.6s infinite;   height: 18px; }

@keyframes aw-rise {
  0%   { transform: translateY(0) scaleY(1);   opacity: 0.6; }
  50%  { transform: translateY(-14px) scaleY(1.2); opacity: 1; }
  100% { transform: translateY(-28px) scaleY(0.5); opacity: 0; }
}

/* Rain drops — realistic, full coverage */
.aw-rain {
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  bottom: 20%;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.aw-rain.aw-visible {
  opacity: 1;
}

.aw-drop {
  position: absolute;
  width: 1.5px;
  background: linear-gradient(180deg, transparent 0%, rgba(140,200,255,0.3) 30%, rgba(100,180,255,0.7) 100%);
  border-radius: 0 0 1px 1px;
}

/* Varying heights and speeds for realism */
.aw-drop-1 { left: 5%;  height: 18px; animation: aw-fall-fast 0.7s linear infinite; animation-delay: 0s; }
.aw-drop-2 { left: 15%; height: 14px; animation: aw-fall-med  0.9s linear infinite; animation-delay: 0.15s; }
.aw-drop-3 { left: 22%; height: 20px; animation: aw-fall-fast 0.65s linear infinite; animation-delay: 0.4s; }
.aw-drop-4 { left: 32%; height: 12px; animation: aw-fall-slow 1.1s linear infinite; animation-delay: 0.1s; }
.aw-drop-5 { left: 40%; height: 16px; animation: aw-fall-med  0.85s linear infinite; animation-delay: 0.55s; }
.aw-drop-6 { left: 48%; height: 22px; animation: aw-fall-fast 0.6s linear infinite; animation-delay: 0.25s; }
.aw-drop-7 { left: 55%; height: 13px; animation: aw-fall-slow 1.0s linear infinite; animation-delay: 0.7s; }
.aw-drop-8 { left: 63%; height: 19px; animation: aw-fall-fast 0.7s linear infinite; animation-delay: 0.35s; }
.aw-drop-9 { left: 72%; height: 15px; animation: aw-fall-med  0.9s linear infinite; animation-delay: 0.5s; }
.aw-drop-10 { left: 78%; height: 21px; animation: aw-fall-fast 0.65s linear infinite; animation-delay: 0.1s; }
.aw-drop-11 { left: 85%; height: 11px; animation: aw-fall-slow 1.05s linear infinite; animation-delay: 0.6s; }
.aw-drop-12 { left: 93%; height: 17px; animation: aw-fall-med  0.8s linear infinite; animation-delay: 0.3s; }

/* Second layer — slightly offset for depth */
.aw-drop-13 { left: 8%;  height: 10px; width: 1px; animation: aw-fall-slow 1.2s linear infinite; animation-delay: 0.45s; opacity: 0.5; }
.aw-drop-14 { left: 28%; height: 9px;  width: 1px; animation: aw-fall-slow 1.15s linear infinite; animation-delay: 0.2s; opacity: 0.4; }
.aw-drop-15 { left: 58%; height: 11px; width: 1px; animation: aw-fall-slow 1.1s linear infinite; animation-delay: 0.65s; opacity: 0.5; }
.aw-drop-16 { left: 88%; height: 10px; width: 1px; animation: aw-fall-slow 1.25s linear infinite; animation-delay: 0.35s; opacity: 0.4; }

@keyframes aw-fall-fast {
  0%   { transform: translateY(-10px); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { transform: translateY(120px); opacity: 0; }
}

@keyframes aw-fall-med {
  0%   { transform: translateY(-8px); opacity: 0; }
  10%  { opacity: 0.8; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(100px); opacity: 0; }
}

@keyframes aw-fall-slow {
  0%   { transform: translateY(-5px); opacity: 0; }
  12%  { opacity: 0.6; }
  85%  { opacity: 0.4; }
  100% { transform: translateY(85px); opacity: 0; }
}

/* ─── Slider Window Scene ─── */

.sl-scene {
  max-width: 420px;
  margin: 0 auto;
}

/* Frame — wide horizontal, white */
.sl-frame {
  position: absolute;
  top: 12%;
  left: 8%;
  right: 8%;
  bottom: 18%;
  border: 8px solid #f5f0e8;
  border-radius: 3px;
  z-index: 2;
  box-shadow:
    inset 0 0 0 2px #d6cfc3,
    0 2px 10px rgba(0,0,0,0.15),
    inset 0 0 20px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* Track grooves */
.sl-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(180deg, #d6cfc3, #e8e2d8, #d6cfc3);
  z-index: 8;
}

.sl-track-top { top: 0; }
.sl-track-bottom { bottom: 0; }

/* Panels — slide horizontally */
.sl-panel {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 52%;
  z-index: 5;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 3px solid #e8e2d8;
}

.sl-panel-left {
  left: 0;
  z-index: 5;
  transform: translateX(0);
}

.sl-panel-right {
  right: 0;
  z-index: 6;
  transform: translateX(0);
}

/* JS applies these to slide open */
.sl-panel-right.sl-open-left {
  transform: translateX(-42%);
}

.sl-panel-left.sl-open-right {
  transform: translateX(42%);
}

/* Glass */
.sl-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(135,206,235,0.1) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(135,206,235,0.07) 100%
  );
  overflow: hidden;
}

/* Vertical muntin — hidden for clean two-pane look */
.sl-muntin {
  display: none;
}

/* Handles */
.sl-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 6px;
  background: linear-gradient(180deg, #b8a88a, #a0926e);
  border-radius: 2px;
  z-index: 7;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.sl-handle-right { right: 6px; }
.sl-handle-left { left: 6px; }

/* ─── Fixed Picture Window Scene ─── */

.fp-scene {
  max-width: 480px;
  margin: 0 auto;
}

/* Frame — single large pane, no dividers */
.fp-frame {
  position: absolute;
  top: 12%;
  left: 8%;
  right: 8%;
  bottom: 18%;
  border: 8px solid #f5f0e8;
  border-radius: 3px;
  z-index: 2;
  box-shadow:
    inset 0 0 0 2px #d6cfc3,
    0 2px 10px rgba(0,0,0,0.15),
    inset 0 0 20px rgba(0,0,0,0.05);
  overflow: hidden;
}

.fp-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(135,206,235,0.1) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(135,206,235,0.07) 100%
  );
  border: 2px solid #e8e2d8;
  border-radius: 1px;
  overflow: hidden;
}

.fp-reflection {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 140%;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgba(255,255,255,0.22) 38%,
    rgba(255,255,255,0.08) 50%,
    transparent 60%
  );
  transform: rotate(-15deg);
}

/* Sun rays streaming through the glass */
.fp-sunrays {
  position: absolute;
  top: 14%;
  right: 4%;
  z-index: 10;
  pointer-events: none;
}

.fp-ray {
  position: absolute;
  background: linear-gradient(180deg, rgba(255,255,200,0.3), transparent);
  border-radius: 0 0 50% 50%;
  transform-origin: top center;
  animation: fp-glow 4s ease-in-out infinite alternate;
}

.fp-ray-1 {
  width: 30px;
  height: 60px;
  top: 0;
  right: 20px;
  transform: rotate(10deg);
  opacity: 0.6;
}

.fp-ray-2 {
  width: 22px;
  height: 50px;
  top: 5px;
  right: 55px;
  transform: rotate(-5deg);
  opacity: 0.4;
  animation-delay: 0.8s;
}

.fp-ray-3 {
  width: 26px;
  height: 55px;
  top: 2px;
  right: 85px;
  transform: rotate(3deg);
  opacity: 0.5;
  animation-delay: 1.5s;
}

@keyframes fp-glow {
  0%   { opacity: 0.3; }
  100% { opacity: 0.7; }
}

/* ─── Quote Modal — Drawer (desktop) / Bottom Sheet (mobile) ─── */

/* Backdrop */
.quote-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.quote-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer panel — defaults (desktop: slide from right) */
.quote-drawer {
  position: fixed;
  z-index: 91;
  background: white;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);

  /* Desktop: right side panel */
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100%;
  height: 100%;
  transform: translateX(100%);
  border-radius: 0;
  box-shadow: -8px 0 30px rgba(0,0,0,0.12);
}

.quote-drawer.open {
  transform: translateX(0);
}

/* Close button */
.quote-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.quote-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

/* Drag handle — hidden on desktop */
.quote-drag-handle {
  display: none;
}

/* Header */
.quote-header {
  padding: 24px 24px 0;
  flex-shrink: 0;
}

/* Form */
.quote-form {
  padding: 20px 24px;
  flex: 1;
}

/* Floating label field wrapper */
.qm-field {
  position: relative;
}

/* Inputs */
.qm-input {
  width: 100%;
  padding: 20px 16px 8px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.9375rem;
  color: var(--color-brand-800);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.qm-input:focus {
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* Hide the space placeholder — it's only there to trigger :placeholder-shown */
.qm-input::placeholder {
  color: transparent;
}

.qm-textarea {
  resize: none;
  min-height: 90px;
  padding-top: 24px;
}

/* Floating label */
.qm-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  color: #94a3b8;
  pointer-events: none;
  transform-origin: left center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  padding: 0 2px;
}

/* Textarea label starts at top, not center */
.qm-textarea + .qm-label {
  top: 16px;
  transform: translateY(0);
}

/* Float up when focused OR when input has a value (not showing placeholder) */
.qm-float:focus + .qm-label,
.qm-float:not(:placeholder-shown) + .qm-label {
  top: 6px;
  transform: translateY(0) scale(0.75);
  color: var(--color-brand-500);
  font-weight: 500;
}

/* Unfocused but has value — label stays up, neutral color */
.qm-float:not(:focus):not(:placeholder-shown) + .qm-label {
  color: #64748b;
}

/* Success state */
.quote-success {
  padding: 0 24px;
}

/* Phone callout at bottom */
.quote-phone {
  padding: 16px 24px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  margin-top: auto;
}

/* Body scroll lock when modal open */
body.quote-open {
  overflow: hidden;
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 767px) {
  .quote-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 92vh;
    transform: translateY(100%);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
  }

  .quote-drawer.open {
    transform: translateY(0);
  }

  /* Show drag handle on mobile */
  .quote-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
    cursor: grab;
  }

  .quote-drag-bar {
    width: 36px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
  }

  .quote-close {
    top: 12px;
    right: 12px;
  }

  .quote-header {
    padding: 12px 20px 0;
  }

  .quote-form {
    padding: 16px 20px;
  }

  .quote-phone {
    padding: 14px 20px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Instant transitions for window demo */
  .dh-sash { transition-duration: 0.01ms !important; }
  .dh-tab-bar { animation: none !important; width: 100% !important; }
}

/* ─── Custom scrollbar (webkit) ─── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ─── RECENT PROJECTS CAROUSEL ─────────────────────────────── */
.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  padding: 0 8px;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .carousel-slide {
    flex: 0 0 55%;
  }
}

@media (min-width: 1024px) {
  .carousel-slide {
    flex: 0 0 38%;
  }
}

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid #e2e8f0;
  color: #1e3a5f;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.carousel-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.carousel-dot.active {
  background: #2563eb;
  transform: scale(1.3);
}

/* ─── PROJECT GALLERY PAGE ───────────────────────────────────── */

/* Sticky filter bar sits just below the 4.5rem (72px) navbar */
.gal-sticky-tabs {
  top: 4.5rem;
}
/* The filter row scrolls sideways on phones (.overflow-x-auto); no scrollbar under the pills, like the showcase pills. */
.gal-sticky-tabs [role="tablist"] { scrollbar-width: none; overscroll-behavior-x: contain; }
.gal-sticky-tabs [role="tablist"]::-webkit-scrollbar { display: none; }

/* Gallery photo: enforces 4:3 ratio without arbitrary Tailwind class */
.gallery-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* Hover zoom on the photo itself */
.gitem img {
  transition: transform 0.4s ease;
}
.gitem:hover img {
  transform: scale(1.06);
}

/* Hover overlay gradient */
.gal-overlay {
  background: linear-gradient(to top, rgba(15,23,42,0.80) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Scroll-reveal animation */
.gal-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.gal-reveal.gal-vis {
  opacity: 1;
  transform: none;
}

/* Active filter button */
.filter-btn.gal-active {
  background: var(--color-brand-500);
  color: #fff;
}

/* Lightbox z-index (above quote modal at z-50) */
.gal-lightbox-z {
  z-index: 200;
}

/* Lightbox image constraints */
.lb-img-max {
  max-height: 75vh;
  object-fit: contain;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
}

/* ─── Mobile overflow containment ─── */
html,
body {
  max-width: 100%;
}

/* Clip overflow at section level. Exclude .scrub-section: in Chrome, overflow-x:hidden
   on a parent clips position:fixed descendants, which would hide the scrub overlay. */
section:not(.scrub-section) {
  overflow-x: hidden;
}

/* ─── Responsive utilities missing from the pre-built tailwind.css ─── */
/* These were added to templates after tailwind.css was generated.     */
@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:flex   { display: flex; }
  .md\:block  { display: block; }
}

/* ─── Turnstile widget ─── */
.cf-turnstile {
  max-width: 100%;
  overflow: hidden;
}

/* ─── Inline form field errors (quote + careers) ─── */
.field-error {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #b91c1c;
  font-weight: 500;
}
.field-error[hidden] { display: none; }

.input-invalid,
.qm-input.input-invalid {
  border-color: #dc2626 !important;
}
.input-invalid:focus,
.qm-input.input-invalid:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* ═══════════════════════════════════════════
   A1 WINDOW STUDIO — quote drawer extras + mega-menu helpers
   (appended block; nothing above it was changed)
   ═══════════════════════════════════════════ */

/* Two Tailwind utilities the prebuilt tailwind.css does not include. */
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.object-contain { object-fit: contain; }

/* "Your design" chip in the quote drawer — only visible when the visitor
   arrives from the 3-D Studio (main.js removes the .hidden class). */
.qm-design-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 12px;
  font-size: 0.875rem;
  color: var(--color-brand-800);
}
.qm-design-chip.hidden { display: none; }
.qm-design-label {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-500);
}
.qm-design-text {
  font-weight: 500;
  line-height: 1.35;
}

/* Window-count and timeline button rows — styled to sit next to .qm-input */
.qm-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qm-seg-btn {
  flex: 1 1 auto;
  min-width: 56px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-brand-800);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.qm-seg-btn:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}
.qm-seg-btn:focus-visible {
  outline: none;
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.qm-seg-btn[aria-pressed="true"] {
  background: var(--color-brand-500);
  border-color: var(--color-brand-500);
  color: #fff;
  font-weight: 600;
}
/* Timeline chips size to their text instead of stretching */
.qm-seg--chips .qm-seg-btn { flex: 0 1 auto; }

/* Windows mega menu: the 'Build yours in 3-D' tile fills the last two cells of the 6-column grid */
.mega-cta-wide { grid-column: span 2; }

/* ─── City pages (src/city.njk) ───
   The hero photo is either the city's own job photo (src/images/projects/cities/<city>/hero/) or the default background;
   the navy overlay keeps white text readable on any photo. Plain CSS because the built Tailwind has no bg-brand-900/xx. */
.city-hero-photo { background-position: center; background-size: cover; background-repeat: no-repeat; }
.city-hero-overlay { background: linear-gradient(90deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.80) 55%, rgba(15,23,42,.62) 100%); }
.city-shadow { text-shadow: 0 2px 12px rgba(0,0,0,.45); }
/* City map (rodada 2026-10-23): the office on Google Maps under "Also Serving Near"; 16:9 on phones, 21:9 from md up.
   The grey box shows before the lazy iframe loads, so nothing jumps. */
.city-map { max-width: 48rem; margin: 2.5rem auto 0; }
.city-map-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; border: 1px solid rgb(226 232 240); background: rgb(241 245 249); }
.city-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) { .city-map-frame { aspect-ratio: 21 / 9; } }

/* ─── Utilities the prebuilt Tailwind (Aug 2026) never generated ───
   The site's tailwind.css is a static build, so a class that wasn't in use when it was built does nothing.
   These are used by the city pages and by older pages that silently missed them (FAQ chevrons, review quotes, two-column
   centering). Same values as Tailwind's defaults; add a line here instead of rebuilding Tailwind. */
.mt-2 { margin-top: .5rem; }
.mt-5 { margin-top: 1.25rem; }
.italic { font-style: italic; }
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }
.align-text-bottom { vertical-align: text-bottom; }
.w-7 { width: 1.75rem; } .h-7 { height: 1.75rem; }
.w-80 { width: 20rem; } .h-80 { height: 20rem; }
.max-w-lg { max-width: 32rem; }
.fill-current { fill: currentColor; }
.text-yellow-400 { color: rgb(250 204 21); }
.text-green-500 { color: rgb(34 197 94); }
.bg-brand-200 { background-color: rgb(191 219 254); }
.bg-accent-400\/10 { background-color: rgb(250 204 21 / .1); }
.shadow-brand-900\/20 { --tw-shadow-color: rgb(15 23 42 / .2); --tw-shadow: var(--tw-shadow-colored); }
.hover\:text-brand-700:hover { color: rgb(30 64 175); }
.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }
@media (min-width: 640px) { .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } }
@media (min-width: 1024px) { .lg\:items-center { align-items: center; } }
@media (min-width: 1280px) { .xl\:inline { display: inline; } }
/* Patio guide page (2026-10-03): comparison rows stack on phones, three columns from md up. */
.border-b { border-bottom-width: 1px; }
.pt-1 { padding-top: 0.25rem; }
.pt-4 { padding-top: 1rem; }
.pb-4 { padding-bottom: 1rem; }
.group:hover .group-hover\:text-brand-700 { color: rgb(30 64 175); }
@media (min-width: 768px) { .md\:grid { display: grid; } .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem; } }
@media (min-width: 1024px) { .lg\:items-start { align-items: flex-start; } }
/* Gallery filter row (2026-10-05): without this the tab row did not scroll inside itself, so on phones it pushed the
   whole page sideways once the real photos added more type tabs. */
.overflow-x-auto { overflow-x: auto; }
/* Brochures hub (2026-10-05): space above the "before your visit" strip. */
.pt-12 { padding-top: 3rem; }
/* Header + footer (2026-10-03): grid classes the prebuilt Tailwind lacked (the footer had collapsed to two columns),
   a logo that must not wrap, and tighter nav padding where eight links share the bar with the phone and Book button. */
.whitespace-nowrap { white-space: nowrap; }
.pt-16 { padding-top: 4rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.col-span-2 { grid-column: span 2 / span 2; }
.footer-email { overflow-wrap: normal; }   /* breaks only at the <wbr> after the @ */
.hover\:text-slate-600:hover { color: rgb(71 85 105); }
@media (min-width: 768px) { .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:col-span-4 { grid-column: span 4 / span 4; } }
@media (min-width: 1024px) {
  .lg\:pt-20 { padding-top: 5rem; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {   /* the container stops at 1280 px, so this holds on every desktop width */
  #desktop-nav > li > a, #desktop-nav .mega-trigger { padding-left: 0.625rem; padding-right: 0.625rem; }
}
@media (min-width: 1024px) { .lg\:col-span-3 { grid-column: span 3 / span 3; } }
@media (min-width: 1024px) { .lg\:flex-row { flex-direction: row; } }

/* ─── Quote form usability (2026-10-05) ─── */
/* "(optional)" next to a label, and the line above the three quick-tap questions */
.qm-optional { font-weight: 400; color: #94a3b8; }
.qm-optional-hint {
  margin-bottom: -0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
/* The drawer's send button stays in view while the form scrolls (two screens tall on a phone).
   The negative side margins match .quote-form's padding so the white bar spans the drawer. */
.qm-submit-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 1.25rem -24px 0;
  padding: 12px 24px;
  background: #fff;
  box-shadow: 0 -12px 16px -14px rgba(15, 23, 42, 0.3);
}
@media (max-width: 767px) {
  .qm-submit-bar {
    margin: 1rem -20px 0;
    padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  }
  /* Phones: fields at 16px. iOS Safari zooms the page when a field under 16px gets focus. */
  .qm-input,
  form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  form textarea,
  form select { font-size: 16px; }
}

/* ─── Showcase live 3-D (2026-10-05, studio.js Showcase3D) ───
   The viewer lies over the still render of the open tab / accordion row; once it is on, the still underneath is hidden
   (the canvas is transparent, so both would show). pointer-events: none keeps page scrolling and the tab clicks untouched. */
.ws3d-host { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.ws3d-host.is-on { opacity: 1; }
.ws3d-canvas { position: absolute; inset: 0; }
.ws3d-canvas canvas { display: block; }
.ws3d-caption {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px; background: rgba(15, 31, 48, 0.72); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}
.ws3d-caption[hidden] { display: none; }
[data-ws3d-slot] > img { transition: opacity .35s ease; }
[data-ws3d-slot].ws3d-live > img { opacity: 0; }
@media (max-width: 767px) {
  .ws3d-caption { bottom: 8px; padding: 4px 10px; font-size: 11px; }   /* the phone box is 4:3, so the model sits close to the bottom */
}

/* ─── Showcase "What We Install" (_includes/window-showcase.njk), 2026-10-05 ───
   One tabbed card for every size: phones get a sideways row of pills above the card (the 3-D stays in place when the
   visitor picks another type); from 768 px the pills become the 180 px sidebar and the card splits image | text. */
.ws-tabs { display: flex; flex-direction: column; background: #0f1f30; box-shadow: 0 25px 50px -12px rgba(15, 31, 48, 0.25); }
.ws-sidebar {
  display: flex; gap: 8px; padding: 14px 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; background: #0f1f30;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ws-sidebar::-webkit-scrollbar { display: none; }
.ws-tab {
  flex: 0 0 auto; scroll-snap-align: center; white-space: nowrap; cursor: pointer;
  padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  font-size: 13px; font-weight: 500; line-height: 1.2; text-align: left;
  color: rgba(255, 255, 255, 0.72); background: transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.ws-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.ws-tab:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.ws-tab--active { color: #fff; background: #185FA5; border-color: #185FA5; }
.ws-tab--active:hover { background: #185FA5; }
.ws-panels { position: relative; }
.ws-panel { display: flex; flex-direction: column; }
.ws-panel--hidden { display: none; }
.ws-media {
  width: 100%; aspect-ratio: 4 / 3;
  background: radial-gradient(55% 45% at 50% 42%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #182a42 0%, #0f1f30 100%);
}
.ws-media > img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; }   /* out of the flow: the box keeps its 4:3 whether or not the still has loaded, so the 3-D canvas always gets the same size */
.ws-info { background: #0f1f30; padding: 20px 20px 24px; }
.ws-no-js .ws-panel { display: flex !important; }     /* no JavaScript: every card stacked */
@media (min-width: 768px) {
  .ws-tabs { flex-direction: row; }
  .ws-sidebar {
    flex-direction: column; gap: 0; width: 180px; flex-shrink: 0; padding: 8px 0;
    overflow: visible; border-bottom: 0; scroll-snap-type: none;
  }
  .ws-tab {
    padding: 12px 20px; border: 0; border-left: 4px solid transparent; border-radius: 0;
    font-size: 14px; line-height: 1.25rem; white-space: normal; color: rgba(255, 255, 255, 0.6);
  }
  .ws-tab--active { color: #fff; background: rgba(255, 255, 255, 0.06); border-left-color: #185FA5; }
  .ws-tab--active:hover { background: rgba(255, 255, 255, 0.06); }
  .ws-panels { flex: 1; }
  .ws-panel { position: absolute; inset: 0; flex-direction: row; }
  .ws-media { width: 50%; aspect-ratio: auto; }
  .ws-media > img { padding: 24px; }
  .ws-info { padding: 2.5rem 2.5rem 2.5rem 3.5rem; }
  .ws-no-js .ws-panel { position: static !important; }
}

/* ─── Brochures hub (/brochures/ and /brochures/<id>/, 2026-10-05) ───
   The link in the visit-confirmation SMS lands on the hub: a short "before your visit" strip, one tab per product group,
   a card per factory brochure; each brochure opens as page images that load while scrolling (no 10 MB PDF on a phone). */
.bro-strip-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-bottom: 14px; }
.bro-strip { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .bro-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bro-strip-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px 20px; }
.bro-strip-item h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 8px 0 6px; }
.bro-strip-item p { font-size: 0.9rem; line-height: 1.55; color: #475569; }
.bro-strip-icon { width: 22px; height: 22px; color: #2563eb; }
.bro-strip-note { margin-top: 14px; font-size: 0.9rem; color: #64748b; }
.bro-strip-note a { color: #1d4ed8; font-weight: 600; }
.bro-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding: 2px 0 18px; }
.bro-tabs::-webkit-scrollbar { display: none; }
.bro-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 18px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff;
  font-size: 0.95rem; font-weight: 600; color: #334155; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bro-tab:hover { border-color: #93c5fd; }
.bro-tab:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.bro-tab[aria-selected="true"] { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.bro-count { font-size: 0.75rem; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); }
.bro-tab[aria-selected="true"] .bro-count { background: rgba(255, 255, 255, 0.22); }
.bro-panel { scroll-margin-top: 6rem; }
.bro-panel[hidden] { display: none; }
.bro-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .bro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bro-card {
  display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.bro-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.35); }
.bro-cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #f1f5f9; overflow: hidden; }
.bro-cover img { width: 100%; height: 100%; object-fit: contain; }
.bro-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px 18px 18px; }
.bro-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bro-maker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; }
.bro-badge { font-size: 0.72rem; font-weight: 700; color: #1d4ed8; background: #eff6ff; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.bro-title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: #0f172a; }
.bro-title a:hover { color: #1d4ed8; }
.bro-desc { flex: 1; font-size: 0.9rem; line-height: 1.55; color: #475569; }
.bro-actions, .bro-viewer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.bro-viewer-actions { justify-content: center; margin-top: 20px; }
.bro-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 12px;
  background: #1d4ed8; color: #fff; font-size: 0.9rem; font-weight: 600; transition: background 0.2s;
}
.bro-btn:hover { background: #1e40af; color: #fff; }
.bro-link { font-size: 0.9rem; font-weight: 600; color: #1d4ed8; padding: 10px 2px; }
.bro-link:hover { color: #1e3a8a; }
.bro-footnote { margin-top: 26px; font-size: 0.8rem; color: #94a3b8; text-align: center; }
.bro-hint { margin-top: 14px; font-size: 0.85rem; color: #94a3b8; }
.bro-pages { max-width: 1100px; margin: 0 auto; padding: 28px 16px 8px; }
.bro-page { margin: 0 0 22px; }
.bro-page img { display: block; width: 100%; height: auto; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.35); }
.bro-pnum { margin-top: 8px; text-align: center; font-size: 0.78rem; color: #94a3b8; }
.bro-end { max-width: 640px; margin: 0 auto; padding: 24px 16px 72px; text-align: center; }
.bro-end h2 { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.bro-end p { color: #475569; }
.bro-end p a { color: #1d4ed8; font-weight: 600; }
/* Phones: the three tabs fit without scrolling (no counts, tighter pills) and the "before your visit" strip becomes a
   sideways row of cards, so the brochures start one swipe below the header instead of a screen of text below it. */
@media (max-width: 480px) {
  .bro-tab { padding: 9px 13px; font-size: 0.86rem; }
  .bro-count { display: none; }
}
@media (max-width: 767px) {
  .bro-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 -16px; padding: 0 16px 4px; }
  .bro-strip::-webkit-scrollbar { display: none; }
  .bro-strip-item { flex: 0 0 84%; scroll-snap-align: start; padding: 14px 16px; }
  .bro-strip-item p { font-size: 0.86rem; }
}