/* ============================================
   VIBELIER — Premium Cinematic Landing Studio
   style.css  (v2 — refined)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Manrope:wght@300;400;500;600&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
  --bg-main: #F5F1EB;
  --bg-secondary: #CDB7AA;
  --text-primary: #5A4A46;
  --text-dark: #2E2420;
  --text-muted: #8A7570;
  --accent: #B57C86;
  --accent-soft: #D4A8B0;
  --accent-dark: #8A5B65;
  --white: #FDFAF7;
  --border: rgba(90, 74, 70, 0.14);
  --border-strong: rgba(90, 74, 70, 0.28);
  --shadow-soft: 0 4px 32px rgba(46, 36, 32, 0.08);
  --shadow-medium: 0 8px 48px rgba(46, 36, 32, 0.13);
  --shadow-deep: 0 20px 80px rgba(46, 36, 32, 0.18);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   RESET & BASE
   ============================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.1;
}

.label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================
   UTILITY
   ============================================ */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

.section-pad { padding: 120px 0; }

@media (max-width: 768px) {
  .section-pad { padding: 80px 0; }
}

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--easing-out), transform 0.9s var(--easing-out);
}

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

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  transition: all 0.35s var(--easing);
  white-space: nowrap;
}

.btn-primary {
  background: var(--text-dark);
  color: #FDFAF7;
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 36, 32, 0.28);
}

.btn-outline {
  background: transparent;
  color: var(--text-dark);
  border: 1.5px solid var(--border-strong);
}

.btn-outline:hover {
  border-color: var(--text-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn-accent {
  background: var(--accent);
  color: #FDFAF7;
}

.btn-accent:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181, 124, 134, 0.38);
}

.btn-ghost {
  background: rgba(245, 241, 235, 0.85);
  color: var(--text-dark);
  border: 1.5px solid var(--border-strong);
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  background: var(--white);
  border-color: var(--text-dark);
  transform: translateY(-2px);
}

.btn .arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--easing);
  flex-shrink: 0;
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 20px 0;
  transition: all 0.5s var(--easing);
}

.site-header.scrolled {
  background: rgba(245, 241, 235, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: 0.01em;
  transition: opacity 0.3s;
}

.logo:hover { opacity: 0.65; }
.logo span { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-primary);
  transition: color 0.3s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.35s var(--easing);
}

.nav-links a:hover { color: var(--text-dark); }
.nav-links a:hover::after { width: 100%; }

.nav-cta { padding: 10px 22px; font-size: 0.78rem; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-dark);
  transition: all 0.35s var(--easing);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-main);
  z-index: 800;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--easing);
}

.mobile-nav.open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--text-dark);
}

@media (max-width: 768px) {
  .header-inner { padding: 0 24px; }
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: flex; }
}

/* ============================================
   HERO
   ============================================ */

.hero {
  min-height: 100vh;
  padding-top: 100px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 48px;
}

