:root{
  --bg-primary: #000000;
  --bg-secondary: #131313;
  --surface: #161616;
  --surface-secondary: #161616;
  --line: rgba(255,255,255,0.12);
  --line-soft: rgba(255,255,255,0.06);
  --text-primary: #f5f5f4;
  --text-secondary: #9c9c9a;
  --text-muted: #6b6b69;
  --accent: #ffffff;
  --accent-light: rgba(255,255,255,0.95);
  --accent-deep: #f5f5f5;
  --accent-soft: rgba(255,255,255,0.18);
  --accent-red: #ff4d65;
  --accent-red-bright: #ff6b85;
  --accent-red-soft: rgba(255,77,101,0.18);
  --border-red: rgba(255,77,101,0.14);
  --glow-red: rgba(255,77,101,0.1);
  --shadow-glow: 0 24px 70px -34px rgba(0,0,0,0.2);
  --bg: var(--bg-primary);
  --bg-raised: var(--bg-secondary);
  --bg-card: var(--surface);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-faint: var(--text-muted);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Inter", sans-serif;
  --motion-step-timing: cubic-bezier(.28,.12,.34,.96);
  --motion-interactive: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-medium: 0.65s;
  --motion-slow: 0.9s;
  --motion-long: 1.15s;
  --motion-film-strength: 0.58;
}

body[data-theme='minimal']{
  --bg-primary: #000000;
  --bg-secondary: #131313;
  --surface: #161616;
  --surface-secondary: #161616;
  --line: rgba(255,255,255,0.12);
  --line-soft: rgba(255,255,255,0.06);
  --text-primary: #f5f5f4;
  --text-secondary: #9c9c9a;
  --text-muted: #6b6b69;
  --accent: #ffffff;
  --accent-light: rgba(255,255,255,0.95);
  --accent-deep: #f5f5f5;
  --accent-soft: rgba(255,255,255,0.18);
  --accent-red: #ff4d65;
  --accent-red-bright: #ff6b85;
  --accent-red-soft: rgba(255,77,101,0.18);
  --border-red: rgba(255,77,101,0.14);
  --glow-red: rgba(255,77,101,0.1);
  --shadow-glow: 0 24px 70px -34px rgba(0,0,0,0.2);
  --bg: var(--bg-primary);
  --bg-raised: var(--bg-secondary);
  --bg-card: var(--surface);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-faint: var(--text-muted);
}

body[data-theme='crimson']{
  --bg-primary: #050303;
  --bg-secondary: #090304;
  --surface: #0d0506;
  --surface-secondary: #120607;
  --line: rgba(255,255,255,0.09);
  --line-soft: rgba(255,255,255,0.05);
  --text-primary: #f5eeee;
  --text-secondary: #a99b9d;
  --text-muted: #6f6264;
  --accent: #f8f0f0;
  --accent-light: #ffffff;
  --accent-deep: #e3d9d7;
  --accent-soft: rgba(255,255,255,0.14);
  --accent-red: #8f0b12;
  --accent-red-bright: #ef1b24;
  --accent-red-soft: rgba(239, 27, 36, 0.18);
  --border-red: rgba(143,11,18,0.18);
  --glow-red: rgba(239,27,36,0.12);
  --shadow-glow: 0 24px 70px -34px rgba(159,10,18,0.24);
  --bg: var(--bg-primary);
  --bg-raised: var(--bg-secondary);
  --bg-card: var(--surface);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-faint: var(--text-muted);
}

body[data-theme='crimson']::before{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 18%, rgba(143, 11, 18, 0.16), transparent 28%),
    radial-gradient(circle at 80% 14%, rgba(159, 10, 18, 0.12), transparent 26%),
    radial-gradient(circle at 50% 66%, rgba(90, 8, 13, 0.08), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.87), transparent 60%);
}

body[data-theme='crimson']::after{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(9,3,4,0.16) 55%, rgba(0,0,0,0.46) 100%);
}

body[data-theme='minimal'] .theme-switcher-btn[data-theme='minimal'],
body[data-theme='crimson'] .theme-switcher-btn[data-theme='crimson']{
  background: rgba(255,255,255,0.16);
  color: #ffffff;
}

body[data-theme='minimal'] .theme-switcher-btn[data-theme='crimson'],
body[data-theme='crimson'] .theme-switcher-btn[data-theme='minimal']{
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
}

.theme-switcher{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  border-radius:999px; padding:4px; background: rgba(255,255,255,0.04);
  transition: background var(--motion-medium) var(--motion-interactive), border-color var(--motion-medium) var(--motion-interactive);
}

.theme-switcher-btn{
  padding: 8px 14px; border-radius:999px; font-size:0.75rem; font-weight:700;
  background: transparent; border:none; color: var(--text-dim);
  transition: background var(--motion-slow) var(--motion-interactive), color var(--motion-slow) var(--motion-interactive), transform var(--motion-slow) var(--motion-interactive);
}

.theme-switcher-btn:hover,
.theme-switcher-btn:focus-visible{
  transform: translateY(-1px) scale(1.02);
  background: rgba(255,255,255,0.10);
}

body[data-theme='crimson'] .site-header{
  background: rgba(6, 3, 3, 0.88);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(180, 20, 25, 0.16);
  box-shadow: inset 0 -2px 18px rgba(239, 27, 36, 0.10), inset 0 -1px 0 rgba(239, 27, 36, 0.08), 0 0 0 1px rgba(255,255,255,0.02);
  transition: background var(--motion-medium) var(--motion-interactive), border-color var(--motion-medium) var(--motion-interactive), box-shadow var(--motion-medium) var(--motion-interactive);
}

body[data-theme='crimson'] .site-header::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 30%, rgba(143, 11, 18, 0.10), transparent 32%),
              radial-gradient(circle at 82% 22%, rgba(90, 8, 13, 0.08), transparent 28%),
              radial-gradient(circle at 50% 100%, rgba(239, 27, 36, 0.08), transparent 32%);
  opacity: 0.72;
  z-index: 0;
}

body[data-theme='crimson'] .site-header > *{
  position: relative; z-index: 1;
}

body[data-theme='crimson'] .tab.active{
  background: rgba(239, 27, 36, 0.16);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 10px 30px -24px rgba(239, 27, 36, 0.22);
}

body[data-theme='crimson'] .tab:hover,
body[data-theme='crimson'] .tab:focus-visible{
  transform: translateY(-1px) scale(1.01);
  background: rgba(239, 27, 36, 0.08);
  box-shadow: 0 10px 24px -26px rgba(239, 27, 36, 0.22);
}

body[data-theme='crimson'] .pill-link:hover,
body[data-theme='crimson'] .pill-link:focus-visible{
  background: rgba(239, 27, 36, 0.10);
  border-color: rgba(239, 27, 36, 0.24);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 40px -30px rgba(239, 27, 36, 0.18);
}

body[data-theme='crimson']{
  background-image:
    radial-gradient(circle at 20% 12%, rgba(239, 27, 36, 0.14), transparent 22%),
    radial-gradient(circle at 82% 15%, rgba(143, 11, 18, 0.10), transparent 28%),
    radial-gradient(circle at 50% 60%, rgba(90, 8, 13, 0.08), transparent 30%);
  background-blend-mode: screen;
}

body[data-theme='crimson'] .hero{
  background-image: radial-gradient(circle at 50% 18%, rgba(239, 27, 36, 0.08), transparent 24%);
}

body[data-theme='crimson'] .hero-title{
  text-shadow: 0 0 24px rgba(239, 27, 36, 0.08);
}

body[data-theme='crimson'] .hero-badge{
  background: rgba(239, 27, 36, 0.08);
  border-color: rgba(225, 45, 51, 0.18);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 18px 40px -30px rgba(225, 45, 51, 0.12);
}

body[data-theme='crimson'] .hero-badge .dot{
  background: var(--accent-red-bright);
  box-shadow: 0 0 0 6px rgba(239, 27, 36, 0.12);
}

body[data-theme='crimson'] .smoke.s1,
body[data-theme='crimson'] .smoke.s2,
body[data-theme='crimson'] .smoke.s3{
  background: radial-gradient(circle at 50% 50%, rgba(239, 27, 36, 0.22), rgba(255,255,255,0.04) 42%, transparent 70%);
}

body[data-theme='crimson'] .tab.active{
  background: linear-gradient(135deg, var(--accent-red-bright), var(--accent-red));
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 14px 30px -22px rgba(225, 45, 51, 0.35);
}

