/* =============================================
   ROBERT WILLIAMS IV — Personal Site
   styles.css
   ============================================= */

/* ---- CSS Variables ---- */
:root {
  --black:      #080808;
  --white:      #f0ede8;
  --cream:      #e8e2d9;
  --gold:       #c9a84c;
  --gold-dim:   #7a6230;
  --red:        #c0392b;
  --gray-dark:  #111111;
  --gray:       #1e1e1e;
  --gray-mid:   #2a2a2a;
  --gray-light: #888888;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --nav-height: 72px;
  --max-width:  1200px;
}

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

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

body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}

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

button { cursor: none; }

/* ---- Film Grain Overlay ----
   SVG feTurbulence noise, fixed + non-interactive */
@keyframes grain-shift {
  0%   { background-position:   0%   0%; }
  20%  { background-position:  40%  20%; }
  40%  { background-position:  80%  60%; }
  60%  { background-position:  20%  80%; }
  80%  { background-position:  60%  40%; }
  100% { background-position:   0%   0%; }
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: grain-shift 0.12s steps(1) infinite;
}

/* ---- Container ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* ---- Section Labels & Titles ---- */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 2rem;
}

.gold { color: var(--gold); }


/* =============================================
   CUSTOM CURSOR
   ============================================= */
.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  will-change: left, top;
}

.cursor {
  width: 8px;
  height: 8px;
  background: var(--gold);
  transition: width 0.15s, height 0.15s;
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid var(--gold);
  opacity: 0.55;
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

.cursor-ring.expand {
  width: 60px;
  height: 60px;
  opacity: 0.25;
}

/* Hide on touch devices */
@media (hover: none) {
  .cursor, .cursor-ring { display: none; }
  body, button { cursor: auto; }
}


/* =============================================
   NAVIGATION
   ============================================= */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  height: var(--nav-height);
  background: linear-gradient(to bottom, rgba(8,8,8,0.96) 0%, transparent 100%);
  border-bottom: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}

#nav.scrolled {
  background: rgba(8, 8, 8, 0.97);
  border-bottom-color: rgba(201, 168, 76, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.nav-links {
  display: flex;
  gap: 2.5rem;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-light);
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--gold);
}

/* Hamburger (hidden on desktop) */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.25rem;
}


/* =============================================
   HERO
   ============================================= */
#hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 4rem;
  padding-left: 3rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 88% 8%,  rgba(201, 168, 76, 0.13) 0%, transparent 58%),
    radial-gradient(ellipse at 12% 92%, rgba(192, 57,  43, 0.10) 0%, transparent 52%),
    var(--black);
}

/* Filmstrip — vertical repeating gold dashes on right edge */
.filmstrip {
  position: absolute;
  top: 0;
  right: 3.5rem;
  width: 2px;
  height: 100%;
  z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    var(--gold) 0px,
    var(--gold) 14px,
    transparent 14px,
    transparent 24px
  );
  opacity: 0.45;
}

/* Floating particle canvas */
#particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Studio photo — right-side cinematic portrait */
.hero-photo-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Gradient mask — left edge fades photo into dark background */
.hero-photo-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    var(--black)           0%,
    rgba(8, 8, 8, 0.82)   22%,
    rgba(8, 8, 8, 0.35)   55%,
    rgba(8, 8, 8, 0.05)   85%,
    transparent           100%
  );
}

/* Bottom vignette — blends into the next section */
.hero-photo-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  z-index: 2;
  background: linear-gradient(to top, var(--black) 0%, transparent 100%);
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% top;  /* keep face/upper body in frame */
  display: block;
  opacity: 0.82;
  filter: contrast(1.08) saturate(0.8) brightness(0.95);
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 960px;
}

.hero-location {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.6rem;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  margin-bottom: 1.8rem;
  display: flex;
  flex-direction: column;
}

.hero-headline .line {
  display: block;
}

.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 300;
  color: rgba(240, 237, 232, 0.6);
  max-width: 520px;
  margin-bottom: 2.75rem;
}

.hero-tagline {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 1.8rem;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--black);
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--gold);
  transition: background 0.22s, color 0.22s, transform 0.22s;
}

