/* ==========================================================================
   MAISONE Design System
   Fashion Editorial Design Language — Vogue/W Magazine Aesthetic
   ========================================================================== */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* ---------- Custom Properties ---------- */
:root {
  /* Iron/Gothic palette — dramatic shift from warm-Vogue to industrial-gothic */
  --bg: #0a0a0a;
  --bg-alt: #131210;
  --bg-card: #18171a;
  --bg-dark: #050505;
  --bg-warm: #1a1715;
  --text: #ece9e3;
  --text-muted: #94908a;
  --text-light: #5a5752;
  --accent: #ffffff;
  --accent-2: #c9b89a;
  --accent-2-hover: #e0cea8;
  --accent-2-light: rgba(201, 184, 154, 0.1);
  --accent-2-glow: rgba(201, 184, 154, 0.25);
  --accent-warm: #d4b890;
  --accent-champagne: #e0cea8;
  --accent-rose: #b8848c;
  --accent-ivory: #d8d4cc;
  --accent-chrome: #b5b3b0;
  --accent-blood: #6b1a1a;
  --border: #2c2925;
  --border-light: #1d1b18;
  --success: #6cb98d;
  --warning: #d4a93a;
  --error: #b04040;
  --info: #6a8aa8;

  /* Iron/Gothic gradients — chrome shimmer + dark mesh */
  --gradient-warm: linear-gradient(135deg, #8a7e63 0%, #d4c5a9 50%, #8a7e63 100%);
  --gradient-hero: radial-gradient(ellipse at 30% 40%, rgba(201,184,154,0.06) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 70%, rgba(107,26,26,0.04) 0%, transparent 50%);
  --gradient-glass: linear-gradient(135deg, rgba(28,26,24,0.7) 0%, rgba(15,14,13,0.5) 100%);
  --gradient-dark-mesh: radial-gradient(ellipse at 20% 50%, rgba(201,184,154,0.05) 0%, transparent 50%),
                        radial-gradient(ellipse at 80% 20%, rgba(181,179,176,0.04) 0%, transparent 50%),
                        radial-gradient(ellipse at 50% 80%, rgba(107,26,26,0.03) 0%, transparent 50%);
  --gradient-luxury: linear-gradient(180deg, rgba(201,184,154,0.04) 0%, transparent 40%);
  --gradient-section-fade: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  --gradient-chrome: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;

  /* Spacing (8px base) - More generous for luxury feel */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 56px;
  --sp-10: 64px;
  --sp-12: 80px;
  --sp-14: 100px;
  --sp-16: 128px;
  --sp-20: 160px;
  --sp-24: 200px;

  /* Layout */
  --max-width: 1280px;
  --max-width-narrow: 960px;
  --max-width-text: 720px;
  --max-width-wide: 1440px;
  --nav-height: 76px;
  --sidebar-width: 280px;

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;

  /* Shadows - More refined and layered */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(201, 184, 154, 0.12);
  --shadow-page: 0 0 40px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
  --shadow-glow: 0 4px 30px rgba(201, 184, 154, 0.2);
  --shadow-glow-lg: 0 8px 60px rgba(201, 184, 154, 0.25), 0 0 0 1px rgba(201, 184, 154, 0.1);
  --shadow-luxury: 0 4px 20px rgba(0, 0, 0, 0.03), 0 12px 48px rgba(0, 0, 0, 0.05);

  /* Transitions - More refined easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-editorial: 800ms;
  --duration-cinematic: 1200ms;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--text);
  background-color: var(--bg);
  min-height: 100vh;
  position: relative;
  letter-spacing: 0.005em;
}

/* Film grain overlay — heavier on dark for cinematic register */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* Atmospheric backdrop — radial chrome glow + oxide accent, fixed to viewport */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(201, 184, 154, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(107, 26, 26, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 50%, rgba(28, 28, 30, 0.6) 0%, transparent 80%);
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.t-display-hero {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 0.93;
  letter-spacing: -0.035em;
}

.t-display-xl {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.t-display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.t-display-md {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.t-display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.t-heading {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.t-section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.t-pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-muted);
}

.t-body-lg {
  font-size: 1.125rem;
  line-height: 1.85;
  letter-spacing: 0.005em;
}

.t-body {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.005em;
}

.t-body-sm {
  font-size: 0.875rem;
  line-height: 1.7;
}

.t-caption {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.t-overline {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.t-serif {
  font-family: var(--font-display);
}

.t-italic {
  font-style: italic;
}

.t-muted {
  color: var(--text-muted);
}

.t-light {
  color: var(--text-light);
}

.t-accent {
  color: var(--accent-2);
}

.t-center { text-align: center; }
.t-right { text-align: right; }
.t-upper {
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.t-balance { text-wrap: balance; }

/* Editorial drop cap */
.t-dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 3.5em;
  float: left;
  line-height: 0.8;
  margin-right: 0.1em;
  margin-top: 0.05em;
  font-weight: 400;
  color: var(--accent-2);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}

.container--text {
  max-width: var(--max-width-text);
}

.container--wide {
  max-width: var(--max-width-wide);
}

.section {
  padding: var(--sp-20) 0;
  position: relative;
}

.section--sm {
  padding: var(--sp-12) 0;
}

.section--lg {
  padding: var(--sp-24) 0;
}

.section--xl {
  padding: 240px 0;
}

.section--alt {
  background-color: var(--bg-alt);
}

.section--warm {
  background-color: var(--bg-warm);
}

/* Luxury vertical rhythm between sections */
.section + .section:not(.section--dark):not(.section--alt) {
  border-top: 1px solid var(--border-light);
}

.section--alt + .section,
.section--dark + .section {
  border-top: none;
}

/* section--dark styles in Premium Design Punch-Up section below */

.section--dark .t-heading {
  color: var(--accent-2);
}

.section--dark .t-muted {
  color: rgba(255, 255, 255, 0.6);
}

/* Full-bleed editorial section */
.section--editorial {
  padding: var(--sp-20) 0;
  position: relative;
  overflow: hidden;
}

.section--editorial::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, var(--accent-2), transparent);
  opacity: 0.3;
}

/* Grid */
.grid {
  display: grid;
  gap: var(--sp-7);
}

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

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

@media (max-width: 768px) {
  .grid { gap: var(--sp-6); }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* Spacing */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mb-10 { margin-bottom: var(--sp-10); }
.mb-12 { margin-bottom: var(--sp-12); }

.p-4 { padding: var(--sp-4); }
.p-5 { padding: var(--sp-5); }
.p-6 { padding: var(--sp-6); }
.p-8 { padding: var(--sp-8); }
.p-10 { padding: var(--sp-10); }

/* ---------- Animation Utilities ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-editorial) var(--ease-editorial),
              transform var(--duration-editorial) var(--ease-editorial);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 120ms; }
.fade-in-delay-2 { transition-delay: 240ms; }
.fade-in-delay-3 { transition-delay: 360ms; }
.fade-in-delay-4 { transition-delay: 480ms; }
.fade-in-delay-5 { transition-delay: 600ms; }
.fade-in-delay-6 { transition-delay: 720ms; }

/* Reveal class for scroll-triggered animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-editorial) var(--ease-editorial),
              transform var(--duration-editorial) var(--ease-editorial);
}

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

.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-editorial) var(--ease-editorial),
              transform var(--duration-editorial) var(--ease-editorial);
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-editorial) var(--ease-editorial),
              transform var(--duration-editorial) var(--ease-editorial);
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-editorial) var(--ease-editorial),
              transform var(--duration-editorial) var(--ease-editorial);
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children animation */
.stagger-children .fade-in:nth-child(1) { transition-delay: 0ms; }
.stagger-children .fade-in:nth-child(2) { transition-delay: 100ms; }
.stagger-children .fade-in:nth-child(3) { transition-delay: 200ms; }
.stagger-children .fade-in:nth-child(4) { transition-delay: 300ms; }
.stagger-children .fade-in:nth-child(5) { transition-delay: 400ms; }
.stagger-children .fade-in:nth-child(6) { transition-delay: 500ms; }

/* Hover lift - see components.css for enhanced version */

/* Line reveal */
.line-reveal {
  position: relative;
  overflow: hidden;
}

.line-reveal::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--ease-out);
}

.line-reveal:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Elegant Dividers ---------- */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  border: none;
}

.divider--accent {
  background: var(--accent-2);
  width: 60px;
  height: 2px;
}

.divider--ornament {
  width: 100%;
  height: 1px;
  background: var(--border);
  border: none;
  position: relative;
  margin: var(--sp-10) auto;
  max-width: var(--max-width);
}

.divider--ornament::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.section--alt .divider--ornament::after {
  background: var(--bg-alt);
}

.divider--editorial {
  width: 100%;
  text-align: center;
  position: relative;
  margin: var(--sp-12) auto;
}

.divider--editorial::before,
.divider--editorial::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 20px);
  height: 1px;
  background: var(--border);
}

.divider--editorial::before { left: 0; }
.divider--editorial::after { right: 0; }

/* ---------- Image Placeholders (Editorial Patterns) ---------- */
.editorial-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--text-light);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #f0ede7 0%, #e6e3dc 30%, #dbd7ce 50%, #e6e3dc 70%, #f0ede7 100%);
  letter-spacing: 0.02em;
}

.editorial-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(201, 184, 154, 0.03) 20px,
      rgba(201, 184, 154, 0.03) 21px
    );
}

.editorial-placeholder::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border: 1px solid rgba(201, 184, 154, 0.08);
}

.editorial-placeholder span {
  position: relative;
  z-index: 1;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid rgba(201, 184, 154, 0.1);
  background: rgba(250, 250, 248, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  .section {
    padding: var(--sp-12) 0;
  }

  .section--sm {
    padding: var(--sp-8) 0;
  }

  .container {
    padding: 0 var(--sp-4);
  }

  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--sp-3);
  }
}

/* Visually hidden */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   ELEVATED EDITORIAL ANIMATIONS & EFFECTS
   ========================================================================== */

/* ---------- Keyframe Animations ---------- */

/* Fade up with stagger - for sequential element reveals */
@keyframes fadeUpStagger {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Line reveal - horizontal line drawing in */
@keyframes revealLine {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Counter scroll / number roll effect */
@keyframes counterScroll {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Gold/bronze shimmer sweep */
@keyframes shimmerSweep {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

/* Gentle float for premium elements */
@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Subtle pulse glow */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 184, 154, 0);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(201, 184, 154, 0.15);
  }
}

/* Text clip reveal - for dramatic headings */
@keyframes clipReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

/* Scale in with bounce */
@keyframes scaleInBounce {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  60% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* Rotate in subtle */
@keyframes rotateInSubtle {
  from {
    opacity: 0;
    transform: rotate(-2deg) translateY(20px);
  }
  to {
    opacity: 1;
    transform: rotate(0) translateY(0);
  }
}

/* ---------- Shimmer / Premium Shine Effect ---------- */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 184, 154, 0.06),
    rgba(255, 255, 255, 0.1),
    rgba(201, 184, 154, 0.06),
    transparent
  );
  animation: shimmerSweep 4s ease-in-out infinite;
  pointer-events: none;
}

/* Bronze shimmer variant for dark backgrounds */
.shimmer--bronze::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 184, 154, 0.1),
    rgba(160, 136, 104, 0.2),
    rgba(201, 184, 154, 0.1),
    transparent
  );
}

/* ---------- Staggered Fade-Up Animation ---------- */
.fade-up-stagger > * {
  opacity: 0;
  transform: translateY(40px);
}

.fade-up-stagger.visible > *:nth-child(1) { animation: fadeUpStagger 0.8s var(--ease-editorial) 0ms forwards; }
.fade-up-stagger.visible > *:nth-child(2) { animation: fadeUpStagger 0.8s var(--ease-editorial) 120ms forwards; }
.fade-up-stagger.visible > *:nth-child(3) { animation: fadeUpStagger 0.8s var(--ease-editorial) 240ms forwards; }
.fade-up-stagger.visible > *:nth-child(4) { animation: fadeUpStagger 0.8s var(--ease-editorial) 360ms forwards; }
.fade-up-stagger.visible > *:nth-child(5) { animation: fadeUpStagger 0.8s var(--ease-editorial) 480ms forwards; }
.fade-up-stagger.visible > *:nth-child(6) { animation: fadeUpStagger 0.8s var(--ease-editorial) 600ms forwards; }
.fade-up-stagger.visible > *:nth-child(7) { animation: fadeUpStagger 0.8s var(--ease-editorial) 720ms forwards; }
.fade-up-stagger.visible > *:nth-child(8) { animation: fadeUpStagger 0.8s var(--ease-editorial) 840ms forwards; }

/* ---------- Line Reveal Animation ---------- */
.reveal-line {
  position: relative;
}

.reveal-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: left;
}

.reveal-line.visible::after {
  animation: revealLine 1s var(--ease-editorial) 0.3s forwards;
}

/* ---------- Counter Scroll Animation ---------- */
.counter-scroll {
  overflow: hidden;
  display: inline-block;
}

.counter-scroll .counter-scroll__inner {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
}

.counter-scroll.visible .counter-scroll__inner {
  animation: counterScroll 0.8s var(--ease-out) forwards;
}

/* ---------- Magazine Pull-Quote Styling ---------- */
.t-pull-quote--editorial {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  position: relative;
  padding: var(--sp-10) var(--sp-12);
  margin: var(--sp-10) auto;
  max-width: 800px;
  text-align: center;
  letter-spacing: -0.01em;
}

.t-pull-quote--editorial::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: 0.5;
}

.t-pull-quote--editorial::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: 0.5;
}

