/* ═══════════════════════════════════════════
   PRISM INTERACTIVE — BRAND STYLES
   Header font: Typekit (pqz4tyl). Paragraph: Manrope (see fonts/)
   ═══════════════════════════════════════════ */

/* Paragraph font: place Manrope .woff2 (or .woff) files in the /fonts/ folder.
   If you only have static weight files, remove the variable @font-face block below. */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-VariableFont_wght.woff2') format('woff2-variations'),
       url('fonts/Manrope-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Regular.woff2') format('woff2'),
       url('fonts/Manrope-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Medium.woff2') format('woff2'),
       url('fonts/Manrope-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-SemiBold.woff2') format('woff2'),
       url('fonts/Manrope-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Bold.woff2') format('woff2'),
       url('fonts/Manrope-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors */
  --primary: #28324d;
  --primary-bg: #F9F5EE;
  --secondary-bg: #FFFBF7;
  --accent: #DC574B;
  --accent-dim: rgba(220,87,75,0.12);
  --accent-glow: rgba(220,87,75,0.25);
  --secondary-accent: #b8d5f7;
  --secondary-accent-dim: rgba(227,236,246,0.6);

  /* Semantic mapping */
  --bg: var(--primary-bg);
  --surface: var(--secondary-bg);
  --surface-raised: #FFFEFC;
  --border: rgba(40,50,77,0.1);
  --border-hover: rgba(40,50,77,0.2);
  --text: var(--primary);
  --text-muted: rgba(40,50,77,0.65);
  --warm: #c4a574;
  --warm-dim: rgba(196,165,116,0.15);
  --warm-glow: rgba(196,165,116,0.25);
  --coral: #DC574B;
  --coral-dim: rgba(220,87,75,0.12);

  /* Side padding */
  --side-padding: 10%;

  /* Typography: headers from Typekit (pqz4tyl), body Manrope.
     To use your Typekit font for headings, add: :root { --tk-header: 'YourFontName', serif; } in a style block or override. */
  --header-font: var(--tk-header, 'Georgia', serif);
  --serif: var(--header-font);
  --sans: 'Manrope', system-ui, sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg); color:var(--text); font-family:var(--sans);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  font-weight:400; letter-spacing:0.01em;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* ─── GRAIN OVERLAY (luxury subtle texture) ─── */
