@font-face {
  font-family: 'Antartida';
  src: url('assets/fonts/atartida-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antartida';
  src: url('assets/fonts/atartida-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antartida';
  src: url('assets/fonts/antartida-bolditalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ─────────────── DESIGN TOKENS ─────────────── */
:root {
  --re-black:      #ffffff;
  --re-dark:       #f7f8fa;
  --re-carbon:     #eef0f5;
  --re-steel:      #dde0e8;
  --re-red:        #813b8e;
  --re-red-dark:   #813b8e;
  --re-gold:       #b07d20;
  --re-cream:      #2a2a2c;
  --re-white:      #1a1a1c;
  --re-smoke:      #606062;
  --re-mist:       #888;
  --re-border:     rgba(0,0,0,0.08);
  --re-border-l:   rgba(0,0,0,0.14);

  /* ── SMYLEXA BRAND FONTS ── */
  /*--font-display: 'Antartida', 'Montserrat', sans-serif;*/
  /*--font-body:     'Nunito', sans-serif;*/
  /*--font-editorial:'Lora', serif;*/
  
  
  --font-display: 'Antartida', 'Montserrat', sans-serif;
  --font-body:     'Antartida', 'Montserrat', sans-serif;;
  --font-editorial: 'Antartida', 'Montserrat', sans-serif;;
}

/* ─────────────── RESET & BASE ─────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: #ffffff;
  color: #2a2a2c;
  overflow-x: hidden;
}

/* Remove grain overlay */
body::after { display: none; }

img { max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; outline: none; }

/* ─────────────── SCROLLBAR ─────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: var(--re-red); border-radius: 2px; }

/* ─────────────── ANIMATIONS ─────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(200,16,46,0); }
}
@keyframes lineGrow {
  from { width: 0; }
  to   { width: 60px; }
}
@keyframes lineGrowH {
  from { width: 0; opacity: 0; }
  to   { width: 50px; opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes dotFill {
  from { transform: scaleY(0); transform-origin: top; }
  to   { transform: scaleY(1); transform-origin: top; }
}
@keyframes skipBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}
@keyframes scrollThumb {
  0%   { top: -20px; }
  100% { top: 60px; }
}
@keyframes bgPulse {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 1;  transform: scale(1.05); }
}
@keyframes streakMove {
  0%   { transform: translateX(-100px); }
  100% { transform: translateX(100px); }
}
@keyframes contentIn {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1);    opacity: .4; }
  50%       { transform: scale(1.12); opacity: .1; }
}
@keyframes particleUp {
  0%   { transform: translateY(100vh); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .4; }
  100% { transform: translateY(-30px); opacity: 0; }
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes lineExpand {
  from { width: 0;     opacity: 0; }
  to   { width: 120px; opacity: 1; }
}

/* Wrapper creates scroll space so video stays pinned */
.vh-wrapper {
  height: 250vh;
  position: relative;
  overflow: visible;
}
 
/* Prevent horizontal scroll without breaking sticky */
body, main, .page-wrapper, .site-content {
  overflow-x: clip;
}
/* Video section stays fixed while wrapper is in view */
#video-hero {
  position: sticky !important;
  top: 0 !important;
 
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0a0908;
 
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}
/* ─────────────── NAVBAR ─────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 68px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  transition: all 0.4s;
}
.navbar.scrolled {
  background: #fff;
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
  border-bottom-color: var(--re-border);
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-mark {
  width: 38px; height: 38px;
  background: var(--re-red);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 900; font-size: 14px; color: white; letter-spacing: .02em;
}
.nav-logo-text {
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase;
  color: #1a1a1c; line-height: 1.2;
}
.nav-logo-text span { display: block; font-weight: 300; font-size: 10px; color: #888; letter-spacing: .3em; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a {
  font-family: var(--font-display);
  font-weight: 600; font-size: 16px;
  letter-spacing: .12em; text-transform: uppercase;
  color: #606062; transition: color .2s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--re-red);
  transform: scaleX(0); transition: transform .2s;
}
.nav-links a:hover,
.nav-links li.active a { color: #1a1a1c; }
.nav-links a:hover::after,
.nav-links li.active a::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-btn {
  font-family: var(--font-display);
  font-weight: 600; font-size: 12px;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 10px 24px;
  background: var(--re-red); color: white; border-radius: 1px;
  transition: background .2s, transform .15s;
}
.nav-btn:hover { background: var(--re-red-dark); transform: translateY(-1px); }
.nav-icon { color: #888; font-size: 18px; cursor: pointer; transition: color .2s; }
.nav-icon:hover { color: #1a1a1c; }

/* Mobile toggle */
.nav-mobile-toggle {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 4px; z-index: 1100;
}
.nav-mobile-toggle span {
  display: block; width: 24px; height: 2px;
  background: #1a1a1c; border-radius: 2px; transition: all .3s;
}
.nav-mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile drawer */
.nav-links.mobile-open {
  display: flex; flex-direction: column;
  position: fixed; top: 68px; left: 0; right: 0;
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(16px);
  border-bottom: 2px solid var(--re-red) !important;
  padding: 20px 0; gap: 0; z-index: 999;
}
.nav-links.mobile-open li { width: 100%; }
.nav-links.mobile-open a {
  display: block; padding: 13px 28px; font-size: 14px;
  border-bottom: 1px solid #f0f0f0; color: #606062;
}
.nav-links.mobile-open a:hover { color: var(--re-red); background: rgba(200,16,46,.03); }

/* ─────────────── BUTTONS ─────────────── */
.btn-primary {
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 16px 40px;
  background: var(--re-red); color: white; border-radius: 7px;
  transition: all .25s;
  display: inline-flex; align-items: center; gap: 10px;
}
.btn-primary:hover {
  background: var(--re-red-dark); transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(200,16,46,.25);
}
.btn-outline {
  font-family: var(--font-display);
  font-weight: 600; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 15px 40px;
  background: transparent; color: var(--re-red);
  border: 2px solid var(--re-red); border-radius: 10px;
  transition: all .25s;
}
.btn-outline:hover { background: var(--re-red); color: #fff; }

/* ─────────────── SECTION UTILITIES ─────────────── */
section { position: relative; }
.section-eyebrow {
  font-family: var(--font-display);
  font-weight: 300; font-size: 11px;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--re-red);
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.section-eyebrow::before {
  content: ''; display: block; width: 32px; height: 1px;
  background: var(--re-red);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(36px,5vw,40px);
  text-transform: uppercase; letter-spacing: -.01em;
  color: #1a1a1c; line-height: .95; margin-bottom: 20px;
}
.section-body {
  font-family: var(--font-editorial);
  font-size: 17px; line-height: 1.75;
  color: #606062; font-weight: 300;
}
.divider { width: 100%; height: 1px; background: var(--re-border); }

/* ─────────────── HERO (stays dark) ─────────────── */
.hero {
  position: relative; height: 100vh; min-height: 700px;
  display: flex; align-items: flex-end;
  overflow: hidden; background: #0a0908 !important;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 70% 60%,rgba(44,43,42,.9) 0%,transparent 70%),
    radial-gradient(ellipse 30% 40% at 80% 40%,rgba(200,16,46,.12) 0%,transparent 60%),
    radial-gradient(ellipse 80% 60% at 10% 80%,rgba(201,152,74,.05) 0%,transparent 50%),
    linear-gradient(135deg,#0A0908 0%,#161514 40%,#1C1B1A 100%);
}
.hero-bike {
  position: absolute; right: -2%; bottom: 0;
  width: 64%; height: 88%;
  background: radial-gradient(ellipse 50% 30% at 50% 80%,rgba(200,16,46,.15) 0%,transparent 60%);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.hero-bike svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 60px rgba(200,16,46,.2));
  animation: fadeUp 1.2s ease .3s both;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 3; padding: 0 72px 80px; animation: slideIn 1s ease .1s both; }
.hero-eyebrow {
  font-family: var(--font-display); font-weight: 300; font-size: 12px;
  letter-spacing: .4em; text-transform: uppercase; color: var(--re-red);
  margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: var(--re-red); animation: lineGrow .8s ease 1s both; }
.hero-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(80px,11vw,160px); line-height: .9;
  text-transform: uppercase; letter-spacing: -.02em; color: #fff; margin-bottom: 4px;
}
.hero-title em { font-style: normal; -webkit-text-stroke: 1px rgba(242,237,228,.3); color: transparent; }
.hero-subtitle {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(16px,2vw,22px); letter-spacing: .25em; text-transform: uppercase;
  color: #888; margin-bottom: 40px;
}
.hero-stats { display: flex; gap: 48px; margin-bottom: 48px; }
.hero-stat-val { font-family: var(--font-display); font-weight: 700; font-size: 36px; color: #fff; line-height: 1; }
.hero-stat-val sup { font-size: 16px; color: var(--re-red); vertical-align: super; }
.hero-stat-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #888; margin-top: 4px; }
.hero-ctas { display: flex; gap: 16px; align-items: center; }
.hero-scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #888;
}
.hero-scroll-hint::after {
  content: ''; width: 1px; height: 50px;
  background: linear-gradient(to bottom,#888,transparent);
  animation: fadeUp 1s ease infinite alternate;
}

/* ─────────────── VIDEO HERO SECTION ─────────────── */
#video-hero video,
#video-hero video.vh-video,
#video-hero video.hero-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#video-hero.video-loaded .vh-bg { display: none; }

.vh-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 120% 80% at 60% 40%,#1a0a2e 0%,#0d0d1a 40%,#050508 100%);
  overflow: hidden;
}
.vh-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 80% 30%,rgba(200,16,46,.14) 0%,transparent 60%),
    radial-gradient(ellipse 30% 40% at 20% 70%,rgba(201,152,74,.07) 0%,transparent 55%),
    radial-gradient(ellipse 60% 30% at 50% 80%,rgba(200,16,46,.06) 0%,transparent 50%);
  animation: bgPulse 6s ease-in-out infinite alternate;
}
.vh-bg::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(105deg,transparent 0,transparent 80px,rgba(255,255,255,.012) 80px,rgba(255,255,255,.012) 82px);
  animation: streakMove 8s linear infinite;
}
#video-hero .vh-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0.08) 100%);
  transition: background .5s ease;
}
#video-hero.expanded .vh-overlay {
  background: linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0.35) 100%);
}
#video-hero::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
  pointer-events: none; z-index: 3;
}
.vh-scanlines {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
}
.vh-particle {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(200,16,46,.45); pointer-events: none; z-index: 1;
  animation: particleUp linear infinite;
}
.vh-road {
  position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
  background: linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 100%);
  z-index: 1; pointer-events: none;
}
.vh-road::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,rgba(200,16,46,.5),rgba(201,152,74,.4),transparent);
}
.vh-content {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) !important;
  z-index: 5; text-align: center;
  width: 100%; max-width: 780px;
  padding: 0 24px;
  animation: contentIn 1.2s .1s cubic-bezier(.16,1,.3,1) both;
}
.vh-apexmode {
  font-family: var(--font-display);
  font-weight: 900; font-size: clamp(28px,4vw,44px);
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: 0;
  transition: margin-bottom .4s ease;
  cursor: pointer; user-select: none;
}
.vh-expand {
  overflow: hidden; max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height .6s cubic-bezier(.4,0,.2,1), opacity .5s ease, margin-top .4s ease;
}
.vh-expand.open { max-height: 400px; opacity: 1; margin-top: 20px; }
.vh-tagline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px,2.5vw,24px); color: #fff;
  letter-spacing: .04em; margin-bottom: 16px;
}
.vh-body {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(14px,1.6vw,17px); line-height: 1.75;
  color: rgba(255,255,255,.75); max-width: 660px; margin: 0 auto 28px;
}
.vh-collapse-btn {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 6; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 22px; font-family: var(--font-display);
  cursor: pointer; line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: background .2s, opacity .3s ease, transform .2s;
}
.vh-collapse-btn:hover { background: rgba(255,255,255,.28); transform: translateX(-50%) scale(1.08); }
#video-hero.expanded .vh-collapse-btn { opacity: 1; pointer-events: auto; }
#video-hero.expanded .vh-plus-btn { opacity: 0; pointer-events: none; }
.vh-plus-btn {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 6; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 22px; cursor: pointer;
  transition: background .2s, opacity .3s ease, transform .2s;
  font-family: var(--font-display);
}
.vh-plus-btn:hover { background: rgba(255,255,255,.28); transform: translateX(-50%) scale(1.1); }
.vh-plus-btn.hidden { opacity: 0; pointer-events: none; }
.vh-mute-btn {
  position: absolute; top: 28px; right: 28px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
  color: white; font-size: 14px; font-family: var(--font-display);
}
.vh-mute-btn:hover { background: rgba(255,255,255,.22); }
.vh-plus {
  position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
  z-index: 10; width: 66px; height: 66px; border-radius: 50%;
  background: rgba(255,255,255,.07); backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85); font-size: 28px; font-weight: 300;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, background .3s, border-color .3s;
  outline: none;
}
.vh-plus::before {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.05);
  animation: ringPulse 2.5s ease-in-out infinite;
}
.vh-plus:hover {
  transform: translateX(-50%) scale(1.18);
  background: rgba(200,16,46,.22); border-color: rgba(200,16,46,.6);
  box-shadow: 0 0 0 8px rgba(200,16,46,.07),0 0 32px rgba(200,16,46,.3),0 8px 28px rgba(0,0,0,.4);
}
.vh-plus:active { transform: translateX(-50%) scale(.96); }
.vh-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(4,2,8,.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.vh-modal.open { opacity: 1; pointer-events: auto; }
.vh-modal-inner {
  text-align: center; padding: 0 28px;
  transform: scale(.88) translateY(22px);
  transition: transform .5s cubic-bezier(.34,1.28,.64,1);
  position: relative; top: 105px;
}
.vh-modal.open .vh-modal-inner { transform: scale(1) translateY(0); }
.vh-modal-line {
  width: 0; height: 2px;
  background: linear-gradient(90deg,transparent,#c9984a,transparent);
  margin: 0 auto 30px; transition: width .6s .2s ease;
}
.vh-modal.open .vh-modal-line { width: 110px; }
.vh-modal-eyebrow {
  font-family: var(--font-display); font-weight: 300; font-size: 11px;
  letter-spacing: .52em; text-transform: uppercase; color: #2bbba7; margin-bottom: 18px;
}
.vh-modal-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(48px,7.5vw,96px); line-height: .9;
  text-transform: uppercase; letter-spacing: -.02em; color: #fff; margin-bottom: 22px;
  text-shadow: 0 0 60px rgba(200,16,46,.35);
}
.vh-modal-title .m-red  { color: #C8102E; }
.vh-modal-title .m-gold { color: #c9984a; }
.vh-modal-sub {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(14px,1.4vw,17px); letter-spacing: .1em;
  color: #fff; max-width: 600px; margin: 0 auto 36px; line-height: 1.7;
}
.vh-modal-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; padding: 13px 34px;
  border: 1.5px solid #813b8e; border-radius: 2px;
  background: rgba(156,39,176,.19); backdrop-filter: blur(8px);
  cursor: pointer; transition: all .25s; text-decoration: none;
}
.vh-modal-cta:hover {
  background: rgba(200,16,46,.28); border-color: rgba(200,16,46,.75);
  transform: translateY(-2px); box-shadow: 0 10px 36px rgba(200,16,46,.2);
}
.vh-modal-close {
  position: fixed; top: 28px; right: 36px; z-index: 2001;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55); font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; backdrop-filter: blur(8px);
}
.vh-modal-close:hover { background: rgba(255,255,255,.12); color: #fff; transform: rotate(90deg) scale(1.1); }
.vh-modal-divider {
  width: 100px; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(200,16,46,.3),transparent);
  margin: 30px auto 0;
}

/* ─────────────── OVERVIEW ─────────────── */
#overview {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100vh; background: #ffffff;
}
.overview-content {
  padding: 120px 80px 120px 72px; background: #ffffff;
  display: flex; flex-direction: column; justify-content: center;
}
.overview-body { max-width: 480px; }
.overview-body p { font-family: var(--font-editorial); font-size: 18px; line-height: 1.8; color: #606062; margin-bottom: 20px; }
.overview-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.08);
  margin-top: 56px; margin-bottom: 48px;
}
.ov-stat { background: #ffffff; padding: 28px 24px; text-align: center; }
.ov-stat-num { font-family: var(--font-display); font-weight: 900; font-size: 40px; color: var(--re-red); line-height: 1; }
.ov-stat-num sup { font-size: 18px; color: #2bbba7; }
.ov-stat-unit { font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #888; margin-top: 6px; }
.overview-visual {
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.overview-bike-art {
  width: 90%; max-width: 560px;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.12)) drop-shadow(0 0 40px rgba(200,16,46,.06));
}

/* ─────────────── FEATURES ─────────────── */
#features { background: #f7f8fa; padding: 120px 72px; }
.features-header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 80px; }
.features-header-right { display: flex; align-items: flex-end; }
.features-header-right p { font-family: var(--font-editorial); font-size: 20px; line-height: 1.7; color: #606062; font-style: italic; }
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.08); }
.feature-card { background: #ffffff; padding: 48px 40px; position: relative; transition: background .3s; overflow: hidden; }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: var(--re-red); transition: height .4s ease; }
.feature-card:hover { background: #fafafa; }
.feature-card:hover::before { height: 100%; }
.feature-num { font-family: var(--font-display); font-weight: 900; font-size: 72px; color: rgba(200,16,46,.06); line-height: 1; margin-bottom: 16px; letter-spacing: -.04em; }
.feature-icon-wrap { width: 52px; height: 52px; border: 1px solid rgba(0,0,0,.1); border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; transition: border-color .3s, background .3s; }
.feature-card:hover .feature-icon-wrap { border-color: var(--re-red); background: rgba(200,16,46,.05); }
.feature-icon-wrap svg { width: 24px; height: 24px; stroke: #606062; fill: none; }
.feature-card:hover .feature-icon-wrap svg { stroke: var(--re-red); }
.feature-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: #1a1a1c; margin-bottom: 12px; }
.feature-desc { font-size: 14px; line-height: 1.7; color: #606062; }
.feature-tag { display: inline-block; margin-top: 20px; font-family: var(--font-display); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--re-red); padding: 4px 10px; border: 1px solid rgba(200,16,46,.25); border-radius: 1px; }

/* ─────────────── COLORWAYS ─────────────── */
#colorways { background: #ffffff; overflow: hidden; position: relative; }
.colorways-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; }
.colorways-stage { position: relative; overflow: hidden; background: #f0f2f7; }
.color-bike-display { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .5s ease; }
.color-bike-display.hidden { opacity: 0; pointer-events: none; }
.color-bike-display.visible { opacity: 1; }
.bike-color-1 { background: radial-gradient(ellipse 70% 60% at 50% 60%,rgba(44,62,80,.1) 0%,transparent 70%),#dce8f4 !important; }
.bike-color-2 { background: radial-gradient(ellipse 70% 60% at 50% 60%,rgba(100,10,20,.1) 0%,transparent 70%),#f4dce0 !important; }
.bike-color-3 { background: radial-gradient(ellipse 70% 60% at 50% 60%,rgba(140,120,20,.1) 0%,transparent 70%),#f4f0dc !important; }
.bike-color-4 { background: radial-gradient(ellipse 70% 60% at 50% 60%,rgba(20,80,40,.1) 0%,transparent 70%),#dcf0e8 !important; }
.colorways-info { background: #ffffff; padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
.color-options { display: flex; flex-direction: column; gap: 2px; margin-top: 48px; }
.color-option { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; transition: all .25s; position: relative; }
.color-option:hover { background: #f7f8fa; border-color: rgba(0,0,0,.1); }
.color-option.active { background: rgba(200,16,46,.03); border-color: rgba(200,16,46,.2); }
.color-option.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--re-red); border-radius: 2px 0 0 2px; }
.color-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; flex-shrink: 0; transition: border-color .2s; position: relative; }
.color-option.active .color-swatch { border-color: var(--re-red); }
.color-swatch::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: bold; opacity: 0; transition: opacity .2s; }
.color-option.active .color-swatch::after { opacity: 1; }
.color-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #1a1a1c; }
.color-desc-sm { font-size: 12px; color: #888; margin-top: 2px; letter-spacing: .04em; }
.color-price { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #b07d20; }

/* ─────────────── SPECS ─────────────── */
.specs-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; margin-top: 64px; }
.specs-intro { font-family: var(--font-editorial); font-size: 18px; line-height: 1.75; color: #606062; margin-bottom: 40px; }
.specs-highlight { background: #ffffff; border: 1.5px solid rgba(0,0,0,.08); border-left: 4px solid var(--re-red); padding: 32px; margin-top: 32px; }
.specs-highlight-num { font-family: var(--font-display); font-weight: 900; font-size: 56px; color: var(--re-red); line-height: 1; }
.specs-highlight-num sup { font-size: 22px; color: var(--re-red); }
.specs-highlight-label { font-family: var(--font-display); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #888; margin-top: 6px; }
.specs-table { width: 100%; }
.specs-group { margin-bottom: 40px; }
.specs-group-title { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--re-red); padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,.08); margin-bottom: 8px; }
.spec-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.05); transition: background .15s; }
.spec-row:hover { background: rgba(0,0,0,.02); padding-left: 8px; }
.spec-key { font-size: 13px; color: #606062; letter-spacing: .03em; }
.spec-val { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #1a1a1c; letter-spacing: .06em; text-align: right; }

/* ─────────────── GALLERY ─────────────── */
#gallery { background: #ffffff; }
.gallery-header { padding: 120px 72px 64px; }
.gallery-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 340px 340px; gap: 4px; }
.gallery-cell { position: relative; overflow: hidden; cursor: pointer; }
.gallery-cell:hover .gallery-overlay { opacity: 1; }
.gallery-cell:first-child { grid-row: span 2; }
.gallery-bg { width: 100%; height: 100%; transition: transform .6s ease; }
.gallery-cell:hover .gallery-bg { transform: scale(1.06); }
.gallery-overlay { position: absolute; inset: 0; background: rgba(200,16,46,.15); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.gallery-overlay-icon { width: 48px; height: 48px; border: 1px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; }
.gc1 { background: linear-gradient(135deg,#1a1410 0%,#2a1a0a 50%,#0a0908 100%); }
.gc2 { background: linear-gradient(160deg,#0e1218 0%,#1a2030 100%); }
.gc3 { background: linear-gradient(140deg,#12100e 0%,#1e1812 100%); }
.gc4 { background: linear-gradient(120deg,#150a10 0%,#200a14 100%); }
.gc5 { background: linear-gradient(150deg,#0a100a 0%,#141e10 100%); }
.gc1::after { content: 'RIDE FREE\A OR DIE RIDING'; }
.gc2::after { content: 'ENGINE\ADETAIL'; }
.gc3::after { content: 'STUDIO\ASHOT'; }
.gc4::after { content: 'LIFESTYLE\ASHOOT'; }
.gc5::after { content: 'TRACK\ADAY'; }
.gallery-cell::after { white-space: pre; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 28px; text-align: center; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.07); pointer-events: none; }

/* ─────────────── TEST RIDE ─────────────── */
#testride {
  position: relative; padding: 140px 72px;
  background: radial-gradient(ellipse 50% 80% at 90% 50%,rgba(200,16,46,.12) 0%,transparent 60%),
              radial-gradient(ellipse 60% 50% at 10% 50%,rgba(201,152,74,.04) 0%,transparent 50%),
              var(--re-carbon);
  overflow: hidden; text-align: center;
}
#testride::before {
  content: 'GUERRILLA'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-display); font-weight: 900; font-size: 20vw;
  color: rgba(255,255,255,.02); white-space: nowrap; letter-spacing: -.06em; pointer-events: none;
}
.testride-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px,6vw,80px); text-transform: uppercase; letter-spacing: -.01em; color: #1a1a1c; line-height: .95; margin-bottom: 24px; }
.testride-title span { color: var(--re-red); }
.testride-sub { font-family: var(--font-editorial); font-size: 20px; line-height: 1.6; color: #606062; max-width: 560px; margin: 0 auto 48px; }
.testride-actions { display: flex; gap: 16px; justify-content: center; }

/* ─────────────── TESTIMONIALS ─────────────── */
#testimonials { background: #f7f8fa; padding: 120px 72px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 64px; }
.testimonial-card { background: #ffffff; border: 1.5px solid rgba(0,0,0,.07); padding: 40px 36px; position: relative; transition: border-color .3s, transform .3s; }
.testimonial-card:hover { border-color: var(--re-red); box-shadow: 0 16px 48px rgba(200,16,46,.08); transform: translateY(-4px); }
.quote-mark { font-family: var(--font-editorial); font-size: 80px; line-height: .6; color: var(--re-red); opacity: .2; margin-bottom: 16px; }
.testimonial-text { font-family: var(--font-editorial); font-size: 17px; line-height: 1.75; color: #606062; font-style: italic; margin-bottom: 28px; }
.testimonial-stars { color: #b07d20; font-size: 13px; letter-spacing: 2px; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.07); }
.author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--re-red); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.author-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #1a1a1c; }
.author-location { font-size: 12px; color: #888; margin-top: 2px; letter-spacing: .04em; }


/* ─────────────── DEALERS ─────────────── */
#dealers { background: #ffffff; }
.dealers-inner { display: grid; grid-template-columns: 1fr 1.5fr; }
.dealers-form-side { padding: 100px 72px; border-right: 1px solid rgba(0,0,0,.08); }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-family: var(--font-display); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #888; margin-bottom: 8px; }
.form-input { width: 100%; padding: 14px 16px; background: #f7f8fa; border: 1.5px solid rgba(0,0,0,.1); border-radius: 1px; color: #1a1a1c; font-family: var(--font-body); font-size: 14px; transition: border-color .2s; outline: none; }
.form-input:focus { border-color: var(--re-red); background: #fff; }
.form-input::placeholder { color: #bbb; }
.dealer-results { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.dealer-result { padding: 16px 20px; background: #f7f8fa; border: 1.5px solid rgba(0,0,0,.08); border-radius: 1px; display: flex; gap: 16px; align-items: flex-start; transition: border-color .2s; cursor: pointer; }
.dealer-result:hover { border-color: var(--re-red); background: #fff; }
.dealer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--re-red); margin-top: 5px; flex-shrink: 0; animation: pulse-red 2s infinite; }
.dealer-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #1a1a1c; }
.dealer-addr { font-size: 12px; color: #888; margin-top: 4px; }
.dealer-dist { font-family: var(--font-display); font-size: 12px; color: #b07d20; margin-left: auto; flex-shrink: 0; }
.dealers-map-side { position: relative; min-height: 600px; background: linear-gradient(135deg,#f0f2f7 0%,rgba(200,16,46,.04) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) !important; background-size: 48px 48px; }
.map-pins { position: absolute; inset: 0; }
.map-pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--re-red); animation: pulse-red 2s infinite; }
.map-pin::after { content: ''; position: absolute; top: -3px; left: -3px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(200,16,46,.25); }
.map-label { position: absolute; font-family: var(--font-display); font-size: 11px; letter-spacing: .2em; color: #888; white-space: nowrap; }
.map-watermark { font-family: var(--font-display); font-weight: 900; font-size: 80px; color: rgba(200,16,46,.04); letter-spacing: .1em; text-align: center; }
 

/* ─────────────── HIGHLIGHTS ─────────────── */
.hl-subnav {
  display: flex; align-items: center;
  background: rgba(20,19,18,.82); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 40px;
  padding: 6px 8px; gap: 2px; white-space: nowrap;
}
.hl-subnav-item {
  font-family: var(--font-display); font-weight: 400; font-size: 13px;
  letter-spacing: .06em; color: #fff; padding: 8px 22px;
  border-radius: 30px; cursor: pointer; transition: all .25s;
}
.hl-subnav-item:hover { color: #fff; }
.hl-subnav-item.active { font-weight: 700; color: #fff; background: rgba(255,255,255,.1); }
#highlights { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: #080807; user-select: none; }
.hl-slides { position: relative; width: 100%; height: 100%; }
.hl-slide { position: absolute; inset: 0; display: flex; align-items: center; padding: 80px 80px 140px; opacity: 0; pointer-events: none; transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1); transform: translateY(28px); }
.hl-slide.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.hl-slide.exit-up { opacity: 0; transform: translateY(-28px); pointer-events: none; }
.hl-slide-bg { position: absolute; inset: 0; transition: opacity .55s ease; }
.hl-slide-text { position: relative; z-index: 5; max-width: 360px; flex-shrink: 0; }
.hl-slide-num { font-family: var(--font-display); font-size: 11px; font-weight: 300; letter-spacing: .4em; text-transform: uppercase; color: var(--re-red); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.hl-slide-num::after { content: ''; display: block; height: 1px; width: 32px; background: var(--re-red); }
.hl-slide-heading { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px,5vw,40px); text-transform: uppercase; letter-spacing: -.01em; line-height: .95; color: #813b8e; margin-bottom: 24px; }
.hl-slide-body { font-family: var(--font-body); font-size: 18px; line-height: 1.75; color: #606062; max-width: 320px; }
.hl-slide-bike { position: absolute; right: -4%; top:8%; bottom: 12%; width: 58%; height: auto; display: flex; align-items: center; justify-content: center; z-index: 4; }
.hl-slide-img { width: 100% !important; height: 100%; max-height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 8px 32px rgba(0,0,0,.12)); }
@media (max-width: 1024px) { .hl-slide-bike { top: 6%; bottom: 14%; width: 62%; } }
@media (max-width: 991px) { .hl-slide-bike { position: relative !important; top: auto !important; bottom: auto !important; right: auto !important; width: 100% !important; height: 38vh !important; max-height: 240px !important; order: -1 !important; margin-bottom: 12px !important; } }
@media (max-width: 480px) { .hl-slide-bike { height: 32vh !important; max-height: 190px !important; } }
.hl-slide-bike svg { width: 100%; height: 100%; filter: drop-shadow(0 0 80px rgba(0,0,0,.9)); }
.hl-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 3; transition: all .6s ease; }
.hl-progress { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hl-dot { width: 3px; height: 28px; border-radius: 2px; background: #813b8e; cursor: pointer; transition: all .3s ease; position: relative; overflow: hidden; }
.hl-dot.active { background: rgba(255,255,255,.15); height: 40px; }
.hl-dot.active::after { content: ''; position: absolute; inset: 0; background: var(--re-red); border-radius: 2px; animation: dotFill var(--dot-duration,4s) linear forwards; }
.hl-dot.done { background: var(--re-red); opacity: .6; }
.hl-skip-wrap { position: absolute; bottom: 160px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: opacity .3s; }
.hl-skip-wrap:hover { opacity: .7; }
.hl-skip-label { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: rgb(0 0 0 / 70%); }
.hl-skip-arrow { width: 28px; height: 28px; border: 1px solid rgb(0 0 0 / 70%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgb(0 0 0 / 70%); font-size: 13px; animation: skipBounce 1.8s ease-in-out infinite; }
.hl-cta {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer; transition: all .22s; border: none; outline: none;
  padding: 16px 48px; min-width: 220px;
}
.hl-cta-configure { background: #fff; color: #1a1a1c; }
.hl-cta-configure:hover { background: var(--re-cream); }
.hl-cta-testride { background: var(--re-red); color: #fff; }
.hl-cta-testride:hover { background: var(--re-red-dark); }
.hl-scroll-hint { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transition: opacity .4s; }
.hl-scroll-hint.visible { opacity: 1; }
.hl-scroll-hint span { font-family: var(--font-display); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #888; writing-mode: vertical-rl; }
.hl-scroll-track { width: 1px; height: 60px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.hl-scroll-thumb { position: absolute; top: 0; left: 0; width: 1px; height: 20px; background: var(--re-red); animation: scrollThumb 1.5s ease-in-out infinite; }



/* ─────────────── SMYLEXA EXTENSION SECTIONS ─────────────── */
.smylexa-section { background: #f7f8fa !important; padding: 120px 72px; }
.smylexa-section .section-eyebrow { color: var(--re-red) !important; }
.smylexa-section .section-title   { color: #1a1a1c !important; }
.smylexa-section .section-body    { color: #606062 !important; }
.smylexa-section .feature-card    { background: #fff !important; }
.smylexa-section .feature-title   { color: #1a1a1c !important; }
.smylexa-section .feature-desc    { color: #606062 !important; }
.smylexa-section .testimonial-card{ background: #fff !important; border-color: rgba(0,0,0,.07) !important; }
.smylexa-section .testimonial-text{ color: #606062 !important; }
.smylexa-section .author-name     { color: #1a1a1c !important; }
.smylexa-section .testride-title  { color: #1a1a1c !important; }
.smylexa-section .testride-title span { color: var(--re-red) !important; }
.smylexa-section .testride-sub    { color: #606062 !important; }
.smylexa-alt { background: #ffffff !important; padding: 120px 72px; }

/* ─────────────── FOOTER ─────────────── */
footer { background: #1a1a1c; border-top: 4px solid var(--re-red); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; padding: 80px 72px 60px; border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-brand-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.footer-brand-mark { width: 44px; height: 44px; background: var(--re-red); clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 16px; color: white; }
.footer-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .15em; text-transform: uppercase; color: #fff; line-height: 1.3; }
.footer-brand-name span { display: block; font-weight: 300; font-size: 10px; color: rgba(255,255,255,.35); }
.footer-tagline { font-family: var(--font-editorial); font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.4); margin-bottom: 28px; font-style: italic; }
.footer-social { display: flex; gap: 10px; }
.social-btn { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 2px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: 14px; transition: all .2s; }
.social-btn:hover { border-color: var(--re-red); color: var(--re-red); }
.footer-col-title { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,.4); transition: color .2s; letter-spacing: .03em; }
.footer-links a:hover { color: rgba(255,255,255,.75); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 24px 72px; flex-wrap: wrap; gap: 16px; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.3); letter-spacing: .04em; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,.3); letter-spacing: .04em; transition: color .2s; }
.footer-legal a:hover { color: rgba(255,255,255,.5); }
.footer-re-flag { font-family: var(--font-display); font-size: 11px; letter-spacing: .15em; color: var(--re-red); }

/* ═══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .navbar { padding: 0 24px; height: 64px; }
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }
  .nav-links.mobile-open { top: 64px; }
  #overview { grid-template-columns: 1fr; }
  .overview-content { border-right: none; border-bottom: 1px solid rgba(0,0,0,.08); padding: 72px 36px; }
  .overview-visual { min-height: 360px; }
  #features { padding: 80px 28px; }
  .features-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .features-grid { grid-template-columns: repeat(2,1fr); }
  .colorways-inner { grid-template-columns: 1fr; }
  .colorways-stage { min-height: 340px; }
  #specs { padding: 80px 28px; }
  .specs-layout { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
  .gallery-header { padding: 80px 28px 40px; }
  .gallery-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px; }
  .gallery-cell:first-child { grid-column: span 2; grid-row: span 1; }
  #testimonials { padding: 80px 28px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .dealers-inner { grid-template-columns: 1fr; }
  .dealers-form-side { border-right: none; border-bottom: 1px solid rgba(0,0,0,.08); padding: 60px 28px; }
  .dealers-map-side { min-height: 340px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; padding: 52px 28px 40px; }
  .footer-bottom { padding: 18px 28px; flex-direction: column; gap: 10px; }
  .smylexa-section, .smylexa-alt { padding: 80px 28px !important; }
  .hl-slide { padding: 80px 48px 130px; }
  .hl-slide-heading { font-size: clamp(34px,5vw,52px); }
  .hl-slide-bike { width: 65%; }
}
@media (max-width: 767px) {
  .navbar { padding: 0 18px; height: 60px; }
  .nav-links.mobile-open { top: 60px; }
  #overview { grid-template-columns: 1fr; }
  .overview-content { padding: 60px 18px; }
  .ov-stat-num { font-size: 26px; }
  #features { padding: 60px 18px; }
  .features-grid { grid-template-columns: 1fr; }
  .colorways-info { padding: 44px 18px; }
  #specs { padding: 60px 18px; }
  .gallery-header { padding: 60px 18px 30px; }
  .gallery-mosaic { display: flex; flex-direction: column; }
  .gallery-cell { height: 200px; }
  .gallery-cell:first-child { height: 280px; }
  #testimonials { padding: 60px 18px; }
  .dealers-form-side { padding: 52px 18px; }
  .footer-top { grid-template-columns: 1fr; padding: 44px 18px 32px; }
  .footer-bottom { padding: 18px; }
  .smylexa-section, .smylexa-alt { padding: 64px 18px !important; }
  .hl-slide { padding: 80px 20px 120px; }
  .hl-bottom-ctas { flex-direction: column; gap: 8px; padding: 12px 0; }
  .hl-cta { min-width: 180px; padding: 14px 32px; }
  .vh-content { bottom: 80px; }
  .vh-plus-btn { bottom: 28px; }
}
.hl-bottom-ctas {
  position: fixed !important;
  bottom: 16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.hl-cta {
  min-width: 200px !important;
  padding: 14px 32px !important;
  border-radius: 30px !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
}
.hl-cta-configure {
  background: #fff !important;
  color: #1a1a1c !important;
  border: 1px solid rgba(0,0,0,.1) !important;
}
.hl-cta-testride {
  background: #1a1916 !important;
  color: #c9984a !important;
  border: 1px solid rgba(201,152,74,.2) !important;
}
@media (max-width: 480px) {
  .overview-stats { grid-template-columns: 1fr; }
  .ov-stat { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
  .hero-title { font-size: clamp(56px,15vw,80px); }
  .hero-stats { flex-direction: column; gap: 12px; }
}

/* Smooth scroll base */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.vh-video, .vh-content, .vh-expand { will-change: transform, opacity; }
.vh-overlay { transition: opacity 0.5s ease; }
@media (max-width: 767px) { html { scroll-snap-type: none; } }

/* ══════════════════════════════
   COLOURWAYS SECTION
══════════════════════════════ */
#colorways {
  background:#ffffff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px 0 40px;
  overflow:hidden;
}
.cw-header { padding:0 72px 48px; }
.cw-eyebrow {
  font-family:var(--font-display);font-weight:300;font-size:11px;
  letter-spacing:.4em;text-transform:uppercase;color:#813b8e;
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.cw-eyebrow::before{content:'';width:32px;height:1px;background:#813b8e;}
.cw-title {
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(36px,5vw,40px);
  text-transform:uppercase;letter-spacing:-.01em;
  color:#813b8e;line-height:.92;
}
.cw-body { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; padding:0 72px; }
.cw-stage { position:relative; display:flex;align-items:center;justify-content:center; min-height:400px; }
.cw-ring {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  width:320px;height:60px; border-radius:50%;
  transition:box-shadow .5s ease, border-color .5s ease;
  border:1.5px solid rgba(255,255,255,.08);
}
.cw-ring-label {
  position:absolute; bottom:-28px;left:50%; transform:translateX(-50%);
  font-family:var(--font-display);
  font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.3);
  white-space:nowrap;
}
.cw-ring-label::before{content:'( ';}
.cw-ring-label::after{content:' )';}
.cw-main-img-wrap { position:relative;z-index:2; transition:opacity .4s ease,filter .5s ease; }
.cw-main-img {
  width:340px;max-width:100%;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.8));
  transition:filter .5s ease;
  min-height:200px;
  display:flex;align-items:center;justify-content:center;
}
.cw-main-img img { width:100%; filter:drop-shadow(0 20px 60px rgba(0,0,0,.8)); transition:filter .5s ease, transform .4s ease; }
.cw-stage:hover .cw-main-img img { transform:scale(1.03); }
.cw-controls { padding-left:48px; }
.cw-active-info { margin-bottom:32px; }
.cw-active-name {
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px,2vw,40px);
  text-transform:uppercase;letter-spacing:.04em;
  color:#813b8e;margin-bottom:8px;
  transition:color .3s ease;
}
.cw-active-price { font-family:var(--font-display);font-weight:600;font-size:20px; color:var(--gold);margin-bottom:4px; }
.cw-active-note { font-size:11px;color:#606062;letter-spacing:.08em; }
.cw-slider-label { font-family:var(--font-display);font-weight:300;font-size:10px; letter-spacing:.3em;text-transform:uppercase; color:rgba(255,255,255,.35);margin-bottom:14px; }
.cw-slider-wrap { position:relative; display:flex;align-items:center;gap:12px; margin-bottom:24px; }
.cw-slider-btn {
  width:36px;height:36px;border-radius:50%;
  background:rgb(82 199 183);
  border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);font-size:16px;
  cursor:pointer;flex-shrink:0; transition:all .2s;font-family:var(--font-display);
}
.cw-slider-btn:hover { background:rgb(82 199 183);color:#fff; }
.cw-slider-btn:disabled{opacity:.3;cursor:not-allowed;}
.cw-thumbs-viewport { flex:1;overflow:hidden; }
.cw-thumbs-track { display:flex;gap:12px; transition:transform .4s cubic-bezier(.4,0,.2,1); }
.cw-thumb {
  flex:0 0 100px; height:72px; border-radius:8px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; transition:border-color .25s, transform .25s, box-shadow .25s;
  position:relative; background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
}
.cw-thumb:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.3); }
.cw-thumb.active { border-color:var(--active-col,#813b8e); box-shadow:0 0 0 3px rgba(129,59,142,.2); }
.cw-thumb img { width:100%;height:100%; object-fit:contain;padding:6px; transition:filter .4s ease; }
.cw-thumb-label { position:absolute;bottom:4px;left:0;right:0; text-align:center; font-family:var(--font-display);font-size:9px; letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.5); }
.cw-dots { display:flex;gap:8px;align-items:center; margin-bottom:32px; }
.cw-dot { height:3px;border-radius:2px; background:rgba(255,255,255,.2); cursor:pointer;transition:all .3s; }
.cw-dot.active { background:var(--active-col,#813b8e); width:24px !important; }
.cw-actions { display:flex;gap:12px;flex-wrap:wrap; }
.cw-action-btn { font-family:var(--font-display);font-weight:700;font-size:11px; letter-spacing:.18em;text-transform:uppercase; padding:11px 24px;border-radius:2px; display:flex;align-items:center;gap:6px; cursor:pointer;transition:all .2s;border:none; }
.cw-action-primary { background:#813b8e;color:#fff; }
.cw-action-primary:hover{background:#6a2f76;}
.cw-action-ghost { background:transparent;color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.2) !important; }
.cw-action-ghost:hover{border-color:rgba(255,255,255,.5) !important;color:#fff;}
.cw-note { margin-top:20px; font-size:11px;color:rgba(255,255,255,.25);letter-spacing:.04em; }
@media(max-width:1024px){ .cw-header,.cw-body{padding-left:32px;padding-right:32px;} .cw-controls{padding-left:28px;} .cw-main-img{width:260px;} .cw-ring{width:240px;} }
@media(max-width:768px){ .cw-body{grid-template-columns:1fr;gap:32px;} .cw-header,.cw-body{padding-left:20px;padding-right:20px;} .cw-controls{padding-left:0;} .cw-stage{min-height:280px;} .cw-main-img{width:220px;} .cw-ring{width:200px;} .cw-thumb{flex:0 0 80px;height:60px;} }

/* =============================================================
   FAQ ACCORDION
   ============================================================= */
#faq { background: #ffffff; padding: 0; }
.faq-wrap { padding: 100px 72px; }
.faq-header { text-align: center; margin-bottom: 64px; }
.faq-eyebrow { font-family:var(--font-display); font-weight: 300; font-size: 11px; letter-spacing: 0.45em; text-transform: uppercase; color: #813b8e; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.faq-eyebrow::before, .faq-eyebrow::after { content: ''; display: block; width: 40px; height: 1px; background: #813b8e; }
.faq-title { font-family:var(--font-display); font-weight: 900; font-size: clamp(36px, 5vw, 60px); text-transform: uppercase; letter-spacing: -0.01em; color: #1a1a1c; line-height: 0.92; margin-bottom: 18px; }
.faq-intro {  font-size: 18px; line-height: 1.7; color: #606062; max-width: 540px; margin: 0 auto; }
.faq-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); overflow: hidden; }
.faq-item:first-child { border-top: 1px solid rgba(0,0,0,0.08); }
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; user-select: none; transition: color 0.2s; }
.faq-question:hover { color: #813b8e; }
.faq-question span { font-family:var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; color: #1a1a1c; line-height: 1.3; transition: color 0.2s; flex: 1; }
.faq-question:hover span { color: #813b8e; }
.faq-icon { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.22s, border-color 0.22s; position: relative; overflow: hidden; }
.faq-question:hover .faq-icon { border-color: #813b8e; background: rgba(129,59,142,0.06); }
.faq-plus, .faq-minus { position: absolute; font-size: 20px; font-weight: 300; line-height: 1; color: #1a1a1c; transition: opacity 0.2s, transform 0.2s; }
.faq-plus  { opacity: 1;  transform: rotate(0deg);   }
.faq-minus { opacity: 0;  transform: rotate(-90deg); }
details[open] .faq-plus  { opacity: 0;  transform: rotate(90deg); }
details[open] .faq-minus { opacity: 1;  transform: rotate(0deg);  }
details[open] .faq-question span { color: #813b8e; }
details[open] .faq-icon { background: #813b8e; border-color: #813b8e; }
details[open] .faq-plus, details[open] .faq-minus { color: #fff; }
.faq-answer { padding: 0 40px 24px 0; animation: faqOpen 0.3s ease; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.faq-answer p {  font-size: 17px; line-height: 1.75; color: #606062; }
.faq-cta { margin-top: 64px; display: flex; align-items: center; justify-content: center; gap: 24px; padding-top: 48px; border-top: 1px solid rgba(0,0,0,0.08); }
.faq-cta-text { font-family:var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: #606062; }
@media (max-width: 1024px) { .faq-wrap { padding: 80px 40px; } .faq-body { gap: 0 32px; } .faq-question span { font-size: 15px; } }
@media (max-width: 767px) {
  .faq-wrap { padding: 64px 20px; }
  .faq-header { margin-bottom: 44px; }
  .faq-body { grid-template-columns: 1fr; gap: 0; }
  .faq-col:last-child .faq-item:first-child { border-top: none; }
  .faq-question { padding: 18px 0; }
  .faq-question span { font-size: 14px; }
  .faq-answer { padding-bottom: 18px; }
  .faq-answer p { font-size: 15px; }
  .faq-cta { flex-direction: column; gap: 16px; margin-top: 44px; padding-top: 36px; }
}
@media (max-width: 480px) { .faq-wrap { padding: 52px 16px; } .faq-title { font-size: clamp(30px, 9vw, 44px); } .faq-question span { font-size: 13px; } .faq-icon { width: 28px; height: 28px; } .faq-plus, .faq-minus { font-size: 17px; } }

/* =============================================================
   DEALERS MAP
   ============================================================= */
.dealer-result { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: #f7f8fa; border: 1.5px solid rgba(0,0,0,0.07); border-radius: 2px; cursor: pointer; transition: all 0.22s; position: relative; }
.dealer-result::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #813b8e; border-radius: 2px 0 0 2px; transform: scaleY(0); transition: transform 0.25s ease; }
.dealer-result:hover { background: #fff; border-color: rgba(129,59,142,0.2); box-shadow: 0 4px 16px rgba(129,59,142,0.08); }
.dealer-result:hover::before { transform: scaleY(1); }
.dealer-result-active { background: #fff !important; border-color: #813b8e !important; box-shadow: 0 4px 20px rgba(129,59,142,0.12) !important; }
.dealer-result-active::before { transform: scaleY(1) !important; }
.dealer-result-active .dealer-dot { background: #813b8e !important; animation: none !important; }
.dealer-result-active .dealer-arrow { color: #813b8e !important; }
.dealer-dot { width: 10px; height: 10px; border-radius: 50%; background: #2bbba7; flex-shrink: 0; margin-top: 5px; animation: dealerPulse 2s ease-in-out infinite; }
@keyframes dealerPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(43,187,167,0.4); } 50% { box-shadow: 0 0 0 6px rgba(43,187,167,0); } }
.dealer-result-info { flex: 1; }
.dealer-name { font-family:var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1a1c; margin-bottom: 3px; }
.dealer-addr { font-size: 12px; color: #888; line-height: 1.5; margin-bottom: 8px; }
.dealer-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.dealer-tag { font-family:var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; background: rgba(0,0,0,0.05); color: #888; }
.dealer-tag-free { background: rgba(43,187,167,0.1); color: #2bbba7; }
.dealer-right-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dealer-dist { font-family:var(--font-display); font-weight: 600; font-size: 13px; color: #b07d20; }
.dealer-arrow { font-size: 20px; color: #ccc; line-height: 1; transition: color 0.2s, transform 0.2s; }
.dealer-result:hover .dealer-arrow { color: #813b8e; transform: translateX(3px); }
.dealers-map-side { position: relative; min-height: 560px; }
.clinic-map { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.clinic-map-active { opacity: 1; pointer-events: auto; position: relative; height: 100%; }
.clinic-map-info { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: #1a1a1c; border-bottom: 2px solid #813b8e; flex-shrink: 0; flex-wrap: wrap; }
.clinic-map-name { font-family:var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.clinic-map-addr { font-size: 12px; color: rgba(255,255,255,0.45); flex: 1; }
.clinic-map-dir { font-family:var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #813b8e; text-decoration: none; white-space: nowrap; transition: color 0.2s; flex-shrink: 0; }
.clinic-map-dir:hover { color: #2bbba7; }
.clinic-map iframe { flex: 1; min-height: 400px; filter: grayscale(20%); transition: filter 0.3s; }
.clinic-map iframe:hover { filter: grayscale(0%); }
@media (max-width: 1024px) { .dealers-inner { grid-template-columns: 1fr; } .dealers-form-side { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); } .dealers-map-side { min-height: 400px; } .clinic-map-active { height: 400px; } }
@media (max-width: 767px) { .dealer-result { padding: 14px; gap: 10px; } .dealer-name { font-size: 13px; } .dealers-map-side { min-height: 320px; } .clinic-map-active { height: 320px; } .clinic-map-info { padding: 10px 14px; } .clinic-map-addr { display: none; } .clinic-map iframe { min-height: 260px; } }

/* =============================================================
   DEALERS / BOOK A CONSULTATION
   ============================================================= */
#dealers { background: #ffffff; padding: 0; }
.bac-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 85vh; border-bottom: 1px solid rgba(0,0,0,.07); }
.bac-left { padding: 80px 64px 80px 72px; background: #ffffff; border-right: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; justify-content: center; }
.bac-eyebrow { font-family:var(--font-display); font-weight: 300; font-size: 11px; letter-spacing: 0.45em; text-transform: uppercase; color: #813b8e; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bac-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: #813b8e; }
.bac-title { font-family:var(--font-display); font-weight: 600; font-size: clamp(36px, 4.5vw, 40px); text-transform: uppercase; letter-spacing: -0.01em; color: #1a1a1c; line-height: 1.2; margin-bottom: 16px; }
.bac-intro {  font-size: 16px; line-height: 1.75; color: #606062; max-width: 460px; margin-bottom: 36px; }
.bac-form { display: flex; flex-direction: column; gap: 18px; }
.bac-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bac-field { display: flex; flex-direction: column; gap: 7px; }
.bac-field-full { width: 100%; }
.bac-label { font-family:var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #888; }
.bac-label span { color: #813b8e; }
.bac-input { width: 100%; height: 48px; padding: 0 16px; background: #f7f8fa; border: 1.5px solid rgba(0,0,0,.1); border-radius: 2px; font-size: 14px; color: #1a1a1c; outline: none; transition: border-color .2s, background .2s; appearance: none; -webkit-appearance: none; }
.bac-input::placeholder { color: #bbb; }
.bac-input:focus { border-color: #813b8e; background: #fff; box-shadow: 0 0 0 3px rgba(129,59,142,.07); }
.bac-tel-wrap { display: flex; align-items: stretch; border: 1.5px solid rgba(0,0,0,.1); border-radius: 2px; background: #f7f8fa; overflow: hidden; transition: border-color .2s; }
.bac-tel-wrap:focus-within { border-color: #813b8e; background: #fff; box-shadow: 0 0 0 3px rgba(129,59,142,.07); }
.bac-prefix { display: flex; align-items: center; padding: 0 12px; font-family:var(--font-display); font-weight: 600; font-size: 13px; color: #606062; border-right: 1px solid rgba(0,0,0,.1); background: rgba(0,0,0,.02); white-space: nowrap; flex-shrink: 0; }
.bac-input-tel { border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; flex: 1; }
.bac-select-wrap { position: relative; }
.bac-select { cursor: pointer; padding-right: 36px; }
.bac-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(90deg); font-size: 18px; color: #813b8e; pointer-events: none; line-height: 1; }
.bac-consent { margin-top: 2px; }
.bac-check-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.bac-checkbox { display: none; }
.bac-check-box { width: 18px; height: 18px; border: 1.5px solid rgba(0,0,0,.2); border-radius: 2px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; }
.bac-checkbox:checked + .bac-check-box { background: #813b8e; border-color: #813b8e; }
.bac-checkbox:checked + .bac-check-box::after { content: '✓'; font-size: 11px; color: #fff; font-weight: 700; }
.bac-check-label span:last-child { font-size: 12px; line-height: 1.55; color: #888; }
.bac-check-label a { color: #813b8e; text-decoration: underline; }
.bac-submit { width: 100%; height: 52px; background: #813b8e; color: #fff; font-family:var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; border: none; border-radius: 7px; cursor: pointer; transition: background .22s, transform .15s; margin-top: 4px; }
.bac-submit:hover { background: #6a2e75; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(129,59,142,.22); }
.bac-submit:active { transform: translateY(0); }
.bac-note { font-size: 11px; color: #aaa; text-align: center; letter-spacing: .03em; }
.bac-right { background: #fff; padding: 80px 56px 80px 64px; display: flex; flex-direction: column; justify-content: center; gap: 44px; }
.bac-steps-label { font-family:var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: #813b8e; }
.bac-steps { display: flex; flex-direction: column; gap: 0; }
.bac-step { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.bac-step:first-child { padding-top: 0; }
.bac-step:last-child  { border-bottom: none; }
.bac-step-num { font-family:var(--font-display); font-weight: 900; font-size: 28px; color: rgb(129 59 142); line-height: 1; flex-shrink: 0; width: 36px; padding-top: 2px; }
.bac-step-head { font-family:var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color:#2ebca9; margin-bottom: 4px; }
.bac-step-desc { font-size: 13px; line-height: 1.6; color: #606062; }
.bac-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); }
.bac-trust-item { background: rgba(255,255,255,.02); padding: 16px 14px; display: flex; align-items: center; gap: 10px; transition: background .2s; }
.bac-trust-item:hover { background: rgba(129,59,142,.08); }
.bac-trust-item svg { width: 18px; height: 18px; flex-shrink: 0; color: #813b8e; }
.bac-trust-item span { font-family:var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #606062; line-height: 1.3; }
.map-wrap { display: grid; grid-template-columns: 1fr 1.5fr; min-height: 580px; }
.map-left { padding: 72px 48px 72px 72px; background: #f7f8fa; border-right: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; justify-content: center; }
.map-title { font-family:var(--font-display); font-weight: 900; font-size: clamp(28px, 3.5vw, 44px); text-transform: uppercase; letter-spacing: -0.01em; color: #1a1a1c; line-height: 0.92; margin-bottom: 12px; }
.clinic-list { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.clinic-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: #fff; border: 1.5px solid rgba(0,0,0,.08); border-radius: 2px; cursor: pointer; transition: all .22s; position: relative; }
.clinic-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #813b8e; border-radius: 2px 0 0 2px; transform: scaleY(0); transition: transform .25s ease; }
.clinic-card:hover { border-color: rgba(129,59,142,.2); box-shadow: 0 4px 16px rgba(129,59,142,.08); }
.clinic-card:hover::before { transform: scaleY(1); }
.clinic-card-active { background: #fff !important; border-color: #813b8e !important; box-shadow: 0 4px 20px rgba(129,59,142,.12) !important; }
.clinic-card-active::before { transform: scaleY(1) !important; }
.clinic-dot { width: 10px; height: 10px; border-radius: 50%; background: #2bbba7; flex-shrink: 0; margin-top: 5px; animation: clinicPulse 2s ease-in-out infinite; }
@keyframes clinicPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(43,187,167,.4); } 50% { box-shadow: 0 0 0 6px rgba(43,187,167,0); } }
.clinic-card-active .clinic-dot { background: #813b8e; animation: none; }
.clinic-info { flex: 1; }
.clinic-name { font-family:var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #1a1a1c; margin-bottom: 3px; }
.clinic-addr { font-size: 12px; color: #888; line-height: 1.5; margin-bottom: 8px; }
.clinic-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.clinic-tag { font-family:var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; background: rgba(0,0,0,.05); color: #888; }
.clinic-tag-free { background: rgba(43,187,167,.1); color: #2bbba7; }
.clinic-dist { font-family:var(--font-display); font-weight: 600; font-size: 12px; color: #813b8e; flex-shrink: 0; white-space: nowrap; align-self: center; }
.map-right { position: relative; min-height: 580px; }
.clinic-map { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.clinic-map-active { opacity: 1; pointer-events: auto; position: relative; height: 100%; }
.clinic-map-bar { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: #1a1a1c; border-bottom: 2px solid #813b8e; flex-shrink: 0; flex-wrap: wrap; }
.clinic-map-bar-name { font-family:var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.clinic-map-bar-addr { font-size: 12px; color: rgba(255,255,255,.4); flex: 1; }
.clinic-map-dir { font-family:var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #813b8e; text-decoration: none; white-space: nowrap; transition: color .2s; flex-shrink: 0; }
.clinic-map-dir:hover { color: #2bbba7; }
.clinic-map iframe { flex: 1; min-height: 460px; filter: grayscale(15%); transition: filter .3s; }
.clinic-map iframe:hover { filter: grayscale(0%); }
@media (max-width: 1024px) { .bac-wrap { grid-template-columns: 1fr; min-height: unset; } .bac-left { padding: 64px 40px; border-right: none; border-bottom: 1px solid rgba(0,0,0,.07); } .bac-right { padding: 56px 40px; } .map-wrap { grid-template-columns: 1fr; } .map-left { padding: 56px 40px; border-right: none; border-bottom: 1px solid rgba(0,0,0,.07); } .map-right { min-height: 460px; } .clinic-map-active { height: 460px; } .clinic-map iframe { min-height: 380px; } }
@media (max-width: 767px) { .bac-left { padding: 52px 20px; } .bac-right { padding: 48px 20px; gap: 32px; } .bac-row { grid-template-columns: 1fr; gap: 16px; } .bac-trust { grid-template-columns: 1fr; } .map-left { padding: 48px 20px; } .map-right { min-height: 380px; } .clinic-map-active { height: 380px; } .clinic-map-bar-addr { display: none; } .clinic-map iframe { min-height: 300px; } }
@media (max-width: 480px) { .bac-left { padding: 44px 16px; } .bac-right { padding: 40px 16px; } .map-left { padding: 40px 16px; } .clinic-card { padding: 14px; gap: 10px; } .clinic-name { font-size: 13px; } }

/* ══ QUIZ CSS ══ */
:root { --sq-purple: #813b8e; --sq-purple-dark: #6a2e75; --sq-teal: #2bbba7; --sq-text: #1a1a1c; --sq-muted: #606062; --sq-border: rgba(0,0,0,.09); }
.sq-wrap { background: #fff; 
/*min-height: 100vh; */
min-height: 58vh; 
display: flex; flex-direction: column; }
.sq-topbar { position: sticky; top: 68px; z-index: 100; background: #fff; border-bottom: 1px solid var(--sq-border); display: flex; align-items: center; gap: 20px; padding: 0 72px; height: 56px; }
.sq-brand { display: flex; align-items: center; gap: 8px; font-family:var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sq-text); white-space: nowrap; flex-shrink: 0; }
.sq-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sq-purple); flex-shrink: 0; }
.sq-progress-track { flex: 1; height: 4px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; }
.sq-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg,var(--sq-purple),var(--sq-teal)); border-radius: 4px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.sq-step-count { font-family:var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #888; white-space: nowrap; flex-shrink: 0; }
.sq-step { display: none; flex: 1; }
.sq-step.active { display: flex; animation: sqIn .38s ease both; }
@keyframes sqIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
.sq-step-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 64px 72px 80px; }
.sq-eyebrow { font-family:var(--font-display); font-weight: 300; font-size: 11px; letter-spacing: .45em; text-transform: uppercase; color: var(--sq-purple); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sq-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--sq-purple); display: block; }
.sq-headline { font-family:var(--font-display); font-weight: 900; font-size: clamp(34px,5vw,40px); text-transform: uppercase; letter-spacing: -.01em; color: var(--sq-text); line-height: .92; margin-bottom: 12px; }
.sq-sub { font-family: 'Crimson Pro',serif; font-size: 17px; line-height: 1.6; color: var(--sq-muted); margin-bottom: 40px; max-width: 520px; }
.sq-cards { display: grid; gap: 16px; margin-bottom: 40px; }
.sq-cards-3 { grid-template-columns: repeat(3,1fr); }
.sq-cards-4 { grid-template-columns: repeat(4,1fr); }
.sq-cards-journey { grid-template-columns: 1fr; gap: 12px; max-width: 640px; }
.sq-card { position: relative; background: #f7f8fa; border: 2px solid var(--sq-border); border-radius: 10px; cursor: pointer; transition: all .22s ease; overflow: hidden; }
.sq-card::after { content: ''; position: absolute; inset: -2px; border-radius: 10px; border: 2px solid var(--sq-purple); opacity: 0; transition: opacity .22s; pointer-events: none; }
.sq-card:hover { background: #fff; box-shadow: 0 6px 24px rgba(129,59,142,.1); transform: translateY(-3px); }
.sq-card.selected { background: rgba(129,59,142,.05); box-shadow: 0 6px 24px rgba(129,59,142,.14); transform: translateY(-3px); }
.sq-card.selected::after { opacity: 1; }
.sq-card-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--sq-purple); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.sq-card.selected .sq-card-check { opacity: 1; transform: scale(1); }
.sq-cards-3 .sq-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 20px 28px; text-align: center; gap: 12px; }
.sq-card-icon { width: 60px; height: 60px; color: var(--sq-purple); }
.sq-card-icon svg { width: 100%; height: 100%; }
.sq-card-label { font-family:var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: var(--sq-text); }
.sq-card-sub { font-size: 12px; color: var(--sq-muted); }
.sq-card-smile { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 14px; gap: 8px; text-align: center; }
.sq-card-smile .sq-card-label { font-size: 12px; }
.sq-smile-img { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.sq-smile-img svg { width: 100%; height: 100%; }
.sq-card-journey { display: flex; align-items: center; gap: 20px; padding: 22px 24px; }
.sq-journey-icon { width: 48px; height: 48px; flex-shrink: 0; color: var(--sq-purple); background: rgba(129,59,142,.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.sq-journey-icon svg { width: 26px; height: 26px; }
.sq-card-journey:hover .sq-journey-icon, .sq-card-journey.selected .sq-journey-icon { background: rgba(129,59,142,.16); }
.sq-journey-body { flex: 1; }
.sq-card-journey .sq-card-label { font-size: 15px; margin-bottom: 4px; }
.sq-card-journey .sq-card-sub { font-size: 13px; color: var(--sq-muted); line-height: 1.4; }
.sq-nav { display: flex; align-items: center; justify-content: space-between; }
.sq-btn-back { font-family:var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #888; background: none; border: none; border-bottom: 1px solid rgba(0,0,0,.15); padding: 2px 0; cursor: pointer; transition: color .2s, border-color .2s; }
.sq-btn-back:hover { color: var(--sq-purple); border-color: var(--sq-purple); }
.sq-btn-next { font-family:var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; padding: 14px 40px; background: var(--sq-purple); color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; }
.sq-btn-next:hover:not(.sq-disabled) { background: var(--sq-purple-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(129,59,142,.22); }
.sq-btn-next.sq-disabled { background: #ccc; cursor: not-allowed; opacity: .6; pointer-events: none; }
.sq-step-inner--form { padding-top: 52px; padding-bottom: 52px; }
.sq-form-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.sq-summary-title { font-family:var(--font-display); font-weight: 900; font-size: clamp(26px,3vw,38px); text-transform: uppercase; letter-spacing: -.01em; color: var(--sq-text); line-height: .92; margin: 12px 0 20px; }
.sq-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.sq-sum-chip { font-family:var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; background: rgba(129,59,142,.08); color: var(--sq-purple); border: 1px solid rgba(129,59,142,.2); }
.sq-summary-points { display: flex; flex-direction: column; gap: 10px; }
.sq-pt { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--sq-muted); }
.sq-pt span { color: var(--sq-teal); font-weight: 700; font-size: 16px; }
.sq-form-box { background: #f7f8fa; border: 1px solid var(--sq-border); border-radius: 8px; padding: 36px; }
.sq-form-title { font-family:var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--sq-text); margin-bottom: 24px; }
.sq-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.sq-form-field { display: flex; flex-direction: column; gap: 6px; }
.sq-label { font-family:var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #888; }
.sq-label span { color: var(--sq-purple); }
.sq-input { height: 46px; padding: 0 14px; background: #fff; border: 1.5px solid rgba(0,0,0,.1); border-radius: 4px; font-size: 14px; color: var(--sq-text); outline: none; transition: border-color .2s; width: 100%; }
.sq-input:focus { border-color: var(--sq-purple); box-shadow: 0 0 0 3px rgba(129,59,142,.07); }
.sq-input::placeholder { color: #bbb; }
.sq-tel-wrap { display: flex; align-items: stretch; border: 1.5px solid rgba(0,0,0,.1); border-radius: 4px; background: #fff; overflow: hidden; transition: border-color .2s; }
.sq-tel-wrap:focus-within { border-color: var(--sq-purple); box-shadow: 0 0 0 3px rgba(129,59,142,.07); }
.sq-prefix { padding: 0 12px; display: flex; align-items: center; font-family:var(--font-display); font-weight: 600; font-size: 13px; color: var(--sq-muted); border-right: 1px solid rgba(0,0,0,.1); background: rgba(0,0,0,.02); flex-shrink: 0; }
.sq-input-tel { border: none !important; box-shadow: none !important; flex: 1; }
.sq-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 16px 0; }
.sq-consent input { display: none; }
.sq-consent-box { width: 17px; height: 17px; border: 1.5px solid rgba(0,0,0,.2); border-radius: 3px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.sq-consent input:checked + .sq-consent-box { background: var(--sq-purple); border-color: var(--sq-purple); }
.sq-consent input:checked + .sq-consent-box::after { content: '✓'; color: #fff; font-size: 10px; font-weight: 700; }
.sq-consent span:last-child { font-size: 12px; color: #888; line-height: 1.55; }
.sq-consent a { color: var(--sq-purple); text-decoration: underline; }
.sq-form-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.sq-btn-submit { font-family:var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; padding: 14px 28px; background: var(--sq-purple); color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; }
.sq-btn-submit:hover { background: var(--sq-purple-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(129,59,142,.22); }
.sq-form-note { font-size: 11px; color: #aaa; text-align: center; margin-top: 12px; }
.sq-step-inner--result { padding: 72px 72px 80px; position: relative; overflow: hidden; }
.sq-result-glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 700px; height: 400px; background: radial-gradient(ellipse,rgba(129,59,142,.07) 0%,transparent 70%); pointer-events: none; }
.sq-result-header { text-align: center; margin-bottom: 52px; }
.sq-result-badge-pill { display: inline-block; background: rgba(43,187,167,.1); color: var(--sq-teal); font-family:var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; padding: 5px 18px; border-radius: 24px; border: 1px solid rgba(43,187,167,.3); margin-bottom: 16px; }
.sq-result-title { font-family:var(--font-display); font-weight: 900; font-size: clamp(36px,5vw,64px); text-transform: uppercase; letter-spacing: -.01em; color: var(--sq-text); line-height: .92; margin-bottom: 14px; }
.sq-result-title span { color: var(--sq-purple); }
.sq-result-tagline { font-family:var(--font-display); font-weight: 700; font-size: clamp(18px,2.5vw,26px); letter-spacing: .04em; color: var(--sq-text); margin-bottom: 10px; }
.sq-result-tagline sup { font-size: .55em; vertical-align: super; }
.sq-result-body { font-family: 'Crimson Pro',serif; font-size: 18px; line-height: 1.7; color: var(--sq-muted); max-width: 520px; margin: 0 auto 20px; }
.sq-result-answers { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sq-res-chip { font-family:var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 24px; background: rgba(129,59,142,.08); color: var(--sq-purple); border: 1px solid rgba(129,59,142,.2); }
.sq-result-gallery { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto 48px; }
.sq-gallery-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sq-img-placeholder { background: #f0f2f7; border: 2px dashed rgba(129,59,142,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; transition: border-color .2s, background .2s; }
.sq-img-placeholder:hover { border-color: var(--sq-purple); background: rgba(129,59,142,.04); }
.sq-img-main { aspect-ratio: 4/3; }
.sq-img-thumb { aspect-ratio: 1; }
.sq-img-ph-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; font-family:var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(129,59,142,.45); }
.sq-img-ph-inner svg { width: 32px; height: 32px; color: rgba(129,59,142,.35); }
.sq-img-main .sq-img-ph-inner svg { width: 48px; height: 48px; }
.sq-result-steps { display: flex; justify-content: center; max-width: 560px; margin: 0 auto; border: 1px solid var(--sq-border); border-radius: 8px; overflow: hidden; }
.sq-rs { flex: 1; padding: 20px 16px; text-align: center; font-size: 13px; color: var(--sq-muted); border-right: 1px solid var(--sq-border); display: flex; flex-direction: column; gap: 6px; }
.sq-rs:last-child { border-right: none; }
.sq-rs span { font-family:var(--font-display); font-weight: 900; font-size: 22px; color: var(--sq-purple); display: block; }
@media (max-width:1024px) { .sq-topbar { padding: 0 36px; } .sq-step-inner { padding: 48px 36px 64px; } .sq-cards-4 { grid-template-columns: repeat(2,1fr); } .sq-form-layout { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width:767px) { .sq-topbar { padding: 0 20px; } .sq-brand { display: none; } .sq-step-inner { padding: 36px 20px 52px; } .sq-cards-3 { grid-template-columns: 1fr; } .sq-form-row { grid-template-columns: 1fr; } .sq-step-inner--result { padding: 48px 20px 60px; } .sq-result-gallery { grid-template-columns: 1fr; } .sq-gallery-thumbs { grid-template-columns: repeat(4,1fr); gap: 8px; } .sq-result-steps { flex-direction: column; } .sq-rs { border-right: none; border-bottom: 1px solid var(--sq-border); } .sq-rs:last-child { border-bottom: none; } .sq-form-box { padding: 24px 16px; } }
@media (max-width:480px) { .sq-cards-4 { grid-template-columns: repeat(2,1fr); gap: 8px; } .sq-gallery-thumbs { grid-template-columns: repeat(2,1fr); } }

/* ══ HOW IT WORKS ══ */
#colorways { background: #ffffff; padding: 72px 72px 72px; overflow: hidden; }
#colorways .cw-header { margin-bottom: 40px; }
#colorways .cw-eyebrow { font-family:var(--font-display); font-weight: 300; font-size: 11px; letter-spacing: .45em; text-transform: uppercase; color: #813b8e; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#colorways .cw-eyebrow::before { content: ''; width: 32px; height: 1px; background: #813b8e; }
#colorways .cw-title { font-family:var(--font-display); font-weight: 900; font-size: clamp(36px,5vw,60px); text-transform: uppercase; letter-spacing: -.01em; color: #813b8e; line-height: .92; margin-bottom: 10px; }
#colorways .cw-sub {  font-size: 17px; line-height: 1.65; color: #606062; max-width: 480px; }
#colorways .row { align-items: stretch; }
.cw-video-wrap { position: relative; overflow: hidden; background: none; height: 100%; min-height: 420px; }
.hiw-vid { width: 100%; height: 100%; display: block; object-fit: cover; }
.hiw-mute-btn { position: absolute; bottom: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(129,59,142,.75); border: 1px solid rgba(255,255,255,.3); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; z-index: 5; }
.hiw-mute-btn:hover { background: #813b8e; }
.hiw-mute-btn svg { width: 14px; height: 14px; }
#colorways .cw-controls { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
#colorways .cw-active-info { margin-bottom: 20px; }
#colorways .cw-active-name {  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 26px);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: #813b8e;
  line-height: 1.1;
  margin-bottom: 10px;
  transition: opacity .25s;}
#colorways .cw-active-desc {  font-size: 16px;
  line-height: 1.7;
  color: #606062;
  min-height: 52px;
  transition: opacity .25s;}
#colorways .cw-slider-label { font-family:var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #2bbba7; margin-bottom: 12px; }
#colorways .cw-slider-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
#colorways .cw-thumbs-viewport { flex: 1; overflow: hidden; }
#colorways .cw-thumbs-track {
  display: flex;
  gap: 12px;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
#colorways .cw-thumb {  flex: 0 0 160px;
  background: #f7f8fa;
  border: 2px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 20px 12px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all .22s ease;
  min-height: 110px;
  justify-content: flex-start;}
#colorways .cw-thumb:hover { background: #fff;
  border-color: rgba(129,59,142,.25);
  box-shadow: 0 4px 14px rgba(129,59,142,.1);
  transform: none; /* removed translateY(-2px) */
}
#colorways .cw-thumb.active {background: rgba(129,59,142,.06);
  border-color: #813b8e;
  box-shadow: 0 0 0 3px rgba(129,59,142,.12);
  transform: none; /* removed translateY(-2px) */}
  /* Add top accent line on active instead of moving box up */
#colorways .cw-thumb.active::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #813b8e, #2bbba7);
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: 0;
  left: 0;
}
/* Make thumb position:relative so ::before works */
#colorways .cw-thumb {
  position: relative;
  overflow: hidden;
  flex: 0 0 160px;
  background: #f7f8fa;
  border: 2px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 20px 12px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all .22s ease;
  min-height: 110px;
  justify-content: flex-start;
}
.cw-thumb-num { font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: #813b8e;
  line-height: 1;
  flex-shrink: 0; }
#colorways .cw-thumb-label { font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #2bbba7;
  line-height: 1.35; }
#colorways .cw-slider-btn { width: 30px; height: 30px; border-radius: 50%; background: #f7f8fa; border: 1.5px solid rgba(0,0,0,.1); color: #606062; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .2s; font-family:var(--font-display); }
#colorways .cw-slider-btn:hover { background: rgba(129,59,142,.1); border-color: #813b8e; color: #813b8e; }
#colorways .cw-slider-btn:disabled { opacity: .3; cursor: not-allowed; }
#colorways .cw-dots { display: flex; gap: 6px; align-items: center; }
#colorways .cw-dot { width: 8px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.12); cursor: pointer; transition: all .3s; }
#colorways .cw-dot.active { width: 24px; background: #813b8e; }
@media (max-width: 1024px) { #colorways { padding: 56px 36px 0; } #colorways .cw-controls { padding: 32px 28px; } }
@media (max-width: 767px) { #colorways { padding: 48px 20px 0; } .cw-video-wrap { min-height: 260px; height: 260px; } #colorways .cw-controls { padding: 28px 0; } #colorways .cw-thumb { flex: 0 0 72px; min-height: 64px; } .cw-thumb-num { font-size: 16px; } #colorways .cw-thumb-label { font-size: 8px; } #colorways .cw-active-name { font-size: clamp(18px,5vw,18px); } }
@media (max-width: 480px) { #colorways { padding: 40px 16px 0; } #colorways .cw-thumb { flex: 0 0 62px; min-height: 60px; } .cw-thumb-num { font-size: 14px; } }

/* ═══ HELP PAGE (hlp-*) ═══ */
.hlp-hero { position: relative; padding: 148px 72px 0; background: #ffffff; overflow: hidden; min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.hlp-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 85% 30%, rgba(129,59,142,.07) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 5% 80%, rgba(43,187,167,.05) 0%, transparent 55%), #ffffff; pointer-events: none; }
.hlp-hero-inner { position: relative; z-index: 2; max-width: 720px; }
.hlp-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--re-red); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.hlp-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--re-red); }
.hlp-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 10vw, 60px); text-transform: uppercase; letter-spacing: -.03em; line-height: .85; color: var(--re-white); margin-bottom: 28px; }
.hlp-h1 em { font-style: normal; color: var(--re-red); -webkit-text-stroke: 0; }
.hlp-hero-desc { font-family: var(--font-editorial); font-size: 18px; line-height: 1.7; color: var(--re-smoke); max-width: 520px; margin-bottom: 36px; }
.hlp-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.hlp-pill { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: 7px 16px; border-radius: 24px; border: 1.5px solid rgba(129,59,142,.2); color: var(--re-red); background: rgba(129,59,142,.05); transition: background .2s, border-color .2s; }
.hlp-pill:hover { background: rgba(129,59,142,.1); border-color: var(--re-red); }
.hlp-hero-wave { position: relative; height: 60px; margin-top: 64px; }
.hlp-hero-wave svg { display: block; width: 100%; height: 100%; }
.hlp-strip { display: grid; grid-template-columns: repeat(4,1fr); background: var(--re-dark); border-top: 1px solid rgba(0,0,0,.07); border-bottom: 1px solid rgba(0,0,0,.07); }
.hlp-strip-item { padding: 28px 36px; border-right: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; gap: 4px; }
.hlp-strip-item:last-child { border-right: none; }
.hlp-strip-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px,3vw,38px); color: var(--re-red); line-height: 1; }
.hlp-strip-lbl { font-family: var(--font-display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #888; }
.hlp-topics { padding: 0 72px 100px; background: #ffffff; }
.hlp-topics-header { padding: 72px 0 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; border-bottom: 1px solid rgba(0,0,0,.08); margin-bottom: 0; }
.hlp-topics-header h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px,4vw,48px); text-transform: uppercase; letter-spacing: -.01em; color: var(--re-white); line-height: .9; }
.hlp-topics-header h2 span { color: var(--re-red); }
.hlp-topics-header p { font-family: var(--font-editorial); font-size: 15px; line-height: 1.65; color: var(--re-smoke); max-width: 300px; text-align: right; }
.hlp-card { display: grid; grid-template-columns: 64px 1fr auto; border-bottom: 1px solid rgba(0,0,0,.08); position: relative; overflow: hidden; background: #ffffff; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease, background .25s; }
.hlp-card.hlp-visible { opacity: 1; transform: translateY(0); }
.hlp-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--re-red), #2bbba7); transform: scaleY(0); transform-origin: top; transition: transform .35s ease; }
.hlp-card:hover { background: #faf8fc; }
.hlp-card:hover::before { transform: scaleY(1); }
.hlp-card-num { padding: 40px 0; display: flex; align-items: flex-start; justify-content: center; border-right: 1px solid rgba(0,0,0,.06); }
.hlp-card-num span { font-family: var(--font-display); font-weight: 900; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(0,0,0,.18); writing-mode: vertical-rl; }
.hlp-card-body { padding: 36px 48px; }
.hlp-tag { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: #2bbba7; margin-bottom: 12px; }
.hlp-card-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px,2.2vw,28px); text-transform: uppercase; letter-spacing: -.01em; color: var(--re-white); line-height: 1; margin-bottom: 20px; }
.hlp-card-title em { font-style: normal; color: var(--re-red); }
.hlp-card-paras { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.hlp-card-paras p { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--re-smoke); }
.hlp-inline-cta { display: none; margin-top: 20px; padding-bottom: 32px; }
.hlp-inline-cta a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 10px 20px; border: 1.5px solid rgba(129,59,142,.4); color: var(--re-red); background: rgba(129,59,142,.06); border-radius: 4px; transition: all .2s; }
.hlp-inline-cta a:hover { background: var(--re-red); color: #fff; border-color: var(--re-red); }
.hlp-card-cta-wrap { padding: 40px 36px 40px 0; display: flex; align-items: center; justify-content: flex-end; min-width: 210px; }
.hlp-cta-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 12px 22px; border: 1.5px solid rgba(129,59,142,.35); color: var(--re-red); background: rgba(129,59,142,.06); border-radius: 4px; white-space: nowrap; transition: all .22s; }
.hlp-cta-btn:hover { background: var(--re-red); color: #fff; border-color: var(--re-red); transform: translateY(-1px); }
.hlp-cta-btn svg { width: 12px; height: 12px; }
.hlp-banner { position: relative; padding: 96px 72px; background: linear-gradient(135deg, var(--re-red) 0%, #6a2e75 50%, #4a1e55 100%); overflow: hidden; text-align: center; }
.hlp-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,255,255,.06) 0%, transparent 65%); pointer-events: none; }
.hlp-banner::after { content: 'SMYLEXA'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--font-display); font-weight: 900; font-size: clamp(80px,15vw,220px); color: rgba(255,255,255,.04); letter-spacing: -.04em; white-space: nowrap; pointer-events: none; }
.hlp-banner-inner { position: relative; z-index: 2; }
.hlp-banner-tag { font-family: var(--font-display); font-size: 11px; font-weight: 300; letter-spacing: .45em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.hlp-banner-h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(38px,6vw,54px); text-transform: uppercase; letter-spacing: -.02em; color: #fff; line-height: .88; margin-bottom: 18px; }
.hlp-banner-sub { font-family: var(--font-editorial); font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.65); max-width: 480px; margin: 0 auto 36px; }
.hlp-banner-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; padding: 15px 44px; background: #fff; color: var(--re-red); border-radius: 4px; border: none; cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.hlp-banner-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.2); color: var(--re-red); }
@media (max-width: 1100px) { .hlp-hero, .hlp-topics, .hlp-banner { padding-left: 36px; padding-right: 36px; } .hlp-strip-item { padding: 24px 28px; } .hlp-card-body { padding: 32px 32px; } .hlp-card-cta-wrap { padding: 32px 20px 32px 0; min-width: 180px; } }
@media (max-width: 900px) { .hlp-card { grid-template-columns: 52px 1fr; } .hlp-card-cta-wrap { display: none; } .hlp-inline-cta { display: block; } .hlp-topics-header { flex-direction: column; align-items: flex-start; gap: 10px; } .hlp-topics-header p { text-align: left; max-width: 100%; } .hlp-strip { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px) { .hlp-hero { padding: 110px 20px 0; min-height: auto; } .hlp-topics { padding: 0 20px 72px; } .hlp-banner { padding: 64px 20px; } .hlp-topics-header { padding-top: 52px; padding-bottom: 36px; } .hlp-card-body { padding: 24px 18px; } .hlp-card-num { padding: 24px 0; } .hlp-h1 { font-size: clamp(52px,14vw,80px); } }
@media (max-width: 480px) { .hlp-strip { grid-template-columns: 1fr 1fr; } .hlp-strip-item { padding: 18px; } .hlp-h1 { font-size: clamp(44px,14vw,68px); } .hlp-card-title { font-size: clamp(17px,5vw,22px); } }

/* ═══ ABOUT + BRAND STORY + SMYLEXA FOOTER ═══ */
.abt-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--re-red); display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.abt-eyebrow::before { content:''; width:28px; height:1px; background:var(--re-red); }
.abt-btn-primary { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; padding:13px 32px; background:var(--re-red); color:#fff; border-radius:4px; border:none; cursor:pointer; text-decoration:none; transition:background .2s,transform .15s,box-shadow .2s; }
.abt-btn-primary:hover { background:#6a2e75; transform:translateY(-2px); box-shadow:0 8px 24px rgba(129,59,142,.25); color:#fff; }
.abt-btn-outline { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; padding:12px 30px; background:transparent; color:var(--re-red); border:1.5px solid var(--re-red); border-radius:4px; cursor:pointer; text-decoration:none; transition:background .2s,color .2s; }
.abt-btn-outline:hover { background:var(--re-red); color:#fff; }
.abt-hero { padding:130px 72px 80px; background:#fff; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; min-height:85vh; }
.abt-hero-bg { position:absolute; inset:0; background: radial-gradient(ellipse 50% 60% at 80% 40%,rgba(129,59,142,.07) 0%,transparent 55%), radial-gradient(ellipse 35% 45% at 5% 75%,rgba(43,187,167,.05) 0%,transparent 50%), #fff; pointer-events:none; }
.abt-hero-content { position:relative; z-index:2; }
.abt-hero-h1 { font-family:var(--font-display); font-weight:900; font-size:clamp(52px,7vw,90px); text-transform:uppercase; letter-spacing:-.02em; color:var(--re-white); line-height:.88; margin-bottom:22px; }
.abt-hero-h1 em { font-style:normal; color:var(--re-red); }
.abt-hero-sub { font-family:var(--font-editorial); font-size:18px; line-height:1.75; color:var(--re-smoke); max-width:460px; margin-bottom:36px; }
.abt-hero-ctas { display:flex; gap:14px; flex-wrap:wrap; }
.abt-hero-visual { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }
.abt-hero-visual svg { width:min(360px,90%); opacity:.65; }
.abt-mission-strip { display:grid; grid-template-columns:repeat(3,1fr); background:var(--re-dark); border-top:1px solid var(--re-border); border-bottom:1px solid var(--re-border); }
.abt-mission-item { padding:36px 40px; border-right:1px solid var(--re-border); display:flex; flex-direction:column; gap:10px; }
.abt-mission-item:last-child { border-right:none; }
.abt-mission-icon { width:32px; height:32px; color:var(--re-red); }
.abt-mission-icon svg { width:100%; height:100%; }
.abt-mission-word { font-family:var(--font-display); font-weight:900; font-size:clamp(22px,3vw,34px); text-transform:uppercase; letter-spacing:-.01em; color:var(--re-white); line-height:1; }
.abt-content { background:#fff; }
.abt-block { border-bottom:1px solid var(--re-border); }
.abt-block-alt { background:var(--re-dark); }
.abt-block-split { display:grid; grid-template-columns:240px 1fr; gap:0; padding:64px 72px; align-items:start; }
.abt-block-label { padding-right:40px; padding-top:6px; border-right:1px solid var(--re-border); }
.abt-block-text { padding-left:56px; display:flex; flex-direction:column; gap:20px; }
.abt-block-text p { font-family:var(--font-editorial); font-size:18px; line-height:1.85; color:var(--re-smoke); }
.abt-section-h2 { font-family:var(--font-display); font-weight:900; font-size:clamp(36px,5vw,56px); text-transform:uppercase; letter-spacing:-.01em; color:var(--re-white); line-height:.92; margin-bottom:22px; }
.abt-body-text { font-family:var(--font-editorial); font-size:17px; line-height:1.75; color:var(--re-smoke); margin-bottom:14px; }
.abt-closing-quote { padding:96px 72px; background:#fff; text-align:center; }
.abt-closing-quote-inner { max-width:680px; margin:0 auto; }
.abt-closing-line { width:48px; height:2px; background:var(--re-red); margin:0 auto 40px; }
.abt-closing-p { font-family:var(--font-editorial); font-style:italic; font-size:clamp(20px,3vw,30px); line-height:1.6; color:var(--re-white); margin-bottom:28px; }
.abt-closing-brand { font-family:var(--font-display); font-weight:900; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--re-red); }
.abt-banner { padding:96px 72px; text-align:center; background:linear-gradient(135deg,var(--re-red) 0%,#6a2e75 60%,#4a1e55 100%); position:relative; overflow:hidden; }
.abt-banner::after { content:'SMYLEXA'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-display); font-weight:900; font-size:clamp(80px,15vw,200px); color:rgba(255,255,255,.04); letter-spacing:-.04em; white-space:nowrap; pointer-events:none; }
.abt-banner-inner { position:relative; z-index:2; }
.abt-banner-h2 { font-family:var(--font-display); font-weight:900; font-size:clamp(36px,6vw,72px); text-transform:uppercase; letter-spacing:-.02em; color:#fff; line-height:.88; margin-bottom:36px; }
.abt-banner-btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.2em; text-transform:uppercase; padding:15px 44px; background:#fff; color:var(--re-red); border-radius:4px; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.abt-banner-btn:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,0,0,.2); color:var(--re-red); }
.abt-who { padding:96px 72px; display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center; background:#fff; }
.abt-who-stats { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--re-border); border:1px solid var(--re-border); }
.abt-stat-card { background:#fff; padding:32px 28px; display:flex; flex-direction:column; gap:6px; transition:background .2s; }
.abt-stat-card:hover { background:var(--re-dark); }
.abt-stat-num { font-family:var(--font-display); font-weight:900; font-size:clamp(32px,4vw,48px); color:var(--re-red); line-height:1; }
.abt-stat-num sup { font-size:.5em; color:#2bbba7; vertical-align:super; }
.abt-stat-lbl { font-family:var(--font-display); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#888; }
.abt-for { display:grid; grid-template-columns:1fr auto 1fr; padding:80px 72px; background:var(--re-dark); border-top:1px solid var(--re-border); border-bottom:1px solid var(--re-border); }
.abt-for-card { padding:48px 56px; }
.abt-for-tag { display:inline-block; font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#2bbba7; background:rgba(43,187,167,.1); border:1px solid rgba(43,187,167,.25); padding:4px 12px; border-radius:20px; margin-bottom:18px; }
.abt-for-h3 { font-family:var(--font-display); font-weight:900; font-size:clamp(28px,3.5vw,42px); text-transform:uppercase; letter-spacing:-.01em; color:var(--re-white); line-height:.92; margin-bottom:16px; }
.abt-for-body { font-family:var(--font-editorial); font-size:16px; line-height:1.7; color:var(--re-smoke); margin-bottom:24px; }
.abt-for-list { list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:10px; }
.abt-for-list li { font-size:14px; color:var(--re-smoke); display:flex; align-items:center; gap:10px; }
.abt-for-list li::before { content:'✓'; color:var(--re-red); font-weight:700; font-size:13px; flex-shrink:0; }
.abt-for-divider { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:0 24px; }
.abt-for-divider svg { height:80px; width:2px; }
.abt-for-or { font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#aaa; }
.abt-link-arrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--re-red); text-decoration:none; border-bottom:1px solid var(--re-red); padding-bottom:1px; margin-top:8px; transition:gap .2s; }
.abt-link-arrow:hover { gap:14px; color:var(--re-red); }
.abt-purpose { padding:96px 72px; text-align:center; background:#fff; }
.abt-purpose-inner { max-width:680px; margin:0 auto; }
.abt-purpose-line { width:48px; height:2px; background:var(--re-red); margin:0 auto 36px; }
.abt-purpose-quote { font-family:var(--font-editorial); font-style:italic; font-size:clamp(20px,3vw,30px); line-height:1.55; color:var(--re-white); margin-bottom:28px; }
.abt-purpose-quote em { font-style:normal; color:var(--re-red); }
.abt-purpose-brand { font-family:var(--font-display); font-weight:900; font-size:18px; letter-spacing:.12em; text-transform:uppercase; color:var(--re-white); margin-bottom:6px; }
.abt-purpose-sub { font-family:var(--font-display); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:#888; }
@media (max-width:1024px) { .abt-hero,.abt-who,.abt-for,.abt-purpose,.abt-banner { padding-left:36px; padding-right:36px; } .abt-block-split { padding:56px 36px; } .abt-closing-quote { padding:72px 36px; } .abt-mission-item { padding:28px; } }
@media (max-width:900px) { .abt-hero { grid-template-columns:1fr; min-height:auto; } .abt-hero-visual { display:none; } .abt-who { grid-template-columns:1fr; gap:48px; } .abt-for { grid-template-columns:1fr; } .abt-for-divider { flex-direction:row; padding:8px 0; } .abt-for-divider svg { height:2px; width:80px; } .abt-mission-strip { grid-template-columns:1fr; } .abt-mission-item { border-right:none; border-bottom:1px solid var(--re-border); } .abt-mission-item:last-child { border-bottom:none; } .abt-block-split { grid-template-columns:1fr; gap:0; padding:48px 36px; } .abt-block-label { border-right:none; border-bottom:none; padding-right:0; padding-bottom:0; } .abt-block-text { padding-left:0; padding-top:20px; } }
@media (max-width:767px) { .abt-hero { padding:110px 20px 52px; } .abt-block-split { padding:40px 20px; } .abt-closing-quote { padding:56px 20px; } .abt-banner { padding:64px 20px; } .abt-mission-item { padding:22px 20px; } .abt-block-text p { font-size:16px; } .abt-who-stats { grid-template-columns:1fr 1fr; } .abt-for-card { padding:32px 0; } }
@media (max-width:480px) { .abt-hero-h1 { font-size:clamp(44px,13vw,68px); } .abt-who-stats { grid-template-columns:1fr; } }

/* ═══ BRAND STORY (brs-*) ═══ */
.brs-fade { opacity:0; transform:translateY(36px); transition:opacity .75s ease,transform .75s ease; }
.brs-fade.brs-in { opacity:1; transform:translateY(0); }
.brs-hero { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 72px 80px; overflow:hidden; }
.brs-hero-img-wrap { position:absolute; inset:0; z-index:0; background:linear-gradient(135deg,#1a0a1e 0%,#2d1040 40%,#0a2a28 100%); }
.brs-hero-img-gradient { position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 70% 30%,rgba(129,59,142,.4) 0%,transparent 60%), radial-gradient(ellipse 50% 40% at 20% 70%,rgba(43,187,167,.2) 0%,transparent 50%); }
.brs-hero-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.2) 60%,transparent 100%); }
.brs-hero-inner { position:relative; z-index:2; max-width:900px; }
.brs-hero-kicker { font-family:var(--font-display); font-weight:300; font-size:11px; letter-spacing:.45em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.brs-hero-kicker::before { content:''; width:32px; height:1px; background:rgba(255,255,255,.4); }
.brs-hero-h1 { font-family:var(--font-display); font-weight:900; font-size:clamp(56px,10vw,130px); text-transform:uppercase; letter-spacing:-.03em; color:#fff; line-height:.85; margin-bottom:24px; }
.brs-hero-h1 em { font-style:normal; color:#a855c8; }
.brs-hero-intro { font-family:var(--font-editorial); font-style:italic; font-size:clamp(16px,2vw,22px); line-height:1.6; color:rgba(255,255,255,.65); max-width:520px; }
.brs-hero-scroll-hint { position:absolute; bottom:32px; right:64px; z-index:2; font-family:var(--font-display); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.35); animation:brsScroll 2s ease-in-out infinite; }
@keyframes brsScroll { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
.brs-img-ph { width:100%; height:100%; min-height:340px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.brs-img-ph--warm { background:linear-gradient(135deg,#f5ede8 0%,#eeddd6 100%); }
.brs-img-ph--cool { background:linear-gradient(135deg,#e8eef5 0%,#d6e4ee 100%); }
.brs-img-ph--purple { background:linear-gradient(135deg,#f0e8f5 0%,#e4d3ef 100%); }
.brs-img-ph--teal { background:linear-gradient(135deg,#e8f5f3 0%,#d0efea 100%); }
.brs-img-ph--box { background:linear-gradient(135deg,#2a0e38 0%,#4a1e60 100%); }
.brs-img-ph-label { font-family:var(--font-display); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(0,0,0,.25); position:absolute; bottom:16px; left:0; right:0; text-align:center; }
.brs-img-ph--box .brs-img-ph-label { color:rgba(255,255,255,.3); }
.brs-chap-num { font-family:var(--font-display); font-weight:900; font-size:11px; letter-spacing:.35em; text-transform:uppercase; color:var(--re-red); margin-bottom:12px; }
.brs-chap-num-light { color:rgba(255,255,255,.4); }
.brs-chapter-h2 { font-family:var(--font-display); font-weight:900; font-size:clamp(32px,4vw,52px); text-transform:uppercase; letter-spacing:-.01em; color:var(--re-white); line-height:.9; margin-bottom:24px; }
.brs-split { display:grid; grid-template-columns:1fr 1fr; min-height:520px; border-bottom:1px solid var(--re-border); }
.brs-split-reverse { direction:rtl; }
.brs-split-reverse > * { direction:ltr; }
.brs-split-img { overflow:hidden; }
.brs-split-img .brs-img-ph { min-height:100%; height:100%; }
.brs-split-text { padding:72px 64px; display:flex; flex-direction:column; justify-content:center; background:#fff; }
.brs-split-text p { font-family:var(--font-editorial); font-size:17px; line-height:1.8; color:var(--re-smoke); margin-bottom:14px; }
.brs-split-text p:last-child { margin-bottom:0; }
.brs-split-text strong { color:var(--re-white); font-weight:600; }
.brs-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.brs-badge { font-family:var(--font-display); font-weight:600; font-size:10px; letter-spacing:.15em; text-transform:uppercase; padding:6px 14px; border-radius:20px; border:1.5px solid rgba(129,59,142,.25); color:var(--re-red); background:rgba(129,59,142,.06); }
.brs-two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.brs-mini-card { background:var(--re-dark); border-radius:8px; padding:20px 16px; border:1px solid var(--re-border); transition:border-color .2s; }
.brs-mini-card:hover { border-color:rgba(129,59,142,.3); }
.brs-mini-icon { width:28px; height:28px; color:var(--re-red); margin-bottom:10px; }
.brs-mini-icon svg { width:100%; height:100%; }
.brs-mini-title { font-family:var(--font-display); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--re-white); margin-bottom:4px; }
.brs-mini-desc { font-size:12px; color:var(--re-smoke); line-height:1.4; }
.brs-fullquote { padding:80px 72px; background:var(--re-red); text-align:center; position:relative; overflow:hidden; }
.brs-fullquote::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(255,255,255,.08) 0%,transparent 65%); pointer-events:none; }
.brs-fullquote-inner { position:relative; z-index:2; max-width:720px; margin:0 auto; }
.brs-fullquote-mark { font-family:var(--font-editorial); font-size:120px; color:rgba(255,255,255,.15); line-height:.6; margin-bottom:8px; font-style:italic; }
.brs-fullquote p { font-family:var(--font-editorial); font-style:italic; font-size:clamp(20px,3.5vw,34px); line-height:1.5; color:#fff; }
.brs-fullquote em { font-style:normal; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:4px; }
.brs-trio { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:0; height:360px; border-bottom:1px solid var(--re-border); }
.brs-trio-img { overflow:hidden; position:relative; }
.brs-trio-img .brs-img-ph { height:100%; min-height:unset; transition:transform .4s ease; }
.brs-trio-img:hover .brs-img-ph { transform:scale(1.04); }
.brs-purpose-band { padding:100px 72px; text-align:center; background:linear-gradient(135deg,#1a0a1e 0%,#2d1040 60%,#0d1f1c 100%); position:relative; overflow:hidden; }
.brs-purpose-band-img { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(129,59,142,.25) 0%,transparent 65%); }
.brs-purpose-band > .brs-chap-num { position:relative; z-index:2; }
.brs-purpose-band-h2 { font-family:var(--font-display); font-weight:900; font-size:clamp(40px,7vw,90px); text-transform:uppercase; letter-spacing:-.02em; color:#fff; line-height:.85; margin-bottom:24px; position:relative; z-index:2; }
.brs-purpose-band-body { font-family:var(--font-editorial); font-size:20px; line-height:1.65; color:rgba(255,255,255,.6); position:relative; z-index:2; margin-bottom:16px; }
.brs-purpose-band-quote { font-family:var(--font-editorial); font-style:italic; font-size:clamp(26px,4vw,48px); color:#c084e0; line-height:1.3; max-width:640px; margin:0 auto; position:relative; z-index:2; }
.brs-box-section { display:grid; grid-template-columns:1fr 1fr; min-height:520px; border-bottom:1px solid var(--re-border); }
.brs-box-left { position:relative; overflow:hidden; }
.brs-box-right { padding:72px 64px; display:flex; flex-direction:column; justify-content:center; background:#fff; }
.brs-box-p { font-family:var(--font-editorial); font-size:17px; line-height:1.75; color:var(--re-smoke); margin-bottom:12px; }
.brs-box-quote { font-family:var(--font-editorial); font-style:italic; font-size:clamp(20px,2.8vw,28px); line-height:1.4; color:var(--re-red); border-left:3px solid var(--re-red); padding-left:20px; margin:18px 0; }
.brs-box-card-float { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(255,255,255,.1); backdrop-filter:blur(16px); border:1.5px solid rgba(255,255,255,.2); border-radius:12px; padding:40px 32px; text-align:center; min-width:220px; z-index:2; }
.brs-box-logo-f { width:48px; height:48px; margin:0 auto 16px; background:#fff; clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; font-size:18px; color:var(--re-red); }
.brs-box-tagline-f { font-family:var(--font-editorial); font-style:italic; font-size:17px; line-height:1.5; color:#fff; }
.brs-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; grid-template-rows:220px 220px; gap:0; border-bottom:1px solid var(--re-border); }
.brs-grid-item { overflow:hidden; position:relative; border:1px solid var(--re-border); }
.brs-grid-item .brs-img-ph { min-height:unset; height:100%; transition:transform .4s ease; }
.brs-grid-item:hover .brs-img-ph { transform:scale(1.05); }
.brs-grid-item-wide { grid-row:span 2; }
.brs-closing { padding:100px 72px; text-align:center; background:#fff; }
.brs-closing-inner { max-width:480px; margin:0 auto; }
.brs-closing-mark { width:60px; height:60px; margin:0 auto 24px; background:var(--re-red); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; font-size:24px; color:#fff; }
.brs-closing-h2 { font-family:var(--font-display); font-weight:900; font-size:clamp(28px,4vw,44px); text-transform:uppercase; letter-spacing:-.01em; color:var(--re-white); margin-bottom:8px; }
.brs-closing-tag { font-family:var(--font-editorial); font-style:italic; font-size:18px; color:var(--re-smoke); margin-bottom:32px; }
.brs-closing-line { width:48px; height:2px; background:var(--re-red); margin:0 auto 32px; }
@media (max-width:1100px) { .brs-hero,.brs-fullquote,.brs-purpose-band,.brs-closing { padding-left:36px; padding-right:36px; } .brs-split .brs-split-text,.brs-box-right { padding:56px 36px; } .brs-trio { height:280px; } }
@media (max-width:900px) { .brs-split,.brs-box-section { grid-template-columns:1fr; } .brs-split-reverse { direction:ltr; } .brs-split-img { min-height:280px; max-height:340px; } .brs-box-left { min-height:300px; } .brs-trio { grid-template-columns:1fr 1fr; height:auto; } .brs-trio-img { height:200px; } .brs-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; } .brs-grid-item-wide { grid-row:span 1; } .brs-grid-item { height:200px; } .brs-two-col { grid-template-columns:1fr; } }
@media (max-width:767px) { .brs-hero { padding-bottom:48px; } .brs-split .brs-split-text { padding:48px 20px; } .brs-box-right { padding:48px 20px; } .brs-trio { grid-template-columns:1fr; height:auto; } .brs-trio-img { height:240px; } .brs-grid { grid-template-columns:1fr; } .brs-grid-item { height:220px; } .brs-hero-h1 { font-size:clamp(52px,14vw,80px); } }
@media (max-width:480px) { .brs-fullquote-mark { font-size:80px; } .brs-grid-item { height:180px; } }

/* ═══ SMYLEXA FOOTER (sf-*) ═══ */
.smylexa-footer { background:var(--re-white); color:rgba(255,255,255,.7); }
.sf-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:64px 72px; border-bottom:1px solid rgba(255,255,255,.08); }
.sf-logo { margin-bottom:16px; }
.sf-logo img { filter:brightness(0) invert(1); opacity:.9; }
.sf-tagline { font-family:var(--font-editorial); font-style:italic; font-size:14px; line-height:1.6; color:rgba(255,255,255,.45); margin-bottom:24px; max-width:260px; }
.sf-social { display:flex; gap:10px; }
.sf-social-btn { width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); transition:all .2s; }
.sf-social-btn:hover { background:var(--re-red); border-color:var(--re-red); color:#fff; }
.sf-social-btn svg { width:16px; height:16px; }
.sf-col-title { font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:18px; }
.sf-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.sf-links a { font-size:13px; color:rgba(255,255,255,.55); text-decoration:none; transition:color .2s; font-family:var(--font-body); }
.sf-links a:hover { color:#2bbba7; }
.sf-bottom { display:flex; align-items:center; justify-content:space-between; padding:20px 72px; flex-wrap:wrap; gap:12px; background:rgba(0,0,0,.15); }
.sf-copy { font-size:11px; color:rgba(255,255,255,.3); font-family:var(--font-body); }
.sf-legal { display:flex; gap:20px; }
.sf-legal a { font-size:11px; color:rgba(255,255,255,.3); text-decoration:none; font-family:var(--font-body); transition:color .2s; }
.sf-legal a:hover { color:#fff; }
.sf-made { font-family:var(--font-display); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.2); }
@media (max-width:1100px) { .sf-top,.sf-bottom { padding-left:36px; padding-right:36px; } .sf-top { grid-template-columns:1.2fr 1fr 1fr 1fr; gap:28px; } }
@media (max-width:900px) { .sf-top { grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:767px) { .sf-top { grid-template-columns:1fr; padding-left:20px; padding-right:20px; } .sf-bottom { flex-direction:column; align-items:flex-start; gap:8px; padding-left:20px; padding-right:20px; } }

/* ── Hero Section (smylexa-*) ── */
.smylexa-hero {
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #3ecfb2 0%, #7b5ea7 45%, #8b3fa8 100%);
  padding: 80px 40px;
  font-family: 'Antartida', sans-serif;
}
.smylexa-hero__inner {
  text-align: center;
  max-width: 860px;
  width: 100%;
}
.smylexa-hero__heading {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.15;
  margin-bottom: 24px;
  color: #ffffff;
}
.smylexa-hero__heading .smylexa-line-top {
  display: block;
  color: #ffffff;
}
.smylexa-hero__heading .smylexa-line-bottom {
  display: block;
}
.smylexa-hero__heading .smylexa-line-bottom .smylexa-word-smile {
  color: #ffffff;
}
.smylexa-hero__heading .smylexa-line-bottom .smylexa-word-transform {
  color: #3ecfb2;
  letter-spacing: 0.04em;
}
.smylexa-hero__sub {
  font-family: 'Antartida', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  margin-bottom: 44px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.smylexa-hero__buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.smylexa-btn {
  font-family: 'Antartida', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.smylexa-btn--primary {
  background: #ffffff;
  color: #7b2fa0;
  border: 2px solid #ffffff;
}
.smylexa-btn--primary:hover {
  background: transparent;
  color: #ffffff;
}
.smylexa-btn--outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.75);
}
.smylexa-btn--outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════
   QUIZ SECTION — Gradient Swoosh + Tagline
   Add .sq-swoosh div and .sq-tagline inside .sq-wrap
═══════════════════════════════════════════════ */

/* ── Section wrapper needs relative + overflow clip ── */
.sq-wrap {
  position: relative;
  overflow: hidden;
}

/* ── Gradient curved swoosh ── */
.sq-swoosh {
  position: absolute;
  bottom: -60px;
  left: -120px;
  width: 560px;
  height: 280px;
  pointer-events: none;
  z-index: 0;
}

.sq-swoosh svg {
  width: 100%;
  height: 100%;
}

/* ── Tagline — bottom right ── */
.sq-tagline {
  position: absolute;
  bottom: 28px;
  right: 40px;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 18px);
  color: #606062;
  letter-spacing: 0.02em;
  z-index: 2;
  pointer-events: none;
}

.sq-tagline span {
  color: #2bbba7;
  font-weight: 600;
}

/* ── All quiz content stays above swoosh ── */
.sq-topbar,
.sq-step {
  position: relative;
  z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .sq-swoosh {
    width: 320px;
    height: 180px;
    bottom: -30px;
    left: -60px;
  }
  .sq-tagline {
    bottom: 16px;
    right: 16px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .sq-swoosh {
    width: 240px;
    height: 140px;
  }
}


/* ── Reveal animation ── */
.tc-fade {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.tc-fade.on { opacity: 1; transform: translateY(0); }
.tc-d1 { transition-delay: .12s; }
.tc-d2 { transition-delay: .24s; }
.tc-d3 { transition-delay: .36s; }

/* ── Shared eyebrow ── */
.tc-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: .45em; text-transform: uppercase;
  color: #2bbba7; margin-bottom: 20px;
}
.tc-tag::before {
  content: ''; display: block; width: 28px; height: 1px; background: #2bbba7;
}

/* ══════════════════════════════
   1. HERO
══════════════════════════════ */
.tc-hero {
  min-height: 100vh;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  padding-top: 68px;
}

/* Left decorative accent bar */
.tc-hero::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #813b8e, #2bbba7);
  z-index: 10;
}

/* Left column */
.tc-hero-left {
  padding: 64px 56px 64px 72px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 32px;
  position: relative; z-index: 2;
  background: linear-gradient(135deg, #f9f6fd 0%, #f0fbf9 100%);
}

/* Subtle dot pattern */
.tc-hero-left::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(129,59,142,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 0;
}
.tc-hero-left > * { position: relative; z-index: 1; }

.tc-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: .4em; text-transform: uppercase;
  color: #2bbba7; background: rgba(43,187,167,.1);
  padding: 7px 16px; border-radius: 20px;
  border: 1px solid rgba(43,187,167,.3);
  width: fit-content;
}
.tc-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #2bbba7; animation: tcPulse 2s ease-in-out infinite;
}
@keyframes tcPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(43,187,167,.4);} 50%{opacity:.5;box-shadow:0 0 0 6px rgba(43,187,167,0);} }

.tc-hero-h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 8vw, 88px);
  text-transform: uppercase; letter-spacing: -.04em;
  line-height: .86; color: #1a1a1c;
  margin: 0;
}
.tc-hero-h1 .pur {
  color: #813b8e !important;
  -webkit-text-stroke: 0px transparent !important;
  display: block;
  line-height: .88;
}

.tc-hero-desc {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.85; color: #606062;
  max-width: 100%; margin: 0;
  border-left: 2px solid rgba(129,59,142,.2);
  padding-left: 16px;
}
.tc-hero-desc strong { color: #1a1a1c; font-weight: 700; }

/* CTA buttons */
.tc-hero-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.tc-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 14px 28px; background: #813b8e; color: #fff;
  border-radius: 6px; text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  border: 2px solid #813b8e;
}
.tc-btn-primary:hover {
  background: #6a2e75; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(129,59,142,.3); color: #fff;
}
.tc-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 14px 28px; background: transparent; color: #813b8e;
  border-radius: 6px; text-decoration: none;
  border: 2px solid rgba(129,59,142,.3);
  transition: all .2s;
}
.tc-btn-ghost:hover { border-color: #813b8e; background: rgba(129,59,142,.06); color: #813b8e; }

/* Metric cards */
.tc-metrics {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px; overflow: hidden;
}
.tc-metric {
  background: #fff;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background .2s;
}
.tc-metric:hover { background: #faf8fc; }
.tc-metric-label {
  font-family: var(--font-display); font-size: 8px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #bbb;
}
.tc-metric-val {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px, 2.8vw, 30px); color: #813b8e; line-height: 1;
}
.tc-metric-val sup { font-size: .4em; color: #2bbba7; vertical-align: super; }
.tc-metric-bar {
  height: 3px; background: rgba(0,0,0,.07);
  border-radius: 2px; overflow: hidden;
}
.tc-metric-fill {
  height: 100%;
  background: linear-gradient(90deg, #813b8e, #2bbba7);
  border-radius: 2px; transition: width 1.8s ease;
}

/* Right column */
.tc-hero-right {
  display: flex; flex-direction: column;
  position: relative; z-index: 2;
}

/* Video box */
.tc-hero-img-box {
  flex: 1;
  background: #111;
  overflow: hidden;
  position: relative;
  min-height: 480px;
}
/* Gradient overlay — left fade into left panel */
.tc-hero-img-box::after {
  content: '';
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to right, rgba(249,246,253,.18) 0%, transparent 30%),
    linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 40%);
}
/* Video */
.tc-hero-vid {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 2; display: block;
}

/* Quick facts strip */
.tc-facts {
  display: flex; align-items: stretch;
  background: #1a1a1c;
}
.tc-fact {
  flex: 1; padding: 18px 22px;
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 5px;
  transition: background .2s;
}
.tc-fact:last-child { border-right: none; }
.tc-fact:hover { background: rgba(129,59,142,.15); }
.tc-fact-n {
  font-family: var(--font-display); font-weight: 700;
  /*font-style: italic;*/
  font-size: clamp(14px, 1.6vw, 17px); color: #2bbba7; line-height: 1;
  text-align: center;
}
.tc-fact-l {
  font-family: var(--font-display); font-size: 8px;
  font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
}

/* ══════════════════════════════
   2. MISSION
══════════════════════════════ */
.tc-mission {
  background: #fff;
  padding: 100px 72px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.tc-mission-h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 5vw, 64px);
  text-transform: uppercase; letter-spacing: -.03em;
  color: #1a1a1c; line-height: .86; margin-bottom: 32px;
}
.tc-mission-h2 em { font-style: italic; color: #813b8e; display: block; }
.tc-mission-p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.85; color: #606062; margin-bottom: 16px;
}
.tc-mission-p:last-child { margin-bottom: 0; }
.tc-mission-p strong { color: #1a1a1c; font-weight: 700; }

.tc-mission-right { display: flex; flex-direction: column; gap: 2px; }
.tc-info-card {
  background: #f7f8fa;
  border: 1px solid rgba(0,0,0,.06);
  border-left: 3px solid #813b8e;
  padding: 24px 28px;
  transition: border-left-color .25s, background .25s, transform .25s;
  cursor: default;
}
.tc-info-card:hover {
  border-left-color: #2bbba7;
  background: #fff;
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.tc-info-card-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #1a1a1c; margin-bottom: 8px;
}
.tc-info-card p {
  font-family: var(--font-display); font-size: 13px;
  line-height: 1.7; color: #888; margin: 0;
}


/* ══════════════════════════════
   3. THREE PILLARS
══════════════════════════════ */
.tc-pillars {
  background: #813b8e21;
  padding: 100px 72px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
/* Background glow */
.tc-pillars::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 15% 50%, rgba(129,59,142,.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 85% 50%, rgba(43,187,167,.08) 0%, transparent 55%);
}
 
/* Header */
.tc-pillars-head { margin-bottom: 64px; position: relative; z-index: 2; }
.tc-pillars-head-row {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 48px;
}
.tc-pillars-h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 5.5vw, 68px);
  text-transform: uppercase; letter-spacing: -.03em;
  color: #37bdb6; line-height: .86;
}
.tc-pillars-h2 em { font-style: italic; color: #813b8e; }
.tc-pillars-sub {
  font-family: var(--font-display); font-size: 14px;
  line-height: 1.7; 
  max-width: 280px; text-align: right;
}
/* Eyebrow on dark */
.tc-pillars .tc-tag { color: #2bbba7; }
.tc-pillars .tc-tag::before { background: #2bbba7; }
 
/* Cards grid */
.tc-pillar-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; position: relative; z-index: 2;
}
 
/* Individual card */
.tc-p-card {
  position: relative; overflow: hidden;
  cursor: pointer;
}
 
/* Image area — full bleed, tall */
.tc-p-img {
  height: 380px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
/*.tc-p-1 { background: linear-gradient(160deg, #2a0e3a 0%, #4a1e60 100%); }*/
/*.tc-p-2 { background: linear-gradient(160deg, #0a2a28 0%, #0e3e3a 100%); }*/
/*.tc-p-3 { background: linear-gradient(160deg, #1a1020 0%, #2e1a40 100%); }*/
 
/* Colour wash overlay per card */
.tc-p-1::before { content: ''; position: absolute; inset: 0; 
/*background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(129,59,142,.35) 0%, */
transparent 65%); z-index: 1; }
/*.tc-p-2::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(43,187,167,.3) 0%, transparent 65%); z-index: 1; }*/
/*.tc-p-3::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(129,59,142,.25) 0%, transparent 65%); z-index: 1; }*/
 
/* Bottom gradient fade into body */
.tc-p-img::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 50%;
  /*background: linear-gradient(to top, #fff 0%, transparent 100%);*/
  z-index: 2;
}
 
.tc-p-img img {
  max-height: 340px; width: auto; max-width: 90%;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.3));
  position: relative; z-index: 3;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.tc-p-card:hover .tc-p-img img { transform: translateY(-14px) scale(1.04); }
 
/* Big watermark number behind image */
.tc-p-img .tc-p-wm {
  position: absolute; bottom: -10px; right: -10px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 140px; line-height: 1; letter-spacing: -.06em;
  color: rgba(255,255,255,.07);
  pointer-events: none; z-index: 2; user-select: none;
}
 
/* Divider between cards */
.tc-p-card + .tc-p-card { border-left: 1px solid rgba(255,255,255,.06); }
 
/* Body */
.tc-p-body {
  padding: 32px 36px 40px;
  /*background: #fff;*/
  position: relative;
}
.tc-p-body::before {
  content: '';
  position: absolute; top: 0; left: 36px; right: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
}
 
.tc-p-num {
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: .45em; text-transform: uppercase;
  color: #2bbba7; margin-bottom: 12px;
}
.tc-p-word {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  text-transform: uppercase; letter-spacing: -.02em;
  color: #1a1a1c; margin-bottom: 14px; line-height: 1;
  transition: color .25s;
  text-align: center;
}
.tc-p-card:hover .tc-p-word { color: #813b8e; }
.tc-p-desc {
  font-family: var(--font-display); font-size: 16px;
  line-height: 1.8; color: #888; margin-bottom: 0;    text-align: center;
}
 
/* Progress row */
.tc-progress-row {
  display: flex; align-items: center; gap: 10px; margin-top: 20px;
}
.tc-prog-bar {
  flex: 1; height: 3px;
  background: rgba(0,0,0,.07); border-radius: 2px; overflow: hidden;
}
.tc-prog-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #813b8e, #2bbba7);
  transition: width 1.6s ease;
}
.tc-prog-pct {
  font-family: var(--font-display); font-size: 9px;
  font-weight: 700; color: #bbb; flex-shrink: 0;
}
/* ══════════════════════════════
   4. PRODUCT SPLIT
══════════════════════════════ */

/* ══════════════════════════════
   4. PRODUCT SPLIT
══════════════════════════════ */
.tc-product {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 640px; position: relative;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.07);
  border-bottom: 1px solid rgba(0,0,0,.07);
}
 
/* Left image panel — white with decorative bg shapes */
.tc-product-img {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  padding: 40px;
}
 
/* Large soft purple circle behind image */
.tc-product-img::before {
  content: ''; position: absolute;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(129,59,142,.1) 0%, rgba(43,187,167,.06) 60%, transparent 80%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: tcGlowPulse 5s ease-in-out infinite;
}
@keyframes tcGlowPulse {
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.8; }
  50%{ transform:translate(-50%,-50%) scale(1.1); opacity:1; }
}
 
/* Decorative dashed ring */
.tc-product-img::after {
  content: ''; position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  border: 1.5px dashed rgba(129,59,142,.15);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: tcRingSpin 20s linear infinite;
  pointer-events: none;
}
@keyframes tcRingSpin { from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }
 
/* PNG image — transparent background, clean float */
.tc-product-img img {
  max-height: 540px; width: auto; max-width: 90%;
  object-fit: contain;
  position: relative; z-index: 3;
  filter: drop-shadow(0 24px 48px rgba(129,59,142,.18)) drop-shadow(0 8px 20px rgba(0,0,0,.08));
  animation: tcFloat 6s ease-in-out infinite;
}
@keyframes tcFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} }
 
/* Right text panel */
.tc-product-text {
  padding: 80px 64px;
  display: flex; flex-direction: column; justify-content: center;
  background: #fff; position: relative; overflow: hidden;
  border-left: 1px solid rgba(0,0,0,.07);
}
.tc-product-text::before {
  content: ''; position: absolute;
  top: -80px; right: -80px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,187,167,.08) 0%, transparent 65%);
  pointer-events: none;
}
.tc-product-text::after {
  content: ''; position: absolute;
  bottom: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(129,59,142,.07) 0%, transparent 65%);
  pointer-events: none;
}
 
.tc-product-h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 4.5vw, 64px);
  text-transform: uppercase; letter-spacing: -.03em;
  color: #1a1a1c; line-height: .86; margin-bottom: 32px;
}
.tc-product-h2 em { font-style: italic; color: #813b8e; display: block; }
.tc-product-text p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(14px, 1.3vw, 15px);
  line-height: 1.85; color: #606062; margin-bottom: 14px; max-width: 100%;
}
.tc-product-text p strong { color: #1a1a1c; font-weight: 700; }
 
/* Feature chips */
.tc-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.tc-chip {
  font-family: var(--font-display); font-weight: 700; font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 16px; border-radius: 8px;
  border: 1.5px solid rgba(129,59,142,.18);
  color: #813b8e; background: rgba(129,59,142,.04);
  transition: all .25s; display: flex; align-items: center; gap: 8px;
}
.tc-chip::before {
  content: '✓'; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(43,187,167,.15); color: #2bbba7;
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .25s;
}
.tc-chip:hover { background: #813b8e; color: #fff; border-color: #813b8e; }
.tc-chip:hover::before { background: rgba(255,255,255,.2); color: #fff; }
 

/* ══════════════════════════════
   5. COMMITMENT
══════════════════════════════ */
.tc-commit {
  padding: 100px 72px;
  background: #f7f8fa;
  border-bottom: 1px solid rgba(255,255,255,.05);
  position: relative; overflow: hidden;
}
.tc-commit::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 60% at 90% 20%, rgba(129,59,142,.07) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 5% 80%, rgba(43,187,167,.05) 0%, transparent 50%);
}

.tc-commit-head {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 40px;
  margin-bottom: 56px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: relative; z-index: 2;
}
.tc-commit-h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 5vw, 60px);
  text-transform: uppercase; letter-spacing: -.02em;
  color: #1a1a1c; line-height: .88;
}
.tc-commit-h2 em { font-style: italic; color: #813b8e; }
.tc-commit-p {
  font-family: var(--font-display); font-size: 15px;
  line-height: 1.8; color: #606062;
  max-width: 360px; text-align: right;
}

.tc-commit-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.07);
  position: relative; z-index: 2;
}
.tc-c-card {
  background: #fff;
  padding: 40px 36px;
  position: relative; overflow: hidden;
  transition: background .3s;
}
.tc-c-card:hover { background: #faf8fc; }
.tc-c-card::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #813b8e, #2bbba7);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.tc-c-card:hover::after { transform: scaleX(1); }

.tc-c-icon {
  width: 48px; height: 48px;
  background: rgba(129,59,142,.08);
  border: 1px solid rgba(129,59,142,.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #813b8e; margin-bottom: 20px;
  transition: background .25s, color .25s;
}
.tc-c-card:hover .tc-c-icon { background: #813b8e; color: #fff; }
.tc-c-icon svg { width: 22px; height: 22px; }

.tc-c-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #1a1a1c; margin-bottom: 14px;
}
.tc-c-body {
  font-family: var(--font-display); font-size: 13px;
  line-height: 1.8; color: #606062;
}

/* ══════════════════════════════
   6. QUOTE BAND
══════════════════════════════ */
.tc-quote {
  padding: 120px 72px;
  background: linear-gradient(135deg, #813b8e 0%, #5a2470 50%, #2bbba7 100%);
  text-align: center; position: relative; overflow: hidden;
}
.tc-quote::before {
  content: 'SMYLE'; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(100px, 22vw, 300px);
  color: rgba(255,255,255,.05); letter-spacing: -.04em;
  pointer-events: none; white-space: nowrap;
}
.tc-q-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.tc-q-rule {
  width: 48px; height: 2px;
  background: rgba(255,255,255,.3);
  margin: 0 auto 36px;
}
.tc-q-txt {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 4.5vw, 56px);
  text-transform: uppercase; letter-spacing: -.02em;
  color: #fff; line-height: .95; margin-bottom: 28px;
}
.tc-q-txt em {
  font-style: italic;
  color: rgba(255,255,255,.4);
  font-weight: 400; display: block;
  font-size: .7em; margin-top: 12px; letter-spacing: .02em;
  text-transform: none;
}
.tc-q-by {
  font-family: var(--font-display); font-size: 10px;
  font-weight: 600; letter-spacing: .5em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}

/* ══════════════════════════════
   7. CLOSING
══════════════════════════════ */
.tc-close {
  padding: 100px 72px;
  background: #fff;
  display: flex; align-items: center;
  justify-content: space-between; gap: 60px;
  border-top: 1px solid rgba(0,0,0,.07);
}
.tc-close-p {
  font-family: var(--font-display); font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.8vw, 34px);
  line-height: 1.5; color: #1a1a1c; max-width: 580px;
}
.tc-close-p strong {
  font-style: normal; color: #813b8e; font-weight: 900;
}
.tc-close-right {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 20px; flex-shrink: 0;
}
.tc-mark {
  width: 60px; height: 60px; background: #813b8e;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: #fff;
}
.tc-brand {
  font-family: var(--font-display); font-weight: 900;
  font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: #1a1a1c;
}
.tc-brand-sub {
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: #aaa; margin-top: 4px;
}
.tc-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  padding: 16px 32px; background: #813b8e; color: #fff;
  border-radius: 6px; text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.tc-cta:hover {
  background: #6a2e75; transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(129,59,142,.28); color: #fff;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1100px) {
  .tc-hero-left, .tc-mission, .tc-pillars, .tc-commit,
  .tc-quote, .tc-close { padding-left: 40px; padding-right: 40px; }
  .tc-product-text { padding: 60px 40px; }
}
@media (max-width: 900px) {
  .tc-hero, .tc-mission { grid-template-columns: 1fr; }
  .tc-hero-right { border-top: 1px solid rgba(255,255,255,.06); }
  .tc-hero-h1 { font-size: clamp(56px, 14vw, 88px); }
  .tc-pillar-grid, .tc-commit-grid { grid-template-columns: 1fr; }
  .tc-product { grid-template-columns: 1fr; }
  .tc-product-img { min-height: 340px; padding: 40px 32px 0; }
  .tc-product-img img { max-height: 300px; }
  .tc-commit-head, .tc-pillars-head-row {
    flex-direction: column; align-items: flex-start;
  }
  .tc-commit-p, .tc-pillars-sub { text-align: left; max-width: 100%; }
  .tc-close { flex-direction: column; gap: 40px; }
}
@media (max-width: 767px) {
  .tc-hero-left, .tc-mission, .tc-pillars, .tc-commit,
  .tc-quote, .tc-close { padding: 56px 20px; }
  .tc-product-text { padding: 48px 20px; }
  .tc-pillar-grid { gap: 0; }
  .tc-facts { flex-wrap: wrap; }
  .tc-fact { min-width: 50%; }
}


/* sq-wrap override — compact on step 1 */
#dealers .sq-wrap             { min-height: auto !important; }
#dealers .sq-wrap.sq-expanded { min-height: 100vh; }
#dealers #sq-topbar           { display: none; }

/* Outer card */
.sq-intro-wrap {
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.09);
  position: relative;
  overflow: hidden;
  max-width: 1100px;
  margin: 40px auto;
}


/* Grid: 44% left / 56% right */
.sq-intro-inner {
  display: grid;
  grid-template-columns: 44% 56%;
  grid-template-rows: 1fr auto;
  align-items: start;
  position: relative;
  z-index: 2;
  min-height: 340px;
}

/* LEFT panel — extra bottom padding keeps text above the smile arc */
.sq-intro-left {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding: 44px 36px 40px 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sq-intro-eyebrow {
  font-family: var(--font-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: .45em; text-transform: uppercase;
  color: #813b8e;
  display: flex; align-items: center; gap: 10px;
}
.sq-intro-eyebrow::before {
  content: ''; width: 28px; height: 1px;
  background: #813b8e; flex-shrink: 0;
}

/* Heading — 2 lines like reference */
.sq-intro-h {
  font-family: var(--font-display);
  /*font-weight: 900;*/
  font-size: clamp(18px, 2vw, 28px);
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: #1a1a1c;
  margin: 0;
}

.sq-intro-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.65;
  color: #888;
  margin: 0;
  max-width: 300px;
}

/* RIGHT panel */
.sq-intro-right {
  padding: 56px 56px 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

/* Cards row */
.sq-intro-cards {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  width: 100%;
}

.sq-intro-card {
  flex: 0 0 148px;
  background: #f9f9f9;
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: 12px;
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.sq-intro-card:hover {
  border-color: #813b8e;
  background: rgba(129,59,142,.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(129,59,142,.11);
}
.sq-intro-card.sq-ic-active {
  border-color: #813b8e;
  background: rgba(129,59,142,.06);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(129,59,142,.14);
}
.sq-intro-card__check {
  position: absolute; top: 9px; right: 9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #813b8e; color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.4);
  transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sq-intro-card.sq-ic-active .sq-intro-card__check { opacity: 1; transform: scale(1); }
.sq-intro-card__icon { width: 36px; height: 36px; }
.sq-intro-card__icon svg {
  width: 100%; height: 100%;
  stroke: #813b8e; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sq-intro-card__title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: #1a1a1c; line-height: 1.2;
}
.sq-intro-card__sub {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 400; color: #bbb;
}

/* Tagline */
.sq-intro-tagline {
  font-family: var(--font-display);
  font-style: italic; font-weight: 600;
  font-size: 13.5px; color: #606062;
  letter-spacing: .04em;
  display: flex; align-items: center; gap: 10px;
}
.sq-intro-tagline .sep { color: #ccc; font-style: normal; font-weight: 300; }

/* Smile arc — bottom-left, no text overlap */
.sq-smile-arc {
  position: absolute;
  bottom: -18px;
  left: -14px;
  width: 360px;
  height: 160px;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 960px) {
  .sq-intro-inner { grid-template-columns: 1fr; }
  .sq-intro-left  { padding: 36px 28px 28px; }
  .sq-intro-right { 
      /*padding: 20px 28px 40px; */
  padding: 16px 28px 85px;
  align-items: stretch; }
  .sq-intro-cards { justify-content: center; }
  .sq-intro-card  { flex: 1; }
  .sq-intro-tagline { justify-content: flex-end; }
  /*.sq-smile-arc   { width: 200px; height: 90px; }*/
  .sq-smile-arc   { width: 200px; height: 110px; }
}


/* ════════════════════════════════════════════
   BRAND STORY — Bento Grid
════════════════════════════════════════════ */

/* ── Reveal ── */
.r{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.r.in{opacity:1;transform:translateY(0);}
.d1{transition-delay:.06s;}.d2{transition-delay:.12s;}.d3{transition-delay:.18s;}.d4{transition-delay:.24s;}.d5{transition-delay:.3s;}

/* ── Page shell ── */
.bento-page{
  background:#f0f0f0;
  padding:calc(68px + 24px) 24px 24px;
  min-height:100vh;
}

/* ── Gap ── */
:root{--g:10px;--r:16px;}

/* ── Base tile ── */
.bt{
  border-radius:var(--r);overflow:hidden;
  position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.bt--hover:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.12);}

/* ── Tile backgrounds ── */
.bt--white{background:#fff;}
.bt--light{background:#f9f6fd;}
.bt--mint{background:#e8f7f4;}
.bt--dark{background:#1a1a1c;}
.bt--purple{background:#813b8e;}
.bt--teal{background:#2bbba7;}
.bt--grad-pur{background:linear-gradient(135deg,#813b8e 0%,#5a2070 100%);}
.bt--grad-teal{background:linear-gradient(135deg,#2bbba7 0%,#1a8f7a 100%);}
.bt--grad-hero{background:linear-gradient(140deg,#1a0828 0%,#2d1040 50%,#0a1a18 100%);}
.bt--grad-soft{background:linear-gradient(135deg,#f5eefb 0%,#e8f7f4 100%);}
.bt--img{background:#ddd;}

/* ── Image tiles ── */
.bt__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.bt--hover:hover .bt__img{transform:scale(1.06);}
.bt--img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 55%);pointer-events:none;}

/* ── Image caption overlay ── */
.bt__cap{position:absolute;bottom:16px;left:16px;right:16px;z-index:2;font-family:var(--font-display);font-weight:700;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.85);}

/* ── Typography ── */
.bt__tag{font-family:var(--font-display);font-weight:700;font-size:9px;letter-spacing:.45em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.bt__tag::before{content:'';width:20px;height:1px;flex-shrink:0;}
.bt__tag--purple{color:#813b8e;}.bt__tag--purple::before{background:#813b8e;}
.bt__tag--teal{color:#2bbba7;}.bt__tag--teal::before{background:#2bbba7;}
.bt__tag--white{color:rgba(255,255,255,.55);}.bt__tag--white::before{background:rgba(255,255,255,.35);}
.bt__tag--dark{color:rgba(255,255,255,.4);}.bt__tag--dark::before{background:rgba(255,255,255,.25);}

.bt__h{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
letter-spacing:-.03em;
/*line-height:.86;*/
color:#1a1a1c;}
.bt__h em{font-style:italic;color:#813b8e;}
.bt__h--white{color:#fff;}.bt__h--white em{color:#2bbba7;}
.bt__h--purple{color:#fff;}.bt__h--teal{color:#fff;}

.bt__p{font-family:var(--font-display);font-weight:400;font-size:clamp(13px,1.2vw,15px);line-height:1.8;color:#606062;}
.bt__p--white{color:rgba(255,255,255,.65);}
.bt__p strong{color:#1a1a1c;font-weight:700;}
.bt__p--white strong{color:#fff;}

.bt__num{font-family:var(--font-display);font-weight:900;line-height:1;color:#813b8e;}
.bt__num sup{vertical-align:super;color:#2bbba7;}
.bt__num--teal{color:#2bbba7;}
.bt__num--white{color:#fff;}
.bt__lbl{font-family:var(--font-display);font-weight:600;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#bbb;}
.bt__lbl--white{color:rgba(255,255,255,.4);}
.bt__bar{height:3px;background:rgba(0,0,0,.08);border-radius:2px;margin-top:8px;overflow:hidden;}
.bt__fill{height:100%;background:linear-gradient(90deg,#813b8e,#2bbba7);border-radius:2px;transition:width 1.8s ease;}
.bt__bar--white{background:rgba(255,255,255,.12);}

/* ── Quote tile ── */
.bt__quote{font-family:var(--font-display);font-weight:700;font-style:italic;line-height:1.4;color:#813b8e;}
.bt__quote--white{color:#fff;}
.bt__quote-mark{font-family:var(--font-display);font-weight:900;font-size:80px;line-height:.5;color:rgba(129,59,142,.12);display:block;margin-bottom:8px;}
.bt__quote-mark--white{color:rgba(255,255,255,.12);}

/* ── Badges ── */
.bt__badges{display:flex;flex-wrap:wrap;gap:6px;}
.bt__badge{font-family:var(--font-display);font-weight:700;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border-radius:4px;border:1.5px solid rgba(129,59,142,.22);color:#813b8e;background:rgba(129,59,142,.06);transition:all .2s;cursor:default;}
.bt__badge:hover{background:#813b8e;color:#fff;border-color:#813b8e;}
.bt__badge--teal{border-color:rgba(43,187,167,.22);color:#2bbba7;background:rgba(43,187,167,.06);}
.bt__badge--teal:hover{background:#2bbba7;color:#fff;border-color:#2bbba7;}

/* ── CTA ── */
.bt__cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:14px 24px;border-radius:8px;text-decoration:none;transition:all .22s;}
.bt__cta--solid{background:#813b8e;color:#fff;border:2px solid #813b8e;}
.bt__cta--solid:hover{background:#6a2e75;transform:translateY(-2px);box-shadow:0 8px 24px rgba(129,59,142,.3);color:#fff;}
.bt__cta--outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35);}
.bt__cta--outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.bt__cta--dark{background:#1a1a1c;color:#fff;border:2px solid #1a1a1c;}
.bt__cta--dark:hover{background:#000;color:#fff;}

/* ── Pill ── */
.bt__pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:8.5px;letter-spacing:.4em;text-transform:uppercase;color:#2bbba7;background:rgba(43,187,167,.1);padding:6px 14px;border-radius:20px;border:1px solid rgba(43,187,167,.25);}
.bt__pill::before{content:'';width:5px;height:5px;border-radius:50%;background:#2bbba7;animation:bpulse 2s ease-in-out infinite;}
@keyframes bpulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ── Chapter strip ── */
.bt__chap-strip{display:flex;align-items:center;gap:14px;}
.bt__chap-strip-num{font-family:var(--font-display);font-weight:900;font-size:clamp(48px,6vw,80px);letter-spacing:-.04em;color:rgba(129,59,142,.1);line-height:1;flex-shrink:0;}
.bt__chap-strip-line{flex:1;height:1px;background:linear-gradient(to right,rgba(129,59,142,.2),transparent);}
.bt__chap-strip-label{font-family:var(--font-display);font-weight:700;font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:#813b8e;flex-shrink:0;}

/* ── Watermark ── */
.bt__wm{position:absolute;bottom:-16px;right:-8px;font-family:var(--font-display);font-weight:900;font-size:clamp(60px,10vw,120px);letter-spacing:-.05em;pointer-events:none;user-select:none;line-height:1;color:rgba(255,255,255,.07);}
.bt__wm--dark{color:rgba(129,59,142,.06);}

/* ── Padding presets ── */
.p-sm{padding:18px;}
.p-md{padding:24px;}
.p-lg{padding:32px;}
.p-xl{padding:40px;}

/* ═══════════════════
   BENTO GRIDS
═══════════════════ */

/* Grid A — 4 equal cols */
.bg-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);}
/* Grid B — 3 equal cols */
.bg-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);}
/* Grid C — 2 equal cols */
.bg-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);}
/* Grid D — custom */
.bg-3-1{display:grid;grid-template-columns:3fr 1fr;gap:var(--g);}
.bg-1-3{display:grid;grid-template-columns:1fr 3fr;gap:var(--g);}
.bg-2-1{display:grid;grid-template-columns:2fr 1fr;gap:var(--g);}
.bg-1-2{display:grid;grid-template-columns:1fr 2fr;gap:var(--g);}
.bg-1-1-2{display:grid;grid-template-columns:1fr 1fr 2fr;gap:var(--g);}
.bg-2-1-1{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--g);}

/* Row wrapper */
.brow{display:flex;flex-direction:column;gap:var(--g);}

/* Span helpers */
.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}
.span-4{grid-column:span 4;}
.rspan-2{grid-row:span 2;}
.rspan-3{grid-row:span 3;}

/* Explicit height tiles */
.h-120{height:120px;}
.h-160{height:160px;}
.h-200{height:200px;}
.h-240{height:240px;}
.h-280{height:280px;}
.h-320{height:320px;}
.h-360{height:360px;}
.h-400{height:400px;}
.h-480{height:480px;}
.h-full{height:100%;}

/* Flex layout inside tiles */
.bt-flex{display:flex;flex-direction:column;justify-content:space-between;height:100%;}
.bt-flex-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.bt-flex-end{display:flex;flex-direction:column;justify-content:flex-end;}

/* Bento section gap */
.bsec{margin-bottom:var(--g);}

/* ═══════════════════
   RESPONSIVE
═══════════════════ */
@media(max-width:1024px){
  :root{--g:8px;--r:12px;}
  .bento-page{padding-top:calc(68px + 16px);padding-left:16px;padding-right:16px;}
}
@media(max-width:768px){
  :root{--g:6px;--r:10px;}
  .bento-page{padding-top:calc(68px + 12px);padding-left:12px;padding-right:12px;}
  .bg-4{grid-template-columns:1fr 1fr;}
  .bg-3{grid-template-columns:1fr 1fr;}
  .bg-3-1,.bg-1-3,.bg-2-1,.bg-1-2{grid-template-columns:1fr;}
  .bg-1-1-2,.bg-2-1-1{grid-template-columns:1fr 1fr;}
  .span-2,.span-3,.span-4{grid-column:span 1;}
  .h-480,.h-400{height:300px;}
  .h-360,.h-320{height:240px;}
}
@media(max-width:480px){
  .bg-4,.bg-3,.bg-2,.bg-1-1-2,.bg-2-1-1{grid-template-columns:1fr;}
  .span-2,.span-3,.span-4{grid-column:span 1;}
}

/* ── Aligner tile animations ── */
@keyframes bglow{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.08);}}
@keyframes bspin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes bfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

@media (max-width: 767px) {
  .tc-p-img {
    height: 225px;
  }
}


/* ═══════════════════════════════════════
   CONTACT PAGE — scoped styles
═══════════════════════════════════════ */

/* ── HERO ── */
.ct-hero {
  min-height: 42vh;
  background: #0c0910;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 96px 80px 64px;
  position: relative; overflow: hidden;
}
.ct-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 90% 10%, rgba(129,59,142,.32) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 2% 90%,  rgba(43,187,167,.12) 0%, transparent 50%);
}
.ct-hero-wm {
  position: absolute; bottom: -20px; right: -20px;
  
  font-size: clamp(100px,16vw,240px); letter-spacing: -.06em;
  text-transform: uppercase; color: rgba(255,255,255,.022);
  line-height: 1; pointer-events: none; white-space: nowrap;
}
.ct-hero-tag {
   font-size: 10px; font-weight: 600;
  letter-spacing: .5em; text-transform: uppercase; color: #2bbba7;
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  position: relative; z-index: 2;
}
.ct-hero-tag::before { content:''; width:32px; height:1px; background:#2bbba7; }
.ct-hero-h1 {
  
  font-size: clamp(40px,7vw,50px);
  text-transform: uppercase; letter-spacing: -.04em;
  line-height: .86; color: #fff;
  position: relative; z-index: 2; margin-bottom: 20px;
}
.ct-hero-h1 span { color: #813b8e; }
.ct-hero-sub {
   font-size: clamp(14px,1.5vw,17px);
  line-height: 1.75; color: rgba(255,255,255,.45);
  max-width: 480px; position: relative; z-index: 2;
}

/* ── MAIN CONTACT SECTION ── */
.ct-main {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 80vh;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* ── LEFT — Info + Details ── */
.ct-left {
  padding: 72px 64px 72px 80px;
  background: #f7f8fa;
  border-right: 1px solid rgba(0,0,0,.08);
  display: flex; flex-direction: column; gap: 40px;
}
.ct-section-tag {
  display: inline-flex; align-items: center; gap: 8px;
   font-size: 9px; font-weight: 700;
  letter-spacing: .4em; text-transform: uppercase;
  color: #813b8e; background: rgba(129,59,142,.07);
  padding: 5px 12px; border-radius: 4px;
  border: 1px solid rgba(129,59,142,.18);
  margin-bottom: 12px;
}
.ct-left-h2 {
  
  font-size: clamp(28px,3.5vw,48px); text-transform: uppercase;
  letter-spacing: -.02em; color: #1a1a1c; line-height: .88;
  margin-bottom: 16px;
}
.ct-left-h2 em { font-style: normal; color: #813b8e; }
.ct-left-desc {
   font-size: 16px;
  line-height: 1.8; color: #606062; max-width: 100%;
}

/* Info cards */
.ct-info-cards { display: flex; flex-direction: column; gap: 12px; }
.ct-info-card {
  background: #fff; border: 1px solid rgba(0,0,0,.07);
  border-left: 3px solid #813b8e;
  border-radius: 6px; padding: 18px 20px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: box-shadow .2s, border-left-color .2s;
}
.ct-info-card:hover {
  box-shadow: 0 4px 16px rgba(129,59,142,.1);
  border-left-color: #2bbba7;
}
.ct-info-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: rgba(129,59,142,.08); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #813b8e;
}
.ct-info-icon svg { width: 18px; height: 18px; }
.ct-info-title {
   font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #1a1a1c; margin-bottom: 4px;
}
.ct-info-val {
   font-size: 14px;
  color: #606062; line-height: 1.5;
}
.ct-info-val a { color: #813b8e; text-decoration: none; }
.ct-info-val a:hover { text-decoration: underline; }

/* Social row */
.ct-socials { display: flex; gap: 10px; }
.ct-social-btn {
  width: 38px; height: 38px; border-radius: 8px;
  border: 1.5px solid rgba(129,59,142,.25);
  background: rgba(129,59,142,.06);
  display: flex; align-items: center; justify-content: center;
  color: #813b8e; font-size: 15px;
  transition: background .2s, border-color .2s, color .2s;
  text-decoration: none;
}
.ct-social-btn:hover {
  background: #813b8e; border-color: #813b8e; color: #fff;
}

/* ── RIGHT — Form ── */
.ct-right {
  padding: 72px 80px 72px 64px;
  background: #fff;
  display: flex; flex-direction: column; justify-content: center;
}
.ct-form-title {
  
  font-size: clamp(22px,2.5vw,32px); text-transform: uppercase;
  letter-spacing: -.01em; color: #1a1a1c; margin-bottom: 8px;
}
.ct-form-sub {
   font-size: 14px;
  color: #888; margin-bottom: 32px; line-height: 1.6;
}

/* Form fields */
.ct-form { display: flex; flex-direction: column; gap: 16px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { display: flex; flex-direction: column; gap: 6px; }
.ct-label {
   font-weight: 600;
  font-size: 9px; letter-spacing: .35em; text-transform: uppercase;
  color: #888;
}
.ct-label span { color: #813b8e; }
.ct-input {
  height: 48px; padding: 0 16px;
  background: #f7f8fa; border: 1.5px solid rgba(0,0,0,.1);
  border-radius: 6px; 
  font-size: 14px; color: #1a1a1c; outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  width: 100%;
}
.ct-input:focus {
  border-color: #813b8e; background: #fff;
  box-shadow: 0 0 0 3px rgba(129,59,142,.08);
}
.ct-input::placeholder { color: #bbb; }
.ct-textarea {
  height: 120px; padding: 12px 16px; resize: vertical;
  background: #f7f8fa; border: 1.5px solid rgba(0,0,0,.1);
  border-radius: 6px; 
  font-size: 14px; color: #1a1a1c; outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  width: 100%; line-height: 1.6;
}
.ct-textarea:focus {
  border-color: #813b8e; background: #fff;
  box-shadow: 0 0 0 3px rgba(129,59,142,.08);
}
.ct-textarea::placeholder { color: #bbb; }

/* Phone field */
.ct-tel-wrap {
  display: flex; align-items: stretch;
  border: 1.5px solid rgba(0,0,0,.1); border-radius: 6px;
  background: #f7f8fa; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.ct-tel-wrap:focus-within {
  border-color: #813b8e; background: #fff;
  box-shadow: 0 0 0 3px rgba(129,59,142,.08);
}
.ct-tel-prefix {
  padding: 0 14px; display: flex; align-items: center;
   font-weight: 600;
  font-size: 13px; color: #606062;
  border-right: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.02); flex-shrink: 0;
}
.ct-input-tel {
  border: none !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  flex: 1;
}

/* Subject select */
.ct-select-wrap { position: relative; }
.ct-select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; padding-right: 36px;
}
.ct-select-arrow {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: #813b8e; pointer-events: none; font-size: 16px;
}

/* Submit button */
.ct-submit {
  height: 52px; width: 100%;
  background: #813b8e; color: #fff;
   font-weight: 700;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  border: none; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .2s, transform .15s, box-shadow .2s;
  margin-top: 4px;
}
.ct-submit:hover {
  background: #6a2e75; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(129,59,142,.25);
}
.ct-submit svg { width: 18px; height: 18px; }
.ct-submit-note {
   font-size: 11px;
  color: #aaa; text-align: center; margin-top: 10px;
}
.ct-submit-note span { color: #25d366; font-weight: 700; }

/* ── SUCCESS TOAST ── */
.ct-toast {
  display: none; align-items: center; gap: 12px;
  background: #f0faf8; border: 1px solid #2bbba7;
  border-radius: 8px; padding: 14px 18px;
   font-size: 14px;
  color: #1a6358; margin-top: 16px;
}
.ct-toast.show { display: flex; }
.ct-toast svg { width: 20px; height: 20px; color: #2bbba7; flex-shrink: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .ct-hero { padding: 96px 40px 52px; }
  .ct-left { padding: 56px 40px; }
  .ct-right { padding: 56px 40px; }
}
@media (max-width: 900px) {
  .ct-main { grid-template-columns: 1fr; }
  .ct-left { border-right: none; border-bottom: 1px solid rgba(0,0,0,.08); }
}
@media (max-width: 767px) {
  .ct-hero { padding: 80px 20px 44px; }
  .ct-left, .ct-right { padding: 48px 20px; }
  .ct-row { grid-template-columns: 1fr; gap: 16px; }
}



/* ═══════════════════════════════════════
   HELP PAGE — Concept 3: Alternating Split Sections
═══════════════════════════════════════ */

.hs-fade{opacity:0;transform:translateY(32px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
.hs-fade-l{opacity:0;transform:translateX(-40px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
.hs-fade-r{opacity:0;transform:translateX(40px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
.hs-fade.on,.hs-fade-l.on,.hs-fade-r.on{opacity:1;transform:translate(0);}

/* ── HERO ── */
.hs-hero{
  min-height:55vh;background:#0c0910;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:68px 80px 80px;position:relative;overflow:hidden;
}
.hs-hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 60% at 92% 8%,rgba(129,59,142,.38) 0%,transparent 52%),
    radial-gradient(ellipse 55% 55% at 0% 88%,rgba(43,187,167,.13) 0%,transparent 50%);
}
.hs-hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:80px 80px;
}
.hs-hero-wm{
  position:absolute;bottom:-28px;right:-16px;
  font-weight:400;
  font-size:clamp(100px,17vw,260px);letter-spacing:-.06em;
  text-transform:uppercase;color:rgba(255,255,255,.022);
  pointer-events:none;white-space:nowrap;line-height:1;
}
.hs-kicker{
  font-size:10px;font-weight:600;
  letter-spacing:.55em;text-transform:uppercase;color:#2bbba7;
  display:flex;align-items:center;gap:12px;
  margin-bottom:28px;position:relative;z-index:2;
}
.hs-kicker::before{content:'';width:32px;height:1px;background:#2bbba7;}
.hs-hero-h1{
  font-weight:400;
  font-size:clamp(68px,12vw,60px);
  text-transform:uppercase;letter-spacing:-.045em;
  line-height:.82;margin-bottom:48px;position:relative;z-index:2;
}
.hs-hero-h1 .s1{color:#fff;display:block;}
.hs-hero-h1 .s2{display:block;-webkit-text-stroke:1.5px rgba(255,255,255,.18);color:transparent;}
.hs-hero-foot{
  display:flex;align-items:flex-end;
  justify-content:space-between;gap:40px;
  position:relative;z-index:2;
}
.hs-hero-desc{
  font-family:'Lora',serif;font-style:italic;
  font-size:clamp(15px,1.7vw,19px);line-height:1.75;
  color:rgba(255,255,255,.45);max-width:480px;
}
.hs-hero-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:360px;}
.hs-pill{
  font-weight:600;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;
  padding:6px 14px;border-radius:24px;
  border:1px solid rgba(129,59,142,.4);
  color:rgba(255,255,255,.5);background:rgba(129,59,142,.1);
}

/* ── STATS ── */
.hs-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#813b8e;
}
.hs-stat{
  padding:28px 40px;border-right:1px solid rgba(255,255,255,.12);
  transition:background .3s;
}
.hs-stat:last-child{border-right:none;}
.hs-stat:hover{background:rgba(255,255,255,.06);}
.hs-stat-n{
  font-weight:400;
  font-size:clamp(24px,3.5vw,40px);color:#fff;line-height:1;margin-bottom:4px;
}
.hs-stat-l{
  font-size:9px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);
}

/* ── SECTION INTRO ── */
.hs-intro{
  padding:72px 80px 56px;background:#fff;
  border-bottom:1px solid rgba(0,0,0,.07);
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
}
.hs-intro-eyebrow{
  font-size:10px;font-weight:600;
  letter-spacing:.45em;text-transform:uppercase;color:#813b8e;
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.hs-intro-eyebrow::before{content:'';width:22px;height:1px;background:#813b8e;}
.hs-intro-h2{
  font-weight:400;
  font-size:clamp(28px,4vw,52px);text-transform:uppercase;
  letter-spacing:-.02em;color:#1a1a1c;line-height:.9;
}
.hs-intro-h2 span{color:#813b8e;}
.hs-intro-p{
  font-family:'Lora',serif;font-style:italic;
  font-size:15px;line-height:1.75;color:#888;
  max-width:300px;text-align:right;
}

/* ══════════════════════════════════════
   ALTERNATING SPLIT SECTIONS
══════════════════════════════════════ */
.hs-section{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:56vh;
  border-bottom:1px solid rgba(0,0,0,.07);
  position:relative;overflow:hidden;
}
.hs-section-flip{direction:rtl;}
.hs-section-flip>*{direction:ltr;}

/* Image side */
.hs-img-side{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;padding:48px 40px 0;
}
/* 12 backgrounds */
.hs-c1 {background:linear-gradient(150deg,#f5eefa 0%,#e8d5f5 100%);}
.hs-c2 {background:linear-gradient(150deg,#e4f7f4 0%,#ccede8 100%);}
.hs-c3 {background:linear-gradient(150deg,#fdf2eb 0%,#f5e0cc 100%);}
.hs-c4 {background:linear-gradient(150deg,#eaf0fc 0%,#d5e4f5 100%);}
.hs-c5 {background:linear-gradient(150deg,#f5f5ea 0%,#e8e8cc 100%);}
.hs-c6 {background:linear-gradient(150deg,#fde8ee 0%,#f5ccd8 100%);}
.hs-c7 {background:linear-gradient(150deg,#eaf5f0 0%,#cce8de 100%);}
.hs-c8 {background:linear-gradient(150deg,#f0eaf5 0%,#deccf0 100%);}
.hs-c9 {background:linear-gradient(150deg,#faf0e4 0%,#f0dcc8 100%);}
.hs-c10{background:linear-gradient(150deg,#e4eefa 0%,#ccddf5 100%);}
.hs-c11{background:linear-gradient(150deg,#f5faee 0%,#e4f0cc 100%);}
.hs-c12{background:linear-gradient(150deg,#faeaf5 0%,#f0cce8 100%);}

/* ghost number */
.hs-img-side::before{
  content:attr(data-n);
  position:absolute;bottom:-12px;left:16px;
  font-weight:400;
  font-size:120px;letter-spacing:-.06em;
  color:rgba(129,59,142,.08);line-height:1;pointer-events:none;z-index:1;
}
.hs-img-side img{
  max-height:48vh;width:auto;max-width:85%;
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 16px 48px rgba(0,0,0,.1));
  transition:transform .6s ease;
  position:relative;z-index:2;
}
.hs-section:hover .hs-img-side img{transform:translateY(-12px) scale(1.04);}

/* Text side */
.hs-text-side{
  padding:64px 72px;
  display:flex;flex-direction:column;justify-content:center;
  background:#fff;
}
.hs-text-side-alt{background:#f7f8fa;}
.hs-text-side-dark{background:#0c0910;}

.hs-tag{
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;
  color:#813b8e;background:rgba(129,59,142,.07);
  padding:4px 12px;border-radius:20px;
  border:1px solid rgba(129,59,142,.18);
  margin-bottom:16px;align-self:flex-start;
}
.hs-text-side-dark .hs-tag{
  color:#2bbba7;background:rgba(43,187,167,.1);
  border-color:rgba(43,187,167,.25);
}

.hs-title{
  font-weight:400;
  font-size:clamp(22px,2.8vw,40px);text-transform:uppercase;
  letter-spacing:-.02em;color:#1a1a1c;line-height:.9;margin-bottom:24px;
}
.hs-title em{font-style:normal;color:#813b8e;}
.hs-text-side-dark .hs-title{color:#fff;}
.hs-text-side-dark .hs-title em{color:#813b8e;}

/* paragraphs */
.hs-p1{
  font-family:'Nunito',sans-serif;font-size:clamp(14px,1.4vw,16px);
  line-height:1.85;color:#606062;margin-bottom:0;
}
.hs-text-side-dark .hs-p1{color:rgba(255,255,255,.45);}
.hs-expand{
  display:none;flex-direction:column;gap:10px;margin-top:14px;
}
.hs-expand.open{display:flex;}
.hs-expand p{
  font-family:'Nunito',sans-serif;font-size:13px;
  line-height:1.8;color:#888;
}
.hs-text-side-dark .hs-expand p{color:rgba(255,255,255,.35);}

/* Footer row */
.hs-foot{
  display:flex;align-items:center;gap:16px;
  margin-top:28px;padding-top:20px;
  border-top:1px solid rgba(0,0,0,.08);
  flex-wrap:wrap;
}
.hs-text-side-dark .hs-foot{border-top-color:rgba(255,255,255,.08);}
.hs-read-more{
  font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:#aaa;background:none;border:none;cursor:pointer;padding:0;
  display:flex;align-items:center;gap:6px;transition:color .2s;
}
.hs-read-more:hover{color:#813b8e;}
.hs-rm-ico{
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid #ddd;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;color:#aaa;
  transition:all .2s;
}
.hs-read-more:hover .hs-rm-ico{background:#813b8e;border-color:#813b8e;color:#fff;}
.hs-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:#813b8e;text-decoration:none;
  padding:8px 18px;border-radius:6px;
  border:1.5px solid rgba(129,59,142,.3);
  background:rgba(129,59,142,.06);
  transition:background .2s,color .2s,border-color .2s;
}
.hs-cta:hover{background:#813b8e;color:#fff;border-color:#813b8e;}
.hs-cta svg{width:10px;height:10px;}
/* dark variant */
.hs-text-side-dark .hs-read-more{color:rgba(255,255,255,.3);}
.hs-text-side-dark .hs-read-more:hover{color:#2bbba7;}
.hs-text-side-dark .hs-cta{
  color:#2bbba7;border-color:rgba(43,187,167,.3);background:rgba(43,187,167,.08);
}
.hs-text-side-dark .hs-cta:hover{background:#2bbba7;color:#0c0910;border-color:#2bbba7;}

/* ── BANNER ── */
.hs-banner{
  padding:96px 80px;text-align:center;
  background:linear-gradient(135deg,#813b8e 0%,#6a2e75 60%,#4a1e55 100%);
  position:relative;overflow:hidden;
}
.hs-banner::after{
  content:'SMYLEXA';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-weight:400;
  font-size:clamp(80px,15vw,200px);color:rgba(255,255,255,.04);
  letter-spacing:-.04em;white-space:nowrap;pointer-events:none;
}
.hs-banner-inner{position:relative;z-index:2;}
.hs-banner-tag{
  font-size:10px;font-weight:300;
  letter-spacing:.45em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:16px;
}
.hs-banner-h2{
  font-weight:400;
  font-size:clamp(32px,5vw,64px);text-transform:uppercase;
  letter-spacing:-.02em;color:#fff;line-height:.86;margin-bottom:18px;
}
.hs-banner-sub{
  font-family:'Lora',serif;font-style:italic;
  font-size:18px;line-height:1.65;color:rgba(255,255,255,.6);
  max-width:480px;margin:0 auto 36px;
}
.hs-banner-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 44px;background:#fff;color:#813b8e;
  border-radius:4px;text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.hs-banner-btn:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,0,0,.2);color:#813b8e;}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .hs-hero,.hs-intro,.hs-banner{padding-left:48px;padding-right:48px;}
  .hs-text-side{padding:52px 48px;}
}
@media(max-width:900px){
  .hs-stats{grid-template-columns:repeat(2,1fr);}
  .hs-stat:nth-child(2){border-right:none;}
  .hs-stat:nth-child(3){border-top:1px solid rgba(255,255,255,.12);}
  .hs-section{grid-template-columns:1fr;}
  .hs-section-flip{direction:ltr;}
  .hs-img-side{min-height:280px;}
  .hs-img-side img{max-height:240px;}
  .hs-text-side{padding:40px 36px;}
  .hs-intro{flex-direction:column;align-items:flex-start;gap:12px;}
  .hs-intro-p{text-align:left;max-width:100%;}
}
@media(max-width:767px){
  .hs-hero{padding:68px 20px 56px;}
  .hs-intro,.hs-banner{padding:52px 20px;}
  .hs-text-side{padding:36px 20px;}
  .hs-hero-foot{flex-direction:column;gap:20px;}
  .hs-hero-pills{justify-content:flex-start;}
  .hs-img-side{min-height:220px;padding:28px 28px 0;}
  .hs-img-side img{max-height:190px;}
}


/*map section css*/

#map-section {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.07);
}

/* mirrors td-wrap from #specs exactly */
#map-section .td-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}

/* ── LEFT: cards — mirrors td-left ── */
#map-section .td-left {
  padding: 72px 56px 72px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  border-right: 1px solid rgba(0,0,0,.07);
}

.map-eyebrow {
  
  font-size: 10px; font-weight: 600;
  letter-spacing: .45em; text-transform: uppercase;
  color: #813b8e;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.map-eyebrow::before { content: ''; width: 20px; height: 1px; background: #813b8e; }

/* reuse td-title style */
.map-section-title {
   font-weight: 400;
  font-size: clamp(22px, 2.5vw, 32px);
  text-transform: uppercase; letter-spacing: -.01em;
  color: #1a1a1c; line-height: 1; margin-bottom: 16px;
}
.map-section-title span { color: #813b8e; }

/* reuse td-desc style */
.map-section-desc {
  font-family: 'Nunito', sans-serif; font-size: 15px;
  line-height: 1.75; color: #606062; margin-bottom: 36px;
  max-width: 420px;
}

/* clinic cards */
.map-clinic-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px; overflow: hidden;
}
.map-clinic-card {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  border-left: 3px solid transparent;
  cursor: pointer;
  display: flex; align-items: flex-start; gap: 14px;
  transition: background .25s, border-left-color .25s;
  background: #fff;
}
.map-clinic-card:last-child { border-bottom: none; }
.map-clinic-card:hover { background: #faf8fc; }
.map-clinic-card.map-active {
  background: #faf8fc;
  border-left-color: #813b8e;
}
.map-clinic-num {
   font-weight: 900;
  font-size: 11px; letter-spacing: .3em;
  color: #ddd; flex-shrink: 0;
  padding-top: 2px; min-width: 26px;
  transition: color .25s;
}
.map-clinic-card.map-active .map-clinic-num,
.map-clinic-card:hover      .map-clinic-num { color: #2bbba7; }
.map-clinic-info { flex: 1; }
.map-clinic-name {
   font-weight: 700;
  font-size: 14px; color: #1a1a1c; margin-bottom: 3px;
  transition: color .2s;
}
.map-clinic-card.map-active .map-clinic-name,
.map-clinic-card:hover      .map-clinic-name { color: #813b8e; }
.map-clinic-addr {
  font-family: 'Nunito', sans-serif; font-size: 12px;
  line-height: 1.55; color: #888;
}
.map-clinic-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px;
   font-size: 8px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: #2bbba7; background: rgba(43,187,167,.08);
  border: 1px solid rgba(43,187,167,.2);
  padding: 2px 10px; border-radius: 20px;
}
.map-clinic-badge::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%; background: #2bbba7;
  animation: mapPulse 2s ease-in-out infinite;
}
@keyframes mapPulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.map-clinic-arrow {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid #e0d8f0;
  display: flex; align-items: center; justify-content: center;
  color: #ccc; flex-shrink: 0; margin-top: 2px;
  transition: background .25s, border-color .25s, color .25s;
}
.map-clinic-card.map-active .map-clinic-arrow,
.map-clinic-card:hover      .map-clinic-arrow {
  background: #813b8e; border-color: #813b8e; color: #fff;
}
.map-clinic-arrow svg { width: 12px; height: 12px; }

/* ── RIGHT: map — mirrors td-right ── */
#map-section .td-right {
  position: relative;
  overflow: hidden;
  background: #f7f8fa;
  display: flex;
  align-items: stretch;
}

.map-display-wrap {
  position: relative;
  width: 100%; height: 100%;
  min-height: 480px;
}
.map-location-label {
  position: absolute; top: 20px; left: 20px; z-index: 10;
  background: rgba(129,59,142,.92);
  backdrop-filter: blur(8px);
  border-radius: 8px; padding: 7px 16px;
  display: flex; align-items: center; gap: 8px;
  pointer-events: none;
}
.map-location-label svg { width: 13px; height: 13px; color: #fff; flex-shrink: 0; }
.map-location-label span {
   font-weight: 600;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
.map-iframe-slot {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
.map-iframe-slot.map-active { opacity: 1; pointer-events: auto; }
.map-iframe-slot iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── RESPONSIVE — mirrors specs responsive ── */
@media (max-width: 991px) {
  #map-section .td-wrap { grid-template-columns: 1fr; }
  #map-section .td-left { padding: 52px 36px; border-right: none; border-bottom: 1px solid rgba(0,0,0,.07); }
  #map-section .td-right { min-height: 380px; }
  .map-display-wrap { min-height: 380px; }
}
@media (max-width: 767px) {
  #map-section .td-left { padding: 44px 20px; }
  .map-display-wrap { min-height: 300px; }

}




#map-section {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.07);
}
#map-section .td-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 600px;
}
 
/* ── LEFT ── */
#map-section .td-left {
  border-right: 1px solid rgba(0,0,0,.08);
  display: flex; flex-direction: column;
}
.map-left-head {
  padding: 48px 36px 20px 72px;
  flex-shrink: 0;
}
.map-eyebrow {
 
  font-size: 10px; font-weight: 600;
  letter-spacing: .45em; text-transform: uppercase;
  color: #813b8e;
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.map-eyebrow::before { content:''; width:20px; height:1px; background:#813b8e; }
.map-section-title {
  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 30px);
  text-transform: uppercase; letter-spacing: -.01em;
  color: #1a1a1c; line-height: .9; margin-bottom: 12px;
}
.map-section-title span { color: #813b8e; }
.map-count-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: #2bbba7; background: rgba(43,187,167,.08);
  border: 1px solid rgba(43,187,167,.2);
  padding: 4px 12px; border-radius: 20px;
}
.map-count-badge::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:#2bbba7; animation: mapPulse 2s ease-in-out infinite;
}
@keyframes mapPulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
 
/* Search */
.map-search-wrap {
  padding: 0 36px 14px 72px; flex-shrink: 0;
}
.map-search-box {
  display: flex; align-items: center; gap: 10px;
  background: #f7f8fa; border: 1.5px solid rgba(0,0,0,.09);
  border-radius: 8px; padding: 0 14px;
  transition: border-color .2s, box-shadow .2s;
}
.map-search-box:focus-within {
  border-color: #813b8e;
  box-shadow: 0 0 0 3px rgba(129,59,142,.08);
}
.map-search-box svg { width:16px; height:16px; color:#aaa; flex-shrink:0; }
.map-search-box input {
  width:100%; height:44px; border:none; background:transparent; outline:none;
  font-family:'Nunito',sans-serif; font-size:14px; color:#1a1a1c;
}
.map-search-box input::placeholder { color:#bbb; }
 
/* List */
.map-clinic-list {
  flex:1; overflow-y:auto; max-height:480px; padding-bottom:16px;
}
.map-clinic-list::-webkit-scrollbar { width:4px; }
.map-clinic-list::-webkit-scrollbar-track { background:#f7f8fa; }
.map-clinic-list::-webkit-scrollbar-thumb { background:rgba(129,59,142,.3); border-radius:4px; }
 
.map-clinic-card {
  padding: 14px 28px 14px 72px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-left: 3px solid transparent;
  cursor: pointer;
  display: flex; align-items: flex-start; gap: 12px;
  transition: background .2s, border-left-color .2s;
}
.map-clinic-card:hover { background:#faf8fc; }
.map-clinic-card.map-active { background:#faf8fc; border-left-color:#813b8e; }
.map-clinic-card.map-hidden { display:none; }
 
.map-clinic-num {
  font-family:'Montserrat',sans-serif; font-weight:900;
  font-size:10px; letter-spacing:.25em; color:#ddd;
  flex-shrink:0; min-width:22px; padding-top:2px;
  transition:color .2s;
}
.map-clinic-card.map-active .map-clinic-num,
.map-clinic-card:hover      .map-clinic-num { color:#2bbba7; }
 
.map-clinic-info { flex:1; min-width:0; }
.map-clinic-name {
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:12px; color:#1a1a1c; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s;
}
.map-clinic-card.map-active .map-clinic-name,
.map-clinic-card:hover      .map-clinic-name { color:#813b8e; }
.map-clinic-addr {
  font-family:'Nunito',sans-serif; font-size:11px;
  color:#888; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.map-clinic-arrow {
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid #e8e0f0; flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  color:#ccc; transition:all .2s;
}
.map-clinic-card.map-active .map-clinic-arrow,
.map-clinic-card:hover      .map-clinic-arrow {
  background:#813b8e; border-color:#813b8e; color:#fff;
}
.map-clinic-arrow svg { width:10px; height:10px; }
 
.map-no-results {
  display:none; padding:24px 72px;
  font-family:'Nunito',sans-serif; font-size:14px; color:#aaa;
}
 
/* ── RIGHT: map ── */
#map-section .td-right {
  position:relative; background:#f0eaf8; overflow:hidden;
}
.map-display-wrap {
  position:sticky; top:68px;
  height:calc(100vh - 68px); min-height:520px;
}
.map-location-label {
  position:absolute; top:16px; left:16px; z-index:10;
  background:rgba(129,59,142,.92); backdrop-filter:blur(8px);
  border-radius:8px; padding:7px 16px;
  display:flex; align-items:center; gap:8px;
  pointer-events:none; max-width:calc(100% - 100px);
}
.map-location-label svg { width:13px; height:13px; color:#fff; flex-shrink:0; }
.map-location-label span {
  font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.map-view-btn {
  position:absolute; bottom:16px; right:16px; z-index:10;
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:#813b8e; background:#fff;
  padding:8px 16px; border-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  text-decoration:none; transition:background .2s, color .2s;
}
.map-view-btn:hover { background:#813b8e; color:#fff; }
.map-view-btn svg { width:13px; height:13px; }
.map-iframe-slot {
  position:absolute; inset:0;
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.map-iframe-slot.map-active { opacity:1; pointer-events:auto; }
.map-iframe-slot iframe { width:100%; height:100%; border:0; display:block; }
 
/* ── RESPONSIVE ── */
@media (max-width:1100px){
  .map-left-head  { padding-left:40px; padding-right:24px; }
  .map-search-wrap { padding-left:40px; padding-right:24px; }
  .map-clinic-card { padding-left:40px; padding-right:20px; }
  .map-no-results { padding-left:40px; }
}
@media (max-width:900px){
  #map-section .td-wrap { grid-template-columns:1fr; }
  #map-section .td-right { min-height:400px; }
  .map-display-wrap { position:relative; top:auto; height:400px; min-height:400px; }
  .map-clinic-list { max-height:320px; }
}
@media (max-width:767px){
  .map-left-head  { padding:36px 20px 14px; }
  .map-search-wrap { padding:0 20px 12px; }
  .map-clinic-card { padding:12px 16px; }
  .map-no-results { padding:20px; }
  .map-display-wrap { height:300px; min-height:300px; }
}
/*map section css*/


/* ═══════════════════════════
   TERMS & CONDITIONS — Simple
═══════════════════════════ */

/* Hero */
.tc-page-hero {
  background: #0c0910;
  padding: 120px 80px 56px;
  position: relative; overflow: hidden;
}
.tc-page-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 85% 10%, rgba(129,59,142,.28) 0%, transparent 55%);
}
.tc-page-hero-wm {
  position: absolute; bottom: -16px; right: -10px;
   font-weight: 400;
  font-size: clamp(80px,14vw,190px); letter-spacing: -.06em;
  text-transform: uppercase; color: rgba(255,255,255,.022);
  pointer-events: none; white-space: nowrap; line-height: 1;
}
.tc-page-kicker {
   font-size: 10px; font-weight: 600;
  letter-spacing: .5em; text-transform: uppercase; color: #2bbba7;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; position: relative; z-index: 2;
}
.tc-page-kicker::before { content:''; width:24px; height:1px; background:#2bbba7; }
.tc-page-h1 {
   font-weight: 400;
  font-size: clamp(32px,5.5vw,72px);
  text-transform: uppercase; letter-spacing: -.04em;
  color: #fff; line-height: .86;
  position: relative; z-index: 2; margin-bottom: 16px;
}
.tc-page-h1 span { color: #813b8e; }
.tc-page-date {
  font-family: 'Nunito', sans-serif; font-size: 13px;
  color: rgba(255,255,255,.3); position: relative; z-index: 2;
}

/* Content wrapper */
.tc-page-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 40px 96px;
}

/* Intro */
.tc-page-intro {
  font-family: 'Nunito', sans-serif; font-size: 16px;
  line-height: 1.85; color: #606062;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 48px;
}
.tc-page-intro a { color: #813b8e; text-decoration: none; }

/* Each clause */
.tc-clause {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.tc-clause:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.tc-clause-num {
  display: inline-flex; align-items: center; gap: 10px;
   font-size: 10px; font-weight: 700;
  letter-spacing: .35em; text-transform: uppercase; color: #2bbba7;
  margin-bottom: 8px;
}
.tc-clause-num::before {
  content: ''; width: 16px; height: 1px; background: #2bbba7;
}

.tc-clause-title {
   font-weight: 400;
  font-size: clamp(16px, 2vw, 22px); text-transform: uppercase;
  letter-spacing: -.01em; color: #1a1a1c; margin-bottom: 14px;
}

.tc-clause p {
  font-family: 'Nunito', sans-serif; font-size: 15px;
  line-height: 1.85; color: #606062; margin-bottom: 10px;
}
.tc-clause p:last-child { margin-bottom: 0; }
.tc-clause a { color: #813b8e; text-decoration: none; }
.tc-clause a:hover { text-decoration: underline; }

/* Bullet list */
.tc-list {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.tc-list li {
  font-family: 'Nunito', sans-serif; font-size: 15px;
  line-height: 1.75; color: #606062;
  padding-left: 18px; position: relative;
}
.tc-list li::before {
  content: '';
  position: absolute; left: 0; top: 10px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #813b8e;
}

/* Contact box */
.tc-contact-box {
  background: #f7f8fa;
  border: 1px solid rgba(0,0,0,.08);
  border-left: 3px solid #813b8e;
  border-radius: 0 8px 8px 0;
  padding: 24px 24px;
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.tc-contact-row {
  display: flex; align-items: center; gap: 10px;
}
.tc-contact-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(129,59,142,.08); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #813b8e;
}
.tc-contact-ico svg { width: 14px; height: 14px; }
.tc-contact-lbl {
   font-size: 9px; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase; color: #aaa;
  margin-bottom: 2px;
}
.tc-contact-val {
  font-family: 'Nunito', sans-serif; font-size: 14px; color: #1a1a1c;
}
.tc-contact-val a { color: #813b8e; text-decoration: none; }
.tc-contact-val a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 767px) {
  .tc-page-hero { padding: 100px 20px 48px; }
  .tc-page-wrap { padding: 48px 20px 72px; }
  .tc-page-h1 { font-size: clamp(32px,10vw,52px); }
}

/*footer css*/

  /* ── Footer 3-column layout ── */
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 2fr;
  gap: 48px;
  padding: 64px 72px;
  align-items: start;
}

/* Col 3 — wider help column */
.footer-col--help {
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: 48px;
}

/* 2 sub-columns inside help */
.footer-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin-top: 4px;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 48px 36px;
  }
  .footer-brand {
    grid-column: span 2;
  }
  .footer-col--help {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 28px;
    grid-column: span 2;
  }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 20px;
  }
  .footer-brand { grid-column: span 1; }
  .footer-col--help {
    grid-column: span 1;
    border-left: none;
    padding-left: 0;
  }
  .footer-help-grid {
    grid-template-columns: 1fr;
  }
}
/*footer css*/

/* ── How It Works Section ── */
#colorways {
  background: #ffffff;
  padding: 72px 0 60px;
  overflow: hidden;
}
 
/* Header */
#colorways .cw-header {
  padding: 0 72px 48px;
}
#colorways .cw-eyebrow {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: #813b8e;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
#colorways .cw-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: #813b8e;
}
#colorways .cw-sub {
  font-size: 17px;
  line-height: 1.65;
  color: #606062;
  max-width: 480px;
  margin-top: 10px;
}
 
/* Image column */
.cw-img-wrap {
border-radius: 16px;
  position: relative;
  height: 100%;
  min-height: 460px;
  /*background: linear-gradient(135deg, #f5eefb 0%, #e8f7f4 100%);*/
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
      margin: 0 20px;
}
/*.cw-img-wrap::before {*/
/*  content: '';*/
/*  position: absolute;*/
/*  width: 340px;*/
/*  height: 340px;*/
/*  border-radius: 50%;*/
/*  background: radial-gradient(circle, rgba(129,59,142,.12) 0%, transparent 70%);*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  transform: translate(-50%, -50%);*/
/*}*/
 
/*.cw-step-img {*/
/*  width: 78%;*/
/*  max-width: 380px;*/
/*  height: 85%;*/
/*  object-fit: contain;*/
/*  object-position: center;*/
/*  position: relative;*/
/*  z-index: 2;*/
/*  transition: opacity .3s ease, transform .3s ease;*/
/*  filter: drop-shadow(0 16px 40px rgba(129,59,142,.15));*/
/*}*/
 
 .cw-step-img{
         border-radius: 16px;   
 }
/* Step badge */
.cw-img-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  z-index: 3;
}
#cw-img-step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: #813b8e;
  opacity: .12;
}
#cw-img-step-total {
  font-family: var(--font-display);
  font-size: 18px;
  color: #813b8e;
  opacity: .12;
}
 
/* Controls column */
#colorways .cw-controls {
  padding: 36px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
 
#colorways .cw-active-info {
  margin-bottom: 28px;
}
#colorways .cw-active-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: #813b8e;
  line-height: 1.1;
  margin-bottom: 12px;
  transition: opacity .25s;
}
#colorways .cw-active-desc {
  font-size: 15px;
  line-height: 1.75;
  color: #606062;
  min-height: 52px;
  transition: opacity .25s;
}
 
/* Slider label */
#colorways .cw-slider-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #2bbba7;
  margin-bottom: 14px;
}
 
/* Slider wrap */
#colorways .cw-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
#colorways .cw-thumbs-viewport {
  flex: 1;
  overflow: hidden;
}
#colorways .cw-thumbs-track {
  display: flex;
  gap: 12px;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
 
/* Step boxes */
#colorways .cw-thumb {
  flex: 0 0 160px;
  background: #f7f8fa;
  border: 2px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 20px 12px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all .22s ease;
  min-height: 110px;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
#colorways .cw-thumb:hover {
  border-color: rgba(129,59,142,.25);
  background: #fff;
  box-shadow: 0 4px 14px rgba(129,59,142,.1);
}
#colorways .cw-thumb.active {
  border-color: #813b8e;
  background: rgba(129,59,142,.06);
  box-shadow: 0 0 0 3px rgba(129,59,142,.12);
}
#colorways .cw-thumb.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, #813b8e, #2bbba7);
  border-radius: 10px 10px 0 0;
}
 
.cw-thumb-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: #813b8e;
  line-height: 1;
}
#colorways .cw-thumb-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #2bbba7;
  line-height: 1.35;
}
 
/* Slider buttons */
#colorways .cw-slider-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f7f8fa;
  border: 1.5px solid rgba(0,0,0,.1);
  color: #606062;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
}
#colorways .cw-slider-btn:hover {
  background: rgba(129,59,142,.1);
  border-color: #813b8e;
  color: #813b8e;
}
#colorways .cw-slider-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}
 
/* Dots */
#colorways .cw-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
#colorways .cw-dot {
  width: 8px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0,0,0,.12);
  cursor: pointer;
  transition: all .3s;
}
#colorways .cw-dot.active {
  width: 24px;
  background: #813b8e;
}
 
/* ── Responsive ── */
@media (max-width: 1024px) {
  #colorways { padding: 56px 0 40px; }
  #colorways .cw-header { padding: 0 36px 36px; }
  #colorways .cw-controls { padding: 32px 28px; }
}
 
@media (max-width: 767px) {
  #colorways { padding: 40px 0 20px; }
  #colorways .cw-header { padding: 0 20px 24px !important; }
  .cw-img-wrap {
    /*min-height: 260px !important;*/
    height: 260px !important;
    margin: 0 20px;
    border-radius: 16px;
  }
  #colorways .cw-controls { padding: 24px 20px 32px !important; }
  #colorways .cw-active-name { font-size: 17px !important; }
  #colorways .cw-active-desc { font-size: 13px !important; min-height: auto !important; }
  #colorways .cw-thumb { flex: 0 0 110px !important; min-height: 85px !important; padding: 14px 8px 12px !important; }
  .cw-thumb-num { font-size: 22px !important; }
  #colorways .cw-thumb-label { font-size: 9px !important; }
  #cw-img-step-num { font-size: 40px !important; }
}
 
@media (max-width: 480px) {
  #colorways .cw-header { padding: 0 16px 20px !important; }
  #colorways .cw-controls { padding: 20px 16px 24px !important; }
  .cw-img-wrap { margin: 0 16px !important; }
  #colorways .cw-thumb { flex: 0 0 95px !important; min-height: 78px !important; }
  .cw-thumb-num { font-size: 18px !important; }
}