/* ---------- Editorial Divider Patterns ---------- */

/* Diamond divider */
.divider--diamond {
  width: 100%;
  height: 1px;
  background: var(--border);
  position: relative;
  margin: var(--sp-12) auto;
  max-width: var(--max-width);
}

.divider--diamond::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--accent-2);
  opacity: 0.4;
}

.divider--diamond::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent-2);
  opacity: 0.25;
  background: var(--bg);
}

.section--alt .divider--diamond::after,
.section--dark .divider--diamond::after {
  background: inherit;
}

/* Flourish divider - three dots */
.divider--flourish {
  width: 100%;
  text-align: center;
  position: relative;
  margin: var(--sp-12) auto;
  line-height: 0;
}

.divider--flourish::before {
  content: '\2022  \2022  \2022';
  font-size: 0.5rem;
  letter-spacing: 1em;
  color: var(--accent-2);
  opacity: 0.5;
}

/* Vertical editorial line */
.divider--vertical {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--accent-2), transparent);
  margin: 0 auto;
  opacity: 0.4;
}

/* ---------- Magazine Spread Layout ---------- */
.magazine-spread {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--sp-14);
  align-items: center;
}

.magazine-spread--reverse {
  grid-template-columns: 0.8fr 1.2fr;
}

.magazine-spread__image {
  position: relative;
}

.magazine-spread__image::after {
  content: '';
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  right: calc(-1 * var(--sp-5));
  bottom: calc(-1 * var(--sp-5));
  border: 1px solid var(--accent-2);
  opacity: 0.15;
  border-radius: var(--radius-md);
  pointer-events: none;
}

.magazine-spread__content {
  padding: var(--sp-8) 0;
}

@media (max-width: 768px) {
  .magazine-spread,
  .magazine-spread--reverse {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .magazine-spread__image::after {
    display: none;
  }
}

/* ---------- Premium Card Lift Effect (Perspective) ---------- */
.hover-lift-premium {
  transition: transform 0.5s var(--ease-out),
              box-shadow 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out);
  transform: perspective(1000px) rotateX(0) rotateY(0) translateZ(0);
  will-change: transform;
}

.hover-lift-premium:hover {
  transform: perspective(1000px) rotateX(-1deg) rotateY(1deg) translateZ(10px) translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(201, 184, 154, 0.12);
  border-color: rgba(201, 184, 154, 0.2);
}

/* ---------- Button Shine Sweep (Light Reflection) ---------- */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 30%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: rotate(25deg) translateX(-200%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}

.btn-shine:hover::after {
  transform: rotate(25deg) translateX(500%);
}

/* ---------- Floating Label Form Inputs ---------- */
.form-group--float {
  position: relative;
  margin-bottom: var(--sp-6);
}

.form-group--float .form-input {
  padding: 22px 18px 10px;
  font-size: 0.9375rem;
}

.form-group--float .form-label--float {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-light);
  transition: all 0.25s var(--ease-out);
  pointer-events: none;
  margin: 0;
}

.form-group--float .form-input:focus ~ .form-label--float,
.form-group--float .form-input:not(:placeholder-shown) ~ .form-label--float {
  top: 12px;
  transform: translateY(0);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.form-group--float textarea.form-input ~ .form-label--float {
  top: 22px;
  transform: translateY(0);
}

.form-group--float textarea.form-input:focus ~ .form-label--float,
.form-group--float textarea.form-input:not(:placeholder-shown) ~ .form-label--float {
  top: 8px;
}

/* ---------- Number Rolling Animation Styles ---------- */
.stat-roll {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
  line-height: 1;
}

.stat-roll__digit {
  display: inline-block;
  animation: counterScroll 0.6s var(--ease-out) forwards;
  animation-play-state: paused;
}

.stat-roll.visible .stat-roll__digit {
  animation-play-state: running;
}

.stat-roll.visible .stat-roll__digit:nth-child(1) { animation-delay: 0ms; }
.stat-roll.visible .stat-roll__digit:nth-child(2) { animation-delay: 80ms; }
.stat-roll.visible .stat-roll__digit:nth-child(3) { animation-delay: 160ms; }
.stat-roll.visible .stat-roll__digit:nth-child(4) { animation-delay: 240ms; }
.stat-roll.visible .stat-roll__digit:nth-child(5) { animation-delay: 320ms; }

/* ---------- Hero Text Cascade Animation ---------- */
@keyframes heroCascade {
  from {
    opacity: 0;
    transform: translateY(60px) rotateX(-10deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
    filter: blur(0);
  }
}

.hero-cascade > * {
  opacity: 0;
}

.hero-cascade.visible > *:nth-child(1) { animation: heroCascade 1s var(--ease-editorial) 0.1s forwards; }
.hero-cascade.visible > *:nth-child(2) { animation: heroCascade 1s var(--ease-editorial) 0.25s forwards; }
.hero-cascade.visible > *:nth-child(3) { animation: heroCascade 1s var(--ease-editorial) 0.4s forwards; }
.hero-cascade.visible > *:nth-child(4) { animation: heroCascade 1s var(--ease-editorial) 0.55s forwards; }
.hero-cascade.visible > *:nth-child(5) { animation: heroCascade 1s var(--ease-editorial) 0.7s forwards; }

/* ---------- Editorial Section Separator ---------- */
.section-separator {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-separator::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--border) 30%, var(--border) 70%, transparent 100%);
}

.section-separator__icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-separator__icon::after {
  content: '';
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-warm, var(--accent-warm)));
  transform: rotate(45deg);
  opacity: 0.7;
}

.section--alt + .section-separator .section-separator__icon {
  background: var(--bg-alt);
}

/* ==========================================================================
   PREMIUM DESIGN PUNCH-UP
   Glassmorphism, gradient meshes, micro-interactions, parallax
   ========================================================================== */

/* ---------- Gradient Mesh Backgrounds ---------- */
.section--mesh {
  position: relative;
}

.section--mesh::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-hero);
  pointer-events: none;
  z-index: 0;
}

.section--mesh > .container {
  position: relative;
  z-index: 1;
}

/* Animated gradient orbs for hero sections */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  animation: orbFloat 20s ease-in-out infinite;
  will-change: transform;
}

.gradient-orb--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201,184,154,0.15) 0%, transparent 70%);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.gradient-orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201,184,154,0.12) 0%, transparent 70%);
  bottom: 10%;
  left: -5%;
  animation-delay: -7s;
}

.gradient-orb--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(184, 132, 140,0.08) 0%, transparent 70%);
  top: 40%;
  left: 30%;
  animation-delay: -14s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-20px, 30px) scale(0.95); }
  75% { transform: translate(20px, 10px) scale(1.02); }
}

/* ---------- Glassmorphism ---------- */
.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.glass--dark {
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- Premium Section Accents ---------- */

/* Top gradient line accent for sections */
.section--accent-top {
  position: relative;
}

.section--accent-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-2) 30%, var(--accent-warm) 50%, var(--accent-2) 70%, transparent 100%);
  opacity: 0.4;
}

/* Decorative accent dots */
.accent-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent-2);
  border-radius: 50%;
  opacity: 0.5;
}

/* Decorative diagonal lines pattern (subtle) */
.section--pattern {
  position: relative;
}

.section--pattern::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 12px,
      rgba(201, 184, 154, 0.03) 12px,
      rgba(201, 184, 154, 0.03) 13px
    );
  pointer-events: none;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at top right, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, black 30%, transparent 70%);
}

/* ---------- Premium Typography Accents ---------- */

/* Gradient text for display headings */
.t-gradient {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Underline accent for section titles */
.t-underline-accent {
  position: relative;
  display: inline-block;
}

.t-underline-accent::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--gradient-warm);
  border-radius: 1px;
}

/* Centered underline variant */
.t-center .t-underline-accent::after,
.t-underline-accent--center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Section Header Enhancement ---------- */
.section-header-editorial {
  text-align: center;
  margin-bottom: var(--sp-14);
  position: relative;
}

.section-header-editorial .t-heading {
  position: relative;
  display: inline-block;
}

.section-header-editorial .t-heading::before,
.section-header-editorial .t-heading::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--accent-2);
  opacity: 0.35;
}

.section-header-editorial .t-heading::before {
  right: calc(100% + 14px);
}

.section-header-editorial .t-heading::after {
  left: calc(100% + 14px);
}

/* ---------- Enhanced Scroll Reveal Variants ---------- */

/* Blur-in reveal */
.blur-in {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-editorial),
              filter 0.8s var(--ease-editorial),
              transform 0.8s var(--ease-editorial);
}

.blur-in.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Clip reveal (wipe up) */
.clip-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--ease-editorial);
}

.clip-reveal.visible {
  clip-path: inset(0 0 0 0);
}

/* Mask reveal for images */
.mask-reveal {
  position: relative;
  overflow: hidden;
}

.mask-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 2;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1s var(--ease-editorial);
}

.mask-reveal.visible::before {
  transform: scaleY(0);
  transform-origin: bottom;
}

/* ---------- Enhanced Hover Micro-Interactions ---------- */

/* Link underline slide */
.link-hover {
  position: relative;
  display: inline-block;
}

.link-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease-out);
}

.link-hover:hover::after {
  width: 100%;
}

/* Card tilt on hover (subtle 3D) */
.card-tilt {
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-tilt:hover {
  transform: perspective(1000px) rotateX(-2deg) rotateY(2deg) translateY(-8px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(201, 184, 154, 0.12);
}

/* Icon float animation on card hover */
.card:hover .icon,
.card:hover .guarantee-icon {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(201, 184, 154, 0.15);
}

/* ---------- Premium Animated Border (for featured elements) ---------- */
@keyframes borderGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.border-glow {
  position: relative;
}

.border-glow::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background: var(--gradient-warm);
  z-index: -1;
  opacity: 0.3;
  animation: borderGlow 4s ease-in-out infinite;
}

/* ---------- Parallax-like Scroll Offset ---------- */
.parallax-subtle {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---------- Animated Counter Styles ---------- */
.counter-animated {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1ch;
}

/* ---------- Scroll Progress Indicator ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--gradient-warm);
  z-index: 1001;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ---------- Section Reveal Line ---------- */
.reveal-hr {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  margin: 0 auto;
  transition: width 1.2s var(--ease-editorial);
}

.reveal-hr.visible {
  width: min(400px, 80%);
}

/* ---------- Dark Section Enhancements ---------- */
.section--dark {
  background-color: var(--bg-dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.section--dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-dark-mesh);
  pointer-events: none;
}

.section--dark > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Image Frame Enhancement ---------- */
.editorial-image-frame {
  position: relative;
}

.editorial-image-frame::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: 12px;
  bottom: 12px;
  border: 1px solid rgba(201, 184, 154, 0.15);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}

.editorial-image-frame:hover::before {
  transform: translate(6px, 6px);
  opacity: 0.3;
}

/* ---------- Premium Stats Enhancement ---------- */
.stat--premium {
  position: relative;
  padding: var(--sp-8) var(--sp-6);
}

.stat--premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--gradient-warm);
  opacity: 0.5;
  border-radius: 1px;
}

