/* styles.css — Jatin Gangwani Portfolio (PHP port)
   Mirrors the original Tailwind/CSS-variables design.
   Fonts loaded via @import below. ───────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --radius: 0.75rem;

  --background:        oklch(0.14 0.04 255);
  --foreground:        oklch(0.97 0.012 240);
  --ink:               oklch(0.10 0.04 260);
  --card:              oklch(0.19 0.05 258);
  --card-foreground:   oklch(0.97 0.012 240);
  --primary:           oklch(0.72 0.18 250);
  --gold:              oklch(0.72 0.18 250);
  --gold-soft:         oklch(0.62 0.16 245);
  --secondary:         oklch(0.23 0.05 258);
  --muted:             oklch(0.21 0.045 258);
  --muted-foreground:  oklch(0.72 0.04 245);
  --accent:            oklch(0.72 0.18 250);
  --destructive:       oklch(0.62 0.22 25);
  --border:            oklch(0.40 0.08 250 / 35%);
  --input:             oklch(0.40 0.08 250 / 35%);
  --ring:              oklch(0.72 0.18 250);

  --gradient-gold:   linear-gradient(135deg, oklch(0.78 0.18 245), oklch(0.55 0.20 265));
  --shadow-gold:     0 20px 60px -20px oklch(0.55 0.20 260 / 45%);
  --shadow-elegant:  0 30px 80px -30px oklch(0 0 0 / 70%);

  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.40 0.16 258 / 35%), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, oklch(0.30 0.14 250 / 30%), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

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

/* ── Utility classes ───────────────────────────────────────── */
.text-gold    { color: var(--gold); }
.bg-gold      { background: var(--gold); }
.text-muted   { color: var(--muted-foreground); }

.gold-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.italic { font-style: italic; }

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: .5;
}

.glass {
  background: oklch(0.18 0.05 258 / 65%);
  backdrop-filter: blur(14px);
  border: 1px solid oklch(0.72 0.18 250 / 22%);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--gradient-gold);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: .85rem 1.5rem;
  font-size: .875rem;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-gold);
  min-height: 2.75rem;
  text-align: center;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 70px -20px oklch(0.55 0.20 260 / 60%);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid oklch(0.72 0.18 250 / 45%);
  border-radius: 999px;
  padding: .85rem 1.5rem;
  font-size: .875rem;
  transition: all .2s ease;
  min-height: 2.75rem;
  text-align: center;
}
.btn-ghost:hover {
  background: oklch(0.72 0.18 250 / 10%);
  border-color: var(--gold);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: oklch(0.20 0.05 258 / 80%);
  border: 1px solid oklch(0.72 0.18 250 / 30%);
  font-size: .78rem;
  letter-spacing: .02em;
}
.chip-dot {
  width: .375rem; height: .375rem;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s infinite;
}

.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 1.5rem;
  position: relative;
}
.section-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1rem; height: 1px;
  background: var(--gold);
}

/* ── Layout ────────────────────────────────────────────────── */
.container {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section { padding-block: 6rem; }
.section--alt { background: oklch(0.19 0.05 258 / 30%); }
@supports (content-visibility: auto) {
  .section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
  }
}

/* ── Section header ────────────────────────────────────────── */
.section-header { max-width: 48rem; margin-bottom: 3.5rem; }
.section-header h2 {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
}
.section-header p {
  margin-top: 1.25rem;
  color: var(--muted-foreground);
  font-size: 1.125rem;
  line-height: 1.7;
}

/* ── NAV ───────────────────────────────────────────────────── */
#nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: 1.25rem;
  transition: all .3s;
}
#nav.scrolled {
  padding-block: .75rem;
  background: oklch(0.18 0.05 258 / 65%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid oklch(0.72 0.18 250 / 22%);
}
#nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  min-height: 3rem;
}
#nav .logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -.025em;
  color: var(--foreground);
  text-shadow: 0 2px 12px oklch(0 0 0 / 75%);
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.logo-img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
  border-radius:.45rem;
  filter: drop-shadow(0 10px 20px oklch(0 0 0 / 45%));
}
.logo-word {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.logo-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.logo-sub {
  margin-top: .2rem;
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .18em;
  color: oklch(0.86 0.035 245);
  text-transform: uppercase;
}
#nav nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .65rem 1rem;
  border: 1px solid oklch(0.97 0.012 240 / 16%);
  border-radius: 999px;
  background: oklch(0.10 0.04 260 / 50%);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 40px oklch(0 0 0 / 22%);
}
#nav nav a {
  font-size: .875rem;
  color: oklch(0.96 0.02 245);
  font-weight: 600;
  text-shadow: 0 1px 10px oklch(0 0 0 / 70%);
  transition: color .2s;
}
#nav nav a:hover { color: var(--foreground); }

