/* =============================================================
   HARDWOOD DOOR & BEVEL  —  Light Luxury Design System
   Tokens · Typography · Components · Motion
   ============================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* Palette — light, luxurious, warm */
  --ivory:        #FAF6EE;   /* page background */
  --cream:        #F2EAD9;   /* card / panel */
  --bone:         #E8DEC8;   /* divider / muted surface */
  --linen:        #D9CDB5;   /* line / border */
  --sand:         #C7B791;   /* subtle accent */
  --gold:         #B08A4A;   /* primary accent */
  --gold-deep:    #8B6A3A;   /* deep accent / hover */
  --bronze:       #5E4728;   /* heaviest accent */
  --ink:          #1A1612;   /* primary text */
  --charcoal:     #2A2520;   /* alt text */
  --slate:        #5A5247;   /* secondary text */
  --mist:         #8A8175;   /* tertiary text */

  /* Glass */
  --glass-bg:     rgba(255, 252, 246, 0.72);
  --glass-line:   rgba(176, 138, 74, 0.18);

  /* Shadows — soft, multi-layer */
  --shadow-1: 0 1px 2px rgba(60, 40, 20, 0.04), 0 1px 1px rgba(60, 40, 20, 0.03);
  --shadow-2: 0 6px 18px -8px rgba(60, 40, 20, 0.12), 0 2px 4px rgba(60, 40, 20, 0.04);
  --shadow-3: 0 24px 50px -20px rgba(60, 40, 20, 0.18), 0 6px 12px rgba(60, 40, 20, 0.06);
  --shadow-4: 0 40px 90px -30px rgba(60, 40, 20, 0.25), 0 12px 24px rgba(60, 40, 20, 0.08);
  --shadow-gold: 0 12px 30px -12px rgba(176, 138, 74, 0.45);

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-2xl: 48px;

  /* Spacing */
  --pad-section: clamp(80px, 10vw, 160px);
  --pad-content: clamp(20px, 4vw, 64px);
  --max-w: 1440px;

  /* Type */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-door:   cubic-bezier(0.86, 0, 0.07, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 600ms;
  --t-cine: 900ms;
}

/* ---------- 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-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none; /* custom cursor */
}
@media (max-width: 1024px) { body { cursor: auto; } }
img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
@media (max-width: 1024px) { button, a { cursor: pointer; } }
input, textarea, select { font: inherit; }
ul, ol { list-style: none; }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: clamp(48px, 7vw, 112px); font-weight: 500; letter-spacing: -0.035em; }
h2 { font-size: clamp(36px, 4.5vw, 72px); }
h3 { font-size: clamp(28px, 3vw, 44px); }
h4 { font-size: clamp(22px, 2vw, 30px); }
h5 { font-size: clamp(18px, 1.4vw, 22px); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--gold);
}
.lede {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--slate);
  max-width: 62ch;
}
.text-mist { color: var(--mist); }
.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

/* ---------- LAYOUT HELPERS ---------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-content); }
.section { padding: var(--pad-section) 0; }
.section-tight { padding: calc(var(--pad-section) * 0.5) 0; }
.grid { display: grid; gap: 24px; }
.flex { display: flex; }
.center { display: flex; align-items: center; justify-content: center; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* ---------- HEADER (frosted glass, scroll-reactive) ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-content);
  background: rgba(250, 246, 238, 0.6);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              padding var(--t-base) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(250, 246, 238, 0.86);
  border-bottom-color: var(--glass-line);
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.brand-mark {
  width: 28px; height: 36px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-mark svg { width: 100%; height: 100%; }
.brand .amp { color: var(--gold); font-style: italic; padding: 0 4px; }
.nav { display: flex; align-items: center; gap: 36px; }
.nav a {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal);
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease-out);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--gold);
  transition: width var(--t-base) var(--ease-out);
}
.nav a:hover, .nav a.is-active { color: var(--gold); }
.nav a:hover::after, .nav a.is-active::after { width: 100%; }
.nav-cta {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  transition: all var(--t-base) var(--ease-out);
}
.nav-cta:hover { background: var(--ink); color: var(--ivory); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  position: relative;
  z-index: 60;
}
.nav-toggle span {
  width: 24px; height: 1px;
  background: var(--ink);
  display: block;
  position: relative;
  transition: transform var(--t-base) var(--ease-door);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1px;
  background: var(--ink);
  transition: transform var(--t-base) var(--ease-door), top var(--t-base) var(--ease-door);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .nav, .header-cta-wrap { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile {
    position: fixed; inset: 0;
    background: var(--ivory);
    z-index: 50;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out);
  }
  .nav-mobile.is-open { opacity: 1; pointer-events: auto; }
  .nav-mobile a {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--ink);
  }
  .nav-mobile a:hover { color: var(--gold); }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all var(--t-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--bronze); border-color: var(--bronze); transform: translateY(-2px); box-shadow: var(--shadow-3); }
.btn-gold {
  background: var(--gold);
  color: var(--ivory);
  border-color: var(--gold);
}
.btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--ivory); transform: translateY(-2px); }
.btn-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--ink);
  padding: 0;
  position: relative;
}
.btn-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.btn-link:hover::after { transform: scaleX(1); transform-origin: left; }
.btn-link .arrow {
  display: inline-block; transition: transform var(--t-base) var(--ease-out);
}
.btn-link:hover .arrow { transform: translateX(6px); }

/* ---------- CARD (with 3D tilt setup) ---------- */
.card {
  position: relative;
  background: var(--cream);
  border-radius: var(--r-xl);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  will-change: transform;
}
.card .card-image {
  position: relative; overflow: hidden;
  transform-style: preserve-3d;
}
.card .card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter var(--t-base) var(--ease-out);
  will-change: transform;
}
.card:hover .card-image img { transform: scale(1.06); }
.card::after {
  /* moving sheen */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 248, 230, 0.35), transparent 50%);
  opacity: 0; transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card .card-body { padding: 28px; transform: translateZ(30px); }
.card .card-title { font-family: var(--font-display); font-size: 28px; line-height: 1.1; margin-bottom: 8px; }
.card .card-meta { color: var(--slate); font-size: 14px; }

/* ---------- SECTION HEADERS ---------- */
.section-head { display: flex; flex-direction: column; gap: 18px; max-width: 780px; margin-bottom: 56px; }
.section-head.center { text-align: center; align-items: center; margin-left: auto; margin-right: auto; }
.section-head .eyebrow { margin-bottom: 4px; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 120px var(--pad-content) 60px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 240, 210, 0.6), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(216, 200, 168, 0.4), transparent 50%),
    var(--ivory);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero-copy { position: relative; z-index: 3; }
.hero-copy h1 {
  font-weight: 400;
  margin: 18px 0 28px;
}
.hero-copy h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.hero-copy .lede { margin-bottom: 40px; }
.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero CTAs — full-sized on every screen.
   On phones/tablets we stack the two buttons vertically and let
   each one stretch to the full width of the column so they stay
   tap-friendly and visually prominent. On desktop they sit side
   by side as before. */
.hero-cta-row .btn {
  flex: 0 1 auto;
  min-height: 52px;
}
@media (max-width: 720px) {
  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .hero-cta-row .btn {
    width: 100%;
    justify-content: center;
    padding: 18px 24px;
  }
}

.hero-stage {
  position: relative;
  height: 72vh;
  min-height: 540px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.door-scene {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-out);
}
.door-image-wrap {
  position: absolute;
  inset: 4% 4% 8% 4%;
  transform-style: preserve-3d;
  transform-origin: 32% 50%;
  transition: transform 1.2s var(--ease-door);
  will-change: transform;
}
.door-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  box-shadow:
    0 50px 80px -20px rgba(20, 14, 6, 0.45),
    0 20px 40px -10px rgba(20, 14, 6, 0.25);
  display: block;
}
.hero-stage.is-open .door-image-wrap {
  transform: perspective(1600px) rotateY(-28deg);
}
.hero-stage.is-open .door-image {
  box-shadow:
    0 60px 80px -10px rgba(20, 14, 6, 0.55),
    0 20px 40px -10px rgba(20, 14, 6, 0.25);
}

