/* ============================================
   DESIGN TOKENS
   Brand: Cabinet ERA — white, black, Vita red
   ============================================ */
:root {
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F6F3;
  --color-bg-dark: #0A0A0A;
  --color-ink: #0A0A0A;
  --color-ink-soft: #3A3A3A;
  --color-ink-muted: #787874;
  --color-line: #E8E6DF;
  --color-line-soft: #F0EEE8;
  --color-red: #E8122E;
  --color-red-dark: #C50E26;
  --color-white: #FFFFFF;

  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max: 1320px;
  --container-padding: 1.5rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 200ms var(--ease-smooth);
  --transition: 400ms var(--ease-out);
  --transition-slow: 800ms var(--ease-out);

  --shadow-md: 0 4px 20px -2px rgba(10, 10, 10, 0.08);
  --shadow-lg: 0 20px 60px -10px rgba(10, 10, 10, 0.18), 0 8px 24px -8px rgba(10, 10, 10, 0.08);
  --shadow-xl: 0 30px 80px -20px rgba(10, 10, 10, 0.25), 0 10px 30px -10px rgba(10, 10, 10, 0.12);
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, video, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ============================================
   TYPOGRAPHY
   ============================================ */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.eyebrow--red { color: var(--color-red); }

/* ============================================
   CABINET ERA LOGO — CSS recreation
   Two variants: dark (for light bg) + light (for dark bg)
   ============================================ */
.cera-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 2px;
  letter-spacing: 0;
}

/* Light variant (for dark backgrounds) */

/* Larger in footer */

/* Image-based logo (logo.png) */
.cera-logo-img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 100%;
  transition: opacity var(--transition-fast);
}

.cera-logo:hover .cera-logo-img {
  opacity: 0.8;
}

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

/* ============================================
   CONTAINER
   ============================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--wide { max-width: 1440px; }
.container--narrow { max-width: 960px; }

/* ============================================
   HEADER — minimal sticky
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    transform 380ms var(--ease-out);
  will-change: transform;
}

.site-header.scrolled {
  border-bottom-color: var(--color-line);
  background: rgba(255, 255, 255, 0.95);
}

/* Smart hide on scroll-down, reveal on scroll-up */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--space-6);
}

/* ===== Desktop navigation ===== */
.header-nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .header-nav { display: flex; }
}

.header-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-ink-soft);
  border-radius: 8px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.header-nav-link:hover {
  color: var(--color-ink);
  background: var(--color-bg-alt);
}

/* Active page underline */
.header-nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 20px;
  height: 2px;
  background: var(--color-red);
  border-radius: 1px;
  transition: transform 240ms var(--ease-out);
}

.header-nav-link.is-active {
  color: var(--color-ink);
}

.header-nav-link.is-active::after {
  transform: translateX(-50%) scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ===== Mobile hamburger toggle ===== */
.header-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--transition-fast);
}

.header-menu-toggle:hover { background: var(--color-bg-alt); }

@media (min-width: 1024px) {
  .header-menu-toggle { display: none; }
}

.header-menu-toggle-lines {
  position: relative;
  width: 20px;
  height: 14px;
}

.header-menu-toggle-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 280ms var(--ease-out), top 280ms var(--ease-out), opacity 200ms var(--ease-out);
}

.header-menu-toggle-lines span:nth-child(1) { top: 0; }
.header-menu-toggle-lines span:nth-child(2) { top: 6px; }
.header-menu-toggle-lines span:nth-child(3) { top: 12px; }

.header-menu-toggle.is-open .header-menu-toggle-lines span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.header-menu-toggle.is-open .header-menu-toggle-lines span:nth-child(2) {
  opacity: 0;
}

.header-menu-toggle.is-open .header-menu-toggle-lines span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* ===== Mobile drawer ===== */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 380px;
  background: var(--color-white);
  z-index: 99;
  padding: calc(64px + var(--space-8)) var(--space-6) var(--space-8);
  transform: translateX(100%);
  transition: transform 360ms var(--ease-out);
  overflow-y: auto;
  box-shadow: -20px 0 40px -20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

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

@media (min-width: 1024px) {
  .mobile-drawer { display: none; }
}

.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms var(--ease-out);
}

.mobile-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  transition: color var(--transition-fast), padding var(--transition-fast);
}

.mobile-drawer-link:hover,
.mobile-drawer-link.is-active {
  color: var(--color-red);
  padding-left: 18px;
}

.mobile-drawer-link svg {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.mobile-drawer-link:hover svg,
.mobile-drawer-link.is-active svg {
  opacity: 1;
  transform: translateX(0);
}

.mobile-drawer-contact {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-drawer-phone {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.mobile-drawer-phone em {
  font-style: italic;
  color: var(--color-red);
}

.mobile-drawer-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.header-phone {
  display: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-soft);
  letter-spacing: -0.005em;
  transition: color var(--transition-fast);
}

.header-phone:hover { color: var(--color-red); }

@media (min-width: 768px) {
  .header-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
}

/* Hide phone on mobile when menu-toggle is visible */
@media (max-width: 767px) {
  .header-phone { display: none; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn--primary {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}

.btn--primary:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(232, 18, 46, 0.5);
}

.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}

.btn--secondary:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-bg);
}

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.25);
}

.btn--ghost:hover {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-white);
}

.btn--large { padding: 18px 34px; font-size: 15px; }
.btn--full { width: 100%; }

.btn-arrow { transition: transform var(--transition-fast); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ============================================
   HERO — Kitchen photo left + floating form right
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 64px;
  display: flex;
  align-items: stretch;
  background: var(--color-bg);
  overflow: hidden;
}

.hero-kitchen-bg {
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  height: calc(100% - 64px);
  z-index: 0;
  overflow: hidden;
  /* Fallback color in case both images fail to load */
  background: var(--color-ink);
}

/* Each slide is absolutely layered; only one is at opacity 1 at a time.
   We crossfade via the `.is-active` class — both images stay preloaded so
   the swap is instant. The gradient overlay (::after) lives above both. */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
  will-change: opacity;
}

.hero-slide.is-active {
  opacity: 1;
}

/* Gradient overlay sits on top of both slides via ::after — put it in a
   separate pseudo-element with higher z-index within .hero-kitchen-bg */
.hero-kitchen-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Strong left-side darken so text stays readable on busy warehouse shelves */
    linear-gradient(95deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.78) 22%,
      rgba(0, 0, 0, 0.55) 42%,
      rgba(0, 0, 0, 0.25) 62%,
      rgba(0, 0, 0, 0.05) 82%,
      rgba(0, 0, 0, 0) 100%),
    /* Subtle overall darken + top/bottom vignette so busy mid-tones settle */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.2) 30%,
      rgba(0, 0, 0, 0.2) 70%,
      rgba(0, 0, 0, 0.5) 100%),
    /* Flat tint over everything to reduce busy detail on the right */
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-16) var(--container-padding);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: end;
  min-height: calc(100vh - 64px);
}

@media (min-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr 440px;
    gap: var(--space-12);
    align-items: center;
    padding: var(--space-20) var(--container-padding);
  }
}

/* Hero content positioned bottom-left over image */
.hero-content {
  position: relative;
  color: var(--color-white);
  max-width: 640px;
  animation: fade-up 900ms var(--ease-out) backwards;
}

@media (min-width: 1024px) {
  .hero-content {
    max-width: 640px;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: 8px 16px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  color: var(--color-white);
  animation: fade-up 900ms var(--ease-out) 100ms backwards;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(232, 18, 46, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(232, 18, 46, 0.15); }
}

.hero-eyebrow .eyebrow {
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(232, 18, 46, 0.25);
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero-title {
  font-size: clamp(2.75rem, 6.5vw, 5.25rem);
  margin-bottom: var(--space-6);
  animation: fade-up 900ms var(--ease-out) 200ms backwards;
  /* Layered shadow: sharp close shadow for edge contrast + soft wide shadow
     for depth separation from the busy warehouse image behind */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 4px 24px rgba(0, 0, 0, 0.5);
  color: var(--color-white);
}

.hero-title em {
  font-style: italic;
  color: var(--color-red);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-lead {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.05vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  letter-spacing: 0.005em;
  margin-bottom: var(--space-10);
  max-width: 540px;
  animation: fade-up 900ms var(--ease-out) 300ms backwards;
  /* Stacked shadows for crisp readability against busy background */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.65),
    0 4px 20px rgba(0, 0, 0, 0.5);
}

.hero-lead strong {
  color: var(--color-white);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, rgba(232, 18, 46, 0.5) 62%);
  padding: 0 3px;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  max-width: 540px;
  animation: fade-up 900ms var(--ease-out) 500ms backwards;
}

@media (min-width: 640px) {
  .hero-proof { grid-template-columns: repeat(4, 1fr); }
}

/* Hero badges — alternating red cycle through the 3 */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
  animation: fade-up 900ms var(--ease-out) 400ms backwards;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  transition: background 600ms var(--ease-out),
              border-color 600ms var(--ease-out),
              color 600ms var(--ease-out),
              box-shadow 600ms var(--ease-out),
              transform 600ms var(--ease-out);
}

.hero-badge::before {
  content: '✓';
  font-size: 12px;
  color: var(--color-red);
  font-weight: 700;
  transition: color 600ms var(--ease-out);
}

/* Active (red) state — JS rotates this class every 2s */
.hero-badge--active {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
  box-shadow: 0 4px 20px -4px rgba(232, 18, 46, 0.55);
  transform: translateY(-1px);
}

.hero-badge--active::before {
  color: var(--color-white);
}

.hero-badge:hover:not(.hero-badge--active) {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.proof-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.proof-number {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 2px 12px rgba(0, 0, 0, 0.5);
}

.proof-number em {
  font-style: italic;
  color: var(--color-red);
}

.proof-label {
  font-size: 12px;
  opacity: 0.85;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ============================================
   FLOATING FORM CARD
   ============================================ */
.hero-form {
  position: relative;
  background: var(--color-white);
  border-radius: 20px;
  padding: var(--space-8);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5),
              0 15px 40px -10px rgba(0, 0, 0, 0.3);
  animation: fade-up 900ms var(--ease-out) 400ms backwards;
  justify-self: stretch;
  border: 1px solid rgba(255,255,255,0.5);
}

@media (min-width: 768px) {
  .hero-form {
    padding: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .hero-form {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 440px;
  }
}

/* Badge at top of form */
.form-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 12px -2px rgba(232, 18, 46, 0.4);
}

.form-header {
  margin-bottom: var(--space-6);
  text-align: center;
}

.form-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.form-title em {
  font-style: italic;
  color: var(--color-red);
}

.form-subtitle {
  font-size: 13px;
  color: var(--color-ink-muted);
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field { position: relative; }

.field-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  background: var(--color-bg-alt);
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: var(--color-ink);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.field-input:focus {
  outline: none;
  border-color: var(--color-ink);
  background: var(--color-white);
}

.field-input::placeholder { color: var(--color-ink-muted); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-footer { margin-top: var(--space-6); }

/* Urgency hook sitting right above the CTA button — builds confidence to click */
.form-hook {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: var(--space-3);
  background: rgba(232, 18, 46, 0.06);
  border: 1px dashed rgba(232, 18, 46, 0.3);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-ink-soft);
  text-align: center;
}

.form-hook-text {
  letter-spacing: 0.01em;
}

.form-hook-text strong {
  color: var(--color-red);
  font-weight: 700;
}

.form-hook-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.2);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

/* Override the default pill radius (100px) with square corners for form CTA */
.form-submit {
  border-radius: 10px;
  margin-bottom: var(--space-3);
}

.form-fine {
  font-size: 11px;
  color: var(--color-ink-muted);
  line-height: 1.5;
  text-align: center;
}

.form-fine a {
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 2px;
}

.form-fine em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-red);
}

/* ============================================
   SECTION BASICS
   ============================================ */
section { position: relative; }

.section-spacing {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

@media (min-width: 768px) {
  .section-spacing {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }
}

/* ============================================
   BENEFITS — animated cards between hero and offering
   ============================================ */
.benefits {
  background: var(--color-bg);
  padding-top: var(--space-20);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .benefits {
    padding-top: var(--space-24);
    padding-bottom: 0;
  }
}

/* Layer 1: Grid pattern base - dark lines on white */
.benefits::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 80% 70% at center, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, #000 30%, transparent 85%);
  z-index: -2;
  animation: benefitsGridDrift 40s linear infinite;
}