@media (max-width:767px) { #nav nav { display: none; } }

/* ── HERO ──────────────────────────────────────────────────── */
#hero {
  min-height: 100vh;
  padding-top: 8rem;
  padding-bottom: 5rem;
  padding-inline: 1.5rem;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero-bg-blob--left {
  top: 25%; left: -8rem;
  width: 31rem; height: 31rem;
  background: var(--gold);
  opacity: .25;
}
.hero-bg-blob--right {
  bottom: 0; right: 0;
  width: 25rem; height: 25rem;
  background: var(--gold);
  opacity: .15;
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width:1024px) {
  .hero-grid { grid-template-columns: 7fr 5fr; }
}

.hero-rotator {
  height: 1.75rem;
  overflow: hidden;
  position: relative;
}
.hero-rotator span {
  position: absolute;
  inset: 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  transition: opacity .5s, transform .5s;
}
.hero-rotator span.hidden-top    { opacity: 0; transform: translateY(-1.5rem); }
.hero-rotator span.hidden-bottom { opacity: 0; transform: translateY(1.5rem); }
.hero-rotator span.visible       { opacity: 1; transform: translateY(0); }

.hero-title {
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: .95;
  margin-top: .5rem;
}

.hero-inline-portrait {
  margin-top: 2rem;
  max-width: 34rem;
}

.hero-desktop-portrait {
  display: none;
}

@media (max-width:1023px) {
  .hero-grid {
    text-align: center;
  }

  .hero-rotator span {
    justify-content: center;
  }

  .hero-inline-portrait {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-grid .text-muted {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-grid .reveal[style*="display:flex"] {
    justify-content: center;
  }
}

@media (min-width:1024px) {
  .hero-inline-portrait {
    display: none;
  }

  .hero-desktop-portrait {
    display: block;
  }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
@media (min-width:640px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }

.hero-stat-key {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
}
.hero-stat-val {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-top: .25rem;
}

/* Portrait card */
.portrait-card {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
}
.portrait-card img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.portrait-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--background), transparent 60%);
}
.portrait-overlay {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem; right: 1.5rem;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* ── ABOUT ─────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width:1024px) { .about-grid { grid-template-columns: 5fr 7fr; } }

.about-img-card {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
}
.about-img-card img { width:100%; height:100%; object-fit:cover; }
.about-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.14 0.04 255 / 80%), oklch(0.14 0.04 255 / .1) 60%, transparent);
}

.about-text { display:flex; flex-direction:column; gap:1.25rem; font-size:1.125rem; line-height:1.75; color:var(--muted-foreground); }
.about-text .highlight { color:var(--foreground); font-weight:500; }
.about-text .gold      { color:var(--gold); }

.quote-block {
  position:relative;
  padding:1.75rem;
  border-radius:1rem;
  background: oklch(0.18 0.05 258 / 65%);
  backdrop-filter: blur(14px);
  border: 1px solid oklch(0.72 0.18 250 / 22%);
}
.quote-block svg { color:var(--gold); margin-bottom:.75rem; }
.quote-block p { font-family:var(--font-display); font-size:1.25rem; line-height:1.4; color:var(--foreground); }
.tags { display:flex; flex-wrap:wrap; gap:.5rem; }

/* ── WHAT I DO ─────────────────────────────────────────────── */
.cards-2 { display:grid; gap:1.5rem; }
@media (min-width:768px) { .cards-2 { grid-template-columns:1fr 1fr; } }

.work-card {
  position:relative;
  border-radius:1rem;
  border:1px solid var(--border);
  background: oklch(0.14 0.04 255 / .4);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .3s;
}
.work-card:hover { border-color: oklch(0.72 0.18 250 / 40%); }

.work-card-img {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.work-card-img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}
.work-card:hover .work-card-img img { transform:scale(1.05); }
.work-card-img::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, var(--background), oklch(0.14 0.04 255 / .3) 50%, transparent);
}
.work-card-badge {
  position:absolute;
  top:1rem; left:1rem;
  z-index:1;
}