.hero-floor {
  position: absolute; left: 10%; right: 10%; bottom: -2%;
  height: 30px;
  background: linear-gradient(180deg, rgba(176, 138, 74, 0.3), transparent);
  filter: blur(20px);
}
.hero-shadow {
  position: absolute; left: 15%; right: 15%; bottom: 4%;
  height: 20px;
  background: radial-gradient(ellipse, rgba(60, 40, 20, 0.3), transparent 70%);
  filter: blur(15px);
}
.hero-floating {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.hero-floating.tag-tl { top: 14%; left: 6%; }
.hero-floating.tag-br { bottom: 18%; right: 4%; }
.glass-pill {
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  padding: 10px 18px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  font-weight: 600;
}
.glass-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(176, 138, 74, 0.2); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

.hero-hint {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--slate);
  display: flex; align-items: center; gap: 12px;
  z-index: 4;
}
.hero-hint .line { width: 40px; height: 1px; background: var(--linen); }

/* ---------- TRUST STRIP ---------- */
.trust-strip {
  border-top: 1px solid var(--linen);
  border-bottom: 1px solid var(--linen);
  padding: 48px 0;
  background: var(--cream);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: center;
}
@media (max-width: 1024px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .trust-grid { grid-template-columns: 1fr; text-align: center; } }
.trust-item { text-align: center; padding: 0 12px; border-right: 1px solid var(--linen); }
.trust-item:last-child { border-right: 0; }
@media (max-width: 600px) { .trust-item { border-right: 0; border-bottom: 1px solid var(--linen); padding-bottom: 24px; } .trust-item:last-child { border-bottom: 0; } }
.trust-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  color: var(--gold);
  line-height: 1;
  font-weight: 500;
  font-feature-settings: 'lnum';
}
.trust-label {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--slate);
  margin-top: 10px;
}

/* ---------- BENTO GRID ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 240px;
  gap: 24px;
}
@media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } }
.bento-item { position: relative; border-radius: var(--r-xl); overflow: hidden; transform-style: preserve-3d; }
.bento-item .bento-img { position: absolute; inset: 0; }
.bento-item .bento-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.bento-item:hover .bento-img img { transform: scale(1.05); }
.bento-item .bento-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(20, 14, 6, 0.6) 100%);
  z-index: 1;
}
.bento-item .bento-content {
  position: absolute; left: 32px; right: 32px; bottom: 28px;
  z-index: 2;
  color: var(--ivory);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.bento-item .bento-content h3 { color: var(--ivory); font-size: 32px; line-height: 1.1; }
.bento-item .bento-content p { color: rgba(255, 252, 246, 0.85); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; }
.bento-item .bento-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 252, 246, 0.18);
  backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 252, 246, 0.3);
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.bento-item:hover .bento-icon { transform: translateX(4px) scale(1.05); background: var(--gold); border-color: var(--gold); }
.bento-item.size-1 { grid-column: span 3; grid-row: span 2; }
.bento-item.size-2 { grid-column: span 3; grid-row: span 1; }
.bento-item.size-3 { grid-column: span 2; grid-row: span 1; }
.bento-item.size-4 { grid-column: span 2; grid-row: span 2; }
.bento-item.size-5 { grid-column: span 2; grid-row: span 1; }
@media (max-width: 1024px) {
  .bento-item.size-1 { grid-column: span 2; grid-row: span 2; }
  .bento-item.size-2, .bento-item.size-3, .bento-item.size-4, .bento-item.size-5 { grid-column: span 2; grid-row: span 1; }
}

/* ---------- SPLIT (Why Us) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 1024px) { .split { grid-template-columns: 1fr; gap: 48px; } }
.split-media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--cream);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 30%), transparent 0%, rgba(20, 14, 6, 0.18) 100%);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.split-list { display: flex; flex-direction: column; gap: 0; }
.split-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--linen);
  align-items: flex-start;
}
.split-row:last-child { border-bottom: 1px solid var(--linen); }
.split-row .num {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold);
  line-height: 1;
  font-weight: 500;
}
.split-row h4 { margin-bottom: 8px; }
.split-row p { color: var(--slate); font-size: 15px; line-height: 1.6; }

/* ---------- TIMELINE (process) ---------- */
.timeline {
  position: relative;
  padding: 60px 0;
}
.timeline-line {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--linen);
  transform: translateX(-50%);
}
@media (max-width: 1024px) { .timeline-line { left: 24px; } }
.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px 0;
}
@media (max-width: 1024px) { .timeline-step { grid-template-columns: 48px 1fr; gap: 24px; } }
.timeline-step .step-marker {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 24px;
  z-index: 2;
  position: relative;
  transition: all var(--t-base) var(--ease-out);
}
.timeline-step:hover .step-marker {
  background: var(--gold);
  color: var(--ivory);
  transform: scale(1.08);
  box-shadow: 0 0 0 8px rgba(176, 138, 74, 0.18);
}
.timeline-step .step-content {
  background: var(--cream);
  padding: 32px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bone);
  transition: all var(--t-base) var(--ease-out);
}
.timeline-step .step-content:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--gold); }
.timeline-step:nth-child(odd) .step-content { grid-column: 1; text-align: right; }
.timeline-step:nth-child(even) .step-content { grid-column: 3; }
.timeline-step:nth-child(odd) .step-marker { grid-column: 2; }
.timeline-step:nth-child(even) .step-marker { grid-column: 2; }
.timeline-step:nth-child(odd) .step-spacer { grid-column: 3; }
.timeline-step:nth-child(even) .step-spacer { grid-column: 1; }
@media (max-width: 1024px) {
  .timeline-step .step-content, .timeline-step:nth-child(odd) .step-content, .timeline-step:nth-child(even) .step-content {
    grid-column: 2; text-align: left;
  }
  .timeline-step .step-marker, .timeline-step:nth-child(odd) .step-marker, .timeline-step:nth-child(even) .step-marker { grid-column: 1; }
  .timeline-step .step-spacer { display: none; }
}

/* ---------- TESTIMONIALS CAROUSEL (3D) ---------- */
.testimonial-stage {
  position: relative;
  perspective: 1200px;
  height: 480px;
  margin: 40px 0;
}
.testimonial-card {
  position: absolute; left: 50%; top: 50%;
  width: min(640px, 90%);
  transform: translate(-50%, -50%) rotateY(0) translateZ(0);
  background: var(--cream);
  border: 1px solid var(--bone);
  border-radius: var(--r-xl);
  padding: 48px;
  transition: transform 800ms var(--ease-door), opacity 600ms var(--ease-out);
  opacity: 0;
  pointer-events: none;
}
.testimonial-card.is-active { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) rotateY(0) translateZ(40px); }
.testimonial-card.is-prev { opacity: 0.4; transform: translate(calc(-50% - 80%), -50%) rotateY(35deg) translateZ(-80px); }
.testimonial-card.is-next { opacity: 0.4; transform: translate(calc(-50% + 80%), -50%) rotateY(-35deg) translateZ(-80px); }
.testimonial-card .quote-mark {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: var(--gold);
  font-style: italic;
  display: block;
  margin-bottom: -16px;
}
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 24px;
}
.testimonial-card blockquote em { color: var(--gold); font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 16px; }
.testimonial-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--bronze));
  display: flex; align-items: center; justify-content: center;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 22px;
}
.testimonial-meta .name { font-weight: 600; color: var(--ink); }
.testimonial-meta .role { color: var(--slate); font-size: 13px; }

.testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; }
.tc-btn {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--linen);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-base) var(--ease-out);
  color: var(--ink);
}
.tc-btn:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); transform: scale(1.05); }
.tc-dots { display: flex; gap: 8px; }
.tc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--linen);
  transition: all var(--t-base) var(--ease-out);
}
.tc-dot.is-active { background: var(--gold); width: 32px; border-radius: 4px; }

/* ---------- CTA BANNER ---------- */
.cta-banner {
  position: relative;
  padding: 100px 60px;
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, var(--ink), var(--charcoal));
  color: var(--ivory);
  overflow: hidden;
  text-align: center;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(176, 138, 74, 0.25), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(176, 138, 74, 0.18), transparent 50%);
  pointer-events: none;
}
.cta-banner::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(176, 138, 74, 0.05) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(176, 138, 74, 0.05) 0 1px, transparent 1px 80px);
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--ivory); margin-bottom: 16px; }
.cta-banner h2 em { color: var(--gold); font-style: italic; }
.cta-banner p { color: rgba(255, 252, 246, 0.78); margin-bottom: 40px; max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-banner .btn-row { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.cta-banner .btn-primary { background: var(--gold); color: var(--ivory); border-color: var(--gold); }
.cta-banner .btn-primary:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.cta-banner .btn-ghost { color: var(--ivory); border-color: var(--ivory); }
.cta-banner .btn-ghost:hover { background: var(--ivory); color: var(--ink); }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 252, 246, 0.7);
  padding: 100px 0 40px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { color: var(--ivory); }
.footer-brand .brand { color: var(--ivory); font-size: 16px; }
.footer-brand p { margin-top: 20px; color: rgba(255, 252, 246, 0.6); font-size: 14px; max-width: 32ch; }
.footer-col h5 { color: var(--ivory); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 20px; }
.footer-col a { display: block; font-size: 14px; padding: 6px 0; transition: color var(--t-fast) var(--ease-out); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 40px; border-top: 1px solid rgba(255, 252, 246, 0.1); flex-wrap: wrap; gap: 16px; }
.footer-bottom p { font-size: 12px; color: rgba(255, 252, 246, 0.5); }
.footer-bottom .socials { display: flex; gap: 12px; }
.footer-bottom .socials a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 252, 246, 0.2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-base) var(--ease-out);
}
.footer-bottom .socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }

/* ---------- CUSTOM CURSOR ---------- */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 12px; height: 12px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width 250ms var(--ease-out), height 250ms var(--ease-out), background 250ms var(--ease-out), transform 80ms linear;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transition: width 350ms var(--ease-out), height 350ms var(--ease-out), border-color 350ms var(--ease-out), transform 200ms var(--ease-out);
  transform: translate(-50%, -50%);
}
.cursor.is-hover { width: 28px; height: 28px; }
.cursor-ring.is-hover { width: 72px; height: 72px; border-color: var(--gold-deep); }
@media (max-width: 1024px) { .cursor, .cursor-ring { display: none; } }

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }
.reveal[data-delay="6"] { transition-delay: 480ms; }

.split-reveal-text {
  display: inline-block;
  overflow: hidden;
}
.split-reveal-text > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-out);
}
.split-reveal-text.in > span { transform: translateY(0); }

/* ---------- PAGE TRANSITION OVERLAY ---------- */
.page-transition {
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
}
.page-transition .pt-door {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
  transition: transform 800ms var(--ease-door);
}
.page-transition .pt-door.left { left: 0; transform: translateX(-101%); }
.page-transition .pt-door.right { right: 0; transform: translateX(101%); }
.page-transition .pt-bar {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 1px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.page-transition.is-leaving .pt-door { transform: translateX(0); }
.page-transition.is-leaving .pt-bar { opacity: 1; }
.page-transition.is-leaving .pt-bar { animation: pt-bar 800ms var(--ease-door); }
@keyframes pt-bar {
  0% { transform: translate(-50%, -50%) scaleX(0); }
  50% { transform: translate(-50%, -50%) scaleX(1); }
  100% { transform: translate(-50%, -50%) scaleX(0); }
}

/* ---------- SIGNATURE GOLD LINE ---------- */
.signature-line {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  width: 100%;
  margin: 80px auto;
  max-width: 600px;
  opacity: 0.6;
}

/* ---------- FORMS ---------- */
.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.form-row label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); font-weight: 600; }
.form-row input, .form-row textarea, .form-row select {
  padding: 14px 18px;
  border: 1px solid var(--linen);
  background: var(--ivory);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--font-body);
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--cream);
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- UTILITIES ---------- */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 64px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 40px; }
.text-center { text-align: center; }
.gold { color: var(--gold); }
.muted { color: var(--slate); }
.divider {
  display: inline-block;
  width: 60px; height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin: 0 16px;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .split-reveal-text > span { opacity: 1 !important; transform: none !important; }
}

/* =============================================================
   COVERFLOW CAROUSEL  —  The Collection showcase
   Used on home (The Collection) and portfolio (Featured Work)
   Items are absolutely positioned, transformed from --offset.
   ============================================================= */
:root {
  --cf-item-w: clamp(220px, 24vw, 320px);
  --cf-step:  clamp(190px, 20vw, 260px);
}

.coverflow {
  position: relative;
  width: 100%;
  padding: 56px 0 24px;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.coverflow:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
  border-radius: var(--r-lg);
}

.coverflow-stage {
  position: relative;
  width: 100%;
  height: clamp(420px, 54vw, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.coverflow-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Each item — square-ish, no 3D tilt, mirrors the bottom grid cards */
.coverflow-item {
  --offset: 0;
  --distance: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cf-item-w);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--linen);
  box-shadow: 0 18px 50px -22px rgba(20, 14, 6, 0.35);
  cursor: pointer;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--offset) * var(--cf-step)))
    scale(calc(1 - var(--distance) * 0.12));
  opacity: calc(1 - var(--distance) * 0.35);
  z-index: calc(50 - var(--distance) * 10);
  transition:
    transform 380ms var(--ease-out),
    opacity 260ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    border-color 220ms var(--ease-out);
  will-change: transform, opacity;
}
.coverflow-item.is-hidden { display: none; }
.coverflow-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out), filter 500ms var(--ease-out);
  will-change: transform;
}
.coverflow-item:hover > img { transform: scale(1.05); }

/* Bottom darkening on side items to add depth */
.coverflow-item::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20, 14, 6, 0.55) 100%);
  opacity: calc(0.6 + var(--distance) * 0.4);
  pointer-events: none;
  transition: opacity 500ms var(--ease-out);
  z-index: 1;
}

/* Active (center) item — gold hairline, sharper shadow, soft inner glow */
.coverflow-item.is-active {
  border-color: var(--gold);
  box-shadow:
    0 36px 80px -22px rgba(20, 14, 6, 0.55),
    0 0 0 1px var(--gold),
    inset 0 0 0 1px rgba(255, 252, 246, 0.15);
}
.coverflow-item.is-active::before { opacity: 0.85; }

/* Caption overlay — only visible on active item */
.coverflow-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 22px 22px;
  color: var(--ivory);
  z-index: 2;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 600ms var(--ease-out) 120ms, opacity 500ms var(--ease-out) 120ms;
  pointer-events: none;
}
.coverflow-item.is-active .coverflow-caption {
  transform: translateY(0);
  opacity: 1;
}
.coverflow-caption .cf-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 252, 246, 0.85);
  margin-bottom: 6px;
}
.coverflow-caption .cf-tag::before {
  content: ''; width: 18px; height: 1px; background: var(--gold);
}
.coverflow-caption h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.1;
  color: var(--ivory);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.coverflow-caption .cf-meta {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 252, 246, 0.7);
}

/* Controls (arrows + counter + progress) */
.coverflow-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 32px;
  padding: 0 var(--pad-content);
}
.cf-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--linen);
  background: var(--ivory);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-base) var(--ease-out);
  flex-shrink: 0;
  cursor: pointer;
}
.cf-btn:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
  transform: scale(1.06);
  box-shadow: 0 12px 30px -10px rgba(20, 14, 6, 0.35);
}
.cf-btn:active { transform: scale(0.96); }
.cf-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.cf-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  flex: 0 1 auto;
}