body::before {
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:128px; opacity:0.6;
}

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px var(--side-padding);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(249,245,238,0.85); backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid var(--border);
  transition:all 0.3s;
}
nav.scrolled { padding:12px var(--side-padding); }
.nav-logo {
  font-family:var(--serif); font-size:1.5rem; color:var(--primary);
  text-decoration:none; letter-spacing:-0.02em;
  display:inline-flex; align-items:center; gap:10px;
}
.nav-logo img { height:32px; width:auto; display:block; flex-shrink:0; }
.nav-logo span { color:var(--primary); }
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a {
  color:var(--text-muted); text-decoration:none; font-size:0.875rem;
  font-weight:500; transition:color 0.2s; letter-spacing:0.01em;
  position:relative;
}
.nav-links a:hover { color:var(--primary); }
.nav-links a.active { color:var(--accent); }
.nav-links a.active-warm { color:var(--warm); }
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px;
  background:var(--accent); transition:width 0.3s;
}
.nav-links a:hover::after { width:100%; }
.nav-cta {
  background:var(--accent); color:#fff; padding:10px 24px;
  border-radius:100px; font-weight:600; font-size:0.875rem;
  text-decoration:none; transition:all 0.25s; border:none; cursor:pointer;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 4px 24px var(--accent-glow); color:#fff; }
.nav-links a.nav-cta { color:#fff; }
.nav-links a.nav-cta:hover { color:#fff; }
.nav-links a.nav-cta::after { display:none; }

.hamburger { display:none; background:none; border:none; cursor:pointer; padding:4px; z-index:1001; }
.hamburger span { display:block; width:24px; height:2px; background:var(--primary); margin:5px 0; transition:0.3s; border-radius:2px; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(249,245,238,0.98); backdrop-filter:blur(20px);
  flex-direction:column; align-items:center; justify-content:center; gap:32px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:1.3rem; color:var(--primary); text-decoration:none; font-weight:500; }
.mobile-menu .nav-cta { font-size:1rem; padding:14px 32px; color:#fff; }

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn-primary {
  background:var(--accent); color:#fff; padding:16px 36px;
  border-radius:100px; font-weight:600; font-size:0.95rem;
  text-decoration:none; transition:all 0.25s; border:none; cursor:pointer;
  font-family:var(--sans); display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 32px var(--accent-glow); color:#fff; }
.btn-primary.warm { background:var(--warm); color:var(--primary); }
.btn-primary.warm:hover { box-shadow:0 6px 32px var(--warm-glow); color:var(--primary); }
.btn-secondary {
  background:transparent; color:var(--primary); padding:16px 36px;
  border-radius:100px; font-weight:500; font-size:0.95rem;
  text-decoration:none; transition:all 0.25s; border:1px solid var(--border);
  cursor:pointer; font-family:var(--sans); display:inline-flex; align-items:center; gap:8px;
}
.btn-secondary:hover { border-color:var(--accent); background:var(--accent-dim); color:var(--primary); }

/* ═══════════════════════════════════════════
   SECTION UTILITIES
   ═══════════════════════════════════════════ */
section { padding:120px 0; position:relative; }
.section-label {
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.15em;
  color:var(--accent); font-weight:600; margin-bottom:16px;
}
.section-label.warm { color:var(--warm); }
.section-title {
  font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.5rem);
  line-height:1.1; letter-spacing:-0.02em; max-width:700px; font-weight:400;
}
.section-title em { font-style:italic; color:var(--accent); }
.section-title em.green { color:var(--accent); }
.section-desc {
  color:var(--text-muted); font-size:1.05rem; line-height:1.7;
  max-width:560px; margin-top:20px;
}
.section-center { text-align:center; }
.section-center .section-title,
.section-center .section-desc { margin-left:auto; margin-right:auto; }

.surface-section { 
  background:var(--surface); 
  border-top:1px solid var(--border); 
  border-bottom:1px solid var(--border);
  margin-left: calc(-1 * var(--side-padding));
  margin-right: calc(-1 * var(--side-padding));
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }

.reveal-left {
  opacity:0; transform:translateX(-40px);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right {
  opacity:0; transform:translateX(40px);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right.visible { opacity:1; transform:translateX(0); }

.reveal-scale {
  opacity:0; transform:scale(0.92);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale.visible { opacity:1; transform:scale(1); }

/* stagger children */
.stagger > * { transition-delay:calc(var(--i,0) * 0.08s); }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)} }
@keyframes spin-slow { from{transform:rotate(0deg)}to{transform:rotate(360deg)} }
@keyframes dash { to{stroke-dashoffset:0} }
@keyframes shimmer {
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes morph {
  0%,100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
  25%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
  50%{border-radius:50% 60% 30% 60% / 30% 50% 70% 50%}
  75%{border-radius:60% 40% 60% 40% / 60% 40% 50% 60%}
}
@keyframes gradient-shift {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes orbit {
  from{transform:rotate(0deg) translateX(120px) rotate(0deg)}
  to{transform:rotate(360deg) translateX(120px) rotate(-360deg)}
}
@keyframes glow-pulse {
  0%,100%{opacity:0.3;transform:scale(1)}
  50%{opacity:0.6;transform:scale(1.05)}
}

/* ═══════════════════════════════════════════
   HERO VISUAL ELEMENTS
   ═══════════════════════════════════════════ */
.hero-visual {
  position:absolute; top:50%; right:var(--side-padding); transform:translateY(-50%);
  width:480px; height:480px; pointer-events:none;
}
.hero-orb {
  position:absolute; border-radius:50%; filter:blur(60px);
  animation:glow-pulse 4s ease-in-out infinite;
}
.hero-orb-1 {
  width:300px; height:300px; top:20%; left:10%;
  background:radial-gradient(circle, rgba(220,87,75,0.08) 0%, transparent 70%);
}
.hero-orb-2 {
  width:200px; height:200px; bottom:10%; right:5%;
  background:radial-gradient(circle, rgba(227,236,246,0.5) 0%, transparent 70%);
  animation-delay:2s;
}
.hero-ring {
  position:absolute; border:1px solid rgba(40,50,77,0.08); border-radius:50%;
  animation:spin-slow 40s linear infinite;
}
.hero-ring-1 { width:400px; height:400px; top:10%; left:5%; }
.hero-ring-2 { width:280px; height:280px; top:25%; left:18%; animation-direction:reverse; animation-duration:30s; }
.hero-ring-3 { width:160px; height:160px; top:38%; left:32%; animation-duration:20s; }

.hero-dot {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--accent);
}
.hero-dot-1 { top:15%; right:30%; animation:orbit 20s linear infinite; }
.hero-dot-2 { top:60%; right:10%; animation:orbit 28s linear infinite reverse; }
.hero-dot-3 { top:35%; right:60%; animation:orbit 24s linear infinite; opacity:0.5; }

.hero-prism {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:120px; height:120px;
}
.hero-prism svg { width:100%; height:100%; }

/* Floating furniture silhouettes */
.float-item {
  position:absolute; opacity:0.06; animation:float 6s ease-in-out infinite;
}
.float-item:nth-child(2) { animation-delay:1s; animation-duration:7s; }
.float-item:nth-child(3) { animation-delay:2s; animation-duration:8s; }

/* ═══════════════════════════════════════════
   PRODUCT IMAGERY — SVG ROOM SCENES
   ═══════════════════════════════════════════ */
.scene-container {
  position:relative; width:100%; aspect-ratio:16/10; border-radius:var(--radius-lg);
  overflow:hidden; background:var(--surface);
  border:1px solid var(--border);
}
.scene-container svg { width:100%; height:100%; }

/* ═══════════════════════════════════════════
   INTERACTIVE FEATURE SHOWCASE
   ═══════════════════════════════════════════ */
.showcase-tabs {
  display:flex; gap:4px; background:var(--surface-raised);
  border-radius:100px; padding:4px; width:fit-content; margin-bottom:32px;
}
.showcase-tab {
  padding:10px 24px; border-radius:100px; font-size:0.85rem;
  font-weight:500; cursor:pointer; transition:all 0.3s;
  color:var(--text-muted); background:transparent; border:none;
  font-family:var(--sans);
}
.showcase-tab.active { background:var(--accent); color:#fff; }
.showcase-tab:hover:not(.active) { color:var(--text); }

.showcase-panel { display:none; animation:fadeIn 0.4s ease; }
.showcase-panel.active { display:block; }

/* ═══════════════════════════════════════════
   ANIMATED COUNTER
   ═══════════════════════════════════════════ */
.counter { font-family:var(--serif); font-variant-numeric:tabular-nums; }

/* ═══════════════════════════════════════════
   CURSOR FOLLOWER (optional hero effect)
   ═══════════════════════════════════════════ */
.cursor-glow {
  position:fixed; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(220,87,75,0.04) 0%, transparent 70%);
  pointer-events:none; z-index:0; transition:transform 0.15s ease-out;
  transform:translate(-50%,-50%);
}

/* ═══════════════════════════════════════════
   MARQUEE / SCROLLING TEXT
   ═══════════════════════════════════════════ */
.marquee-wrap {
  overflow:hidden; white-space:nowrap; padding:32px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin-left: calc(-1 * var(--side-padding));
  margin-right: calc(-1 * var(--side-padding));
}
.marquee-track {
  display:inline-flex; gap:64px; animation:marquee 30s linear infinite;
}
.marquee-track span {
  font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.5rem);
  color:rgba(40,50,77,0.08); font-style:italic; flex-shrink:0;
}
.marquee-track span em { color:rgba(220,87,75,0.15); }
@keyframes marquee { from{transform:translateX(0)}to{transform:translateX(-50%)} }

/* ═══════════════════════════════════════════
   GRID BACKGROUND PATTERN
   ═══════════════════════════════════════════ */
.grid-bg {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:0.5;
}
.grid-bg::before {
  content:''; position:absolute; inset:-1px;
  background-image:
    linear-gradient(rgba(40,50,77,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,50,77,0.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 20%, transparent 70%);
}

/* ═══════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════ */
.cta-banner {
  background:linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-accent-dim) 100%);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:80px 64px; text-align:center; margin:0;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(220,87,75,0.04) 0%, transparent 60%);
}
.cta-banner.warm::before {
  background:radial-gradient(ellipse at center, rgba(196,165,116,0.06) 0%, transparent 60%);
}
.cta-banner h2 {
  font-family:var(--serif); font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.1; margin-bottom:20px; position:relative; font-weight:400;
}
.cta-banner h2 em { font-style:italic; color:var(--accent); }
.cta-banner.warm h2 em { color:var(--warm); }
.cta-banner p {
  color:var(--text-muted); font-size:1.05rem; max-width:520px;
  margin:0 auto 36px; line-height:1.65; position:relative;
}
.cta-banner .btn-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ═══════════════════════════════════════════
   CALENDLY MODAL
   ═══════════════════════════════════════════ */
.calendly-modal {
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
}
.calendly-modal.is-open { opacity:1; visibility:visible; }
.calendly-modal__backdrop {
  position:absolute; inset:0; background:rgba(40,50,77,0.5); backdrop-filter:blur(6px);
  cursor:pointer;
}
.calendly-modal__box {
  position:relative; background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:0 24px 80px rgba(40,50,77,0.2);
  max-width:900px; width:100%; max-height:90vh; overflow:auto;
  display:flex; flex-direction:column; align-items:stretch;
}
.calendly-modal__close {
  position:absolute; top:16px; right:16px; z-index:2;
  width:44px; height:44px; border:none; border-radius:50%;
  background:var(--border); color:var(--text); font-size:1.5rem; line-height:1;
  cursor:pointer; transition:background 0.2s, color 0.2s;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.calendly-modal__close:hover { background:var(--accent); color:#fff; }
.calendly-modal__inner {
  padding:24px; min-width:0;
}
.calendly-modal__inner .calendly-inline-widget {
  min-width:320px; height:700px; width:100%;
}

/* ═══════════════════════════════════════════
   WAITLIST MODAL (Spaces)
   ═══════════════════════════════════════════ */
.waitlist-modal {
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
}
.waitlist-modal.is-open { opacity:1; visibility:visible; }
.waitlist-modal__backdrop {
  position:absolute; inset:0; background:rgba(40,50,77,0.5); backdrop-filter:blur(6px);
  cursor:pointer;
}
.waitlist-modal__box {
  position:relative; background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:0 24px 80px rgba(40,50,77,0.2);
  max-width:440px; width:100%;
  display:flex; flex-direction:column; align-items:stretch;
}
.waitlist-modal__close {
  position:absolute; top:16px; right:16px; z-index:2;
  width:44px; height:44px; border:none; border-radius:50%;
  background:var(--border); color:var(--text); font-size:1.5rem; line-height:1;
  cursor:pointer; transition:background 0.2s, color 0.2s;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.waitlist-modal__close:hover { background:var(--accent); color:#fff; }
.waitlist-modal__inner {
  padding:32px 24px 28px; min-width:0;
}
.waitlist-modal__title {
  font-size:1.5rem; font-weight:600; color:var(--text); margin:0 0 8px;
}
.waitlist-modal__desc {
  font-size:0.95rem; color:var(--text-muted); margin:0 0 24px; line-height:1.45;
}
.waitlist-form-row { margin-bottom:20px; }
.waitlist-form-row label {
  display:block;
  font-size:0.875rem;
  font-weight:500;
  color:var(--text);
  margin-bottom:8px;
}
.waitlist-form-row .required { color:var(--accent); }
.waitlist-form input[type="text"],
.waitlist-form input[type="email"] {
  width:100%;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font-size:0.95rem;
  font-family:inherit;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.waitlist-form input::placeholder { color:var(--text-muted); }
.waitlist-form input:focus {
  outline:none;
  border-color:var(--border-hover);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.waitlist-form-actions { margin-top:8px; }
.waitlist-form-actions .btn-primary { width:100%; justify-content:center; }
.waitlist-form-status {
  margin-top:16px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  font-size:0.9rem;
}
.waitlist-form-status.success { background:var(--accent-dim); color:var(--accent); }
.waitlist-form-status.error { background:rgba(220,87,75,0.12); color:var(--accent); }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer {
  padding:64px 0 40px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:start;
  flex-wrap:wrap; gap:40px;
}
.footer-brand { max-width:300px; }
.footer-logo {
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--primary);
  text-decoration:none;
  letter-spacing:-0.02em;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.footer-logo img { height:32px; width:auto; display:block; flex-shrink:0; }
.footer-logo span { color:var(--primary); }
.footer-logo:hover { color:var(--primary); }
.footer-brand p { font-size:0.8rem; color:var(--text-muted); line-height:1.6; }
.footer-col h5 {
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--text-muted); margin-bottom:16px; font-weight:600;
}
.footer-col a {
  display:block; color:var(--text); text-decoration:none;
  font-size:0.85rem; margin-bottom:10px; transition:color 0.2s;
}
.footer-col a:hover { color:var(--accent); }
.footer-bottom {
  width:100%; padding-top:32px; margin-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; font-size:0.75rem; color:var(--text-muted);
}
.footer-bottom a { color:var(--text-muted); text-decoration:none; }
.footer-bottom a:hover { color:var(--primary); }

/* ═══════════════════════════════════════════
   CONTACT PAGE (global styling)
   ═══════════════════════════════════════════ */
.contact-section {
  padding:140px 0 120px;
  min-height:calc(100vh - 200px);
  display:flex;
  align-items:center;
}
.contact-wrap {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:80px;
  align-items:start;
  max-width:1200px;
  width:100%;
}
.contact-intro { position:sticky; top:140px; }
.contact-title {
  font-family:var(--serif);
  font-size:clamp(2.5rem,4vw,3.5rem);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin-bottom:24px;
  color:var(--text);
}
.contact-desc {
  font-size:1rem;
  line-height:1.7;
  color:var(--text-muted);
  max-width:380px;
  margin-bottom:48px;
}
.contact-envelope {
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.contact-envelope .envelope-svg {
  width:80px;
  height:60px;
  color:var(--accent);
  filter:drop-shadow(0 0 12px var(--accent-glow));
}

.contact-form-title {
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:400;
  color:var(--text);
  margin-bottom:32px;
}
.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px;
}
.contact-form-row {
  margin-bottom:24px;
}
.contact-form-row--full { grid-column:1 / -1; }
.contact-form-row--checkbox { grid-column:1 / -1; margin-bottom:28px; }
.contact-form-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; }
.contact-form label {
  display:block;
  font-size:0.875rem;
  font-weight:500;
  color:var(--text);
  margin-bottom:8px;
}
.contact-form .required { color:var(--text-muted); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width:100%;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font-size:0.95rem;
  font-family:var(--sans);
  transition:border-color 0.2s, box-shadow 0.2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:var(--text-muted); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline:none;
  border-color:var(--border-hover);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.contact-form textarea { min-height:140px; resize:vertical; }
.contact-notice {
  grid-column:1 / -1;
  font-size:0.8rem;
  color:var(--text-muted);
  margin-bottom:20px;
  line-height:1.5;
}
.checkbox-label {
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  font-weight:400;
}
.checkbox-label input[type="checkbox"] {
  width:18px;
  height:18px;
  margin-top:2px;
  flex-shrink:0;
  accent-color:var(--accent);
}
.checkbox-text { font-size:0.9rem; color:var(--text); }
.contact-link {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.contact-link:hover { color:var(--primary); }
.contact-submit {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 32px;
  border-radius:100px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-size:0.95rem;
  font-weight:600;
  font-family:var(--sans);
  cursor:pointer;
  transition:all 0.25s;
}
.contact-submit:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 32px var(--accent-glow);
}
.contact-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.contact-submit svg { flex-shrink:0; }
.contact-form-status {
  grid-column:1 / -1;
  margin-top:16px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  font-size:0.9rem;
}
.contact-form-status.success { background:var(--accent-dim); color:var(--accent); }
.contact-form-status.error { background:var(--coral-dim); color:var(--coral); }

@media(max-width:900px) {
  .contact-wrap { grid-template-columns:1fr; gap:56px; }
  .contact-intro { position:static; }
  .contact-form { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .contact-section { padding:120px 0 80px; }
}

/* ═══════════════════════════════════════════
   LEGAL / PRIVACY PAGE
   ═══════════════════════════════════════════ */
.legal-section {
  padding:140px 0 120px;
  min-height:50vh;
}
.legal-wrap {
  max-width:720px;
  width:100%;
}
.legal-intro {
  margin-bottom:40px;
}
.legal-title {
  font-family:var(--serif);
  font-size:clamp(2.5rem,4vw,3.5rem);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin-bottom:12px;
  color:var(--text);
}
.legal-meta {
  font-size:0.875rem;
  color:var(--text-muted);
  margin-bottom:32px;
}
.legal-lead {
  font-size:1.05rem;
  line-height:1.75;
  color:var(--text);
  margin-bottom:20px;
}
.legal-lead--caps {
  font-size:0.95rem;
  letter-spacing:0.02em;
  line-height:1.65;
}
.legal-intro > p {
  font-size:0.95rem;
  line-height:1.7;
  color:var(--text-muted);
}
.legal-intro a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal-intro a:hover { color:var(--primary); }

.legal-toc-dropdown {
  margin-bottom:48px;
  position:sticky;
  top:72px;
  z-index:100;
  background:var(--bg);
  padding:16px 0 20px;
  border-bottom:1px solid var(--border);
}
.legal-toc-label {
  display:block;
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--text-muted);
  margin-bottom:10px;
  font-weight:600;
  font-family:var(--sans);
}
.legal-toc-select {
  width:100%;
  max-width:400px;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font-size:0.95rem;
  font-family:var(--sans);
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2328324d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:44px;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.legal-toc-select:hover { border-color:var(--border-hover); }
.legal-toc-select:focus {
  outline:none;
  border-color:var(--border-hover);
  box-shadow:0 0 0 3px var(--accent-dim);
}

.legal-content {
  min-width:0;
}
.legal-block {
  margin-bottom:48px;
  scroll-margin-top:120px;
}
.legal-block:last-child { margin-bottom:0; }
.legal-content h2 {
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:400;
  color:var(--text);
  margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.legal-content p {
  font-size:0.95rem;
  line-height:1.75;
  color:var(--text-muted);
  margin-bottom:16px;
}
.legal-content p:last-child { margin-bottom:0; }
.legal-content ul {
  margin:16px 0 24px 1.25em;
  padding-left:0;
  list-style:disc;
}
.legal-content li {
  font-size:0.95rem;
  line-height:1.7;
  color:var(--text-muted);
  margin-bottom:10px;
}
.legal-content li:last-child { margin-bottom:0; }
.legal-content strong { color:var(--text); font-weight:600; }
.legal-content a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal-content a:hover { color:var(--primary); }
.legal-contact-block {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:24px;
  margin-top:8px;
}
.legal-contact-block a { font-weight:500; }

@media(max-width:600px) {
  .legal-section { padding:120px 0 80px; }
  .legal-toc-select { max-width:none; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:1024px) {
  :root { --side-padding: 5%; }
  nav { padding-top: 16px; padding-bottom: 16px; }
  nav.scrolled { padding-top: 12px; padding-bottom: 12px; }
  section { padding: 80px 0; }
  .hero-visual { display:none; }
  .cta-banner { padding:56px 32px; }
  footer { padding:48px 0 32px; }
}
@media(max-width:768px) {
  :root { --side-padding: 20px; }
  .nav-links { display:none; }
  .hamburger { display:block; }
}

/* ═══════════════════════════════════════════
   PAGE HERO (shared)
   ═══════════════════════════════════════════ */
.page-hero {
  min-height:85vh; display:flex; flex-direction:column; justify-content:center;
  padding:140px 0 80px; position:relative; overflow:hidden;
}
.page-hero--short { min-height:50vh; padding:160px 0 60px; }
.page-hero--medium { min-height:75vh; padding:160px 0 80px; }
.page-hero .hero-glow {
  position:absolute; width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle,rgba(220,87,75,.07) 0%,transparent 70%);
  top:-300px; right:-300px; pointer-events:none;
}
.page-hero--warm .hero-glow {
  background:radial-gradient(circle,rgba(245,193,108,.06) 0%,transparent 70%);
  right:-200px;
}
.page-hero .badge {
  display:inline-flex; align-items:center; gap:8px; background:var(--accent-dim);
  border:1px solid rgba(220,87,75,.15); padding:8px 18px; border-radius:100px;
  font-size:.8rem; font-weight:600; color:var(--accent); width:fit-content;
  margin-bottom:32px; animation:fadeUp .6s ease both;
}
.page-hero .badge::before {
  content:''; width:6px; height:6px; border-radius:50%; background:var(--accent);
  animation:pulse 2s infinite;
}
.page-hero--warm .badge { background:var(--warm-dim); border-color:rgba(245,193,108,.2); color:var(--warm); }
.page-hero--warm .badge::before { background:var(--warm); }
.page-hero h1 {
  font-family:var(--serif); font-size:clamp(2.8rem,5.5vw,5rem); line-height:1.08;
  letter-spacing:-0.03em; max-width:800px; font-weight:400;
  animation:fadeUp .6s ease .1s both;
}
.page-hero h1 em { font-style:italic; color:var(--accent); }
.page-hero--warm h1 em { color:var(--warm); }
.page-hero .sub {
  font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--text-muted); max-width:540px;
  line-height:1.65; margin-top:28px; animation:fadeUp .6s ease .2s both;
}
.page-hero--short .sub { font-size:clamp(1rem,1.3vw,1.15rem); max-width:500px; margin-top:20px; }
.page-hero--short h1 { font-size:clamp(2.8rem,5.5vw,4.5rem); max-width:700px; }
.page-hero .actions { display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; animation:fadeUp .6s ease .3s both; }

/* Shared hero image styles (Index and Showroom) */
.hero-visual--image {
  width: min(600px, 75vw);
  height: min(600px, 75vh);
  max-height: min(600px, 75vh);
  right: 0;
  overflow: hidden;
}

.hero-visual--image .hero-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  /* Gradient mask: fade in from left (transparent left → opaque right) */
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 20%, black 45%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 20%, black 45%);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  animation: heroImageFadeIn 1.2s cubic-bezier(0.25,0.46,0.45,0.94) 0.2s both;
}

@keyframes heroImageFadeIn {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Index hero */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:140px 0 80px; position:relative; overflow:hidden; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--accent-dim); border:1px solid rgba(220,87,75,0.2); padding:8px 18px; border-radius:100px; font-size:0.8rem; font-weight:600; color:var(--accent); width:fit-content; margin-bottom:32px; animation:fadeUp 0.6s ease both; }
.hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; }
.hero h1 { font-family:var(--serif); font-size:clamp(3rem,6.5vw,6rem); line-height:1.05; letter-spacing:-0.03em; max-width:900px; font-weight:400; animation:fadeUp 0.6s ease 0.1s both; }
.hero h1 em { font-style:italic; color:var(--accent); }
.hero-sub { font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--text-muted); max-width:580px; line-height:1.65; margin-top:28px; animation:fadeUp 0.6s ease 0.2s both; }
.hero-actions { display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; animation:fadeUp 0.6s ease 0.3s both; }
.proof-bar { display:flex; gap:48px; margin-top:72px; padding-top:40px; border-top:1px solid var(--border); animation:fadeUp 0.6s ease 0.4s both; flex-wrap:wrap; }
.proof-stat { display:flex; flex-direction:column; gap:4px; }
.proof-stat .number { font-family:var(--serif); font-size:2rem; color:var(--accent); }
.proof-stat .label { font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; font-weight:500; }

/* ═══════════════════════════════════════════
   INDEX PAGE
   ═══════════════════════════════════════════ */
.cost-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:56px; }
.cost-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:40px; position:relative; overflow:hidden; }
.cost-card.problem { border-color:rgba(255,107,90,0.15); }
.cost-card.problem::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--coral), transparent); }
.cost-card.solution { border-color:rgba(220,87,75,0.15); }
.cost-card.solution::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), transparent); }
.cost-card h3 { font-family:var(--serif); font-size:1.5rem; margin-bottom:24px; font-weight:400; }
.cost-card.problem h3 { color:var(--coral); }
.cost-card.solution h3 { color:var(--accent); }
.cost-list { list-style:none; display:flex; flex-direction:column; gap:16px; }
.cost-list li { display:flex; gap:14px; align-items:flex-start; font-size:0.95rem; line-height:1.6; color:var(--text-muted); }
.cost-list li .icon { flex-shrink:0; margin-top:3px; }
.cost-card.problem .icon { color:var(--coral); }
.cost-card.solution .icon { color:var(--accent); }
.cost-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.cost-stat-card { background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-sm); padding:36px; text-align:center; transition:border-color 0.3s, transform 0.3s; }
.cost-stat-card:hover { border-color:rgba(220,87,75,0.2); transform:translateY(-3px); }
.cost-stat-card .big { font-family:var(--serif); font-size:2.5rem; color:var(--coral); }
.cost-stat-card .desc { font-size:0.85rem; color:var(--text-muted); margin-top:8px; line-height:1.5; }