.btn-primary:hover {
  background: transparent;
  color: var(--gold);
  transform: translateY(-2px);
}

.btn-ghost {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(240, 237, 232, 0.45);
  transition: color 0.2s;
}

.btn-ghost:hover {
  color: var(--gold);
}

/* Scroll indicator — bottom-right of hero */
.hero-scroll {
  position: absolute;
  right: 3.5rem;
  bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 52px;
  background: var(--gold);
  opacity: 0.7;
}

.scroll-text {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0.7;
}

/* ---- Hero entrance animations ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.reveal-hero {
  opacity: 0;
  animation: fadeUp 0.95s ease forwards;
}


/* =============================================
   SCROLL REVEAL
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.72s ease, transform 0.72s ease;
}

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


/* =============================================
   ABOUT
   ============================================= */
#about {
  padding: 6rem 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.about-bio p {
  color: rgba(240, 237, 232, 0.72);
  font-size: 1.05rem;
  line-height: 1.78;
  margin-bottom: 1.3rem;
}

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

/* Stats 2×2 grid */
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.stat-cell {
  background: var(--gray);
  padding: 2.2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--gold);
  line-height: 1;
}

/* ∞ glyph — Bebas Neue lacks U+221E, falls back to a logo font */
.stat-infinity {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 2.8rem;
}

/* "Nashville" displayed smaller since it's text not a number */
.stat-text-sm {
  font-size: 1.55rem;
}

/* About right column — stats + Bubbas photo stacked */
.about-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Bubbas photo — personal accent below the stats */
.about-photo-wrap {
  margin: 0;
  overflow: hidden;
  line-height: 0;
}

.about-photo {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center 18%; /* keep faces in the upper portion */
  display: block;
  filter: contrast(1.04) saturate(0.9);
  transition: transform 0.6s ease;
}

.about-photo-wrap:hover .about-photo {
  transform: scale(1.03);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray-light);
}


/* =============================================
   RESULTS
   ============================================= */

@keyframes gold-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(600%); }
}

@keyframes number-glow {
  0%, 100% { color: var(--gold); }
  50%       { color: #f2c84e; text-shadow: 0 0 28px rgba(201, 168, 76, 0.55); }
}

.result-number.counted {
  animation: number-glow 1.6s ease-in-out 2;
}

#results {
  position: relative;
  overflow: hidden;
  background: var(--gray-dark);
  padding: 6rem 0 0;
}

/* Scan line sweeps across the section */
#results::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 20%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.055), transparent);
  animation: gold-scan 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Canvas sits behind all content */
#results-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Ensure inner content sits above canvas — constrained like other sections */
.results-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Override .container double-padding since results-inner handles it */
.results-header {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 2.5rem;
}

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

.result-card {
  background: var(--gray);
  padding: 2.5rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

/* Gold top-border slides in on hover */
.result-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.result-card:hover::before { transform: scaleX(1); }
.result-card:hover { background: #242424; }

.result-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  color: var(--gold);
  line-height: 1;
  letter-spacing: 0.02em;
}

.result-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.1;
}

.result-context {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-light);
  margin-top: 0.2rem;
}

@media (max-width: 768px) {
  #results { padding: 4rem 0 0; }
  .results-inner { padding: 0 1.5rem; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .result-card { padding: 1.8rem 1.2rem 2.2rem; }
}


/* =============================================
   SERVICES
   ============================================= */
#services {
  background: #0c0c0c;
  padding: 6rem 0 0;
}

.services-header {
  padding-bottom: 3rem;
}

/* Full-bleed 3-column grid, gap 2px */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.service-card {
  position: relative;
  background: var(--gray);
  padding: 2.5rem 2rem 3rem;
  overflow: hidden;
  transition: background 0.3s;
}

/* Gold top-border slides in on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card:hover {
  background: #242424;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
}

.card-number {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gold-dim);
  letter-spacing: 0.1em;
}

.card-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
  padding: 0.2rem 0.6rem;
}

.card-name {
  font-family: var(--font-display);
  font-size: 2.4rem;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
}

.card-desc {
  font-size: 0.9rem;
  color: rgba(240, 237, 232, 0.62);
  line-height: 1.72;
  margin-bottom: 2.2rem;
}

.card-services {
  border-top: 1px solid var(--gray-mid);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.card-services li {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gray-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-left: 1.1rem;
}

.card-services li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold-dim);
}


/* =============================================
   WHO I WORK WITH
   ============================================= */