body[data-theme='crimson'] .pill-link:hover,
body[data-theme='crimson'] .pill-link:focus-visible{
  background: rgba(225, 45, 51, 0.1);
  border-color: var(--accent-red);
}

body[data-theme='crimson'] .video-frame,
body[data-theme='crimson'] .project-card,
body[data-theme='crimson'] .contact-intro-panel,
body[data-theme='crimson'] .contact-form-panel,
body[data-theme='crimson'] .social-card,
body[data-theme='crimson'] .work-footer,
body[data-theme='crimson'] .site-footer,
body[data-theme='crimson'] .faq-item,
body[data-theme='crimson'] .about-card,
body[data-theme='crimson'] .hiw-card,
body[data-theme='crimson'] .wwc-card,
body[data-theme='crimson'] .ignis-map,
body[data-theme='crimson'] .wwc-orbit,
body[data-theme='crimson'] .wwc-center{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px -32px rgba(255, 10, 20, 0.12);
}

body[data-theme='crimson'] .about-card,
body[data-theme='crimson'] .wwc-card{
  background: rgba(255,255,255,0.04);
  border-color: rgba(239, 27, 36, 0.12);
}

body[data-theme='crimson'] .about-section .section-title,
body[data-theme='crimson'] .about-section .eyebrow,
body[data-theme='crimson'] .about-section .section-lead,
body[data-theme='crimson'] .wwc-section .section-title,
body[data-theme='crimson'] .wwc-section .eyebrow,
body[data-theme='crimson'] .wwc-section .section-lead{
  color: #f4e7e7;
}

body[data-theme='crimson'] .about-section .section-title.center,
body[data-theme='crimson'] .about-section .eyebrow.center,
body[data-theme='crimson'] .about-section .section-lead.center,
body[data-theme='crimson'] .wwc-section .section-title.center,
body[data-theme='crimson'] .wwc-section .eyebrow.center,
body[data-theme='crimson'] .wwc-section .section-lead.center{
  color: #f4e7e7;
}

body[data-theme='crimson'] .ignis-map{
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139, 11, 16, 0.22), rgba(0,0,0,0.9));
}

body[data-theme='crimson'] .ignis-grid{
  background-image:
    linear-gradient(rgba(239, 27, 36, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 27, 36, 0.065) 1px, transparent 1px);
}

body[data-theme='crimson'] .wwc-grid{
  background-image:
    linear-gradient(rgba(239, 27, 36, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 27, 36, 0.06) 1px, transparent 1px);
}

body[data-theme='crimson'] .wwc-center{
  background: linear-gradient(160deg, rgba(22,5,7,0.92), rgba(8,2,3,0.95));
  border-color: rgba(239, 27, 36, 0.14);
  box-shadow: 0 0 60px -18px rgba(239, 27, 36, 0.16);
}

body[data-theme='crimson'] .ignis-center-point::before,
body[data-theme='crimson'] .ignis-center-point::after{
  background: rgba(239, 27, 36, 0.12);
}

body[data-theme='crimson'] .ignis-center-point .ignis-center-spot{
  background: rgba(255,255,255,0.23);
  box-shadow: 0 0 34px 8px rgba(239, 27, 36, 0.14);
}

body[data-theme='crimson'] .footer-link:hover,
body[data-theme='crimson'] .contact-link-row:hover,
body[data-theme='crimson'] .faq-item.open .faq-q .plus,
body[data-theme='crimson'] .wwc-list-label,
body[data-theme='crimson'] .plus{
  color: var(--accent-red);
}

body[data-theme='crimson'] .ignis-node,
body[data-theme='crimson'] .wwc-node{
  border-color: rgba(239, 27, 36, 0.14);
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

body[data-theme='crimson'] .ignis-node:hover,
body[data-theme='crimson'] .ignis-node:focus-visible,
body[data-theme='crimson'] .wwc-node:hover,
body[data-theme='crimson'] .wwc-node:focus-visible{
  border-color: rgba(239, 27, 36, 0.4);
  box-shadow:
    0 0 0 2px rgba(239, 27, 36, 0.12),
    0 0 24px 8px rgba(239, 27, 36, 0.18);
  background: rgba(239, 27, 36, 0.08);
  color: #ffffff;
}

body[data-theme='crimson'] .ignis-node-wrap.is-active .ignis-node,
body[data-theme='crimson'] .wwc-node-wrap.is-active .wwc-node{
  border-color: var(--accent-red);
  color: var(--accent-red-bright);
  box-shadow:
    0 0 0 1px rgba(239, 27, 36, 0.15),
    0 0 34px 12px rgba(239, 27, 36, 0.24);
}

body[data-theme='crimson'] .scroll-line,
body[data-theme='crimson'] .mouse-dot,
body[data-theme='crimson'] .video-timer,
body[data-theme='crimson'] .contact-form input:focus,
body[data-theme='crimson'] .contact-form textarea:focus{
  border-color: var(--accent-red);
}

body[data-theme='crimson'] .mouse-icon{
  border-color: rgba(255, 255, 255, 0.18);
}

body[data-theme='crimson'] .social-card{
  background: rgba(255, 255, 255, 0.03);
}

body[data-theme='crimson'] .theme-switcher{
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme='crimson'] .theme-switcher-btn:hover,
body[data-theme='crimson'] .theme-switcher-btn:focus-visible{
  background: rgba(255, 70, 80, 0.12);
}

body[data-theme='crimson'] .faq-item.open .faq-q .plus{
  background: var(--accent-red);
  border-color: var(--accent-red);
}

body[data-theme='crimson'] .contact-link-row .ic,
body[data-theme='crimson'] .social-icon{
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme='crimson'] .footer-col a:hover{
  color: var(--accent-red);
}

body[data-theme='crimson'] .hero-sub em,
body[data-theme='crimson'] .footer-tagline{
  color: #d9d2cf;
}

body[data-theme='crimson'] .site-header{
  background: rgba(6, 3, 3, 0.88);
  backdrop-filter: blur(24px);
  border-bottom-color: rgba(255, 40, 48, 0.14);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02), 0 0 0 1px rgba(255,255,255,0.01);
}

body{ transition: background var(--motion-slow) var(--motion-interactive), color var(--motion-slow) var(--motion-interactive), box-shadow var(--motion-slow) var(--motion-interactive); }

*{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--font-display); margin:0; letter-spacing: -0.02em; }
p{ margin:0; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }

::selection{ background: var(--accent); color:#0a0a0a; }

/* ============ HEADER ============ */
.site-header{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(20px,5vw,64px);
  background: rgba(10,10,10,0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--motion-slow) var(--motion-interactive), border-color var(--motion-slow) var(--motion-interactive), box-shadow var(--motion-slow) var(--motion-interactive);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ display:flex; }
.brand-logo{ display:block; max-width:100%; height:auto; }
.showreel-logo{ display:block; width:90px; height:auto; margin:0 auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; }
.brand-sub{ font-size:0.72rem; color: var(--text-dim); }

.tab-nav{
  display:flex; padding:4px; background: var(--bg-raised);
  border:1px solid var(--line); border-radius: 999px; gap:2px;
}
.tab{
  padding: 8px 20px; border-radius:999px; font-size:0.85rem; font-weight:600;
  color: var(--text-dim); transition: transform var(--motion-slow) var(--motion-interactive), background var(--motion-slow) var(--motion-interactive), color var(--motion-slow) var(--motion-interactive), box-shadow var(--motion-slow) var(--motion-interactive);
}
.tab:hover,
.tab:focus-visible{
  color: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -24px rgba(255,255,255,0.16);
}
.tab.active{
  background: linear-gradient(135deg, var(--accent-light), var(--accent-deep));
  color:#0a0a0a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 8px 20px -18px rgba(255,255,255,0.18);
}

.header-actions{ display:flex; gap:10px; }
.pill-link{
  display:flex; align-items:center; gap:6px;
  padding: 9px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:0.82rem; font-weight:500; color: var(--text);
  transition: transform var(--motion-slow) var(--motion-interactive), border-color var(--motion-slow) var(--motion-interactive), background var(--motion-slow) var(--motion-interactive), box-shadow var(--motion-slow) var(--motion-interactive);
}
.pill-link:hover,
.pill-link:focus-visible{
  transform: translateY(-1px) scale(1.02);
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 18px 46px -34px rgba(255,255,255,0.16);
}
.arrow{ font-size:0.75rem; }

@media (max-width: 760px){
  .header-actions{ display:none; }
  .site-header{ padding: 14px 18px; }
}

/* ============ VIEWS ============ */
.view{ display:none; }
.view.active{ display:block; }

/* ============ HERO ============ */
.hero{
  position:relative;
  padding: clamp(70px,12vw,130px) clamp(20px,5vw,64px) 70px;
  text-align:center;
  overflow:hidden;
}
.hero-smoke{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.smoke{
  position:absolute; border-radius:50%; filter: blur(60px);
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.35), rgba(255,255,255,0.05) 60%, transparent 75%);
  mix-blend-mode: screen; opacity:.8;
  will-change: transform, opacity;
}
.smoke.s1{ width:520px; height:520px; top:-80px; left:-160px; animation: drift1 45s var(--motion-step-timing) infinite; }
.smoke.s2{ width:380px; height:380px; top:120px; left:60px; background: radial-gradient(circle at 60% 30%, rgba(255,255,255,0.22), transparent 70%); animation: drift2 52s var(--motion-step-timing) infinite; }
.smoke.s3{ width:300px; height:300px; top:260px; left:-60px; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.16), transparent 70%); animation: drift1 60s var(--motion-step-timing) infinite reverse; }

