/* ============================================================
   CC HAND-CODED FLOURISHES — anti-AI-generic touches
   Refokus / Kira Studios pattern: deliberate idiosyncratic detail
   that AI never generates the same way twice.
   ============================================================ */

:root {
  --copper: #d6b985;
  --copper-deep: #9d8350;
  --ink: #0d0c0a;
  --cream: #f7f2e6;
}

/* ===== Hand-drawn copper underline on key marketing words ===== */
.scribble-under {
  position: relative;
  display: inline-block;
}
.scribble-under::after {
  content: '';
  position: absolute;
  left: -4%;
  bottom: -8px;
  width: 108%;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M2 9 C 30 2, 60 14, 100 5 S 170 12, 198 4' fill='none' stroke='%23d6b985' stroke-width='2.6' stroke-linecap='round'/></svg>") no-repeat center;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.92;
}

/* ===== Hand-drawn arrow next to CTAs ===== */
.cta-flourish {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.cta-flourish::after {
  content: '';
  width: 56px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 18'><path d='M2 10 C 12 6, 22 14, 32 9 S 48 7, 53 9 M 47 4 L 53 9 L 47 14' fill='none' stroke='%23d6b985' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.cta-flourish:hover::after {
  transform: translateX(8px);
}

/* ===== Margin tag (e.g. "since 2014" leans into the side) ===== */
.margin-tag {
  position: absolute;
  font-family: 'Allura', cursive;
  font-size: 32px;
  color: var(--copper-deep);
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.01em;
  opacity: 0.85;
}

/* ===== Inkblot section divider — looks pen-stamped ===== */
.ink-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 80px 0 60px;
  gap: 18px;
}
.ink-divider::before,
.ink-divider::after {
  content: '';
  flex: 0 0 80px;
  height: 1px;
  background: var(--copper);
  opacity: 0.55;
}
.ink-divider .mark {
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M15 4 L 17 13 L 26 15 L 17 17 L 15 26 L 13 17 L 4 15 L 13 13 Z' fill='%23d6b985' opacity='0.85'/></svg>") no-repeat center / contain;
}

/* ===== Asymmetric quote-pull (like a magazine pull-quote) ===== */
.pull-quote {
  position: relative;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding: 32px 0 32px 56px;
  margin: 60px 0 60px clamp(20px, 8vw, 120px);
  max-width: 720px;
}
.pull-quote::before {
  content: '“';
  position: absolute;
  left: -10px;
  top: -32px;
  font-family: 'Instrument Sans', serif;
  font-size: 140px;
  line-height: 1;
  color: var(--copper);
  opacity: 0.6;
  font-weight: 700;
}
.pull-quote cite {
  display: block;
  margin-top: 16px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--copper-deep);
  font-style: normal;
}

/* ===== Hand-drawn checkmark for bullet lists ===== */
.path-card ul li {
  position: relative;
  list-style: none;
}
.path-card ul li::marker {
  content: '';
}
.path-card ul {
  padding-left: 0;
}
.path-card ul li {
  padding-left: 28px;
}
.path-card ul li[data-tip]::after {
  /* tooltip arrow from quote-wizard.css remains; this is just bullet */
}
.path-card ul li > * { /* preserve internal */ }

/* Custom check before the text — uses ::first-letter wouldn't work, so use background image */
.path-card ul li[data-tip]::before {
  /* Override: existing tooltip arrow uses ::before. Skip custom check
     to avoid breaking the tooltip system. */
}
/* Apply check via separate selector that doesn't collide with tooltip */
.path-card ul li {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M3 9.5 L 7 13 L 15 5' fill='none' stroke='%23d6b985' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat 0 0.55em;
  background-size: 16px;
}

/* ===== Founder signature mark — tiny script "the strauss family" line ===== */
.signature-mark {
  font-family: 'Allura', cursive;
  font-size: 28px;
  color: var(--copper-deep);
  display: inline-block;
  letter-spacing: -0.01em;
  transform: rotate(-3deg) translateY(-2px);
  margin-left: 8px;
}

/* ===== Slightly imperfect rotation on a few signature elements ===== */
.tilt-left { transform: rotate(-1.2deg); transform-origin: center; }
.tilt-right { transform: rotate(1.2deg); transform-origin: center; }


/* ============================================================
   CC CHATBOT — premium editorial chat widget
   Design notes (per Jotform 2026 + Awwwards research):
   - Dark editorial header (kraft paper feel)
   - Cream background for messages (warmer than pure white)
   - Larger, breathable type — Instrument Sans 15px
   - Q/A as separate visually-distinct blocks
   - Token-by-token reveal on bot messages
   - Smaller, more elegant launcher (no big "ASK US" pill)
   ============================================================ */