.cf-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
}
.cf-counter b {
  color: var(--gold);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
  min-width: 2ch;
  display: inline-block;
  text-align: right;
}
.cf-counter .cf-of {
  color: var(--linen);
  margin: 0 4px;
}

.cf-progress {
  position: relative;
  width: 200px;
  height: 1px;
  background: var(--linen);
  border-radius: 1px;
  overflow: hidden;
}
.cf-progress > span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transition: width 600ms var(--ease-out);
  border-radius: 1px;
}

/* Responsive */
@media (max-width: 768px) {
  :root {
    --cf-item-w: 56vw;
    --cf-step: 44vw;
  }
  .coverflow-stage { height: 78vw; }
  .coverflow-controls { gap: 18px; margin-top: 24px; }
  .cf-center { min-width: 140px; }
  .cf-progress { width: 120px; }
  .cf-btn { width: 48px; height: 48px; }
  .coverflow-caption { padding: 14px 16px 16px; }
  .coverflow-caption h3 { font-size: 18px; }
}
@media (max-width: 480px) {
  :root { --cf-item-w: 64vw; --cf-step: 50vw; }
  .coverflow-stage { height: 90vw; }
  .cf-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .coverflow-item,
  .coverflow-item > img,
  .coverflow-caption,
  .cf-progress > span {
    transition: none !important;
  }
}

/* =============================================================
   HERO SHOWCASE  —  Centered, full-width coverflow as the hero
   The H1 + lede are gone; the eyebrow sits on top, the coverflow
   fills the center, and the two CTAs anchor the bottom.
   ============================================================= */
.hero-showcase {
  /* Override the default 2-column hero with a single centered stack */
  display: block;
  /* Solid warm cream edge-to-edge so the side peek cards read against
     the same color across the full viewport — no gradient hot-spots. */
  background: #F5F0E8;
  padding: clamp(100px, 9vw, 140px) 0 clamp(80px, 9vw, 140px);
  min-height: auto;
  align-items: stretch;
  overflow: hidden;
}
.hero-showcase .hero-floating { z-index: 5; }

.hero-showcase-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.hero-showcase-head .eyebrow {
  justify-content: center;
}

/* Override the old .hero-grid inside .hero-showcase — we don't use it */
.hero-showcase .hero-grid {
  display: contents;
}

.hero-cta-center {
  justify-content: center;
  margin-top: clamp(40px, 5vw, 72px);
}

/* ---------- HERO STAGE (coverflow container) ---------- */
.hero-stage {
  position: relative;
  /* Break out of the .wrap's side padding so the carousel truly spans
     100vw. Negative-margin trick: half the parent's content width,
     minus half the viewport width, pulls the element flush to the
     viewport edge in both directions. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Anything (side cards, controls) that drifts past the viewport
     edge is clipped here so the hero never causes horizontal scroll. */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: none;
  perspective-origin: 50% 50%;
  transform: none !important;
}
/* When the hero is using perspective coverflow mode, the actual
   perspective is set on the .coverflow-stage inside this hero.
   The hero-stage itself stays flat so layout doesn't get weird. */
.hero-stage:has(.coverflow-mode--perspective .coverflow-stage) {
  /* no-op: perspective is applied to the inner stage */
}
.hero-stage.is-open { /* legacy hover state from door-open effect — no-op now */ }

/* ---------- HERO COVERFLOW — much bigger, full-width ---------- */
.hero-coverflow {
  /* The .hero-stage is now 100vw, so we just fill it. No max-width
     cap here — the carousel is meant to bleed to the viewport edges
     on every screen size. */
  width: 100%;
  max-width: none;
  margin: 0;
  /* The .hero-stage is a flex container; without this the coverflow
     shrinks to its content size and stops filling 100vw. */
  flex-shrink: 0;
  --cf-item-w: clamp(440px, 44vw, 680px);
  --cf-step:  clamp(460px, 46vw, 720px);
  padding: 0;
}
.hero-coverflow .coverflow-stage {
  height: clamp(640px, 80vw, 960px);
}
.hero-coverflow .coverflow-caption h3 {
  font-size: clamp(24px, 2.1vw, 34px);
}
.hero-coverflow .coverflow-caption .cf-tag {
  font-size: 11px;
  letter-spacing: 0.28em;
}
.hero-coverflow .coverflow-caption .cf-meta {
  font-size: 12px;
}

/* Hero arrows — sit on the left & right edges of the image so
   they're the primary navigation. They're lifted WAY above the
   active image (z-index 100) and given a stronger drop shadow so
   they stay clearly visible and clickable even when the image is
   being interacted with. */
.hero-coverflow .cf-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 64px; height: 64px;
  background: var(--ivory);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(176, 138, 74, 0.45);
  box-shadow:
    0 20px 44px -14px rgba(20, 14, 6, 0.55),
    0 0 0 1px rgba(255, 252, 246, 0.10);
  color: var(--ink);
  transition: all 300ms var(--ease-out);
}
.hero-coverflow .cf-btn:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.10);
  box-shadow:
    0 24px 50px -14px rgba(20, 14, 6, 0.65),
    0 0 0 3px rgba(176, 138, 74, 0.25);
}
.hero-coverflow .cf-btn[data-cf-prev] { left: 20px; }
.hero-coverflow .cf-btn[data-cf-next] { right: 20px; }
@media (max-width: 600px) {
  .hero-coverflow .cf-btn { width: 50px; height: 50px; }
  .hero-coverflow .cf-btn[data-cf-prev] { left: 12px; }
  .hero-coverflow .cf-btn[data-cf-next] { right: 12px; }
}

/* Hide the numeric counter (01/41) — the bar carries the position now. */
.hero-coverflow .cf-counter { display: none !important; }

/* Slim down the controls row (just the bar, no counter) */
.hero-coverflow .coverflow-controls {
  margin-top: 32px;
  gap: 32px;
}
.hero-coverflow .cf-center { min-width: 280px; gap: 10px; }
.hero-coverflow .cf-counter {
  font-size: 11px;
  letter-spacing: 0.28em;
  display: none;
}
.hero-coverflow .cf-progress {
  width: 320px;
  height: 2px;
  background: rgba(176, 138, 74, 0.20);
  border-radius: 2px;
  overflow: hidden;
}

/* Auto-rotation progress bar — paint the fill with a smooth ease so the
   bar visibly crawls between steps, reinforcing that it's advancing. */
.hero-coverflow .cf-progress > span {
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  border-radius: 2px;
  transition: width 600ms var(--ease-out);
}

/* Responsive: shrink a bit on tablets, stack-friendly on mobile */
@media (max-width: 1024px) {
  .hero-coverflow {
    --cf-item-w: clamp(360px, 50vw, 540px);
    --cf-step:  clamp(340px, 44vw, 480px);
  }
  .hero-coverflow.coverflow-mode--perspective .coverflow-item {
    /* Pull the side cards back a touch so they don't fly off-screen
       on narrower laptops / portrait tablets. */
    --persp-step-pct: 0.85;
  }
  .hero-coverflow .coverflow-stage {
    height: clamp(560px, 92vw, 780px);
  }
  .hero-coverflow .coverflow-controls { margin-top: 16px; }
  .hero-coverflow .cf-progress { width: 200px; }
  .hero-cta-center { margin-top: 32px; }
}
@media (max-width: 600px) {
  .hero-coverflow {
    --cf-item-w: clamp(260px, 68vw, 360px);
    --cf-step:  clamp(220px, 52vw, 300px);
  }
  .hero-coverflow.coverflow-mode--perspective .coverflow-item {
    /* On phones the side cards need to sit closer to the center so
       they're actually visible — 1.0 would push them off-screen. */
    --persp-step-pct: 0.78;
    --persp-rot: 18deg;
  }
  .hero-coverflow .coverflow-stage {
    height: clamp(500px, 125vw, 680px);
  }
  .hero-coverflow .cf-center { min-width: 0; }
  .hero-coverflow .cf-progress { width: 160px; }
  .hero-coverflow .coverflow-caption h3 { font-size: 20px; }
  .hero-coverflow .cf-btn { width: 50px; height: 50px; }
  .hero-coverflow .cf-btn[data-cf-prev] { left: 12px; }
  .hero-coverflow .cf-btn[data-cf-next] { right: 12px; }
  .hero-showcase-head { margin-bottom: 24px; }
  .hero-cta-center { margin-top: 24px; }
}