.products-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:56px; }
.product-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:border-color 0.3s; }
.product-card:hover { border-color:var(--border-hover); }
.product-card .card-visual { width:100%; height:240px; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.product-card .card-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.product-card .card-body { padding:40px; }
.product-card .tag { display:inline-flex; padding:6px 14px; border-radius:100px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:20px; }
.product-card.showroom .tag { background:var(--accent-dim); color:var(--accent); }
.product-card.spaces .tag { background:var(--accent-dim); color:var(--accent); }
.product-card h3 { font-family:var(--serif); font-size:2rem; letter-spacing:-0.02em; margin-bottom:16px; font-weight:400; }
.product-card h3 span { font-style:italic; }
.product-card.showroom h3 span { color:var(--accent); }
.product-card.spaces h3 span { color:var(--accent); }
.product-card .subtitle { font-size:1rem; color:var(--text-muted); line-height:1.65; margin-bottom:28px; }
.feature-list { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.feature-list li { display:flex; gap:12px; align-items:center; font-size:0.9rem; color:var(--text); }
.feature-list li .dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.product-card.showroom .dot { background:var(--accent); }
.product-card.spaces .dot { background:var(--accent); }
.product-card .card-cta { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:0.9rem; text-decoration:none; transition:gap 0.25s; }
.product-card.showroom .card-cta { color:var(--accent); }
.product-card.spaces .card-cta { color:var(--accent); }
.product-card .card-cta:hover { gap:14px; }

.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:56px; }
.how-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:40px 32px; position:relative; transition:border-color 0.3s, transform 0.3s; }
.how-card:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.how-card .step-num { font-family:var(--serif); font-size:3.5rem; color:var(--accent); opacity:0.15; position:absolute; top:16px; right:24px; line-height:1; }
.how-card h4 { font-family:var(--serif); font-size:1.35rem; margin-bottom:12px; font-weight:400; }
.how-card p { font-size:0.9rem; color:var(--text-muted); line-height:1.65; }