.cc-chat-btn {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid rgba(214,185,133,0.15);
  border-radius: 50%;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 0;
  cursor: pointer;
  box-shadow: 0 12px 36px rgba(13,12,10,0.22),
              0 2px 8px rgba(13,12,10,0.12),
              inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.45s ease,
              opacity 0.25s ease;
}
.cc-chat-btn::after {
  /* Subtle pulse ring like Apple support */
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(214,185,133,0.35);
  border-radius: 50%;
  opacity: 0;
  animation: cc-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cc-pulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}
.cc-chat-btn svg {
  width: 22px;
  height: 22px;
  color: var(--copper);
}
.cc-chat-btn-label {
  display: none; /* Icon-only — quieter, more premium */
}
.cc-chat-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(13,12,10,0.32);
}
.cc-chat-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.7);
}

.cc-chat-panel {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9001;
  width: 410px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 56px);
  background: #f7f2e6; /* cream paper, warmer than #fff */
  color: var(--ink);
  border-radius: 22px;
  box-shadow: 0 32px 72px rgba(13,12,10,0.36),
              0 4px 16px rgba(13,12,10,0.18),
              inset 0 1px 0 rgba(255,255,255,0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Instrument Sans', sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1),
              transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.cc-chat-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.cc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 20px;
  background: var(--ink);
  color: var(--cream);
  position: relative;
  /* Hand-drawn copper hairline divider */
}
.cc-chat-header::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,185,133,0.4) 30% 70%, transparent);
}
.cc-chat-id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cc-chat-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--copper), var(--copper-deep, #9d8350));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Allura', cursive;
  font-size: 22px;
  color: var(--ink);
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 12px rgba(214,185,133,0.25);
}
.cc-chat-dot::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5ce0b8;
  border: 2px solid var(--ink);
}
.cc-chat-dot::before {
  content: 'C'; /* Captivating mark */
  display: block;
}
.cc-chat-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  font-family: 'Instrument Sans', sans-serif;
}
.cc-chat-sub {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.7;
  text-transform: lowercase;
  margin-top: 3px;
  color: var(--copper);
}
.cc-chat-close {
  background: transparent;
  border: 0;
  color: var(--cream);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
}
.cc-chat-close svg { width: 18px; height: 18px; }
.cc-chat-close:hover {
  opacity: 1;
  background: rgba(255,255,255,0.1);
}

.cc-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 28px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #f7f2e6;
  /* Subtle paper texture */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(214,185,133,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(157,131,80,0.04) 0%, transparent 40%);
}
.cc-chat-log::-webkit-scrollbar { width: 6px; }
.cc-chat-log::-webkit-scrollbar-track { background: transparent; }
.cc-chat-log::-webkit-scrollbar-thumb {
  background: rgba(13,12,10,0.12);
  border-radius: 3px;
}
.cc-msg {
  max-width: 84%;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  word-wrap: break-word;
  animation: cc-msg-in 0.4s cubic-bezier(0.22,1,0.36,1) both;
  font-family: 'Instrument Sans', sans-serif;
}
@keyframes cc-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.cc-msg-bot {
  background: #fff;
  border: 1px solid rgba(13,12,10,0.06);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(13,12,10,0.04);
  position: relative;
}
.cc-msg-bot::before {
  /* Tiny copper tab on bot messages — like a magazine pull-quote marker */
  content: '';
  position: absolute;
  left: -8px;
  top: 18px;
  width: 3px;
  height: 14px;
  background: var(--copper);
  border-radius: 2px;
}
.cc-msg-user {
  background: var(--ink);
  color: var(--cream);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.cc-typing {
  display: inline-flex !important;
  gap: 4px;
  padding: 14px 16px !important;
  width: 60px;
}
.cc-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper);
  opacity: 0.55;
  animation: cc-bounce 1.2s infinite ease-in-out;
}
.cc-typing span:nth-child(2) { animation-delay: 0.15s; }
.cc-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes cc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.cc-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.cc-sug {
  background: transparent;
  border: 1px solid rgba(13,12,10,0.18);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: -0.005em;
}
.cc-sug:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: translateX(2px);
}

.cc-chat-input {
  display: flex;
  gap: 8px;
  padding: 12px 16px 14px;
  background: #fff;
  border-top: 1px solid rgba(13,12,10,0.08);
}
.cc-chat-input input {
  flex: 1;
  background: #f4f1ea;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.cc-chat-input input:focus {
  border-color: var(--copper);
  background: #fff;
}
.cc-chat-input button {
  background: var(--ink);
  color: var(--cream);
  border: 0;
  border-radius: 10px;
  width: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
}
.cc-chat-input button svg { width: 18px; height: 18px; }
.cc-chat-input button:hover {
  background: var(--copper-deep);
  transform: scale(1.05);
}