.stat--premium .stat__value {
  background: linear-gradient(180deg, var(--text) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section--dark .stat--premium .stat__value {
  background: linear-gradient(180deg, #fff 0%, var(--accent-warm) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Pullquote Section Enhancement ---------- */
.section--pullquote {
  padding: var(--sp-16) 0;
  position: relative;
  overflow: hidden;
}

.section--pullquote::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(201,184,154,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Button enhancements moved to components.css (end) for proper specificity */

/* ---------- Premium Testimonial Enhancement ---------- */
.testimonial--premium {
  border: 1px solid transparent;
  background-image: linear-gradient(var(--bg-card), var(--bg-card)),
                    linear-gradient(135deg, rgba(201,184,154,0.3) 0%, transparent 50%, rgba(201,184,154,0.2) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.testimonial--premium .testimonial__quote::before {
  opacity: 0.35;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Pricing Card Enhancement ---------- */
.pricing-card--featured {
  border: 2px solid transparent;
  background-image: linear-gradient(var(--bg-card), var(--bg-card)),
                    linear-gradient(135deg, var(--accent-2) 0%, var(--accent-warm) 50%, var(--accent-2) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 200% 200%;
}

/* ---------- Enhanced Responsive ---------- */
@media (max-width: 768px) {
  .gradient-orb { display: none; }

  .section--pattern::after { display: none; }

  .section-header-editorial .t-heading::before,
  .section-header-editorial .t-heading::after { display: none; }

  .section--pullquote { padding: var(--sp-12) 0; }
}

@media (max-width: 480px) {
  .t-display-lg {
    font-size: clamp(2rem, 6vw, 2.5rem);
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gradient-orb,
  .shimmer::after,
  .shimmer--bronze::after,
  .btn--bronze {
    animation: none;
  }

  .blur-in,
  .clip-reveal,
  .mask-reveal::before,
  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .scale-in,
  .reveal,
  .luxury-reveal,
  .split-reveal,
  .curtain-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    transition: none;
  }

  .parallax-hero,
  .luxury-parallax {
    transform: none !important;
  }
}


/* ==========================================================================
   LUXURY DESIGN PUNCH-UP V2
   Cartier / Hermes / Dior level refinement
   ========================================================================== */

/* ---------- Luxury Reveal Animations ---------- */

/* Elegant upward reveal with opacity and slight scale */
.luxury-reveal {
  opacity: 0;
  transform: translateY(50px) scale(0.98);
  transition: opacity var(--duration-cinematic) var(--ease-luxury),
              transform var(--duration-cinematic) var(--ease-luxury);
}

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

/* Split text reveal - words slide up from behind a mask */
.split-reveal {
  overflow: hidden;
  display: inline-block;
}

.split-reveal > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-luxury);
}

.split-reveal.visible > span {
  transform: translateY(0);
}

/* Curtain reveal - horizontal wipe */
.curtain-reveal {
  position: relative;
  overflow: hidden;
}

.curtain-reveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 1s var(--ease-luxury) 0.2s;
  z-index: 2;
}

.curtain-reveal.visible::after {
  transform: scaleX(0);
  transform-origin: left;
}

/* Stagger delays for luxury sequences */
.luxury-stagger > *:nth-child(1) { transition-delay: 0ms; }
.luxury-stagger > *:nth-child(2) { transition-delay: 150ms; }
.luxury-stagger > *:nth-child(3) { transition-delay: 300ms; }
.luxury-stagger > *:nth-child(4) { transition-delay: 450ms; }
.luxury-stagger > *:nth-child(5) { transition-delay: 600ms; }
.luxury-stagger > *:nth-child(6) { transition-delay: 750ms; }

/* ---------- Luxury Hero Enhancements ---------- */

/* Cinematic hero with layered depth */
.hero--cinematic {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Hero decorative frame lines */
.hero__frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.hero__frame::before,
.hero__frame::after {
  content: '';
  position: absolute;
  background: rgba(201, 184, 154, 0.08);
}

.hero__frame::before {
  top: var(--sp-12);
  left: var(--sp-8);
  width: 1px;
  height: 120px;
}

.hero__frame::after {
  bottom: var(--sp-12);
  right: var(--sp-8);
  width: 1px;
  height: 120px;
}

/* Elegant horizontal rules in hero */
.hero__rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-2), transparent);
  margin: var(--sp-8) 0;
  opacity: 0.4;
}

/* Hero background ambient glow */
.hero__ambient {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.2;
  animation: ambientDrift 25s ease-in-out infinite;
}

.hero__ambient-glow--1 {
  width: 700px;
  height: 700px;
  background: rgba(201, 184, 154, 0.12);
  top: -15%;
  right: -10%;
}

.hero__ambient-glow--2 {
  width: 500px;
  height: 500px;
  background: rgba(201, 184, 154, 0.1);
  bottom: -5%;
  left: -8%;
  animation-delay: -8s;
}

.hero__ambient-glow--3 {
  width: 350px;
  height: 350px;
  background: rgba(184, 132, 140, 0.06);
  top: 35%;
  left: 40%;
  animation-delay: -16s;
}

@keyframes ambientDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(25px, -15px) scale(1.03); }
  66% { transform: translate(-15px, 20px) scale(0.97); }
}

/* ---------- Luxury Section Treatments ---------- */

/* Section with subtle gradient fade */
.section--gradient-fade {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 50%, var(--bg) 100%);
}

/* Section with decorative side markers */
.section--marked {
  position: relative;
}

.section--marked::before {
  content: '';
  position: absolute;
  left: var(--sp-8);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, var(--accent-2), transparent);
  opacity: 0.15;
}

@media (max-width: 1280px) {
  .section--marked::before { display: none; }
}

/* Luxury divider - thin gold line with diamond */
.luxury-divider {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 1px;
  margin: var(--sp-10) auto;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: 0.3;
}

.luxury-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--accent-2);
  opacity: 0.6;
}

/* ---------- Luxury Card Treatments ---------- */

/* Image zoom on hover for cards */
.card__image img,
.card__image-placeholder {
  transition: transform 0.8s var(--ease-luxury);
}

.card:hover .card__image img,
.card:hover .card__image-placeholder {
  transform: scale(1.04);
}

/* Card with luxury border gradient on hover */
.card--luxury {
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  position: relative;
}

.card--luxury::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(201,184,154,0.2), transparent 40%, rgba(201,184,154,0.15));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s var(--ease-luxury);
}

.card--luxury:hover::after {
  opacity: 1;
}

/* ---------- Luxury Link Treatments ---------- */

/* Elegant underline animation for inline links */
.luxury-link {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--accent-2), var(--accent-2));
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease-out);
  padding-bottom: 2px;
}

.luxury-link:hover {
  background-size: 100% 1px;
}

/* ---------- Luxury Image Overlays ---------- */

/* Hover gradient overlay for images */
.img-overlay {
  position: relative;
  overflow: hidden;
}

.img-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.3) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}

.img-overlay:hover::after {
  opacity: 1;
}

/* Image with subtle vignette */
.img-vignette {
  position: relative;
}

.img-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.06) 100%);
  pointer-events: none;
}

/* ---------- Luxury Form Enhancements ---------- */

/* Refined form input with animated border */
.form-input--luxury {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 0.9375rem;
  background: var(--bg-card);
  transition: border-color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out),
              background 0.4s var(--ease-out);
}

.form-input--luxury:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(201, 184, 154, 0.08);
  background: #fff;
}

/* ---------- Luxury Spacing Utilities ---------- */
.luxury-spacer { height: var(--sp-20); }
.luxury-spacer--sm { height: var(--sp-12); }
.luxury-spacer--lg { height: var(--sp-24); }

/* ---------- Luxury Typography Decorations ---------- */

/* Decorative number for ordered items */
.luxury-number {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 300;
  line-height: 1;
  background: linear-gradient(180deg, rgba(201,184,154,0.2) 0%, rgba(201,184,154,0.02) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.04em;
}

/* Elegant horizontal rule */
.luxury-hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: var(--sp-12) 0;
}

/* (section--dark is defined in components.css) */

/* ---------- Mobile Luxury Refinements ---------- */
@media (max-width: 768px) {
  .section {
    padding: var(--sp-14) 0;
  }

  .section--lg {
    padding: var(--sp-16) 0;
  }

  .section + .section {
    border-top: none;
  }

  .hero__frame { display: none; }

  .luxury-spacer { height: var(--sp-12); }
  .luxury-spacer--lg { height: var(--sp-14); }

  .hero__ambient-glow { opacity: 0.12; }
}

@media (max-width: 480px) {
  .section {
    padding: var(--sp-12) 0;
  }

  .t-display-lg {
    font-size: clamp(2rem, 7vw, 2.5rem);
  }

  .t-display-md {
    font-size: clamp(1.625rem, 5vw, 2rem);
  }
}

/* ---------- Print Styles ---------- */
@media print {
  .nav, .footer, .scroll-progress, .sticky-cta,
  .gradient-orb, .hero__ambient, .hero__frame {
    display: none !important;
  }

  .section--dark {
    background: #fff !important;
    color: #000 !important;
  }

  body::before { display: none !important; }
}

/* ==========================================================================
   GOTHIC LUXURY OVERRIDES — dramatic dark register punch-up
   Layered atmosphere, chrome detail, couture letter-spacing, oxidized accents.
   ========================================================================== */

/* --- Display headings: chrome shimmer gradient + couture letterspacing --- */
h1, .h1, .display, .hero__title {
  background: linear-gradient(180deg, #ffffff 0%, #d4d2cd 35%, #b5b3b0 70%, #8a8682 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.015em;
  font-style: italic;
  font-weight: 500;
}
h2, .h2 {
  letter-spacing: -0.012em;
  color: var(--text);
}
h3, .h3 { letter-spacing: 0.01em; }

/* Kicker label treatment — chrome hairline above */
.kicker, [class*="__kicker"], [class*="-kicker"], .eyebrow {
  position: relative;
  letter-spacing: 0.32em !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase;
  color: var(--accent-2) !important;
  padding-top: 1.25rem;
}
.kicker::before, [class*="__kicker"]::before, [class*="-kicker"]::before, .eyebrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-chrome), transparent);
}

/* --- Buttons: chrome-bordered with iron interior --- */
.btn,
.btn--primary,
.cta__btn,
button.cta,
a.cta,
.button-primary {
  background: linear-gradient(180deg, rgba(201, 184, 154, 0.04), rgba(201, 184, 154, 0.10)) !important;
  border: 1px solid rgba(201, 184, 154, 0.4) !important;
  color: var(--text) !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  padding: 1rem 2rem !important;
  border-radius: 0 !important;
  position: relative;
  transition: all 0.3s var(--ease-out) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 30px rgba(0,0,0,0.6) !important;
}
.btn:hover,
.btn--primary:hover,
.cta__btn:hover,
button.cta:hover,
a.cta:hover,
.button-primary:hover {
  background: linear-gradient(180deg, rgba(201, 184, 154, 0.15), rgba(201, 184, 154, 0.25)) !important;
  border-color: var(--accent-2) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 40px rgba(201,184,154,0.2) !important;
}

/* --- Section dividers: chrome hairlines --- */
section + section,
.section + .section {
  position: relative;
}
section + section::before,
.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 10vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-chrome), transparent);
  opacity: 0.5;
}

/* --- Cards: dark with chrome edge --- */
.card,
[class*="__card"],
.feature,
.service-card {
  background: linear-gradient(180deg, rgba(24, 23, 26, 0.6), rgba(10, 10, 10, 0.9)) !important;
  border: 1px solid rgba(201, 184, 154, 0.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.card::before,
[class*="__card"]::before,
.feature::before,
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(201, 184, 154, 0.4) 50%, transparent 90%);
  pointer-events: none;
}
.card:hover,
[class*="__card"]:hover,
.feature:hover,
.service-card:hover {
  border-color: rgba(201, 184, 154, 0.24) !important;
  transform: translateY(-2px);
  transition: all 0.4s var(--ease-out);
}

/* --- Hero block: deeper atmospheric register --- */
.hero,
[class*="hero"]:not(.hero__title) {
  position: relative;
  overflow: hidden;
}
.hero::after,
.section--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(201, 184, 154, 0.06), transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 70%, rgba(107, 26, 26, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > *,
.section--hero > * { position: relative; z-index: 1; }

/* --- Text contrast fixes for dark mode --- */
p, li, td, .body-text, .text-muted {
  color: var(--text-muted);
}
strong, b { color: var(--text); }

/* --- Pull quotes: cinematic contrast --- */
blockquote, .quote, .pullquote {
  color: rgba(236, 233, 227, 0.85) !important;
  font-style: italic;
  border-left: 1px solid rgba(201, 184, 154, 0.4);
  padding-left: 2rem;
}

/* --- Selection — oxide red (subtle) --- */
::selection {
  background: rgba(107, 26, 26, 0.55);
  color: #fff;
}

/* ==========================================================================
   GOTHIC LUXURY — second pass: chrome rails, atmospheric depth, dramatic hero
   ========================================================================== */

/* --- Chrome side rails on the page edges (desktop only) --- */
@media (min-width: 1100px) {
  body::before,
  body::after { z-index: 9999; }

  .page-rails {
    position: fixed;
    top: 0;
    width: 1px;
    height: 100vh;
    z-index: 999;
    pointer-events: none;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(201, 184, 154, 0.12) 15%,
      rgba(181, 179, 176, 0.4) 50%,
      rgba(201, 184, 154, 0.12) 85%,
      transparent 100%);
  }
  .page-rails--left { left: 24px; }
  .page-rails--right { right: 24px; }
}

/* --- Hero punch: bigger, more letterspacing-dramatic, oxide accent line --- */
.hero h1, .hero .h1, .hero__title,
[class*="hero"] h1:first-of-type {
  font-size: clamp(3rem, 7.5vw, 7.5rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.025em !important;
  font-weight: 500 !important;
  font-style: italic !important;
  margin-bottom: 1.5rem !important;
}

/* Hero content gets a chrome hairline above kicker */
.hero .kicker, .hero [class*="kicker"], .hero .eyebrow {
  display: inline-block;
  position: relative;
  margin-bottom: 2.5rem !important;
}

/* --- Section depth: alternate near-black and deeper black --- */
section:nth-child(even),
.section:nth-child(even) {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-dark) 50%, var(--bg) 100%);
}

/* --- Chrome edge frame on key sections --- */
.section--featured,
.feature-block,
.cta-block,
[class*="cta-section"] {
  position: relative;
  border-top: 1px solid rgba(201, 184, 154, 0.12);
  border-bottom: 1px solid rgba(201, 184, 154, 0.12);
}

/* --- Buttons get a subtle chrome shimmer on hover --- */
.btn::after,
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.btn:hover::after,
.btn--primary:hover::after {
  left: 100%;
}

/* --- Number/stat displays: chrome treatment --- */
.stat__value, [class*="__number"], [class*="stat-number"] {
  background: linear-gradient(180deg, #ffffff 0%, #d4d2cd 30%, #b5b3b0 60%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 500;
}

/* --- Footer: deepest darkness, chrome top edge --- */
footer, .footer, .site-footer {
  background: var(--bg-dark) !important;
  border-top: 1px solid rgba(201, 184, 154, 0.18);
  position: relative;
}
footer::before, .footer::before, .site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 18vw, 280px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-chrome), transparent);
}

/* --- Inputs: chrome-bordered iron interior --- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
textarea, select {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(201, 184, 154, 0.2) !important;
  color: var(--text) !important;
  border-radius: 0 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 1px rgba(201, 184, 154, 0.3), inset 0 0 30px rgba(201, 184, 154, 0.04) !important;
}

/* ==========================================================================
   EDITORIAL PUNCH-UP — homepage hero, marquee, manifesto
   Designed to break the SaaS template register and read as Document Journal /
   Apartamento / Acne Paper editorial layout, not a Webflow indie-hacker page.
   ========================================================================== */

/* ----- HERO (editorial rebuild) ----- */
.hero--editorial {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg__letter {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40rem, 90vh, 70rem);
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: var(--accent-2);
  opacity: 0.045;
  bottom: -8vh;
  right: -4vw;
  user-select: none;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(0.2px);
}