/* =============================================================
   COVERFLOW — SINGLE-IMAGE MODE  (data-cf-mode="single")
   One image at a time, full-bleed, with a smooth modern
   crossfade + lift transition. Side cards are completely
   hidden via .is-hidden (set in coverflow.js apply()).
   The .is-active item gets the modern, slow, cinematic
   transition; every other item is just display:none so it
   can never peek through.
   ============================================================= */
.coverflow-mode--single .coverflow-stage {
  height: clamp(520px, 62vw, 760px);
  -webkit-mask-image: none;
          mask-image: none;
}
.coverflow-mode--single .coverflow-item {
  --offset: 0;
  --distance: 0;
  width: min(92%, 1100px);
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  transform:
    translate(-50%, -50%)
    translateX(0)
    scale(1);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition:
    opacity 700ms var(--ease-out),
    transform 800ms var(--ease-out),
    box-shadow 700ms var(--ease-out);
  cursor: default;
}
.coverflow-mode--single .coverflow-item.is-active {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    scale(1);
  pointer-events: auto;
  z-index: 5;
  cursor: pointer;
  border-color: var(--linen);
  box-shadow:
    0 50px 100px -32px rgba(20, 14, 6, 0.45),
    0 0 0 1px rgba(255, 252, 246, 0.10);
}
.coverflow-mode--single .coverflow-item.is-active::before {
  /* the old bottom-darkening on side items — we want it gone for the
     active card so the image stays clean and full-bleed */
  opacity: 0;
}
.coverflow-mode--single .coverflow-item > img {
  transition: transform 1400ms var(--ease-out), filter 600ms var(--ease-out);
}
.coverflow-mode--single .coverflow-item.is-active:hover > img {
  transform: scale(1.03);
}

/* Caption — soft fade-in only on the active card */
.coverflow-mode--single .coverflow-caption {
  transform: translateY(0);
  opacity: 0;
  transition: opacity 500ms var(--ease-out) 200ms;
}
.coverflow-mode--single .coverflow-item.is-active .coverflow-caption {
  opacity: 1;
}

/* Single-mode controls — show the arrows prominently, keep the bar.
   The buttons now live inside the stage so we position them
   absolutely on the image edges. */
.coverflow-mode--single .cf-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 60px; height: 60px;
  background: rgba(250, 246, 238, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(176, 138, 74, 0.30);
  color: var(--ink);
  box-shadow: 0 18px 40px -16px rgba(20, 14, 6, 0.45);
  transition: all 400ms var(--ease-out);
}
.coverflow-mode--single .cf-btn[data-cf-prev] { left: 24px; }
.coverflow-mode--single .cf-btn[data-cf-next] { right: 24px; }
.coverflow-mode--single .cf-btn:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
  transform: translateY(-50%) scale(1.10);
  box-shadow: 0 24px 50px -14px rgba(20, 14, 6, 0.55);
}
.coverflow-mode--single .cf-progress {
  width: 280px;
  height: 2px;
  background: rgba(176, 138, 74, 0.20);
  border-radius: 2px;
  overflow: hidden;
}
.coverflow-mode--single .cf-progress > span {
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  border-radius: 2px;
  transition: width 600ms var(--ease-out);
}
.coverflow-mode--single .coverflow-controls {
  margin-top: 32px;
}

@media (max-width: 600px) {
  .coverflow-mode--single .coverflow-stage { height: 64vw; }
  .coverflow-mode--single .cf-btn { width: 46px; height: 46px; }
  .coverflow-mode--single .cf-btn[data-cf-prev] { left: 12px; }
  .coverflow-mode--single .cf-btn[data-cf-next] { right: 12px; }
  .coverflow-mode--single .cf-progress { width: 180px; }
}

/* =============================================================
   COVERFLOW — PERSPECTIVE (3D DEPTH) MODE  (data-cf-mode="perspective")
   A horizontal carousel where the center card is the "hero":
     - full size, full color, full opacity, sharp drop shadow
     - sits at translateZ 0 with no rotation
   Side cards recede into the distance:
     - scaled down (smaller the further from center)
     - rotated around the Y axis (their inside face shows)
     - pushed back in Z space (real 3D depth)
     - faded out (lower opacity the further from center)
     - desaturated + slightly brighter so the center card
       always reads as the focal point
     - washed with a soft white overlay so they read as
       "lighter / greyed" rather than just dim
   Cards animate smoothly as the active index changes — JS only
   flips the --offset / --distance custom props, CSS does the rest.
   ============================================================= */
.coverflow-mode--perspective .coverflow-stage {
  /* Real 3D perspective so rotateY / translateZ create actual depth */
  perspective: 1400px;
  perspective-origin: 50% 50%;
  /* Wider visible window + softer fade so far-away cards still
     show as ghosted silhouettes (no hard cut at the edge). */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  /* Give the stage a little extra height so rotated side cards
     have room to lean without clipping the top/bottom. */
  height: clamp(520px, 70vw, 820px);
}
.coverflow-mode--perspective .coverflow-track {
  /* Make children live in 3D so their rotateY/translateZ
     actually mean something (default is flat, which flattens
     the depth illusion). */
  transform-style: preserve-3d;
}

/* Each item — built from --offset (signed) and --distance (abs).
   The order of transforms is important: translate first to position,
   then translateZ to push back in space, then rotateY to tilt, then
   scale so the rotation pivots around the element center. */
.coverflow-mode--perspective .coverflow-item {
  --persp-scale:    0.18;   /* how aggressively cards shrink with distance */
  --persp-opacity:  0.38;   /* how aggressively cards fade with distance */
  --persp-z:        240px;  /* how aggressively cards recede in Z */
  --persp-rot:      30deg;  /* tilt amount per offset step */
  --persp-step-pct: 0.60;   /* how much horizontal step to use (rotation
                               eats into the visual gap between cards) */

  /* Override the default 2D coverflow transform with a 3D one.
     --offset is signed (-N..+N), so multiplying rotateY by --offset
     gives natural direction:
       offset = -1  → rotateY(+30deg)  (right edge tilts back, left face shows)
       offset = +1  → rotateY(-30deg)  (left edge tilts back, right face shows) */
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--offset) * var(--cf-step) * var(--persp-step-pct)))
    translateZ(calc(-1 * var(--distance) * var(--persp-z)))
    rotateY(calc(var(--offset) * var(--persp-rot) * -1))
    scale(calc(1 - var(--distance) * var(--persp-scale)));

  /* Side cards are "lit from front" — brighter AND less saturated so
     they read as lighter / greyed compared to the center card.
     The fade-out opacity also makes them more transparent the
     further from the center they sit. */
  opacity: calc(1 - var(--distance) * var(--persp-opacity));
  filter:
    brightness(calc(1.18 - var(--distance) * 0.16))
    saturate(calc(0.55 - var(--distance) * 0.35))
    contrast(calc(0.98 - var(--distance) * 0.04));
  z-index: calc(50 - var(--distance) * 10);
  will-change: transform, opacity, filter;
  /* Cinematic, smooth ease — the cards glide into place as the
     user scrolls, growing or shrinking through every step. */
  transition:
    transform 420ms var(--ease-out),
    opacity 300ms var(--ease-out),
    filter 320ms var(--ease-out),
    box-shadow 340ms var(--ease-out),
    border-color 240ms var(--ease-out);
}