.cc-chat-foot {
  padding: 8px 16px 12px;
  background: #fff;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(13,12,10,0.55);
  text-align: center;
}
.cc-chat-foot a {
  color: var(--copper-deep);
  text-decoration: none;
  font-weight: 600;
}
.cc-chat-foot a:hover { text-decoration: underline; }

@media (max-width: 540px) {
  .cc-chat-panel {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    border-radius: 14px;
  }
  .cc-chat-btn {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-chat-btn, .cc-chat-panel, .cc-msg, .cc-sug, .cta-flourish::after,
  .cc-chat-input button {
    transition: none !important;
    animation: none !important;
  }
  .cc-typing span { animation: none !important; opacity: 0.7; }
}


/* ============================================================
   VECTOR HERO WORDMARK — replaces the bitmap PNG logo
   Uses Allura (script) + Instrument Sans (marque) — both already
   loaded via Google Fonts. Vector-perfect at any size, no jaggies.
   ============================================================ */

.hero-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  text-align: center;
  user-select: none;
  /* Block ALL prior .hero-logo bitmap styles since we're not <img> anymore */
}

.hero-wordmark .word-script {
  font-family: 'Allura', 'Brush Script MT', cursive;
  font-weight: 400;
  font-size: clamp(120px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.005em;
  color: var(--ink, #0d0c0a);
  /* Subtle weight via text-shadow so it reads well over a busy hero photo */
  text-shadow: 0 2px 0 rgba(13,12,10,0.04);
  /* Vector-perfect — anti-aliasing controlled by browser font renderer */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
}

.hero-wordmark .word-marque {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 2.4vw, 36px);
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--copper, #d6b985);
  margin-left: 0.55em; /* compensate the trailing letter-spacing */
  margin-top: -8px;
  display: block;
}

/* Hide the text wordmark (kept as semantic alt fallback only) */
.hero-mark .hero-wordmark { display: none !important; }

/* Ensure original logo IMG renders clean at any size — using hi-res 4x upscale */
.hero-mark .hero-logo {
  display: block !important;
  width: clamp(260px, 38vw, 540px) !important;
  height: auto !important;
  margin: 0 auto !important;
  user-select: none !important;
  /* Crisp rendering — browser keeps the alpha smooth */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  /* Subtle drop-shadow for legibility on busy hero photo */
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.18));
  /* No mix-blend so the logo stays the actual brand color */
  mix-blend-mode: normal !important;
}


/* ============================================================
   SCROLL-DRIVEN MOTION — Lenis-smooth + parallax + image fades
   These run on window scroll. Uses CSS custom properties driven
   from JS via requestAnimationFrame for buttery 60fps motion.
   ============================================================ */

/* Hero gracefully fades + scales as user scrolls past it */
.hero-stage {
  --scroll-progress: 0;
}
.hero-stage .hero-mark {
  transform: translateY(calc(var(--scroll-progress) * -60px))
             scale(calc(1 - var(--scroll-progress) * 0.06));
  opacity: calc(1 - var(--scroll-progress) * 1.4);
  transition: transform 0.05s linear;
  will-change: transform, opacity;
}

/* Hero photo: subtle scale only (no blur — blur kills perf on scroll) */
.hero-stage .hero-slides {
  transform: scale(calc(1 + var(--scroll-progress) * 0.03));
  transition: transform 0.05s linear;
  will-change: transform;
}


/* ============================================================
   RICH HERO — premium editorial first viewport
   - Centered logo (transparent PNG, blends over kitchen photo)
   - Editorial italic tagline
   - Animated count-up stat strip
   - Dual CTAs (free 3D design + phone)
   - Cursor-following warm spotlight (subtle)
   - Top-line "designers online" pill
   - Soft grain texture overlay (premium magazine feel)
   ============================================================ */

.hero-rich {
  display: block;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Balanced scrim: brand kitchen visible at edges; text area dark enough
   that copy reads clean but not so dark the brand disappears. */
.hero-rich .hero-scrim {
  background:
    radial-gradient(ellipse 60% 50% at 50% 52%,
      rgba(8,7,6,0.62) 0%,
      rgba(8,7,6,0.50) 35%,
      rgba(8,7,6,0.28) 65%,
      rgba(8,7,6,0.05) 90%,
      rgba(8,7,6,0) 100%),
    linear-gradient(180deg,
      rgba(8,7,6,0.30) 0%,
      rgba(8,7,6,0.20) 30%,
      rgba(8,7,6,0.28) 60%,
      rgba(8,7,6,0.62) 100%) !important;
  z-index: 3 !important;
}

/* Soft grain overlay — paper feel */
.hero-rich .hero-grain {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 23% 17%, rgba(214,185,133,0.05) 0%, transparent 35%),
    radial-gradient(circle at 71% 84%, rgba(157,131,80,0.05) 0%, transparent 38%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='1.2' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* Cursor spotlight — warm follow-light */
.hero-rich .hero-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 380px at var(--mx, 50%) var(--my, 50%),
    rgba(214,185,133,0.10) 0%,
    rgba(214,185,133,0.03) 30%,
    transparent 65%);
  pointer-events: none;
  z-index: 2;
  transition: background 0.18s ease;
}