/* ═══════════════════════════════════════════
   SPLIT OUTCOME SECTION
   ═══════════════════════════════════════════ */
.surface-section.splitoutcome-section {
  background: var(--surface);
  color: var(--text);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.splitoutcome-section .section-title {
  max-width: 800px;
}

.splitoutcome-section .section-desc {
  max-width: 600px;
}

.outcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 80px;
  padding-bottom: 40px;
}

.outcome-column {
  display: flex;
  flex-direction: column;
}

.outcome-hr {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  margin-bottom: 32px;
}

.outcome-column:nth-child(2) .outcome-hr {
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
}

.outcome-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 24px;
}

.outcome-pre {
  font-size: 1.25rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.outcome-main {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--secondary-accent), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  padding-bottom: 0.1em;
}

.outcome-sub {
  font-size: 1.25rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
}

@media(max-width: 1024px) {
  .outcome-grid {
    gap: 40px;
  }
}

@media(max-width: 768px) {
  .outcome-grid {
    grid-template-columns: 1fr;
    gap: 64px;
    margin-top: 60px;
  }
  .outcome-main {
    font-size: 2.8rem;
  }
}

.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.testimonial-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; gap:20px; transition:border-color 0.3s, transform 0.3s; }
.testimonial-card:hover { border-color:var(--border-hover); transform:translateY(-3px); }
.testimonial-card .quote { font-family:var(--serif); font-size:1.2rem; line-height:1.5; font-style:italic; flex:1; }
.testimonial-card .author { font-size:0.8rem; color:var(--text-muted); font-weight:500; }
.testimonial-card .stars { color:var(--warm); font-size:0.9rem; letter-spacing:2px; }