@keyframes drift1{
  0%, 20%, 40%, 60%, 80%, 100% { transform: translate(0,0) scale(1); }
  21%, 41%, 61%, 81% { transform: translate(30px,20px) scale(1.06); }
}
@keyframes drift2{
  0%, 20%, 40%, 60%, 80%, 100% { transform: translate(0,0) scale(1); }
  21%, 41%, 61%, 81% { transform: translate(-20px,25px) scale(1.08); }
}
@keyframes filmStutter{
  0%, 20%, 40%, 60%, 80%, 100% { opacity: .6; transform: translate3d(0,0,0); }
  8%, 28%, 48%, 68%, 88% { opacity: .62; transform: translate3d(0.15px, 0.1px, 0); }
}
@keyframes subtleStepFloat{
  0%, 16%, 100% { transform: translateY(0); }
  18%, 32% { transform: translateY(-1px); }
  34%, 48% { transform: translateY(0); }
  50%, 64% { transform: translateY(1px); }
  66%, 80% { transform: translateY(0); }
}
@keyframes overlayStep{
  0%, 18%, 34% { opacity: 0; transform: translateY(6px); }
  20%, 36%, 100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .smoke{ animation: none !important; }
}

.hero > *{ position:relative; z-index:1; }

.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  padding: 9px 18px; border-radius:999px;
  background: rgba(255,255,255,0.06); border:1px solid var(--line);
  color: var(--text-dim); font-size:0.8rem; font-weight:600; margin-bottom:32px;
  animation: subtleStepFloat 13s var(--motion-step-timing) infinite;
}
.hero-badge .dot{
  width:6px; height:6px; border-radius:50%; background: var(--text);
}
.hero-title{
  font-size: clamp(2.4rem, 6.5vw, 4.8rem);
  font-weight: 400; line-height:1.08; margin-bottom:24px;
  letter-spacing: -0.01em;
}
.hero-title .accent{
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.hero-sub{
  font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-dim);
  max-width: 560px; margin: 0 auto 40px;
}
.hero-sub em{ color: var(--text); font-style: normal; font-weight:600; }

.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{
  padding: 14px 30px; border-radius: 999px; font-weight:600; font-size:0.92rem;
  border: 1px solid rgba(255,255,255,0.35);
  transition: transform var(--motion-slow) var(--motion-interactive), background var(--motion-slow) var(--motion-interactive), color var(--motion-slow) var(--motion-interactive), border-color var(--motion-slow) var(--motion-interactive), box-shadow var(--motion-slow) var(--motion-interactive);
}
.btn:hover,
.btn:focus-visible{
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.08),
    0 22px 64px -32px rgba(255,255,255,0.18);
}
.btn:active{
  transform: translateY(0) scale(var(--motion-press-scale));
}
.btn-primary{
  background: var(--text); color: #0a0a0a; border-color: var(--text);
}
body[data-theme='minimal'] .btn-primary:hover{
  background: transparent; color: var(--text);
}
.btn-ghost{
  background: transparent; border:1px solid rgba(255,255,255,0.35); color: var(--text);
}
body[data-theme='minimal'] .btn-ghost:hover{
  background: rgba(255,255,255,0.08);
}

body[data-theme='crimson'] .btn-primary{
  background: linear-gradient(135deg, var(--accent-red-bright), var(--accent-red));
  color: #0a0a0a;
  border-color: transparent;
  box-shadow: 0 18px 40px -28px rgba(239, 27, 36, 0.28);
}

body[data-theme='crimson'] .btn-primary:hover,
body[data-theme='crimson'] .btn-primary:focus-visible{
  background: linear-gradient(135deg, var(--accent-red-hot), var(--accent-red-bright));
  color: #ffffff;
  border-color: transparent;
  box-shadow:
    0 0 30px 2px rgba(239, 27, 36, 0.18),
    0 20px 52px -28px rgba(239, 27, 36, 0.36);
  transform: translateY(-1px) scale(1.02);
}

body[data-theme='crimson'] .btn-ghost{
  border-color: rgba(255, 255, 255, 0.16);
}

body[data-theme='crimson'] .btn-ghost:hover,
body[data-theme='crimson'] .btn-ghost:focus-visible{
  background: rgba(239, 27, 36, 0.30);
  border-color: rgba(239, 27, 36, 0.34);
  color: #ffffff;
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 0 24px 2px rgba(239, 27, 36, 0.16),
    0 14px 34px -24px rgba(239, 27, 36, 0.24);
}

.scroll-indicator{
  margin-top: 60px; display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:0.78rem; color: var(--text-faint); flex-wrap:wrap;
}
.scroll-line{ width:64px; height:1px; background: var(--line); }
.mouse-icon{
  width:20px; height:30px; border:1px solid var(--line-soft); border-radius:12px;
  display:flex; justify-content:center; padding-top:6px; flex-shrink:0;
  border-color: rgba(255,255,255,0.25);
}
.mouse-dot{
  width:3px; height:6px; border-radius:2px; background: var(--text-dim);
  animation: mouseScroll 1.8s var(--motion-step-timing) infinite;
}
@keyframes mouseScroll{
  0%{ opacity:1; transform: translateY(0); }
  60%{ opacity:0; transform: translateY(8px); }
  61%{ opacity:0; transform: translateY(0); }
  100%{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .mouse-dot{ animation: none; }
}

/* ============ SECTIONS ============ */
.section{
  padding: 90px clamp(20px,5vw,64px);
  border-top: 1px solid var(--line-soft);
}
.eyebrow{
  font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--accent); margin-bottom:14px;
}
.eyebrow.center{ text-align:center; }
.section-title{ font-size: clamp(1.8rem,4vw,2.6rem); font-weight:700; margin-bottom:16px; }
.section-title.big{ font-size: clamp(2.4rem,5.5vw,3.6rem); }
.section-title.huge{ font-size: clamp(2rem,5.5vw,3.4rem); line-height:1.1; }
.section-title.center{ text-align:center; margin: 0 auto 20px; }
.section-lead{ color: var(--text-dim); font-size:1.05rem; max-width:580px; margin-bottom:10px; }
.section-lead.center{ margin:0 auto 50px; text-align:center; }
.hairline{ height:1px; background: var(--line); margin: 30px 0 46px; }

/* ============ HOW IT WORKS ============ */
.hiw-section{
  position: relative;
  padding: 110px clamp(20px,5vw,64px) 130px;
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
  --hiw-accent: #ffffff;
  --hiw-accent-soft: rgba(255,255,255,0.22);
}

.hiw-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hiw-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
  opacity:.55;
}
.hiw-glow{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:.35;
}
.hiw-glow-a{
  width:420px; height:420px; top:-100px; left:6%;
  background: radial-gradient(circle, var(--hiw-accent-soft), transparent 70%);
}
.hiw-glow-b{
  width:360px; height:360px; bottom:-140px; right:8%;
  background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
}

.hiw-header{ position:relative; z-index:1; text-align:center; max-width:640px; margin: 0 auto 90px; }
.hiw-eyebrow{
  font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--hiw-accent); margin-bottom:14px;
}
.hiw-title{
  font-family: var(--font-display); font-size: clamp(2rem,4.5vw,3rem); font-weight:700;
  margin-bottom:16px; letter-spacing:-0.02em;
}
.hiw-subtitle{ color: var(--text-dim); font-size:1.05rem; line-height:1.6; }