/* Existing scrim still applies, sits at z-index 3 */
.hero-rich .hero-scrim {
  z-index: 3;
}

/* Top-line pill — designers-online indicator (anchored to top) */
.hero-rich .hero-topline {
  position: absolute;
  top: 28px;
  left: 0; right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
}
.hero-rich .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(13,12,10,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(247,242,230,0.10);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(247,242,230,0.92);
}
.hero-rich .hero-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5ce0b8;
  flex-shrink: 0;
}
.hero-rich .hero-pill .dot.pulse {
  box-shadow: 0 0 0 0 rgba(92,224,184,0.6);
  animation: hero-pulse 2.4s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(92,224,184,0.6); }
  100% { box-shadow: 0 0 0 12px rgba(92,224,184,0); }
}

/* Center mark — kicker + logo + tag + sub + CTAs (vertically centered, room for stats below) */
.hero-rich .hero-mark {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 14px;
  padding: 88px 24px 220px; /* top room for pill, bottom room for stats */
}

.hero-rich .hero-kicker {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(247,242,230,0.95);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  display: block;
  margin-bottom: 8px;
}

.hero-rich .hero-logo {
  width: clamp(280px, 38vw, 540px) !important;
  height: auto !important;
  /* heavier shadow so the cursive sits forward of the photo */
  filter:
    drop-shadow(0 0 18px rgba(0,0,0,0.55))
    drop-shadow(0 6px 24px rgba(0,0,0,0.45))
    drop-shadow(0 1px 0 rgba(0,0,0,0.30)) !important;
  margin: 0 auto 4px !important;
  mix-blend-mode: normal !important;
}

/* ============================================================
   CRISP WORDMARK — replaces the PNG logo with real fonts.
   Vector text → perfectly anti-aliased at every zoom.
   "Captivating" in Allura cursive (matches original brush script vibe)
   "Cabinets" in Instrument Sans, copper, spaced caps.
   ============================================================ */
.hero-rich .hero-logo.cc-wordmark {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  width: auto !important;
  filter:
    drop-shadow(0 2px 14px rgba(0,0,0,0.55))
    drop-shadow(0 0 24px rgba(0,0,0,0.4)) !important;
  /* margin must override the img-flavored rule above */
  margin: 0 auto 8px !important;
  line-height: 1;
  user-select: none;
}
.hero-rich .cc-cursive {
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  /* warm cream — readable on dark scrim */
  color: #f7f2e6;
  text-shadow:
    0 2px 18px rgba(0,0,0,0.55),
    0 0 36px rgba(0,0,0,0.35);
  /* tilt so the script sits forward */
  transform: translateY(0);
  margin-bottom: -8px;
}
.hero-rich .cc-cabinets {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.3vw, 20px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #e0c08c;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
  margin-top: 2px;
}

/* ============================================================
   STYLE PICKER — top-right button + slide-in panel
   ============================================================ */
.style-picker-btn {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: rgba(13,12,10,0.62);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(247,242,230,0.16);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: rgba(247,242,230,0.95);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(13,12,10,0.18);
}
.style-picker-btn:hover {
  background: rgba(13,12,10,0.85);
  border-color: rgba(214,185,133,0.35);
  transform: translateY(-1px);
}
.style-picker-btn svg {
  width: 14px; height: 14px;
}