#clients {
  padding: 6rem 0;
  background: var(--black);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.client-card {
  background: var(--gray-dark);
  border: 1px solid var(--gray-mid);
  padding: 2rem 1.8rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}

.client-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.client-card:hover {
  border-color: var(--gold-dim);
  background: #161616;
  transform: translateY(-3px);
}

.client-card:hover::before { transform: scaleX(1); }

.client-icon {
  width: 34px;
  height: 34px;
  color: var(--gold);
  opacity: 0.85;
}

.client-icon svg {
  width: 100%;
  height: 100%;
}

.client-type {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--white);
}

.client-outcome {
  font-size: 0.88rem;
  color: rgba(240, 237, 232, 0.58);
  line-height: 1.65;
}

@media (max-width: 768px) {
  #clients { padding: 5rem 0; }
  .clients-grid { grid-template-columns: 1fr; gap: 1rem; }
  .client-card { padding: 2rem 1.5rem; }
}


/* =============================================
   WORK (Portfolio)
   ============================================= */
#work {
  padding: 6rem 0;
}

/* Tab switcher */
.tab-switcher {
  display: flex;
  border-bottom: 1px solid var(--gray-mid);
  margin-bottom: 3rem;
}

.tab-btn {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-light);
  background: none;
  border: none;
  padding: 0.9rem 1.6rem;
  position: relative;
  transition: color 0.2s;
}

/* Active gold underline */
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.22s;
}

.tab-btn.active {
  color: var(--gold);
}

.tab-btn.active::after {
  transform: scaleX(1);
}

.tab-btn:hover:not(.active) {
  color: var(--white);
}

/* Tab panels */
.tab-panel         { display: none; }
.tab-panel.active  { display: block; }

/* ---- Sites Grid ---- */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.site-card {
  background: var(--gray-dark);
  border: 1px solid var(--gray-mid);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s;
}

.site-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-dim);
}

.site-preview {
  aspect-ratio: 16 / 9;
  background: var(--gray-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--gray-light);
}

.site-info {
  padding: 1.3rem 1.3rem 1.5rem;
}

.site-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}

.site-desc {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--gray-light);
  letter-spacing: 0.05em;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.site-link {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  transition: opacity 0.2s;
}

.site-link:hover { opacity: 0.65; }

/* ---- Video Grid ---- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* 2×2 layout for real video embeds */
.video-grid--reels {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.video-card {
  background: var(--gray-dark);
  border-left: 2px solid var(--gold);
  overflow: hidden;
}

/* 2×2 video containers — fixed height, same size, portrait crop */
.video-embed {
  position: relative;
  height: 460px;
  background: #000;
  overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

.video-info {
  padding: 1.3rem;
}

.video-info h4 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.video-info p {
  font-size: 0.85rem;
  color: rgba(240, 237, 232, 0.58);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.video-cta {
  text-align: center;
  padding: 0.5rem 0 1rem;
}

/* ---- Projects List ---- */
.projects-list {
  border-top: 1px solid var(--gray-mid);
}

.project-row {
  display: grid;
  grid-template-columns: 220px 130px 1fr 110px;
  gap: 2rem;
  align-items: center;
  padding: 1.6rem 0.5rem;
  border-bottom: 1px solid var(--gray-mid);
  transition: background 0.2s, padding-left 0.2s;
}

.project-row:hover {
  background: rgba(201, 168, 76, 0.03);
  padding-left: 1.2rem;
}

.project-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

.project-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
  padding: 0.2rem 0.55rem;
  white-space: nowrap;
}

.project-desc {
  font-size: 0.85rem;
  color: rgba(240, 237, 232, 0.58);
  line-height: 1.5;
}

.project-status {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.65rem;
  text-align: center;
  white-space: nowrap;
}

.status-progress {
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.28);
}

.status-active {
  color: #4caf7d;
  background: rgba(76, 175, 125, 0.08);
  border: 1px solid rgba(76, 175, 125, 0.28);
}

.status-live {
  color: #5bafd6;
  background: rgba(91, 175, 214, 0.08);
  border: 1px solid rgba(91, 175, 214, 0.28);
}


/* =============================================
   VENTURES
   ============================================= */
#ventures {
  background: var(--gray-dark);
  padding: 5rem 0 0;
}