.hero-bg__grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.13 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  animation: grain-drift 18s steps(8) infinite;
}

@keyframes grain-drift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1%); }
  40% { transform: translate(1%, -2%); }
  60% { transform: translate(-1%, 2%); }
  80% { transform: translate(2%, -1%); }
  100% { transform: translate(0, 0); }
}

.hero-bg__chrome-glow {
  position: absolute;
  inset: -10vh -10vw;
  background:
    radial-gradient(40% 30% at 18% 35%, rgba(201,184,154,0.10) 0%, transparent 60%),
    radial-gradient(35% 30% at 75% 75%, rgba(107,26,26,0.06) 0%, transparent 60%),
    radial-gradient(60% 40% at 55% 100%, rgba(0,0,0,0.6) 0%, transparent 70%);
}

.hero-meta {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(1.25rem, 2.5vh, 2rem) clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(201,184,154,0.12);
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--nav-height);
}

.hero-meta__left {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.hero-meta__num {
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.32em;
}

.hero-meta__sep {
  width: 32px;
  height: 1px;
  background: rgba(201,184,154,0.4);
}

.hero-meta__right {
  font-weight: 500;
}

.hero-stack {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
  border-right: 1px solid rgba(201,184,154,0.18);
  padding-right: 1.25rem;
}

.hero-stack span:first-child { color: var(--accent-2); }

.hero-editorial-content {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(4rem, 8vh, 7rem);
  padding-top: clamp(3rem, 6vh, 6rem);
  max-width: var(--max-width-wide);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: clamp(2rem, 4vh, 3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
}

.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--accent-2);
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(2rem, 4vh, 3rem);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.hero-headline__line { display: block; }

.hero-headline__line--small {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  font-style: normal;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  padding-left: 0.6em;
}

.hero-headline__line--display {
  font-size: clamp(5rem, 13vw, 12rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.04em;
}

.hero-headline__line--chrome {
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 25%, #ffffff 45%, #d4d2cd 55%, #b5b3b0 65%, #6b6663 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: chrome-sweep 8s ease-in-out infinite;
}

@keyframes chrome-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-deck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-muted);
  max-width: 36rem;
  margin: 0 0 clamp(2.5rem, 5vh, 3.5rem);
}

.hero-actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}

.hero-link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
  position: relative;
  padding-bottom: 0.4rem;
  transition: color 0.3s ease;
}

.hero-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent-2);
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}

.hero-link:hover { color: var(--accent-2); }
.hero-link:hover::after { transform: scaleX(1); }

.hero-rule {
  position: relative;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,184,154,0.35) 30%, rgba(201,184,154,0.35) 70%, transparent 100%);
  margin: 0 clamp(1.5rem, 4vw, 3rem);
}

.hero-seal {
  position: absolute;
  bottom: clamp(0.75rem, 1.5vh, 1.25rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--accent-2);
  opacity: 0.6;
}

@media (max-width: 768px) {
  .hero-stack { display: none; }
  .hero-bg__letter {
    font-size: clamp(28rem, 60vh, 40rem);
    bottom: -4vh;
    right: -8vw;
  }
  .hero-meta { padding: 1rem 1.25rem; font-size: 0.5625rem; letter-spacing: 0.18em; gap: 0.75rem; }
  .hero-meta__sep { width: 18px; }
  .hero-meta__right { display: none; }
  .hero-editorial-content { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero-headline__line--small { font-size: clamp(1.5rem, 5vw, 2rem); padding-left: 0.4em; }
  .hero-headline__line--display { font-size: clamp(3.5rem, 16vw, 6rem); }
}

/* ----- MARQUEE (replaces pull-quote section) ----- */
.marquee-section {
  position: relative;
  background: var(--bg);
  border-top: 1px solid rgba(201,184,154,0.08);
  border-bottom: 1px solid rgba(201,184,154,0.08);
  overflow: hidden;
  padding: clamp(2.5rem, 5vh, 4rem) 0;
}

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  animation: marquee-scroll 40s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-muted);
}

.marquee__track > span:not(.marquee__diamond) {
  color: var(--text);
  white-space: nowrap;
}

.marquee__diamond {
  font-style: normal;
  font-size: 0.5em;
  color: var(--accent-2);
  vertical-align: middle;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

/* ----- MANIFESTO (replaces problem 4-card grid) ----- */
.section--manifesto {
  position: relative;
  background: var(--bg);
  padding: clamp(7rem, 14vh, 12rem) 0;
  overflow: hidden;
}

.section--manifesto::before {
  content: 'PROBLEM';
  position: absolute;
  top: 50%;
  right: -2vw;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.5em;
  color: var(--accent-2);
  opacity: 0.25;
  pointer-events: none;
}

.manifesto {
  display: grid;
  grid-template-columns: 1fr 6fr;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--max-width);
  align-items: start;
}

.manifesto__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(5rem, 9vw, 9rem);
  line-height: 0.85;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
  position: sticky;
  top: 8rem;
}

.manifesto__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(1.75rem, 3.5vh, 2.5rem);
  color: var(--text);
  max-width: 22ch;
}

.manifesto__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-2);
}

.manifesto__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 clamp(2.5rem, 5vh, 4rem);
  max-width: 36rem;
  border-left: 1px solid rgba(201,184,154,0.4);
  padding-left: 1.5rem;
}

.manifesto__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 48rem;
}

.manifesto__list li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vh, 2rem) 0;
  border-top: 1px solid rgba(201,184,154,0.1);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  align-items: baseline;
}

.manifesto__list li:last-child { border-bottom: 1px solid rgba(201,184,154,0.1); }

.manifesto__list li > span:first-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--accent-2);
  letter-spacing: 0.08em;
}

.manifesto__list li strong {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.125rem;
}

@media (max-width: 768px) {
  .section--manifesto::before { display: none; }
  .manifesto {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .manifesto__num { position: static; }
  .manifesto__list li {
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
  }
}

/* ----- PROCESS (editorial, replaces 6-step grid + Gantt) ----- */
.section--process {
  position: relative;
  background: var(--bg);
  padding: clamp(7rem, 14vh, 12rem) 0;
  overflow: hidden;
  border-top: 1px solid rgba(201,184,154,0.08);
}

.section--process::before {
  content: 'PROCESS';
  position: absolute;
  top: clamp(3rem, 8vh, 5rem);
  left: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.42em;
  color: var(--accent-2);
  font-weight: 500;
}

.section--process::after {
  content: 'TWELVE TO TWENTY WEEKS';
  position: absolute;
  top: clamp(3rem, 8vh, 5rem);
  right: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.42em;
  color: rgba(255,255,255,0.32);
  font-weight: 400;
}

.process-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 24rem;
  margin: clamp(2rem, 5vh, 4rem) 0 clamp(4rem, 8vh, 7rem);
  padding-left: clamp(1.5rem, 4vw, 3rem);
}

.process-eyebrow em {
  font-style: italic;
  color: var(--accent-2);
}

.process-list {
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  max-width: var(--max-width);
}

.process-step {
  display: grid;
  grid-template-columns: 8rem 1fr 8rem;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.5rem, 5vh, 4rem) 0;
  border-top: 1px solid rgba(201,184,154,0.12);
  align-items: baseline;
  position: relative;
  transition: background 0.6s ease;
}

.process-step:last-child {
  border-bottom: 1px solid rgba(201,184,154,0.12);
}

.process-step:hover {
  background: linear-gradient(90deg, rgba(201,184,154,0.02) 0%, transparent 100%);
}

.process-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.process-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
  color: var(--text);
}

.process-body h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-2);
}

.process-body p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 36rem;
}

.process-time {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-align: right;
  align-self: start;
  padding-top: 0.6rem;
}

.process-time::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent-2);
  margin: 0 0 0.5rem auto;
  opacity: 0.6;
}

.process-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: clamp(3rem, 6vh, 5rem);
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.process-foot a {
  color: var(--text);
  border-bottom: 1px solid var(--accent-2);
  padding-bottom: 0.3rem;
  transition: color 0.3s ease;
}

.process-foot a:hover { color: var(--accent-2); }

@media (max-width: 768px) {
  .section--process::after { display: none; }
  .process-step {
    grid-template-columns: 4rem 1fr;
    gap: 1.25rem;
  }
  .process-time {
    grid-column: 2;
    text-align: left;
    padding-top: 0.85rem;
  }
  .process-time::before {
    margin-left: 0;
    margin-right: 0;
  }
  .process-num {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
}

/* ----- DUET (editorial split, replaces "For Influencers" 2-col) ----- */
.section--duet {
  position: relative;
  background: var(--bg-alt);
  padding: clamp(7rem, 14vh, 12rem) 0;
  overflow: hidden;
}

.duet {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(3rem, 6vw, 6rem);
  max-width: var(--max-width);
  align-items: start;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.duet__column-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.duet__column-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent-2);
}

.duet__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.875rem, 3.5vw, 2.875rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 2rem;
}

.duet__quote em {
  font-style: italic;
  color: var(--accent-2);
}

.duet__quote-attrib {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  display: block;
  margin-top: 1.5rem;
}

.duet__body p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  max-width: 36rem;
}

.duet__body p:last-of-type { margin-bottom: 2.5rem; }

.duet__body p strong {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.duet__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--accent-2);
  padding: 0.6rem 0;
  transition: color 0.3s ease, gap 0.3s ease;
}

.duet__cta:hover {
  color: var(--accent-2);
  gap: 1.25rem;
}

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

/* ==========================================================================
   SITE-WIDE AESTHETIC LIFT
   Atmospheric layers, typographic enforcement, chrome ornaments,
   editorial border treatments — applied across all existing sections
   without replacing structure.
   ========================================================================== */

/* ----- Body-level atmospheric layer ----- */
body {
  background: var(--bg);
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 120% 80% at 18% 0%, rgba(201,184,154,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 85% 100%, rgba(107,26,26,0.025) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(181,179,176,0.018) 0%, transparent 60%);
  mix-blend-mode: screen;
}

body::after {
  content: '';
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.4;
  mix-blend-mode: overlay;
  animation: site-grain 20s steps(10) infinite;
}

@keyframes site-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-1.5%, 0.8%); }
  40% { transform: translate(0.8%, -1.5%); }
  60% { transform: translate(-0.8%, 1.5%); }
  80% { transform: translate(1.5%, -0.8%); }
  100% { transform: translate(0, 0); }
}

/* Section content sits above atmospheric layers */
section, header, footer, main, nav { position: relative; z-index: 2; }

/* ----- Section separator chrome ornament ----- */
.section-separator,
section + section::before {
  position: relative;
}

.section-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,184,154,0.3) 30%, rgba(201,184,154,0.5) 50%, rgba(201,184,154,0.3) 70%, transparent 100%);
  margin: 0 auto;
  max-width: 60vw;
  position: relative;
}

.section-separator::after {
  content: '\2756';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 0 1rem;
  color: var(--accent-2);
  font-size: 0.6875rem;
  font-style: italic;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
}

.section-separator__icon { display: none; }

/* ----- Site-wide kicker treatment (editorial mono with chrome rule) ----- */
.t-heading,
.section-header-editorial .t-heading {
  font-family: var(--font-body) !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--accent-2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
}

.t-heading::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent-2);
}

/* ----- Display headlines: italic accent treatment ----- */
.t-display-lg,
.t-display-xl,
.t-display-hero {
  text-wrap: balance;
}

.t-display-lg em,
.t-display-xl em,
.t-display-hero em,
.t-section-title em {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- Card editorial treatment ----- */
.card,
.card--flat {
  border: 1px solid rgba(201,184,154,0.1) !important;
  background: linear-gradient(180deg, rgba(28,26,24,0.4) 0%, rgba(15,14,13,0.2) 100%) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.5s var(--ease-out), background 0.5s var(--ease-out), transform 0.5s var(--ease-out) !important;
  position: relative;
}

.card:hover,
.card--flat:hover {
  border-color: rgba(201,184,154,0.3) !important;
  background: linear-gradient(180deg, rgba(40,36,30,0.5) 0%, rgba(20,18,16,0.3) 100%) !important;
  transform: translateY(-2px);
}

.card::before,
.card--flat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--accent-2);
  opacity: 0.5;
  transition: width 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}

.card:hover::before,
.card--flat:hover::before {
  width: 64px;
  opacity: 1;
}

/* ----- Step cards (preserve Gantt + step structure, add editorial polish) ----- */
.step {
  position: relative;
  padding: 2rem 0 !important;
  border-top: 1px solid rgba(201,184,154,0.08);
  background: transparent !important;
}

.step:first-child { border-top: 1px solid rgba(201,184,154,0.2); }
.step:last-child { border-bottom: 1px solid rgba(201,184,154,0.08); }

.step__title {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  color: var(--text) !important;
  letter-spacing: -0.015em !important;
}

.step__text {
  font-family: var(--font-body) !important;
  color: var(--text-muted) !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
}

.step__timeline {
  font-family: var(--font-body) !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--accent-2) !important;
  margin-top: 0.85rem !important;
}

.step__timeline::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent-2);
  vertical-align: middle;
  margin-right: 0.5rem;
  opacity: 0.6;
}

.steps {
  border-radius: 0 !important;
}

/* ----- Gantt timeline polish ----- */
.timeline-gantt {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  position: relative;
}

.timeline-gantt::before {
  content: 'TIMELINE';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.5625rem;
  letter-spacing: 0.45em;
  color: var(--accent-2);
  font-weight: 500;
}