/* White wash overlay — fades in on side cards (off the active
   center) so they read as "lighter / greyed" instead of just
   dim. Without this the dark door photos render the side cards
   looking DARK, which fights the focal-point hierarchy. */
.coverflow-mode--perspective .coverflow-item::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(250, 246, 238, 0.08) 0%, rgba(250, 246, 238, 0.22) 100%),
    linear-gradient(90deg, rgba(220, 210, 195, 0.10), rgba(255, 252, 246, 0.22));
  opacity: calc(0.25 + var(--distance) * 0.55);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
  transition: opacity 600ms var(--ease-out);
}
/* Active (center) card gets no wash — it should read sharp and
   full-color, with nothing sitting on top of the image. */
.coverflow-mode--perspective .coverflow-item.is-active::after {
  opacity: 0;
}

/* The dark bottom-gradient on side cards (added by the base
   .coverflow-item::before) is fine on the center card, but on
   side cards it makes them feel even darker. Dial it back so
   the side cards read as "lit" rather than "shadowed". */
.coverflow-mode--perspective .coverflow-item::before {
  opacity: calc(0.25 + var(--distance) * 0.30);
  transition: opacity 550ms var(--ease-out);
}
.coverflow-mode--perspective .coverflow-item.is-active::before {
  opacity: 0.85;
}

/* Far-away cards should fade to nothing but never fully vanish
   mid-animation — at distance 3+ the opacity calc already drives
   them to 0, no need for a hard hide. Keep them in the DOM so
   the transition stays smooth. */
.coverflow-mode--perspective .coverflow-item[style*="--distance: 4"],
.coverflow-mode--perspective .coverflow-item[style*="--distance: 5"] {
  pointer-events: none;
}

/* ---------- HERO perspective — fill the empty side space ----------
   The default perspective is tuned for a small carousel with very
   faded side cards. On the homepage hero we have a huge empty
   cream space to either side, so we soften every "shrink / fade /
   rotate" knob so the side cards stay big, colorful and prominent
   instead of melting into the background. Scoped to .hero-coverflow
   so the portfolio page coverflow is unaffected. */
.hero-coverflow.coverflow-mode--perspective .coverflow-stage {
  perspective: 1800px;
  /* Subtle edge fade — just the very edge of the viewport dissolves
     into the cream so the side cards appear to bleed off-screen. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
}
.hero-coverflow.coverflow-mode--perspective .coverflow-item {
  /* Less aggressive: cards stay nearly full-size, only lightly fade. */
  --persp-scale:    0.08;   /* 1 - 0.08 = 0.92 — side cards read at 92% size */
  --persp-opacity:  0.15;   /* side cards stay 85% visible */
  --persp-z:        120px;  /* less recession into the back */
  --persp-rot:      22deg;  /* gentler tilt, side cards read wider */
  --persp-step-pct: 1.0;    /* side cards pushed all the way out so they
                                bleed to the viewport edges */
  /* Keep more color on the side cards so they don't read as greyed-out. */
  filter:
    brightness(calc(1.08 - var(--distance) * 0.10))
    saturate(calc(0.78 - var(--distance) * 0.20))
    contrast(calc(0.99 - var(--distance) * 0.03));
  /* Smooth slide transition between items: opacity + transform
     (translateX + scale) over 500ms ease-in-out, per the design spec. */
  transition:
    transform 500ms ease-in-out,
    opacity 500ms ease-in-out,
    filter 500ms ease-in-out,
    box-shadow 500ms ease-in-out,
    border-color 500ms ease-in-out;
}
/* Soften the white wash on hero side cards so they read as real
   photos, not bleached silhouettes. */
.hero-coverflow.coverflow-mode--perspective .coverflow-item::after {
  opacity: calc(0.10 + var(--distance) * 0.32);
}

/* ---------- HERO entrance animation ----------
   On initial load (data-cf-ready="1" is set by coverflow.js after the
   first render) each card fades in + slides up 20px, with a 100ms
   stagger per card based on its distance from the center. The full
   coverflow transform is preserved in the keyframe so the entrance
   and the per-item positioning don't fight each other. */
@keyframes heroCardEnter {
  from {
    opacity: 0;
    transform:
      translate(-50%, calc(-50% + 20px))
      translateX(calc(var(--offset) * var(--cf-step) * var(--persp-step-pct)))
      translateZ(calc(-1 * var(--distance) * var(--persp-z)))
      rotateY(calc(var(--offset) * var(--persp-rot) * -1))
      scale(calc(1 - var(--distance) * var(--persp-scale)));
  }
  to {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--offset) * var(--cf-step) * var(--persp-step-pct)))
      translateZ(calc(-1 * var(--distance) * var(--persp-z)))
      rotateY(calc(var(--offset) * var(--persp-rot) * -1))
      scale(calc(1 - var(--distance) * var(--persp-scale)));
  }
}
.hero-coverflow.coverflow-mode--perspective[data-cf-ready="1"] .coverflow-item {
  /* backwards fill mode keeps the from-state applied during the
     delay so cards stay hidden until their turn. */
  animation: heroCardEnter 380ms ease-in-out backwards;
  /* Stagger: center first, then side cards, 70ms per distance step. */
  animation-delay: calc(var(--distance) * 70ms);
}

/* Active (center) card — give it the "hero" treatment:
   gold hairline border, dramatic shadow, no brightness boost
   (it should read as the most colorful, sharpest, darkest card). */
.coverflow-mode--perspective .coverflow-item.is-active {
  border-color: var(--gold);
  box-shadow:
    0 60px 110px -28px rgba(20, 14, 6, 0.62),
    0 22px 50px -18px rgba(20, 14, 6, 0.34),
    0 0 0 1px var(--gold),
    inset 0 0 0 1px rgba(255, 252, 246, 0.18);
  filter:
    brightness(0.99)
    saturate(1.08)
    contrast(1.04);
  z-index: 60;
}

/* The image inside a side card shouldn't scale on hover — that
   fights the 3D motion. Keep the hover reaction to a subtle
   filter brighten instead. */
.coverflow-mode--perspective .coverflow-item:hover > img {
  transform: none;
}
.coverflow-mode--perspective .coverflow-item.is-active:hover > img {
  transform: scale(1.04);
}

/* Caption — only the active card shows it (it would be unreadable
   on tilted, faded side cards anyway). Add a subtle backdrop so it
   stays legible on bright images. */
.coverflow-mode--perspective .coverflow-caption {
  text-shadow: 0 2px 18px rgba(20, 14, 6, 0.45);
  transition:
    transform 600ms var(--ease-out) 120ms,
    opacity 500ms var(--ease-out) 120ms;
}
.coverflow-mode--perspective .coverflow-item.is-active .coverflow-caption {
  transform: translateY(0);
  opacity: 1;
}

/* =============================================================
   HERO COVERFLOW — perspective overrides
   The homepage uses .hero-coverflow + .coverflow-mode--perspective
   together. The base perspective styles above give us the 3D
   look; here we just tune size / spacing / contrast to match
   the hero's scale.
   ============================================================= */