/* ═══════════════════════════════════════════
   SHOWROOM PAGE
   ═══════════════════════════════════════════ */
/* Apple-style comparison: tabs + bar chart */
.compare-section .compare-title { font-family:var(--serif); font-size:clamp(1.75rem, 4vw, 2.25rem); font-weight:400; line-height:1.2; margin-top:12px; margin-bottom:0; }
.compare-tabs { display:flex; gap:0; margin-top:40px; border-bottom:1px solid var(--border); overflow-x:auto; }
.compare-tab { flex-shrink:0; padding:14px 20px 14px 0; margin-right:24px; font-family:var(--sans); font-size:.95rem; font-weight:500; color:var(--text-muted); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:color .2s, border-color .2s; }
.compare-tab:hover { color:var(--text); }
.compare-tab.is-selected { color:var(--text); border-bottom-color:var(--accent); }
.compare-metric { font-family:var(--serif); font-size:1.35rem; font-weight:400; color:var(--text); margin-top:28px; margin-bottom:32px; }
.compare-chart { display:flex; flex-direction:column; gap:28px; width:100%; margin-top:48px; padding-right:80px; box-sizing:border-box; }
.compare-panel { display:none; }
.compare-panel.is-visible { display:flex; flex-direction:column; gap:28px; }
.compare-row { display:flex; flex-direction:column; gap:10px; width:100%; }
.compare-bar-container { display:flex; align-items:center; width:100%; position:relative; }
.compare-bar-wrap { height:6px; background:rgba(40,50,77,0.05); border-radius:3px; flex-shrink:0; position:relative; }
.compare-bar { width:100%; height:6px; background:rgba(40,50,77,0.15); border-radius:3px; transform-origin:left; transform:scaleX(0); }
.compare-bar--accent { background:linear-gradient(90deg, var(--secondary-accent), var(--accent)); }
.compare-panel.is-visible .compare-bar--animate { animation:compare-bar-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes compare-bar-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.compare-label { font-size:.85rem; color:var(--text); opacity:0.8; margin-top:4px; }
.compare-row--baseline .compare-label { opacity:0.6; }
.compare-row--highlight .compare-label { font-weight:600; opacity:1; }
.compare-value { font-size:1.1rem; font-weight:500; color:var(--text-muted); position:absolute; left:calc(100% + 12px); white-space:nowrap; }
.compare-value--accent { 
  background:linear-gradient(90deg, var(--secondary-accent), var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:700; 
  font-size:1.4rem; 
  display:inline-block;
}

.comparison-grid { display:grid; grid-template-columns:1fr 40px 1fr; gap:0; margin-top:56px; align-items:stretch; }
.comp-col { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:40px; display:flex; flex-direction:column; gap:20px; transition:transform .3s; }
.comp-col:hover { transform:translateY(-3px); }
.comp-col.before { border-color:rgba(255,107,90,.15); }
.comp-col.after { border-color:rgba(200,255,62,.12); }
.comp-col h3 { font-family:var(--serif); font-size:1.5rem; font-weight:400; }
.comp-col.before h3 { color:var(--coral); }
.comp-col.after h3 { color:var(--accent); }
.comp-row { display:flex; gap:12px; align-items:flex-start; }
.comp-row .icon { flex-shrink:0; margin-top:2px; }
.comp-row p { color:var(--text-muted); font-size:.92rem; line-height:1.6; }
.comp-col.before .icon { color:var(--coral); }
.comp-col.after .icon { color:var(--accent); }
.comp-divider { display:flex; align-items:center; justify-content:center; }
.comp-divider span { background:var(--surface-raised); border:1px solid var(--border); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--text-muted); }

#capabilities { position:relative; padding:80px 0 64px; }
.cap-sticky { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.cap-tabs-content { display:flex; flex-direction:column; align-items:center; margin-top:40px; margin-left:auto; margin-right:auto; width:100%; max-width:840px; }
.cap-tabs-outer { width:100%; }
.cap-tabs-scroll-wrap { width:100%; }
.cap-tabs { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:0; width:100%; border-bottom:1px solid rgba(40,50,77,.12); padding-bottom:0; }
.cap-tabs-arrow { display:none; }
.cap-tab { appearance:none; background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-1px; padding:14px 0; font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--text-muted); cursor:pointer; transition:color .25s ease, border-color .25s ease; white-space:nowrap; }
.cap-tab:hover { color:var(--text); }
.cap-tab.is-selected { color:transparent; background:linear-gradient(90deg, var(--accent), var(--secondary-accent), var(--primary)); -webkit-background-clip:text; background-clip:text; border-bottom-color:var(--primary); }
/* 3x4 grid: image 2x4 (left), description 1x2 (top right), selectors 1x2 (bottom right). Image 1.5x = 540px */
.cap-slide-row { display:grid; grid-template-columns: 540px 1fr; grid-template-rows: repeat(4, 1fr); gap:0 24px; width:100%; min-height:540px; align-items:stretch; }
.cap-slide-media { grid-column:1; grid-row:1 / -1; aspect-ratio:1/1; overflow:hidden; border-radius:0; min-height:0; }
.cap-slide-content { grid-column:2; grid-row:1 / 2; padding:0; text-align:right; display:flex; align-items:flex-start; justify-content:flex-end; }
.cap-slide-content p { margin:0; }
.cap-variants { grid-column:2; grid-row:2 / -1; display:flex; flex-direction:column; gap:8px; align-items:flex-end; justify-content:flex-start; padding-top:20px; border-top:1px solid var(--border); }
.cap-variants-row { display:flex; flex-direction:column; }
.cap-variants-scroll { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.cap-variants-arrow { display:none; }
.cap-variants-helper { font-size:.75rem; color:var(--text-muted); margin-bottom:4px; text-align:right; }
.cap-variant { appearance:none; padding:6px 0; border:none; border-radius:0; background:transparent; color:var(--text-muted); font-family:var(--sans); font-size:0.875rem; font-weight:500; cursor:pointer; transition:color .2s; letter-spacing:0.01em; position:relative; text-align:right; }
.cap-variant:hover { color:var(--primary); }
.cap-variant.is-selected { color:var(--accent); }
.cap-variant::after { content:''; position:absolute; bottom:2px; left:0; width:0; height:1.5px; background:var(--accent); transition:width 0.3s; }
.cap-variant:hover::after { width:100%; }
.cap-variant.is-selected::after { width:100%; }
.cap-scroll-wrap { position:relative; width:100%; margin-top:24px; opacity:0; transform:translateY(48px); transition:opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1); }
#capabilities.capabilities-in-view .cap-scroll-wrap { opacity:1; transform:translateY(0); }
.cap-slide { display:none; padding:0; }
.cap-slide.in-view { display:block; }
.cap-slide-inner { display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; max-width:100%; box-sizing:border-box; opacity:1; transition:opacity .4s ease; }
.cap-slide .cap-img { width:100%; height:100%; display:block; border-radius:0; object-fit:cover; background:var(--bg); box-shadow:0 8px 32px rgba(40,50,77,.08); }
.cap-slide p { font-size:1rem; color:var(--text-muted); line-height:1.65; max-width:100%; }

/* Stacked layout: 16:9 image, description below, no scene selectors (Spaces) */
#capabilities.capabilities--stacked .cap-tabs-content { max-width:1200px; }
#capabilities.capabilities--stacked .cap-slide-row { display:flex; flex-direction:column; grid-template-columns:none; grid-template-rows:none; gap:20px; min-height:0; align-items:stretch; }
#capabilities.capabilities--stacked .cap-slide-media { grid-column:auto; grid-row:auto; aspect-ratio:16/9; width:100%; max-width:100%; min-height:0; }
#capabilities.capabilities--stacked .cap-slide-content { grid-column:auto; grid-row:auto; text-align:left; justify-content:flex-start; padding:0; }
#capabilities.capabilities--stacked .cap-variants { display:none; }

/* Spaces page: use main accent instead of gold/warm */
.page-spaces .section-title em { color:var(--accent); }
.page-spaces .journey-card .step { color:var(--accent); }
.page-spaces .dual-card h3 em { color:var(--accent); }
.page-spaces .dual-card .feature-list li .dot { background:var(--accent); }

.use-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:56px; }
.use-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:40px; display:flex; flex-direction:column; gap:14px; transition:border-color .3s, transform .3s; }
.use-card:hover { border-color:var(--border-hover); transform:translateY(-3px); }
.use-card .use-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-weight:600; }
.use-card h4 { font-family:var(--serif); font-size:1.35rem; font-weight:400; }
.use-card p { font-size:.9rem; color:var(--text-muted); line-height:1.6; }