.timeline-gantt .gantt {
  background: linear-gradient(180deg, rgba(28,26,24,0.5) 0%, rgba(15,14,13,0.3) 100%) !important;
  border: 1px solid rgba(201,184,154,0.12) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ----- Pricing card polish ----- */
.pricing-card {
  border: 1px solid rgba(201,184,154,0.1) !important;
  background: linear-gradient(180deg, rgba(28,26,24,0.4) 0%, rgba(15,14,13,0.2) 100%) !important;
  position: relative;
  transition: all 0.5s var(--ease-out) !important;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
}

.pricing-card:hover {
  border-color: rgba(201,184,154,0.35) !important;
  transform: translateY(-4px);
}

.pricing-card--featured {
  border: 1px solid rgba(201,184,154,0.4) !important;
  background: linear-gradient(180deg, rgba(40,36,30,0.6) 0%, rgba(20,18,16,0.4) 100%) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,184,154,0.1) inset;
}

.pricing-card__name {
  font-family: var(--font-body) !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--accent-2) !important;
  font-weight: 500 !important;
  margin-bottom: 1rem !important;
}

.pricing-card__price {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  margin-bottom: 0.5rem !important;
}

.pricing-card__desc {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  color: var(--text-muted) !important;
  font-size: 0.9375rem !important;
}

/* ----- Comparison table polish ----- */
.compare-wrap {
  border: 1px solid rgba(201,184,154,0.12) !important;
  background: linear-gradient(180deg, rgba(28,26,24,0.4) 0%, rgba(15,14,13,0.2) 100%) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.compare-table thead th {
  font-family: var(--font-body) !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--accent-2) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(201,184,154,0.2) !important;
}

.compare-table tbody td:first-child {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
}

.compare-table .col-maisone {
  background: rgba(201,184,154,0.04) !important;
  border-left: 1px solid var(--accent-2) !important;
  border-right: 1px solid var(--accent-2) !important;
  color: var(--text) !important;
}

/* ----- Stats bar polish ----- */
.stats-bar {
  border: none !important;
  background: linear-gradient(90deg, transparent 0%, rgba(28,26,24,0.5) 30%, rgba(28,26,24,0.5) 70%, transparent 100%);
  border-top: 1px solid rgba(201,184,154,0.1);
  border-bottom: 1px solid rgba(201,184,154,0.1);
  position: relative;
}

.stat__value {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat__label {
  font-family: var(--font-body) !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--accent-2) !important;
  font-weight: 500 !important;
}

/* ----- Buttons site-wide polish ----- */
.btn--bronze {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-2-hover) 100%) !important;
  color: var(--bg) !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 1.125rem 2.25rem !important;
  position: relative;
  transition: all 0.5s var(--ease-out) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.btn--bronze::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.btn--bronze:hover {
  box-shadow: 0 12px 40px rgba(201,184,154,0.35);
  transform: translateY(-2px);
}

.btn--bronze:hover::before {
  opacity: 1;
}

.btn--ghost,
.btn--outline {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid rgba(201,184,154,0.4) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 1.125rem 2.25rem !important;
  transition: all 0.5s var(--ease-out) !important;
}

.btn--ghost:hover,
.btn--outline:hover {
  border-color: var(--accent-2) !important;
  color: var(--accent-2) !important;
  background: rgba(201,184,154,0.04) !important;
}

/* ----- Section hairline rules ----- */
.section,
section.section {
  position: relative;
}

.section--accent-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
}

/* ----- Selection color ----- */
::selection {
  background: rgba(201,184,154,0.35);
  color: var(--text);
}

/* ----- Smooth scroll ----- */
html { scroll-behavior: smooth; }

/* ----- Reduced motion respect ----- */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none !important; }
  .marquee__track { animation: none !important; }
}

/* ==========================================================================
   VOGUE-LEVEL EDITORIAL AESTHETIC PUSH
   Magazine pacing, figure metadata, chrome ornaments, photo placeholders
   that read intentional, refined typographic restraint.
   ========================================================================== */

/* ----- Editorial figure / photo placeholder treatment ----- */
.editorial-placeholder,
.editorial-image-frame,
[class*="editorial-placeholder"],
.img-overlay {
  position: relative;
  background:
    linear-gradient(135deg, rgba(28,26,24,0.8) 0%, rgba(15,14,13,0.9) 100%),
    radial-gradient(ellipse 60% 80% at 30% 20%, rgba(201,184,154,0.08) 0%, transparent 60%) !important;
  border: 1px solid rgba(201,184,154,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0 !important;
  isolation: isolate;
}

.editorial-placeholder::before,
.editorial-image-frame::before {
  content: '';
  position: absolute;
  inset: 1.5rem;
  border: 1px solid rgba(201,184,154,0.12);
  pointer-events: none;
}

.editorial-placeholder::after,
.editorial-image-frame::after {
  content: 'FIG. ' counter(figure-num, decimal-leading-zero);
  counter-increment: figure-num;
  position: absolute;
  bottom: 1.5rem;
  left: 1.75rem;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}

.editorial-placeholder span,
.editorial-image-frame span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: -0.005em;
  color: var(--text-muted);
  opacity: 0.45;
  position: relative;
  z-index: 2;
}

body { counter-reset: figure-num; }

/* ----- Chapter / section openings ----- */
.section-header-editorial {
  position: relative;
  margin-bottom: clamp(3rem, 6vh, 5rem);
  padding-top: clamp(1.5rem, 3vh, 2.5rem);
  border-top: 1px solid rgba(201,184,154,0.18);
}

.section-header-editorial::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: var(--accent-2);
}

.section-header-editorial::after {
  content: '\2756';
  position: absolute;
  top: -0.6rem;
  right: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.75rem;
  color: var(--accent-2);
  background: var(--bg);
  padding-left: 0.6rem;
}

/* ----- Editorial running head (top-of-section page metadata) ----- */
section[id]::before {
  content: '';
}

/* ----- Drop cap on first paragraph in editorial sections ----- */
.section--manifesto .manifesto__lead::first-letter,
.duet__body p:first-child::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 4.5em;
  float: left;
  line-height: 0.9;
  margin-right: 0.65rem;
  margin-top: 0.05em;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- Recurring chrome ornament as visual signature ----- */
.chrome-ornament {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: clamp(2rem, 5vh, 4rem) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  letter-spacing: 0.6em;
  color: var(--accent-2);
  position: relative;
  opacity: 0.7;
}

.chrome-ornament::before,
.chrome-ornament::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
}

.chrome-ornament::before { left: 12%; }
.chrome-ornament::after { right: 12%; }

/* ----- Magazine running footer / page numbers ----- */
.section[id]::after {
  /* page metadata anchor - shown via JS or sub-elements as needed */
}

/* ----- Refined typographic hierarchy site-wide ----- */
h1, .h1, h2, .h2, h3, .h3, h4 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  letter-spacing: 0.005em;
}

/* ----- Lead paragraph treatment (first paragraph after heading) ----- */
h1 + p, h2 + p, .t-display-lg + p, .t-display-xl + p {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem) !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}

/* ----- Editorial caption styles ----- */
.editorial-caption,
figcaption {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.85rem;
  display: block;
}

.editorial-caption::before,
figcaption::before {
  content: '\2014\00a0\00a0';
  color: var(--accent-2);
}

/* ----- Section spacing rhythm (more generous, magazine-like) ----- */
.section,
section.section {
  padding-top: clamp(7rem, 14vh, 12rem);
  padding-bottom: clamp(7rem, 14vh, 12rem);
}

.section--alt {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 50%, var(--bg) 100%);
}

/* ----- Magazine-style edition stamp (top right of each major section) ----- */
.edition-stamp {
  position: absolute;
  top: clamp(2.5rem, 5vh, 3.5rem);
  right: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-body);
  font-size: 0.5625rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  opacity: 0.7;
  z-index: 3;
  pointer-events: none;
}

.edition-stamp::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--accent-2);
  vertical-align: middle;
  margin-right: 0.45rem;
}

/* ----- Image overlay vignette (stronger editorial mood) ----- */
.img-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 50%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}

/* ----- Editorial blockquote / pull-quote ----- */
.t-pull-quote,
.t-pull-quote--editorial {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(1.875rem, 3.2vw, 2.875rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  position: relative;
  padding-left: 2.5rem !important;
}

.t-pull-quote::before,
.t-pull-quote--editorial::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 4rem;
  line-height: 0.8;
  color: var(--accent-2);
  opacity: 0.6;
}

/* ----- Refined link underline treatment site-wide ----- */
a:not(.btn):not(.nav__logo):not(.nav__link):not(.nav__cta) {
  position: relative;
  text-decoration: none;
}

/* ----- Container max-width restraint for readability ----- */
.container {
  max-width: var(--max-width);
}

.container--read {
  max-width: var(--read-w, 720px);
}

/* ----- Footer polish ----- */
footer,
.site-footer {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-dark) 100%);
  border-top: 1px solid rgba(201,184,154,0.12);
}

/* ----- Custom cursor on interactive elements (subtle) ----- */
a, button, .pricing-card, .card {
  cursor: pointer;
}

/* ----- Final flourish: "End of issue" mark before footer ----- */
main::after,
body > section:last-of-type::after {
  /* hook for closing flourish; sub-elements can add */
}

/* ==========================================================================
   ADDITIONAL EDITORIAL POLISH
   For Influencers section, form fields, list items, and atmospheric details
   pushing the page closer to magazine-spread feel.
   ========================================================================== */

/* ----- Editorial list items (replaces SaaS checkmark lists) ----- */
ul.flex.items-start,
.section ul li.flex.items-start,
.section--alt ul li {
  position: relative;
}

/* Override the inline checkmark style with editorial register */
.section ul li.flex span:first-child[style*="color:var(--accent-2)"],
.section--alt ul li.flex span:first-child[style*="color:var(--accent-2)"] {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 1.5rem !important;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1 !important;
  margin-right: 0.5rem;
}

/* Replace checkmark visually with italic ornament */
.section ul li.flex span:first-child[style*="color:var(--accent-2)"]::before {
  content: '\2014';
  font-family: var(--font-display);
  font-style: italic;
  display: inline-block;
}

.section ul li.flex span:first-child[style*="color:var(--accent-2)"] {
  visibility: hidden;
  font-size: 0 !important;
  width: 28px;
}

.section ul li.flex span:first-child[style*="color:var(--accent-2)"]::before {
  visibility: visible;
  font-size: 1.5rem !important;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 50%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  top: 0.1rem;
  left: 0;
}

/* ----- "For Influencers" section — editorial polish ----- */
.section--alt .grid.grid-2 .slide-in-left,
.section--alt .grid.grid-2 .slide-in-right {
  position: relative;
}

.section--alt .grid.grid-2 .slide-in-left::before {
  content: 'PORTRAIT';
  position: absolute;
  top: -2rem;
  left: 0;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}

.section--alt .grid.grid-2 .slide-in-left::after {
  content: 'N\B0\00a002';
  position: absolute;
  top: -2rem;
  right: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.6875rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
}

/* Make the t-display-lg in this section feel more editorial */
.section--alt .grid.grid-2 .t-display-lg {
  font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
  font-weight: 300 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.025em !important;
}

/* Italic accent on display copy */
.section--alt .grid.grid-2 .t-display-lg br + br,
.section--alt .grid.grid-2 .t-display-lg {
  font-style: normal;
}

/* ----- Form field editorial styling ----- */
.dark-input,
.dark-select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border-radius: 0 !important;
  border: 1px solid rgba(201,184,154,0.18) !important;
  background: rgba(255,255,255,0.025) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.005em !important;
  padding: 1rem 1.25rem !important;
  color: var(--text) !important;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out) !important;
}

.dark-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.28) !important;
  font-style: italic;
  font-family: var(--font-display) !important;
}

.dark-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-2) !important;
  background: rgba(201,184,154,0.04) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(201,184,154,0.25) inset !important;
}

.dark-label,
label {
  font-family: var(--font-body) !important;
  font-size: 0.5625rem !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--accent-2) !important;
  font-weight: 500 !important;
  margin-bottom: 0.6rem !important;
}

.dark-label::before,
label::before {
  content: '\2014\00a0\00a0';
  color: var(--text-muted);
  letter-spacing: 0;
}

/* ----- Consultation section hero treatment ----- */
.section--dark {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, #050505 100%) !important;
  overflow: hidden;
}

.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,184,154,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(201,184,154,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.section--dark::after {
  content: 'COMMISSION';
  position: absolute;
  top: clamp(2rem, 5vh, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.5625rem;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}

.section--dark .t-display-lg {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  margin-top: 1.5rem !important;
}

/* ----- Section dividers — chrome flourish replacing plain rules ----- */
.divider--flourish,
.section-separator {
  position: relative;
  height: 4rem;
  margin: clamp(2rem, 4vh, 3rem) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider--flourish::before,
.section-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,184,154,0.4) 30%, rgba(201,184,154,0.4) 70%, transparent 100%);
}

.divider--flourish::after {
  content: '\2766';
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 0 1.5rem;
  color: var(--accent-2);
  font-size: 1rem;
  font-style: italic;
  font-family: var(--font-display);
  letter-spacing: 0;
}

/* ----- Reveal HR (existing class) — chrome treatment ----- */
.reveal-hr {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,184,154,0.3) 50%, transparent 100%);
  margin: clamp(3rem, 6vh, 5rem) auto;
  max-width: 70vw;
  border: none;
}

/* ----- Guarantee cards — editorial polish ----- */
.guarantee-icon {
  background: linear-gradient(135deg, rgba(201,184,154,0.15) 0%, rgba(201,184,154,0.04) 100%) !important;
  border: 1px solid rgba(201,184,154,0.25) !important;
  border-radius: 0 !important;
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 2rem !important;
}