.hiw-board{
  position: relative; z-index:1;
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  max-width:1240px; margin:0 auto;
}
.hiw-lines{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:0;
}
.hiw-line-path{
  fill:none; stroke: var(--hiw-accent-soft); stroke-width:1.5;
  transition: stroke-dashoffset 1.1s cubic-bezier(.16,.84,.44,1);
}

.hiw-card{
  position: relative; z-index:1; flex: 1 1 0;
  background: var(--bg-card); border:1px solid #ffffff10; border-radius:22px;
  padding:24px 22px; min-width:0;
  box-shadow: 0 20px 40px -24px rgba(0,0,0,0.7);
  opacity:0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease, border-color .3s ease, box-shadow .3s ease;
}
.hiw-board.in-view .hiw-card{ opacity:1; transform: translateY(0); }

.hiw-card:nth-child(2){ margin-top: 6px; }
.hiw-card:nth-child(3){ margin-top: 58px; }
.hiw-card:nth-child(4){ margin-top: 104px; }
.hiw-card:nth-child(5){ margin-top: 52px; }
.hiw-card:nth-child(6){ margin-top: 4px; }

.hiw-card:hover{
  border-color: var(--hiw-accent-soft);
  box-shadow: 0 24px 60px -20px var(--hiw-accent-soft), 0 20px 40px -24px rgba(0,0,0,0.7);
  transform: translateY(-4px);
}

.hiw-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.hiw-number{ font-family: var(--font-display); font-size:0.8rem; font-weight:700; color: var(--text-faint); }

.hiw-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.7rem; font-weight:700; letter-spacing:0.04em;
  padding:4px 10px; border-radius:999px;
}
.hiw-badge-start{
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); color: var(--hiw-accent);
}
.hiw-badge-dot{
  width:6px; height:6px; border-radius:50%; background: var(--hiw-accent);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}
.hiw-badge-done{
  background: rgba(255,255,255,0.08); border:1px solid var(--line); color: var(--text);
}

.hiw-icon{
  width:42px; height:42px; border-radius:12px;
  background: rgba(255,255,255,0.05); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.hiw-icon svg{ width:20px; height:20px; }

@media (max-width: 980px){
  .hiw-board{ flex-wrap: wrap; gap:18px; }
  .hiw-card{ min-width: calc(50% - 9px); }
  .hiw-card:nth-child(2), .hiw-card:nth-child(3), .hiw-card:nth-child(4), .hiw-card:nth-child(5), .hiw-card:nth-child(6){ margin-top: 0; }
}
@media (max-width: 760px){
  .hiw-board{ flex-direction: column; }
  .hiw-card{ width: 100%; }
  .hiw-card-top{ gap:12px; }
  .hiw-section{ padding: 80px clamp(20px,5vw,32px) 90px; }
}

/* ============ IGNIS MAP (About — interactive) ============ */
.about-section .section-title.center,
.about-section .eyebrow.center,
.about-section .section-lead.center{ margin-left:auto; margin-right:auto; }
.about-section .section-lead.center{ margin-bottom:56px; }

.ignis-map{
  position: relative;
  max-width: 920px; min-height: 600px;
  margin: 0 auto; border-radius: 28px;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #0d0d0d, #000000);
  overflow: hidden;
  --ignis-accent: #ffffff;
  --ignis-accent-soft: rgba(255,255,255,0.18);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .7s ease, transform .7s ease;
}
.ignis-map.is-visible{
  opacity: 1;
  transform: scale(1);
}

.ignis-map-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.ignis-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 30%, transparent 85%);
}
.ignis-dust{ position:absolute; inset:0; }
.ignis-dust span{
  position:absolute; width:2.5px; height:2.5px; border-radius:50%;
  background: rgba(255,255,255,0.5);
  animation: ignisTwinkle 4s ease-in-out infinite;
}
@keyframes ignisTwinkle{
  0%,100%{ opacity:.15; }
  50%{ opacity:.7; }
}

.ignis-lines{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; pointer-events:none;
  mask-image: radial-gradient(circle 120px at center, transparent 0%, transparent 48%, black 52%, black 100%);
  -webkit-mask-image: radial-gradient(circle 120px at center, transparent 0%, transparent 48%, black 52%, black 100%);
}

.ignis-map.is-visible .ignis-line-path,
.ignis-map.is-visible .ignis-line-dot{
  opacity: 1;
}

/* base stroke color comes from the per-line gradient set in JS;
   these rules only define hover/active overrides */
.ignis-line-path{
  fill:none; stroke-width:1.3;
  stroke-linecap: butt;
  opacity: 0;
  transition: stroke .4s ease .22s, stroke-width .4s ease .22s, opacity .4s ease .22s;
}
.ignis-line-path.is-active{ /* keep same thickness when active; no brighter stroke */
  stroke-width: 1.3;
  opacity: 1;
}
.ignis-map.node-hover .ignis-line-path:not(.is-active){ opacity:.35; }

/* traveling glow pulse — synchronized across all lines */
.ignis-line-dot{
  fill: var(--ignis-accent);
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--ignis-accent-soft));
  transition: opacity .4s ease .22s;
}

/* ---- center card ---- */
.ignis-center-point{
  position:absolute;
  top:50%;
  left:50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) scale(.78);
  z-index:0;
  opacity:0;
  pointer-events:none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.ignis-center-point::before,
.ignis-center-point::after{
  content: "";
  position:absolute;
  left:50%;
  top:50%;
  background: rgba(255,255,255,0.08);
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  transition: transform .45s ease .1s, opacity .45s ease;
  opacity: 0;
}
.ignis-center-point::before{
  width: 100%;
  height: 1px;
}
.ignis-center-point::after{
  width: 1px;
  height: 100%;
}
.ignis-center-point .ignis-center-spot{
  position:absolute;
  left:50%;
  top:50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%) scale(.3);
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  box-shadow: 0 0 28px 4px rgba(255,255,255,0.1);
  opacity:0;
  transition: opacity .4s ease .05s, transform .4s ease .05s;
  animation: ignisCenterSpot 2.6s ease-in-out infinite;
}