.style-picker-panel {
  position: fixed;
  top: 64px;
  right: 24px;
  z-index: 89;
  width: 360px;
  max-width: calc(100vw - 48px);
  background: rgba(13,12,10,0.95);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid rgba(214,185,133,0.20);
  border-radius: 14px;
  padding: 14px 14px 10px;
  box-shadow:
    0 24px 56px rgba(13,12,10,0.42),
    0 4px 14px rgba(13,12,10,0.18);
  color: var(--cream, #f7f2e6);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.style-picker-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.spp-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(247,242,230,0.06);
  margin-bottom: 8px;
}
.spp-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: lowercase;
  color: #d6b985;
}
.spp-close {
  background: transparent;
  border: 0;
  color: rgba(247,242,230,0.60);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.18s ease;
}
.spp-close:hover { color: #f7f2e6; }
.spp-options {
  display: flex; flex-direction: column; gap: 6px;
}
.spp-opt {
  display: flex; align-items: stretch;
  background: transparent;
  border: 1px solid rgba(247,242,230,0.06);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: all 0.22s ease;
  gap: 12px;
}
.spp-opt:hover {
  background: rgba(247,242,230,0.04);
  border-color: rgba(214,185,133,0.30);
}
.spp-opt[data-active="true"] {
  background: rgba(214,185,133,0.08);
  border-color: rgba(214,185,133,0.45);
}
.spp-thumb {
  flex-shrink: 0;
  width: 64px; height: 56px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(247,242,230,0.08);
}
.spp-thumb-atelier   { background-image: linear-gradient(135deg,#0d0c0a 0%,#3a2618 60%,#d6b985 100%); }
.spp-thumb-editorial { background-image: url('preview-matrix/transitional__white-cream.jpg'); }
.spp-thumb-cinematic { background-image: url('preview-matrix/modern__navy.jpg'); }
.spp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spp-name {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: #f7f2e6;
}
.spp-desc {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: rgba(247,242,230,0.55);
}
.spp-foot {
  margin-top: 8px;
  padding: 6px 4px 0;
  border-top: 1px solid rgba(247,242,230,0.06);
}
.spp-foot-msg {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: rgba(247,242,230,0.40);
}

/* ============================================================
   CURSOR REVEAL LAYER — "atelier" hero style
   The reveal layer sits BEHIND the hero scrim. As cursor moves,
   we punch a circular mask through the scrim so the cursor area
   shows the cycling cabinet finish underneath. Subtle, magical.
   ============================================================ */
.hero-rich .hero-reveal-layer {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero-rich .reveal-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.22,1,0.36,1);
}
.hero-rich .reveal-img.is-active { opacity: 1; }

/* When atelier is the active hero style, punch a hole through the scrim
   so reveal-layer shows under the cursor. Mask centered on --mx,--my. */
.hero-rich[data-hero-style="atelier"] .hero-scrim {
  --mx: 50%;
  --my: 50%;
  --reveal-r: 220px;
  /* Use an SVG mask: dark everywhere EXCEPT a soft circle around cursor */
  -webkit-mask-image: radial-gradient(circle var(--reveal-r) at var(--mx) var(--my),
    transparent 0%,
    transparent 25%,
    rgba(0,0,0,0.5) 55%,
    #000 95%);
          mask-image: radial-gradient(circle var(--reveal-r) at var(--mx) var(--my),
    transparent 0%,
    transparent 25%,
    rgba(0,0,0,0.5) 55%,
    #000 95%);
  transition: -webkit-mask-image 0.05s linear, mask-image 0.05s linear;
}
/* Soft brand-warm ring around the reveal area */
.hero-rich[data-hero-style="atelier"]::after {
  content: '';
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),
    transparent 64%,
    rgba(214,185,133,0.18) 70%,
    rgba(214,185,133,0.08) 78%,
    transparent 90%);
  mix-blend-mode: screen;
  transition: background 0.05s linear;
}

/* Hero reveal hint — tiny pill that says "move your cursor" */
.hero-reveal-hint {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(13,12,10,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(247,242,230,0.10);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: rgba(247,242,230,0.78);
  opacity: 0;
  animation: revealHintIn 0.6s cubic-bezier(0.22,1,0.36,1) 1.5s forwards,
             revealHintOut 0.5s ease 7.5s forwards;
  pointer-events: none;
}
.reveal-hint-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d6b985;
  box-shadow: 0 0 0 0 rgba(214,185,133,0.7);
  animation: revealDotPulse 1.8s ease infinite;
}
@keyframes revealHintIn {
  to { opacity: 1; }
}
@keyframes revealHintOut {
  to { opacity: 0; }
}
@keyframes revealDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(214,185,133,0.7); }
  100% { box-shadow: 0 0 0 14px rgba(214,185,133,0); }
}
/* Hide the hint once the user has moved cursor */
.hero-rich[data-cursor-moved="true"] .hero-reveal-hint {
  animation: revealHintOut 0.4s ease forwards;
}

/* ===== Editorial style: single elegant kitchen, calmer scrim ===== */
.hero-rich[data-hero-style="editorial"] .hero-reveal-layer { display: none; }
.hero-rich[data-hero-style="editorial"] .hero-slides {
  filter: blur(0px) saturate(0.95) brightness(0.78);
}
.hero-rich[data-hero-style="editorial"] .hero-slide {
  filter: blur(0px) saturate(0.95) brightness(0.78);
  opacity: 0 !important;
  animation: none !important;
}
.hero-rich[data-hero-style="editorial"] .hero-slide:first-child { opacity: 1 !important; }
.hero-rich[data-hero-style="editorial"] .hero-scrim {
  background:
    linear-gradient(180deg,
      rgba(8,7,6,0.30) 0%,
      rgba(8,7,6,0.12) 30%,
      rgba(8,7,6,0.18) 60%,
      rgba(8,7,6,0.65) 100%) !important;
}