.work-card-body { padding:1.75rem 2.25rem; flex:1; display:flex; flex-direction:column; }
.work-card-icon {
  width:3rem; height:3rem;
  border-radius:.75rem;
  background: oklch(0.14 0.04 255);
  border:1px solid oklch(0.72 0.18 250 / 20%);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  margin-top:-3rem;
  position:relative;
  margin-bottom:1.25rem;
}
.work-card-title { font-family:var(--font-display); font-size:1.75rem; margin-bottom:1rem; }
.work-card-desc  { color:var(--muted-foreground); line-height:1.7; flex:1; margin-bottom:1.5rem; }

/* Gallery */
.gallery-4 { display:grid; gap:.75rem; grid-template-columns:repeat(2, 1fr); }
@media (min-width:1024px) { .gallery-4 { grid-template-columns:repeat(4, 1fr); } }

.gallery-item {
  position:relative;
  aspect-ratio:4/5;
  border-radius:.75rem;
  overflow:hidden;
  border:1px solid var(--border);
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.gallery-item:hover img { transform:scale(1.1); }
.gallery-item::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, var(--background), oklch(0.14 0.04 255 / .2) 50%, transparent);
}
.gallery-tag {
  position:absolute;
  top:.75rem; left:.75rem;
  z-index:1;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
}
.gallery-label {
  position:absolute;
  bottom:.75rem; left:.75rem; right:.75rem;
  z-index:1;
  font-family:var(--font-display);
  font-size:.875rem;
  line-height:1.3;
}

/* ── JOURNEY ───────────────────────────────────────────────── */
.journey-line {
  position:relative;
}
.journey-line::before {
  content:'';
  position:absolute;
  left:15px;
  top:0; bottom:0;
  width:1px;
  background:linear-gradient(to bottom, transparent, oklch(0.72 0.18 250 / 40%), transparent);
}
@media (min-width:768px) {
  .journey-line::before { left:50%; }
}

.journey-steps { display:flex; flex-direction:column; gap:3.5rem; }

.journey-step {
  position:relative;
  display:grid;
  gap:2rem;
  align-items:center;
}
@media (min-width:768px) {
  .journey-step { grid-template-columns:1fr 1fr; }
  .journey-step.even .step-text { order:2; }
}

.step-text { padding-left:3rem; }
@media (min-width:768px) {
  .journey-step:not(.even) .step-text { padding-left:0; padding-right:3rem; text-align:right; }
  .journey-step.even .step-text { padding-left:3rem; text-align:left; }
}

.step-tag  { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; }
.step-h    { font-family:var(--font-display); font-size:1.75rem; margin-bottom:.25rem; }
.step-sub  { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted-foreground); margin-bottom:.75rem; }
.step-desc { color:var(--muted-foreground); line-height:1.7; }

.step-dot {
  position:absolute;
  left:0;
  top:.25rem;
  width:2rem; height:2rem;
  border-radius:50%;
  background:var(--background);
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
@media (min-width:768px) {
  .step-dot { left:50%; transform:translateX(-50%); }
}
.step-dot-inner { width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); }

.step-img { padding-left:3rem; }
@media (min-width:768px) {
  .journey-step:not(.even) .step-img { padding-left:3rem; padding-right:0; }
  .journey-step.even .step-img { padding-right:3rem; padding-left:0; }
}

.step-img-card {
  position:relative;
  aspect-ratio:4/3;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid var(--border);
}
.step-img-card img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.step-img-card:hover img { transform:scale(1.05); }
.step-img-card::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, oklch(0.14 0.04 255 / .7), transparent 60%);
}
.step-img-label {
  position:absolute;
  bottom:.75rem; left:1rem;
  z-index:1;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
}

/* ── SKILLS ────────────────────────────────────────────────── */
.skills-grid { display:grid; gap:2.5rem; }
@media (min-width:1024px) { .skills-grid { grid-template-columns:1fr 1fr; } }

.skill-block-label {
  font-size:.875rem;
  letter-spacing:.25em;
  color:var(--gold);
  margin-bottom:1.5rem;
}
.skill-block-label.mono { font-family:var(--font-mono); }

.skill-items { display:flex; flex-direction:column; gap:.75rem; }