.hero-left { max-width: 580px; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero-headline { margin-bottom: 28px; }

.hero-headline .kicker {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.hero-headline .main {
  display: block;
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  line-height: 1.0;
}

.hero-sub {
  font-size: 1.0rem;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.75;
  max-width: 420px;
  margin-bottom: 48px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Hero Right — Floating Vibe Cards */
.hero-right {
  position: relative;
  height: 580px;
}

.vibe-cards-float {
  position: relative;
  width: 100%;
  height: 100%;
}

.vibe-card-float {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s var(--easing-out), box-shadow 0.5s var(--easing);
  box-shadow: var(--shadow-medium);
  text-decoration: none;
}

.vibe-card-float:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: var(--shadow-deep);
  z-index: 10;
}

.vibe-card-float:nth-child(1) {
  width: 200px; height: 280px;
  top: 20px; left: 20px;
  z-index: 4;
  animation: float1 6s ease-in-out infinite;
}

.vibe-card-float:nth-child(2) {
  width: 230px; height: 300px;
  top: 0; right: 40px;
  z-index: 3;
  animation: float2 7s ease-in-out infinite;
}

.vibe-card-float:nth-child(3) {
  width: 220px; height: 260px;
  bottom: 40px; left: 60px;
  z-index: 2;
  animation: float3 8s ease-in-out infinite;
}

.vibe-card-float:nth-child(4) {
  width: 190px; height: 250px;
  bottom: 20px; right: 20px;
  z-index: 1;
  animation: float4 5.5s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(-1deg); }
}
@keyframes float2 {
  0%, 100% { transform: translateY(-6px) rotate(1.5deg); }
  50% { transform: translateY(6px) rotate(1.5deg); }
}
@keyframes float3 {
  0%, 100% { transform: translateY(4px) rotate(-0.5deg); }
  50% { transform: translateY(-10px) rotate(-0.5deg); }
}
@keyframes float4 {
  0%, 100% { transform: translateY(-4px) rotate(2deg); }
  50% { transform: translateY(8px) rotate(2deg); }
}

/* Floating card colour bases */
.vibe-card-float.soft  { background: linear-gradient(160deg, #F2E8E3 0%, #E0CAC5 100%); }
.vibe-card-float.bold  { background: linear-gradient(160deg, #2E2420 0%, #5C3D38 100%); }
.vibe-card-float.bright{ background: linear-gradient(160deg, #F5EDD8 0%, #EAD5A8 100%); }
.vibe-card-float.calm  { background: linear-gradient(160deg, #E8EDE8 0%, #C8D5C8 100%); }

/* Floating card interior layout */
.vibe-card-mini {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 0;
}

/* Mini nav bar */
.vcm-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.vcm-logo {
  width: 36px; height: 7px;
  border-radius: 4px;
}
.vcm-nav-dots {
  display: flex; gap: 4px;
}
.vcm-dot { width: 14px; height: 5px; border-radius: 3px; }

/* Mini hero area */
.vcm-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding-bottom: 10px;
}

.vcm-h1 { height: 10px; border-radius: 4px; }
.vcm-h2 { height: 10px; border-radius: 4px; }
.vcm-sub { height: 6px; border-radius: 3px; margin-top: 2px; }
.vcm-sub2 { height: 6px; border-radius: 3px; }
.vcm-btn { height: 20px; width: 52%; border-radius: 100px; margin-top: 6px; }

/* Mini section divider */
.vcm-divider { height: 1px; width: 100%; margin: 4px 0; }

/* Mini feature row */
.vcm-features {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

.vcm-feat {
  flex: 1;
  height: 36px;
  border-radius: 6px;
}

/* Card label footer */
.vcm-label {
  padding-top: 10px;
  border-top: 1px solid;
}

.vcm-label .card-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
  display: block;
}

.vcm-label .card-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
}

/* Colour tokens per card */
.soft .vcm-logo       { background: rgba(181,124,134,0.3); }
.soft .vcm-dot        { background: rgba(181,124,134,0.2); }
.soft .vcm-h1         { background: rgba(58,46,43,0.55); width: 85%; }
.soft .vcm-h2         { background: rgba(58,46,43,0.38); width: 65%; }
.soft .vcm-sub        { background: rgba(58,46,43,0.2); width: 90%; }
.soft .vcm-sub2       { background: rgba(58,46,43,0.15); width: 70%; }
.soft .vcm-btn        { background: rgba(181,124,134,0.55); }
.soft .vcm-divider    { background: rgba(181,124,134,0.2); }
.soft .vcm-feat       { background: rgba(181,124,134,0.12); }
.soft .vcm-label      { border-color: rgba(181,124,134,0.22); }
.soft .card-label     { color: #9A5B65; }
.soft .card-name      { color: #2E2420; }

.bold .vcm-logo       { background: rgba(245,241,235,0.3); }
.bold .vcm-dot        { background: rgba(245,241,235,0.15); }
.bold .vcm-h1         { background: rgba(245,241,235,0.7); width: 90%; }
.bold .vcm-h2         { background: rgba(245,241,235,0.5); width: 72%; }
.bold .vcm-sub        { background: rgba(245,241,235,0.25); width: 95%; }
.bold .vcm-sub2       { background: rgba(245,241,235,0.18); width: 75%; }
.bold .vcm-btn        { background: rgba(205,183,170,0.5); }
.bold .vcm-divider    { background: rgba(245,241,235,0.1); }
.bold .vcm-feat       { background: rgba(245,241,235,0.07); }
.bold .vcm-label      { border-color: rgba(245,241,235,0.12); }
.bold .card-label     { color: #CDB7AA; }
.bold .card-name      { color: #F5F1EB; }

.bright .vcm-logo     { background: rgba(140,90,20,0.3); }
.bright .vcm-dot      { background: rgba(140,90,20,0.18); }
.bright .vcm-h1       { background: rgba(42,32,16,0.55); width: 80%; }
.bright .vcm-h2       { background: rgba(42,32,16,0.38); width: 62%; }
.bright .vcm-sub      { background: rgba(42,32,16,0.2); width: 88%; }
.bright .vcm-sub2     { background: rgba(42,32,16,0.14); width: 66%; }
.bright .vcm-btn      { background: rgba(140,90,20,0.45); }
.bright .vcm-divider  { background: rgba(140,90,20,0.15); }
.bright .vcm-feat     { background: rgba(140,90,20,0.1); }
.bright .vcm-label    { border-color: rgba(140,90,20,0.18); }
.bright .card-label   { color: #7A5014; }
.bright .card-name    { color: #2E2010; }

.calm .vcm-logo       { background: rgba(60,100,60,0.28); }
.calm .vcm-dot        { background: rgba(60,100,60,0.18); }
.calm .vcm-h1         { background: rgba(26,42,26,0.55); width: 78%; }
.calm .vcm-h2         { background: rgba(26,42,26,0.38); width: 58%; }
.calm .vcm-sub        { background: rgba(26,42,26,0.2); width: 92%; }
.calm .vcm-sub2       { background: rgba(26,42,26,0.14); width: 68%; }
.calm .vcm-btn        { background: rgba(60,100,60,0.35); }
.calm .vcm-divider    { background: rgba(60,100,60,0.15); }
.calm .vcm-feat       { background: rgba(60,100,60,0.1); }
.calm .vcm-label      { border-color: rgba(60,100,60,0.18); }
.calm .card-label     { color: #3A6040; }
.calm .card-name      { color: #1A2A1A; }

/* Hero responsive */
/* ============================================
   PHILOSOPHY
   ============================================ */

.philosophy {
  background: var(--text-dark);
  color: var(--white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.philosophy::before {
  content: '';
  position: absolute;
  top: -100px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181,124,134,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.philosophy-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 100px;
  align-items: center;
}

.philosophy-left .label { color: var(--accent-soft); margin-bottom: 24px; }

.philosophy-left h2 {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  font-weight: 400;
}

.philosophy-left h2 em { color: var(--accent-soft); font-style: italic; }

.philosophy-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.philosophy-item {
  border-top: 1px solid rgba(245, 241, 235, 0.1);
  padding-top: 28px;
}

.philosophy-item .number {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--accent-soft);
  font-style: italic;
  margin-bottom: 10px;
}

.philosophy-item p {
  color: rgba(245, 241, 235, 0.78);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
}

.philosophy-item strong {
  color: var(--white);
  font-weight: 500;
}

@media (max-width: 768px) {
  .philosophy-inner { grid-template-columns: 1fr; gap: 60px; }
}

/* ============================================
   VIBE CARDS SECTION
   ============================================ */

.vibes { padding: 140px 0; }

.section-header { margin-bottom: 72px; }

.section-header .label { margin-bottom: 16px; display: block; }

.section-header h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  max-width: 500px;
}

.vibes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .vibes-grid { grid-template-columns: 1fr; }
}

.vibe-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/5;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.5s var(--easing-out), box-shadow 0.5s var(--easing);
  box-shadow: var(--shadow-soft);
  display: block;
}

.vibe-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-deep);
}

.vibe-card-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.7s var(--easing-out);
}

.vibe-card:hover .vibe-card-bg { transform: scale(1.04); }

.vibe-card.soft-card .vibe-card-bg  { background: linear-gradient(135deg, #F0E4DE 0%, #DCC5BF 60%, #C8A89E 100%); }
.vibe-card.bold-card .vibe-card-bg  { background: linear-gradient(135deg, #1E1714 0%, #3C2820 60%, #5A3830 100%); }
.vibe-card.bright-card .vibe-card-bg{ background: linear-gradient(135deg, #F8F0DC 0%, #EEDD98 60%, #E0C870 100%); }
.vibe-card.calm-card .vibe-card-bg  { background: linear-gradient(135deg, #E5EDE5 0%, #C0D0C0 60%, #A0BCA0 100%); }

.vibe-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
}

.vibe-card .card-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  align-self: flex-start;
}

.soft-card .card-tag   { background: rgba(181,124,134,0.22); color: #7A3E4A; }
.bold-card .card-tag   { background: rgba(245,241,235,0.12); color: #F0EAE5; }
.bright-card .card-tag { background: rgba(120,80,20,0.18);   color: #5C3A08; }
.calm-card .card-tag   { background: rgba(50,90,50,0.18);    color: #204428; }

.vibe-card h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  margin-bottom: 8px;
}

.soft-card h3   { color: #2E2420; }
.bold-card h3   { color: #F5F1EB; }
.bright-card h3 { color: #2A1E08; }
.calm-card h3   { color: #152015; }

.vibe-card p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
}

.soft-card p   { color: rgba(46,36,32,0.78); }
.bold-card p   { color: rgba(245,241,235,0.78); }
.bright-card p { color: rgba(42,30,8,0.76); }
.calm-card p   { color: rgba(21,32,21,0.76); }

.vibe-card-arrow {
  position: absolute;
  top: 36px; right: 36px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--easing);
}

.soft-card .vibe-card-arrow   { background: rgba(181,124,134,0.2); color: #7A3E4A; }
.bold-card .vibe-card-arrow   { background: rgba(245,241,235,0.12); color: #E8DDD5; }
.bright-card .vibe-card-arrow { background: rgba(120,80,20,0.18); color: #5C3A08; }
.calm-card .vibe-card-arrow   { background: rgba(50,90,50,0.18); color: #204428; }

.vibe-card:hover .vibe-card-arrow { transform: translate(3px, -3px); }

/* Vibe card top decorative mini-content */
.vibe-card-preview {
  position: absolute;
  top: 36px; left: 36px;
  right: 84px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vcp-bar {
  height: 4px;
  border-radius: 3px;
}

.vcp-line { height: 6px; border-radius: 3px; }

.soft-card .vcp-bar    { background: rgba(181,124,134,0.35); }
.bold-card .vcp-bar    { background: rgba(245,241,235,0.25); }
.bright-card .vcp-bar  { background: rgba(120,80,20,0.28); }
.calm-card .vcp-bar    { background: rgba(50,90,50,0.28); }

.soft-card .vcp-line   { background: rgba(181,124,134,0.2); }
.bold-card .vcp-line   { background: rgba(245,241,235,0.12); }
.bright-card .vcp-line { background: rgba(120,80,20,0.15); }
.calm-card .vcp-line   { background: rgba(50,90,50,0.15); }

.vcp-bar:nth-child(1) { width: 55%; }
.vcp-line:nth-child(2){ width: 90%; }
.vcp-line:nth-child(3){ width: 72%; }

/* ============================================
   PROCESS SECTION
   ============================================ */

.process { padding: 140px 0; }

.process-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 100px;
  align-items: start;
}

.process-left .label { margin-bottom: 20px; display: block; }

.process-left h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin-bottom: 24px;
  color: #1A1410;
}

.process-left p {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.8;
  color: #2E2420;
  margin-bottom: 40px;
}

.process-steps { display: flex; flex-direction: column; gap: 0; }

.process-step {
  display: flex;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(82, 64, 56, 0.32);
  position: relative;
}

.process-step:first-child { border-top: 1px solid rgba(82, 64, 56, 0.32); }

.step-number {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-style: italic;
  color: #A04860;
  min-width: 28px;
  padding-top: 4px;
  font-weight: 600;
}

.step-content h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: #1A1410;
}

.step-content p {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.72;
  color: #2E2420;
}

.step-indicator {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(82, 64, 56, 0.45);
  transition: background 0.3s;
}

.process-step:hover .step-indicator { background: var(--accent); }

@media (max-width: 768px) {
  .process-inner { grid-template-columns: 1fr; gap: 60px; }
}

/* ============================================
   CONTACT SECTION
   ============================================ */

.contact {
  background: var(--text-dark);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: '';
  position: absolute;
  bottom: -150px; left: -150px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181,124,134,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}

.contact-left .label { color: var(--accent-soft); margin-bottom: 24px; display: block; }

.contact-left h2 {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 28px;
}

.contact-left h2 em { color: var(--accent-soft); font-style: italic; }

.contact-left p {
  color: rgba(245,241,235,0.7);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 48px;
}

.contact-email-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #E8DDD5;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}

.contact-email-link:hover { color: var(--accent-soft); }

.contact-form { display: flex; flex-direction: column; gap: 20px; }

.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-group label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,241,235,0.6);
}

.form-group input,
.form-group textarea,
.form-group select {
  background: rgba(245,241,235,0.07);
  border: 1px solid rgba(245,241,235,0.16);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: #F5F1EB;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
  -webkit-appearance: none;
}

.form-group select { cursor: pointer; }
.form-group select option { background: #2E2420; color: #F5F1EB; }
.form-group textarea { resize: vertical; min-height: 100px; }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  background: rgba(245,241,235,0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(245,241,235,0.3); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form-submit { margin-top: 8px; width: 100%; justify-content: center; padding: 16px; }

@media (max-width: 768px) {
  .contact-inner { grid-template-columns: 1fr; gap: 60px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  padding: 40px 0;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-logo { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-dark); }
.footer-logo span { color: var(--accent); }

.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }

.footer-links a {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  transition: color 0.3s;
}

.footer-links a:hover { color: var(--text-dark); }

.footer-copy { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }

/* ============================================
   VIBE PAGES — SHARED
   ============================================ */

.vibe-hero {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.vibe-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.vibe-hero-content .label { margin-bottom: 24px; display: block; }

.vibe-hero-content h1 {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 400;
  line-height: 1.0;
  margin-bottom: 24px;
}

.vibe-hero-content p {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
  max-width: 480px;
}

.vibe-intro { padding: 100px 0; }

.vibe-intro-inner { max-width: 680px; }

.vibe-intro h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 24px;
  line-height: 1.2;
}

.vibe-intro p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-primary);
}

.mockups-section { padding: 40px 0 140px; }

.mockup-showcase { display: flex; flex-direction: column; gap: 80px; }

.mockup-item {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}

.mockup-item.reverse { grid-template-columns: 1fr 1.2fr; }
.mockup-item.reverse .mockup-visual { order: 2; }
.mockup-item.reverse .mockup-info   { order: 1; }

@media (max-width: 768px) {
  .mockup-item,
  .mockup-item.reverse { grid-template-columns: 1fr; }
  .mockup-item.reverse .mockup-visual { order: 0; }
  .mockup-item.reverse .mockup-info   { order: 0; }
}

.mockup-visual {
  border-radius: var(--radius-xl);
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  transition: transform 0.5s var(--easing-out);
}

.mockup-visual:hover { transform: translateY(-6px); }

.mockup-info { display: flex; flex-direction: column; gap: 20px; }

.mockup-info .label { display: block; }

.mockup-info h3 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.15;
  color: var(--text-dark);
}

.mockup-info p {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-primary);
}

.mockup-cta { margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Vibe page rich mockup internals */
.vm {
  position: absolute;
  inset: 0;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vm-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid;
}

.vm-logo { width: 38px; height: 7px; border-radius: 4px; }
.vm-navlinks { display: flex; gap: 5px; }
.vm-nl { width: 20px; height: 5px; border-radius: 3px; }
.vm-ncta { width: 36px; height: 16px; border-radius: 100px; }

.vm-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding-bottom: 10px;
}

.vm-h1   { height: 14px; border-radius: 5px; }
.vm-h2   { height: 14px; border-radius: 5px; }
.vm-sub  { height: 6px;  border-radius: 3px; margin-top: 2px; }
.vm-sub2 { height: 6px;  border-radius: 3px; }
.vm-ctas { display: flex; gap: 7px; margin-top: 8px; }
.vm-cta  { height: 20px; width: 40%; border-radius: 100px; }
.vm-cta2 { height: 20px; width: 30%; border-radius: 100px; }

.vm-divider { height: 1px; width: 100%; margin: 7px 0; }

.vm-grid { display: flex; gap: 5px; margin-bottom: 7px; }
.vm-tile { flex: 1; border-radius: 7px; }

.vm-img { width: 100%; border-radius: 8px; margin-bottom: 7px; }

.vm-body-lines { display: flex; flex-direction: column; gap: 5px; }
.vm-bl { height: 5px; border-radius: 3px; }
.vm-bl:nth-child(1) { width: 100%; }
.vm-bl:nth-child(2) { width: 85%; }
.vm-bl:nth-child(3) { width: 70%; }

/* ============================================
   BUILD MODAL
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46, 36, 32, 0.72);
  backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--easing);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg-main);
  border-radius: var(--radius-xl);
  padding: 56px;
  max-width: 560px;
  width: 100%;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.5s var(--easing-out);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-overlay.open .modal { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: 24px; right: 24px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1rem;
  transition: all 0.3s;
}

.modal-close:hover { border-color: var(--text-dark); color: var(--text-dark); }

.modal .label { display: block; margin-bottom: 16px; }

.modal h2 { font-size: 2rem; margin-bottom: 12px; color: var(--text-dark); }

.modal .modal-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  font-weight: 400;
  line-height: 1.6;
}

.modal-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}

@media (max-width: 480px) {
  .modal-options { grid-template-columns: 1fr; }
  .modal { padding: 36px 28px; }
}

.modal-option {
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.35s var(--easing);
  background: none;
  text-align: left;
  font-family: var(--font-body);
}

.modal-option:hover {
  border-color: var(--accent);
  background: rgba(181,124,134,0.06);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.modal-option .opt-icon { font-size: 1.4rem; margin-bottom: 10px; display: block; }
.modal-option .opt-title { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); margin-bottom: 4px; display: block; }
.modal-option .opt-desc  { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; line-height: 1.5; }

.modal-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.modal-divider::before,
.modal-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.modal-divider span {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-form { display: flex; flex-direction: column; gap: 16px; }

.modal-form .form-group input,
.modal-form .form-group textarea,
.modal-form .form-group select {
  background: rgba(90,74,70,0.06);
  border: 1px solid var(--border-strong);
  color: var(--text-dark);
}

.modal-form .form-group input:focus,
.modal-form .form-group textarea:focus,
.modal-form .form-group select:focus {
  border-color: var(--accent);
  background: rgba(90,74,70,0.09);
}

.modal-form .form-group input::placeholder,
.modal-form .form-group textarea::placeholder { color: var(--text-muted); }

.modal-form .form-group label { color: var(--text-muted); }
.modal-form .form-group select option { background: var(--bg-main); color: var(--text-dark); }

/* ============================================
   VIBE BACK LINK / NAV
   ============================================ */

.vibe-back {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s;
}

.vibe-back:hover { color: var(--text-dark); }

/* ============================================
   LEGAL PAGES
   ============================================ */

.legal-hero {
  padding: 160px 0 60px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 80px;
}

.legal-hero .label { display: block; margin-bottom: 20px; }

.legal-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  margin-bottom: 20px;
}

.legal-hero p {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.legal-body {
  max-width: 720px;
  padding-bottom: 140px;
}

.legal-body h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text-dark);
  margin: 52px 0 16px;
  padding-top: 52px;
  border-top: 1px solid var(--border);
}

.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.legal-body p {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.legal-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.legal-body ul li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-primary);
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}

.legal-body ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */

.scroll-indicator {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0.4;
  animation: fadeInUp 2s var(--easing) 1.5s both;
}

.scroll-indicator span {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scroll-line {
  width: 1px; height: 40px;
  background: var(--text-muted);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 0.4; transform: translateX(-50%) translateY(0); }
}

/* ============================================
   TOAST
   ============================================ */

.toast {
  position: fixed;
  bottom: 32px; right: 32px;
  background: var(--text-dark);
  color: #F5F1EB;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s var(--easing-out);
  z-index: 9999;
  box-shadow: var(--shadow-deep);
}

.toast.show { transform: translateY(0); opacity: 1; }

/* ============================================
   MISC
   ============================================ */

::selection { background: rgba(181,124,134,0.28); color: var(--text-dark); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--bg-secondary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


/* ============================================
   VIBELIER — RESPONSIVE SYSTEM v6 FINAL
   Single authoritative file.
   Based on reference design logic:
   - image-dominant card compositions
   - vertical stack on mobile
   - text anchored below visuals
   - clear breathing rhythm
   - no overlapping elements
   ============================================ */

/* ─── GLOBAL BASELINE ─────────────────────── */

html, body { overflow-x: hidden; max-width: 100vw; }
h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; }

:root {
  --text-primary:  #524038;
  --text-muted:    #7A6560;
  --border:        rgba(82, 64, 56, 0.15);
  --border-strong: rgba(82, 64, 56, 0.30);
}

.label { color: #5E4840; font-weight: 700; letter-spacing: 0.15em; }

/* ─── VIBE CARD SVG SYSTEM (desktop) ─────── */
/* SVG preview fills top 62%, content at bottom */

.vibe-card-svg-preview {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 68%;
  display: block;
  pointer-events: none;
  overflow: hidden;
}

.vca-overlay {
  position: absolute;
  top: 36px; right: 36px;
  z-index: 3;
}

/* ─── MOCKUP VISUAL CLASSES ──────────────── */

.mockup-visual-enhanced {
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 3/4;
  box-shadow: 0 20px 80px rgba(46, 36, 32, 0.18);
}
.mockup-visual-bold { box-shadow: 0 20px 80px rgba(10, 6, 4, 0.5); }
.mockup-visual-calm { box-shadow: 0 20px 80px rgba(26, 42, 26, 0.18); }

.mockup-visual-enhanced svg {
  width: 100%; height: 100%; display: block;
}

/* ─────────────────────────────────────────────
   TABLET: 769px – 1024px
   References show: clean split or stacked
   layouts, image prominent, text clear.
   ───────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {
  .container { padding: 0 36px; }

  .nav-links { gap: 20px; }
  .nav-links a { font-size: 0.73rem; }
  .nav-cta { display: none; }

  /* Hero: stack single column */
  .hero { min-height: auto; padding-top: 80px; padding-bottom: 0; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 40px 36px 0;
    text-align: center;
  }
  .hero-left { max-width: 600px; margin: 0 auto; }
  .hero-eyebrow, .hero-ctas { justify-content: center; }
  .hero-headline .kicker { font-size: 1.3rem; }
  .hero-headline .main { font-size: clamp(2.8rem, 6vw, 4.2rem); }
  .hero-sub { max-width: 500px; margin: 0 auto 36px; font-size: 0.95rem; }
  .scroll-indicator { display: none; }
  .hero-right { transform: none !important; }

  /* Card carousel strip — tablet shows ~2 cards */
  .hero-right {
    width: 100%; height: auto;
    margin-top: 48px; padding-bottom: 8px;
  }
  .hero-right::after {
    content: 'Swipe to explore';
    display: block; text-align: center;
    font-family: var(--font-body);
    font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted); opacity: 0.5;
    padding: 10px 0 6px;
  }
  .vibe-cards-float {
    position: static !important;
    display: flex !important; flex-direction: row !important;
    gap: 16px;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    height: auto !important;
    padding: 8px 36px 20px;
    box-sizing: border-box;
  }
  .vibe-cards-float::-webkit-scrollbar { display: none; }
  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4) {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    animation: none !important; transform: none !important;
    width: 48vw; max-width: 260px; min-width: 200px;
    height: 360px; flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 20px; overflow: hidden;
  }
  .vibe-card-float svg { width: 100% !important; height: 100% !important; display: block; }
  .vibe-card-float:active { transform: scale(0.97) !important; }

  /* Sections */
  .section-pad, .vibes, .portfolio, .process, .contact, .philosophy { padding: 96px 0; }
  .section-header { margin-bottom: 56px; }
  .vibes-grid { gap: 16px; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .philosophy-inner { gap: 56px; }
  .process-inner { grid-template-columns: 1fr; gap: 48px; }
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .mockup-item { gap: 40px; }
  .mockup-showcase { gap: 64px; }
}

/* ─────────────────────────────────────────────
   MOBILE: ≤ 768px
   Reference logic:
   - IMAGE on top (dominant, ~55% of card)
   - TEXT clearly below image
   - No overlap whatsoever
   - Single column, vertical rhythm
   - Breathing margins
   ───────────────────────────────────────────── */

@media (max-width: 768px) {

  /* === BASE === */
  .container { padding: 0 20px; }
  .header-inner { padding: 0 20px; }
  .logo { font-size: 1.25rem; }

  /* === HERO === */
  .hero {
    min-height: auto;
    padding-top: 74px;
    padding-bottom: 0;
    align-items: flex-start;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 36px 0 0;
    text-align: center;
  }
  .hero-left {
    max-width: 100%;
    padding: 0 20px;
  }
  .hero-eyebrow { justify-content: center; }
  .hero-eyebrow-line { width: 24px; }
  .hero-headline .kicker { font-size: 1.05rem; margin-bottom: 2px; }
  .hero-headline .main {
    font-size: clamp(2.2rem, 9.5vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1.0;
  }
  .hero-sub {
    font-size: 0.9rem; line-height: 1.65;
    max-width: 100%; margin-bottom: 28px;
  }
  .hero-ctas {
    justify-content: center;
    gap: 10px; flex-wrap: wrap;
  }
  .scroll-indicator { display: none; }
  .hero-right { transform: none !important; }

  /* Hero card carousel strip
     Reference logic: single dominant card visible,
     peek of next = clear swipe invitation */
  .hero-right {
    width: 100%; height: auto;
    margin-top: 40px;
    padding-bottom: 4px;
    overflow: visible;
  }
  .hero-right::after {
    content: 'Swipe to explore';
    display: block; text-align: center;
    font-family: var(--font-body);
    font-size: 0.57rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted); opacity: 0.48;
    padding: 8px 0 4px;
  }
  .vibe-cards-float {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: auto !important;
    width: 100%;
    /* Left padding = visual margin; right=trail for peek */
    padding: 6px 12px 16px 20px;
    box-sizing: border-box;
  }
  .vibe-cards-float::-webkit-scrollbar { display: none; }

  /* ALL 4 floating cards: kill absolute, become flex children
     Reference logic: full card visible, next card peeks */
  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4) {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    animation: none !important;
    transform: none !important;
    /* 85vw = fills screen with clear peek of next card */
    width: 85vw;
    max-width: 280px;
    min-width: 220px;
    height: 360px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(46,36,32,0.14);
  }
  .vibe-card-float svg {
    width: 100% !important; height: 100% !important; display: block;
  }
  .vibe-card-float:active {
    transform: scale(0.96) !important;
    box-shadow: 0 4px 16px rgba(46,36,32,0.1);
  }

  /* === VIBE DIRECTION GRID CARDS ===
     Reference logic: image block on top (~55%),
     text area cleanly below — NO overlap.
     Achieved by switching from absolute overlay
     to flex column stacking. */

  .vibes-grid { grid-template-columns: 1fr; gap: 14px; }

  .vibe-card {
    aspect-ratio: unset !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(46,36,32,0.1);
  }

  /* SVG mockup: top block, fixed height (reference: image dominates ~55%) */
  .vibe-card-svg-preview {
    position: relative !important;
    top: auto !important; left: auto !important;
    width: 100% !important;
    height: 260px !important;  /* generous: image dominates */
    display: block !important;
    flex-shrink: 0;
    overflow: hidden;
  }

  /* Hide old CSS bar system */
  .vibe-card .vibe-card-bg    { display: none; }
  .vibe-card .vibe-card-preview { display: none; }

  /* Text content: natural flow below SVG, no inset override */
  .vibe-card-content {
    position: relative !important;
    inset: auto !important;
    flex-grow: 1;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 20px 22px 24px !important;
    background: none !important;
  }

  /* Per-vibe content backgrounds — references show solid colour bands */
  .soft-card .vibe-card-content {
    background: linear-gradient(160deg, #EDD8D0 0%, #E2CCC4 100%) !important;
  }
  .bold-card .vibe-card-content {
    background: linear-gradient(160deg, #281A12 0%, #1E140E 100%) !important;
  }
  .bright-card .vibe-card-content {
    background: linear-gradient(160deg, #F2DCA8 0%, #EAD090 100%) !important;
  }
  .calm-card .vibe-card-content {
    background: linear-gradient(160deg, #D2E2D2 0%, #C5D8C5 100%) !important;
  }

  /* Arrow: float at junction between image and text */
  .vca-overlay {
    position: absolute !important;
    top: -44px !important;
    right: 18px !important;
    width: 32px !important; height: 32px !important;
    z-index: 4;
  }

  /* Card typography — reference: restrained, clear */
  .vibe-card h3 { font-size: 1.4rem; margin-bottom: 6px; margin-top: 4px; }
  .vibe-card p  { font-size: 0.8rem; line-height: 1.55; }
  .vibe-card .card-tag { font-size: 0.57rem; padding: 4px 10px; margin-bottom: 8px; }

  /* === SECTION SPACING === */
  .section-pad    { padding: 64px 0; }
  .vibes          { padding: 64px 0; }
  .portfolio      { padding: 64px 0; }
  .process        { padding: 64px 0; }
  .contact        { padding: 64px 0; }
  .philosophy     { padding: 64px 0; }
  .section-header { margin-bottom: 40px; }
  .section-header h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); max-width: 100%; }

  /* === PORTFOLIO CARDS ===
     Reference: landscape format on mobile feels less claustrophobic */
  .portfolio-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; }
            /* === PHILOSOPHY === */
  .philosophy-inner { grid-template-columns: 1fr; gap: 44px; }
  .philosophy-left h2 { font-size: clamp(1.65rem, 5.5vw, 2.2rem); }
  .philosophy-item { padding-top: 20px; }
  .philosophy-item p { font-size: 0.88rem; line-height: 1.72; }

  /* === PROCESS === */
  .process-inner { grid-template-columns: 1fr; gap: 44px; }
  .process-left h2 { font-size: clamp(1.75rem, 6vw, 2.4rem); }
  .process-left p  { font-size: 0.88rem; margin-bottom: 24px; }
  .process-step { padding: 22px 0; gap: 16px; }
  .step-content h3 { font-size: 1.2rem; }
  .step-content p  { font-size: 0.83rem; line-height: 1.65; }
  .process-left .btn { width: 100%; max-width: 280px; justify-content: center; }

  /* === CONTACT === */
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }
  .contact-left h2 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .contact-left p  { font-size: 0.88rem; margin-bottom: 24px; }
  .contact-email-link { font-size: 0.8rem; }
  .form-row { grid-template-columns: 1fr; gap: 14px; }
  .form-group label { font-size: 0.68rem; }
  .form-group input,
  .form-group textarea,
  .form-group select { font-size: 0.88rem; padding: 12px 14px; }
  .form-submit { padding: 14px; }

  /* === BUTTONS === */
  .btn { padding: 12px 22px; font-size: 0.8rem; }

  /* === FOOTER === */
  .site-footer { padding: 32px 0; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-logo  { font-size: 1rem; }
  .footer-links { gap: 12px 18px; flex-wrap: wrap; }
  .footer-links a { font-size: 0.76rem; }
  .footer-copy  { font-size: 0.7rem; }

  /* === MODAL === */
  .modal { padding: 32px 20px 26px; border-radius: 26px; max-height: 92vh; }
  .modal-close { top: 16px; right: 16px; width: 32px; height: 32px; }
  .modal h2    { font-size: 1.5rem; }
  .modal .modal-sub { font-size: 0.82rem; margin-bottom: 22px; }
  .modal-options { grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
  .modal-option { padding: 14px 12px; }
  .modal-option .opt-title { font-size: 0.83rem; }
  .modal-option .opt-desc  { font-size: 0.72rem; }
  .modal-form .form-row    { grid-template-columns: 1fr; gap: 12px; }
  .form-submit { font-size: 0.82rem; }
}

/* ─────────────────────────────────────────────
   VERY SMALL PHONES: ≤ 400px
   ───────────────────────────────────────────── */

@media (max-width: 400px) {
  .hero-headline .main { font-size: clamp(2rem, 10.5vw, 2.8rem); }
  .hero-sub { font-size: 0.85rem; }
  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4) {
    width: 86vw;
    max-width: 270px;
    height: 330px;
  }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; max-width: 260px; justify-content: center; }
  .btn { padding: 11px 18px; font-size: 0.78rem; }
}

/* ─────────────────────────────────────────────
   VIBE PAGES — ALL BREAKPOINTS
   Reference logic: large hero image, text clear
   below, no collision, breathing rhythm
   ───────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Vibe hero */
  .vibe-hero { min-height: 60vh; padding: 90px 0 48px; }
  .vibe-hero-content .label { font-size: 0.6rem; margin-bottom: 14px; }
  .vibe-hero-content h1 {
    font-size: clamp(2.6rem, 11vw, 4.2rem);
    line-height: 0.97;
    margin-bottom: 16px;
  }
  .vibe-hero-content p {
    font-size: 0.9rem; line-height: 1.68;
    max-width: 320px;
  }

  /* Vibe intro */
  .vibe-intro { padding: 52px 0; }
  .vibe-intro-inner h2 { font-size: clamp(1.45rem, 5.5vw, 2rem); margin-bottom: 14px; }
  .vibe-intro-inner p  { font-size: 0.88rem; line-height: 1.75; }

  /* Mockup items — reference logic:
     mockup visual dominates, text reads clearly below */
  .mockups-section  { padding: 16px 0 72px; }
  .mockup-showcase  { gap: 56px; }
  .mockup-item { gap: 20px; }

  .mockup-visual,
  .mockup-visual-enhanced {
    border-radius: 20px !important;
    width: 100%;
    aspect-ratio: 3/4;
    max-height: none;
  }

  .mockup-visual-enhanced svg {
    width: 100% !important; height: 100% !important;
    display: block !important;
    border-radius: 20px;
  }

  .mockup-info { gap: 10px; }
  .mockup-info .label { font-size: 0.58rem; }
  .mockup-info h3 {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem);
    line-height: 1.12;
  }
  .mockup-info p { font-size: 0.85rem; line-height: 1.66; }
  .mockup-cta { gap: 8px; margin-top: 4px; flex-wrap: wrap; }
  .mockup-cta .btn { font-size: 0.76rem; padding: 11px 18px; }
}

/* ─────────────────────────────────────────────
   LEGAL PAGES — MOBILE
   ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .legal-hero { padding: 108px 0 32px; margin-bottom: 36px; }
  .legal-hero h1 { font-size: clamp(1.85rem, 8vw, 2.8rem); }
  .legal-body h2 { font-size: 1.2rem; margin: 28px 0 8px; padding-top: 28px; }
  .legal-body p  { font-size: 0.87rem; margin-bottom: 14px; }
  .legal-body ul li { font-size: 0.87rem; }
  .legal-body { padding-bottom: 72px; }
}

/* ─────────────────────────────────────────────
   ACCESSIBILITY
   ───────────────────────────────────────────── */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────
   SCROLLBAR + SELECTION
   ───────────────────────────────────────────── */

::selection { background: rgba(181,124,134,0.28); color: var(--text-dark); }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--bg-secondary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


/* ============================================
   QA FIXES — Final pass
   ============================================ */

/* FIX 1: Vibe grid cards — guaranteed readable text zone.
   Add a gradient scrim behind the card text content so even
   at narrow tablet widths the tag/heading/p never fight the SVG. */

.vibe-card-content::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Fade from transparent at top to card-colour at bottom */
}

/* Per-vibe scrim using ::before — blends with card bg */
.soft-card .vibe-card-content::before {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 52%,
    rgba(220, 190, 182, 0.78) 70%,
    rgba(210, 175, 165, 0.97) 100%);
}

.bold-card .vibe-card-content::before {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 52%,
    rgba(30, 18, 12, 0.82) 70%,
    rgba(22, 12, 8, 0.98) 100%);
}

.bright-card .vibe-card-content::before {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 52%,
    rgba(234, 200, 100, 0.78) 70%,
    rgba(225, 190, 84, 0.97) 100%);
}

.calm-card .vibe-card-content::before {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 52%,
    rgba(182, 212, 182, 0.78) 70%,
    rgba(166, 200, 166, 0.97) 100%);
}

/* Ensure card content children sit above the scrim */
.vibe-card-content > * {
  position: relative;
  z-index: 1;
}

/* FIX 2: Bold card tag — increase contrast.
   White pill background so text is clearly readable on dark card */
.bold-card .card-tag {
  background: rgba(245, 241, 235, 0.22) !important;
  color: #EDE5DC !important;
  border: 1px solid rgba(245,241,235,0.2);
}

/* FIX 3: Tablet vibes-grid — switch to single column at ≤900px
   to prevent card squeeze that causes overlap */
@media (max-width: 900px) {
  .vibes-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  /* Also reset any 2-col override from the tablet block */
}

/* FIX 4: Vibe card mobile — ensure the arrow .vca-overlay
   doesn't create tap dead zone. On mobile (stacked layout),
   it's repositioned to the top-right of the text zone */
@media (max-width: 768px) {
  .vibe-card {
    /* Ensure relative positioning for arrow placement */
    position: relative;
  }
}

/* FIX 5: Legal pages on very small mobile — extra safety padding */
@media (max-width: 400px) {
  .legal-hero { padding-top: 96px; }
}

/* FIX 6: Process section left btn on mobile — full-width */
@media (max-width: 768px) {
  .process-left .fade-up.delay-3 {
    display: block;
    text-align: center;
  }
}

/* FIX 7: Vibe page hero text — ensure no overflow on very small screens */
@media (max-width: 360px) {
  .vibe-hero-content h1 {
    font-size: 2.2rem !important;
  }
  .hero-headline .main {
    font-size: 2rem !important;
  }
}

/* FIX 8: Portfolio card label + title on dark cards — boost contrast */

/* FIX 10: Contact section on dark bg — ensure form labels readable */
.form-group label {
  color: rgba(245, 241, 235, 0.65);
  font-weight: 600;
}

/* FIX 11: Vibe back nav on scrolled header — ensure visible */
.vibe-back {
  color: var(--text-primary) !important;
  font-weight: 600;
}
.site-header.scrolled .vibe-back { color: var(--text-dark) !important; }

/* FIX 12: Mobile hero ctas — prevent them from wrapping ugly on mid sizes */
@media (max-width: 500px) and (min-width: 401px) {
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
  .hero-ctas .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}



/* ==========================================================
   RLAFI ART-DIRECTION PATCH v1
   Goal: stop the cards from behaving like tiny screenshots.
   More mockup, less frame. Clear hierarchy. Real mobile carousel.
   ========================================================== */

/* ---------- 1) Desktop vibe cards: editorial preview cards ---------- */
.vibes-grid {
  align-items: stretch;
}

.vibe-card {
  aspect-ratio: 4 / 5 !important;
  min-height: 520px;
  border-radius: 36px;
  isolation: isolate;
  background: transparent;
}

/* The mockup becomes the card canvas, not a small top screenshot. */
.vibe-card-svg-preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.06);
  transform-origin: center top;
  opacity: 0.98;
  z-index: 1;
}

.vibe-card-svg-preview svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Kill the tiny UI-copy collision. Keep the shapes, rhythm and colour only. */
.vibe-card-svg-preview text {
  display: none !important;
}

/* Stronger editorial reading zone at the bottom. */
.vibe-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.soft-card::after {
  background: linear-gradient(to bottom,
    rgba(250,246,242,0.02) 0%,
    rgba(250,246,242,0.08) 45%,
    rgba(245,235,230,0.82) 74%,
    rgba(226,198,190,0.96) 100%);
}
.bold-card::after {
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.03) 0%,
    rgba(0,0,0,0.18) 45%,
    rgba(20,12,8,0.76) 74%,
    rgba(12,7,5,0.98) 100%);
}
.bright-card::after {
  background: linear-gradient(to bottom,
    rgba(255,250,238,0.00) 0%,
    rgba(255,246,224,0.10) 45%,
    rgba(244,221,164,0.82) 74%,
    rgba(225,196,112,0.96) 100%);
}
.calm-card::after {
  background: linear-gradient(to bottom,
    rgba(240,247,240,0.00) 0%,
    rgba(232,242,232,0.10) 45%,
    rgba(198,218,198,0.82) 74%,
    rgba(170,196,170,0.96) 100%);
}

.vibe-card-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  min-height: 30%;
  padding: 34px 40px 38px !important;
  justify-content: flex-end !important;
  z-index: 4 !important;
}

.vibe-card .card-tag {
  margin-bottom: 14px;
  backdrop-filter: blur(10px);
}

.vibe-card h3 {
  font-size: clamp(2rem, 3.2vw, 3.2rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.025em;
  margin-bottom: 12px !important;
}

.vibe-card p {
  max-width: 520px;
  font-size: 0.98rem !important;
  line-height: 1.58 !important;
}

.vca-overlay,
.vibe-card-arrow {
  z-index: 5 !important;
}

/* ---------- 2) Process contrast: luxury, but readable ---------- */
.process-left h2,
.process-step h3 {
  color: #1A1410 !important;
}

.process-left p,
.process-step p {
  color: #2E2420 !important;
  opacity: 1 !important;
}

.step-number {
  color: #9A4C58 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

.process-step {
  border-bottom-color: rgba(82,64,56,0.34) !important;
}

.process-step:first-child {
  border-top-color: rgba(82,64,56,0.34) !important;
}

.step-indicator {
  background: rgba(154,76,88,0.72) !important;
}

/* ---------- 3) Inner vibe page mockups: clean portrait previews ---------- */
.mockup-visual-enhanced,
.mockup-visual {
  aspect-ratio: 3 / 4 !important;
}

.mockup-visual-enhanced svg,
.mockup-visual svg {
  width: 100% !important;
  height: 100% !important;
}

/* ---------- 4) Mobile hero: real swipe carousel, no stack ---------- */
@media (max-width: 768px) {
  .hero-right {
    width: 100% !important;
    height: auto !important;
    margin-top: 44px !important;
    overflow: visible !important;
    transform: none !important;
  }

  .vibe-cards-float {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 20px 26px !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }

  .vibe-cards-float::-webkit-scrollbar { display: none !important; }

  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4) {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 82vw !important;
    min-width: 82vw !important;
    max-width: 330px !important;
    height: 430px !important;
    flex: 0 0 82vw !important;
    scroll-snap-align: center !important;
    transform: none !important;
    animation: none !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 44px rgba(46,36,32,0.16) !important;
    overflow: hidden !important;
  }

  .vibe-card-float svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Mobile direction cards: the visual is decorative, the text is clean below. */
  .vibe-card {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 28px !important;
  }

  .vibe-card-svg-preview {
    position: relative !important;
    inset: auto !important;
    height: 270px !important;
    min-height: 270px !important;
    transform: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .vibe-card-content {
    position: relative !important;
    min-height: auto !important;
    padding: 24px 26px 28px !important;
    z-index: 4 !important;
  }

  .vibe-card::after { display: none !important; }

  .vibe-card h3 {
    font-size: clamp(1.9rem, 9vw, 2.7rem) !important;
    line-height: 0.98 !important;
  }

  .vibe-card p {
    font-size: 0.92rem !important;
    line-height: 1.58 !important;
  }

  .vca-overlay,
  .vibe-card-arrow {
    top: 18px !important;
    right: 18px !important;
  }

  .process-left p,
  .process-step p {
    color: #2E2420 !important;
    opacity: 1 !important;
  }

  .step-number {
    color: #9A4C58 !important;
    opacity: 1 !important;
  }
}

@media (max-width: 400px) {
  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4) {
    width: 84vw !important;
    min-width: 84vw !important;
    height: 400px !important;
  }

  .vibe-card-svg-preview {
    height: 245px !important;
    min-height: 245px !important;
  }
}

/* ==========================================================
   RLAFI ART-DIRECTION PATCH v2 — direct structural repair
   Loaded with cache-bust ?v=rlafi4.
   ========================================================== */

/* Main vibe cards: no SVG screenshot overlays, no collisions. */
.vibes-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.vibe-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  aspect-ratio: 4 / 5 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  box-shadow: 0 24px 70px rgba(46, 36, 32, 0.14) !important;
}

.vibe-card-bg,
.vibe-card-svg-preview,
.vibe-card-preview {
  display: none !important;
}

.vibe-card::before,
.vibe-card::after,
.vibe-card-content::before {
  display: none !important;
  content: none !important;
}

.vibe-card-preview-art {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 70% !important;
  padding: 28px !important;
  overflow: hidden !important;
}

.preview-soft { background: linear-gradient(145deg, #fff8f3 0%, #f0ded8 58%, #dfbbb4 100%); }
.preview-bold { background: radial-gradient(circle at 78% 32%, rgba(126,74,45,0.42), transparent 28%), linear-gradient(145deg, #100a07 0%, #271711 56%, #4d2d22 100%); }
.preview-bright { background: linear-gradient(145deg, #fff4dc 0%, #f4d893 62%, #e6bf5a 100%); }
.preview-calm { background: linear-gradient(145deg, #eff8ef 0%, #cfe4d0 62%, #a9c7aa 100%); }

.preview-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-height: 28px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(82, 64, 56, 0.12) !important;
  font-family: var(--font-body) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 0.72 !important;
}

.preview-nav strong {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
}

.preview-bold .preview-nav { color: #e8c79c !important; border-color: rgba(232,199,156,0.18) !important; }
.preview-soft .preview-nav { color: #6e4c48 !important; }
.preview-bright .preview-nav { color: #5b3b11 !important; }
.preview-calm .preview-nav { color: #24462a !important; }

.preview-hero-zone {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr 0.88fr !important;
  gap: 26px !important;
  align-items: center !important;
  padding: 26px 0 !important;
}

.preview-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.preview-copy small {
  font-family: var(--font-body) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 700 !important;
  opacity: 0.76 !important;
}

.preview-copy b {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.55rem, 2.4vw, 2.35rem) !important;
  line-height: 0.98 !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
}

.preview-copy em {
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  opacity: 0.68 !important;
}

.preview-copy i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 112px !important;
  height: 34px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 0.66rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  margin-top: 4px !important;
}

.preview-image-shape {
  position: relative !important;
  min-height: 190px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.preview-image-shape::before,
.preview-image-shape::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
}

.preview-image-shape::before {
  inset: 12% 14% !important;
}
.preview-image-shape::after {
  width: 48%; height: 56%; right: 12%; bottom: 12%; opacity: 0.58 !important;
}

.preview-soft .preview-image-shape { background: rgba(214,176,168,0.55) !important; }
.preview-soft .preview-image-shape::before { background: rgba(255,246,242,0.28) !important; }
.preview-soft .preview-image-shape::after { background: rgba(183,125,134,0.30) !important; }
.preview-soft .preview-copy i { background: #bd7d8c !important; color: #fff7f2 !important; }
.preview-soft .preview-copy { color: #2e2420 !important; }

.preview-bold .preview-image-shape { background: rgba(72,38,24,0.72) !important; }
.preview-bold .preview-image-shape::before { background: rgba(206,146,93,0.15) !important; }
.preview-bold .preview-image-shape::after { background: rgba(214,154,98,0.30) !important; }
.preview-bold .preview-copy { color: #f7efe6 !important; }
.preview-bold .preview-copy b { color: #f7efe6 !important; }
.preview-bold .preview-copy b::first-line { color: #f7efe6 !important; }
.preview-bold .preview-copy i { background: rgba(205,148,91,0.18) !important; color: #f0c28c !important; border: 1px solid rgba(240,194,140,0.38) !important; }

.preview-bright .preview-image-shape { background: rgba(238,171,80,0.36) !important; }
.preview-bright .preview-image-shape::before { background: rgba(255,238,185,0.42) !important; }
.preview-bright .preview-image-shape::after { background: rgba(230,142,82,0.28) !important; }
.preview-bright .preview-copy { color: #24180a !important; }
.preview-bright .preview-copy i { background: #ef9265 !important; color: #fff8ed !important; }

.preview-calm .preview-image-shape { background: rgba(138,180,142,0.38) !important; }
.preview-calm .preview-image-shape::before { background: rgba(241,250,241,0.35) !important; }
.preview-calm .preview-image-shape::after { border-radius: 60% 40% 50% 50% !important; background: rgba(55,105,64,0.18) !important; }
.preview-calm .preview-copy { color: #152315 !important; }
.preview-calm .preview-copy i { background: #557a58 !important; color: #f2f8f2 !important; }

.preview-section-band {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(82,64,56,0.12) !important;
}
.preview-bold .preview-section-band { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-color: rgba(232,199,156,0.14) !important; }
.preview-section-band span {
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.preview-soft .preview-section-band span { background: rgba(255,248,244,0.58) !important; color: #7d4e57 !important; }
.preview-bold .preview-section-band span { background: rgba(255,255,255,0.055) !important; color: rgba(247,239,230,0.82) !important; border: 1px solid rgba(240,194,140,0.13) !important; }
.preview-bright .preview-section-band span { background: rgba(255,246,222,0.44) !important; color: #794711 !important; }
.preview-calm .preview-section-band span { background: rgba(246,252,246,0.52) !important; color: #315f38 !important; }

.vibe-card-content {
  position: relative !important;
  z-index: 4 !important;
  inset: auto !important;
  min-height: 30% !important;
  padding: 28px 34px 34px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}
.soft-card .vibe-card-content { background: linear-gradient(180deg, #ead2cc 0%, #d8b4ad 100%) !important; }
.bold-card .vibe-card-content { background: linear-gradient(180deg, #2c1a14 0%, #120b08 100%) !important; }
.bright-card .vibe-card-content { background: linear-gradient(180deg, #f1d278 0%, #dfbe5a 100%) !important; }
.calm-card .vibe-card-content { background: linear-gradient(180deg, #c5ddc7 0%, #a9c5aa 100%) !important; }

.vibe-card .card-tag { margin-bottom: 12px !important; }
.vibe-card h3 { font-size: clamp(1.9rem, 3vw, 2.8rem) !important; line-height: 0.96 !important; margin-bottom: 10px !important; }
.vibe-card p { font-size: 0.92rem !important; line-height: 1.55 !important; max-width: 540px !important; }

/* Mobile: actual carousel, no stack. Cache-busted and loaded last. */
@media (max-width: 768px) {
  .hero-right {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 42px !important;
    overflow: visible !important;
    transform: none !important;
  }
  .vibe-cards-float {
    position: relative !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 16px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 22px 30px !important;
    margin-left: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }
  .vibe-cards-float::-webkit-scrollbar { display: none !important; }
  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4) {
    position: relative !important;
    inset: auto !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 82vw !important;
    min-width: 82vw !important;
    max-width: 310px !important;
    height: 430px !important;
    flex: 0 0 82vw !important;
    scroll-snap-align: center !important;
    transform: none !important;
    animation: none !important;
    z-index: 1 !important;
    margin: 0 !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 50px rgba(46,36,32,.18) !important;
  }
  .vibe-card-float:hover { transform: none !important; }
  .vibe-card-float svg { width: 100% !important; height: 100% !important; display:block !important; }

  .vibes-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .vibe-card { aspect-ratio: auto !important; min-height: 0 !important; border-radius: 28px !important; }
  .vibe-card-preview-art { height: auto !important; min-height: 360px !important; padding: 22px !important; }
  .preview-hero-zone { grid-template-columns: 1fr !important; gap: 16px !important; padding: 20px 0 !important; }
  .preview-image-shape { min-height: 150px !important; order: -1 !important; }
  .preview-copy b { font-size: clamp(1.65rem, 8vw, 2.15rem) !important; }
  .preview-section-band { gap: 8px !important; }
  .preview-section-band span { min-height: 32px !important; font-size: 0.54rem !important; }
  .vibe-card-content { padding: 24px 26px 28px !important; min-height: auto !important; }
  .vibe-card .card-tag { font-size: 0.58rem !important; }
  .vibe-card h3 { font-size: clamp(2rem, 9vw, 2.8rem) !important; }
  .vibe-card p { font-size: 0.92rem !important; }
}

/* ==========================================================
   RLAFI ART-DIRECTION PATCH v3 — variation + mobile cue
   Goal: keep the premium card solution, but make each vibe
   preview feel like a different landing-page direction.
   ========================================================== */

/* Hero mobile carousel affordance */
.hero-swipe-indicator { display: none; }

@media (max-width: 768px) {
  .hero-right::after { content: none !important; display: none !important; }

  .hero-swipe-indicator {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 auto 4px !important;
    pointer-events: none !important;
  }

  .hero-swipe-track {
    position: relative !important;
    display: block !important;
    width: min(168px, 44vw) !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(82, 64, 56, 0.16) !important;
    overflow: hidden !important;
  }

  .hero-swipe-thumb {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 34% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: rgba(82, 64, 56, 0.58) !important;
    animation: swipeHint 2.8s ease-in-out infinite !important;
  }

  .hero-swipe-label {
    font-family: var(--font-body) !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(82, 64, 56, 0.56) !important;
  }

  @keyframes swipeHint {
    0%, 12% { transform: translateX(0); }
    46%, 58% { transform: translateX(190%); }
    100% { transform: translateX(0); }
  }
}

/* Global preview refinements */
.vibe-card-preview-art { isolation: isolate !important; }
.preview-copy { position: relative !important; z-index: 3 !important; }
.preview-image-shape { z-index: 1 !important; }
.preview-section-band { position: relative !important; z-index: 3 !important; }

/* Direction 01 — Soft: skincare/product landing page, airy split editorial */
.preview-soft {
  background:
    radial-gradient(circle at 78% 23%, rgba(255, 255, 255, 0.46), transparent 28%),
    linear-gradient(145deg, #fff8f3 0%, #f4e4df 46%, #dfbbb4 100%) !important;
}
.preview-soft .preview-nav {
  border-bottom-color: rgba(125, 78, 87, 0.14) !important;
}
.preview-soft .preview-hero-zone {
  grid-template-columns: 0.92fr 1fr !important;
  gap: 34px !important;
  align-items: center !important;
  padding: 44px 0 34px !important;
}
.preview-soft .preview-copy b { font-size: clamp(1.7rem, 2.75vw, 2.55rem) !important; }
.preview-soft .preview-image-shape {
  min-height: 230px !important;
  border-radius: 24px !important;
  transform: translateY(-2px) !important;
}
.preview-soft .preview-section-band span:nth-child(2) {
  background: rgba(214, 176, 168, 0.36) !important;
}

/* Direction 02 — Bold: luxury fashion/editorial, darker asymmetric stage */
.preview-bold {
  background:
    radial-gradient(circle at 88% 18%, rgba(214,154,98,0.16), transparent 18%),
    radial-gradient(circle at 70% 42%, rgba(126,74,45,0.42), transparent 32%),
    linear-gradient(145deg, #0d0806 0%, #21120e 48%, #4d2d22 100%) !important;
}
.preview-bold .preview-hero-zone {
  grid-template-columns: 0.82fr 1.12fr !important;
  gap: 40px !important;
  align-items: center !important;
  padding: 46px 0 40px !important;
}
.preview-bold .preview-copy b {
  font-size: clamp(1.95rem, 3vw, 2.75rem) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
}
.preview-bold .preview-copy b::first-line { color: #f7efe6 !important; }
.preview-bold .preview-copy b { color: #e7b980 !important; }
.preview-bold .preview-image-shape {
  min-height: 250px !important;
  border-radius: 26px 26px 8px 8px !important;
  box-shadow: inset 0 0 0 1px rgba(240,194,140,0.08) !important;
}
.preview-bold .preview-section-band {
  gap: 16px !important;
  padding-top: 20px !important;
}
.preview-bold .preview-section-band span {
  border-radius: 7px !important;
  min-height: 34px !important;
}

/* Direction 03 — Bright: launch/startup editorial page, centered energy */
.preview-bright {
  background:
    radial-gradient(circle at 72% 34%, rgba(255, 255, 255, 0.42), transparent 24%),
    radial-gradient(circle at 80% 52%, rgba(238, 171, 80, 0.30), transparent 25%),
    linear-gradient(145deg, #fff4dc 0%, #f8dfa2 45%, #e8c254 100%) !important;
}
.preview-bright .preview-nav {
  justify-content: space-between !important;
  color: #684111 !important;
}
.preview-bright .preview-hero-zone {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 58px 0 48px !important;
  min-height: 285px !important;
}
.preview-bright .preview-copy {
  max-width: 58% !important;
  gap: 12px !important;
}
.preview-bright .preview-copy b {
  font-size: clamp(1.95rem, 3vw, 2.85rem) !important;
}
.preview-bright .preview-image-shape {
  position: absolute !important;
  top: 112px !important;
  right: 30px !important;
  width: 38% !important;
  height: 34% !important;
  min-height: 0 !important;
  border-radius: 28px !important;
  opacity: 0.86 !important;
}
.preview-bright .preview-section-band {
  border-top-color: rgba(121, 71, 17, 0.12) !important;
  margin-top: auto !important;
}
.preview-bright .preview-section-band span {
  border-radius: 12px !important;
  min-height: 38px !important;
}

/* Direction 04 — Calm: interior/wellness editorial, quiet asymmetry */
.preview-calm {
  background:
    radial-gradient(circle at 74% 24%, rgba(255,255,255,0.42), transparent 25%),
    linear-gradient(145deg, #eff8ef 0%, #d7ead8 48%, #a9c7aa 100%) !important;
}
.preview-calm .preview-nav {
  color: #315f38 !important;
  letter-spacing: 0.22em !important;
}
.preview-calm .preview-hero-zone {
  display: block !important;
  padding: 60px 0 44px !important;
  min-height: 290px !important;
}
.preview-calm .preview-copy {
  max-width: 54% !important;
  margin-top: 8px !important;
}
.preview-calm .preview-copy b {
  font-size: clamp(1.85rem, 2.85vw, 2.65rem) !important;
}
.preview-calm .preview-image-shape {
  position: absolute !important;
  right: 26px !important;
  top: 112px !important;
  width: 42% !important;
  height: 43% !important;
  min-height: 0 !important;
  border-radius: 24px !important;
  opacity: 0.92 !important;
}
.preview-calm .preview-image-shape::before {
  inset: 24% -12% 28% 0 !important;
  border-radius: 55% 45% 50% 50% !important;
}
.preview-calm .preview-section-band {
  border-top-color: rgba(49, 95, 56, 0.12) !important;
}
.preview-calm .preview-section-band span {
  border-radius: 11px !important;
  min-height: 36px !important;
}

/* Keep the variations clean on one-column mobile cards */
@media (max-width: 768px) {
  .vibe-card-preview-art {
    min-height: 390px !important;
    height: auto !important;
    padding: 22px !important;
  }
  .preview-soft .preview-hero-zone,
  .preview-bold .preview-hero-zone {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 28px 0 22px !important;
  }
  .preview-bright .preview-hero-zone,
  .preview-calm .preview-hero-zone {
    display: flex !important;
    min-height: 260px !important;
    padding: 34px 0 24px !important;
  }
  .preview-bright .preview-copy,
  .preview-calm .preview-copy {
    max-width: 100% !important;
  }
  .preview-bright .preview-image-shape,
  .preview-calm .preview-image-shape {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 150px !important;
    order: -1 !important;
    margin-bottom: 8px !important;
  }
  .preview-bold .preview-image-shape,
  .preview-soft .preview-image-shape {
    min-height: 150px !important;
    order: -1 !important;
  }
}

/* ==========================================================
   RLAFI ART-DIRECTION PATCH v4 — reference-based differentiation
   1) Make the four vibe previews visually different, inspired by
      the supplied references, without copying their content.
   2) Mobile hero indicator becomes a real scroll-position bar.
   ========================================================== */

/* shared: stronger editorial cards, less 'same template' feeling */
.vibe-card {
  overflow: hidden !important;
}
.vibe-card-preview-art {
  position: relative !important;
  height: 68% !important;
  min-height: 420px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.vibe-card-content {
  position: relative !important;
  z-index: 5 !important;
  min-height: 32% !important;
}
.preview-nav,
.preview-hero-zone,
.preview-section-band,
.preview-copy,
.preview-image-shape {
  transition: none !important;
}

/* SOFT — reference: intimate/polaroid/editorial boutique */
.preview-soft {
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.56) 0 0, transparent 18%),
    linear-gradient(140deg, #fff9f5 0%, #f1d9d4 55%, #d7aaa5 100%) !important;
}
.preview-soft .preview-nav {
  position: absolute !important;
  top: 22px !important;
  left: 28px !important;
  right: 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 17px !important;
  border-bottom: 1px solid rgba(82,64,56,.16) !important;
  z-index: 4 !important;
}
.preview-soft .preview-nav strong { font-style: italic !important; }
.preview-soft .preview-nav span:nth-child(2) { letter-spacing: .28em !important; text-transform: uppercase !important; }
.preview-soft .preview-nav span:nth-child(3) {
  display: inline-flex !important; align-items:center; justify-content:center;
  min-width: 78px !important; height: 26px !important; border-radius: 999px !important;
  background: rgba(255,255,255,.62) !important;
}
.preview-soft .preview-hero-zone {
  position: absolute !important;
  inset: 88px 28px 104px 28px !important;
  display: grid !important;
  grid-template-columns: .86fr 1fr !important;
  align-items: center !important;
  gap: 30px !important;
  border-bottom: 1px solid rgba(82,64,56,.14) !important;
}
.preview-soft .preview-copy { align-self: center !important; }
.preview-soft .preview-copy small { display:block !important; margin-bottom:20px !important; letter-spacing:.3em !important; color:#9d6570 !important; }
.preview-soft .preview-copy b { display:block !important; font-family:var(--font-display) !important; font-size: clamp(2rem, 4.2vw, 3.2rem) !important; line-height:.96 !important; color:#211815 !important; }
.preview-soft .preview-copy em { display:block !important; margin-top:16px !important; color:rgba(46,36,32,.72) !important; }
.preview-soft .preview-copy i { display:inline-flex !important; margin-top:22px !important; padding:12px 28px !important; border-radius:999px !important; background:#bf7f8c !important; color:#fff !important; font-style:normal !important; font-weight:700 !important; }
.preview-soft .preview-image-shape {
  width: 100% !important; height: 70% !important; min-height: 170px !important; border-radius: 34px !important;
  background:
    radial-gradient(ellipse at 42% 48%, rgba(255,255,255,.42) 0 30%, transparent 31%),
    radial-gradient(ellipse at 66% 52%, rgba(177,112,121,.28) 0 24%, transparent 25%),
    linear-gradient(145deg, rgba(208,150,148,.55), rgba(244,223,218,.72)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.32) !important;
}
.preview-soft .preview-section-band {
  position: absolute !important; left: 28px !important; right: 28px !important; bottom: 34px !important;
  display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:14px !important;
}
.preview-soft .preview-section-band span { padding:17px 10px !important; border-radius:13px !important; background:rgba(255,255,255,.62) !important; text-align:center !important; font-weight:700 !important; letter-spacing:.12em !important; }

/* BOLD — reference: fashion/luxury editorial, high contrast */
.preview-bold {
  background:
    radial-gradient(circle at 82% 35%, rgba(132,76,45,.34) 0 16%, transparent 17%),
    linear-gradient(135deg, #0e0907 0%, #26140e 52%, #503122 100%) !important;
}
.preview-bold .preview-nav {
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:58px !important;
  display:grid !important; grid-template-columns: 1fr 1fr 1fr !important; align-items:center !important; padding:0 32px !important;
  background:rgba(8,5,4,.74) !important; border-bottom:1px solid rgba(230,180,126,.16) !important; z-index:4 !important;
}
.preview-bold .preview-nav strong { color:#d1a06f !important; letter-spacing:.28em !important; }
.preview-bold .preview-nav span { color:rgba(245,225,205,.62) !important; letter-spacing:.2em !important; text-transform:uppercase !important; }
.preview-bold .preview-nav span:last-child { justify-self:end !important; border:1px solid rgba(209,160,111,.45) !important; padding:8px 20px !important; border-radius:4px !important; color:#d1a06f !important; }
.preview-bold .preview-hero-zone {
  position:absolute !important; inset:90px 36px 98px 36px !important;
  display:grid !important; grid-template-columns: .92fr 1fr !important; align-items:center !important; gap:42px !important;
}
.preview-bold .preview-copy small { display:block !important; color:#c8966a !important; letter-spacing:.38em !important; margin-bottom:28px !important; }
.preview-bold .preview-copy b { display:block !important; font-family:var(--font-display) !important; font-size:clamp(2.7rem, 5vw, 4.25rem) !important; line-height:.9 !important; color:#fff8ee !important; text-transform:uppercase !important; }
.preview-bold .preview-copy b::first-line { color:#ffffff !important; }
.preview-bold .preview-copy em { display:block !important; margin-top:20px !important; color:rgba(245,225,205,.66) !important; }
.preview-bold .preview-copy i { display:inline-flex !important; margin-top:26px !important; padding:13px 34px !important; border:1px solid rgba(209,160,111,.56) !important; border-radius:6px !important; color:#d1a06f !important; background:rgba(209,160,111,.08) !important; font-style:normal !important; text-transform:uppercase !important; letter-spacing:.12em !important; }
.preview-bold .preview-image-shape {
  height: 78% !important; min-height: 220px !important; border-radius: 18px !important;
  background:
    radial-gradient(ellipse at 54% 48%, rgba(190,119,72,.28) 0 34%, transparent 35%),
    linear-gradient(135deg, rgba(58,25,15,.86), rgba(91,51,32,.55)) !important;
}
.preview-bold .preview-section-band {
  position:absolute !important; left:36px !important; right:36px !important; bottom:34px !important;
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:18px !important; padding-top:22px !important;
  border-top:1px solid rgba(209,160,111,.22) !important;
}
.preview-bold .preview-section-band span { padding:16px 10px !important; border-radius:8px !important; border:1px solid rgba(209,160,111,.24) !important; background:rgba(255,255,255,.04) !important; color:#f8eee7 !important; text-align:center !important; font-weight:700 !important; text-transform:uppercase !important; }

/* BRIGHT — reference: cheerful campaign / strong type / friendly shapes */
.preview-bright {
  background:
    radial-gradient(circle at 18% 70%, rgba(255,255,255,.58) 0 12%, transparent 13%),
    radial-gradient(circle at 82% 22%, rgba(238,155,103,.25) 0 17%, transparent 18%),
    linear-gradient(145deg, #fff8df 0%, #f6d97a 68%, #efa06b 100%) !important;
}
.preview-bright .preview-nav {
  position:absolute !important; top:24px !important; left:30px !important; right:30px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important; z-index:4 !important;
  padding-bottom:14px !important; border-bottom:1px solid rgba(82,64,56,.14) !important;
}
.preview-bright .preview-nav strong { font-style:italic !important; }
.preview-bright .preview-nav span { text-transform:uppercase !important; letter-spacing:.22em !important; }
.preview-bright .preview-nav span:last-child { background:#f39b71 !important; color:#fff !important; border-radius:999px !important; padding:9px 22px !important; letter-spacing:0 !important; }
.preview-bright .preview-hero-zone {
  position:absolute !important; inset:92px 32px 118px 32px !important;
  display:grid !important; grid-template-columns:.95fr .9fr !important; align-items:center !important; gap:28px !important;
}
.preview-bright .preview-copy small { display:block !important; letter-spacing:.35em !important; color:#c67851 !important; margin-bottom:22px !important; }
.preview-bright .preview-copy b { display:block !important; font-family:var(--font-display) !important; font-size:clamp(2.4rem, 5vw, 4.1rem) !important; line-height:.9 !important; color:#211815 !important; }
.preview-bright .preview-copy em { display:block !important; margin-top:16px !important; color:rgba(46,36,32,.66) !important; font-style:normal !important; }
.preview-bright .preview-copy i { display:inline-flex !important; margin-top:22px !important; padding:13px 34px !important; background:#f39b71 !important; border-radius:999px !important; color:#fff !important; font-style:normal !important; font-weight:800 !important; }
.preview-bright .preview-image-shape {
  height: 86% !important; min-height:220px !important; border-radius: 48% 48% 24px 24px !important;
  background:
    radial-gradient(circle at 48% 37%, rgba(238,161,81,.45) 0 22%, transparent 23%),
    radial-gradient(ellipse at 55% 58%, rgba(226,139,62,.42) 0 32%, transparent 33%),
    linear-gradient(145deg, rgba(255,225,147,.68), rgba(235,157,74,.44)) !important;
}
.preview-bright .preview-section-band {
  position:absolute !important; left:32px !important; right:32px !important; bottom:34px !important;
  display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:16px !important; padding-top:22px !important;
  border-top:1px solid rgba(139,86,38,.16) !important;
}
.preview-bright .preview-section-band span { padding:17px 10px !important; border-radius:12px !important; background:rgba(255,247,228,.64) !important; color:#8f5631 !important; text-align:center !important; font-weight:800 !important; text-transform:uppercase !important; }

/* CALM — reference: yoga / wellness poster, asymmetric calm */
.preview-calm {
  background:
    radial-gradient(ellipse at 78% 0%, rgba(255,255,255,.6) 0 26%, transparent 27%),
    linear-gradient(145deg, #eef7ea 0%, #c9dfcc 56%, #91b89b 100%) !important;
}
.preview-calm .preview-nav {
  position:absolute !important; top:26px !important; left:32px !important; right:32px !important;
  display:grid !important; grid-template-columns:1fr 1fr 1fr !important; align-items:center !important; z-index:4 !important;
  padding-bottom:18px !important; border-bottom:1px solid rgba(39,77,52,.18) !important;
}
.preview-calm .preview-nav strong { letter-spacing:.25em !important; color:#23472f !important; }
.preview-calm .preview-nav span { justify-self:center !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:rgba(35,71,47,.62) !important; }
.preview-calm .preview-nav span:last-child { justify-self:end !important; color:#23472f !important; }
.preview-calm .preview-hero-zone {
  position:absolute !important; inset:96px 32px 116px 32px !important;
  display:grid !important; grid-template-columns:.86fr 1fr !important; align-items:center !important; gap:36px !important;
}
.preview-calm .preview-copy small { display:block !important; letter-spacing:.36em !important; color:#638d69 !important; margin-bottom:22px !important; }
.preview-calm .preview-copy b { display:block !important; font-family:var(--font-display) !important; font-size:clamp(2.2rem, 4.5vw, 3.7rem) !important; line-height:.96 !important; color:#142b1d !important; }
.preview-calm .preview-copy em { display:block !important; margin-top:18px !important; color:rgba(20,43,29,.62) !important; }
.preview-calm .preview-copy i { display:inline-flex !important; margin-top:24px !important; padding:13px 28px !important; border-radius:8px !important; background:#5d875f !important; color:#fff !important; font-style:normal !important; font-weight:800 !important; }
.preview-calm .preview-image-shape {
  height: 86% !important; min-height:230px !important; border-radius: 24px !important;
  background:
    radial-gradient(ellipse at 53% 48%, rgba(111,158,119,.24) 0 42%, transparent 43%),
    linear-gradient(90deg, rgba(255,255,255,.25) 0 1px, transparent 1px 33%, rgba(255,255,255,.18) 33% 34%, transparent 34% 66%, rgba(255,255,255,.18) 66% 67%, transparent 67%),
    linear-gradient(145deg, rgba(200,225,204,.74), rgba(126,176,135,.38)) !important;
}
.preview-calm .preview-section-band {
  position:absolute !important; left:32px !important; right:32px !important; bottom:34px !important;
  display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:16px !important; padding-top:22px !important;
  border-top:1px solid rgba(39,77,52,.18) !important;
}
.preview-calm .preview-section-band span { padding:17px 10px !important; border-radius:10px !important; background:rgba(255,255,255,.48) !important; border:1px solid rgba(39,77,52,.12) !important; color:#315f3c !important; text-align:center !important; font-weight:800 !important; text-transform:uppercase !important; }

/* Smaller desktop cards: keep compositions intact without collisions */
@media (max-width: 1180px) {
  .vibe-card-preview-art { min-height: 360px !important; }
  .preview-soft .preview-hero-zone,
  .preview-bold .preview-hero-zone,
  .preview-bright .preview-hero-zone,
  .preview-calm .preview-hero-zone { gap: 22px !important; }
  .preview-copy b { font-size: clamp(1.85rem, 4vw, 2.8rem) !important; }
}

/* Mobile vibe cards: one clear art-directed preview, not cramped desktop copies */
@media (max-width: 768px) {
  .vibe-card-preview-art {
    min-height: 430px !important;
    height: 430px !important;
  }
  .preview-soft .preview-nav,
  .preview-bright .preview-nav,
  .preview-calm .preview-nav { left: 22px !important; right: 22px !important; top: 20px !important; }
  .preview-bold .preview-nav { padding: 0 22px !important; }
  .preview-soft .preview-hero-zone,
  .preview-bright .preview-hero-zone,
  .preview-calm .preview-hero-zone,
  .preview-bold .preview-hero-zone {
    inset: 82px 22px 108px 22px !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .preview-soft .preview-image-shape,
  .preview-bright .preview-image-shape,
  .preview-calm .preview-image-shape,
  .preview-bold .preview-image-shape {
    position:absolute !important;
    right:0 !important; top:10px !important;
    width:42% !important; height:52% !important; min-height:0 !important;
    opacity:.72 !important;
  }
  .preview-copy { max-width: 68% !important; }
  .preview-copy b { font-size: 2.45rem !important; line-height: .95 !important; }
  .preview-copy em { font-size: .82rem !important; }
  .preview-section-band { left:22px !important; right:22px !important; bottom:24px !important; gap:10px !important; }
  .preview-section-band span { padding: 14px 8px !important; font-size: .58rem !important; }
}

/* Mobile hero scroll bar — real state indicator only, no autonomous animation */
@media (max-width: 768px) {
  .hero-swipe-indicator { margin-top: 16px !important; margin-bottom: 10px !important; }
  .hero-swipe-track {
    width: min(236px, 64vw) !important;
    height: 5px !important;
    background: rgba(82,64,56,.18) !important;
  }
  .hero-swipe-thumb {
    width: 25% !important;
    background: rgba(82,64,56,.72) !important;
    animation: none !important;
    transform: translateX(0);
    will-change: transform;
  }
  .hero-swipe-label { color: rgba(82,64,56,.64) !important; }
}


/* =========================================================
   RLAFI v5 — art-direction patch
   Purpose:
   1) Main scrolling vibe cards get visibly different landing-page languages.
   2) Mobile hero carousel remains a real swipe carousel, no stacked pile.
   3) Swipe indicator is longer and moves only by JS scroll state.
   ========================================================= */

/* Keep the cards premium and stable */
.vibes-grid{
  align-items:start !important;
}
.vibe-card{
  min-height: 860px !important;
  overflow:hidden !important;
  border-radius: 40px !important;
}
.vibe-card-preview-art{
  position: relative !important;
  min-height: 560px !important;
  height: 68% !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.vibe-card-content{
  min-height: 260px !important;
  padding-top: 32px !important;
  z-index: 8 !important;
}
.vibe-card-preview-art .preview-nav,
.vibe-card-preview-art .preview-hero-zone,
.vibe-card-preview-art .preview-section-band,
.vibe-card-preview-art .preview-copy,
.vibe-card-preview-art .preview-image-shape{
  z-index:2 !important;
}
.vibe-card-preview-art::before,
.vibe-card-preview-art::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:1;
}

/* ---------- Soft & Intimate: boutique skincare / polaroid editorial ---------- */
.preview-soft{
  background:
    radial-gradient(ellipse at 82% 24%, rgba(255,255,255,.52) 0 16%, transparent 17%),
    radial-gradient(ellipse at 10% 95%, rgba(187,122,135,.18) 0 20%, transparent 21%),
    linear-gradient(150deg,#fffaf7 0%,#f4dfdb 56%,#d9aca8 100%) !important;
}
.preview-soft::before{
  width: 54%; height: 52%;
  right: 30px; top: 112px;
  border-radius: 28px;
  transform: rotate(-2deg);
  background:
    linear-gradient(#fffaf7,#fffaf7) padding-box,
    linear-gradient(145deg,rgba(188,126,137,.25),rgba(255,255,255,.2)) border-box;
  border: 12px solid rgba(255,255,255,.86);
  box-shadow: 0 26px 60px rgba(126,72,76,.14);
}
.preview-soft::after{
  width: 38%; height: 30%;
  right: 76px; top: 162px;
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(circle at 55% 52%, rgba(196,132,142,.33) 0 31%, transparent 32%),
    radial-gradient(circle at 34% 46%, rgba(255,255,255,.60) 0 36%, transparent 37%);
  transform: rotate(-2deg);
}
.preview-soft .preview-nav{
  background: transparent !important;
  border-bottom-color: rgba(82,64,56,.12) !important;
}
.preview-soft .preview-nav span:nth-child(2){ justify-self:center !important; }
.preview-soft .preview-nav span:nth-child(3){ background: transparent !important; min-width:auto !important; }
.preview-soft .preview-hero-zone{
  inset: 126px 32px 94px 32px !important;
  display:block !important;
  border-bottom: 1px solid rgba(82,64,56,.13) !important;
}
.preview-soft .preview-copy{
  max-width: 42% !important;
  padding-top: 36px !important;
}
.preview-soft .preview-copy b{ font-size: clamp(2.25rem,4.1vw,3.5rem) !important; }
.preview-soft .preview-image-shape{ display:none !important; }
.preview-soft .preview-section-band{
  bottom: 34px !important;
  grid-template-columns: repeat(3,1fr) !important;
}

/* ---------- Bold & Magnetic: dark fashion editorial / magazine cover ---------- */
.preview-bold{
  background:
    radial-gradient(circle at 82% 44%, rgba(182,112,60,.22) 0 15%, transparent 16%),
    linear-gradient(90deg,#0b0604 0%,#1c0f0b 46%,#3d2118 100%) !important;
}
.preview-bold::before{
  right: 36px; top: 74px;
  width: 42%; height: 67%;
  border-radius: 5px;
  background:
    linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03)),
    radial-gradient(ellipse at 50% 45%, rgba(194,118,67,.30) 0 34%, transparent 35%),
    linear-gradient(180deg,rgba(73,35,22,.78),rgba(15,7,5,.25));
  box-shadow: inset 0 0 0 1px rgba(230,177,120,.12);
}
.preview-bold::after{
  left: 36px; right: 36px; bottom: 92px;
  height: 1px;
  background: rgba(230,177,120,.24);
}
.preview-bold .preview-nav{
  height: 58px !important;
  padding: 0 34px !important;
  background: rgba(0,0,0,.62) !important;
}
.preview-bold .preview-hero-zone{
  inset: 116px 36px 116px 36px !important;
  display:block !important;
}
.preview-bold .preview-copy{ max-width: 48% !important; }
.preview-bold .preview-copy small{ margin-bottom: 22px !important; }
.preview-bold .preview-copy b{ font-size: clamp(3rem,5vw,4.7rem) !important; letter-spacing:.01em !important; }
.preview-bold .preview-image-shape{ display:none !important; }
.preview-bold .preview-section-band{
  left:36px !important; right:36px !important; bottom:36px !important;
  grid-template-columns: 1fr 1fr !important;
  border-top:0 !important;
}

/* ---------- Bright & Playful: campaign poster / rounded shapes ---------- */
.preview-bright{
  background:
    radial-gradient(circle at 88% 14%, rgba(255,255,255,.7) 0 10%, transparent 11%),
    radial-gradient(circle at 20% 76%, rgba(238,155,103,.24) 0 13%, transparent 14%),
    linear-gradient(160deg,#fff6d8 0%,#f4d56a 62%,#f0986c 115%) !important;
}
.preview-bright::before{
  right: 34px; top: 112px;
  width: 38%; height: 44%;
  border-radius: 48% 48% 18px 18px;
  background:
    radial-gradient(circle at 50% 36%,rgba(234,142,54,.42) 0 24%,transparent 25%),
    radial-gradient(ellipse at 50% 64%,rgba(216,130,40,.36) 0 36%,transparent 37%),
    linear-gradient(160deg,rgba(255,231,151,.78),rgba(235,143,60,.45));
}
.preview-bright::after{
  left: 32px; top: 116px;
  content:"ADOPT\A A NEW\A IDEA";
  white-space: pre;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.4rem,5.2vw,4.4rem);
  line-height: .9;
  letter-spacing: .02em;
  color: rgba(46,36,32,.16);
  text-transform: uppercase;
}
.preview-bright .preview-nav{
  top:26px !important;
  border-bottom:0 !important;
}
.preview-bright .preview-hero-zone{
  inset: 118px 34px 104px 34px !important;
  display:block !important;
}
.preview-bright .preview-copy{ max-width: 44% !important; position:relative !important; z-index:3 !important; padding-top:54px !important; }
.preview-bright .preview-copy b{ font-size: clamp(2.2rem,4vw,3.55rem) !important; }
.preview-bright .preview-image-shape{ display:none !important; }
.preview-bright .preview-section-band{
  left:34px !important; right:34px !important; bottom:32px !important;
  border-top: 1px solid rgba(96,66,22,.14) !important;
  grid-template-columns: repeat(3,1fr) !important;
}

/* ---------- Calm & Editorial: wellness poster / large quiet image field ---------- */
.preview-calm{
  background:
    linear-gradient(90deg,rgba(238,248,235,.96) 0 48%,rgba(199,222,202,.85) 48% 100%),
    linear-gradient(145deg,#eff8ed 0%,#c9dfcc 56%,#91b89b 100%) !important;
}
.preview-calm::before{
  right: 28px; top: 78px;
  width: 42%; height: 70%;
  border-radius: 0 0 180px 180px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.22)),
    radial-gradient(ellipse at 54% 50%,rgba(86,130,91,.22) 0 32%,transparent 33%);
  box-shadow: inset 0 0 0 1px rgba(54,93,58,.08);
}
.preview-calm::after{
  right: 6%; top: 38px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
}
.preview-calm .preview-nav{
  border-bottom: 0 !important;
}
.preview-calm .preview-hero-zone{
  inset: 118px 34px 104px 34px !important;
  display:block !important;
}
.preview-calm .preview-copy{ max-width: 46% !important; padding-top: 42px !important; }
.preview-calm .preview-copy b{ font-size: clamp(2.1rem,4vw,3.55rem) !important; }
.preview-calm .preview-copy i{ border-radius: 12px !important; }
.preview-calm .preview-image-shape{ display:none !important; }
.preview-calm .preview-section-band{
  left:34px !important; right:34px !important; bottom:30px !important;
  border-top: 1px solid rgba(34,79,44,.14) !important;
}

/* Main vibe cards mobile: make differences survive on small screens */
@media (max-width: 768px){
  .vibe-card{ min-height: auto !important; border-radius: 34px !important; }
  .vibe-card-preview-art{ height: 480px !important; min-height: 480px !important; }
  .vibe-card-content{ min-height: auto !important; padding: 28px 28px 32px !important; }

  .preview-soft::before{ right:18px; top:112px; width:52%; height:42%; border-width:8px; }
  .preview-soft::after{ right:44px; top:146px; width:36%; height:24%; }
  .preview-soft .preview-copy{ max-width: 50% !important; padding-top:30px !important; }

  .preview-bold::before{ right:24px; top:78px; width:42%; height:62%; }
  .preview-bold .preview-copy{ max-width: 54% !important; padding-top: 4px !important; }
  .preview-bold .preview-copy b{ font-size:2.95rem !important; }

  .preview-bright::before{ right:22px; top:150px; width:38%; height:34%; }
  .preview-bright::after{ left:24px; top:124px; font-size:2.65rem; }
  .preview-bright .preview-copy{ max-width: 54% !important; padding-top:88px !important; }

  .preview-calm::before{ right:20px; top:82px; width:42%; height:62%; border-radius: 0 0 120px 120px; }
  .preview-calm .preview-copy{ max-width: 54% !important; padding-top: 46px !important; }

  .preview-section-band{ grid-template-columns: repeat(3,1fr) !important; }
  .preview-section-band span{ font-size:.58rem !important; padding: 13px 7px !important; }
}

/* HERO mobile carousel: never allow floating pile on phones */
@media (max-width: 768px){
  .hero-right{ transform:none !important; width:100% !important; margin-top:42px !important; }
  .vibe-cards-float{
    position:relative !important;
    display:flex !important;
    flex-direction:row !important;
    gap:16px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    padding: 8px 22px 16px !important;
    height:auto !important;
    width:100% !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .vibe-cards-float::-webkit-scrollbar{ display:none !important; }
  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4){
    position:relative !important;
    top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    transform:none !important;
    animation:none !important;
    flex:0 0 78vw !important;
    width:78vw !important;
    max-width:320px !important;
    min-width:250px !important;
    height:420px !important;
    scroll-snap-align:center !important;
    border-radius:24px !important;
  }
  .hero-swipe-indicator{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:8px !important; }
  .hero-swipe-track{ width:min(300px,74vw) !important; height:6px !important; border-radius:999px !important; overflow:hidden !important; background:rgba(82,64,56,.18) !important; }
  .hero-swipe-thumb{ display:block !important; height:100% !important; width:25% !important; border-radius:999px !important; background:rgba(82,64,56,.68) !important; animation:none !important; transition:transform .12s linear !important; }
}

/* =========================================================
   RLAFI v6 — stabilize and re-art-direct vibe cards
   Fixes:
   - no desktop card collisions / bleed
   - stronger differences between the 4 landing-page previews
   - mobile cards are shorter, cleaner, and do not overlap internally
   ========================================================= */

.vibes-grid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 36px !important;
  align-items:start !important;
  overflow: visible !important;
}

.vibe-card{
  width:100% !important;
  min-width:0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  display:flex !important;
  flex-direction:column !important;
  border-radius: 36px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  transform:none;
}

.vibe-card:hover{ transform: translateY(-5px) !important; }

.vibe-card-preview-art{
  position:relative !important;
  flex:0 0 520px !important;
  height:520px !important;
  min-height:520px !important;
  width:100% !important;
  overflow:hidden !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.vibe-card-preview-art *,
.vibe-card-preview-art::before,
.vibe-card-preview-art::after{
  box-sizing:border-box !important;
}

.vibe-card-content{
  position:relative !important;
  inset:auto !important;
  flex:0 0 auto !important;
  min-height:210px !important;
  padding:34px 38px 40px !important;
  justify-content:flex-start !important;
  z-index:5 !important;
}

.vibe-card h3{ font-size: clamp(2rem, 2.9vw, 3rem) !important; line-height:.96 !important; }
.vibe-card p{ font-size:.95rem !important; line-height:1.55 !important; max-width: 560px !important; }
.vca-overlay{ top:24px !important; right:24px !important; z-index:10 !important; }

/* shared preview skeleton */
.vibe-card-preview-art .preview-nav{
  position:absolute !important;
  top:26px !important; left:32px !important; right:32px !important;
  min-height:32px !important;
  padding:0 0 18px 0 !important;
  display:grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items:center !important;
  gap:18px !important;
  border-bottom:1px solid rgba(82,64,56,.14) !important;
  background:transparent !important;
  z-index:5 !important;
}
.vibe-card-preview-art .preview-nav strong,
.vibe-card-preview-art .preview-nav span{
  min-width:0 !important;
  white-space:nowrap !important;
}
.vibe-card-preview-art .preview-nav span:nth-child(2){ justify-self:center !important; }
.vibe-card-preview-art .preview-nav span:nth-child(3){ justify-self:end !important; }

.vibe-card-preview-art .preview-hero-zone{
  position:absolute !important;
  inset:100px 32px 98px 32px !important;
  display:grid !important;
  gap:34px !important;
  align-items:center !important;
  padding:0 !important;
  border:0 !important;
  z-index:4 !important;
}
.vibe-card-preview-art .preview-copy{
  position:relative !important;
  z-index:6 !important;
  max-width:none !important;
  padding:0 !important;
  display:block !important;
}
.vibe-card-preview-art .preview-copy small{
  display:block !important;
  margin:0 0 20px !important;
  font-size:.62rem !important;
  letter-spacing:.28em !important;
}
.vibe-card-preview-art .preview-copy b{
  display:block !important;
  font-family:var(--font-display) !important;
  line-height:.95 !important;
  letter-spacing:-.035em !important;
  font-weight:500 !important;
}
.vibe-card-preview-art .preview-copy em{
  display:block !important;
  margin-top:16px !important;
  max-width:28ch !important;
}
.vibe-card-preview-art .preview-copy i{
  display:inline-flex !important;
  margin-top:22px !important;
  height:auto !important;
}
.vibe-card-preview-art .preview-image-shape{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  z-index:4 !important;
}
.vibe-card-preview-art .preview-section-band{
  position:absolute !important;
  left:32px !important; right:32px !important; bottom:30px !important;
  z-index:6 !important;
  display:grid !important;
  gap:14px !important;
  padding-top:18px !important;
  border-top:1px solid rgba(82,64,56,.14) !important;
}
.vibe-card-preview-art .preview-section-band span{
  min-height:42px !important;
  padding:0 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  white-space:nowrap !important;
}

/* 01 Soft: vertical boutique/editorial, big left headline + offset photo card */
.preview-soft{
  background:
    radial-gradient(ellipse at 88% 18%, rgba(255,255,255,.58) 0 18%, transparent 19%),
    radial-gradient(ellipse at 14% 96%, rgba(191,127,140,.22) 0 24%, transparent 25%),
    linear-gradient(155deg,#fffaf7 0%,#f4ded9 56%,#dfb7b0 100%) !important;
}
.preview-soft::before{
  width:48% !important; height:48% !important;
  left:auto !important; right:34px !important; top:118px !important;
  border-radius:30px !important;
  transform:rotate(-2deg) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,226,220,.78)) !important;
  border:10px solid rgba(255,255,255,.78) !important;
  box-shadow:0 24px 60px rgba(126,72,76,.15) !important;
}
.preview-soft::after{
  width:30% !important; height:24% !important;
  right:72px !important; top:166px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 65% 54%, rgba(198,133,143,.38) 0 31%, transparent 32%), radial-gradient(circle at 34% 46%, rgba(255,255,255,.64) 0 37%, transparent 38%) !important;
}
.preview-soft .preview-hero-zone{ display:block !important; }
.preview-soft .preview-copy{ max-width:42% !important; padding-top:38px !important; }
.preview-soft .preview-copy b{ font-size:clamp(2.25rem,3.8vw,3.45rem) !important; color:#221714 !important; }
.preview-soft .preview-copy i{ padding:11px 24px !important; border-radius:999px !important; background:#bf7f8c !important; color:white !important; font-style:normal !important; font-weight:800 !important; }
.preview-soft .preview-image-shape{ display:none !important; }
.preview-soft .preview-section-band{ grid-template-columns:repeat(3,1fr) !important; }
.preview-soft .preview-section-band span{ background:rgba(255,255,255,.62) !important; color:#7b4753 !important; }

/* 02 Bold: dark fashion cover, huge left type + tall right image slab */
.preview-bold{
  background:
    radial-gradient(circle at 78% 43%, rgba(184,111,61,.24) 0 15%, transparent 16%),
    linear-gradient(90deg,#0b0604 0%,#1b0f0b 46%,#42251c 100%) !important;
}
.preview-bold::before{
  width:40% !important; height:66% !important;
  right:34px !important; top:76px !important;
  border-radius:6px !important;
  background:radial-gradient(ellipse at 50% 48%, rgba(198,122,69,.33) 0 34%, transparent 35%), linear-gradient(180deg,rgba(85,42,28,.76),rgba(20,10,7,.38)) !important;
  box-shadow: inset 0 0 0 1px rgba(232,177,120,.14) !important;
}
.preview-bold::after{ left:34px !important; right:34px !important; bottom:92px !important; height:1px !important; background:rgba(232,177,120,.25) !important; }
.preview-bold .preview-nav{ color:#d6a36f !important; border-bottom:0 !important; background:rgba(0,0,0,.52) !important; top:0 !important; left:0 !important; right:0 !important; padding:0 34px !important; height:64px !important; }
.preview-bold .preview-hero-zone{ display:block !important; inset:118px 34px 112px 34px !important; }
.preview-bold .preview-copy{ max-width:52% !important; }
.preview-bold .preview-copy b{ font-size:clamp(3rem,4.7vw,4.65rem) !important; text-transform:uppercase !important; color:#fff8ee !important; }
.preview-bold .preview-copy b::first-line{ color:#fff !important; }
.preview-bold .preview-copy small{ color:#c89565 !important; }
.preview-bold .preview-copy em{ color:rgba(245,225,205,.66) !important; }
.preview-bold .preview-copy i{ padding:12px 30px !important; border-radius:6px !important; border:1px solid rgba(209,160,111,.58) !important; color:#d4a06b !important; background:rgba(209,160,111,.08) !important; font-style:normal !important; text-transform:uppercase !important; letter-spacing:.12em !important; }
.preview-bold .preview-image-shape{ display:none !important; }
.preview-bold .preview-section-band{ grid-template-columns:1fr 1fr !important; border-top:0 !important; }
.preview-bold .preview-section-band span{ background:rgba(255,255,255,.045) !important; border:1px solid rgba(232,177,120,.18) !important; color:#f5e7dc !important; }

/* 03 Bright: playful poster language — BIG ghost message, circular forms */
.preview-bright{
  background:
    radial-gradient(circle at 82% 15%, rgba(255,255,255,.68) 0 10%, transparent 11%),
    radial-gradient(circle at 19% 78%, rgba(239,148,94,.28) 0 14%, transparent 15%),
    linear-gradient(160deg,#fff5d6 0%,#f4d56b 62%,#ef986b 120%) !important;
}
.preview-bright::before{
  right:42px !important; top:98px !important;
  width:34% !important; height:44% !important;
  border-radius:48% 48% 24px 24px !important;
  background:radial-gradient(circle at 54% 34%,rgba(235,144,52,.44) 0 24%,transparent 25%), radial-gradient(ellipse at 50% 66%,rgba(216,130,40,.34) 0 38%,transparent 39%), linear-gradient(160deg,rgba(255,231,151,.8),rgba(235,143,60,.42)) !important;
}
.preview-bright::after{
  left:34px !important; top:84px !important;
  content:"ADOPT\A A NEW\A IDEA" !important;
  white-space:pre !important;
  font-family:var(--font-body) !important;
  font-size:clamp(3.1rem,5.2vw,5.1rem) !important;
  line-height:.88 !important;
  font-weight:900 !important;
  color:rgba(46,36,32,.15) !important;
}
.preview-bright .preview-nav{ border-bottom:0 !important; }
.preview-bright .preview-hero-zone{ display:block !important; inset:114px 34px 110px 34px !important; }
.preview-bright .preview-copy{ max-width:44% !important; padding-top:82px !important; }
.preview-bright .preview-copy b{ font-size:clamp(2.25rem,3.9vw,3.6rem) !important; color:#211607 !important; }
.preview-bright .preview-copy i{ padding:12px 28px !important; border-radius:999px !important; background:#ef9164 !important; color:#fffaf0 !important; font-style:normal !important; font-weight:800 !important; }
.preview-bright .preview-image-shape{ display:none !important; }
.preview-bright .preview-section-band{ grid-template-columns:repeat(3,1fr) !important; }
.preview-bright .preview-section-band span{ background:rgba(255,247,222,.50) !important; color:#70430e !important; }

/* 04 Calm: spa/yoga editorial, split layout with tall quiet image panel */
.preview-calm{
  background:linear-gradient(90deg,rgba(241,250,238,.98) 0 48%,rgba(197,222,202,.88) 48% 100%) !important;
}
.preview-calm::before{
  right:34px !important; top:78px !important;
  width:40% !important; height:68% !important;
  border-radius:0 0 180px 180px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.20)), radial-gradient(ellipse at 54% 50%,rgba(86,130,91,.22) 0 32%,transparent 33%) !important;
  box-shadow:inset 0 0 0 1px rgba(54,93,58,.09) !important;
}
.preview-calm::after{ right:7% !important; top:42px !important; width:90px !important; height:90px !important; border-radius:50% !important; background:rgba(255,255,255,.36) !important; }
.preview-calm .preview-nav{ border-bottom:0 !important; }
.preview-calm .preview-hero-zone{ display:block !important; inset:118px 34px 110px 34px !important; }
.preview-calm .preview-copy{ max-width:45% !important; padding-top:44px !important; }
.preview-calm .preview-copy b{ font-size:clamp(2.1rem,3.9vw,3.55rem) !important; color:#142b1d !important; }
.preview-calm .preview-copy i{ padding:12px 28px !important; border-radius:10px !important; background:#5b855f !important; color:#fff !important; font-style:normal !important; font-weight:800 !important; }
.preview-calm .preview-image-shape{ display:none !important; }
.preview-calm .preview-section-band{ grid-template-columns:repeat(3,1fr) !important; }
.preview-calm .preview-section-band span{ background:rgba(255,255,255,.50) !important; border:1px solid rgba(39,77,52,.12) !important; color:#315f3c !important; }

/* Tablet: prevent two columns from squeezing and overlapping */
@media (max-width: 1100px){
  .vibes-grid{ grid-template-columns:1fr !important; gap:30px !important; }
  .vibe-card-preview-art{ height:500px !important; min-height:500px !important; flex-basis:500px !important; }
}

/* Mobile: no internal collisions, shorter cards, clear content zone */
@media (max-width:768px){
  .vibes{ padding:72px 0 !important; }
  .vibes-grid{ grid-template-columns:1fr !important; gap:24px !important; }
  .vibe-card{ border-radius:30px !important; min-height:0 !important; }
  .vibe-card-preview-art{ height:360px !important; min-height:360px !important; flex:0 0 360px !important; }
  .vibe-card-content{ min-height:0 !important; padding:24px 26px 28px !important; }
  .vibe-card h3{ font-size:2.35rem !important; }
  .vibe-card p{ font-size:.86rem !important; }
  .vibe-card .card-tag{ font-size:.62rem !important; padding:6px 13px !important; margin-bottom:12px !important; }
  .vibe-card-preview-art .preview-nav{ top:18px !important; left:20px !important; right:20px !important; padding-bottom:12px !important; font-size:.52rem !important; gap:10px !important; }
  .vibe-card-preview-art .preview-nav strong{ font-size:.82rem !important; }
  .vibe-card-preview-art .preview-hero-zone{ inset:72px 20px 72px 20px !important; }
  .vibe-card-preview-art .preview-copy small{ font-size:.54rem !important; margin-bottom:12px !important; }
  .vibe-card-preview-art .preview-copy b{ font-size:2rem !important; line-height:.95 !important; }
  .vibe-card-preview-art .preview-copy em{ display:none !important; }
  .vibe-card-preview-art .preview-copy i{ margin-top:14px !important; padding:9px 16px !important; font-size:.62rem !important; }
  .vibe-card-preview-art .preview-section-band{ left:20px !important; right:20px !important; bottom:18px !important; gap:8px !important; padding-top:12px !important; }
  .vibe-card-preview-art .preview-section-band span{ min-height:36px !important; padding:0 6px !important; font-size:.5rem !important; letter-spacing:.05em !important; }
  .preview-soft::before{ right:18px !important; top:92px !important; width:46% !important; height:38% !important; border-width:7px !important; }
  .preview-soft::after{ right:44px !important; top:122px !important; width:30% !important; height:21% !important; }
  .preview-soft .preview-copy{ max-width:48% !important; padding-top:28px !important; }
  .preview-bold::before{ right:18px !important; top:64px !important; width:42% !important; height:62% !important; }
  .preview-bold .preview-nav{ height:54px !important; padding:0 20px !important; }
  .preview-bold .preview-hero-zone{ inset:86px 20px 76px 20px !important; }
  .preview-bold .preview-copy{ max-width:55% !important; }
  .preview-bold .preview-copy b{ font-size:2.45rem !important; }
  .preview-bright::before{ right:18px !important; top:104px !important; width:36% !important; height:34% !important; }
  .preview-bright::after{ left:20px !important; top:76px !important; font-size:2.35rem !important; }
  .preview-bright .preview-copy{ max-width:54% !important; padding-top:74px !important; }
  .preview-bright .preview-copy b{ font-size:2rem !important; }
  .preview-calm::before{ right:18px !important; top:62px !important; width:40% !important; height:62% !important; border-radius:0 0 110px 110px !important; }
  .preview-calm::after{ width:58px !important; height:58px !important; top:36px !important; }
  .preview-calm .preview-copy{ max-width:54% !important; padding-top:42px !important; }
  .preview-calm .preview-copy b{ font-size:1.95rem !important; }
}

@media (max-width:390px){
  .vibe-card-preview-art{ height:335px !important; min-height:335px !important; flex-basis:335px !important; }
  .vibe-card-preview-art .preview-copy b{ font-size:1.75rem !important; }
  .preview-bold .preview-copy b{ font-size:2.15rem !important; }
}

/* ==========================================================
   RLAFI PATCH v7 — reliable art-directed vibe cards
   Purpose: remove all overlaps, keep mockups believable, and make
   the four directions feel like different landing-page systems.
   ========================================================== */

/* Grid stability */
.vibes-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:34px !important;
  align-items:start !important;
}

/* Card becomes a controlled two-zone composition: mockup + label area */
.vibe-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  aspect-ratio:auto !important;
  min-height:760px !important;
  height:auto !important;
  overflow:hidden !important;
  border-radius:34px !important;
  transform:none !important;
  isolation:isolate !important;
}
.vibe-card::before,
.vibe-card::after,
.vibe-card-content::before,
.vibe-card-content::after,
.vibe-card-bg,
.vibe-card-svg-preview,
.vibe-card-preview{
  display:none !important;
}

/* The preview is no longer absolute and can never collide with the card title */
.vibe-card-preview-art{
  position:relative !important;
  inset:auto !important;
  flex:0 0 560px !important;
  height:560px !important;
  min-height:560px !important;
  width:100% !important;
  padding:36px !important;
  overflow:hidden !important;
  border-radius:34px 34px 0 0 !important;
  box-sizing:border-box !important;
  z-index:1 !important;
}
.vibe-card-preview-art *,
.vibe-card-preview-art::before,
.vibe-card-preview-art::after{
  box-sizing:border-box !important;
}

.vibe-card-content{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  flex:1 0 auto !important;
  min-height:200px !important;
  padding:34px 40px 38px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  z-index:3 !important;
  background:transparent !important;
}
.vibe-card h3{
  font-size:clamp(2.15rem,3.2vw,3.45rem) !important;
  line-height:.96 !important;
  margin:0 0 14px !important;
  letter-spacing:-.025em !important;
}
.vibe-card p{
  font-size:1rem !important;
  line-height:1.55 !important;
  max-width:560px !important;
  margin:0 !important;
}
.vibe-card .card-tag{
  display:inline-flex !important;
  align-self:flex-start !important;
  margin:0 0 18px !important;
  padding:8px 17px !important;
  border-radius:999px !important;
  font-size:.68rem !important;
  letter-spacing:.14em !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
}
.vibe-card-arrow.vca-overlay{
  top:26px !important;
  right:26px !important;
  z-index:8 !important;
}

/* Shared internal preview primitives — calm, contained, zero overlap */
.preview-nav{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  height:36px !important;
  padding:0 0 22px !important;
  margin:0 0 34px !important;
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  align-items:start !important;
  border-bottom:1px solid rgba(82,64,56,.16) !important;
  font-size:.72rem !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  z-index:4 !important;
}
.preview-nav strong{font-family:var(--font-display) !important;font-size:1.02rem !important;letter-spacing:0 !important;text-transform:none !important;justify-self:start !important;}
.preview-nav span:nth-child(2){justify-self:center !important;}
.preview-nav span:nth-child(3){justify-self:end !important;}

.preview-hero-zone{
  position:relative !important;
  inset:auto !important;
  display:grid !important;
  gap:32px !important;
  align-items:center !important;
  min-height:330px !important;
  padding:0 !important;
  z-index:3 !important;
}
.preview-copy{
  position:relative !important;
  z-index:5 !important;
  max-width:none !important;
  padding:0 !important;
  color:inherit !important;
}
.preview-copy small{
  display:block !important;
  margin:0 0 18px !important;
  font-size:.72rem !important;
  letter-spacing:.28em !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
}
.preview-copy b{
  display:block !important;
  font-family:var(--font-display) !important;
  font-size:clamp(2.4rem,4.5vw,4.15rem) !important;
  line-height:.93 !important;
  letter-spacing:-.02em !important;
  margin:0 !important;
}
.preview-copy em{
  display:block !important;
  margin:18px 0 0 !important;
  font-size:.9rem !important;
  line-height:1.45 !important;
  opacity:.76 !important;
}
.preview-copy i{
  position:relative !important;
  display:inline-flex !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:22px 0 0 !important;
  padding:11px 24px !important;
  border-radius:999px !important;
  font-style:normal !important;
  font-size:.76rem !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  z-index:6 !important;
}
.preview-image-shape{
  position:relative !important;
  width:100% !important;
  min-height:210px !important;
  border-radius:26px !important;
  overflow:hidden !important;
  z-index:2 !important;
}
.preview-image-shape::before,
.preview-image-shape::after{
  content:"" !important;
  position:absolute !important;
  border-radius:50% !important;
}
.preview-section-band{
  position:absolute !important;
  left:36px !important;
  right:36px !important;
  bottom:34px !important;
  display:grid !important;
  gap:14px !important;
  border-top:1px solid rgba(82,64,56,.14) !important;
  padding-top:22px !important;
  z-index:5 !important;
}
.preview-section-band span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:46px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  font-size:.66rem !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

/* 01 Soft — airy skincare lookbook: left headline + polaroid product panel */
.preview-soft{
  background:radial-gradient(circle at 92% 10%,rgba(255,255,255,.9) 0 12%,transparent 28%),
             radial-gradient(circle at 8% 75%,rgba(190,123,134,.20) 0 18%,transparent 42%),
             linear-gradient(150deg,#fff8f5 0%,#f1dfdb 58%,#dfb8b2 100%) !important;
  color:#241815 !important;
}
.preview-soft .preview-nav{color:#8a5c62 !important;}
.preview-soft .preview-hero-zone{
  grid-template-columns:.78fr 1fr !important;
  min-height:345px !important;
}
.preview-soft .preview-copy small{color:#a66a76 !important;}
.preview-soft .preview-copy b{font-size:clamp(2.6rem,4.7vw,4.35rem) !important;}
.preview-soft .preview-copy i{background:#bd7d8c !important;color:#fff !important;}
.preview-soft .preview-image-shape{
  min-height:250px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(224,181,176,.45)) !important;
  border:11px solid rgba(255,255,255,.72) !important;
  transform:rotate(-2deg) !important;
  box-shadow:0 20px 45px rgba(120,65,70,.10) !important;
}
.preview-soft .preview-image-shape::before{inset:27% auto auto 21%;width:36%;height:42%;background:rgba(255,255,255,.62) !important;}
.preview-soft .preview-image-shape::after{inset:31% 17% auto auto;width:31%;height:38%;background:rgba(184,123,135,.28) !important;}
.preview-soft .preview-section-band{grid-template-columns:repeat(3,1fr) !important;}
.preview-soft .preview-section-band span{background:rgba(255,255,255,.64) !important;color:#7c4853 !important;}
.soft-card .vibe-card-content{background:linear-gradient(180deg,#ead1cc 0%,#ddb8b2 100%) !important;}

/* 02 Bold — dark luxury editorial with vertical artwork panel */
.preview-bold{
  background:radial-gradient(circle at 94% 15%,rgba(152,84,45,.20) 0 22%,transparent 44%),
             linear-gradient(135deg,#080504 0%,#20120e 48%,#4b2b20 100%) !important;
  color:#f8eee7 !important;
}
.preview-bold .preview-nav{color:#c28a5e !important;border-color:rgba(230,180,130,.14) !important;}
.preview-bold .preview-hero-zone{
  grid-template-columns:1fr .72fr !important;
  min-height:330px !important;
}
.preview-bold .preview-copy small{color:#c89565 !important;}
.preview-bold .preview-copy b{font-size:clamp(3.4rem,5.5vw,5.2rem) !important;text-transform:uppercase !important;color:#fff7ef !important;}
.preview-bold .preview-copy b::first-line{color:#fff !important;}
.preview-bold .preview-copy em{color:rgba(248,238,231,.68) !important;}
.preview-bold .preview-copy i{border:1px solid rgba(210,154,98,.58) !important;color:#dda66e !important;background:rgba(210,154,98,.08) !important;border-radius:8px !important;text-transform:uppercase !important;letter-spacing:.12em !important;}
.preview-bold .preview-image-shape{
  min-height:285px !important;
  border-radius:18px !important;
  background:linear-gradient(150deg,rgba(94,45,30,.65),rgba(28,14,10,.25)) !important;
  border:1px solid rgba(216,153,96,.24) !important;
}
.preview-bold .preview-image-shape::before{width:48%;height:64%;left:18%;top:18%;background:rgba(181,105,58,.38) !important;}
.preview-bold .preview-image-shape::after{width:40%;height:52%;right:8%;top:24%;background:rgba(128,70,43,.32) !important;}
.preview-bold .preview-section-band{grid-template-columns:repeat(2,1fr) !important;border-color:rgba(230,180,130,.18) !important;}
.preview-bold .preview-section-band span{background:rgba(255,255,255,.045) !important;border:1px solid rgba(230,180,130,.18) !important;color:#f4e6dc !important;}
.bold-card .vibe-card-content{background:linear-gradient(180deg,#25130f 0%,#0d0705 100%) !important;color:#fff8f0 !important;}
.bold-card .card-tag{background:rgba(255,255,255,.14) !important;color:#fff8f0 !important;border:1px solid rgba(255,255,255,.2) !important;}

/* 03 Bright — campaign poster / creator launch, more graphic and asymmetric */
.preview-bright{
  background:radial-gradient(circle at 80% 8%,rgba(255,255,255,.55) 0 9%,transparent 20%),
             linear-gradient(145deg,#fff3cf 0%,#f9d77a 58%,#edbd41 100%) !important;
  color:#231608 !important;
}
.preview-bright::before{
  content:"ADOPT\A A NEW\A IDEA" !important;
  white-space:pre !important;
  position:absolute !important;
  top:44px !important;
  left:34px !important;
  font-family:Arial,sans-serif !important;
  font-size:clamp(4rem,8vw,7.5rem) !important;
  line-height:.82 !important;
  font-weight:900 !important;
  letter-spacing:-.06em !important;
  color:rgba(83,61,22,.11) !important;
  z-index:1 !important;
}
.preview-bright .preview-nav{color:#7b531c !important;border-color:rgba(92,62,18,.16) !important;}
.preview-bright .preview-hero-zone{
  grid-template-columns:.9fr .8fr !important;
  min-height:335px !important;
}
.preview-bright .preview-copy{padding-top:58px !important;}
.preview-bright .preview-copy small{color:#b67545 !important;}
.preview-bright .preview-copy b{font-size:clamp(2.7rem,4.8vw,4.35rem) !important;}
.preview-bright .preview-copy i{background:#f49a72 !important;color:#fffaf2 !important;}
.preview-bright .preview-image-shape{
  min-height:250px !important;
  border-radius:34px 34px 34px 70px !important;
  background:linear-gradient(155deg,rgba(255,230,158,.72),rgba(235,150,58,.38)) !important;
}
.preview-bright .preview-image-shape::before{width:54%;height:58%;left:14%;top:12%;background:rgba(255,245,202,.35) !important;}
.preview-bright .preview-image-shape::after{width:42%;height:45%;right:11%;top:26%;background:rgba(231,139,42,.35) !important;}
.preview-bright .preview-section-band{grid-template-columns:repeat(3,1fr) !important;}
.preview-bright .preview-section-band span{background:rgba(255,247,221,.62) !important;color:#71420e !important;}
.bright-card .vibe-card-content{background:linear-gradient(180deg,#efd064 0%,#e4bf3b 100%) !important;}

/* 04 Calm — magazine/interior layout with oversized right panel */
.preview-calm{
  background:linear-gradient(90deg,#f5faf4 0 48%,#cfe5d1 48% 100%) !important;
  color:#142b1d !important;
}
.preview-calm .preview-nav{color:#5e8b65 !important;border-color:rgba(45,80,52,.16) !important;}
.preview-calm .preview-hero-zone{
  grid-template-columns:.72fr 1fr !important;
  min-height:345px !important;
}
.preview-calm .preview-copy small{color:#67916c !important;}
.preview-calm .preview-copy b{font-size:clamp(2.7rem,4.6vw,4.1rem) !important;}
.preview-calm .preview-copy i{background:#5f895f !important;color:#fff !important;border-radius:10px !important;}
.preview-calm .preview-image-shape{
  justify-self:end !important;
  width:88% !important;
  min-height:315px !important;
  border-radius:0 0 44% 44% !important;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(149,190,158,.26)) !important;
  box-shadow:inset 28px 0 0 rgba(93,139,100,.13) !important;
}
.preview-calm .preview-image-shape::before{width:92%;height:34%;left:-10%;top:35%;border-radius:50%;background:rgba(245,250,245,.58) !important;}
.preview-calm .preview-image-shape::after{width:34%;height:48%;right:22%;top:26%;background:rgba(110,158,118,.20) !important;}
.preview-calm .preview-section-band{grid-template-columns:repeat(3,1fr) !important;border-color:rgba(45,80,52,.14) !important;}
.preview-calm .preview-section-band span{background:rgba(255,255,255,.58) !important;border:1px solid rgba(45,80,52,.12) !important;color:#315f3c !important;}
.calm-card .vibe-card-content{background:linear-gradient(180deg,#c6dfca 0%,#a8c9af 100%) !important;}

/* Mobile/tablet: one clean card per row, no internal collisions */
@media (max-width: 900px){
  .vibes-grid{grid-template-columns:1fr !important;gap:28px !important;}
  .vibe-card{
    min-height:0 !important;
    border-radius:28px !important;
  }
  .vibe-card-preview-art{
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:22px !important;
    border-radius:28px 28px 0 0 !important;
  }
  .preview-nav{
    height:auto !important;
    margin-bottom:22px !important;
    padding-bottom:16px !important;
    font-size:.56rem !important;
    gap:12px !important;
  }
  .preview-nav strong{font-size:.9rem !important;}
  .preview-hero-zone{
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:0 0 92px !important;
  }
  .preview-copy{max-width:100% !important;padding:0 !important;}
  .preview-copy small{font-size:.56rem !important;margin-bottom:10px !important;letter-spacing:.24em !important;}
  .preview-copy b{font-size:clamp(2.05rem,10vw,3.05rem) !important;line-height:.96 !important;}
  .preview-copy em{font-size:.78rem !important;margin-top:10px !important;}
  .preview-copy i{display:none !important;}
  .preview-image-shape{min-height:170px !important;width:100% !important;transform:none !important;}
  .preview-section-band{
    left:22px !important;
    right:22px !important;
    bottom:22px !important;
    gap:8px !important;
    padding-top:14px !important;
  }
  .preview-section-band span{min-height:38px !important;padding:0 7px !important;font-size:.54rem !important;letter-spacing:.06em !important;}
  .vibe-card-content{padding:26px 28px 30px !important;min-height:0 !important;}
  .vibe-card h3{font-size:2.45rem !important;}
  .vibe-card p{font-size:.95rem !important;}
  .vibe-card-arrow.vca-overlay{top:18px !important;right:18px !important;}

  .preview-soft .preview-hero-zone,
  .preview-bold .preview-hero-zone,
  .preview-bright .preview-hero-zone,
  .preview-calm .preview-hero-zone{grid-template-columns:1fr !important;}
  .preview-soft .preview-image-shape,
  .preview-bold .preview-image-shape,
  .preview-bright .preview-image-shape,
  .preview-calm .preview-image-shape{width:100% !important;min-height:170px !important;}
  .preview-bright::before{font-size:4.1rem !important;top:52px !important;left:22px !important;}
  .preview-bright .preview-copy{padding-top:18px !important;}
  .preview-calm{background:linear-gradient(180deg,#f5faf4 0 46%,#cfe5d1 46% 100%) !important;}
}

@media (max-width: 420px){
  .vibe-card-preview-art{padding:18px !important;}
  .preview-nav{font-size:.48rem !important;letter-spacing:.16em !important;}
  .preview-copy b{font-size:2rem !important;}
  .preview-section-band{left:18px !important;right:18px !important;bottom:18px !important;}
  .preview-section-band span{font-size:.48rem !important;min-height:34px !important;}
  .vibe-card-content{padding:24px 24px 28px !important;}
  .vibe-card h3{font-size:2.15rem !important;}
}


/* =========================================================
   RLAFI 9 — REAL MOCKUP MODELS + MOBILE CAROUSEL PATCH
   ========================================================= */

/* Global safety: no old SVG/card internals should bleed over the image mockups */
.vibe-card .vibe-card-preview-art,
.vibe-card .vibe-card-svg-preview,
.vibe-card .vibe-card-bg,
.vibe-card > svg,
.vibe-card-float > svg { display:none !important; }

/* HERO: desktop keeps premium art-directed cluster, but with real previews */
.hero-right { height: 590px; }
.vibe-cards-float { position: relative; width:100%; height:100%; }
.vibe-card-float,
.vibe-card-float:nth-child(1),
.vibe-card-float:nth-child(2),
.vibe-card-float:nth-child(3),
.vibe-card-float:nth-child(4) {
  position:absolute !important;
  display:block !important;
  overflow:hidden !important;
  border-radius: 26px !important;
  background: #f7f1ec !important;
  box-shadow: 0 22px 70px rgba(46,36,32,.18) !important;
  animation: none !important;
}
.vibe-card-float img { width:100%; height:100%; object-fit:cover; display:block; }
.vibe-card-float:nth-child(1) { width: 285px !important; height: 188px !important; left: 12px !important; top: 48px !important; z-index:4 !important; transform: rotate(-2deg) !important; }
.vibe-card-float:nth-child(2) { width: 320px !important; height: 210px !important; right: 0 !important; top: 8px !important; z-index:3 !important; transform: rotate(1.5deg) !important; }
.vibe-card-float:nth-child(3) { width: 295px !important; height: 194px !important; left: 80px !important; bottom: 74px !important; z-index:2 !important; transform: rotate(1deg) !important; }
.vibe-card-float:nth-child(4) { width: 300px !important; height: 198px !important; right: 34px !important; bottom: 40px !important; z-index:1 !important; transform: rotate(-1.5deg) !important; }
.vibe-card-float:hover { z-index:9 !important; transform: translateY(-8px) scale(1.02) !important; }
.hero-carousel-hint { display:none; }

/* VIBES GRID: real previews, clean content separation, zero overlap */
.vibes-grid { align-items: stretch; }
.vibe-card,
.vibe-card.soft-card,
.vibe-card.bold-card,
.vibe-card.bright-card,
.vibe-card.calm-card {
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-height: 0 !important;
  height:auto !important;
  aspect-ratio:auto !important;
  padding: 0 !important;
  overflow:hidden !important;
  border-radius: 28px !important;
  background: var(--white) !important;
  box-shadow: 0 20px 60px rgba(46,36,32,.12) !important;
}
.vibe-card-real-preview {
  width:100%;
  aspect-ratio: 1.48 / 1;
  overflow:hidden;
  background:#f4eee8;
  border-bottom:1px solid rgba(90,74,70,.10);
}
.vibe-card-real-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.vibe-card-content,
.vibe-card .vibe-card-content {
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  min-height: 210px !important;
  padding: 30px 34px 34px !important;
  display:block !important;
  justify-content:initial !important;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.38)) !important;
}
.vibe-card-content::before { display:none !important; }
.vibe-card .card-tag { display:inline-flex !important; margin:0 0 18px !important; opacity:1 !important; }
.vibe-card h3 { margin:0 0 12px !important; font-size: clamp(2.1rem, 3.2vw, 3.4rem) !important; line-height:.95 !important; }
.vibe-card p { max-width: 92%; margin:0 !important; font-size:.96rem !important; line-height:1.65 !important; opacity:.9 !important; }
.vibe-card-arrow.vca-overlay { top: 18px !important; right: 18px !important; z-index:4 !important; }
.soft-card .vibe-card-content { background: linear-gradient(180deg,#F4E7E2 0%,#DFC0BA 100%) !important; }
.bold-card .vibe-card-content { background: linear-gradient(180deg,#2A1712 0%,#120B09 100%) !important; color:#F5F1EB !important; }
.bright-card .vibe-card-content { background: linear-gradient(180deg,#F3D875 0%,#E7C24F 100%) !important; }
.calm-card .vibe-card-content { background: linear-gradient(180deg,#D7E8D7 0%,#AFCBAF 100%) !important; }
.bold-card h3,.bold-card p { color:#F5F1EB !important; }
.bold-card .card-tag { color:#F5F1EB !important; background:rgba(245,241,235,.12) !important; border-color:rgba(245,241,235,.24) !important; }

/* Process contrast — readable but still soft luxury */
.process, .process p, .process-step p { color:#2E2420 !important; opacity:1 !important; }
.process h2, .process h3, .process-step h3 { color:#1A1410 !important; }
.step-number, .process-number, .process-step-number { color:#9A5360 !important; opacity:1 !important; font-weight:700 !important; }
.process-step, .process-row, .process-list > * { border-color: rgba(82,64,56,.34) !important; }

/* Mobile: hero becomes a real swipe carousel with a static scrollbar indicator */
@media (max-width: 768px) {
  .hero { min-height:auto !important; padding-top:88px !important; }
  .hero-inner { display:flex !important; flex-direction:column !important; gap:48px !important; padding:50px 0 70px !important; overflow:hidden !important; }
  .hero-left { width:100%; padding:0 24px !important; text-align:center; }
  .hero-ctas { justify-content:center; }
  .hero-right { width:100% !important; height:auto !important; min-height:0 !important; padding:0 !important; overflow:hidden !important; }
  .vibe-cards-float {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:18px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    height:auto !important;
    padding: 0 24px 10px !important;
    position:relative !important;
  }
  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4) {
    position:relative !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    width:82vw !important; min-width:82vw !important; max-width:360px !important;
    height:auto !important; aspect-ratio: 1.48 / 1 !important;
    transform:none !important;
    scroll-snap-align:center !important;
    border-radius:24px !important;
  }
  .vibe-cards-float::-webkit-scrollbar { display:none; }
  .hero-carousel-hint { display:flex !important; align-items:center; justify-content:center; gap:10px; margin-top:16px; color:var(--text-muted); font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; }
  .hero-carousel-track { width:145px; height:5px; border-radius:99px; background:rgba(90,74,70,.16); display:block; position:relative; overflow:hidden; }
  .hero-carousel-thumb { display:block; width:42%; height:100%; border-radius:inherit; background:rgba(90,74,70,.55); transform:none !important; animation:none !important; }
  .vibes-grid { display:flex !important; flex-direction:column !important; gap:28px !important; }
  .vibe-card-real-preview { aspect-ratio: 1.48 / 1 !important; }
  .vibe-card-content, .vibe-card .vibe-card-content { min-height:auto !important; padding:28px 28px 32px !important; }
  .vibe-card h3 { font-size:2.55rem !important; }
  .vibe-card p { font-size:.95rem !important; max-width:100%; }
}

@media (max-width: 420px) {
  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4) { width:84vw !important; min-width:84vw !important; }
  .vibe-card h3 { font-size:2.2rem !important; }
  .vibe-card-content, .vibe-card .vibe-card-content { padding:24px 24px 28px !important; }
}


/* =========================================================
   RLAFI 10 — stable real mockup assets, no broken paths
   ========================================================= */

/* image safety */
.vibe-card-real-preview img,
.vibe-card-float img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Desktop hero: real visual mini portfolio, premium but stable */
.hero-right { height: 600px !important; }
.vibe-cards-float { position:relative !important; width:100% !important; height:100% !important; }
.vibe-card-float,
.vibe-card-float:nth-child(1),
.vibe-card-float:nth-child(2),
.vibe-card-float:nth-child(3),
.vibe-card-float:nth-child(4) {
  display:block !important;
  position:absolute !important;
  overflow:hidden !important;
  border-radius:28px !important;
  background:#f4eee8 !important;
  box-shadow:0 24px 80px rgba(46,36,32,.18) !important;
  animation:none !important;
}
.vibe-card-float:nth-child(1){ width:295px !important; height:190px !important; left:6px !important; top:64px !important; transform:rotate(-2.5deg) !important; z-index:4 !important; }
.vibe-card-float:nth-child(2){ width:324px !important; height:214px !important; right:8px !important; top:18px !important; transform:rotate(1.8deg) !important; z-index:3 !important; }
.vibe-card-float:nth-child(3){ width:305px !important; height:202px !important; left:82px !important; bottom:94px !important; transform:rotate(1.4deg) !important; z-index:2 !important; }
.vibe-card-float:nth-child(4){ width:312px !important; height:206px !important; right:28px !important; bottom:58px !important; transform:rotate(-1.7deg) !important; z-index:1 !important; }
.vibe-card-float:hover{ z-index:20 !important; transform:translateY(-8px) scale(1.025) !important; }

/* Main vibe cards: four real-looking project thumbnails, no overlaps */
.vibes-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:32px !important; align-items:stretch !important; }
.vibe-card,
.vibe-card.soft-card,
.vibe-card.bold-card,
.vibe-card.bright-card,
.vibe-card.calm-card {
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:34px !important;
  background:var(--white) !important;
  box-shadow:0 20px 64px rgba(46,36,32,.12) !important;
}
.vibe-card-real-preview {
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio: 14 / 9 !important;
  overflow:hidden !important;
  border-bottom:1px solid rgba(90,74,70,.12) !important;
  background:#ede5df !important;
}
.vibe-card-content,
.vibe-card .vibe-card-content {
  display:block !important;
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  min-height:205px !important;
  padding:32px 36px 36px !important;
  justify-content:initial !important;
}
.vibe-card-content::before { display:none !important; }
.vibe-card h3 { font-size:clamp(2rem,3vw,3.15rem) !important; line-height:.98 !important; margin:0 0 12px !important; }
.vibe-card p { font-size:.96rem !important; line-height:1.62 !important; max-width:92% !important; margin:0 !important; opacity:.92 !important; }
.vibe-card .card-tag { display:inline-flex !important; margin:0 0 16px !important; }
.vibe-card-arrow.vca-overlay { top:18px !important; right:18px !important; z-index:4 !important; }
.soft-card .vibe-card-content{ background:linear-gradient(180deg,#F6E8E2 0%,#E3C4BD 100%) !important; }
.bold-card .vibe-card-content{ background:linear-gradient(180deg,#21120E 0%,#120B09 100%) !important; }
.bright-card .vibe-card-content{ background:linear-gradient(180deg,#F5DC73 0%,#ECC55A 100%) !important; }
.calm-card .vibe-card-content{ background:linear-gradient(180deg,#DDECDD 0%,#B4CEB4 100%) !important; }
.bold-card h3,.bold-card p{ color:#F5F1EB !important; }
.bold-card .card-tag{ color:#F5F1EB !important; background:rgba(245,241,235,.12) !important; }

/* Process contrast: readable luxury */
.process-step .step-number,
.process-step-number,
.step-number { color:#8A4E58 !important; opacity:1 !important; font-weight:700 !important; }
.process-step h3,.process h3{ color:#1A1410 !important; }
.process-step p,.process p{ color:#3B302C !important; opacity:1 !important; }
.process-step{ border-color:rgba(82,64,56,.30) !important; }

/* Mobile: real swipe carousel. No pile, no animation, no broken card stack */
.hero-swipe-indicator { display:none !important; }
@media (max-width:768px){
  .hero { min-height:auto !important; padding-top:88px !important; overflow:hidden !important; }
  .hero-inner { display:flex !important; flex-direction:column !important; gap:42px !important; padding:50px 0 68px !important; overflow:hidden !important; }
  .hero-left{ width:100% !important; padding:0 24px !important; text-align:center !important; }
  .hero-ctas{ justify-content:center !important; }
  .hero-right{ width:100% !important; height:auto !important; min-height:0 !important; padding:0 !important; overflow:hidden !important; }
  .vibe-cards-float{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:18px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    padding:0 24px 12px !important;
    height:auto !important;
    position:relative !important;
  }
  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4){
    position:relative !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    width:84vw !important; min-width:84vw !important; max-width:390px !important;
    height:auto !important; aspect-ratio:14/9 !important;
    transform:none !important; animation:none !important;
    scroll-snap-align:center !important;
    border-radius:24px !important;
  }
  .vibe-cards-float::-webkit-scrollbar{ display:none; }
  .hero-carousel-hint{ display:flex !important; align-items:center !important; justify-content:center !important; gap:11px !important; margin:14px auto 0 !important; color:rgba(90,74,70,.72) !important; font-size:.72rem !important; letter-spacing:.11em !important; text-transform:uppercase !important; }
  .hero-carousel-track{ width:min(260px,72vw) !important; height:6px !important; border-radius:999px !important; background:rgba(90,74,70,.18) !important; display:block !important; overflow:hidden !important; }
  .hero-carousel-thumb{ display:block !important; width:32% !important; height:100% !important; border-radius:999px !important; background:rgba(90,74,70,.62) !important; animation:none !important; transform:none !important; }
  .vibes-grid{ display:flex !important; flex-direction:column !important; gap:30px !important; }
  .vibe-card-real-preview{ aspect-ratio:14/9 !important; }
  .vibe-card-content,.vibe-card .vibe-card-content{ min-height:auto !important; padding:28px 28px 32px !important; }
  .vibe-card h3{ font-size:2.35rem !important; }
  .vibe-card p{ max-width:100% !important; }
}


/* =========================================================
   RLAFI 11 — REAL VERTICAL MOCKUP SYSTEM
   Purpose: replace fake SVG feel with real portrait landing-page previews.
   ========================================================= */

.vibe-card-float img,
.vibe-card-real-preview img,
.mockup-visual-real img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}

/* Desktop hero: premium floating portrait previews */
.hero-right {
  min-height: 600px;
}

.vibe-card-float {
  background: var(--white);
  border: 1px solid rgba(46,36,32,.08);
}

.vibe-card-float:nth-child(1) {
  width: 230px !important;
  height: 345px !important;
  top: 8px !important;
  left: 20px !important;
  z-index: 4;
}

.vibe-card-float:nth-child(2) {
  width: 250px !important;
  height: 375px !important;
  top: 20px !important;
  right: 12px !important;
  z-index: 3;
}

.vibe-card-float:nth-child(3) {
  width: 238px !important;
  height: 357px !important;
  bottom: 36px !important;
  left: 78px !important;
  z-index: 2;
}

.vibe-card-float:nth-child(4) {
  width: 220px !important;
  height: 330px !important;
  bottom: 10px !important;
  right: 54px !important;
  z-index: 1;
}

.hero-carousel-hint {
  display: none;
}

/* Vibe cards on the main scroll page — vertical, premium, image-first */
.vibes-grid {
  align-items: stretch;
  gap: 34px;
}

.vibe-card {
  aspect-ratio: 4 / 5.9 !important;
  min-height: 680px;
  background: var(--white);
  border: 1px solid rgba(46,36,32,.10);
  overflow: hidden;
}

.vibe-card-real-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #eee;
}

.vibe-card-real-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.12) 66%, rgba(0,0,0,.55) 100%),
    linear-gradient(to top, rgba(253,250,247,.92) 0%, rgba(253,250,247,.55) 18%, rgba(253,250,247,0) 42%);
  pointer-events: none;
}

.vibe-card-content {
  position: absolute !important;
  z-index: 3;
  inset: auto 0 0 0 !important;
  padding: 34px 34px 36px !important;
  justify-content: flex-end !important;
  min-height: 255px;
  background: linear-gradient(to top, rgba(253,250,247,.98) 0%, rgba(253,250,247,.92) 62%, rgba(253,250,247,0) 100%);
}

.bold-card .vibe-card-content {
  background: linear-gradient(to top, rgba(20,13,10,.98) 0%, rgba(20,13,10,.9) 62%, rgba(20,13,10,0) 100%);
}

.vibe-card h3 {
  font-size: clamp(2rem, 3vw, 2.75rem) !important;
  line-height: .98 !important;
  margin-bottom: 12px !important;
}

.vibe-card p {
  max-width: 92%;
  font-size: .92rem !important;
  line-height: 1.62 !important;
}

.vibe-card .card-tag {
  margin-bottom: 18px !important;
  backdrop-filter: blur(10px);
}

.vibe-card-arrow.vca-overlay {
  z-index: 4 !important;
  background: rgba(253,250,247,.88) !important;
  border: 1px solid rgba(46,36,32,.12);
  backdrop-filter: blur(10px);
}

.bold-card .vibe-card-arrow.vca-overlay {
  background: rgba(245,241,235,.12) !important;
  color: #F5F1EB;
  border-color: rgba(245,241,235,.22);
}

/* Each card gets a slightly different crop so it does NOT feel like one reused template */
.soft-card .vibe-card-real-preview img { object-position: center top; }
.bold-card .vibe-card-real-preview img { object-position: center top; }
.bright-card .vibe-card-real-preview img { object-position: center 5%; }
.calm-card .vibe-card-real-preview img { object-position: center top; }

/* Real references on inner vibe pages */
.real-reference-section {
  padding-top: 80px;
}

.real-mockup-showcase {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.mockup-visual-real {
  aspect-ratio: 2 / 3 !important;
  min-height: 680px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 28px 90px rgba(46,36,32,.16);
  border: 1px solid rgba(46,36,32,.10);
}

.mockup-visual-real img {
  object-fit: cover;
  object-position: top center;
}

.mockup-item {
  align-items: center;
}

.mockup-info h3 {
  line-height: 1.02;
}

/* Mobile — no fake horizontal cards, real swipeable portrait carousel */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding-top: 96px;
    overflow: hidden;
  }

  .hero-inner {
    display: block !important;
    padding: 48px 24px 72px !important;
  }

  .hero-left {
    max-width: none;
    margin-bottom: 42px;
  }

  .hero-right {
    height: auto !important;
    min-height: 0 !important;
    width: calc(100vw - 24px);
    margin-left: -12px;
    overflow: visible;
  }

  .vibe-cards-float {
    display: flex !important;
    position: relative !important;
    width: 100%;
    height: auto !important;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 24px 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .vibe-cards-float::-webkit-scrollbar {
    display: none;
  }

  .vibe-card-float,
  .vibe-card-float:nth-child(1),
  .vibe-card-float:nth-child(2),
  .vibe-card-float:nth-child(3),
  .vibe-card-float:nth-child(4) {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 78vw !important;
    width: 78vw !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    transform: none !important;
    animation: none !important;
    scroll-snap-align: center;
    border-radius: 26px;
  }

  .vibe-card-float:hover {
    transform: none !important;
  }

  .hero-carousel-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(78vw, 320px);
    margin: 10px auto 0;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(46,36,32,.58);
  }

  .hero-carousel-track {
    position: relative;
    display: block;
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(46,36,32,.15);
    overflow: hidden;
  }

  .hero-carousel-thumb {
    display: block;
    width: 28%;
    height: 100%;
    border-radius: inherit;
    background: rgba(46,36,32,.46);
  }

  .vibes {
    padding: 88px 0;
  }

  .vibes-grid {
    gap: 26px;
  }

  .vibe-card {
    aspect-ratio: 2 / 3 !important;
    min-height: 0 !important;
    border-radius: 30px;
  }

  .vibe-card-content {
    min-height: 225px;
    padding: 28px 28px 30px !important;
  }

  .vibe-card h3 {
    font-size: 2rem !important;
  }

  .vibe-card p {
    font-size: .88rem !important;
    max-width: 100%;
  }

  .mockup-item,
  .mockup-item.reverse {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .mockup-visual-real {
    min-height: 0;
    aspect-ratio: 2 / 3 !important;
    border-radius: 28px;
  }

  .mockup-info {
    padding: 0 4px;
  }

  .mockup-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .mockup-cta .btn {
    justify-content: center;
  }
}

/* Safer tablet layout */
@media (min-width: 769px) and (max-width: 1050px) {
  .vibe-card {
    min-height: 580px;
  }

  .vibe-card-content {
    padding: 30px !important;
  }

  .hero-inner {
    gap: 40px;
  }
}