.hero-coverflow.coverflow-mode--perspective .coverflow-stage {
  perspective: 1600px;
  height: clamp(620px, 78vw, 920px);
  /* Reset the dark `var(--ink)` background and the 3/4 aspect-ratio
     that the generic .hero-coverflow .coverflow-stage rule (further
     down, intended for single-image mode) tries to apply. Without
     this reset the perspective stage ends up as a black rounded
     rectangle that swallows the side cards. */
  aspect-ratio: auto;
  background: transparent;
  border-radius: 0;
  max-width: none;
  /* Edge fade: only dissolve the very last 4% of the viewport so
     the side cards bleed right up to the screen edge instead of
     dying at 97.5%. A soft blend on both ends keeps it elegant. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.hero-coverflow.coverflow-mode--perspective {
  /* Wider step so the side cards bleed to the viewport edges instead
     of leaving empty ivory on the far left / right. Bigger items too
     so the side cards read as full doors, not postage stamps. */
  --cf-item-w: clamp(320px, 34vw, 480px);
  --cf-step:   clamp(360px, 38vw, 560px);
}
.hero-coverflow.coverflow-mode--perspective .coverflow-item {
  /* The falloff is dialed WAY down compared to before — the side
     cards now stay large, colorful and prominent so they can carry
     visual weight all the way to the viewport edges. Tilt is
     gentler too so each card keeps more of its door silhouette. */
  --persp-scale:    0.10;   /* side cards stay ~90% size at d=1, ~80% at d=2 */
  --persp-opacity:  0.20;   /* side cards stay ~80% visible at d=1, ~60% at d=2 */
  --persp-z:        180px;  /* less Z recession — side cards sit closer to viewer */
  --persp-rot:      26deg;  /* gentler tilt, cards keep their shape */
  --persp-step-pct: 0.85;   /* use the full viewport width for the spread */

  /* IMPORTANT: there is a later .hero-coverflow .coverflow-item
     rule (further down in the file) that sets width: 100% and a
     2D translate+scale transform. Without the overrides below, that
     rule wins on specificity tie (same selector count) because it
     comes later, and the perspective effect disappears. So we
     explicitly re-assert the 3D transform and a real width here. */
  width: var(--cf-item-w);
  max-width: none;
  aspect-ratio: 4 / 5;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--offset) * var(--cf-step) * var(--persp-step-pct)))
    translateZ(calc(-1 * var(--distance) * var(--persp-z)))
    rotateY(calc(var(--offset) * var(--persp-rot) * -1))
    scale(calc(1 - var(--distance) * var(--persp-scale)));
  opacity: calc(1 - var(--distance) * var(--persp-opacity));
  /* Saturate stays in [0, 1] range (clamped) so distance-2+ cards
     don't collapse to fully greyscale — they should still read as
     colored door photos, just slightly muted. */
  filter:
    brightness(calc(1.05 - var(--distance) * 0.06))
    saturate(clamp(0.35, calc(0.85 - var(--distance) * 0.18), 1))
    contrast(calc(0.98 - var(--distance) * 0.02));
  /* "Quick and smooth" — the user wants the cards to feel responsive.
     320ms is fast enough to feel snappy but still long enough to read
     as a smooth eased motion. */
  transition:
    transform 320ms var(--ease-out),
    opacity 220ms var(--ease-out),
    filter 240ms var(--ease-out),
    box-shadow 260ms var(--ease-out),
    border-color 180ms var(--ease-out);
}
.hero-coverflow.coverflow-mode--perspective .coverflow-item.is-active {
  transform:
    translate(-50%, -50%)
    translateX(calc(0 * var(--cf-step) * var(--persp-step-pct)))
    translateZ(0)
    rotateY(0)
    scale(1);
  /* Keep the active card fully visible — don't let the perspective
     fade/dim/saturate calc dim it. */
  opacity: 1;
  filter:
    brightness(0.98)
    saturate(1.10)
    contrast(1.05);
}
.hero-coverflow.coverflow-mode--perspective .coverflow-item.is-active {
  box-shadow:
    0 70px 130px -34px rgba(20, 14, 6, 0.66),
    0 26px 56px -20px rgba(20, 14, 6, 0.36),
    0 0 0 2px var(--gold),
    inset 0 0 0 1px rgba(255, 252, 246, 0.22);
}

/* Responsive — perspective needs a slightly smaller stage on
   tablets / phones so the rotation doesn't push cards off-screen.
   Step is kept generous so the side cards still reach the
   viewport edges on tablet. */
@media (max-width: 1024px) {
  .coverflow-mode--perspective .coverflow-stage {
    height: clamp(480px, 88vw, 720px);
    perspective: 1200px;
  }
  .hero-coverflow.coverflow-mode--perspective .coverflow-stage {
    height: clamp(520px, 92vw, 760px);
  }
  .coverflow-mode--perspective .coverflow-item {
    --persp-rot: 26deg;
    --persp-z:   180px;
  }
  .hero-coverflow.coverflow-mode--perspective {
    --cf-item-w: clamp(280px, 36vw, 400px);
    --cf-step:   clamp(240px, 32vw, 360px);
  }
}
@media (max-width: 600px) {
  .coverflow-mode--perspective .coverflow-stage {
    height: clamp(420px, 110vw, 620px);
    perspective: 1000px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .hero-coverflow.coverflow-mode--perspective .coverflow-stage {
    height: clamp(460px, 118vw, 640px);
  }
  .coverflow-mode--perspective .coverflow-item {
    --persp-rot: 24deg;
    --persp-z:   160px;
    --persp-scale: 0.16;
  }
  .hero-coverflow.coverflow-mode--perspective {
    --cf-item-w: clamp(220px, 64vw, 360px);
    --cf-step:   clamp(150px, 50vw, 260px);
  }
}

/* Reduced motion — keep the depth feel but skip the transform
   animation. Cards jump to their final position. */
@media (prefers-reduced-motion: reduce) {
  .coverflow-mode--perspective .coverflow-item {
    transition: none !important;
  }
}

/* ---------- THE COLLECTION coverflow (homepage) ----------
   Single-image mode: one image at a time, with a smooth modern
   crossfade + scale transition between slides. Side arrows on
   the image, progress bar with no counter below. */
.coverflow--collection {
  padding: 24px 0 8px;
  max-width: 1200px;
  margin: 0 auto;
}
.coverflow--collection .coverflow-stage {
  height: clamp(460px, 56vw, 680px);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(176, 138, 74, 0.08), transparent 60%),
    var(--cream);
  border: 1px solid var(--linen);
  box-shadow: 0 30px 80px -36px rgba(20, 14, 6, 0.35);
  overflow: hidden;
}
/* All items stack at the center, but only the active one is visible.
   The crossfade is a smooth opacity + gentle scale transition. */
.coverflow--collection .coverflow-item {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  background: var(--ink);
  cursor: default;
  box-shadow: none;
  transform: translate(-50%, -50%) scale(1.06);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition:
    opacity 900ms var(--ease-out),
    transform 1100ms var(--ease-out);
}
.coverflow--collection .coverflow-item.is-active {
  border: 0;
  box-shadow: none;
  cursor: default;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  z-index: 5;
}
.coverflow--collection .coverflow-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-out), filter 700ms var(--ease-out);
}
.coverflow--collection .coverflow-item.is-active:hover > img {
  transform: scale(1.03);
}

/* Side arrows — modal-style, floating over the image */
.coverflow--collection .cf-btn[data-cf-prev],
.coverflow--collection .cf-btn[data-cf-next] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 60px; height: 60px;
  background: rgba(250, 246, 238, 0.94);
  border: 1px solid rgba(176, 138, 74, 0.30);
  box-shadow: 0 18px 40px -16px rgba(20, 14, 6, 0.45);
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 400ms var(--ease-out);
}
.coverflow--collection .cf-btn[data-cf-prev]:hover,
.coverflow--collection .cf-btn[data-cf-next]:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
  transform: translateY(-50%) scale(1.10);
  box-shadow: 0 24px 50px -14px rgba(20, 14, 6, 0.55);
}
.coverflow--collection .cf-btn[data-cf-prev] { left: 24px; }
.coverflow--collection .cf-btn[data-cf-next] { right: 24px; }
@media (max-width: 600px) {
  .coverflow--collection .cf-btn[data-cf-prev],
  .coverflow--collection .cf-btn[data-cf-next] { width: 46px; height: 46px; }
  .coverflow--collection .cf-btn[data-cf-prev] { left: 12px; }
  .coverflow--collection .cf-btn[data-cf-next] { right: 12px; }
}