.roi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; }
.roi-card { background:var(--secondary-accent-dim); border:1px solid var(--border); border-radius:var(--radius-sm); padding:36px; text-align:center; transition:border-color .3s, transform .3s; }
.roi-card:hover { border-color:rgba(200,255,62,.15); transform:translateY(-3px); }
.roi-card .big { font-family:var(--serif); font-size:2.8rem; color:var(--accent); line-height:1; }
.roi-card .unit { font-size:.9rem; color:var(--accent); font-weight:500; }
.roi-card .desc { font-size:.82rem; color:var(--text-muted); margin-top:10px; line-height:1.5; }

/* ═══════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════ */
.vision-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:56px; align-items:center; }
.vision-text h3 { font-family:var(--serif); font-size:1.8rem; margin-bottom:20px; font-weight:400; line-height:1.3; }
.vision-text h3 em { font-style:italic; color:var(--warm); }
.vision-text p { color:var(--text-muted); font-size:1rem; line-height:1.7; margin-bottom:16px; }
.vision-visual { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.morph-blob { position:absolute; width:80%; height:80%; background:linear-gradient(135deg,rgba(200,255,62,.06),rgba(245,193,108,.04)); animation:morph 12s ease-in-out infinite; }
.inner-ring { position:relative; width:200px; height:200px; border:1px solid rgba(200,255,62,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; animation:spin-slow 30s linear infinite; }
.inner-ring::before { content:''; position:absolute; width:10px; height:10px; background:var(--accent); border-radius:50%; top:-5px; left:50%; transform:translateX(-50%); }
.center-icon { position:absolute; font-family:var(--serif); font-size:2.5rem; color:var(--accent); opacity:.6; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.value-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:40px 32px; transition:border-color .3s, transform .3s; position:relative; overflow:hidden; }
.value-card:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.value-card .value-num { font-family:var(--serif); font-size:4rem; position:absolute; top:12px; right:20px; color:var(--accent); opacity:.06; line-height:1; }
.value-card h4 { font-family:var(--serif); font-size:1.3rem; margin-bottom:12px; font-weight:400; }
.value-card p { font-size:.9rem; color:var(--text-muted); line-height:1.65; }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; }
.team-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; text-align:center; transition:border-color .3s, transform .3s; position:relative; overflow:hidden; }
.team-card:hover { border-color:rgba(200,255,62,.15); transform:translateY(-4px); }
.team-avatar { width:80px; height:80px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; position:relative; }
.avatar-ring { position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(200,255,62,.15); animation:spin-slow 20s linear infinite; }
.avatar-inner { width:100%; height:100%; border-radius:50%; background:linear-gradient(135deg,rgba(200,255,62,.1),rgba(245,193,108,.08)); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.5rem; color:var(--accent); }
.team-card h4 { font-family:var(--serif); font-size:1.1rem; margin-bottom:4px; font-weight:400; }
.team-card .role { font-size:.78rem; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.team-card p { font-size:.82rem; color:var(--text-muted); line-height:1.55; }
.timeline { display:flex; flex-direction:column; gap:0; margin-top:56px; position:relative; padding-left:50px; }
.timeline::before { content:''; position:absolute; left:24px; top:0; bottom:0; width:1px; background:linear-gradient(to bottom,var(--accent),var(--warm),transparent); }
.timeline-item { display:flex; gap:32px; padding:32px 0; position:relative; }
.timeline-dot { position:absolute; left:-32px; width:12px; height:12px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:6px; z-index:1; box-shadow:0 0 12px rgba(200,255,62,.3); }
.timeline-item:nth-child(2) .timeline-dot { background:var(--warm); box-shadow:0 0 12px rgba(245,193,108,.3); }
.timeline-item:nth-child(3) .timeline-dot { background:var(--accent); }
.timeline-content h4 { font-family:var(--serif); font-size:1.2rem; margin-bottom:8px; font-weight:400; }
.timeline-content p { font-size:.9rem; color:var(--text-muted); line-height:1.65; max-width:500px; }
.timeline-content .year { font-size:.72rem; color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; display:block; }

/* ═══════════════════════════════════════════
   NEWS PAGE
   ═══════════════════════════════════════════ */
.featured-post { display:grid; grid-template-columns:1.2fr 1fr; gap:0; background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden; margin-bottom:56px; transition:border-color .3s; }
.featured-post:hover { border-color:var(--border-hover); }
.featured-visual { position:relative; min-height:360px; overflow:hidden; }
.featured-visual svg { width:100%; height:100%; }
.featured-body { padding:48px; display:flex; flex-direction:column; justify-content:center; }
.featured-body .cat { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:16px; display:inline-flex; align-items:center; gap:6px; }
.featured-body .cat::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.featured-body h2 { font-family:var(--serif); font-size:1.8rem; line-height:1.2; margin-bottom:16px; font-weight:400; }
.featured-body h2 em { font-style:italic; color:var(--warm); }
.featured-body p { color:var(--text-muted); font-size:.95rem; line-height:1.65; margin-bottom:24px; }
.featured-body .meta { font-size:.78rem; color:var(--text-muted); display:flex; gap:16px; }
.featured-body .read-link { display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:600; font-size:.9rem; text-decoration:none; transition:gap .25s; }
.featured-body .read-link:hover { gap:14px; }
.articles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.article-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .3s, transform .3s; text-decoration:none; color:var(--text); display:flex; flex-direction:column; }
.article-card:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.article-visual { height:180px; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.article-visual svg { width:100%; height:100%; }
.article-body { padding:28px; flex:1; display:flex; flex-direction:column; }
.article-body .cat { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:12px; }
.article-body h3 { font-family:var(--serif); font-size:1.15rem; line-height:1.3; margin-bottom:12px; font-weight:400; }
.article-body p { color:var(--text-muted); font-size:.85rem; line-height:1.6; flex:1; margin-bottom:16px; }
.article-body .meta { font-size:.72rem; color:var(--text-muted); margin-top:auto; }
.filter-bar { display:flex; gap:8px; margin-bottom:40px; flex-wrap:wrap; }
.filter-btn { padding:8px 20px; border-radius:100px; font-size:.8rem; font-weight:500; cursor:pointer; transition:all .3s; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); font-family:var(--sans); }
.filter-btn.active { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.filter-btn:hover:not(.active) { color:var(--text); border-color:var(--border-hover); }
.newsletter { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:56px; text-align:center; margin-top:80px; position:relative; overflow:hidden; }
.newsletter::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(200,255,62,.04) 0%,transparent 60%); }
.newsletter h3 { font-family:var(--serif); font-size:1.6rem; margin-bottom:12px; font-weight:400; position:relative; }
.newsletter h3 em { font-style:italic; color:var(--accent); }
.newsletter p { color:var(--text-muted); font-size:.95rem; margin-bottom:28px; position:relative; }
.newsletter-form { display:flex; gap:12px; max-width:440px; margin:0 auto; position:relative; }
.newsletter-form input { flex:1; padding:14px 20px; border-radius:100px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:.9rem; font-family:var(--sans); outline:none; transition:border-color .3s; }
.newsletter-form input:focus { border-color:rgba(200,255,62,.3); }
.newsletter-form input::placeholder { color:var(--text-muted); }
.newsletter-form button { padding:14px 28px; border-radius:100px; background:var(--accent); color:var(--bg); font-weight:600; font-size:.9rem; border:none; cursor:pointer; font-family:var(--sans); transition:all .25s; white-space:nowrap; }
.newsletter-form button:hover { transform:translateY(-1px); box-shadow:0 4px 20px var(--accent-glow); }