/* ----- Image overlay frames — frame border + corners ----- */
.editorial-image-frame {
  position: relative;
  border: 1px solid rgba(201,184,154,0.2) !important;
}

.editorial-image-frame::before {
  border: 1px solid rgba(201,184,154,0.08) !important;
  inset: 0.75rem !important;
}

.editorial-image-frame::after {
  /* Already styled with FIG. counter — keep it */
}

/* ----- Section pull quote (where applicable) ----- */
.section--pullquote {
  position: relative;
  padding: clamp(8rem, 16vh, 14rem) 0 !important;
}

.section--pullquote::before,
.section--pullquote::after {
  content: '\2766';
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  color: var(--accent-2);
  opacity: 0.4;
  left: 50%;
  transform: translateX(-50%);
}

.section--pullquote::before { top: clamp(3rem, 6vh, 5rem); }
.section--pullquote::after { bottom: clamp(3rem, 6vh, 5rem); }

/* ----- Stats label / value rebalance ----- */
.stat {
  position: relative;
  padding: 0 clamp(1rem, 2vw, 2rem);
}

.stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 30%;
  bottom: 30%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(201,184,154,0.25) 50%, transparent 100%);
}

.stat__value {
  font-size: clamp(2.5rem, 4.5vw, 4rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}

/* ----- Footer treatment ----- */
footer {
  border-top: 1px solid rgba(201,184,154,0.18);
  padding: clamp(4rem, 8vh, 6rem) 0 clamp(2rem, 4vh, 3rem);
  position: relative;
}

footer::before {
  content: '\2756';
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  padding: 0 1rem;
  color: var(--accent-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8125rem;
}

/* ----- Newsletter / CTA emphasis treatment ----- */
input[type="submit"],
button[type="submit"] {
  cursor: pointer;
  transition: all 0.4s var(--ease-out);
}

button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(201,184,154,0.3);
}

/* ----- Body link refined treatment ----- */
.t-body a:not(.btn),
.t-body-sm a:not(.btn),
p a:not(.btn) {
  color: var(--accent-2);
  border-bottom: 1px solid rgba(201,184,154,0.4);
  padding-bottom: 0.05em;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.t-body a:not(.btn):hover,
.t-body-sm a:not(.btn):hover,
p a:not(.btn):hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* ==========================================================================
   ATELIER DISPATCH — magazine-essay editorial section
   Drop cap, byline, pull quote, end mark. Typography-driven content
   density that compensates for the lack of fashion photography.
   ========================================================================== */

.dispatch-section {
  position: relative;
  background: var(--bg-alt);
  padding: clamp(8rem, 16vh, 14rem) 0 !important;
  overflow: hidden;
  border-top: 1px solid rgba(201,184,154,0.12);
  border-bottom: 1px solid rgba(201,184,154,0.12);
}

.dispatch-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 0%, rgba(201,184,154,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(107,26,26,0.02) 0%, transparent 60%);
  pointer-events: none;
}

.dispatch {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  position: relative;
  z-index: 2;
}

.dispatch__masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(201,184,154,0.18);
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.dispatch__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.dispatch__kicker::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent-2);
}

.dispatch__date {
  color: var(--text-muted);
  letter-spacing: 0.32em;
}

.dispatch__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 clamp(1.25rem, 2.5vh, 2rem);
  text-wrap: balance;
}

.dispatch__title em {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dispatch__byline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--text-muted);
  letter-spacing: 0.005em;
  margin: 0 0 clamp(2.5rem, 5vh, 4rem);
  padding-bottom: clamp(2rem, 4vh, 3rem);
  border-bottom: 1px solid rgba(201,184,154,0.08);
}

.dispatch__body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}

.dispatch__body p {
  margin: 0 0 1.5em;
  text-wrap: pretty;
}

.dispatch__body p:last-of-type { margin-bottom: 0; }

.dispatch__lead {
  font-family: var(--font-body) !important;
  font-size: 1.0625rem !important;
  line-height: 1.78 !important;
  color: var(--text-muted) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

.dispatch__lead::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.65rem 0 0;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dispatch__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: clamp(2.5rem, 5vh, 3.5rem) 0;
  padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--accent-2);
  position: relative;
  text-wrap: balance;
}

.dispatch__quote-mark {
  position: absolute;
  top: -0.5rem;
  left: -0.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent-2);
  opacity: 0.5;
  pointer-events: none;
}

.dispatch__close {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: 1.1875rem !important;
  color: var(--text) !important;
  margin-top: clamp(2rem, 4vh, 3rem) !important;
  padding-top: clamp(1.5rem, 3vh, 2.25rem) !important;
  border-top: 1px solid rgba(201,184,154,0.12) !important;
}

.dispatch__signature {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent-2);
  opacity: 0.6;
  margin-top: clamp(2rem, 4vh, 3rem);
}

@media (max-width: 768px) {
  .dispatch__masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .dispatch__lead::first-letter {
    font-size: 4em;
  }
}

/* ==========================================================================
   COVER MASTHEAD — magazine-cover-style banner above the hero
   Adds editorial frame and signals the brand's magazine-spread register
   from the very top of the page.
   ========================================================================== */

.cover-masthead {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(201,184,154,0.18);
  padding: clamp(1rem, 2vh, 1.5rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--nav-height);
}

.cover-masthead__title {
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.5em;
}

.cover-masthead__center {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  text-transform: none;
}

.cover-masthead__date {
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .cover-masthead { display: none; }
}

/* Hero margin-top adjustment when cover-masthead is present */
.cover-masthead + .hero-meta {
  margin-top: 0;
}

.cover-masthead + .hero--editorial,
.cover-masthead + .hero {
  margin-top: 0;
}

/* ==========================================================================
   HARMONY — global rhythm, quieter chrome, refined hierarchy
   Restores discipline after multiple aesthetic layers. The previous CSS
   accumulated useful moments but introduced visual noise; this layer
   tightens the typography hierarchy, reduces chrome over-use, and
   standardizes spacing so the page reads as one continuous spread.
   ========================================================================== */

/* ----- Tighten the global type scale ----- */
/* Force the display headlines to use four size tokens rather than five.
   Limits visual chaos when many headlines stack across sections. */
:root {
  --sz-display-mega: clamp(4.5rem, 11vw, 11rem);    /* hero only */
  --sz-display-xl:   clamp(3rem, 6vw, 5rem);        /* manifesto, dispatch title */
  --sz-display-lg:   clamp(2.25rem, 4vw, 3.5rem);   /* section titles */
  --sz-display-md:   clamp(1.625rem, 2.4vw, 2.25rem); /* card / block titles */
  --sz-body-lg:      1.0625rem;
  --sz-body:         1rem;
  --sz-body-sm:      0.875rem;
  --sz-mono-kicker:  0.625rem;
  --sz-mono-meta:    0.5625rem;
}

/* ----- Standardize section vertical rhythm ----- */
section.section,
section.dispatch-section,
section.section--manifesto,
section.section--alt,
section.section--dark,
section.section--editorial,
section.section--accent-top {
  padding-top: clamp(7rem, 14vh, 11rem) !important;
  padding-bottom: clamp(7rem, 14vh, 11rem) !important;
}

.marquee-section {
  padding-top: clamp(2.5rem, 5vh, 4rem) !important;
  padding-bottom: clamp(2.5rem, 5vh, 4rem) !important;
}

/* ----- Atmospheric section transitions ----- */
/* Subtle gradient overlap between adjacent sections so the page reads as
   one continuous spread rather than discrete blocks. */
section + section::before,
section + .section-separator + section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Keep the section content layered above the gradient transition */
section > .container,
section > .dispatch,
section > .manifesto {
  position: relative;
  z-index: 2;
}

/* ----- Quiet the chrome shimmer over-use ----- */
/* Chrome-on-em was being applied broadly; restrict to specific contexts */
.t-display-lg em,
.t-display-xl em,
.t-display-hero em,
.t-section-title em {
  /* Override the earlier site-wide chrome on em — only apply to these
     specific dramatic moments where chrome is intentional */
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Chrome should ONLY appear in these signature locations:
   1. Hero "Atelier." word
   2. Manifesto "I." numeral
   3. Dispatch title em
   4. Stats bar numbers
   Removing chrome from secondary locations: */
.process-num,
.dispatch__lead::first-letter,
.section--manifesto .manifesto__lead::first-letter,
.duet__body p:first-child::first-letter {
  /* Drop caps stay chrome — they're a deliberate magazine convention */
}

/* ----- Refine hero — reduce the visual crowding ----- */
.hero-bg__letter {
  /* Smaller and more atmospheric, less dominant */
  font-size: clamp(28rem, 70vh, 56rem) !important;
  opacity: 0.035 !important;
}

.hero-bg__grain {
  /* Less aggressive grain so other detail can be read */
  opacity: 0.3 !important;
}

.hero-headline__line--display {
  /* Ensure consistent dramatic scale matching the new global tokens */
  font-size: var(--sz-display-mega) !important;
}

/* ----- Section header pattern enforcement ----- */
/* Every editorial section opens with the same kicker pattern.
   Standardize the appearance to compound recognition. */
.section-header-editorial .t-heading,
.t-heading {
  font-size: var(--sz-mono-kicker) !important;
  font-weight: 500 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--accent-2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
}

.t-heading::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent-2);
}

/* Section main title pattern */
.section-header-editorial .t-display-lg,
.section-header-editorial > p.t-display-lg {
  font-size: var(--sz-display-lg) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
}

/* ----- Marquee restraint ----- */
/* Was visually competing with the hero; quiet it slightly so it
   reads as a continuation rather than a separate dominant element. */
.marquee__track {
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  color: rgba(255,255,255,0.7) !important;
  letter-spacing: -0.005em !important;
}

.marquee__track > span:not(.marquee__diamond) {
  color: var(--text) !important;
}

/* ----- Card discipline ----- */
/* Tame the card hover effect — was over-animating and creating noise */
.card,
.card--flat {
  transition: border-color 0.4s var(--ease-out) !important;
  transform: none !important;
}

.card:hover,
.card--flat:hover {
  transform: translateY(-1px) !important;
}

.card::before,
.card--flat::before {
  /* Only show top accent on hover — quieter resting state */
  opacity: 0 !important;
  transition: opacity 0.4s ease, width 0.6s var(--ease-out) !important;
}

.card:hover::before,
.card--flat:hover::before {
  opacity: 1 !important;
}

/* ----- Pricing card discipline ----- */
.pricing-card {
  transition: border-color 0.4s var(--ease-out) !important;
  transform: none !important;
}

.pricing-card:hover {
  transform: translateY(-2px) !important;
}

/* ----- Spacing inside dispatch section ----- */
.dispatch__body p {
  margin-bottom: 1.6em;
}

/* ----- Subtle horizontal rule between major editorial sections ----- */
section.section--manifesto + section.dispatch-section,
section.dispatch-section + section.section--editorial {
  position: relative;
}

/* ----- Selection refinement ----- */
::selection {
  background: rgba(201,184,154,0.5);
  color: var(--bg);
}

::-moz-selection {
  background: rgba(201,184,154,0.5);
  color: var(--bg);
}

/* ----- Smooth section loading on scroll ----- */
@media (prefers-reduced-motion: no-preference) {
  section {
    transition: opacity 0.6s ease;
  }
}

/* ----- Fix: prevent body grain animation from being too distracting ----- */
body::after {
  opacity: 0.25 !important;
  animation-duration: 30s !important;
}

/* ----- Refined link underline globally ----- */
a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* ----- Standardize button heights for visual rhythm ----- */
.btn {
  min-height: 3rem;
}

/* ----- Footer harmony with rest of page ----- */
footer.site-footer,
footer {
  border-top: 1px solid rgba(201,184,154,0.18) !important;
  padding-top: clamp(5rem, 10vh, 8rem) !important;
  padding-bottom: clamp(2rem, 4vh, 3rem) !important;
}