.skill-item {
  display:flex;
  gap:1rem;
  padding:1.25rem;
  border-radius:.75rem;
  border:1px solid var(--border);
  background: oklch(0.14 0.04 255 / .4);
  transition:border-color .3s, background .3s;
}
.skill-item:hover {
  border-color: oklch(0.72 0.18 250 / 40%);
  background: oklch(0.14 0.04 255 / .7);
}
.skill-icon {
  flex-shrink:0;
  width:2.5rem; height:2.5rem;
  border-radius:.625rem;
  background: oklch(0.72 0.18 250 / .1);
  border:1px solid oklch(0.72 0.18 250 / .2);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.skill-title { font-weight:500; margin-bottom:.25rem; }
.skill-desc  { font-size:.875rem; color:var(--muted-foreground); }

/* ── MENTORSHIP ────────────────────────────────────────────── */
.programs-grid { display:grid; gap:1.25rem; }
@media (min-width:768px) { .programs-grid { grid-template-columns:1fr 1fr; } }

.program-card {
  position:relative;
  border-radius:1rem;
  border:1px solid var(--border);
  background: oklch(0.19 0.05 258 / .4);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .3s, transform .3s;
}
.program-card:hover {
  border-color: oklch(0.72 0.18 250 / 40%);
  transform:translateY(-3px);
}

.program-img {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.program-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.program-card:hover .program-img img { transform:scale(1.05); }
.program-img::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, var(--background), oklch(0.19 0.05 258 / .4) 50%, transparent);
}
.program-tag {
  position:absolute;
  top:1rem; right:1rem;
  z-index:1;
  font-family:var(--font-mono);
  font-size:.625rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid oklch(0.72 0.18 250 / 40%);
  border-radius:999px;
  padding:.25rem .75rem;
  background: oklch(0.14 0.04 255 / .6);
  backdrop-filter:blur(8px);
}
.program-icon {
  position:absolute;
  top:1rem; left:1rem;
  z-index:1;
  width:2.75rem; height:2.75rem;
  border-radius:.75rem;
  background: oklch(0.14 0.04 255 / .8);
  backdrop-filter:blur(8px);
  border:1px solid oklch(0.72 0.18 250 / .2);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.program-body { padding:1.75rem 2rem; flex:1; display:flex; flex-direction:column; }
.program-title { font-family:var(--font-display); font-size:1.5rem; margin-bottom:.75rem; }
.program-desc  { color:var(--muted-foreground); line-height:1.7; flex:1; margin-bottom:1.25rem; }
.program-cta   { display:inline-flex; align-items:center; gap:.375rem; font-size:.875rem; color:var(--gold); transition:gap .2s; }
.program-cta:hover { gap:.625rem; }

/* ── TESTIMONY SLIDER ──────────────────────────────────────── */
.slider-wrap  { position:relative; overflow:hidden; }
.slider-inner { overflow:hidden; border-radius:1.5rem; }

.slider-track {
  display:flex;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}

.slide {
  min-width:100%;
  border:1px solid var(--border);
  background: oklch(0.14 0.04 255 / .4);
  border-radius:1.5rem;
  overflow:hidden;
  display:grid;
}
@media (min-width:768px) { .slide { grid-template-columns:2fr 3fr; } }

/* Portrait video side */
.slide-video-col {
  position:relative;
  background:#000;
  aspect-ratio:9/16;
  max-width:360px;
  margin-inline:auto;
  width:100%;
}
@media (min-width:768px) {
  .slide-video-col {
    aspect-ratio:auto;
    min-height:560px;
    max-width:none;
    margin-inline:0;
  }
}

.slide-video-col video {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
}
.video-placeholder {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  color:var(--foreground);
  background:
    linear-gradient(150deg, oklch(0.18 0.05 258), oklch(0.10 0.04 260) 58%, oklch(0.24 0.08 245));
  background-size:cover;
  background-position:center;
  transition:opacity .25s ease;
}
.video-placeholder.thumb-ready {
  justify-content:flex-end;
  align-items:flex-start;
  padding:1.25rem;
}
.video-placeholder.thumb-ready span { display:none; }
.video-placeholder.thumb-ready strong {
  padding:.35rem .75rem;
  border-radius:999px;
  background:oklch(0.08 0.035 260 / .68);
  backdrop-filter:blur(8px);
  border:1px solid oklch(0.72 0.18 250 / .32);
  color:var(--gold);
  font-size:.82rem;
}
.video-placeholder span {
  width:5.5rem;
  height:5.5rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-gold);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:2.75rem;
}
.video-placeholder strong {
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:500;
}
.video-placeholder.hidden {
  opacity:0;
  pointer-events:none;
}
.video-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to top, oklch(0.14 0.04 255 / .8), oklch(0.14 0.04 255 / .1) 50%, oklch(0.14 0.04 255 / .2));
  pointer-events:none;
  transition:opacity .3s;
  z-index:2;
}
.video-overlay.playing { opacity:0; }