/* Layer 2: Floating gradient blobs */
.benefits-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.benefits-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  will-change: transform;
}

.benefits-blob--red {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(232, 18, 46, 0.35) 0%, rgba(232, 18, 46, 0) 70%);
  top: -15%;
  left: -10%;
  animation: blobFloat1 22s ease-in-out infinite;
}

.benefits-blob--red-2 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(197, 14, 38, 0.3) 0%, rgba(197, 14, 38, 0) 70%);
  bottom: -12%;
  right: -8%;
  animation: blobFloat2 28s ease-in-out infinite;
}

.benefits-blob--white {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0) 70%);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: blobFloat3 35s ease-in-out infinite;
}

/* Layer 3: Animated sweep lines (premium/technical touch) */
.benefits-sweep {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(232, 18, 46, 0) 20%,
    rgba(232, 18, 46, 0.5) 50%,
    rgba(232, 18, 46, 0) 80%,
    transparent 100%
  );
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}

.benefits-sweep--1 {
  left: 20%;
  animation: sweepFade 8s ease-in-out infinite;
}

.benefits-sweep--2 {
  left: 58%;
  animation: sweepFade 11s ease-in-out infinite 2s;
}

.benefits-sweep--3 {
  left: 82%;
  animation: sweepFade 9s ease-in-out infinite 4s;
}

/* Layer 4: Subtle noise-like dot pattern for texture */
.benefits::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.12) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  animation: dotsPulse 12s ease-in-out infinite;
}

@keyframes benefitsGridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(56px, 56px); }
}

@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, 80px) scale(1.15); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}

@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-80px, -60px) scale(1.1); }
  70%      { transform: translate(40px, -30px) scale(0.9); }
}

@keyframes blobFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-40%, -60%) scale(1.3); }
}

@keyframes sweepFade {
  0%, 100% { opacity: 0; transform: translateY(-20%); }
  50%      { opacity: 0.6; transform: translateY(0); }
}

@keyframes dotsPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.6; }
}

/* ============================================
   DELIVERY TRUCK BANNER — animated between header and cards
   ============================================ */
.truck-lane {
  position: relative;
  /* Break out of container — span full viewport width */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 130px;
  margin-top: var(--space-16);
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Road base with dashed center line */
.truck-road {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(10, 10, 10, 0.22) 8%,
    rgba(10, 10, 10, 0.22) 92%,
    transparent 100%
  );
}

.truck-road::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 1.5px;
  background-image: linear-gradient(
    90deg,
    rgba(232, 18, 46, 0.55) 0 14px,
    transparent 14px 28px
  );
  background-size: 28px 1.5px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  animation: roadDash 1.4s linear infinite;
}

@keyframes roadDash {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}

/* Truck + flag wrapper — moves LEFT to RIGHT across full viewport */
.truck-wrap {
  position: absolute;
  bottom: 8px;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 0;
  animation: truckDrive 14s linear infinite;
  will-change: transform;
}

/* Start fully off-screen left, end fully off-screen right */
@keyframes truckDrive {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100vw); }
}

/* Truck SVG sizing — no flip needed, SVG already faces right (cab on right) */
.truck-svg {
  width: 280px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(10, 10, 10, 0.18));
}

/* Headlight flash — subtle blink with warm glow, like truck flashing brights */
.truck-headlight {
  transform-box: fill-box;
  transform-origin: center;
  animation: headlightFlash 1.9s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(255, 217, 107, 0.9));
}

@keyframes headlightFlash {
  /* Normal dim state */
  0%, 100% {
    fill: #FFD96B;
    filter: drop-shadow(0 0 3px rgba(255, 217, 107, 0.8));
    transform: scale(1);
  }
  /* First bright flash */
  10%, 18% {
    fill: #FFF4C2;
    filter: drop-shadow(0 0 12px rgba(255, 244, 194, 1)) drop-shadow(0 0 24px rgba(255, 217, 107, 0.7));
    transform: scale(1.85);
  }
  /* Brief dip between flashes */
  22% {
    fill: #FFD96B;
    filter: drop-shadow(0 0 3px rgba(255, 217, 107, 0.8));
    transform: scale(1);
  }
  /* Second bright flash */
  26%, 34% {
    fill: #FFF4C2;
    filter: drop-shadow(0 0 12px rgba(255, 244, 194, 1)) drop-shadow(0 0 24px rgba(255, 217, 107, 0.7));
    transform: scale(1.85);
  }
  /* Back to normal for the quiet stretch (~1.5s) */
  38% {
    fill: #FFD96B;
    filter: drop-shadow(0 0 3px rgba(255, 217, 107, 0.8));
    transform: scale(1);
  }
}

/* Trailing flags container — sits BEHIND truck (on left, since truck moves L→R) */
.truck-flags {
  order: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-right: 6px;
  margin-bottom: 18px;
  padding-right: 12px;
  /* The "rope" — a thin line running along the right edge connecting both flags to the truck */
  align-items: flex-end;
}

.truck-flags::after {
  content: '';
  position: absolute;
  right: 0;
  top: 14px;
  bottom: 14px;
  width: 1.5px;
  background: #4A4A4A;
  border-radius: 2px;
  z-index: 0;
}

.truck-flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 18px 0 22px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 10px -2px rgba(10, 10, 10, 0.25);
  /* Pennant / swallowtail cutout on the trailing (left) edge */
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  transform-origin: right center;
  z-index: 1;
}

.truck-flag--1 {
  background: var(--color-red);
  animation: flagSway1 2.8s ease-in-out infinite;
}

.truck-flag--2 {
  background: var(--color-ink);
  animation: flagSway2 3.2s ease-in-out infinite;
}

/* Tiny tie knot where each flag meets the rope */
.truck-flag::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2A2A2A;
  z-index: 2;
}

/* Subtle swaying — slightly different timing per flag so they don't move in sync */
@keyframes flagSway1 {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-2deg); }
}

@keyframes flagSway2 {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(2.5deg); }
}

.truck-flag-text {
  display: inline-block;
}

/* Rope attaches to the truck on its right side */
.truck-flags::before {
  content: '';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 1.5px;
  background: #4A4A4A;
  z-index: 0;
}

/* Truck comes after flag in visual order (flags trail behind on the left) */
.truck-wrap .truck-svg { order: 2; }

/* Smaller devices */
@media (max-width: 767px) {
  .truck-lane { height: 100px; margin-top: var(--space-12); }
  .truck-svg { width: 220px; }
  .truck-flag { font-size: 11px; padding: 0 14px 0 18px; height: 26px; letter-spacing: 0.14em; }
  .truck-flags { gap: 6px; margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .truck-wrap { animation: none; transform: translateX(30vw); }
  .truck-flag, .truck-headlight { animation: none !important; }
  .truck-road::after { animation: none; }
}

/* Text colors for light background */
.benefits .eyebrow--red { color: var(--color-red); }
.benefits-title { color: var(--color-ink); }
.benefits-lead { color: var(--color-ink-muted); }

.benefits-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}

.benefits-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.benefits-title em {
  font-style: italic;
  color: var(--color-red);
}

.benefits-lead {
  font-size: 16px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .benefits-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.benefit-card {
  position: relative;
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 400ms var(--ease-out), transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
  cursor: default;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  gap: 0;
  min-height: 96px;
}

/* Right-side photo strip */
.benefit-card-bg {
  position: relative;
  order: 2;
  width: 160px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-ink);
  align-self: stretch;
}

.benefit-card-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1000ms var(--ease-out);
  /* Soft fade from card-white on the left into full image on the right */
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 25%,
    rgba(0, 0, 0, 1) 60%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 25%,
    rgba(0, 0, 0, 1) 60%
  );
}

/* Subtle highlight tint on the image so it reads cleanly, no hard edges */
.benefit-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.08) 100%
  );
  pointer-events: none;
}

.benefit-card:hover .benefit-card-bg-img {
  transform: scale(1.08);
}

.benefit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
  z-index: 3;
}

.benefit-card:hover {
  border-color: var(--color-red);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -15px rgba(232, 18, 46, 0.35), 0 8px 20px -8px rgba(10, 10, 10, 0.2);
}

/* Auto-cycling highlight — each card pulses red in sequence
   6 cards × 2s each = 12s total cycle */
.benefit-card.is-highlighted {
  border-color: var(--color-red);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -15px rgba(232, 18, 46, 0.45), 0 8px 20px -8px rgba(10, 10, 10, 0.25);
}

.benefit-card.is-highlighted .benefit-card-bg-img {
  transform: scale(1.06);
}

.benefit-card.is-highlighted::before {
  transform: scaleX(1);
}

.benefit-card:hover::before { transform: scaleX(1); }

.benefit-card-content {
  order: 1;
  flex: 1;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.benefit-title {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.55vw, 1.4375rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.benefit-title em { font-style: italic; color: var(--color-red); }

.benefit-card.reveal { opacity: 0; transform: translateY(32px); }
.benefit-card.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.benefit-card.reveal:nth-child(1).visible { transition-delay: 0ms; }
.benefit-card.reveal:nth-child(2).visible { transition-delay: 80ms; }
.benefit-card.reveal:nth-child(3).visible { transition-delay: 160ms; }
.benefit-card.reveal:nth-child(4).visible { transition-delay: 240ms; }
.benefit-card.reveal:nth-child(5).visible { transition-delay: 320ms; }
.benefit-card.reveal:nth-child(6).visible { transition-delay: 400ms; }

/* ============================================
   SHOWROOM GALLERY — bento mosaic
   ============================================ */
.showroom-gallery {
  position: relative;
  padding: var(--space-20) 0;
  background: var(--color-bg);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .showroom-gallery {
    padding: var(--space-24) 0;
  }
}

/* Soft ambient background — red glow top-left, subtle grid */
.showroom-gallery-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(232, 18, 46, 0.08) 0%, rgba(232, 18, 46, 0) 40%),
    radial-gradient(circle at 88% 90%, rgba(10, 10, 10, 0.04) 0%, rgba(10, 10, 10, 0) 40%),
    linear-gradient(rgba(10, 10, 10, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.025) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}

.showroom-gallery-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) {
  .showroom-gallery-header {
    grid-template-columns: 1.3fr 1fr;
    align-items: end;
    gap: var(--space-12);
  }
}

.showroom-gallery-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-top: var(--space-2);
}

.showroom-gallery-title em {
  font-style: italic;
  color: var(--color-red);
}

.showroom-gallery-intro {
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--color-ink-soft);
}

.showroom-gallery-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  color: var(--color-red);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.showroom-gallery-cta:hover {
  gap: 12px;
}

/* Bento grid — 9 tiles, asymmetric mosaic.
   Desktop: 4 cols × 3 rows with spans; tablet: 3 cols; mobile: 2 cols. */
.showroom-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 180px;
  gap: var(--space-3);
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .showroom-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .showroom-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 210px;
  }
}

.sg-tile {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow: 0 10px 30px -14px rgba(10, 10, 10, 0.18);
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
  will-change: transform;
}

.sg-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out), filter 400ms ease;
}

.sg-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 55%, rgba(10, 10, 10, 0.35) 100%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.sg-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -16px rgba(10, 10, 10, 0.28);
  z-index: 2;
}

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

.sg-tile:hover::after {
  opacity: 1;
}

/* Caption on the hero (flagship) tile */
.sg-tile-caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 3;
  margin: 0;
}

.sg-tile-caption-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  box-shadow: 0 6px 16px -6px rgba(10, 10, 10, 0.2);
}

.sg-tile-caption-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.22);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Asymmetric bento placement — mobile uses auto flow, desktop breaks the grid */

/* Tablet: 3-column asymmetry */
@media (min-width: 640px) and (max-width: 1023px) {
  .sg-tile--1 { grid-column: span 2; grid-row: span 2; }
  .sg-tile--4 { grid-column: span 2; }
  .sg-tile--7 { grid-column: span 2; }
  .sg-tile--10 { grid-column: span 2; }
}

/* Desktop: 4-column wide mosaic */
@media (min-width: 1024px) {
  .sg-tile--1 { grid-column: span 2; grid-row: span 2; }  /* Big hero, top-left */
  .sg-tile--2 { grid-column: span 1; grid-row: span 1; }
  .sg-tile--3 { grid-column: span 1; grid-row: span 2; }  /* Tall right */
  .sg-tile--4 { grid-column: span 1; grid-row: span 1; }
  .sg-tile--5 { grid-column: span 2; grid-row: span 1; }  /* Wide middle */
  .sg-tile--6 { grid-column: span 1; grid-row: span 1; }
  .sg-tile--7 { grid-column: span 1; grid-row: span 1; }
  .sg-tile--8 { grid-column: span 1; grid-row: span 1; }
  .sg-tile--9 { grid-column: span 2; grid-row: span 1; }  /* Wide bottom-left */
  .sg-tile--10 { grid-column: span 1; grid-row: span 1; } /* Tile at bottom-right */
}