/* ===== Cinematic style: rapid 5-photo cycle, full color ===== */
.hero-rich[data-hero-style="cinematic"] .hero-reveal-layer { display: none; }
.hero-rich[data-hero-style="cinematic"] .hero-slide {
  filter: blur(0px) saturate(1.0) brightness(0.62);
  animation-duration: 16s !important;
}
.hero-rich[data-hero-style="cinematic"] .hero-scrim {
  background:
    linear-gradient(180deg,
      rgba(8,7,6,0.34) 0%,
      rgba(8,7,6,0.20) 35%,
      rgba(8,7,6,0.34) 65%,
      rgba(8,7,6,0.78) 100%),
    radial-gradient(ellipse 80% 70% at 50% 55%,
      rgba(8,7,6,0.40) 0%,
      transparent 75%) !important;
}

.hero-rich .hero-tag {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 6px 0 4px;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.65),
    0 0 32px rgba(0,0,0,0.45);
}
.hero-rich .hero-tag span { display: block; }
.hero-rich .hero-tag-italic {
  font-style: italic;
  font-weight: 500;
  /* brighter, less warm so it doesn't disappear into a warm bg */
  color: #f0d9a8;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.75),
    0 0 28px rgba(0,0,0,0.55);
}

.hero-rich .hero-sub {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: rgba(247,242,230,0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  margin: 0 0 22px;
  max-width: 580px;
  line-height: 1.6;
}

.hero-rich .hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-rich .hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              background 0.3s ease,
              box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}