.ignis-map.is-visible .ignis-center-point{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ignis-map.is-visible .ignis-center-point::before,
.ignis-map.is-visible .ignis-center-point::after{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.ignis-map.is-visible .ignis-center-point .ignis-center-spot{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ignis-map.is-visible .ignis-center{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  transition-delay: .12s;
}
.ignis-map.is-visible .ignis-line-path,
.ignis-map.is-visible .ignis-line-dot{
  opacity: 1;
}
.ignis-map.is-visible .ignis-center-point::before{
  transform: translate(-50%, -50%) scaleX(1);
}
.ignis-map.is-visible .ignis-center-point::after{
  transform: translate(-50%, -50%) scaleY(1);
}
.ignis-center{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(.96);
  z-index:3; width:150px; padding: 26px 20px;
  background: linear-gradient(160deg, #161616, #0a0a0a);
  border: 1px solid var(--line); border-radius:22px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  cursor: default;
  box-shadow: 0 0 0 rgba(255,255,255,0);
  opacity: 0;
  overflow: visible;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1),
              width .55s cubic-bezier(.22,1,.36,1), padding .55s cubic-bezier(.22,1,.36,1),
              box-shadow .5s ease, border-color .4s ease;
}
.ignis-center::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) scale(.6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 30%, transparent 60%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity .55s ease;
  animation: ignisCenterPulse 2.6s ease-in-out infinite;
}
.ignis-map.is-visible .ignis-center-point{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ignis-map.is-visible .ignis-center-point .ignis-center-spot{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ignis-map.is-visible .ignis-center{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
.ignis-map.is-visible .ignis-center::before{
  opacity: 1;
}
.ignis-center-core{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.ignis-center-core span{
  font-family: var(--font-display); font-weight:700; font-size:0.98rem; letter-spacing:-0.01em;
}
.ignis-center-desc{
  font-size:0.82rem; line-height:1.55; color: var(--text-dim);
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .4s ease .05s;
}

.ignis-center:hover,
.ignis-center:focus-visible{
  width: 320px;
  border-color: var(--ignis-accent-soft);
  box-shadow: 0 0 50px -12px var(--ignis-accent-soft);
}

@keyframes ignisCenterPulse{
  0%, 100% { transform: translate(-50%, -50%) scale(.6); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1); opacity: 0.18; }
}
@keyframes ignisCenterSpot{
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.4; }
}
.ignis-center:hover .ignis-center-desc,
.ignis-center:focus-visible .ignis-center-desc{
  max-height:150px; opacity:1;
}

/* ---- nodes ---- */
.ignis-node-wrap{
  position:absolute; z-index:2;
  display:flex; align-items:center;
  opacity:0;
  transform: translateY(18px) scale(.96);
  animation: ignisFloat 6s ease-in-out infinite;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.ignis-map.is-visible .ignis-node-wrap{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ignis-node-wrap:nth-child(odd){ animation-duration: 7s; }
.pos-lt{ top:8%;  left:6%;  animation-delay: .2s; transition-delay: .18s; }
.pos-lm{ top:44%; left:0%;  animation-delay: 1.1s; transform: translateY(-50%); transition-delay: .26s; }
.pos-lb{ top:80%; left:6%;  animation-delay: .6s; transition-delay: .3s; }
.pos-rt{ top:8%;  right:6%; animation-delay: .8s; transition-delay: .22s; }
.pos-rm{ top:44%; right:0%; animation-delay: 0s;  transform: translateY(-50%); transition-delay: .32s; }
.pos-rb{ top:80%; right:6%; animation-delay: 1.4s; transition-delay: .4s; }

@keyframes ignisFloat{
  0%,100%{ margin-top:0; }
  50%{ margin-top:-7px; }
}

.ignis-node{
  position:relative; z-index:1;
  width:54px; height:54px; border-radius:50%; flex-shrink:0;
  background: var(--bg-card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--text-dim);
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, color .3s ease,
              box-shadow .4s ease, opacity .4s ease;
}
.ignis-node svg{
  position:relative; z-index:2;
}
.ignis-map.node-hover .ignis-node-wrap:not(.is-active){ opacity:0.5 !important; }
.ignis-map.node-hover .ignis-node-wrap:not(.is-active) .ignis-node{ opacity:.55; }
.ignis-map.center-hover .ignis-node{ border-color: rgba(255,255,255,0.25); color: var(--text); }

.ignis-node-wrap.is-active .ignis-node{
  transform: scale(1.1);
  border-color: var(--ignis-accent);
  color: var(--ignis-accent);
  box-shadow: 0 0 28px -4px var(--ignis-accent-soft);
}

/* idle glow ring — pulses softly in sync with the traveling dot's arrival */
.ignis-node::after{
  content:"";
  position:absolute; inset:-6px; border-radius:50%;
  opacity:0; pointer-events:none;
  z-index:0;
  box-shadow: 0 0 0 rgba(255,255,255,0);
  animation: ignisNodeGlow 4.5s ease-in-out infinite;
}
@keyframes ignisNodeGlow{
  0%, 30%{ opacity:0; box-shadow:0 0 0 rgba(255,255,255,0); }
  34%{ opacity:1; box-shadow:0 0 22px 2px var(--ignis-accent-soft); }
  42%, 100%{ opacity:0; box-shadow:0 0 0 rgba(255,255,255,0); }
}
.ignis-node-wrap.is-active .ignis-node::after{ animation-play-state: paused; opacity:0; }

/* ---- tooltip (hover description) ---- */
.ignis-tooltip{
  position:absolute; top:50%; transform: translateY(-50%) translateX(0);
  width:220px; padding:18px 20px;
  background: var(--bg-card); border:1px solid var(--line); border-radius:16px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.8);
  opacity:0; visibility:hidden; pointer-events:none; z-index:4;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility .35s;
}
.pos-lt .ignis-tooltip, .pos-lm .ignis-tooltip, .pos-lb .ignis-tooltip{
  left: calc(100% + 16px);
}
.pos-rt .ignis-tooltip, .pos-rm .ignis-tooltip, .pos-rb .ignis-tooltip{
  right: calc(100% + 16px);
}
.ignis-node-wrap.is-active .ignis-tooltip{
  opacity:1; visibility:visible; pointer-events:auto;
}
.pos-lt.is-active .ignis-tooltip, .pos-lm.is-active .ignis-tooltip, .pos-lb.is-active .ignis-tooltip{
  transform: translateY(-50%) translateX(6px);
}
.pos-rt.is-active .ignis-tooltip, .pos-rm.is-active .ignis-tooltip, .pos-rb.is-active .ignis-tooltip{
  transform: translateY(-50%) translateX(-6px);
}
.ignis-tooltip-icon{
  width:30px; height:30px; border-radius:9px; margin-bottom:12px;
  background: rgba(255,255,255,0.08); border:1px solid var(--ignis-accent-soft);
  color: var(--ignis-accent); display:flex; align-items:center; justify-content:center;
}
.ignis-tooltip h4{ font-family: var(--font-display); font-size:0.95rem; font-weight:700; margin-bottom:8px; }
.ignis-tooltip p{ font-size:0.8rem; line-height:1.55; color: var(--text-dim); }

/* Tooltip spring animations for satisfying slide-out */
@keyframes springOutRight{
  0%{ transform: translateY(-50%) translateX(18px); opacity:0; }
  60%{ transform: translateY(-50%) translateX(-8px); opacity:1; }
  85%{ transform: translateY(-50%) translateX(4px); }
  100%{ transform: translateY(-50%) translateX(0); }
}
@keyframes springOutLeft{
  0%{ transform: translateY(-50%) translateX(-18px); opacity:0; }
  60%{ transform: translateY(-50%) translateX(8px); opacity:1; }
  85%{ transform: translateY(-50%) translateX(-4px); }
  100%{ transform: translateY(-50%) translateX(0); }
}

/* Apply spring when active */
.ignis-node-wrap.is-active .ignis-tooltip{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateY(-50%);
}
.pos-lt.is-active .ignis-tooltip,
.pos-lm.is-active .ignis-tooltip,
.pos-lb.is-active .ignis-tooltip{
  animation: springOutRight .62s cubic-bezier(.2,1,.2,1) both;
}
.pos-rt.is-active .ignis-tooltip,
.pos-rm.is-active .ignis-tooltip,
.pos-rb.is-active .ignis-tooltip{
  animation: springOutLeft .62s cubic-bezier(.2,1,.2,1) both;
}

/* Dim other map elements when node-hovering */
.ignis-map.node-hover .ignis-center,
.ignis-map.node-hover .ignis-center-point,
.ignis-map.node-hover .ignis-line-dot{
  opacity:0.5;
}

.ignis-map.node-hover .ignis-line-path:not(.is-active){
  opacity:0.25;
}

/* ---- mobile fallback: static list ---- */
@media (max-width: 860px){
  .ignis-map{ min-height:0; padding: 48px 20px 32px; border-radius:22px; -webkit-mask-image: none; mask-image: none; }
  .ignis-lines{ display:none; }
  .ignis-center{
    position:static; transform:none; width:100%; max-width:320px; margin:0 auto 40px;
  }
  .ignis-center-desc{ max-height:none; opacity:1; overflow:visible; }
  .ignis-node-wrap{
    position:static; animation:none; margin-top:0 !important;
    flex-direction:column; align-items:flex-start; gap:14px;
    width:100%; margin-bottom:18px; padding-bottom:18px;
    border-bottom:1px solid var(--line-soft);
  }
  .ignis-node-wrap:last-child{ border-bottom:none; margin-bottom:0; }
  .ignis-node{ transform:none !important; box-shadow:none; opacity:1 !important; }
  .ignis-node::after{ display:none; }
  .ignis-tooltip{
    position:static; opacity:1; visibility:visible; pointer-events:auto;
    transform:none !important; width:100%; box-shadow:none; border:none;
    background:transparent; padding:0;
  }
  .ignis-tooltip-icon{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .ignis-node-wrap, .ignis-dust span, .ignis-line-dot, .ignis-node::after{ animation:none !important; }
  .ignis-node-wrap,
  .ignis-node{ opacity:1 !important; }
}

/* ============ SHOWREEL / SHOWCASE ============ */
.video-frame, .showcase-frame{
  position: relative; margin-top: 40px;
  border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16/8;
  background: linear-gradient(160deg, #10160f, #06090a);
}
.showcase-frame{ aspect-ratio: 20/7; }
.pattern-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1.4px);
  background-size: 14px 14px;
  mask-image: repeating-linear-gradient(135deg, #000 0 40px, transparent 40px 80px);
  opacity:.6;
  animation: filmStutter 10.4s var(--motion-step-timing) infinite;
  will-change: opacity, transform;
}
.video-frame,
.showcase-frame{
  animation: subtleStepFloat 20s var(--motion-step-timing) infinite;
  will-change: transform;
}
.video-controls{
  position:absolute; top:20px; left:20px; display:flex; gap:10px; z-index:2;
}
.round-btn{
  width:38px; height:38px; border-radius:50%;
  background: rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center; color:#fff;
  backdrop-filter: blur(6px); transition: background .2s ease;
}
.round-btn:hover{ background: rgba(255,255,255,0.35); }
.round-btn.small{ width:30px; height:30px; background: var(--accent); color:#0a0a0a; }
.video-timer{
  position:absolute; top:20px; right:20px; z-index:2;
  padding:7px 14px; border-radius:999px; background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.15); font-size:0.82rem; font-weight:600;
}
.video-canvas, .showcase-frame{ display:flex; align-items:center; justify-content:center; }
.video-canvas{ position:absolute; inset:0; }
.center-mark{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.ring{
  position:absolute; width:150px; height:150px; border-radius:50%;
  border: 1px solid rgba(255,255,255,0.18);
  animation: subtleStepFloat 14s var(--motion-step-timing) infinite;
}
.center-mark.small .ring{ width:120px; height:120px; }
.showcase-caption{
  position:absolute; left:28px; bottom:26px; z-index:2; max-width:420px;
}
.showcase-caption h3{ font-size:1.4rem; margin-bottom:6px; }
.showcase-caption p{ color: var(--text-dim); font-size:0.92rem; }

/* ============ PROJECT GRID ============ */
.project-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}

/* ============ WHAT WE CREATE ============ */
.wwc-section{ padding: 110px clamp(20px,5vw,64px) 60px; }
.wwc-section .section-title.center,
.wwc-section .eyebrow.center,
.wwc-section .section-lead.center{ margin-left:auto; margin-right:auto; }
.wwc-section .section-lead.center{ max-width:600px; margin-bottom:70px; }

.wwc-orbit{
  position: relative;
  width: min(950px, 100vw); height: min(950px, 100vw);
  margin: 0 auto; overflow: visible; border-radius: 50%;
  background: transparent;
  --wwc-accent: #ffffff;
  --wwc-accent-soft: rgba(255,255,255,0.22);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity .7s ease, transform .7s ease;
}
.wwc-orbit.in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wwc-bg{ position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:0; pointer-events:none; }
.wwc-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 42px 42px;
}
.wwc-dust span{
  position:absolute; width:2.5px; height:2.5px; border-radius:50%;
  background: rgba(255,255,255,0.5);
  animation: wwcTwinkle 4.2s ease-in-out infinite;
}
@keyframes wwcTwinkle{ 0%,100%{ opacity:.12; } 50%{ opacity:.65; } }
.wwc-vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at center, transparent 40%, var(--bg) 92%);
}

.wwc-lines{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; pointer-events:none; }
.wwc-line-path{ fill:none; stroke-width:1.3; transition: stroke .4s ease, stroke-width .4s ease, opacity .4s ease; }
.wwc-orbit.center-hover .wwc-line-path{ stroke: rgba(255,255,255,0.45) !important; }
.wwc-line-path.is-active{ stroke: var(--wwc-accent) !important; stroke-width:1.8; }
.wwc-orbit.node-hover .wwc-line-path:not(.is-active){ opacity:.3; }

.wwc-line-dot{ fill: var(--wwc-accent); filter: drop-shadow(0 0 4px var(--wwc-accent-soft)); }

/* ---- center ---- */
.wwc-center{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(0.96);
  z-index:3; width:150px; padding: 26px 20px;
  background: linear-gradient(160deg, #161616, #0a0a0a);
  border: 1px solid rgba(255,255,255,0.08); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  cursor:default; box-shadow: 0 0 40px -14px var(--wwc-accent-soft);
  animation: wwcCenterFloat 7s ease-in-out infinite;
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease, width .55s cubic-bezier(.22,1,.36,1), height .55s cubic-bezier(.22,1,.36,1),
              border-radius .55s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .4s ease;
}
.wwc-orbit.in-view .wwc-center{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
@keyframes wwcCenterFloat{ 0%,100%{ margin-top:0; } 50%{ margin-top:-6px; } }
.wwc-center-core{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.wwc-center-title{ font-family: var(--font-display); font-weight:700; font-size:1rem; }
.wwc-center-sub{ font-size:0.72rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.08em; }
.wwc-center-desc{
  font-size:0.8rem; line-height:1.6; color: var(--text-dim);
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .4s ease .05s;
}
.wwc-center:hover, .wwc-center:focus-visible{
  width: 340px; border-radius: 28px;
  border-color: var(--wwc-accent-soft);
  box-shadow: 0 0 60px -12px var(--wwc-accent-soft);
}
.wwc-center:hover .wwc-center-desc, .wwc-center:focus-visible .wwc-center-desc{ max-height:180px; opacity:1; }

/* ---- nodes (positioned on a circle) ---- */
.wwc-node-wrap{
  position:absolute; top:50%; left:50%; z-index:2;
  transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) translateY(12px);
  margin-left:-27px; margin-top:-27px;
  opacity: 0;
  animation: wwcNodeFloat 7.4s ease-in-out infinite;
  animation-delay: calc(var(--angle) * -0.008s);
  transition: opacity .5s ease .25s, transform .5s ease .25s;
  transform-origin: center center;
}
.wwc-orbit.in-view .wwc-node-wrap{
  opacity: 1;
  transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) translateY(0);
}
.wwc-node-wrap.is-active{
  z-index: 10;
}
@keyframes wwcNodeFloat{
  0%,100%{ margin-left:-27px; margin-top:-27px; transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) translateY(0) scale(1); }
  12%{ margin-left:-34px; margin-top:-25px; transform: rotate(var(--angle)) translate(calc(var(--radius) - 4px)) rotate(calc(-1 * var(--angle))) translateY(-3px) scale(1.02); }
  26%{ margin-left:-24px; margin-top:-32px; transform: rotate(var(--angle)) translate(calc(var(--radius) + 3px)) rotate(calc(-1 * var(--angle))) translateY(2px) scale(0.98); }
  42%{ margin-left:-30px; margin-top:-29px; transform: rotate(var(--angle)) translate(calc(var(--radius) + 1px)) rotate(calc(-1 * var(--angle))) translateY(-5px) scale(1.03); }
  58%{ margin-left:-23px; margin-top:-26px; transform: rotate(var(--angle)) translate(calc(var(--radius) - 3px)) rotate(calc(-1 * var(--angle))) translateY(4px) scale(0.97); }
  74%{ margin-left:-29px; margin-top:-31px; transform: rotate(var(--angle)) translate(calc(var(--radius) + 2px)) rotate(calc(-1 * var(--angle))) translateY(1px) scale(1.01); }
  88%{ margin-left:-26px; margin-top:-28px; transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) translateY(-2px) scale(1); }
 }

.wwc-node{
  position:relative; z-index:1;
  width:54px; height:54px; border-radius:50%;
  background: var(--bg-card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--text-dim);
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, color .3s ease,
              box-shadow .4s ease, opacity .4s ease;
}
.wwc-node svg{ position:relative; z-index:2; }
.wwc-orbit.node-hover .wwc-node-wrap:not(.is-active) .wwc-node{ opacity:.55; }
.wwc-orbit.center-hover .wwc-node{ border-color: rgba(255,255,255,0.16); color: var(--accent); }
.wwc-node-wrap.is-active .wwc-node{
  transform: scale(1.08);
  border-color: var(--wwc-accent);
  color: var(--wwc-accent);
  box-shadow: 0 0 26px -4px var(--wwc-accent-soft);
}

/* ---- hover card ---- */
.wwc-card{
  position:absolute; left:50%; transform: translateX(-50%) translateY(6px) scale(.96);
  width:250px; padding:20px 22px;
  background: var(--bg-card); border:1px solid var(--line); border-radius:18px;
  box-shadow: 0 28px 60px -22px rgba(0,0,0,0.85);
  opacity:0; visibility:hidden; pointer-events:none; z-index:4;
  transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.34,1.4,.64,1), visibility .4s;
}
.wwc-flip-down .wwc-card{ top: calc(100% + 16px); }
.wwc-flip-up .wwc-card{ bottom: calc(100% + 16px); }
.wwc-node-wrap.is-active .wwc-card{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0) scale(1);
}
.wwc-card h4{ font-family: var(--font-display); font-size:1rem; font-weight:700; margin-bottom:8px; }
.wwc-card > p{ font-size:0.82rem; line-height:1.55; color: var(--text-dim); margin-bottom:16px; }