/* ═══════════════════════════════════════════
   SPACES PAGE
   ═══════════════════════════════════════════ */
.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.problem-card { background:var(--bg); padding:36px; position:relative; transition:transform .3s; }
.problem-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--coral),transparent); border-radius:var(--radius) var(--radius) 0 0; }
.problem-card .stat { font-family:var(--serif); font-size:2.2rem; color:var(--coral); margin-bottom:12px; }
.problem-card h4 { font-family:var(--serif); font-size:1.15rem; margin-bottom:10px; font-weight:400; }
.problem-card p { font-size:.85rem; color:var(--text-muted); line-height:1.6; }
.cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.cap-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:36px; transition:border-color .3s, transform .3s; }
.cap-card:hover { border-color:rgba(245,193,108,.2); transform:translateY(-3px); }
.cap-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--warm-dim); color:var(--warm); font-size:1.3rem; margin-bottom:20px; }
.cap-card h4 { font-family:var(--serif); font-size:1.2rem; margin-bottom:10px; font-weight:400; }
.cap-card p { font-size:.88rem; color:var(--text-muted); line-height:1.6; }
.journey-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; }
.journey-card { background:var(--bg); padding:32px 28px; position:relative; transition:border-color .3s, transform .3s; }
.journey-card:hover { border-color:rgba(245,193,108,.15); transform:translateY(-3px); }
.journey-card .step { font-family:var(--serif); font-size:2.5rem; color:var(--warm); opacity:.2; margin-bottom:16px; line-height:1; }
.journey-card h4 { font-family:var(--serif); font-size:1.15rem; margin-bottom:10px; font-weight:400; }
.journey-card p { font-size:.85rem; color:var(--text-muted); line-height:1.6; }
.dual-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:56px; }
.dual-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:48px; transition:border-color .3s, transform .3s; }
.dual-card:hover { border-color:var(--border-hover); transform:translateY(-3px); }
.dual-card h3 { font-family:var(--serif); font-size:1.5rem; margin-bottom:20px; font-weight:400; }
.dual-card h3 em { font-style:italic; color:var(--warm); }
.dual-card .feature-list { list-style:none; display:flex; flex-direction:column; gap:14px; }
.dual-card .feature-list li { display:flex; gap:12px; align-items:center; font-size:.9rem; color:var(--text); }
.dual-card .feature-list li .dot { width:6px; height:6px; border-radius:50%; background:var(--warm); flex-shrink:0; }
.meanwhile { text-align:center; }
.meanwhile .section-title, .meanwhile .section-desc { margin-left:auto; margin-right:auto; }