/* Stagger reveal for tiles when parent grid becomes visible */
.showroom-gallery-grid.reveal .sg-tile {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), box-shadow 400ms var(--ease-out);
}

.showroom-gallery-grid.reveal.visible .sg-tile {
  opacity: 1;
  transform: translateY(0);
}

.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(1) { transition-delay: 0ms; }
.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(2) { transition-delay: 80ms; }
.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(3) { transition-delay: 160ms; }
.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(4) { transition-delay: 240ms; }
.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(5) { transition-delay: 320ms; }
.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(6) { transition-delay: 400ms; }
.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(7) { transition-delay: 480ms; }
.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(8) { transition-delay: 560ms; }
.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(9) { transition-delay: 640ms; }
.showroom-gallery-grid.reveal.visible .sg-tile:nth-child(10) { transition-delay: 720ms; }

/* Stats row below gallery */
.showroom-gallery-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 1280px;
  margin: var(--space-12) auto 0;
  padding: var(--space-8) var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: 0 20px 60px -30px rgba(10, 10, 10, 0.12);
}

@media (min-width: 768px) {
  .showroom-gallery-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

.sg-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--space-2);
  border-left: 2px solid var(--color-line);
}

.sg-stat:first-child {
  border-left-color: var(--color-red);
}

@media (min-width: 768px) {
  .sg-stat {
    padding: var(--space-1) var(--space-4);
  }
}

.sg-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.sg-stat-num em {
  font-style: italic;
  color: var(--color-red);
  font-size: 0.75em;
}

.sg-stat-lbl {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-ink-muted);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Hero tile: auto-rotating slider */
.sg-tile--hero {
  position: relative;
}

.sg-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1200ms ease, transform 6000ms ease-out;
  will-change: opacity, transform;
  z-index: 1;
}

.sg-hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Zoom-in indicator on hover — shows all tiles are clickable */
.sg-tile-zoom {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 4;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  color: var(--color-ink);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 300ms ease, transform 300ms ease, background 200ms ease;
  pointer-events: none;
  box-shadow: 0 6px 16px -6px rgba(10, 10, 10, 0.25);
}

.sg-tile-zoom svg {
  width: 14px;
  height: 14px;
}

.sg-tile:hover .sg-tile-zoom {
  opacity: 1;
  transform: translateY(0);
}

.sg-tile:hover .sg-tile-zoom:hover,
.sg-tile:active .sg-tile-zoom {
  background: var(--color-red);
  color: var(--color-white);
}

/* ============================================
   SHOWROOM GALLERY — lightbox
   ============================================ */
.sg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
  padding: var(--space-6);
}

.sg-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.sg-lightbox-stage {
  position: relative;
  max-width: min(1400px, 92vw);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  animation: sgLightboxFadeIn 300ms ease;
}

@keyframes sgLightboxFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Close button */
.sg-lightbox-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  transition: all 200ms ease;
  z-index: 2;
  padding: 0;
}

.sg-lightbox-close:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  transform: rotate(90deg);
}

.sg-lightbox-close svg {
  width: 20px;
  height: 20px;
}

/* Prev / Next navigation */
.sg-lightbox-nav {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  transition: all 200ms ease;
  padding: 0;
  flex-shrink: 0;
  z-index: 2;
}

.sg-lightbox-nav:hover {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-white);
}

.sg-lightbox-nav svg {
  width: 22px;
  height: 22px;
}

.sg-lightbox-nav--prev { margin-right: var(--space-4); }
.sg-lightbox-nav--next { margin-left: var(--space-4); }

/* On mobile, place nav buttons absolutely over the image */
@media (max-width: 767px) {
  .sg-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
  }
  .sg-lightbox-nav--prev {
    left: var(--space-3);
    margin: 0;
  }
  .sg-lightbox-nav--next {
    right: var(--space-3);
    margin: 0;
  }
  .sg-lightbox-nav:hover {
    transform: translateY(-50%);
  }
}

/* Counter (1 / 9) */
.sg-lightbox-counter {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  z-index: 2;
}

/* ============================================
   DOOR STYLES — 200+ options showcase
   ============================================ */
.doors {
  background: var(--color-bg-dark);
  color: var(--color-white);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .doors {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* Layer 1: animated grid pattern — subtle white on dark */
.doors::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 80% 70% at center, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, #000 30%, transparent 85%);
  z-index: -2;
  animation: doorsGridDrift 45s linear infinite;
}

/* Layer 2: subtle red blob */
.doors::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232, 18, 46, 0.3) 0%, rgba(232, 18, 46, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
  animation: doorsBlobFloat 25s ease-in-out infinite;
}

@keyframes doorsGridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(56px, 56px); }
}

@keyframes doorsBlobFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-45%, -55%) scale(1.2); }
}

.doors-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-8);
}

.doors-header .eyebrow--red { color: var(--color-red); }

.doors-title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-white);
}

.doors-title em {
  font-style: italic;
  color: var(--color-red);
}

.doors-lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto;
}

/* Shared marquee showcase — full viewport width */
.doors-showcase,
.counters-showcase {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.doors-row,
.counters-row {
  display: flex;
  gap: 14px;
  width: max-content;
  align-items: stretch;
  padding: 4px 0;
  will-change: transform;
}

.doors-row {
  animation: marqueeL 55s linear infinite;
}

.counters-row {
  animation: marqueeR 60s linear infinite;
}

.doors-showcase:hover .doors-row,
.counters-showcase:hover .counters-row {
  animation-play-state: paused;
}

.door-tile  { flex: 0 0 130px; }
.counter-tile { flex: 0 0 150px; }

@keyframes marqueeL {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marqueeR {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.door-tile {
  position: relative;
  aspect-ratio: 3/4;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  transition: transform 400ms var(--ease-out), border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
  cursor: default;
}

.door-tile:hover {
  transform: translateY(-4px);
  border-color: var(--color-red);
  box-shadow: 0 16px 32px -12px rgba(232, 18, 46, 0.35);
  z-index: 2;
}

.door-tile-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transition: transform 600ms var(--ease-out);
}

.door-tile:hover .door-tile-photo {
  transform: scale(1.05);
}

.door-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 8px 8px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.94) 65%);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   BUNDLE DIVIDER — compact giant "+" with flanking stat cards
   ============================================ */
.bundle-divider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-6) auto;
  max-width: 860px;
  padding: 0 var(--space-4);
  text-align: center;
}

/* The visual equation: card + plus + card */
.bundle-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  margin-bottom: var(--space-5);
  width: 100%;
}

@media (max-width: 767px) {
  .bundle-equation {
    gap: var(--space-5);
  }
}

@media (max-width: 560px) {
  .bundle-equation {
    gap: var(--space-3);
  }
}

/* Flanking cards — door count & countertop count */
.bundle-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 240px;
  padding: var(--space-4) var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: border-color 400ms var(--ease-out), background 400ms var(--ease-out), transform 400ms var(--ease-out);
}

.bundle-card:hover {
  border-color: rgba(232, 18, 46, 0.5);
  background: rgba(232, 18, 46, 0.05);
  transform: translateY(-2px);
}

.bundle-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-red);
  margin-bottom: 2px;
}

.bundle-card-icon svg {
  width: 100%;
  height: 100%;
}

.bundle-card-num {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-white);
}

.bundle-card-num em {
  font-style: normal;
  color: var(--color-red);
}

.bundle-card-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white);
}

.bundle-card-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

@media (max-width: 560px) {
  .bundle-card {
    padding: var(--space-3);
  }
  .bundle-card-sub {
    font-size: 9px;
    letter-spacing: 0.02em;
  }
  .bundle-card-icon {
    width: 28px;
    height: 28px;
  }
}

.bundle-divider-plus {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  border-radius: 50%;
  box-shadow:
    0 0 0 6px rgba(232, 18, 46, 0.15),
    0 0 0 14px rgba(232, 18, 46, 0.07),
    0 14px 30px -8px rgba(232, 18, 46, 0.55);
  animation: bundlePlusPulse 3s ease-in-out infinite;
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .bundle-divider-plus {
    width: 48px;
    height: 48px;
  }
  .bundle-divider-plus::before { width: 22px; height: 4px; }
  .bundle-divider-plus::after  { width: 4px; height: 22px; }
}

.bundle-divider-plus::before,
.bundle-divider-plus::after {
  content: '';
  position: absolute;
  background: var(--color-white);
  border-radius: 3px;
}

.bundle-divider-plus::before {
  width: 30px;
  height: 5px;
}

.bundle-divider-plus::after {
  width: 5px;
  height: 30px;
}

@keyframes bundlePlusPulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(232, 18, 46, 0.15),
      0 0 0 14px rgba(232, 18, 46, 0.07),
      0 14px 30px -8px rgba(232, 18, 46, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(232, 18, 46, 0.2),
      0 0 0 22px rgba(232, 18, 46, 0.08),
      0 16px 36px -8px rgba(232, 18, 46, 0.65);
    transform: scale(1.04);
  }
}

.bundle-divider-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-red);
}

.bundle-divider-headline {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-white);
  margin: 0;
}

.bundle-divider-headline em {
  font-style: italic;
  color: var(--color-red);
}

.bundle-divider-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0 auto;
}

.bundle-divider-text strong {
  color: var(--color-white);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 62%, rgba(232, 18, 46, 0.5) 62%);
  padding: 0 2px;
}

.counter-tile {
  position: relative;
  aspect-ratio: 2/3;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  transition: transform 400ms var(--ease-out), border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
  cursor: default;
}

.counter-tile:hover {
  transform: translateY(-4px);
  border-color: var(--color-red);
  box-shadow: 0 16px 32px -12px rgba(232, 18, 46, 0.35);
  z-index: 2;
}

.counter-tile-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transition: transform 600ms var(--ease-out);
}

.counter-tile:hover .counter-tile-photo {
  transform: scale(1.05);
}

.counter-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 10px 8px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.94) 65%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.counter-name {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.counter-cat {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.counter-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.counter-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.counter-cat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.doors-footer {
  text-align: center;
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.doors-count {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-white);
}

.doors-count em {
  font-style: italic;
  color: var(--color-red);
}

.doors-count-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .doors-row, .counters-row { animation: none; }
  .bundle-divider-plus { animation: none; }
  .doors::before, .doors::after { animation: none; }
}

/* ============================================
   WAREHOUSE — 155K+ sqft wholesale operation
   ============================================ */
.warehouse {
  position: relative;
  background: var(--color-bg-dark);
  color: var(--color-white);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
  overflow: hidden;
}

@media (min-width: 768px) {
  .warehouse {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

.warehouse-bg {
  position: absolute;
  inset: 0;
  background-image: url("/image/warehouse.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  z-index: 0;
}

.warehouse-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0.6) 50%,
    rgba(10, 10, 10, 0.3) 100%
  );
}

.warehouse-container {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .warehouse-container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
  }
}

.warehouse-content {
  max-width: 560px;
}

.warehouse-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-5);
  display: block;
}

.warehouse-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: var(--space-6);
}

.warehouse-title em {
  font-style: italic;
  color: var(--color-red);
}

.warehouse-lead {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: var(--space-6);
}

.warehouse-lead strong {
  color: var(--color-white);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, rgba(232, 18, 46, 0.5) 62%);
  padding: 0 3px;
}

.warehouse-lead-small {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: var(--space-8);
  letter-spacing: -0.01em;
}

.warehouse-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.warehouse-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.warehouse-stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-white);
}

.warehouse-stat-number em {
  font-style: italic;
  color: var(--color-red);
}

.warehouse-stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
}

.warehouse-visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  cursor: default;
  transition: border-color 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}

.warehouse-visual:hover {
  border-color: rgba(232, 18, 46, 0.5);
  box-shadow: 0 40px 100px -20px rgba(232, 18, 46, 0.35), 0 20px 60px -15px rgba(0, 0, 0, 0.7);
}

.warehouse-visual-img {
  position: absolute;
  inset: 0;
  background-image: url("/image/warehouse.webp");
  background-size: cover;
  background-position: center;
  transition: transform 900ms var(--ease-out), filter 700ms var(--ease-out);
}