.wwc-card-lists{ display:flex; flex-direction:column; gap:12px; }
.wwc-list-label{
  display:block; font-size:0.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--wwc-accent); margin-bottom:6px;
}
.wwc-card-lists ul{ display:flex; flex-wrap:wrap; gap:6px; }
.wwc-card-lists li{
  font-size:0.74rem; color: var(--text-dim);
  padding:3px 9px; border:1px solid var(--line); border-radius:999px;
}

/* ---- responsive orbit radius ---- */
@media (max-width: 980px){ .wwc-orbit{ --radius:200px !important; } }

/* ---- mobile: swipeable vertical carousel ---- */
.wwc-carousel{ display:none; }
.wwc-slide{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.wwc-section.in-view .wwc-slide{
  opacity:1;
  transform: translateY(0);
}

@media (max-width: 860px){
  .wwc-orbit{ display:none; }
  .wwc-carousel{
    display:flex; flex-direction:column; gap:0;
    max-height: 520px; overflow-y:auto; scroll-snap-type: y mandatory;
    border: 1px solid var(--line); border-radius: 22px;
    background: #050505;
  }
  .wwc-slide{
    scroll-snap-align:start; flex-shrink:0; min-height:400px;
    padding: 32px 26px; border-bottom:1px solid var(--line-soft);
    display:flex; flex-direction:column; justify-content:center;
  }
  .wwc-slide:last-child{ border-bottom:none; }
  .wwc-slide-tag{
    font-size:0.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color: var(--accent); margin-bottom:10px;
  }
  .wwc-slide h4{ font-family: var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:12px; }
  .wwc-slide > p{ font-size:0.9rem; line-height:1.6; color: var(--text-dim); margin-bottom:20px; }
  .wwc-slide .wwc-card-lists{ gap:16px; }
  .wwc-slide .wwc-list-label{ color: var(--accent); }
}

@media (prefers-reduced-motion: reduce){
  .wwc-node-wrap, .wwc-center, .wwc-dust span{ animation:none !important; }
}


.project-card{
  position:relative; border-radius: var(--radius-md); overflow:hidden;
  aspect-ratio: 3/4; background: linear-gradient(160deg,#1c1730,#0a0a12);
  border: 1px solid var(--line);
  transition: transform var(--motion-medium) var(--motion-interactive), box-shadow var(--motion-medium) var(--motion-interactive), border-color var(--motion-medium) var(--motion-interactive);
  will-change: transform, box-shadow;
}
.project-card:hover,
.project-card:focus-within{
  transform: translateY(-3px);
  box-shadow: 0 28px 70px -40px rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.24);
}
.project-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-card .tag{
  position:absolute; left:14px; bottom:14px; padding:6px 12px;
  background: rgba(0,0,0,0.55); border-radius:999px; font-size:0.78rem; font-weight:600;
  backdrop-filter: blur(6px);
  transition: transform var(--motion-medium) var(--motion-interactive), background var(--motion-medium) var(--motion-interactive), box-shadow var(--motion-medium) var(--motion-interactive);
}
.project-card:hover .tag,
.project-card:focus-within .tag{
  transform: translateY(-2px);
  background: rgba(0,0,0,0.7);
  box-shadow: 0 12px 30px -18px rgba(0,0,0,0.3);
}

/* Video-specific styles */
.project-card video.project-video{
  width:100%; height:100%; display:block; object-fit:cover; background:#000;
}

/* Glass overlay controls (hidden by default, fade in on hover/focus) */
.project-card .video-overlay{
  position:absolute; inset:0; display:flex; align-items:end; justify-content:center;
  padding:18px; gap:12px; pointer-events:none; opacity:0; transform:translateY(6px);
  transition: opacity 240ms var(--motion-step-timing), transform 240ms var(--motion-step-timing), backdrop-filter 240ms ease;
}
.project-card:hover .video-overlay,
.project-card:focus-within .video-overlay{
  opacity:1; transform:translateY(0); pointer-events:auto;
  animation: overlayStep 240ms var(--motion-step-timing) both;
}
.project-card .video-overlay .glass{
  width:100%; max-width:calc(100% - 36px); background: rgba(6,6,6,0.42);
  border: 1px solid rgba(255,255,255,0.06); padding:10px 12px; border-radius:12px;
  display:flex; align-items:center; gap:12px; backdrop-filter: blur(8px);
}
.project-card .control-btn{
  width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background: transparent; border: none; color: #fff; opacity:0.96; cursor:pointer;
}
.project-card .control-btn svg{ width:18px; height:18px; }
.project-card .progress-wrap{ flex:1; display:flex; align-items:center; gap:10px; }
.project-card .time{ font-size:0.82rem; color:rgba(255,255,255,0.92); min-width:56px; text-align:right; }
.project-card .progress{ -webkit-appearance:none; appearance:none; height:6px; background:rgba(255,255,255,0.12); border-radius:999px; width:100%; }
.project-card .progress::-webkit-slider-thumb{ -webkit-appearance:none; width:10px; height:10px; background:#fff; border-radius:50%; box-shadow:0 0 8px rgba(255,255,255,0.12); }
.project-card .progress::-moz-range-thumb{ width:10px; height:10px; background:#fff; border-radius:50%; }

/* make sure rounded corners remain visible for video */
.project-card video{ border-radius: var(--radius-md); }
@media (max-width: 820px){
  .project-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 540px){
  .project-grid{ grid-template-columns: 1fr; }
}

/* ============ FAQ ============ */
.faq-section .section-title{ text-align:center; margin-left:auto; margin-right:auto; }
.faq-list{ max-width: 760px; margin: 0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{
  border:1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg-card); overflow:hidden;
}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 22px 26px; width:100%; text-align:left;
  font-family: var(--font-display); font-weight:600; font-size:1.05rem;
}
.faq-q .plus{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition: transform .25s ease, background .25s ease;
}
.faq-item.open .faq-q .plus{ transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color:#0a0a0a; }
.faq-a{
  max-height:0; overflow:hidden; transition: max-height .3s ease;
  color: var(--text-dim); font-size:0.95rem; line-height:1.6;
}
.faq-a p{ padding: 0 26px 22px; }
.faq-item.open .faq-a{ max-height:220px; }

/* ============ CONTACT ============ */
.contact-section .section-title.center{ max-width:640px; margin: 0 auto 50px; }

.contact-panel-grid{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:22px;
  max-width:1120px; margin:0 auto;
}

.contact-intro-panel{
  position:relative; overflow:hidden;
  border-radius: var(--radius-lg); border:1px solid var(--line);
  background: linear-gradient(160deg, #161616, #000000);
  min-height:520px; display:flex; align-items:flex-end;
  padding:40px;
}
.dot-grid{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 460px 360px at 68% 12%, black 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 460px 360px at 68% 12%, black 40%, transparent 78%);
  opacity:.65;
}
.contact-intro-text{ position:relative; z-index:1; }
.contact-social-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin:40px 0 24px;
  max-width:1120px; margin-left:auto; margin-right:auto;
}
.social-card{
  display:flex; align-items:center; gap:16px; padding:24px 26px;
  border:1px solid var(--line); border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03); color: var(--text);
  transition: border-color var(--motion-medium) var(--motion-interactive), transform var(--motion-medium) var(--motion-interactive), background var(--motion-medium) var(--motion-interactive);
}
.social-card:hover{
  border-color: var(--accent); background: rgba(255,255,255,0.08); transform: translateY(-2px);
}
.social-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  font-size:0.95rem; font-weight:700; color: var(--text);
}
.social-card-x .social-icon{ color:#fff; }
.social-card-ig .social-icon{ color:#f3c150; }
.social-card-li .social-icon{ color:#4a90e2; }
.social-handle{ font-size:0.95rem; font-weight:700; }

.contact-heading{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height:1.15; margin-bottom:26px;
}
.contact-heading em{
  display:block; font-family:'Playfair Display', serif; font-style:italic;
  font-weight:500; color: var(--text-dim); margin-top:2px;
}
.contact-links{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; align-items:flex-start; }
.contact-link-row{
  display:flex; align-items:center; gap:10px; font-size:0.92rem; font-weight:600;
  color: var(--text-dim); transition: color var(--motion-medium) var(--motion-interactive);
}
.contact-link-row .ic{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:0.75rem; flex-shrink:0;
}
.contact-link-row:hover{ color: var(--text); }
.contact-email-note{ font-size:0.8rem; color: var(--text-faint); }

.contact-form-panel{
  border-radius: var(--radius-lg); border:1px solid var(--line);
  background: var(--bg-card); padding:40px;
}
.form-heading{
  font-family: var(--font-display); font-weight:600; font-size:1.4rem;
  color: var(--text-dim); margin-bottom:32px;
}
.contact-form{ display:flex; flex-direction:column; }
.contact-form label{ font-size:0.8rem; font-weight:700; margin-bottom:10px; }
.contact-form input, .contact-form textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color: var(--text); font-family: var(--font-body); font-size:0.95rem;
  padding:0 0 14px; margin-bottom:26px; outline:none; resize:vertical;
  transition: border-color var(--motion-medium) var(--motion-interactive), box-shadow var(--motion-medium) var(--motion-interactive), color var(--motion-medium) var(--motion-interactive), transform var(--motion-medium) var(--motion-interactive);
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color: var(--text-faint); }
.contact-form input:focus, .contact-form textarea:focus{
  border-bottom-color: var(--text);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.14);
  transform: translateY(-1px);
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible{
  outline: none;
  border-bottom-color: var(--accent);
}
.contact-form textarea{ min-height:90px; }
.btn-send{
  margin-top:4px; padding:15px; border-radius:999px;
  background: var(--text); color:#0a0a0a; font-weight:700; font-size:0.95rem;
  transition: background var(--motion-slow) var(--motion-interactive), transform var(--motion-slow) var(--motion-interactive), box-shadow var(--motion-slow) var(--motion-interactive), opacity var(--motion-slow) ease;
}
.btn-send:hover{
  transform: translateY(-1px) scale(1.02);
  opacity: 0.96;
}

body[data-theme='crimson'] .btn-send{
  background: linear-gradient(135deg, rgba(239, 27, 36, 0.94), rgba(207, 22, 29, 0.96));
  color: #0a0a0a;
  border-color: transparent;
  box-shadow: 0 16px 38px -24px rgba(239, 27, 36, 0.26);
}
body[data-theme='crimson'] .btn-send:hover,
body[data-theme='crimson'] .btn-send:focus-visible{
  background: linear-gradient(135deg, rgba(255, 55, 68, 0.98), rgba(239, 27, 36, 1));
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 20px 48px -24px rgba(239, 27, 36, 0.34);
}
.form-success{
  margin-top:14px; font-size:0.82rem; color: var(--text-dim); display:none;
}
.form-success.show{ display:block; }

/* ============ BOOKING ============ */
.booking-section .eyebrow, .booking-section .section-title{ margin-left:auto; margin-right:auto; }
.booking-section .eyebrow.center{ max-width:520px; }
.booking-section .section-title.center{ margin-bottom:50px; }

.booking-panel{
  display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; background: var(--bg-card); max-width:1100px; margin:0 auto;
}
.booking-info{ padding:32px; border-right:1px solid var(--line); }
.booking-handle{ color: var(--text-faint); font-size:0.85rem; margin: 14px 0 10px; }
.booking-info h3{ font-size:1.3rem; margin-bottom:14px; }
.booking-desc{ color: var(--text-dim); font-size:0.9rem; margin-bottom:8px; }
.booking-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.booking-list li{
  font-size:0.88rem; color: var(--text-dim); padding-left:18px; position:relative;
}
.booking-list li::before{
  content:"✦"; position:absolute; left:0; color: var(--accent); font-size:0.7rem; top:3px;
}
.booking-meta{ display:flex; flex-direction:column; gap:10px; font-size:0.85rem; color: var(--text-dim); }

.booking-calendar{ padding:32px; border-right:1px solid var(--line); }
.cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; font-weight:700; font-family: var(--font-display); }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--text-dim);
}
.cal-nav button:hover{ border-color: var(--accent); color: var(--accent); }
.cal-weekdays{
  display:grid; grid-template-columns: repeat(7,1fr); text-align:center;
  font-size:0.7rem; color: var(--text-faint); letter-spacing:0.05em; margin-bottom:8px;
}
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; }
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:0.85rem; background: var(--bg-raised); color: var(--text-dim);
  transition: background var(--motion-medium) var(--motion-interactive), color var(--motion-medium) var(--motion-interactive);
}
.cal-day.enabled{ color: var(--text); cursor:pointer; }
.cal-day.enabled:hover{ background: rgba(255,255,255,0.14); }
.cal-day.selected{
  background: linear-gradient(135deg, var(--accent-light), var(--accent-deep)); color:#0a0a0a; font-weight:700;
}
.cal-day.empty{ background:transparent; }
.cal-day.today::after{ content:""; }