.play-btn {
  position:absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:3;
}
.play-circle {
  width:5rem; height:5rem;
  border-radius:50%;
  background: oklch(0.72 0.18 250 / .9);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px oklch(0.55 0.20 260 / .45);
  transition:transform .25s, opacity .25s;
}
.play-circle:hover { transform:scale(1.1); }
.play-circle.hidden { opacity:0; transform:scale(0); pointer-events:none; }

.video-counter {
  position:absolute;
  top:1rem; left:1rem;
  font-family:var(--font-mono);
  font-size:.625rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  z-index:3;
}

/* Quote side */
.slide-quote-col {
  padding:2rem 2.5rem;
  display:flex; flex-direction:column; justify-content:center;
}
.slide-quote-col svg { color:var(--gold); margin-bottom:1rem; flex-shrink:0; }
.slide-quote-col blockquote {
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 2.5vw, 1.75rem);
  line-height:1.35;
  margin-bottom:1.5rem;
}
.slide-meta { padding-top:1.25rem; border-top:1px solid var(--border); }
.slide-name  { font-weight:500; }
.slide-role  { font-size:.75rem; color:var(--muted-foreground); margin-top:.25rem; }

/* Controls */
.slider-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:2rem;
}
.ctrl-btn {
  width:2.75rem; height:2.75rem;
  border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
  flex-shrink:0;
}
.ctrl-btn:hover { background:var(--gold); color:var(--ink); }

.dots { display:flex; align-items:center; justify-content:center; gap:.5rem; flex:1; }
.dot {
  height:.5rem;
  border-radius:999px;
  background:var(--border);
  transition:width .35s cubic-bezier(.22,1,.36,1), background .35s;
  width:1rem;
  cursor:pointer;
  border:none;
}
.dot.active { width:2.5rem; background:var(--gold); }

/* Peek thumbnails */
.peek-prev, .peek-next {
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
}
@media (min-width:1024px) { .peek-prev, .peek-next { display:block; } }
.peek-prev { left:1rem; }
.peek-next { right:1rem; }
.peek-thumb {
  position:relative;
  width:4.25rem; height:4.25rem;
  border-radius:50%;
  border:1px solid oklch(0.72 0.18 250 / .36);
  opacity:.8;
  transform:scale(1);
  transition:opacity .2s, transform .2s, background .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  background:oklch(0.14 0.04 255 / .78);
  backdrop-filter:blur(10px);
  color:var(--gold);
  box-shadow:0 18px 45px oklch(0.05 0.02 260 / .38);
}
.peek-thumb:hover {
  opacity:1;
  transform:scale(1.06);
  background:var(--gold);
  color:var(--ink);
}

/* ── INSTAGRAM ─────────────────────────────────────────────── */
.ig-grid {
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width:768px)  { .ig-grid { grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1024px) { .ig-grid { grid-template-columns:repeat(6, 1fr); } }

.ig-cell {
  position:relative;
  aspect-ratio:1;
  border-radius:.75rem;
  overflow:hidden;
  border:1px solid var(--border);
  background: oklch(0.19 0.05 258);
}
.ig-cell img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.ig-cell:hover img { transform:scale(1.05); }
.ig-cell::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, oklch(0.14 0.04 255 / .8), transparent 50%);
  opacity:0;
  transition:opacity .3s;
}
.ig-cell:hover::after { opacity:1; }
.ig-cell-icon {
  position:absolute;
  top:.5rem; right:.5rem;
  z-index:1;
  width:1.75rem; height:1.75rem;
  border-radius:50%;
  background: oklch(0.14 0.04 255 / .7);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  opacity:0;
  transition:opacity .3s;
}
.ig-cell:hover .ig-cell-icon { opacity:1; }
.ig-play-badge {
  position:absolute;
  bottom:.5rem; left:.5rem;
  z-index:1;
  width:1.75rem; height:1.75rem;
  border-radius:50%;
  background: oklch(0.14 0.04 255 / .7);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.ig-skeleton { animation:skeleton-pulse 1.5s ease-in-out infinite; background:oklch(0.19 0.05 258); }
.ig-fallback-cell {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, oklch(0.19 0.05 258), var(--background));
  color:oklch(0.72 0.18 250 / .4);
  transition:color .3s;
}
.ig-fallback-cell:hover { color:var(--gold); }

/* ── CONNECT ───────────────────────────────────────────────── */
.connect-grid { display:grid; gap:1.5rem; }
@media (min-width:1024px) { .connect-grid { grid-template-columns:5fr 7fr; } }