.warehouse-visual:hover .warehouse-visual-img {
  transform: scale(1.06);
  filter: brightness(0.55) saturate(1.1);
}

.warehouse-visual-overlay {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  padding: 8px 14px 8px 10px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  transition: transform 500ms var(--ease-out), border-color 500ms var(--ease-out);
}

.warehouse-visual:hover .warehouse-visual-overlay {
  transform: translateY(-2px);
  border-color: rgba(76, 217, 100, 0.4);
}

/* Green "live" indicator — dot with radiating halo */
.warehouse-visual-overlay::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CD964;
  box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
  animation: liveDotPulse 1.6s ease-out infinite;
  flex-shrink: 0;
}

@keyframes liveDotPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(76, 217, 100, 0.7),
      0 0 8px 0 rgba(76, 217, 100, 0.6);
  }
  70% {
    box-shadow:
      0 0 0 10px rgba(76, 217, 100, 0),
      0 0 8px 0 rgba(76, 217, 100, 0.3);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(76, 217, 100, 0),
      0 0 8px 0 rgba(76, 217, 100, 0.6);
  }
}

.warehouse-visual-overlay-sep {
  opacity: 0.35;
  margin: 0 -2px;
}

.warehouse-visual-overlay-count {
  color: #4CD964;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 250ms var(--ease-out);
  min-width: 46px;
  text-align: right;
  display: inline-block;
}

.warehouse-visual-overlay-count.is-ticking {
  color: #7EEB95;
}

.warehouse-visual-overlay-unit {
  opacity: 0.55;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* Hover reveal panel — stat cards + location label */
.warehouse-visual-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.85) 100%
  );
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
}

.warehouse-visual:hover .warehouse-visual-hover {
  opacity: 1;
}

.warehouse-visual-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: var(--space-3);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 600ms var(--ease-out) 80ms, opacity 600ms var(--ease-out) 80ms;
}

.warehouse-visual:hover .warehouse-visual-stats {
  transform: translateY(0);
  opacity: 1;
}

.warehouse-visual-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.warehouse-visual-stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-white);
}

.warehouse-visual-stat-num em {
  font-style: italic;
  color: var(--color-red);
}

.warehouse-visual-stat-lbl {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}

.warehouse-visual-hover-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(8px);
  opacity: 0;
  transition: transform 600ms var(--ease-out) 160ms, opacity 600ms var(--ease-out) 160ms;
}

.warehouse-visual-hover-label::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--color-red);
}

.warehouse-visual:hover .warehouse-visual-hover-label {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================
   OFFERING — compare table + rich value cards
   ============================================ */

/* ============================================
   COMPARE TABLE — Big-Box vs Custom vs Cabinet ERA
   ============================================ */

/* Cabinet ERA column — stands out */

/* Cabinet ERA column cells */

/* Check / X icons */

/* Mobile: collapse to Cabinet ERA-only focused view */
@media (max-width: 767px) {
  /* Hide Home Depot (3rd) and Lowe's (4th) columns on small screens —
     keep feature name (1st) and Cabinet ERA (2nd) */
}

/* ============================================
   OFFERING RICH CARDS — 3 reasons we win
   ============================================ */

@media (min-width: 768px) {
}

/* Dark gradient at bottom of visual so icon+badge reads cleanly */

/* Floating icon badge in the corner of the visual */

/* Number pill in opposite corner */

/* Proof strip at bottom of each card */

/* ============================================
   PROCESS — 4-step journey with wavy dashed connectors
   ============================================ */
.process {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
}

.process-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}

.process-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.process-title em {
  font-style: italic;
  color: var(--color-red);
}

.process-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================
   JOURNEY — 4 cards in a row, wavy red dashed paths between them
   ============================================ */
.journey {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

/* The wavy dashed SVG background — sits behind everything, connects cards */
.journey-path {
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 0;
  display: none;
}

@media (min-width: 1024px) {
  .journey-path {
    display: block;
  }
}

.journey-path path {
  fill: none;
  stroke: var(--color-red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
  opacity: 0.55;
  animation: dashFlow 3s linear infinite;
}

@keyframes dashFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -32; }
}

/* ============================================
   Card grid — 4 up on desktop, 2x2 on tablet, stacked mobile
   ============================================ */
.journey-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .journey-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

@media (min-width: 1024px) {
  .journey-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}

.journey-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
}

/* Step index pill above the visual — sits centered over the connecting path */
.journey-step-pill {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--color-white);
  border: 1.5px solid var(--color-line);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
  box-shadow: 0 4px 12px -4px rgba(10, 10, 10, 0.08);
  transition: all 400ms var(--ease-out);
}

.journey-step-pill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  margin-left: -4px;
  flex-shrink: 0;
}

.journey-card:hover .journey-step-pill {
  border-color: var(--color-red);
  color: var(--color-red);
  transform: translateY(-2px);
}

/* Visual (photo/render/plan) — the main card surface */
.journey-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  box-shadow:
    0 20px 40px -12px rgba(10, 10, 10, 0.15),
    0 6px 12px -4px rgba(10, 10, 10, 0.06);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), border-color 500ms var(--ease-out);
  margin-bottom: var(--space-5);
}

.journey-card:hover .journey-visual {
  transform: translateY(-6px);
  border-color: var(--color-red);
  box-shadow:
    0 28px 56px -16px rgba(232, 18, 46, 0.3),
    0 10px 20px -8px rgba(10, 10, 10, 0.12);
}

.journey-visual-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 900ms var(--ease-out);
}

.journey-card:hover .journey-visual-img {
  transform: scale(1.06);
}

/* Corner caption tag on visuals */
.journey-visual-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
}

/* Title + text below each visual */
.journey-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.journey-title em {
  font-style: italic;
  color: var(--color-red);
}

.journey-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4);
  max-width: 280px;
}

/* Proof chip at the bottom of each card */
.journey-proof {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: rgba(232, 18, 46, 0.08);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-top: auto;
}

.journey-proof-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-red);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* For tablet/mobile where the wavy line is hidden, add a vertical red arrow
   between cards as visual continuity */
.journey-divider-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  color: var(--color-red);
  opacity: 0.5;
}

@media (min-width: 1024px) {
  .journey-divider-vertical { display: none; }
}

.journey-divider-vertical svg {
  width: 28px;
  height: 28px;
  animation: bob 1.6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ============================================
   SHOWROOMS — interactive map + sidebar list (light theme)
   ============================================ */
.showrooms {
  background: var(--color-bg);
  color: var(--color-ink);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
  border-top: 1px solid var(--color-line);
}

@media (min-width: 768px) {
  .showrooms {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

.showrooms-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-12);
}

@media (min-width: 1024px) {
  .showrooms-header {
    grid-template-columns: 1fr auto;
  }
}

.showrooms .eyebrow { color: var(--color-ink-muted); }

.showrooms-title {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  margin-top: var(--space-4);
  color: var(--color-ink);
}

.showrooms-title em {
  font-style: italic;
  color: var(--color-red);
}

.showrooms-intro {
  color: var(--color-ink-muted);
  max-width: 380px;
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================
   Map + list split layout
   ============================================ */
.showrooms-map-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  overflow: hidden;
  min-height: 620px;
  box-shadow: 0 20px 48px -16px rgba(10, 10, 10, 0.08);
}

@media (min-width: 900px) {
  .showrooms-map-wrap {
    grid-template-columns: 360px 1fr;
    min-height: 620px;
  }
}

/* Left sidebar: scrollable list of showrooms */
.showrooms-list {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  max-height: 620px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 10, 10, 0.2) transparent;
  border-right: 1px solid var(--color-line);
}

@media (max-width: 899px) {
  .showrooms-list {
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }
}

.showrooms-list::-webkit-scrollbar {
  width: 6px;
}
.showrooms-list::-webkit-scrollbar-track {
  background: transparent;
}
.showrooms-list::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 10, 0.15);
  border-radius: 100px;
}
.showrooms-list::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 10, 10, 0.3);
}

.showrooms-list-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: var(--space-5) var(--space-6);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.showrooms-list-count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.showrooms-list-count strong {
  color: var(--color-red);
  font-weight: 700;
}

.showroom-card {
  background: transparent;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  position: relative;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--color-line-soft);
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 250ms var(--ease-out), border-left-color 250ms var(--ease-out);
}

.showroom-card:last-child { border-bottom: none; }

.showroom-card:hover {
  background: var(--color-bg-alt);
}

/* Active state — when user clicks a card or marker */
.showroom-card.is-active {
  background: rgba(232, 18, 46, 0.05);
  border-left-color: var(--color-red);
}

.showroom-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.showroom-city {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0;
}

.showroom-state {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--color-red);
  flex-shrink: 0;
}

.showroom-address {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-ink-muted);
  margin-top: 2px;
}

.showroom-phone {
  font-size: 12.5px;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.showroom-phone::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
}

/* ============================================
   Right pane: the actual Leaflet map
   ============================================ */
.showrooms-map {
  position: relative;
  min-height: 420px;
  background: var(--color-bg-alt);
}

@media (min-width: 900px) {
  .showrooms-map {
    min-height: 620px;
  }
}

/* Force Leaflet to take full size of its parent */
#showroomsMap {
  position: absolute;
  inset: 0;
  background: var(--color-bg-alt);
}

/* Light tiles need no filter — just let them render natively */
#showroomsMap .leaflet-tile-pane {
  filter: saturate(0.95);
}

/* Attribution control restyling — light theme, subtle */
#showroomsMap .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85) !important;
  color: rgba(10, 10, 10, 0.6) !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#showroomsMap .leaflet-control-attribution a {
  color: rgba(10, 10, 10, 0.8) !important;
}

/* Zoom control restyling — white buttons on light map */
#showroomsMap .leaflet-control-zoom {
  border: 1px solid rgba(10, 10, 10, 0.08) !important;
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.12) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

#showroomsMap .leaflet-control-zoom a {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--color-ink) !important;
  border: none !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 18px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 200ms, color 200ms;
}

#showroomsMap .leaflet-control-zoom a:hover {
  background: var(--color-red) !important;
  color: var(--color-white) !important;
}

#showroomsMap .leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

/* Custom marker — red teardrop pin with white inner circle + logo.
   Outer wrapper = teardrop (rotated square with border-radius).
   Inner wrapper = un-rotated content holder with the logo image. */
.showroom-marker {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2.5px solid var(--color-white);
  box-shadow: 0 4px 14px -2px rgba(232, 18, 46, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
  cursor: pointer;
  position: relative;
}

/* Inner holder counter-rotates so the logo inside stays upright.
   Bigger than before so the logo is more legible at small marker size. */
.showroom-marker-inner {
  width: 30px;
  height: 30px;
  background: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  overflow: hidden;
  padding: 2px;
}

/* The Cabinet ERA logo inside the white circle */
.showroom-marker-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Hover and "active" (clicked) — scale up with stronger glow */
.showroom-marker--active,
.showroom-marker:hover {
  transform: rotate(-45deg) scale(1.2);
  box-shadow: 0 8px 22px -4px rgba(232, 18, 46, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px rgba(232, 18, 46, 0.2);
  z-index: 10;
}

/* Union HQ pulse — pulsing halo that draws attention to the main location.
   Wrapper gets `.showroom-marker-wrap--hq` added on init. */
.showroom-marker-wrap--hq .showroom-marker::before,
.showroom-marker-wrap--hq .showroom-marker::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50% 50% 50% 0;
  border: 2px solid var(--color-red);
  opacity: 0;
  pointer-events: none;
  animation: markerPulse 2s ease-out infinite;
}

.showroom-marker-wrap--hq .showroom-marker::after {
  animation-delay: 1s;
}

@keyframes markerPulse {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Leaflet popup restyling */
#showroomsMap .leaflet-popup-content-wrapper {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  padding: 0;
  overflow: hidden;
}

#showroomsMap .leaflet-popup-content {
  margin: 0;
  padding: var(--space-5);
  min-width: 220px;
  font-family: var(--font-body);
  color: var(--color-ink);
}

#showroomsMap .leaflet-popup-tip {
  background: var(--color-white);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.popup-city {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 4px;
  color: var(--color-ink);
}

.popup-state {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--color-red);
  margin-bottom: var(--space-3);
  display: block;
}

.popup-address {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
}

.popup-phone {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: var(--space-3);
}

.popup-directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-red);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.popup-directions:hover {
  background: var(--color-red-dark);
  transform: translateY(-1px);
}