.ventures-header {
  padding-bottom: 3rem;
}

/* Full-bleed equal-width panels */
.ventures-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.venture-panel {
  background: var(--gray);
  padding: 3.2rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  min-height: 340px;
  border: 2px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}

.venture-panel:hover {
  background: #222222;
  border-color: var(--gold-dim);
}

.venture-icon {
  width: 42px;
  height: 42px;
  color: var(--gold);
}

.venture-icon svg {
  width: 100%;
  height: 100%;
}

.venture-name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 0.05em;
}

.venture-desc {
  font-size: 0.9rem;
  color: rgba(240, 237, 232, 0.58);
  line-height: 1.72;
  max-width: 260px;
}

.venture-link {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--gold);
  margin-top: auto;
  transition: opacity 0.2s;
}

.venture-link:hover { opacity: 0.65; }


/* =============================================
   CONTACT
   ============================================= */
#contact {
  padding: 9rem 0;
  background: var(--black);
}

.contact-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 5rem;
  align-items: start;
}

.contact-sub {
  color: rgba(240, 237, 232, 0.58);
  font-size: 1rem;
  max-width: 380px;
  line-height: 1.75;
  margin-bottom: 2.2rem;
}

.contact-open {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.contact-open li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

/* ---- Form ---- */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--gray-light);
}

/* All inputs, textarea, select share base styles */
#contact-form input,
#contact-form textarea,
#contact-form select {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid var(--gray-mid);
  color: var(--white);
  padding: 0.9rem 1rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 300;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s;
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: var(--gray-light);
  opacity: 1;
}

#contact-form input:focus,
#contact-form textarea:focus,
#contact-form select:focus {
  border-color: var(--gold);
}

/* Shake + red border on invalid */
#contact-form .invalid {
  border-color: var(--red) !important;
  animation: shake 0.35s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  60%       { transform: translateX(7px); }
  80%       { transform: translateX(-4px); }
}

#contact-form textarea {
  resize: vertical;
  min-height: 135px;
}

/* Custom select — hide native arrow, show gold chevron */
.select-wrap {
  position: relative;
}

.select-wrap select { cursor: none; }

.select-chevron {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 14px;
  height: 9px;
}

.select-chevron svg {
  width: 100%;
  height: 100%;
  stroke: var(--gold);
}

/* Service pills */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #1a1a1a;
  border: 1px solid var(--gray-mid);
  color: var(--gray-light);
  padding: 0.5rem 1rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.pill:hover {
  border-color: var(--gold-dim);
  color: var(--white);
}

.pill.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

/* Submit button */
.btn-submit {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  background: var(--gold);
  color: var(--black);
  border: none;
  padding: 1.1rem;
  margin-top: 0.5rem;
  transition: background 0.22s, transform 0.22s;
}

.btn-submit:hover:not(:disabled) {
  background: var(--cream);
  transform: translateY(-2px);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Success state */
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 3.5rem 2rem;
}

.form-success.visible {
  display: flex;
}

.success-check {
  width: 80px;
  height: 80px;
  stroke: var(--gold);
}

.success-heading {
  font-family: var(--font-display);
  font-size: 4.5rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.success-sub {
  color: rgba(240, 237, 232, 0.62);
  font-size: 1rem;
  line-height: 1.65;
}

/* Error message */
.form-error-msg {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  display: none;
}

.form-error-msg.visible {
  display: block;
}


/* =============================================
   MARQUEE STRIP
   ============================================= */
.marquee-strip {
  overflow: hidden;
  background: var(--gold);
  padding: 0.55rem 0;
}

.marquee-inner {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee-inner span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--black);
  white-space: nowrap;
}

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