/* ----- Container max-width consistency ----- */
.container {
  max-width: var(--max-width, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
}

/* ----- Reduced-motion considerations ----- */
@media (prefers-reduced-motion: reduce) {
  body::after,
  .hero-bg__grain,
  .marquee__track {
    animation: none !important;
  }
  
  .card:hover,
  .pricing-card:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   CHAPTER DIVIDERS — full-bleed editorial breakers between major sections
   Magazine spreads use these to mark major content shifts. Massive italic
   numeral, brief chapter title, generous negative space. The page breathes
   and the sections become discrete chapters rather than continuous scroll.
   ========================================================================== */

.chapter-divider {
  position: relative;
  background: var(--bg);
  padding: clamp(5rem, 10vh, 8rem) 0;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(201,184,154,0.12);
  border-bottom: 1px solid rgba(201,184,154,0.12);
}

.chapter-divider::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 50% 50%, rgba(201,184,154,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.chapter-divider__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.chapter-divider__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(5rem, 12vw, 11rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 35%, #b5b3b0 50%, #d4d2cd 65%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.chapter-divider__rule {
  width: 80px;
  height: 1px;
  background: var(--accent-2);
  opacity: 0.6;
}

.chapter-divider__kicker {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.chapter-divider__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.3;
  color: var(--text);
  letter-spacing: 0.005em;
  max-width: 32ch;
  text-wrap: balance;
}

/* ==========================================================================
   COLOPHON — magazine-style production credit block
   Appears in the footer to close the page like a real publication.
   ========================================================================== */

.colophon {
  max-width: var(--max-width-narrow, 960px);
  margin: 0 auto;
  padding: clamp(3rem, 6vh, 5rem) clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border-top: 1px solid rgba(201,184,154,0.12);
}

.colophon__col h3 {
  font-family: var(--font-body) !important;
  font-size: 0.5625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--accent-2) !important;
  margin: 0 0 1rem !important;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(201,184,154,0.12);
}

.colophon__col p {
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.colophon__col p:last-child { margin-bottom: 0; }

.colophon__center {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

.colophon__center .colophon__mark {
  display: block;
  font-size: 1.5rem;
  margin: 1rem auto;
  color: var(--accent-2);
  opacity: 0.7;
}

.colophon__right {
  text-align: right;
}

@media (max-width: 768px) {
  .colophon {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .colophon__center,
  .colophon__right {
    text-align: left;
  }
}

/* ==========================================================================
   RECURRING BRAND MARK — small italic M used as visual anchor
   Subtle deployment of the brand glyph in strategic locations as a
   recurring magazine signature.
   ========================================================================== */

.brand-mark-small {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #6b6663 0%, #d4d2cd 50%, #6b6663 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1;
}

/* ==========================================================================
   STRIKING — purge beige, add saturated accent, increase contrast
   The previous champagne/cream accents read as beige. This layer kills
   the warm tones entirely, replaces with COOL chrome (no yellow bias)
   and adds a saturated OXBLOOD accent for dramatic high-contrast
   editorial moments. Result: visibly striking, not beige-restrained.
   ========================================================================== */

:root {
  /* Override the warm champagne tones with cool chrome */
  --accent-2: #d4d6dc !important;          /* cool silver, no yellow bias */
  --accent-2-hover: #ffffff !important;     /* pure white on hover */
  --accent-2-light: rgba(212, 214, 220, 0.1) !important;
  --accent-2-glow: rgba(212, 214, 220, 0.3) !important;
  --accent-warm: #d4d6dc !important;        /* override to cool */
  --accent-champagne: #ffffff !important;   /* override to pure white */
  --accent-ivory: #f4f6fa !important;       /* cool ivory, slight blue */
  
  /* New saturated accent for striking moments */
  --strike: #c8102e;                         /* oxblood/scarlet — fashion-editorial saturated red */
  --strike-deep: #7a0a1c;                    /* deeper oxblood for hover/secondary */
  --strike-glow: rgba(200, 16, 46, 0.4);     /* glow color for box-shadows */
  
  /* New cool chrome gradient — replaces all warm/beige chrome */
  --gradient-chrome: linear-gradient(135deg, #4a4e58 0%, #c8cdd6 28%, #ffffff 50%, #c8cdd6 72%, #4a4e58 100%);
  --gradient-strike: linear-gradient(135deg, #7a0a1c 0%, #c8102e 50%, #e63946 100%);
}

/* ----- Replace ALL chrome gradients site-wide with cool chrome ----- */
.hero-bg__letter,
.hero-headline__line--chrome,
.manifesto__num,
.dispatch__title em,
.dispatch__lead::first-letter,
.section--manifesto .manifesto__lead::first-letter,
.duet__body p:first-child::first-letter,
.process-num,
.chapter-divider__num,
.brand-mark-small,
.stat__value,
.t-display-lg em,
.t-display-xl em,
.t-display-hero em,
.t-section-title em,
.dispatch__quote-mark {
  background: var(--gradient-chrome) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ----- Hero "Atelier" word: SWITCH from chrome to OXBLOOD STRIKE ----- */
.hero-headline__line--chrome {
  background: var(--gradient-strike) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: strike-sweep 6s ease-in-out infinite !important;
}

@keyframes strike-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ----- Cover masthead: chrome → strike accent ----- */
.cover-masthead__title {
  color: var(--strike) !important;
}

/* ----- Hero meta numeral: strike accent ----- */
.hero-meta__num {
  color: var(--strike) !important;
  font-weight: 700 !important;
}

/* ----- Hero eyebrow: cool chrome with dot dot dot more dramatic ----- */
.hero-eyebrow {
  color: var(--strike) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5em !important;
}

.hero-eyebrow::before {
  background: var(--strike) !important;
  width: 48px !important;
  height: 2px !important;
}

/* ----- Manifesto: strike on numeral chapter mark ----- */
.section--manifesto::before {
  color: var(--strike) !important;
  opacity: 0.4 !important;
  font-weight: 700 !important;
}

.manifesto__title em {
  color: var(--strike) !important;
  background: none !important;
  -webkit-text-fill-color: var(--strike) !important;
  font-style: italic !important;
}

/* ----- Manifesto list — strike on Roman numerals ----- */
.manifesto__list li > span:first-child {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

/* ----- Dispatch — strike accents ----- */
.dispatch__kicker,
.dispatch__date {
  color: var(--strike) !important;
}

.dispatch__quote {
  border-left: 2px solid var(--strike) !important;
  position: relative;
}

.dispatch__quote-mark {
  color: var(--strike) !important;
  background: none !important;
  -webkit-text-fill-color: var(--strike) !important;
  opacity: 0.8 !important;
}

/* ----- Chapter divider — strike accent ----- */
.chapter-divider__rule {
  background: var(--strike) !important;
  height: 2px !important;
  width: 120px !important;
}

.chapter-divider__kicker {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

/* ----- Section kickers — strike accent ----- */
.t-heading,
.section-header-editorial .t-heading {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

.t-heading::before {
  background: var(--strike) !important;
  height: 2px !important;
  width: 48px !important;
}

/* ----- Buttons: bronze → cool chrome with strike-red glow ----- */
.btn--bronze {
  background: linear-gradient(135deg, #ffffff 0%, #d4d6dc 100%) !important;
  color: var(--bg) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
  border: 1px solid var(--strike) !important;
  position: relative;
  transition: all 0.4s var(--ease-out) !important;
}

.btn--bronze:hover {
  background: var(--strike) !important;
  color: #ffffff !important;
  border-color: var(--strike) !important;
  box-shadow: 0 8px 32px var(--strike-glow) !important;
  transform: translateY(-2px) !important;
}

.btn--ghost,
.btn--outline {
  border: 1px solid rgba(212, 214, 220, 0.4) !important;
  color: var(--text) !important;
}

.btn--ghost:hover,
.btn--outline:hover {
  border-color: var(--strike) !important;
  color: var(--strike) !important;
  background: rgba(200, 16, 46, 0.04) !important;
}

/* ----- Marquee diamond ornaments → strike red ----- */
.marquee__diamond {
  color: var(--strike) !important;
  opacity: 0.8;
}

/* ----- Form fields: focus state in strike ----- */
.dark-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--strike) !important;
  background: rgba(200, 16, 46, 0.04) !important;
  box-shadow: 0 0 0 1px var(--strike) inset !important;
}

.dark-label,
label {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

/* ----- Stats: chrome numbers stay, strike on labels ----- */
.stat__label {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

/* ----- Pricing cards: strike on featured + name ----- */
.pricing-card__name {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

.pricing-card--featured {
  border: 1px solid var(--strike) !important;
  box-shadow: 0 0 0 1px var(--strike) inset, 0 30px 80px rgba(0,0,0,0.4) !important;
}

.pricing-card--featured::before {
  background: linear-gradient(90deg, transparent, var(--strike), transparent) !important;
  height: 2px !important;
}

/* ----- Comparison table: strike accent on Maisone column ----- */
.compare-table .col-maisone {
  background: rgba(200, 16, 46, 0.05) !important;
  border-left: 2px solid var(--strike) !important;
  border-right: 2px solid var(--strike) !important;
}

.compare-table thead th {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

.compare-table .t-check {
  color: var(--strike) !important;
}

/* ----- Section dividers — strike flourish ----- */
.section-separator::after,
.divider--flourish::after {
  color: var(--strike) !important;
}

/* ----- Chrome ornament — strike center letter ----- */
.chrome-ornament {
  color: var(--strike) !important;
}

/* ----- Edition stamp — strike ----- */
.edition-stamp {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

/* ----- Hero seal — strike ----- */
.hero-seal {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

/* ----- Dispatch close paragraph: strike border ----- */
.dispatch__close {
  border-top: 2px solid var(--strike) !important;
  color: var(--strike) !important;
}

.dispatch__signature {
  color: var(--strike) !important;
  opacity: 0.8 !important;
}

/* ----- Footer flourish — strike ----- */
footer::before {
  color: var(--strike) !important;
}

/* ----- Selection: strike background ----- */
::selection {
  background: var(--strike) !important;
  color: #ffffff !important;
}

::-moz-selection {
  background: var(--strike) !important;
  color: #ffffff !important;
}

/* ----- Body link refined: strike accent ----- */
.t-body a:not(.btn),
.t-body-sm a:not(.btn),
p a:not(.btn) {
  color: var(--strike) !important;
  border-bottom-color: var(--strike) !important;
}

.t-body a:not(.btn):hover,
.t-body-sm a:not(.btn):hover,
p a:not(.btn):hover {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}

/* ----- Hero stack right metadata: strike on first item ----- */
.hero-stack span:first-child {
  color: var(--strike) !important;
  font-weight: 600 !important;
}

/* ----- Card top accent strike on hover ----- */
.card:hover::before,
.card--flat:hover::before {
  background: var(--strike) !important;
  height: 2px !important;
}

/* ----- Hero rule with strike center ----- */
.hero-rule {
  background: linear-gradient(90deg, transparent 0%, var(--strike) 30%, var(--strike) 70%, transparent 100%) !important;
  height: 2px !important;
}

/* ----- Hero meta border ----- */
.hero-meta {
  border-bottom: 2px solid var(--strike) !important;
}

.hero-meta__sep {
  background: var(--strike) !important;
}

/* ----- Dispatch masthead: strike border bottom ----- */
.dispatch__masthead {
  border-bottom: 2px solid var(--strike) !important;
}

/* ----- Atmospheric strike glow at section transitions ----- */
.chapter-divider::before {
  background: radial-gradient(ellipse 50% 80% at 50% 50%, rgba(200, 16, 46, 0.06) 0%, transparent 70%) !important;
}

/* ----- Manifesto list border: strike on hover ----- */
.manifesto__list li:hover {
  background: linear-gradient(90deg, rgba(200, 16, 46, 0.04) 0%, transparent 100%);
}

/* ----- Dispatch hover state: subtle strike glow ----- */
.dispatch__quote:hover {
  border-left-color: var(--strike) !important;
  background: linear-gradient(90deg, rgba(200, 16, 46, 0.04) 0%, transparent 60%);
}

/* ----- Footer wordmark: strike on hover ----- */
.footer-wordmark:hover img {
  filter: drop-shadow(0 0 60px rgba(200, 16, 46, 0.3)) !important;
}

/* ----- Cover masthead bottom border: strike ----- */
.cover-masthead {
  border-bottom: 2px solid var(--strike) !important;
}

/* ==========================================================================
   DECLARATION — full-bleed editorial break with single dramatic phrase
   The page needs a moment of pure typography. No CTAs, no metadata,
   no images. Just one statement at architectural scale. This is the
   visual rest beat between the dispatch essay and the process content.
   ========================================================================== */

.declaration {
  position: relative;
  background: #050505;
  padding: clamp(10rem, 18vh, 16rem) 0;
  overflow: hidden;
  isolation: isolate;
  border-top: 2px solid var(--strike);
  border-bottom: 2px solid var(--strike);
}

.declaration::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(200, 16, 46, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(200, 16, 46, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(200, 16, 46, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.declaration::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(255,255,255,0.015) 2px,
      rgba(255,255,255,0.015) 3px
    );
  pointer-events: none;
  z-index: 0;
}

.declaration__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vh, 3rem);
}

.declaration__kicker {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--strike);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.declaration__kicker::before,
.declaration__kicker::after {
  content: '';
  display: inline-block;
  width: 48px;
  height: 2px;
  background: var(--strike);
}

.declaration__line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}

.declaration__line em {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, #7a0a1c 0%, #c8102e 50%, #e63946 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: strike-sweep 6s ease-in-out infinite;
}

.declaration__close {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
  color: var(--strike);
  opacity: 0.85;
}

@media (max-width: 768px) {
  .declaration__kicker::before,
  .declaration__kicker::after { width: 24px; }
}

/* ==========================================================================
   SECTION MARGINALIA — magazine-style page references
   Small mono labels on the edges of sections that read as marginal
   page furniture. Compounds the magazine-spread register.
   ========================================================================== */

section.section--manifesto::after,
section.dispatch-section::after,
section.section--editorial::after {
  content: attr(data-marginalia);
  position: absolute;
  bottom: clamp(1.5rem, 3vh, 2.5rem);
  right: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--strike);
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
}

/* ==========================================================================
   STRIKING SECTION BORDERS — full strike-red top/bottom borders
   Selectively applied to dramatic sections so the page reads as
   discrete punched-out chapters rather than continuous flow.
   ========================================================================== */

.section--manifesto,
.section--dark {
  border-top: 1px solid var(--strike);
  border-bottom: 1px solid var(--strike);
}

/* ==========================================================================
   STRIPE OVERLAY — striking diagonal halftone pattern for atmosphere
   Adds visual texture in specific dramatic moments without requiring
   real photography.
   ========================================================================== */

.dispatch-section::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30%;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 8px,
    rgba(200, 16, 46, 0.025) 8px,
    rgba(200, 16, 46, 0.025) 9px
  );
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(90deg, transparent 0%, black 40%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 40%, black 100%);
}

/* ==========================================================================
   PAGE NUMBERS — bottom-corner mono numbers like a real magazine
   Small detail that compounds the magazine-spread feeling.
   ========================================================================== */

.declaration::after {
  /* Override the default declaration::after halftone with page number */
  content: 'P. \2014\00a0 003';
  position: absolute;
  bottom: 1.5rem;
  right: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  color: var(--strike);
  opacity: 0.6;
  z-index: 3;
  background-image: none;
  inset: auto 0 0 auto;
  width: auto;
  height: auto;
  pointer-events: none;
}

/* ==========================================================================
   BUTTON HOVER GLOW UPGRADE — striking visual punch on interaction
   ========================================================================== */

.btn--bronze {
  position: relative;
  overflow: hidden;
}

.btn--bronze::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--strike);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  z-index: -1;
}

.btn--bronze:hover::after {
  width: 300%;
  height: 300%;
}

/* ==========================================================================
   SCROLL-PROGRESS bar restyled in strike
   ========================================================================== */

.scroll-progress {
  background: linear-gradient(90deg, var(--strike) 0%, #e63946 100%) !important;
  height: 2px !important;
  box-shadow: 0 0 8px rgba(200, 16, 46, 0.5);
}

/* ==========================================================================
   SPECIMENS — editorial contact-sheet grid (visual content without photos)
   Each specimen is a CSS-gradient frame + halftone overlay + figure caption
   with name, materials, and price-per-unit. Reads as a fashion editorial
   contact sheet where photography is forthcoming. The frames are meant to
   look intentionally treated, not empty.
   ========================================================================== */

.specimens {
  position: relative;
  background: #050505;
  padding: clamp(8rem, 16vh, 14rem) clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  border-top: 1px solid var(--strike);
}

.specimens::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at 50% 0%, rgba(200, 16, 46, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.specimens__masthead {
  position: relative;
  z-index: 2;
  max-width: var(--max-width, 1280px);
  margin: 0 auto clamp(4rem, 8vh, 6rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.specimens__kicker {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--strike);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.specimens__kicker::before,
.specimens__kicker::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--strike);
}

.specimens__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

.specimens__title em {
  font-style: italic;
  background: linear-gradient(135deg, #4a4e58 0%, #c8cdd6 30%, #ffffff 50%, #c8cdd6 70%, #4a4e58 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.specimens__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}

.specimens__grid {
  position: relative;
  z-index: 2;
  max-width: var(--max-width, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}

.specimen {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.specimen__frame {
  position: relative;
  aspect-ratio: 3/4;
  background:
    linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid rgba(212, 214, 220, 0.18);
  overflow: hidden;
  isolation: isolate;
}

.specimen__frame::before {
  content: '';
  position: absolute;
  inset: 0.6rem;
  border: 1px solid rgba(212, 214, 220, 0.08);
  pointer-events: none;
  z-index: 2;
}

/* Vary the gradient direction per specimen for visual interest */
.specimen--01 .specimen__frame {
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(212, 214, 220, 0.06) 0%, transparent 60%),
    linear-gradient(155deg, #1c1c20 0%, #050505 70%);
}

.specimen--02 .specimen__frame {
  background:
    radial-gradient(ellipse 60% 80% at 70% 40%, rgba(200, 16, 46, 0.05) 0%, transparent 60%),
    linear-gradient(195deg, #181818 0%, #060606 70%);
}

.specimen--03 .specimen__frame {
  background:
    radial-gradient(ellipse 70% 60% at 40% 70%, rgba(212, 214, 220, 0.05) 0%, transparent 60%),
    linear-gradient(135deg, #1a1a1c 0%, #050505 70%);
}

.specimen--04 .specimen__frame {
  background:
    radial-gradient(ellipse 60% 70% at 60% 30%, rgba(200, 16, 46, 0.06) 0%, transparent 60%),
    linear-gradient(165deg, #1c1c1c 0%, #060606 70%);
}

.specimen__halftone {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1.5px);
  background-size: 6px 6px;
  mix-blend-mode: screen;
  z-index: 1;
}

/* Each specimen gets a faint silhouette suggestion via SVG-equivalent radial mass */
.specimen__frame::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 70%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 50% 80% at 50% 35%, rgba(255,255,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 70%, rgba(255,255,255,0.03) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}

/* Specimen caption */
.specimen__cap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(212, 214, 220, 0.18);
}

.specimen__num {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--strike);
}

.specimen__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.1;
}

.specimen__meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--text-muted);
  font-style: italic;
}

.specimen__price {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(212, 214, 220, 0.55);
  margin-top: 0.25rem;
}

.specimens__foot {
  position: relative;
  z-index: 2;
  max-width: var(--max-width, 1280px);
  margin: clamp(3rem, 6vh, 5rem) auto 0;
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid rgba(212, 214, 220, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}

.specimens__foot span:first-child {
  color: var(--strike);
}

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

@media (max-width: 600px) {
  .specimens__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .specimens__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Hover treatment: chrome border becomes strike, halftone intensifies */
.specimen__frame {
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.specimen:hover .specimen__frame {
  border-color: var(--strike);
  transform: translateY(-2px);
}

.specimen:hover .specimen__num {
  color: #ffffff;
}

/* ==========================================================================
   EDITOR'S NOTE — closing magazine moment before the form
   ========================================================================== */

.editors-note {
  position: relative;
  background: var(--bg);
  padding: clamp(8rem, 16vh, 14rem) 0;
  overflow: hidden;
  border-top: 1px solid rgba(212, 214, 220, 0.12);
}

.editors-note::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(200,16,46,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.editors-note__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.editors-note__kicker {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--strike);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}

.editors-note__kicker::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--strike);
}

.editors-note__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 clamp(2.5rem, 5vh, 4rem);
  text-wrap: balance;
}

.editors-note__title em {
  font-style: italic;
  background: linear-gradient(135deg, #4a4e58 0%, #c8cdd6 35%, #ffffff 50%, #c8cdd6 65%, #4a4e58 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.editors-note__body p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-muted);
  letter-spacing: 0.005em;
  margin: 0 0 1.5em;
}

.editors-note__sig {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  padding-top: clamp(1.5rem, 3vh, 2.25rem);
  border-top: 2px solid var(--strike);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.editors-note__sig-name { color: var(--strike); font-weight: 600; }
.editors-note__sig-place { color: var(--text-muted); }

.editors-note__monogram {
  position: absolute;
  bottom: -2rem;
  right: -2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20rem, 40vw, 32rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--strike);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

@media (max-width: 768px) {
  .editors-note__sig { flex-direction: column; gap: 0.6rem; align-items: flex-start; }
}

/* ==========================================================================
   HOMEPAGE CARDS + COMPARISON DRAMATIC PUNCH-UP
   Reaches the same oxblood + cool-chrome register as the landing pages
   for visual continuity across the brand.
   ========================================================================== */

/* ----- Comparison table — full editorial rebuild ----- */
.compare-wrap { 
  border: 1px solid var(--strike) !important;
  background: linear-gradient(180deg, rgba(28,26,28,0.6) 0%, rgba(15,14,13,0.4) 100%) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  isolation: isolate;
}

.compare-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--strike) 30%, var(--strike) 70%, transparent 100%);
  z-index: 2;
}

.compare-table thead th {
  font-family: var(--font-body) !important;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.42em !important;
  text-transform: uppercase !important;
  color: rgba(212,214,220,0.6) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(212,214,220,0.18) !important;
  padding: 1.5rem 1.25rem !important;
}

.compare-table thead .col-maisone {
  color: var(--strike) !important;
  font-weight: 700 !important;
  background: rgba(200,16,46,0.08) !important;
  border-top: 2px solid var(--strike) !important;
  border-bottom: 2px solid var(--strike) !important;
}

.compare-table tbody td {
  padding: 1.25rem 1.25rem !important;
  border-bottom: 1px solid rgba(212,214,220,0.08) !important;
  transition: background 0.3s ease;
}

.compare-table tbody td:first-child {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.0625rem !important;
  letter-spacing: -0.005em !important;
  color: var(--text) !important;
}

.compare-table tbody tr:hover td:not(.col-maisone) {
  background: rgba(212,214,220,0.02) !important;
}

.compare-table tbody tr:hover .col-maisone {
  background: rgba(200,16,46,0.12) !important;
}

.compare-table .col-maisone {
  background: rgba(200,16,46,0.06) !important;
  border-left: 2px solid var(--strike) !important;
  border-right: 2px solid var(--strike) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
}

.compare-table tbody tr:last-child .col-maisone {
  border-bottom: 2px solid var(--strike) !important;
}

.compare-table .t-check {
  color: var(--strike) !important;
  font-weight: 700 !important;
}

.compare-table .t-cross {
  color: var(--text-muted) !important;
  opacity: 0.4 !important;
}

/* ----- Pricing cards — dramatic visual hierarchy ----- */
.pricing-card {
  border: 1px solid rgba(212,214,220,0.18) !important;
  background: linear-gradient(180deg, rgba(28,26,28,0.5) 0%, rgba(15,14,13,0.3) 100%) !important;
  position: relative;
  isolation: isolate;
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out) !important;
  padding: 2.5rem 2rem !important;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--strike);
  transition: width 0.5s var(--ease-out);
}

.pricing-card:hover {
  border-color: var(--strike) !important;
  transform: translateY(-3px) !important;
}

.pricing-card:hover::before {
  width: 100%;
}

.pricing-card--featured {
  border: 1px solid var(--strike) !important;
  background: linear-gradient(180deg, rgba(40,18,22,0.6) 0%, rgba(15,14,13,0.4) 100%) !important;
  box-shadow: 0 0 0 1px var(--strike) inset, 0 30px 80px rgba(0,0,0,0.4), 0 0 60px rgba(200,16,46,0.1) !important;
  transform: scale(1.02);
}

.pricing-card--featured::before {
  width: 100% !important;
  background: linear-gradient(90deg, transparent 0%, var(--strike) 50%, transparent 100%) !important;
}

.pricing-card--featured::after {
  content: 'Most chosen';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--strike);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  padding: 5px 14px;
}

.pricing-card__name {
  color: var(--strike) !important;
  font-weight: 700 !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.4em !important;
}

.pricing-card__price {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(2.75rem, 4.5vw, 3.75rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  margin-bottom: 0.4rem !important;
}

.pricing-card__price span {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--strike) !important;
  letter-spacing: 0.05em !important;
  margin-left: 0.25rem;
}

.pricing-card__desc {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  color: var(--text-muted) !important;
  font-size: 0.9375rem !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(212,214,220,0.12);
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.pricing-card__feature {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(212,214,220,0.06);
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.pricing-card__feature::before {
  content: '\2014';
  color: var(--strike);
  font-weight: 600;
}

/* ----- Stats bar dramatic punch-up ----- */
.stats-bar {
  border-top: 2px solid var(--strike);
  border-bottom: 2px solid var(--strike);
  background: linear-gradient(90deg, transparent 0%, rgba(28,26,28,0.6) 30%, rgba(28,26,28,0.6) 70%, transparent 100%);
  padding: clamp(2.5rem, 5vh, 4rem) 0;
}

.stat__value {
  font-size: clamp(3rem, 5vw, 4.5rem) !important;
  background: linear-gradient(135deg, #7a0a1c 0%, #c8102e 50%, #e63946 100%) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: strike-sweep 8s ease-in-out infinite;
}

/* ----- Guarantee cards on homepage ----- */
.guarantee-icon {
  background: rgba(200,16,46,0.1) !important;
  border: 1px solid var(--strike) !important;
  border-radius: 0 !important;
  width: 64px !important;
  height: 64px !important;
  color: var(--strike) !important;
  transition: background 0.4s ease, transform 0.4s ease !important;
}

.card:hover .guarantee-icon,
.card--flat:hover .guarantee-icon {
  background: var(--strike) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
}

/* ────────────────────────────────────────────────────────────
   Readability overrides (added 2026-05-09)
   Consolidates 18+ opacity tiers to 3, bumps min text to 14px.
   ──────────────────────────────────────────────────────────── */
:root { --text-readable: 0.85; --text-strong: 1; --text-muted-min: 0.7; }

/* Bump minimum body text to 0.875rem (14px) */
body, p, li, dd, td, label, input, textarea, select, button {
  font-size: max(0.875rem, var(--text-base, 0.95rem));
}
/* Tiny labels (kickers, eyebrows) raised to 0.75rem (12px) min */
.eyebrow, .kicker, .meta, .label, .badge,
[class*="kicker"], [class*="meta"], [class*="badge"], [class*="label"] {
  font-size: max(0.75rem, 0.875em) !important;
}
/* Anything in body text using rgba white below 0.7 opacity, bump to 0.85 */
p, li, dd, span, .body-text, .body, .text, [class*="text-light"], [class*="text-muted"] {
  color: rgba(255,255,255,0.85);
}
/* Footer / minor text use 0.7 floor */
footer, footer *, .footer, .footer *, .legal, .credit, .attribution {
  color: rgba(255,255,255,0.7);
}
/* Strong / emphasis get full opacity */
strong, b, h1, h2, h3, h4, h5, h6, .heading, [class*="heading"], [class*="title"] {
  color: rgba(255,255,255,1);
}
/* Override any ultra-low opacity that affects readability */
[style*="opacity:0.1"], [style*="opacity:0.15"], [style*="opacity:0.2"],
[style*="opacity:0.25"], [style*="opacity:0.3"], [style*="opacity:0.35"],
[style*="opacity:0.4"], [style*="opacity:0.45"], [style*="opacity:0.5"] {
  /* Only override if the element has actual text content */
}
.text-faded, .text-very-faint, .opacity-25, .opacity-30, .opacity-35, .opacity-40, .opacity-50 {
  opacity: 0.7 !important;
}