.popup-directions svg {
  width: 12px;
  height: 12px;
}

/* Close button */
#showroomsMap .leaflet-popup-close-button {
  color: rgba(10, 10, 10, 0.5) !important;
  font-size: 18px !important;
  padding: 6px 8px 0 0 !important;
}

#showroomsMap .leaflet-popup-close-button:hover {
  color: var(--color-red) !important;
}

/* Mobile tweaks */
@media (max-width: 899px) {
  .showrooms-list {
    max-height: 380px;
  }
  .showrooms-map {
    min-height: 420px;
  }
}

/* ============================================
   BRANDS
   ============================================ */
.brands {
  background: var(--color-bg);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.brands-label {
  text-align: center;
  margin-bottom: var(--space-10);
}

.brands-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-10) var(--space-16);
}

.brand-item {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--color-ink-soft);
  opacity: 0.55;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.brand-item:nth-child(even) { font-style: italic; }

.brand-item:hover {
  opacity: 1;
  color: var(--color-red);
}

/* ============================================
   TESTIMONIAL — video stories
   ============================================ */
.testimonial {
  background: var(--color-bg-alt);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.testimonial-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}

.testimonial-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--color-ink);
}

.testimonial-title em {
  font-style: italic;
  color: var(--color-red);
}

.testimonial-lead {
  font-size: 16px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.video-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: transform 400ms var(--ease-out), border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-red);
  box-shadow: 0 24px 50px -15px rgba(10, 10, 10, 0.18), 0 10px 20px -8px rgba(232, 18, 46, 0.18);
}

.video-card:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out), filter 400ms var(--ease-out);
}

.video-card:hover .video-thumb img {
  transform: scale(1.06);
  filter: brightness(0.78);
}

/* Play button overlay */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 18, 46, 0.95);
  color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 8px 24px -4px rgba(232, 18, 46, 0.6), 0 0 0 8px rgba(255, 255, 255, 0.15);
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
  z-index: 2;
}

.video-play svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

.video-card:hover .video-play {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 12px 32px -4px rgba(232, 18, 46, 0.7), 0 0 0 12px rgba(255, 255, 255, 0.2);
}

/* "Watch" pill in corner */
.video-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 10px;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  z-index: 2;
}

.video-meta {
  padding: var(--space-5) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.video-rating {
  color: var(--color-red);
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
}

.video-caption {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-ink);
  margin: 0;
}

.video-author {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  margin-top: var(--space-2);
}

/* Bottom proof bar — the Google rating */
.testimonial-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
  text-align: center;
}

@media (min-width: 640px) {
  .testimonial-proof {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-5);
  }
}

.testimonial-proof-stars {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.proof-stars {
  color: var(--color-red);
  font-size: 17px;
  letter-spacing: 2px;
}

.proof-rating {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.testimonial-proof-text {
  font-size: 13px;
  color: var(--color-ink-muted);
  letter-spacing: 0.01em;
}

.testimonial-proof-text strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* ============================================
   GOOGLE REVIEWS MARQUEE — full-width scroller below proof bar
   ============================================ */
.reviews-marquee {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: var(--space-10);
  overflow: hidden;
  padding: var(--space-4) 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.reviews-track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: reviewsMarquee 65s linear infinite;
  will-change: transform;
}

.reviews-marquee:hover .reviews-track {
  animation-play-state: paused;
}

@keyframes reviewsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.review-card {
  flex: 0 0 340px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 2px 8px -2px rgba(10, 10, 10, 0.04);
  transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.review-card:hover {
  border-color: #D8D4CC;
  box-shadow: 0 10px 24px -8px rgba(10, 10, 10, 0.12);
  transform: translateY(-2px);
}

.review-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.review-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.review-name {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.review-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-ink-muted);
  line-height: 1;
}

.review-google {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.review-stars {
  color: #FBBC04;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
}

.review-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin: 0;
  /* Limit to 4 lines so cards stay uniform height */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .review-card { flex: 0 0 280px; }
  .reviews-track { gap: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
}

/* ============================================
   VIDEO MODAL LIGHTBOX
   ============================================ */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}

.video-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.video-modal-frame {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
  transform: scale(0.95);
  transition: transform 400ms var(--ease-out);
}

.video-modal.is-open .video-modal-frame {
  transform: scale(1);
}

.video-modal-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-modal-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
  z-index: 10;
}

.video-modal-close:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  transform: scale(1.05);
}

.video-modal-close svg {
  width: 20px;
  height: 20px;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ============================================
   FAQ
   ============================================ */

@media (min-width: 1024px) {
}

@media (min-width: 1024px) {
}

/* ============================================
   FINAL CTA
   ============================================ */
.cta {
  background: var(--color-bg-dark);
  color: var(--color-white);
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(232, 18, 46, 0.25), transparent 55%);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}

.cta-eyebrow { color: rgba(255,255,255,0.5); }

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--color-white);
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
}

.cta-title em {
  font-style: italic;
  color: var(--color-red);
}

.cta-lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-10);
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.cta .btn--primary {
  background: var(--color-red);
  color: var(--color-white);
}

.cta .btn--primary:hover {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-white);
  box-shadow: 0 10px 30px -8px rgba(255,255,255,0.2);
}

/* ============================================
   FOOTER — light, rich, premium
   ============================================ */
.site-footer {
  position: relative;
  background: var(--color-bg);
  padding-top: var(--space-20);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-line);
  overflow: hidden;
}

/* Subtle red accent line at the very top of the footer */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-red) 30%,
    var(--color-red) 70%,
    transparent 100%
  );
  opacity: 0.8;
}

/* Ambient subtle pattern for texture */
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.04) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

/* ===== TOP MAIN GRID =====
   Brand (wide) + 4 column groups */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-line);
}

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

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-12);
  }
}

/* ===== BRAND COLUMN ===== */
.footer-brand { max-width: 420px; }

.footer-tagline {
  font-size: 14px;
  color: var(--color-ink-muted);
  line-height: 1.65;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.footer-tagline em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-red);
}

/* Small stats row under the tagline — reinforces trust */
.footer-stats {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-6);
}

.footer-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-stat-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-ink);
}

.footer-stat-num em {
  font-style: italic;
  color: var(--color-red);
}

.footer-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Social media icon row */
.footer-social {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-ink-soft);
  transition: all var(--transition-fast);
  background: var(--color-bg);
}

.footer-social-link:hover {
  color: var(--color-white);
  background: var(--color-red);
  border-color: var(--color-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(232, 18, 46, 0.45);
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.footer-social-link:hover svg {
  transform: scale(1.08);
}

/* ===== COLUMN TITLES ===== */
.footer-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}

.footer-col-title::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--color-red);
  flex-shrink: 0;
}

/* ===== LINK LISTS ===== */
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-ink-soft);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-links a::before {
  content: '';
  width: 0;
  height: 1px;
  background: var(--color-red);
  transition: width 240ms var(--ease-out);
}

.footer-links a:hover {
  color: var(--color-red);
  transform: translateX(2px);
}

.footer-links a:hover::before {
  width: 10px;
}

/* Showrooms column — city + state format */

/* Contact column styling */
.footer-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 14px;
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.footer-contact-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(232, 18, 46, 0.08);
  color: var(--color-red);
}

.footer-contact-icon svg { width: 14px; height: 14px; }

.footer-contact-item a {
  color: var(--color-ink);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.footer-contact-item a:hover { color: var(--color-red); }

.footer-contact-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 2px;
}

/* ===== BOTTOM BAR ===== */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
  }
}

.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.footer-bottom-badges {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.footer-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: 100px;
  color: var(--color-ink-muted);
}

.footer-badge-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
}

/* ============================================
   FLOATING ACTIONS — right-edge dock (desktop)
   ============================================ */
.fab-dock {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(calc(100% - 48px));
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: transform 400ms var(--ease-out), opacity 300ms ease, visibility 300ms ease;
  pointer-events: none;
}

/* Show after scrolling a bit */
.fab-dock.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Hide entirely on mobile — mobile-sticky bar already covers the need */
@media (max-width: 1023px) {
  .fab-dock { display: none; }
}

/* Individual FAB — pill tab peeking from the edge, expands on hover */
.fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 14px 16px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 12px 0 0 12px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(0);
  transition:
    transform 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out),
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
  box-shadow: -8px 10px 24px -12px rgba(10, 10, 10, 0.25);
}

.fab:hover {
  transform: translateX(-4px);
  box-shadow: -14px 16px 30px -12px rgba(10, 10, 10, 0.35);
}

.fab-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.fab-icon svg {
  width: 100%;
  height: 100%;
}

.fab-text {
  display: inline-block;
  line-height: 1;
}

/* Primary — red, calls attention */
.fab--primary {
  background: var(--color-red);
  color: var(--color-white);
}

.fab--primary:hover {
  background: var(--color-red-dark);
}

/* Secondary — dark, bilingual signal */
.fab--secondary {
  background: var(--color-ink);
  color: var(--color-white);
}

.fab--secondary:hover {
  background: #000;
}

/* Tiny pulsing accent on secondary to hint bilingual availability */
.fab--secondary::before {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.3);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ============================================
   MOBILE STICKY BAR
   ============================================ */
.mobile-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--color-bg-dark);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-2);
  transform: translateY(100%);
  transition: transform var(--transition);
  box-shadow: 0 -10px 40px -10px rgba(0,0,0,0.2);
}

.mobile-sticky.visible { transform: translateY(0); }

@media (min-width: 1024px) { .mobile-sticky { display: none; } }

.mobile-sticky-btn {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 100px;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.mobile-sticky-btn--call {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.25);
}

.mobile-sticky-btn--quote {
  background: var(--color-red);
  color: var(--color-white);
  font-weight: 600;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   UTILITIES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1023px) {
  .site-footer { padding-bottom: 100px; }
}

/* Tablet + mobile responsive for hero */
@media (max-width: 1023px) {
  .hero-kitchen-bg::after {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0.55) 50%,
      rgba(0,0,0,0.7) 100%
    );
  }
}
/* ============================================
   FLOATING ACTION BUTTONS — right side, desktop
   ============================================ */
.fab-stack {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-6);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .fab-stack {
    bottom: 50%;
    transform: translateY(50%);
    gap: 14px;
  }
}

/* Hide FABs on mobile — the existing mobile-sticky bar covers this already */
@media (max-width: 1023px) {
  .fab-stack { display: none; }
}

.fab {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0;
  border-radius: 100px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  max-width: 52px;
  transition: max-width 360ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 260ms ease,
              transform 220ms ease,
              background 200ms ease;
  box-shadow: 0 10px 24px -8px rgba(10, 10, 10, 0.3),
              0 2px 6px -2px rgba(10, 10, 10, 0.2);
  border: 1px solid transparent;
}

.fab:hover,
.fab:focus-visible {
  max-width: 260px;
  transform: translateX(-2px);
  box-shadow: 0 16px 32px -10px rgba(10, 10, 10, 0.4),
              0 4px 10px -2px rgba(10, 10, 10, 0.25);
}

.fab-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fab-icon svg {
  width: 20px;
  height: 20px;
}

.fab-label {
  display: inline-flex;
  align-items: center;
  padding-right: 20px;
  padding-left: 4px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 240ms ease 80ms, transform 240ms ease 80ms;
}

.fab:hover .fab-label,
.fab:focus-visible .fab-label {
  opacity: 1;
  transform: translateX(0);
}

.fab-label strong {
  font-weight: 600;
  margin-left: 5px;
}

/* Primary variant — red, attention-grabbing */
.fab--primary {
  background: var(--color-red);
  color: var(--color-white);
}

.fab--primary:hover {
  background: var(--color-red-dark);
}

/* Subtle pulsing ring on primary to draw the eye */
.fab--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  box-shadow: 0 0 0 0 rgba(232, 18, 46, 0.5);
  animation: fabPulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}

.fab--primary:hover::before,
.fab--primary:focus-visible::before {
  animation: none;
}

@keyframes fabPulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 18, 46, 0.45); }
  70% { box-shadow: 0 0 0 16px rgba(232, 18, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 18, 46, 0); }
}

/* Spanish variant — dark, friendly */
.fab--es {
  background: var(--color-ink);
  color: var(--color-white);
}

.fab--es:hover {
  background: #000;
}

/* ============================================
   SPANISH BANNER — shown when ?lang=es is present
   ============================================ */