/* Private badge — replaces links on private site cards */
.site-private {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-light);
  background: rgba(136, 136, 136, 0.08);
  border: 1px solid rgba(136, 136, 136, 0.2);
  padding: 0.2rem 0.6rem;
  display: inline-block;
}


/* ---- Case Studies ---- */
.case-studies {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.case-study {
  background: var(--gray-dark);
  border: 1px solid var(--gray-mid);
  transition: border-color 0.3s;
}

.case-study:hover {
  border-color: var(--gold-dim);
}

.case-study-header {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem 1rem;
  border-bottom: 1px solid var(--gray-mid);
  flex-wrap: wrap;
}

.case-study-name {
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: 0.04em;
  color: var(--white);
  flex-shrink: 0;
}

.case-study-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.case-tag {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.18);
  padding: 0.18rem 0.5rem;
}

.case-study-body {
  padding: 1.2rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.case-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  align-items: start;
}

.case-pill {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  text-align: center;
  flex-shrink: 0;
  margin-top: 0.18rem;
}

.case-pill--problem {
  background: rgba(192, 57, 43, 0.12);
  border: 1px solid rgba(192, 57, 43, 0.35);
  color: #e05a4a;
}

.case-pill--solution {
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.35);
  color: var(--gold);
}

.case-pill--result {
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid rgba(39, 174, 96, 0.3);
  color: #4ecb7a;
}

.case-row p {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--gray-light);
  line-height: 1.6;
}

/* =============================================
   FOOTER
   ============================================= */
#footer {
  background: var(--black);
  padding-bottom: 2rem;
}

.footer-rule {
  width: 100%;
  height: 1px;
  background: var(--gold);
  opacity: 0.35;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.6rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--gray-light);
  letter-spacing: 0.08em;
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.footer-socials {
  display: flex;
  gap: 1.3rem;
  align-items: center;
}

.footer-socials a {
  display: flex;
  align-items: center;
  width: 22px;
  height: 22px;
  color: var(--gray-light);
  transition: color 0.2s;
}

.footer-socials a:hover {
  color: var(--gold);
}

.footer-socials svg {
  width: 100%;
  height: 100%;
}


/* =============================================
   RESPONSIVE — Mobile ≤ 768px
   ============================================= */
@media (max-width: 768px) {

  /* --- Nav --- */
  .nav-hamburger {
    display: block;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(8, 8, 8, 0.98);
    flex-direction: column;
    padding: 1.5rem 2rem 2rem;
    gap: 1.25rem;
    border-bottom: 1px solid var(--gray-mid);
    backdrop-filter: blur(8px);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    font-size: 0.85rem;
    padding: 0.25rem 0;
  }

  /* --- Hero (mobile-first stacked layout) --- */
  #hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100svh;
    padding-top: var(--nav-height);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .filmstrip,
  .hero-scroll {
    display: none;
  }

  /* Photo becomes a top block, not an absolute background */
  .hero-photo-wrap {
    position: relative;
    width: 100%;
    height: 85vw;
    flex-shrink: 0;
    opacity: 1;
  }

  /* Fade photo out at the bottom — lighter so body stays visible */
  .hero-photo-wrap::before {
    background: linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.05)  0%,
      transparent           15%,
      rgba(8, 8, 8, 0.28)  88%,
      var(--black)          100%
    );
  }

  /* Face near top of crop so more body is visible below */
  .hero-photo {
    object-position: center 82%;
    opacity: 0.96;
    filter: contrast(1.05) saturate(0.85) brightness(1.18);
  }

  /* Text block flows below the photo */
  .hero-content {
    padding: 1.25rem 1.5rem 3.5rem;
    max-width: 100%;
  }

  .hero-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* --- About --- */
  #about {
    padding: 4rem 0;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-photo {
    height: 260px;
    object-position: center 82%;
  }

  .stat-cell {
    padding: 1.6rem 1.2rem;
  }

  /* --- Services --- */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* --- Work --- */
  #work {
    padding: 4rem 0;
  }

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

  .case-row {
    grid-template-columns: 70px 1fr;
    gap: 0.75rem;
  }

  .case-study-header {
    padding: 1rem 1.2rem 0.75rem;
  }

  .case-study-body {
    padding: 1rem 1.2rem 1.4rem;
  }

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

  .video-grid--reels {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .video-embed {
    height: 360px;
  }

  .project-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 0.5rem;
    column-gap: 1rem;
    padding: 1.3rem 0.5rem;
  }

  .project-name   { grid-column: 1; grid-row: 1; }
  .project-tag    { grid-column: 2; grid-row: 1; justify-self: end; }
  .project-desc   { grid-column: 1 / -1; grid-row: 2; }
  .project-status { display: none; }

  /* --- Ventures --- */
  #ventures {
    padding: 3rem 0 0;
  }

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

  .venture-panel {
    min-height: auto;
    padding: 2.5rem 1.8rem;
  }

  /* --- Contact --- */
  #contact {
    padding: 4rem 0;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* --- Footer --- */
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.9rem;
  }
}