.hero-rich .hero-cta.primary {
  background: var(--cream, #f7f2e6);
  color: var(--ink, #0d0c0a);
  box-shadow: 0 8px 24px rgba(13,12,10,0.22);
}
.hero-rich .hero-cta.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(13,12,10,0.36);
}
.hero-rich .hero-cta.primary .cta-arrow {
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.hero-rich .hero-cta.primary:hover .cta-arrow {
  transform: translateX(6px);
}
.hero-rich .hero-cta.ghost {
  background: rgba(247,242,230,0.10);
  color: var(--cream, #f7f2e6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(247,242,230,0.18);
}
.hero-rich .hero-cta.ghost:hover {
  background: rgba(247,242,230,0.18);
  transform: translateY(-2px);
}
.hero-rich .cta-icon svg {
  width: 16px;
  height: 16px;
}

/* Stat strip — anchored absolute to bottom, never overlaps mark */
.hero-rich .hero-stats {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 24px;
  background: rgba(13,12,10,0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(247,242,230,0.10);
  border-radius: 18px;
  max-width: calc(100% - 48px);
  width: fit-content;
}
.hero-rich .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 5;
}
.hero-rich .hstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
  position: relative;
}
/* Number + suffix on the same baseline */
.hero-rich .hstat-num {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  letter-spacing: -0.02em;
  color: var(--cream, #f7f2e6);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.hero-rich .hstat-prefix,
.hero-rich .hstat-suffix {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.5em; /* relative to the parent number */
  color: var(--copper, #d6b985);
  font-weight: 600;
  vertical-align: super;
  line-height: 1;
}
.hero-rich .hstat-prefix {
  margin-right: 2px;
  vertical-align: super;
}
.hero-rich .hstat-suffix {
  margin-left: 2px;
  vertical-align: super;
}
.hero-rich .hstat-lab {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: rgba(247,242,230,0.85);
  margin-top: 6px;
  text-align: center;
  line-height: 1.4;
  font-weight: 400;
  white-space: nowrap;
}
.hero-rich .hstat-rule {
  width: 1px;
  height: 32px;
  background: rgba(247,242,230,0.18);
}

/* Mobile compact */
@media (max-width: 720px) {
  .hero-rich {
    padding: 18px 20px 24px;
  }
  .hero-rich .hero-stats {
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
  }
  .hero-rich .hstat {
    min-width: 64px;
  }
  .hero-rich .hstat-num {
    font-size: 22px;
  }
  .hero-rich .hstat-lab {
    font-size: 8px;
  }
  .hero-rich .hstat-rule {
    height: 24px;
  }
  .hero-rich .hero-cta-row {
    flex-direction: column;
    width: 100%;
  }
  .hero-rich .hero-cta {
    justify-content: center;
    width: 100%;
  }
  .hero-rich .hero-pill {
    font-size: 9px;
    padding: 6px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rich .hero-pill .dot.pulse,
  .hero-rich .hstat-num {
    animation: none !important;
  }
}


/* ============================================================
   DAY → NIGHT HOVER on gallery tiles + module images
   Same kitchen, different lighting story. CSS-only filter swap
   so it's instant + zero API cost. Reveals detail by INCREASING
   contrast on hover instead of zooming out (zoom kills detail).
   ============================================================ */

/* Gallery tiles — image stays sharp at full daylight always.
   Detail circles (separate elements injected by cc-detail-circles.js)
   bloom from real points on the photo on hover, showing img2img'd
   close-ups of the SAME kitchen at different angles. */
.gallery-strip .tile {
  position: relative;
  overflow: visible !important;
  transition: transform 1.2s cubic-bezier(0.22,1,0.36,1) !important;
}
.gallery-strip .tile::before,
.gallery-strip .tile::after {
  content: none !important;
  display: none !important;
}
.gallery-strip .tile:hover {
  transform: scale(1.02) !important;
}

/* Module figure images get the same day→night treatment */
.module .img-wrap {
  position: relative;
  overflow: hidden !important;
}
.module .img-wrap > img {
  transition: filter 1.4s cubic-bezier(0.22,1,0.36,1),
              transform 1.2s cubic-bezier(0.22,1,0.36,1) !important;
}
.module .img-wrap:hover > img {
  filter: brightness(0.7) saturate(1.2) contrast(1.15) !important;
  transform: scale(1.03) !important;
}
.module .img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(255,205,150,0.30) 0%,
    rgba(255,205,150,0.08) 40%,
    transparent 75%);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}
.module .img-wrap:hover::after {
  opacity: 1;
}


/* ============================================================
   BRAND ROW "known-for" taglines — verified from each brand site
   Sit subtly under the brand name, copper hue, mono-spaced.
   ============================================================ */

/* ============================================================
   BRAND ROW READABILITY FIX
   Background photo varies in brightness — add a uniform dark
   gradient under the text so contrast is consistent everywhere.
   Plus stronger text shadows + brighter text color.
   ============================================================ */

/* Dark gradient sits between the bg photo and the text — ALWAYS ON
   so brand rows are readable regardless of bg photo brightness */
.brands-stage .brand-row::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
    rgba(13,12,10,0.78) 0%,
    rgba(13,12,10,0.65) 60%,
    rgba(13,12,10,0.50) 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  height: 100% !important;
  width: 100% !important;
  opacity: 0.92;
  transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1) !important;
}
.brands-stage .brand-row:hover::before {
  opacity: 1;
  background: linear-gradient(90deg,
    rgba(13,12,10,0.82) 0%,
    rgba(13,12,10,0.55) 100%) !important;
}

/* Brand row text — readable over any photo, hover or not */
.brands-stage .brand-row {
  position: relative;
}
.brands-stage .brand-row > * {
  position: relative;
  z-index: 2;
}
/* Default (non-hover) — text already high-contrast over the always-on scrim */
.brands-stage .brand-row h3,
.brands-stage .brand-row .num,
.brands-stage .brand-row .arrow {
  color: var(--cream, #f7f2e6) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.brands-stage .brand-row:hover h3,
.brands-stage .brand-row:hover .series,
.brands-stage .brand-row:hover .num,
.brands-stage .brand-row:hover .arrow {
  color: var(--cream, #f7f2e6) !important;
  text-shadow: 0 1px 14px rgba(0,0,0,0.7);
}

/* Series tagline always readable */
.brand-row .series {
  color: rgba(247,242,230,0.85) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  font-weight: 400;
}

/* Known-for: brighter copper + always-on contrast */
.brand-row .known-for {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #e3c897;
  margin-top: 6px;
  line-height: 1.5;
  opacity: 0.95;
  font-weight: 500;
  text-transform: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.65);
}
.brand-row:hover .known-for {
  color: #f0d49d;
  opacity: 1;
  text-shadow: 0 1px 10px rgba(0,0,0,0.75);
}


/* ============================================================
   DETAIL CIRCLES — progressive img2img reveal on hover
   Uses CSS Anchor Positioning when supported (Chrome 125+),
   falls back to absolute % coords otherwise.
   ============================================================ */

.cc-detail-circle {
  position: absolute;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  margin-top: -55px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.85s cubic-bezier(0.22,1,0.36,1) var(--reveal-delay, 1s),
    transform 1.1s cubic-bezier(0.22,1,0.36,1) var(--reveal-delay, 1s);
  z-index: 4;
}
.cc-detail-circle .cc-detail-anchor {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(214,185,133,0.85);
  box-shadow:
    0 12px 36px rgba(13,12,10,0.42),
    0 0 0 6px rgba(247,242,230,0.15),
    inset 0 0 0 1px rgba(255,255,255,0.18);
  background: var(--ink, #0d0c0a);
}
.cc-detail-circle .cc-detail-img {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: contrast(1.05) saturate(1.05);
}
.cc-detail-circle .cc-detail-label {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--cream, #f7f2e6);
  background: rgba(13,12,10,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}

/* On tile hover — circles bloom in sequentially */
.gallery-strip .tile:hover .cc-detail-circle {
  opacity: 1;
  transform: scale(1);
}
.gallery-strip .tile:hover .cc-detail-circle .cc-detail-label {
  opacity: 1;
}

/* The longer you hover, the slow zoom-in continues — anchor + img scale subtly */
.gallery-strip .tile:hover .cc-detail-circle .cc-detail-img {
  animation: detail-zoom 7s cubic-bezier(0.22,1,0.36,1) var(--reveal-delay, 1s) forwards;
}
@keyframes detail-zoom {
  0%   { background-size: cover; transform: scale(1); }
  100% { background-size: 130% 130%; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-detail-circle {
    transition: none !important;
    animation: none !important;
  }
}


/* ============================================================
   CSS SCROLL-DRIVEN ANIMATIONS — browser-native, no JS
   Available in Chrome 115+, Safari 18+, Firefox 132+
   ============================================================ */

@supports (animation-timeline: view()) {
  /* Editorial section labels reveal letter-by-letter as section enters view */
  .word-band .megaword,
  .module h2,
  .brands-stage .stage-head h2,
  .testimonials-stage .stage-head h2 {
    animation: word-reveal 0.9s cubic-bezier(0.22,1,0.36,1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes word-reveal {
    from {
      opacity: 0;
      transform: translateY(20px);
      letter-spacing: 0.04em;
    }
    to {
      opacity: 1;
      transform: translateY(0);
      letter-spacing: -0.02em;
    }
  }

  /* Module images get a slow ken-burns as they scroll through view */
  .module .img-wrap > img {
    animation: ken-burns linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes ken-burns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.06); }
  }
}

/* ============================================================
   VIEW TRANSITIONS API — same-origin smooth page morphs
   When a user clicks a brand card, the brand image becomes the
   shared element that morphs into the brand page hero.
   Browser does the magic — no JS choreography needed.
   ============================================================ */

@view-transition {
  navigation: auto;
}

/* Each brand row image becomes a named view transition target */
.brand-row {
  view-transition-name: brand-card;
}
.brand-row:nth-child(1)  { view-transition-name: brand-card-1; }
.brand-row:nth-child(2)  { view-transition-name: brand-card-2; }
.brand-row:nth-child(3)  { view-transition-name: brand-card-3; }
.brand-row:nth-child(4)  { view-transition-name: brand-card-4; }
.brand-row:nth-child(5)  { view-transition-name: brand-card-5; }
.brand-row:nth-child(6)  { view-transition-name: brand-card-6; }
.brand-row:nth-child(7)  { view-transition-name: brand-card-7; }
.brand-row:nth-child(8)  { view-transition-name: brand-card-8; }
.brand-row:nth-child(9)  { view-transition-name: brand-card-9; }
.brand-row:nth-child(10) { view-transition-name: brand-card-10; }

::view-transition-old(brand-card),
::view-transition-new(brand-card),
::view-transition-old(brand-card-1),
::view-transition-new(brand-card-1) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-group(*) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================
   VALUE-ROW — replaces the duplicate trust-strip
   Editorial 4-card grid: what's included with every free design.
   Each card has icon, headline, rich-detail paragraph, footnote.
   ============================================================ */

.value-row {
  max-width: 1240px;
  margin: 0 auto;
  padding: 88px 32px 96px;
  position: relative;
  z-index: 2;
}
.value-row-head {
  text-align: left;
  margin-bottom: 44px;
}
.value-row-head .label {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--copper-deep, #9d8350);
  margin-bottom: 14px;
}
.value-row-head h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink, #0d0c0a);
  margin: 0;
  max-width: 720px;
}
.value-row-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .value-row-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .value-row-grid { grid-template-columns: 1fr; }
}

.value-card {
  position: relative;
  padding: 28px 26px 30px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(13,12,10,0.06);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--copper, #d6b985);
  box-shadow: 0 16px 40px rgba(13,12,10,0.10);
}

.value-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(214,185,133,0.18), rgba(157,131,80,0.10));
  color: var(--copper-deep, #9d8350);
  margin-bottom: 4px;
}
.value-icon svg {
  width: 22px;
  height: 22px;
}

.value-card h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink, #0d0c0a);
}

.value-card p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft, #2a2620);
  margin: 0;
  letter-spacing: -0.005em;
}

.value-card .value-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(13,12,10,0.08);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--copper-deep, #9d8350);
}

/* Parallax — module figure images drift slower than scroll */
.module .img-wrap > img,
.gallery-strip .tile {
  --parallax-y: 0px;
  transform: translateY(var(--parallax-y));
}

/* Reveal-on-scroll: sections fade up as they enter viewport */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
              transform 1s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Brand-grid copper accent — line draws under each row as you scroll past */
.brands-stage .brand-row {
  --row-scroll-progress: 0;
}
.brands-stage .brand-row::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: calc(var(--row-scroll-progress, 0) * 100%);
  background: var(--copper, #d6b985);
  opacity: 0.4;
  transition: width 0.35s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage .hero-mark,
  .hero-stage .hero-slides,
  .module .img-wrap > img,
  .gallery-strip .tile,
  .reveal-on-scroll {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}