.lang-banner {
  position: fixed;
  top: calc(64px + var(--space-4));
  right: var(--space-5);
  z-index: 95;
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 340px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-red);
  border-radius: 12px;
  box-shadow: 0 20px 40px -12px rgba(10, 10, 10, 0.2);
}

.lang-banner.is-visible {
  display: flex;
  animation: langBannerIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes langBannerIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.lang-banner-flag {
  flex-shrink: 0;
  font-size: 26px;
  line-height: 1;
  margin-top: 2px;
}

.lang-banner-body {
  flex: 1;
  min-width: 0;
}

.lang-banner-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 4px;
}

.lang-banner-title em {
  font-style: italic;
  color: var(--color-red);
}

.lang-banner-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2);
}

.lang-banner-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-red);
  text-decoration: none;
}

.lang-banner-phone:hover {
  text-decoration: underline;
}

.lang-banner-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-ink-muted);
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, color 200ms ease;
}

.lang-banner-close:hover {
  background: var(--color-bg-alt);
  color: var(--color-ink);
}

.lang-banner-close svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 640px) {
  .lang-banner {
    top: auto;
    bottom: calc(var(--space-6) + 80px);
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }
}

/* Hide FAB when lightbox is open */
body:has(.sg-lightbox.is-open) .fab-stack,
body:has(.sg-lightbox.is-open) .lang-banner { display: none; }

/* =============================================================================
   ============================================================================= 
   MASTER PAGE EKLERI
   -----------------------------------------------------------------------------
   Bu bölümün altındaki tüm CSS, daha önce HTML sayfaların içinde <style>
   tag'leri arasında inline olarak duruyordu. Master page'e geçişte tek bir
   yerden yönetilmesi için buraya taşındı. Sayfalarda artık inline <style>
   kalmamalıdır - sadece bu dosya yüklenir.
   =============================================================================
   ============================================================================= */

/* =============================================================================
   MASTER · FLOATING CORNER CTA (sağ alt yüzen butonlar: $500 Off, Contact, ES bayrağı)
   - Sayfanın her yerinde sabit konumda durur, scroll ile birlikte kalmaz.
   - Mobilde alt-tam-genişlik bar olur.
   ============================================================================= */

/* Eski yüzen varyantları gizle - duplicate olmasın */
.fab-stack, .fab-dock, .side-tabs { display: none !important; }

.corner-cta {
  position: fixed;
  right: 20px;
  bottom: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  z-index: 9000;
}
.corner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(10,10,10,0.22), 0 2px 6px rgba(10,10,10,0.12);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255,255,255,0.1);
}
.corner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(10,10,10,0.28), 0 4px 10px rgba(10,10,10,0.14);
}
.corner-btn--offer { background: #E8122E; color: #FFFFFF; }
.corner-btn--contact { background: #0A0A0A; color: #FFFFFF; }
.corner-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0;
}
.corner-btn-icon svg { width: 100%; height: 100%; color: #FFFFFF; }
.corner-btn-text { line-height: 1; }

/* Bayrak butonu - küçük kare */
.corner-btn--flag {
  padding: 0 !important;
  width: 46px;
  height: 46px;
  background: #FFFFFF !important;
  border: 1px solid #EAE6DE !important;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto !important;
}
.corner-btn--flag:hover {
  border-color: #C60B1E !important;
}
.corner-flag {
  width: 28px;
  height: auto;
  display: block;
}

/* Mobil: eski sticky barı gizle, tam alt genişliği kapla */
@media (max-width: 768px) {
  .mobile-sticky { display: none !important; }

  .corner-cta {
    right: 10px;
    left: 10px;
    bottom: 10px;
    gap: 8px;
    justify-content: stretch;
  }
  .corner-btn {
    flex: 1;
    padding: 13px 12px;
    font-size: 13px;
    border-radius: 10px;
    gap: 6px;
    justify-content: center;
  }
  .corner-btn-icon { width: 15px; height: 15px; }

  .corner-btn--flag {
    width: 44px;
    height: 44px;
    flex: 0 0 44px !important;
  }
}

/* =============================================================================
   MASTER · HEADER MOBILE GORUNUM
   - Mobilde header'da sadece logo + hamburger kalır.
   - Telefon link'i ve quote butonu gizlenir ki logo nefes alsın.
   ============================================================================= */
@media (max-width: 768px) {
  .site-header .header-phone { display: none !important; }
  .site-header .header-actions .btn--primary { display: none !important; }
  /* Sadece menu toggle + logo kalır mobilde */
}
@media (max-width: 480px) {
  .site-header .header-actions { gap: 6px !important; }
}

/* =============================================================================
   MASTER · FORM VALIDATION (hata durumlari ve mesajlar)
   - .field-input.is-invalid -> kirmizi border + arkaplan
   - .field-input.is-valid -> yesil border
   - .field-error -> input altinda kucuk hata mesaji
   - .form-summary-error -> form ustunde toplu hata uyarisi
   ============================================================================= */
.field {
  position: relative;
}

.field-input.is-invalid {
  border-color: var(--color-red) !important;
  background-color: rgba(232, 18, 46, 0.03);
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.08);
}

.field-input.is-valid {
  border-color: #1a8a3c !important;
}

.field-error {
  display: none;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-red);
  line-height: 1.4;
  align-items: center;
  gap: 5px;
}

.field-error.is-visible {
  display: flex;
  animation: errorSlide 200ms ease-out;
}

.field-error svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

@keyframes errorSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-summary-error {
  display: none;
  margin-bottom: var(--space-4);
  padding: 12px 16px;
  background: rgba(232, 18, 46, 0.06);
  border: 1px solid rgba(232, 18, 46, 0.25);
  border-radius: 8px;
  color: var(--color-red);
  font-size: 13px;
  font-weight: 500;
  align-items: center;
  gap: 8px;
}

.form-summary-error.is-visible {
  display: flex;
}

.form-summary-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* =============================================================================
   ANASAYFA OZEL · BENEFIT CARD (avantaj kartlari - sol metin, sag resim)
   - Kart icinde sag tarafta resim, sol tarafta yazi.
   - Resim ile yazi arasinda yumusak gradyan gecisi var.
   ============================================================================= */
/* =========================================================
   BENEFIT CARD — text left-aligned, balanced image
   ========================================================= */
.benefit-card {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  min-height: 120px !important;
}

/* Image: takes right 40% (wider than before) */
.benefit-card-bg {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 40% !important;
  overflow: hidden;
}
.benefit-card-bg-img {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Soft fade on the LEFT edge of the image blending into dark text area */
.benefit-card-bg::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  background: linear-gradient(90deg, rgba(10,10,10,1) 0%, rgba(10,10,10,0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Text area: left-aligned, flush to left edge */
.benefit-card-content {
  position: relative !important;
  z-index: 3 !important;
  width: 60% !important;
  padding: 24px 20px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  min-height: 120px !important;
  background: transparent;
}
.benefit-title {
  margin: 0 !important;
  color: #FFFFFF !important;
  line-height: 1.22 !important;
  text-align: left !important;
  width: 100% !important;
}

/* Mobile */
@media (max-width: 640px) {
  .benefit-card { min-height: 104px !important; }
  .benefit-card-bg { width: 38% !important; }
  .benefit-card-content {
    width: 62% !important;
    padding: 16px 14px 16px 18px !important;
    min-height: 104px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .benefit-title { text-align: left !important; }
}

/* Very small screens */
@media (max-width: 380px) {
  .benefit-card-bg { width: 36% !important; }
  .benefit-card-content {
    width: 64% !important;
    padding: 14px 10px 14px 14px !important;
  }
}

/* =============================================================================
   ANASAYFA OZEL · HERO MOBILE (mobilde hero icerigi ortali, resim yakinlasmis)
   ============================================================================= */
/* =========================================================
   HERO — mobile only: centered content + sensible image zoom
   ========================================================= */
@media (max-width: 768px) {
  .hero-kitchen-bg .hero-slide,
  .hero-slide {
    background-size: cover !important;
    background-position: center 30% !important;
  }
  .hero-content {
    text-align: center !important;
    align-items: center !important;
  }
  .hero-eyebrow {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-title,
  .hero .display {
    text-align: center !important;
  }
  .hero-lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-badges {
    justify-content: center !important;
    align-items: center !important;
  }
  .hero-proof {
    justify-content: center !important;
  }
  .proof-item {
    text-align: center !important;
    align-items: center !important;
  }
}
@media (max-width: 480px) {
  .hero-kitchen-bg .hero-slide,
  .hero-slide {
    background-position: center 35% !important;
  }
}

/* =============================================================================
   ABOUT SAYFASI OZEL · sayfa hero, story, timeline, founders, locations vs.
   ============================================================================= */
/* ============================================
   ABOUT PAGE — specific overrides
   ============================================ */

.page-hero {
  position: relative;
  padding-top: calc(64px + var(--space-20));
  padding-bottom: var(--space-16);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at center, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 20%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -100px;
  width: 500px;
  height: 500px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(232, 18, 46, 0.1) 0%, rgba(232, 18, 46, 0) 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.page-hero-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(232, 18, 46, 0.08);
  border: 1px solid rgba(232, 18, 46, 0.2);
  border-radius: 100px;
  margin-bottom: var(--space-6);
  color: var(--color-red);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.2);
  animation: pulse-dot 2s ease-in-out infinite;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-ink);
  margin-bottom: var(--space-6);
}

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

.page-hero-lead {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-width: 580px;
  margin: 0 auto;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.breadcrumb a {
  color: var(--color-ink-muted);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover { color: var(--color-red); }

.breadcrumb span[aria-current="page"] { color: var(--color-ink); }

.breadcrumb-sep { opacity: 0.4; }

/* ============================================
   STORY / INTRO
   ============================================ */
.story {
  padding: var(--space-24) 0;
  background: var(--color-bg);
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

@media (min-width: 1024px) {
  .story-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

.story-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(10, 10, 10, 0.2);
}

.story-visual-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.story-visual-tag {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  padding: 10px 16px;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(12px);
  color: var(--color-white);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.story-visual-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
}

.story-content {
  max-width: 520px;
}

.story-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-ink);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.story-title em {
  font-style: italic;
  color: var(--color-red);
}

.story-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}

.story-text strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* ============================================
   TIMELINE
   ============================================ */
.timeline {
  padding: var(--space-24) 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.timeline-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}

.timeline-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.timeline-title em {
  font-style: italic;
  color: var(--color-red);
}

.timeline-lead {
  font-size: 15px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

.timeline-track {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

.timeline-track::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 32px;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-red) 8%,
    var(--color-red) 92%,
    transparent 100%
  );
}

@media (min-width: 768px) {
  .timeline-track::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

.timeline-item {
  position: relative;
  padding-left: 80px;
  padding-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .timeline-item {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    padding-left: 0;
    padding-bottom: var(--space-8);
    align-items: flex-start;
  }

  .timeline-item:nth-child(even) .timeline-content {
    grid-column: 3;
    text-align: left;
    padding-left: var(--space-8);
  }

  .timeline-item:nth-child(odd) .timeline-content {
    grid-column: 1;
    text-align: right;
    padding-right: var(--space-8);
  }

  .timeline-item:nth-child(even) .timeline-dot-wrap { grid-column: 2; }
  .timeline-item:nth-child(odd) .timeline-dot-wrap { grid-column: 2; }
}

.timeline-dot-wrap {
  position: absolute;
  top: 0;
  left: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

@media (min-width: 768px) {
  .timeline-dot-wrap {
    position: static;
    margin: 0 auto;
  }
}

.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 4px var(--color-bg-alt), 0 0 0 6px rgba(232, 18, 46, 0.3);
  position: relative;
}

.timeline-content {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: var(--space-5) var(--space-6);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.timeline-content:hover {
  border-color: var(--color-red);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(232, 18, 46, 0.2);
}

.timeline-year {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  color: var(--color-red);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.timeline-heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.timeline-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-ink-muted);
}

/* ============================================
   STATS BAND
   ============================================ */
.stats-band {
  padding: var(--space-24) 0;
  background: var(--color-bg-dark);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(232, 18, 46, 0.2) 0%, rgba(232, 18, 46, 0) 50%);
  pointer-events: none;
}

.stats-band-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10) var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

@media (min-width: 768px) {
  .stats-band-grid { grid-template-columns: repeat(4, 1fr); }
}

.stats-band-item {
  text-align: center;
  position: relative;
}

.stats-band-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.stats-band-num em {
  font-style: italic;
  color: var(--color-red);
}

.stats-band-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* ============================================
   VALUES
   ============================================ */
.values {
  padding: var(--space-24) 0;
  background: var(--color-bg);
}

.values-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}

.values-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.values-title em {
  font-style: italic;
  color: var(--color-red);
}

.values-lead {
  font-size: 15px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}

.value-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: var(--space-8);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden;
}