/* =============================================
   MULTI-STEP QUIZ / CONTACT
   ============================================= */
#contact {
  padding: 0;
  background: var(--black);
  min-height: 90vh;
  display: flex;
  flex-direction: column;
}

.quiz-wrap {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Header row */
.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 0 1rem;
  gap: 1.5rem;
}

.quiz-back-btn {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, color 0.2s;
  flex-shrink: 0;
}

.quiz-back-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.quiz-back-btn:hover { color: var(--gold); }

/* Progress */
.quiz-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  justify-content: flex-end;
}

.quiz-progress-track {
  width: 140px;
  height: 2px;
  background: var(--gray-mid);
  border-radius: 1px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: var(--gold);
  width: 0%;
  transition: width 0.5s ease;
}

.quiz-step-count {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gray-light);
  letter-spacing: 0.1em;
  white-space: nowrap;
  min-width: 36px;
  text-align: right;
}

/* Slide stage — overflow clips the enter/exit animations */
.quiz-stage {
  position: relative;
  flex: 1;
  min-height: 65vh;
  overflow: hidden;
}

/* Individual slide */
.quiz-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0 4rem;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.42s ease,
              filter   0.42s ease;
}

.quiz-slide--active      { transform: translateX(0)    scale(1);    opacity: 1; filter: blur(0);   }
.quiz-slide--enter-right { transform: translateX(72px) scale(0.97); opacity: 0; filter: blur(3px); }
.quiz-slide--enter-left  { transform: translateX(-72px)scale(0.97); opacity: 0; filter: blur(3px); }
.quiz-slide--exit-left   { transform: translateX(-72px)scale(0.97); opacity: 0; filter: blur(3px); }
.quiz-slide--exit-right  { transform: translateX(72px) scale(0.97); opacity: 0; filter: blur(3px); }

/* Slide text */
.quiz-slide-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.quiz-slide-question {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
}

.quiz-slide-sub {
  font-size: 0.95rem;
  color: rgba(240, 237, 232, 0.52);
  line-height: 1.65;
  margin-bottom: 2.5rem;
  max-width: 520px;
}

/* Choice option grid */
.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  max-width: 660px;
}

.quiz-option-btn {
  background: var(--gray);
  border: 1px solid var(--gray-mid);
  padding: 1.1rem 1.4rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s, transform 0.18s;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Gold top border slides in on hover */
.quiz-option-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}

.quiz-option-btn:hover {
  background: #232323;
  border-color: var(--gold-dim);
  transform: translateY(-2px);
}

.quiz-option-btn:hover::before,
.quiz-option-btn.selected::before {
  transform: scaleX(1);
}

/* Selected state — gold fill */
.quiz-option-btn.selected {
  background: var(--gold);
  border-color: var(--gold);
}

.quiz-option-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--white);
  line-height: 1;
}

.quiz-option-btn.selected .quiz-option-label,
.quiz-option-btn.selected .quiz-option-sub {
  color: var(--black);
}