/* ═══════════════════════════════════════════
   SPEC CARD STYLE (Minimal Header + Divider)
   ═══════════════════════════════════════════ */
.spec-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  transition: opacity 0.3s;
}

.spec-header {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.spec-pill {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--accent-dim);
  color: var(--accent);
  white-space: nowrap;
}

.spec-divider {
  height: 1px;
  width: 100%;
  background: var(--border);
  margin-bottom: 24px;
}

.spec-content {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.spec-content p { margin: 0; }

.spec-content .big-value {
  font-family: var(--serif);
  font-size: 2.5rem;
  color: var(--text);
  margin-bottom: 8px;
  display: block;
  line-height: 1;
}

.spec-content .label-muted {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}

@media(max-width: 768px) {
  .spec-divider { margin-bottom: 16px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE (page-specific)
   ═══════════════════════════════════════════ */
@media(max-width:1024px) {
  .hero { padding-left:24px; padding-right:24px; }
  .products-grid, .cost-grid { grid-template-columns:1fr; }
  .how-grid, .testimonials-grid, .cost-stat-row { grid-template-columns:1fr; }
  .page-hero { padding:140px 24px 60px; }
  .hero-scene { display:none; }
  .comparison-grid { grid-template-columns:1fr; gap:16px; }
  .comp-divider { display:none; }
  .roi-grid { grid-template-columns:repeat(2,1fr); }
  .use-grid { grid-template-columns:1fr; }
  .vision-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .featured-post { grid-template-columns:1fr; }
  .featured-visual { min-height:240px; }
  .articles-grid { grid-template-columns:repeat(2,1fr); }
  .cap-grid, .problem-grid { grid-template-columns:1fr; }
  .journey-grid { grid-template-columns:repeat(2,1fr); }
  .dual-grid { grid-template-columns:1fr; }
}
/* Spaces: tabs never scrunch — scroll + arrow from 1280px down so spacing stays fixed */
@media(max-width:1280px) {
  .page-spaces .cap-tabs-content { max-width:100%; padding:0 8px; }
  .page-spaces .cap-tabs-outer { display:flex; align-items:stretch; gap:0; width:100%; position:relative; }
  .page-spaces .cap-tabs-scroll-wrap { flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; border-bottom:1px solid rgba(40,50,77,.12); scrollbar-width:none; -ms-overflow-style:none; }
  .page-spaces .cap-tabs-scroll-wrap::-webkit-scrollbar { display:none; }
  .page-spaces .cap-tabs-outer::after { content:''; position:absolute; top:0; right:32px; bottom:0; width:48px; background:linear-gradient(to right, transparent, var(--bg)); pointer-events:none; }
  .page-spaces .cap-tabs { flex-wrap:nowrap; gap:0 32px; width:max-content; padding-bottom:0; border-bottom:none; }
  .page-spaces .cap-tab { flex-shrink:0; font-size:1rem; padding:14px 0; white-space:nowrap; }
  .page-spaces .cap-tabs-arrow { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; min-width:32px; padding:0; background:none; border:none; color:var(--text-muted); cursor:pointer; transition:color .2s; font-size:1.25rem; line-height:1; }
  .page-spaces .cap-tabs-arrow:hover { color:var(--accent); }
  .page-spaces .cap-tabs-arrow svg { flex-shrink:0; }
}
@media(max-width:900px) {
  #capabilities { padding:56px 24px 48px; }
  .cap-tabs-content { max-width:100%; padding:0 8px; }
  .cap-tabs-outer { display:flex; align-items:stretch; gap:0; width:100%; position:relative; }
  .cap-tabs-scroll-wrap { flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; border-bottom:1px solid rgba(40,50,77,.12); scrollbar-width:none; -ms-overflow-style:none; }
  .cap-tabs-scroll-wrap::-webkit-scrollbar { display:none; }
  .cap-tabs-outer::after { content:''; position:absolute; top:0; right:32px; bottom:0; width:48px; background:linear-gradient(to right, transparent, var(--bg)); pointer-events:none; }
  .cap-tabs { flex-wrap:nowrap; gap:0 24px; width:max-content; padding-bottom:0; border-bottom:none; }
  .cap-tab { font-size:.9rem; padding:12px 0; white-space:nowrap; }
  .page-spaces .cap-tabs { gap:0 32px; }
  .page-spaces .cap-tab { flex-shrink:0; font-size:1rem; padding:14px 0; }
  .cap-tabs-arrow { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; min-width:32px; padding:0; background:none; border:none; color:var(--text-muted); cursor:pointer; transition:color .2s; font-size:1.25rem; line-height:1; }
  .cap-tabs-arrow:hover { color:var(--accent); }
  .cap-tabs-arrow svg { flex-shrink:0; }
  .cap-scroll-wrap { margin-top:28px; }
  .cap-slide-content { padding-top:20px; text-align:left; justify-content:flex-start; }
  .cap-slide-row { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height:0; min-width:0; }
  .cap-slide-media { grid-column:1; grid-row:1; width:100%; max-width:360px; justify-self:center; }
  .cap-slide-content { grid-column:1; grid-row:2; min-width:0; }
  .cap-variants { grid-column:1; grid-row:3; flex-direction:column; align-items:stretch; padding-top:16px; min-width:0; }
  .cap-variants-helper { text-align:left; }
  .cap-variants-row { flex-direction:row; align-items:center; gap:8px; width:100%; min-width:0; position:relative; }
  .cap-variants-scroll { flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; touch-action:pan-x; flex-direction:row; flex-wrap:nowrap; gap:0 16px; align-items:center; justify-content:flex-start; padding:4px 0; scrollbar-width:none; -ms-overflow-style:none; }
  .cap-variants-scroll::-webkit-scrollbar { display:none; }
  .cap-variants-row::after { content:''; position:absolute; top:0; right:28px; bottom:0; width:32px; background:linear-gradient(to right, transparent, var(--bg)); pointer-events:none; }
  .cap-variant { white-space:nowrap; padding:6px 0; text-align:left; flex-shrink:0; }
  .cap-variant::after { left:0; }
  .cap-variants-arrow { display:none; align-items:center; justify-content:center; flex-shrink:0; width:28px; min-width:28px; padding:0; background:none; border:none; color:var(--text-muted); cursor:pointer; transition:color .2s; font-size:1.1rem; line-height:1; }
  .cap-variants-row.has-variants-overflow .cap-variants-arrow { display:flex; }
  .cap-variants-arrow:hover { color:var(--accent); }
  .cap-variants-arrow svg { flex-shrink:0; }
  .cap-slide .cap-img { width:100%; height:100%; object-fit:cover; }
  #capabilities.capabilities--stacked .cap-slide-media { max-width:100%; justify-self:stretch; }
}
@media(max-width:768px) {
  .hero { padding-top:120px; }
  .hero h1 { font-size:2.4rem; }
  .proof-bar { gap:24px; }
  .page-hero h1 { font-size:2.4rem; }
  .roi-grid { grid-template-columns:1fr; }
  .cap-slide { padding:0; }
  .cap-slide-inner { padding:0; }
  .cap-slide-content { padding-top:16px; }
  .values-grid, .team-grid { grid-template-columns:1fr; }
  .articles-grid { grid-template-columns:1fr; }
  .newsletter-form { flex-direction:column; }
  .journey-grid { grid-template-columns:1fr; }
}