.value-card:hover {
  border-color: var(--color-red);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -16px rgba(232, 18, 46, 0.22);
}

.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-out);
}

.value-card:hover::before { transform: scaleX(1); }

.value-card-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-red);
  margin-bottom: var(--space-5);
}

.value-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: var(--space-3);
  color: var(--color-ink);
}

.value-card-title em {
  font-style: italic;
  color: var(--color-red);
}

.value-card-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-ink-soft);
}

/* ============================================
   BRANDS / PARTNERSHIPS
   ============================================ */
.partners {
  padding: var(--space-20) 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}

.partners-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-8);
}

.partners-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  max-width: 1100px;
  margin: 0 auto;
}

.partner-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  letter-spacing: -0.01em;
  color: var(--color-ink-soft);
  opacity: 0.55;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.partner-name:nth-child(even) { font-style: italic; }

.partner-name:hover {
  opacity: 1;
  color: var(--color-red);
}

/* =============================================================================
   PROJECTS SAYFASI OZEL · proje galerisi, filtreler, lightbox vs.
   ============================================================================= */
/* ============================================
   PROJECTS PAGE — specific overrides
   ============================================ */

.page-hero {
  position: relative;
  padding-top: calc(64px + var(--space-20));
  padding-bottom: var(--space-16);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at center, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 20%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 18, 46, 0.12) 0%, rgba(232, 18, 46, 0) 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.page-hero-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(232, 18, 46, 0.08);
  border: 1px solid rgba(232, 18, 46, 0.2);
  border-radius: 100px;
  margin-bottom: var(--space-6);
  color: var(--color-red);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.2);
  animation: pulse-dot 2s ease-in-out infinite;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-ink);
  margin-bottom: var(--space-6);
}

/* Desktop: single line */
@media (min-width: 769px) {
  .page-hero-title {
    white-space: nowrap;
  }
  .page-hero-container {
    max-width: 1100px;
  }
}

/* Mobile: allow wrap */
@media (max-width: 768px) {
  .page-hero-title {
    white-space: normal;
  }
}

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

.page-hero-lead {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-width: 580px;
  margin: 0 auto;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.breadcrumb a {
  color: var(--color-ink-muted);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover { color: var(--color-red); }

.breadcrumb span[aria-current="page"] { color: var(--color-ink); }

.breadcrumb-sep { opacity: 0.4; }

/* ============================================
   PROJECTS GRID — masonry-style
   ============================================ */
.projects-main {
  padding: var(--space-12) 0 var(--space-24);
  background: var(--color-bg);
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 1400px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
}

.project-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 400ms var(--ease-out), border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-red);
  box-shadow: 0 20px 40px -16px rgba(232, 18, 46, 0.22);
}

.project-card.is-hidden {
  display: none;
}

.project-card-media {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--color-bg-alt);
  overflow: hidden;
}

.project-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 700ms var(--ease-out);
}

.project-card:hover .project-card-img {
  transform: scale(1.05);
}

.project-card-zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

.project-card:hover .project-card-zoom {
  opacity: 1;
  transform: scale(1);
}

.project-card-zoom svg { width: 14px; height: 14px; }

.project-card-body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-ink);
}

.project-card-title em {
  font-style: italic;
  color: var(--color-red);
}

.project-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-ink-muted);
}

.project-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.project-card-meta-item svg {
  width: 12px;
  height: 12px;
  color: var(--color-red);
}

.project-card-meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-ink-muted);
  opacity: 0.4;
}

/* Empty state */
.projects-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16);
  color: var(--color-ink-muted);
  font-size: 15px;
  display: none;
}

.projects-empty.is-visible { display: block; }

/* ============================================
   LIGHTBOX — fullscreen image only
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.is-open {
  display: flex;
  opacity: 1;
}
.lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-img {
  max-width: 95vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 10001;
  padding: 0;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(90deg);
}
.lightbox-close svg {
  width: 20px;
  height: 20px;
}
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 10001;
  padding: 0;
}
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.22);
}
.lightbox-nav--prev { left: 20px; }
.lightbox-nav--next { right: 20px; }
.lightbox-nav svg {
  width: 24px;
  height: 24px;
}
.lightbox-counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  z-index: 10001;
  font-variant-numeric: tabular-nums;
}
body.lightbox-open { overflow: hidden; }

@media (max-width: 768px) {
  .lightbox { padding: 10px; }
  .lightbox-img { max-width: 100vw; max-height: 75vh; }
  .lightbox-nav {
    width: 44px;
    height: 44px;
  }
  .lightbox-nav--prev { left: 8px; }
  .lightbox-nav--next { right: 8px; }
  .lightbox-nav svg { width: 20px; height: 20px; }
  .lightbox-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
}

/* Hide filter bar on mobile */
@media (max-width: 768px) {
}

/* =============================================================================
   CONTACT SAYFASI OZEL · iletisim formu, harita, lokasyon kartlari vs.
   ============================================================================= */
/* ============================================
   CONTACT PAGE — specific overrides
   ============================================ */

/* Page hero — compact, brand-consistent */
.page-hero {
  position: relative;
  padding-top: calc(64px + var(--space-20));
  padding-bottom: var(--space-16);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at center, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 20%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: -150px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 18, 46, 0.12) 0%, rgba(232, 18, 46, 0) 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.page-hero-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(232, 18, 46, 0.08);
  border: 1px solid rgba(232, 18, 46, 0.2);
  border-radius: 100px;
  margin-bottom: var(--space-6);
  color: var(--color-red);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.2);
  animation: pulse-dot 2s ease-in-out infinite;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-ink);
  margin-bottom: var(--space-6);
}

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

/* Rotating word (hero) */
.rotate-word {
  display: inline-block;
  position: relative;
  min-width: 1ch;
  transition: opacity 350ms ease, transform 350ms ease;
  will-change: opacity, transform;
}

/* Promo pill above form title */
.promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(232, 18, 46, 0.08);
  border: 1px solid rgba(232, 18, 46, 0.2);
  border-radius: 100px;
  margin-bottom: var(--space-4);
  color: var(--color-red);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.promo-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.2);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Rotating full line (form title) */
.rotate-line {
  display: block;
  min-height: 1.2em;
  transition: opacity 400ms ease, transform 400ms ease;
  will-change: opacity, transform;
}

.page-hero-lead {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-width: 580px;
  margin: 0 auto;
}

/* Breadcrumb above title */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.breadcrumb a {
  color: var(--color-ink-muted);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover { color: var(--color-red); }

.breadcrumb span[aria-current="page"] { color: var(--color-ink); }

.breadcrumb-sep { opacity: 0.4; }

/* ============================================
   CONTACT GRID — form + quick-connect
   ============================================ */
.contact-main {
  padding: var(--space-20) 0 var(--space-16);
  background: var(--color-bg);
}

/* Top row: form + map side by side, equal height */
.contact-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .contact-top {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-8);
    align-items: stretch;
  }
}

/* Mobile: unwrap .contact-top so its children can reorder with the info strip.
   Order: form → info strip → map */
@media (max-width: 1023px) {
  .contact-main .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .contact-top {
    display: contents;
  }
  .contact-form-card { order: 1; }
  .contact-info-strip { order: 2; }
  .contact-map-card { order: 3; }
}

/* Left panel — the form */
.contact-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: var(--space-8);
  box-shadow: 0 20px 60px -20px rgba(10, 10, 10, 0.08);
}

@media (min-width: 768px) {
  .contact-form-card { padding: var(--space-10); }
}

.contact-form-head {
  margin-bottom: var(--space-8);
}

.contact-form-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.contact-form-title em {
  font-style: italic;
  color: var(--color-red);
}

.contact-form-sub {
  font-size: 14px;
  color: var(--color-ink-muted);
  line-height: 1.5;
}

.contact-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .contact-field-row { grid-template-columns: 1fr 1fr; }
}

.contact-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-textarea {
  min-height: 110px;
  resize: vertical;
  font-family: inherit;
}

/* Embedded map — matches form height on desktop */
.contact-map-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: 0 20px 60px -20px rgba(10, 10, 10, 0.08);
  background: var(--color-bg-alt);
  min-height: 420px;
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .contact-map-card {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
}

.contact-map-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.15) contrast(0.98);
}

.contact-map-pin {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  box-shadow: 0 6px 16px -6px rgba(10, 10, 10, 0.15);
  pointer-events: none;
}

.contact-map-pin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.22);
  animation: pulse-dot 2s ease-in-out infinite;
}

.contact-map-link {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: 0 6px 16px -6px rgba(10, 10, 10, 0.15);
  transition: all var(--transition-fast);
}

.contact-map-link:hover {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
  transform: translateY(-1px);
}

.contact-map-link svg {
  width: 13px;
  height: 13px;
}

/* Horizontal 4-card info strip (below form+map) */
.contact-info-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 1200px;
  margin: var(--space-8) auto 0;
}

@media (min-width: 768px) {
  .contact-info-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

.info-strip-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: var(--space-6) var(--space-5);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Decorative SVG background — sits behind content, faint by default */
.info-strip-deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-red);
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--transition-fast), transform 600ms cubic-bezier(.2,.6,.2,1);
}

/* Ensure content sits above the decoration */
.info-strip-card > .info-strip-icon,
.info-strip-card > .info-strip-label,
.info-strip-card > .info-strip-value {
  position: relative;
  z-index: 1;
}

.info-strip-card:hover .info-strip-deco {
  opacity: 0.22;
}

/* Address: gentle horizontal slide of map lines on hover */
.info-strip-card--address:hover .info-strip-deco {
  transform: translateX(-6px);
}

/* Call: subtle vertical breathing on hover */
.info-strip-card--call:hover .info-strip-deco {
  transform: scaleY(1.08);
}

/* Email: open-envelope feel */
.info-strip-card--email:hover .info-strip-deco {
  transform: translateY(-3px);
}

/* Hours: slow rotation on hover */
.info-strip-card--hours .info-strip-deco {
  transform-origin: center;
  transition: opacity var(--transition-fast), transform 3s linear;
}
.info-strip-card--hours:hover .info-strip-deco {
  transform: rotate(20deg);
}

a.info-strip-card:hover {
  border-color: var(--color-red);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(232, 18, 46, 0.18);
}

.info-strip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  color: var(--color-red);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

a.info-strip-card:hover .info-strip-icon {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}

.info-strip-icon svg {
  width: 17px;
  height: 17px;
}

.info-strip-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.info-strip-value {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.45;
  transition: color var(--transition-fast);
}

a.info-strip-card:hover .info-strip-value {
  color: var(--color-red);
}

.info-strip-card--static {
  cursor: default;
}

/* ============================================
   SHOWROOMS GRID (cards, not map)
   ============================================ */

@media (min-width: 640px) {
}

@media (min-width: 1024px) {
}

.showroom-card-item {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: var(--space-6);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 260px;
}

.showroom-card-item:hover {
  border-color: var(--color-red);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -16px rgba(232, 18, 46, 0.22);
}

.showroom-card-item--hq {
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
}

.showroom-card-item--hq:hover {
  border-color: var(--color-red);
}

.showroom-card-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: 100px;
}

.showroom-card-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-white);
}

.showroom-card-city {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-ink);
}

.showroom-card-item--hq .showroom-card-city { color: var(--color-white); }

.showroom-card-state {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--color-red);
  margin-bottom: var(--space-2);
}

.showroom-card-address {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.showroom-card-item--hq .showroom-card-address { color: rgba(255, 255, 255, 0.7); }

.showroom-card-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-fast);
}

.showroom-card-phone:hover { color: var(--color-red); }

.showroom-card-item--hq .showroom-card-phone {
  color: var(--color-white);
  border-top-color: rgba(255, 255, 255, 0.15);
}

.showroom-card-item--hq .showroom-card-phone:hover { color: var(--color-red); }

.showroom-card-phone::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
}

/* ============================================
   UNION HQ — big feature card
   ============================================ */
.hq-feature {
  padding: var(--space-16) 0 var(--space-24);
  background: var(--color-bg);
}

.hq-feature-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 30px 60px -20px rgba(10, 10, 10, 0.1);
}

@media (min-width: 900px) {
  .hq-feature-card {
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
  }
}