.contact-card {
  padding:1.75rem;
  border-radius:1rem;
  border:1px solid var(--border);
  background: oklch(0.14 0.04 255 / .4);
  transition:border-color .3s;
  display:block;
}
.contact-card:hover { border-color: oklch(0.72 0.18 250 / 40%); }
.contact-card svg  { color:var(--gold); margin-bottom:1rem; }
.contact-card h3   { font-family:var(--font-display); font-size:1.5rem; margin-bottom:.5rem; }
.contact-card p    { font-size:.875rem; color:var(--muted-foreground); margin-bottom:1rem; }
.contact-card-cta  { display:inline-flex; align-items:center; gap:.375rem; font-size:.875rem; color:var(--gold); transition:gap .2s; }
.contact-card:hover .contact-card-cta { gap:.625rem; }

.contact-form {
  padding:1.75rem 2.5rem;
  border-radius:1rem;
  border:1px solid var(--border);
  background: oklch(0.14 0.04 255 / .6);
  display:flex; flex-direction:column; gap:1.25rem;
}
.form-label {
  display:block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--muted-foreground);
  margin-bottom:.5rem;
}
.form-input, .form-textarea {
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:1.125rem;
  padding:.625rem 0;
  outline:none;
  transition:border-color .2s;
}
.form-input:focus, .form-textarea:focus { border-color:var(--gold); }
.form-textarea { resize:none; }
.form-msg { font-size:.875rem; margin-top:.25rem; display:none; }
.form-msg.success { color:var(--gold); display:block; }
.form-msg.error   { color:oklch(0.62 0.22 25); display:block; }

/* ── FOOTER ────────────────────────────────────────────────── */
footer {
  padding:4rem 1.5rem 2.5rem;
  border-top:1px solid var(--border);
}
.footer-top {
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  padding-bottom:2.5rem;
}
@media (min-width:768px) { .footer-top { flex-direction:row; align-items:center; justify-content:space-between; } }

.footer-logo { font-family:var(--font-display); font-size:1.5rem; letter-spacing:-.025em; }
.footer-tagline { font-size:.875rem; color:var(--muted-foreground); margin-top:.25rem; }
.footer-nav { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; }
.footer-nav a { font-size:.875rem; color:var(--muted-foreground); transition:color .2s; }
.footer-nav a:hover { color:var(--foreground); }

.footer-bottom {
  padding-top:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
@media (min-width:640px) { .footer-bottom { flex-direction:row; align-items:center; justify-content:space-between; } }

.footer-copy { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; color:var(--muted-foreground); }
.footer-links { display:flex; gap:1.25rem; }
.footer-links a { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; color:var(--muted-foreground); transition:color .2s; }
.footer-links a:hover { color:var(--foreground); }
.footer-loc { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; color:var(--muted-foreground); }

/* ── Animations ────────────────────────────────────────────── */
@keyframes pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.4; }
}
@keyframes skeleton-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.4; }
}

/* Scroll-reveal */
.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
}

/* SVG icon helper */
.icon { display:inline-block; vertical-align:middle; flex-shrink:0; }

@media (max-width: 767px) {
  .container {
    padding-inline: 1rem;
  }

  .section {
    padding-block: 4rem;
  }

  #hero {
    min-height: auto;
    padding: 6.5rem 0 4rem;
  }

  .hero-title,
  .section-header h2,
  .page-hero-title {
    letter-spacing: 0;
  }

  .hero-title {
    font-size: clamp(2.6rem, 15vw, 3.7rem);
  }

  .hero-rotator span {
    letter-spacing: .22em;
    font-size: .66rem;
  }

  .portrait-overlay {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    align-items: flex-start;
    flex-direction: column;
    gap: .75rem;
  }

  .work-card-body,
  .program-body,
  .contact-form,
  .content-card,
  .cta-banner,
  .slide-quote-col {
    padding: 1.35rem;
  }

  .gallery-4 {
    grid-template-columns: 1fr;
  }

  .slide {
    border-radius: 1rem;
  }

  .slider-inner {
    border-radius: 1rem;
  }

  .slide-video-col {
    max-width: min(100%, 320px);
  }

  .video-counter {
    letter-spacing: .16em;
    right: .75rem;
    line-height: 1.4;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: .75rem 1rem;
  }

  .footer-copy,
  .footer-links a,
  .footer-loc {
    letter-spacing: .06em;
  }
}