.quiz-option-sub {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--gray-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Textarea input */
.quiz-textarea {
  width: 100%;
  max-width: 640px;
  background: #1a1a1a;
  border: 1px solid var(--gray-mid);
  color: var(--white);
  padding: 1.1rem 1.2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  outline: none;
  resize: none;
  min-height: 150px;
  transition: border-color 0.2s;
  display: block;
  margin-bottom: 1.25rem;
}

.quiz-textarea:focus { border-color: var(--gold); }
.quiz-textarea::placeholder { color: var(--gray-light); }
.quiz-textarea.invalid { border-color: var(--red); animation: shake 0.35s ease; }

/* Contact fields */
.quiz-contact-fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 500px;
  margin-bottom: 1.5rem;
}

.quiz-input {
  background: #1a1a1a;
  border: 1px solid var(--gray-mid);
  color: var(--white);
  padding: 0.9rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}

.quiz-input:focus { border-color: var(--gold); }
.quiz-input::placeholder { color: var(--gray-light); }
.quiz-input.invalid { border-color: var(--red); animation: shake 0.35s ease; }

/* Continue button (textarea slides) */
.quiz-continue-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--black);
  border: none;
  padding: 0.85rem 2.2rem;
  transition: background 0.2s, transform 0.2s;
  display: inline-block;
}

.quiz-continue-btn:hover {
  background: var(--cream);
  transform: translateY(-2px);
}

/* Final submit button */
.quiz-submit-btn {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  background: var(--gold);
  color: var(--black);
  border: none;
  padding: 1.1rem;
  width: 100%;
  max-width: 500px;
  transition: background 0.2s, transform 0.2s;
}

.quiz-submit-btn:hover:not(:disabled) {
  background: var(--cream);
  transform: translateY(-2px);
}

.quiz-submit-btn:disabled { opacity: 0.6; }

/* Success state */
.quiz-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6rem 2rem;
  gap: 1.5rem;
}

.quiz-success.visible { display: flex; }

.quiz-success-check { width: 80px; height: 80px; }

.quiz-success-heading {
  font-family: var(--font-display);
  font-size: 4.5rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.quiz-success-sub {
  color: rgba(240, 237, 232, 0.6);
  font-size: 1rem;
}

/* Error */
.quiz-error-msg {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  padding: 0 0 1.5rem;
  display: none;
}

.quiz-error-msg.visible { display: block; }

/* Mobile */
@media (max-width: 768px) {
  .quiz-wrap { padding: 0 1.5rem; }

  .quiz-options { grid-template-columns: 1fr; }

  .quiz-stage { min-height: 72vh; }

  .quiz-progress-track { width: 80px; }
}


/* =============================================
   SMALL PHONES ≤ 480px
   ============================================= */
@media (max-width: 480px) {

  .hero-content {
    padding: 1rem 1.2rem 3rem;
  }

  .hero-photo-wrap {
    height: 78vw;
  }

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

  .result-card {
    padding: 1.4rem 1rem 1.8rem;
  }

  .result-number {
    font-size: 2.4rem;
  }

  .clients-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .client-card {
    padding: 1.5rem 1.2rem 1.8rem;
  }

  .video-grid,
  .video-grid--reels {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .video-embed {
    height: 300px;
  }

  .case-row {
    grid-template-columns: 60px 1fr;
    gap: 0.6rem;
  }

  .footer-tagline {
    font-size: 0.9rem;
  }
}

/* =============================================
   COOKIE CONSENT BANNER
   ============================================= */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 2.5rem;
  background: rgba(14, 14, 14, 0.98);
  border-top: 1px solid var(--gray-mid);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(0);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.cookie-banner.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.cookie-banner p {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  color: var(--gray-light);
  letter-spacing: 0.05em;
  line-height: 1.6;
  max-width: 620px;
  margin: 0;
}

.cookie-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border: none;
  cursor: none;
  transition: background 0.2s, color 0.2s;
}

.cookie-accept {
  background: var(--gold);
  color: var(--black);
}

.cookie-accept:hover {
  background: var(--cream);
}

.cookie-decline {
  background: transparent;
  border: 1px solid var(--gray-mid);
  color: var(--gray-light);
}

.cookie-decline:hover {
  border-color: var(--gray-light);
  color: var(--white);
}

@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.5rem 1.5rem;
    gap: 1rem;
  }
}