.booking-slots{ padding:32px; display:flex; flex-direction:column; }
.slots-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.slots-header span{ font-weight:700; font-family: var(--font-display); }
.slots-toggle{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.slots-toggle button{ padding:5px 12px; font-size:0.75rem; color: var(--text-dim); }
.slots-toggle button.active{ background: var(--accent); color:#0a0a0a; }
.slots-list{ display:flex; flex-direction:column; gap:10px; max-height:360px; overflow-y:auto; padding-right:4px; }
.slot-btn{
  padding:12px; border:1px solid var(--line); border-radius:10px; text-align:center;
  font-weight:600; font-size:0.9rem; background: var(--bg-raised); transition: transform var(--motion-medium) var(--motion-interactive), background var(--motion-medium) var(--motion-interactive), color var(--motion-medium) var(--motion-interactive), border-color var(--motion-medium) var(--motion-interactive);
}
.slot-btn:hover{ border-color: var(--accent); background: rgba(255,255,255,0.08); color: var(--accent-light); transform: translateY(-1px); }

@media (max-width: 900px){
  .booking-panel{ grid-template-columns: 1fr; }
  .booking-info, .booking-calendar{ border-right:none; border-bottom:1px solid var(--line); }
  .contact-panel-grid{ grid-template-columns: 1fr; }
}

/* ============ ABOUT ============ */
.about-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:40px; }
.about-card{
  padding:28px; border:1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-card);
  opacity:0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.about-card.reveal-visible{
  opacity:1; transform: translateY(0);
}
.hiw-header,
#hiw-board{
  opacity:0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-from-left,
.reveal-from-right,
.reveal-from-top,
.reveal-from-bottom,
.reveal-scale {
  opacity:0;
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-from-left { transform: translateX(-24px); }
.reveal-from-right { transform: translateX(24px); }
.reveal-from-top { transform: translateY(-24px); }
.reveal-from-bottom { transform: translateY(24px); }
.reveal-scale { transform: scale(0.96); }
.reveal-visible { opacity:1 !important; transform: translate(0,0) scale(1) !important; }
.reveal-visible.reveal-scale { transform: translate(0,0) scale(1) !important; }
.about-card h3{ font-size:1.1rem; margin-bottom:10px; }
.about-card p{ color: var(--text-dim); font-size:0.92rem; line-height:1.6; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }

/* ============ FOOTER ============ */
.site-footer{
  padding: 70px clamp(20px,5vw,64px) 40px;
  border-top:1px solid var(--line-soft);
}
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:60px; flex-wrap:wrap; gap:40px; }
.footer-cols{ display:flex; gap:70px; }
.footer-col{ display:flex; flex-direction:column; gap:14px; }
.footer-label{ font-size:0.7rem; letter-spacing:0.12em; color: var(--text-faint); margin-bottom:4px; }
.footer-link{ font-weight:600; color: var(--text); font-size:0.95rem; }
.footer-link:hover{ color: var(--accent-light); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color: var(--text-dim); font-size:0.85rem; }
.footer-bottom .muted{ color: var(--text-faint); }

/* ============ WORK VIEW FOOTER ============ */
.work-footer{
  margin-top: 80px;
  padding: 80px clamp(24px,5vw,72px) 40px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}

.footer-content{
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.8fr);
  gap: 80px;
  margin: 0 auto 42px;
  max-width: 1240px;
}

.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.brand-section{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.brand-section .brand-mark{
  flex-shrink: 0;
}

.brand-section h3{
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.brand-section p{
  color: var(--text-dim);
  font-size: 0.96rem;
  line-height: 1.85;
  max-width: 320px;
}

.footer-columns{
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 40px;
}

.footer-col h4{
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-col ul{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-col a{
  color: var(--text-dim);
  font-size: 0.96rem;
  line-height: 1.8;
  transition: color .25s ease, transform .25s ease;
}

.footer-col a:hover{
  color: var(--accent);
  transform: translateX(2px);
}

.work-footer .footer-bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  justify-content: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 28px;
}

.footer-tagline{
  color: var(--text-dim);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work-footer .footer-bottom p{
  margin: 0;
  color: var(--text-faint);
}

@media (max-width: 960px){
  .footer-columns{
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 32px;
  }
}

@media (max-width: 720px){
  .footer-content{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-columns{
    grid-template-columns: 1fr;
  }
}