/* Left: photo with overlay tag */
.hq-feature-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hq-feature-media {
    aspect-ratio: auto;
  }
}

/* Slider: stacked fade slides with gentle Ken Burns zoom */
.hq-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1200ms ease, transform 6000ms ease-out;
  will-change: opacity, transform;
  z-index: 1;
}

.hq-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Slider dots */
.hq-slider-dots {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10, 10, 10, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 100px;
  z-index: 3;
}

.hq-slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hq-slider-dot:hover {
  background: rgba(255, 255, 255, 0.75);
}

.hq-slider-dot.is-active {
  background: var(--color-white);
  width: 22px;
  border-radius: 100px;
}

.hq-feature-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.1) 0%,
    rgba(10, 10, 10, 0) 50%,
    rgba(10, 10, 10, 0.3) 100%
  );
}

.hq-feature-tag {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(232, 18, 46, 0.95);
  backdrop-filter: blur(8px);
  color: var(--color-white);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hq-feature-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-white);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Right: info */
.hq-feature-info {
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .hq-feature-info {
    padding: var(--space-12) var(--space-10);
  }
}

.hq-feature-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-ink);
  margin-top: var(--space-3);
}

.hq-feature-title em {
  font-style: italic;
  color: var(--color-red);
}

.hq-feature-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-muted);
}

/* Perks grid (6 benefit tiles) */
.hq-perks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

@media (min-width: 520px) {
  .hq-perks {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-5);
  }
}

.hq-perk {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.hq-perk-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(232, 18, 46, 0.08);
  color: var(--color-red);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.hq-perk:hover .hq-perk-icon {
  background: var(--color-red);
  color: var(--color-white);
  transform: translateY(-2px);
}

.hq-perk-icon svg {
  width: 18px;
  height: 18px;
}

.hq-perk-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hq-perk-title {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.hq-perk-sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-ink-muted);
  line-height: 1.35;
}

.hq-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ============================================
   FORM VALIDATION — error states & messages
   ============================================ */
.field {
  position: relative;
}

.field-input.is-invalid {
  border-color: var(--color-red) !important;
  background-color: rgba(232, 18, 46, 0.03);
  box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.08);
}

.field-input.is-valid {
  border-color: #1a8a3c !important;
}

.field-error {
  display: none;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-red);
  line-height: 1.4;
  align-items: center;
  gap: 5px;
}

.field-error.is-visible {
  display: flex;
  animation: errorSlide 200ms ease-out;
}

.field-error svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

@keyframes errorSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Form-level summary error */
.form-summary-error {
  display: none;
  margin-bottom: var(--space-4);
  padding: 12px 16px;
  background: rgba(232, 18, 46, 0.06);
  border: 1px solid rgba(232, 18, 46, 0.25);
  border-radius: 8px;
  color: var(--color-red);
  font-size: 13px;
  font-weight: 500;
  align-items: center;
  gap: 8px;
}

.form-summary-error.is-visible {
  display: flex;
}

.form-summary-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Español banner — shown at top when ?lang=es */
.es-banner {
  position: relative;
  padding: 14px var(--space-6);
  background: linear-gradient(90deg, #C60B1E, #E8122E);
  color: var(--color-white);
  z-index: 5;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 400ms ease, opacity 300ms ease, padding 300ms ease, margin 300ms ease;
}

.es-banner.is-visible {
  max-height: 200px;
  opacity: 1;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-top: 64px; /* clear fixed header */
}

.es-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.es-banner-flag {
  flex-shrink: 0;
  width: 30px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.es-banner-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.es-banner-text {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.es-banner-text strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
}

.es-banner-text span {
  font-family: var(--font-body);
  font-size: 13px;
  opacity: 0.92;
}

.es-banner-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
  flex-shrink: 0;
}

.es-banner-call:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.3);
}

.es-banner-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, transform 200ms ease;
}

.es-banner-close:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: rotate(90deg);
}

.es-banner-close svg {
  width: 14px;
  height: 14px;
}

/* When banner visible, pull page-hero up closer */

/* =============================================================================
   THANK-YOU SAYFASI OZEL · tesekkur ekrani, iletisim paneli, harita vs.
   ============================================================================= */
  /* THANK YOU PAGE — inherits design tokens from styles.css */
  .ty-page { background: var(--color-bg); margin-top: 64px; overflow: hidden; }

  /* HERO */
  .ty-hero {
    position: relative;
    padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: radial-gradient(ellipse 1100px 600px at 50% -10%, rgba(232, 18, 46, 0.06), transparent 60%), var(--color-bg);
    text-align: center;
  }
  .ty-hero-container { max-width: 760px; margin: 0 auto; padding: 0 var(--space-6); position: relative; }
  .ty-success { position: relative; width: 92px; height: 92px; margin: 0 auto var(--space-6); }
  .ty-success-ring, .ty-success-ring-pulse { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--color-red); }
  .ty-success-ring-pulse { animation: ty-pulse 2s ease-out infinite; opacity: 0; }
  .ty-success-circle {
    position: absolute; inset: 10px; background: var(--color-red); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 32px -8px rgba(232, 18, 46, 0.4);
    animation: ty-pop 600ms cubic-bezier(.2,.8,.2,1.2) both;
  }
  .ty-success-check {
    width: 36px; height: 36px; color: var(--color-white);
    stroke-dasharray: 60; stroke-dashoffset: 60;
    animation: ty-draw 700ms ease-out 300ms forwards;
  }
  @keyframes ty-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes ty-draw { to { stroke-dashoffset: 0; } }
  @keyframes ty-pulse { 0% { transform: scale(0.95); opacity: 0.7; } 100% { transform: scale(1.55); opacity: 0; } }

  .ty-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: rgba(232, 18, 46, 0.08);
    border: 1px solid rgba(232, 18, 46, 0.18);
    border-radius: 100px;
    color: var(--color-red);
    font-family: var(--font-body); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: var(--space-5);
  }
  .ty-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-red);
    box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.2);
    animation: ty-pulse-dot 2s ease-in-out infinite;
  }
  @keyframes ty-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

  .ty-title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 7vw, 5rem);
    font-weight: 400; letter-spacing: -0.025em; line-height: 1.02;
    color: var(--color-ink); margin-bottom: var(--space-5);
  }
  .ty-title em { font-style: italic; color: var(--color-red); }
  .ty-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6;
    color: var(--color-ink-soft); max-width: 580px; margin: 0 auto;
  }
  .ty-lead strong { color: var(--color-ink); font-weight: 600; }

  /* CONTACT (right under hero) — info panel + map */
  .ty-contact { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); background: var(--color-bg); }
  .ty-contact-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
  @media (min-width: 768px) { }

  /* SECTION HEAD */
  .ty-section-head { text-align: center; margin-bottom: var(--space-12); }
  .ty-section-eyebrow {
    font-family: var(--font-body); font-size: 11px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--color-ink-muted); margin-bottom: var(--space-3); display: block;
  }
  .ty-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.5vw, 2.625rem);
    font-weight: 400; letter-spacing: -0.02em; line-height: 1.1;
    color: var(--color-ink);
  }
  .ty-section-title em { font-style: italic; color: var(--color-red); }

  /* TIMELINE */
  .ty-next {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  }
  .ty-next-container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); }
  .ty-timeline { display: grid; grid-template-columns: 1fr; gap: var(--space-5); position: relative; }
  @media (min-width: 768px) {
    .ty-timeline { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .ty-timeline::before {
      content: ''; position: absolute; top: 36px; left: 16.66%; right: 16.66%;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--color-line) 8%, var(--color-line) 92%, transparent);
      z-index: 0;
    }
  }
  .ty-step {
    position: relative; background: var(--color-white);
    border: 1px solid var(--color-line); border-radius: 16px;
    padding: var(--space-6) var(--space-5);
    text-align: center; z-index: 1;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  }
  .ty-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -16px rgba(10, 10, 10, 0.1);
    border-color: rgba(232, 18, 46, 0.3);
  }
  .ty-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--color-white); border: 1px solid var(--color-line);
    margin: 0 auto var(--space-5);
    font-family: var(--font-display); font-size: 1.5rem; font-style: italic;
    color: var(--color-red); position: relative;
  }
  .ty-step-num::after {
    content: ''; position: absolute; inset: -5px; border-radius: 50%;
    border: 1px solid rgba(232, 18, 46, 0.2);
  }
  .ty-step-time {
    font-family: var(--font-body); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-red); margin-bottom: var(--space-2);
  }
  .ty-step-title {
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
    letter-spacing: -0.015em; line-height: 1.2;
    color: var(--color-ink); margin-bottom: var(--space-3);
  }
  .ty-step-desc { font-size: 14px; line-height: 1.55; color: var(--color-ink-muted); }

  /* HQ MAP */
  .ty-hq-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
  @media (min-width: 1024px) { .ty-hq-layout { grid-template-columns: 0.85fr 1fr; gap: var(--space-8); align-items: stretch; } }

  .ty-hq-info {
    background: var(--color-white); border: 1px solid var(--color-line);
    border-radius: 16px; padding: var(--space-8);
    box-shadow: 0 20px 60px -20px rgba(10, 10, 10, 0.06);
    display: flex; flex-direction: column;
  }
  @media (min-width: 768px) { .ty-hq-info { padding: var(--space-10); } }

  .ty-hq-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: rgba(232, 18, 46, 0.08); border-radius: 100px;
    color: var(--color-red);
    font-family: var(--font-body); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    align-self: flex-start; margin-bottom: var(--space-5);
  }
  .ty-hq-pill-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-red);
    box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.2);
    animation: ty-pulse-dot 2s ease-in-out infinite;
  }
  .ty-hq-title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    font-weight: 400; letter-spacing: -0.02em; line-height: 1.1;
    color: var(--color-ink); margin-bottom: var(--space-3);
  }
  .ty-hq-title em { font-style: italic; color: var(--color-red); }
  .ty-hq-lead { font-size: 15px; line-height: 1.6; color: var(--color-ink-muted); margin-bottom: var(--space-6); }

  .ty-hq-list {
    list-style: none; padding: 0; margin: 0 0 var(--space-6) 0;
    display: flex; flex-direction: column; gap: var(--space-5);
    border-top: 1px solid var(--color-line-soft); padding-top: var(--space-5);
  }
  .ty-hq-item { display: flex; gap: var(--space-4); align-items: flex-start; }
  .ty-hq-item-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
    background: var(--color-bg-alt); border: 1px solid var(--color-line);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-red);
  }
  .ty-hq-item-icon svg { width: 17px; height: 17px; }
  .ty-hq-item-body { flex: 1; padding-top: 2px; }
  .ty-hq-item-label {
    display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-ink-muted); margin-bottom: 4px;
  }
  .ty-hq-item-value {
    display: block; font-family: var(--font-body);
    font-size: 15px; font-weight: 500; line-height: 1.45;
    color: var(--color-ink); text-decoration: none;
    transition: color var(--transition-fast);
  }
  a.ty-hq-item-value:hover { color: var(--color-red); }

  .ty-hq-directions {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 22px;
    background: var(--color-ink); color: var(--color-white);
    font-family: var(--font-body); font-size: 14px; font-weight: 600;
    letter-spacing: 0.01em; text-decoration: none; border-radius: 10px;
    transition: all var(--transition-fast); align-self: flex-start;
  }
  .ty-hq-directions:hover {
    background: var(--color-red);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(232, 18, 46, 0.4);
  }
  .ty-hq-directions svg { width: 14px; height: 14px; }

  .ty-hq-map {
    position: relative; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--color-line);
    box-shadow: 0 20px 60px -20px rgba(10, 10, 10, 0.08);
    background: var(--color-bg-alt);
    min-height: 380px; aspect-ratio: 4/3;
  }
  @media (min-width: 1024px) { .ty-hq-map { aspect-ratio: auto; min-height: 0; } }
  .ty-hq-map iframe {
    width: 100%; height: 100%; border: 0; display: block;
    filter: grayscale(0.15) contrast(0.98);
  }
  .ty-hq-map-pin {
    position: absolute; top: var(--space-4); left: var(--space-4);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--color-white); border: 1px solid var(--color-line);
    border-radius: 100px;
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-ink);
    box-shadow: 0 6px 16px -6px rgba(10, 10, 10, 0.15);
    pointer-events: none;
  }
  .ty-hq-map-pin-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-red);
    box-shadow: 0 0 0 3px rgba(232, 18, 46, 0.22);
    animation: ty-pulse-dot 2s ease-in-out infinite;
  }