/* ---------- Bar buttons (in the controls row, flanking the progress) ----------
   These are the secondary, unobtrusive nav buttons that live in the
   bottom bar with the progress strip. The side-of-image arrows are
   the primary nav; these are the second tap target, for users who
   prefer to navigate from the bar itself. */
.cf-btn--bar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 2 !important;
  width: 52px !important;
  height: 52px !important;
  background: var(--ivory) !important;
  border: 1px solid var(--linen) !important;
  color: var(--ink) !important;
  box-shadow: 0 6px 18px -8px rgba(60, 40, 20, 0.12), 0 2px 4px rgba(60, 40, 20, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  flex-shrink: 0;
  transition: all var(--t-base) var(--ease-out) !important;
}
.cf-btn--bar:hover {
  background: var(--ink) !important;
  color: var(--ivory) !important;
  border-color: var(--ink) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 12px 30px -10px rgba(20, 14, 6, 0.35) !important;
}
.cf-btn--bar:active { transform: scale(0.96) !important; }
.cf-btn--bar:disabled { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 600px) {
  .cf-btn--bar { width: 44px !important; height: 44px !important; }
}

/* Caption for the collection — gentle overlay bottom-left, fade in with image */
.coverflow--collection .coverflow-caption {
  left: 32px; right: 32px; bottom: 32px;
  padding: 0;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out) 250ms, transform 600ms var(--ease-out) 250ms;
  pointer-events: none;
}
.coverflow--collection .coverflow-item.is-active .coverflow-caption {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.coverflow--collection .coverflow-caption .cf-tag {
  color: rgba(255, 252, 246, 0.85);
  font-size: 11px;
  letter-spacing: 0.24em;
}
.coverflow--collection .coverflow-caption h3 {
  font-size: clamp(22px, 2.2vw, 32px);
  margin-top: 4px;
  color: var(--ivory);
  text-shadow: 0 2px 20px rgba(20, 14, 6, 0.45);
}
.coverflow--collection .coverflow-caption .cf-meta {
  font-size: 11px;
  margin-top: 6px;
  color: rgba(255, 252, 246, 0.85);
  text-shadow: 0 1px 10px rgba(20, 14, 6, 0.35);
}
@media (max-width: 600px) {
  .coverflow--collection .coverflow-caption {
    left: 18px; right: 18px; bottom: 18px;
  }
  .coverflow--collection .coverflow-caption h3 { font-size: 18px; }
}

/* The collection controls — back arrow + progress bar + forward arrow.
   No counter on the page (kept only as an sr-only text node for
   screen readers via the .cf-counter--sr utility). */
.coverflow--collection .coverflow-controls {
  margin-top: 40px;
  gap: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coverflow--collection .cf-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 320px;
  flex: 0 1 auto;
}
.coverflow--collection .cf-counter,
.coverflow--collection .cf-counter--sr {
  display: none;
}
/* Always hide the visual counter (data-cf-nocount=1 pages get it as
   screen-reader text only) */
.cf-counter--sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Bar buttons are hidden on the homepage hero, shown in the collection */
.hero-coverflow .cf-btn--bar { display: none; }

.coverflow--collection .cf-progress {
  width: 320px;
  height: 2px;
  background: rgba(176, 138, 74, 0.20);
  border-radius: 2px;
  overflow: hidden;
}
.coverflow--collection .cf-progress > span {
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transition: width 600ms var(--ease-out);
  border-radius: 2px;
}
@media (max-width: 600px) {
  .coverflow--collection .cf-progress { width: 200px; }
  .coverflow--collection .cf-center { min-width: 200px; }
  .coverflow--collection .coverflow-controls { gap: 18px; }
}

/* Hero bar — just the progress, no flanking buttons (the side arrows
   on the image are the primary nav for the hero) */
.hero-coverflow .coverflow-controls {
  margin-top: 32px;
  gap: 32px;
}
.hero-coverflow .cf-center { min-width: 280px; gap: 10px; }
.hero-coverflow .cf-counter { display: none !important; }

/* =============================================================
   HERO COVERFLOW — ZOOM IN/OUT TRANSITION + FULL-SIZE DISPLAY
   The source images are 1050x1400 (3:4 portrait). To make them
   display fully without being zoomed/cropped, the stage and each
   item use aspect-ratio: 3/4. The auto-rotation
   (data-auto="4000") combined with a scale transform on the
   coverflow items gives a "zoom in/out" effect between images:
     - inactive item: scale(1.08) (slightly zoomed in, hidden)
     - active item:   scale(1.00) (fully visible, not zoomed)
   As the next image becomes active, it zooms OUT from 1.08 to 1
   while fading in, creating the desired transition.
   ============================================================= */
.hero-coverflow .coverflow-stage {
  height: auto;
  aspect-ratio: 3 / 4;
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--r-2xl);
  background: var(--ink);
  overflow: hidden;
  position: relative;
}
.hero-coverflow .coverflow-item {
  width: 100%;
  max-width: none;
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%) scale(1.08);
  transition:
    opacity 900ms var(--ease-out),
    transform 1200ms var(--ease-out);
}
.hero-coverflow .coverflow-item.is-active {
  transform: translate(-50%, -50%) scale(1);
}
.hero-coverflow .coverflow-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-out), filter 600ms var(--ease-out);
}
@media (max-width: 1024px) {
  .hero-coverflow .coverflow-stage { max-width: 560px; }
}
@media (max-width: 600px) {
  .hero-coverflow .coverflow-stage {
    max-width: 92vw;
    aspect-ratio: 3 / 4;
  }
}

/* =============================================================
   HERO COVERFLOW — BUTTONS ON TOP
   The .coverflow-mode--single .cf-btn rule (defined earlier in the
   file) sets z-index: 6, which technically is above the active
   image (z-index: 5) but can still feel like the buttons get
   hidden by the image on some interactions. To make absolutely
   sure the prev/next arrows are always visible and clickable on
   top of the slide, we re-state them here at the end of the
   file with a much higher z-index (100) and a more solid look.
   ============================================================= */
.hero-coverflow .cf-btn {
  z-index: 100;
  width: 64px; height: 64px;
  background: var(--ivory);
  border: 1.5px solid rgba(176, 138, 74, 0.45);
  box-shadow:
    0 20px 44px -14px rgba(20, 14, 6, 0.55),
    0 0 0 1px rgba(255, 252, 246, 0.10);
  color: var(--ink);
  transition: all 300ms var(--ease-out);
}
.hero-coverflow .cf-btn:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.10);
  box-shadow:
    0 24px 50px -14px rgba(20, 14, 6, 0.65),
    0 0 0 3px rgba(176, 138, 74, 0.25);
}
.hero-coverflow .cf-btn[data-cf-prev] { left: 20px; }
.hero-coverflow .cf-btn[data-cf-next] { right: 20px; }
.hero-coverflow .cf-btn svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
  .hero-coverflow .cf-btn { width: 50px; height: 50px; }
  .hero-coverflow .cf-btn[data-cf-prev] { left: 12px; }
  .hero-coverflow .cf-btn[data-cf-next] { right: 12px; }
  .hero-coverflow .cf-btn svg { width: 18px; height: 18px; }
}

/* ---------- Reduced motion: kill the crossfade timing ---------- */
@media (prefers-reduced-motion: reduce) {
  .coverflow-mode--single .coverflow-item,
  .coverflow-mode--single .coverflow-item > img,
  .coverflow-mode--single .coverflow-caption,
  .coverflow--collection .coverflow-item,
  .coverflow--collection .coverflow-item > img,
  .coverflow--collection .coverflow-caption,
  .hero-coverflow .coverflow-item,
  .hero-coverflow .coverflow-item > img,
  .hero-coverflow .coverflow-caption {
    transition-duration: 0.01ms !important;
  }
}