/* ============================================
   WALKMAN STUDIOS — Who We Are Page Styles
   ============================================ */

.page-hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.45) saturate(0.6);
}
.page-hero .hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(175deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.85) 100%);
}
.page-hero-lights {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(200px, 35vh, 320px);
  z-index: 2; pointer-events: none; overflow: visible;
}
.page-hero-lights svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sl-tw-a { animation: sl-flicker 4.2s ease-in-out infinite 0.00s; }
.sl-tw-b { animation: sl-flicker 3.1s ease-in-out infinite 0.85s; }
.sl-tw-c { animation: sl-flicker 5.5s ease-in-out infinite 1.65s; }
.sl-tw-d { animation: sl-flicker 2.8s ease-in-out infinite 0.40s; }
.sl-tw-e { animation: sl-flicker 4.7s ease-in-out infinite 2.15s; }
.sl-tw-f { animation: sl-flicker 3.6s ease-in-out infinite 1.25s; }
@keyframes sl-flicker {
  0%,18%,28%,100% { opacity:1.0; }
  22% { opacity:0.55; } 25% { opacity:0.88; }
  62% { opacity:0.68; } 66% { opacity:0.92; }
  80% { opacity:0.75; }
}
.page-hero .hero-content { position: relative; z-index: 5; padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-hero h1 {
  font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: var(--fw-bold);
  color: var(--color-text); letter-spacing: var(--ls-tight); margin: var(--space-sm) 0 0;
}
.page-hero .divider {
  border: none; height: 1px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  width: 80px; margin: var(--space-md) 0 0;
}

/* ORIGIN STORY */
.origin-story { background: var(--color-bg); padding: var(--section-padding) 0; }
.origin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4xl); align-items: start; }
.origin-text .label { display: block; margin-bottom: var(--space-md); }
.origin-text h2 {
  font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-bold);
  color: var(--color-text); letter-spacing: var(--ls-tight); line-height: var(--lh-heading); margin: 0 0 var(--space-md);
}
.origin-text .divider {
  border: none; height: 1px; width: 60px;
  background: linear-gradient(90deg, var(--color-accent), transparent); margin: 0 0 var(--space-xl);
}
.origin-text p { font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text-secondary); line-height: var(--lh-body); margin-bottom: var(--space-lg); }
.pull-quote {
  border-left: 2px solid var(--color-accent);
  padding: var(--space-md) var(--space-xl); margin: var(--space-xl) 0;
  background: rgba(201,168,76,0.04);
}
.pull-quote p { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-h4); color: var(--color-text); margin: 0; line-height: 1.5; }
.origin-image { position: sticky; top: 120px; }
.origin-image .img-hover-zoom { overflow: hidden; border-top: 1px solid rgba(201,168,76,0.2); }
.origin-image img {
  width: 100%; height: auto; display: block; object-fit: cover;
  filter: brightness(0.75) saturate(0.5);
  transition: filter var(--duration-slow) var(--ease-out), transform var(--duration-slower) var(--ease-out);
}
.origin-image .img-hover-zoom:hover img { filter: brightness(0.9) saturate(0.75); transform: scale(1.04); }

/* VALUES */
.values-section { background: var(--color-surface); padding: var(--section-padding) 0; }
.values-section .section-header { margin-bottom: var(--space-3xl); }
.values-section h2 { font-family: var(--font-heading); font-size: var(--fs-h2); color: var(--color-text); letter-spacing: var(--ls-tight); }
.values-section .divider--center { border:none; height:1px; width:80px; background:linear-gradient(90deg,transparent,var(--color-accent),transparent); margin:var(--space-md) auto 0; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--color-border); }
.value-card { background: var(--color-bg); padding: var(--space-2xl) var(--space-xl); position: relative; transition: background var(--duration-normal) var(--ease-out); }
.value-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--color-accent); opacity:0; transition:opacity var(--duration-normal) var(--ease-out); }
.value-card:hover { background: rgba(201,168,76,0.03); }
.value-card:hover::before { opacity: 1; }
.value-icon { display:block; font-size:1.2rem; color:var(--color-accent); margin-bottom:var(--space-lg); }
.value-card h3 { font-family:var(--font-heading); font-size:var(--fs-h4); color:var(--color-text); letter-spacing:var(--ls-tight); margin:0 0 var(--space-md); }
.value-card p { font-family:var(--font-body); font-size:var(--fs-small); color:var(--color-text-muted); line-height:var(--lh-body); margin:0; }

/* TEAM */
.team-section { background: var(--color-bg); padding: var(--section-padding) 0; }
.team-section .section-header { margin-bottom: var(--space-3xl); }
.team-section h2 { font-family:var(--font-heading); font-size:var(--fs-h2); color:var(--color-text); letter-spacing:var(--ls-tight); }
.team-section .divider--center { border:none; height:1px; width:80px; background:linear-gradient(90deg,transparent,var(--color-accent),transparent); margin:var(--space-md) auto 0; }
.team-founders { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--color-border); margin-bottom:1px; }
.team-engineers { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--color-border); }
.team-row-label {
  padding: var(--space-md) 0 var(--space-sm);
  font-family:var(--font-body); font-size:var(--fs-caption); text-transform:uppercase;
  letter-spacing:var(--ls-widest); color:var(--color-text-muted);
  display:flex; align-items:center; gap:var(--space-md);
}
.team-row-label::after { content:''; flex:1; height:1px; background:var(--color-border); }
.team-card { background:var(--color-bg); position:relative; overflow:hidden; cursor:default; }
.team-card__image { position:relative; overflow:hidden; aspect-ratio:4/5; }
.team-card--founder .team-card__image { aspect-ratio:3/4; }
.team-card__image img {
  width:100%; height:100%; object-fit:cover; object-position:top;
  filter:grayscale(0.8) brightness(0.65); display:block;
  transition: filter var(--duration-slow) var(--ease-out), transform var(--duration-slower) var(--ease-out);
}
.team-card:hover .team-card__image img { filter:grayscale(0.3) brightness(0.85); transform:scale(1.04); }
.team-card__image::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(201,168,76,0.18) 0%, transparent 60%);
  opacity:0; transition:opacity var(--duration-normal) var(--ease-out);
}
.team-card:hover .team-card__image::after { opacity:1; }
.team-card__info {
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--color-border);
  display:flex; flex-direction:column; gap:var(--space-2xs);
  transition:border-color var(--duration-normal) var(--ease-out);
}
.team-card:hover .team-card__info { border-top-color: rgba(201,168,76,0.3); }
.team-card__info h4 { font-family:var(--font-heading); font-size:var(--fs-h4); color:var(--color-text); letter-spacing:var(--ls-tight); margin:0; }
.team-card__role { font-family:var(--font-body); font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--ls-wider); color:var(--color-accent); }
.team-card--founder .team-card__info::before { content:'CO-FOUNDER'; font-family:var(--font-body); font-size:0.65rem; letter-spacing:0.25em; color:var(--color-accent); opacity:0.7; margin-bottom:var(--space-2xs); }

/* CLIENTS */
.clients-section { background:var(--color-surface); padding:var(--section-padding) 0; overflow:hidden; }
.clients-section h2 { font-family:var(--font-heading); font-size:var(--fs-h2); color:var(--color-text); letter-spacing:var(--ls-tight); }
.clients-section .divider--center { border:none; height:1px; width:80px; background:linear-gradient(90deg,transparent,var(--color-accent),transparent); margin:var(--space-md) auto var(--space-3xl); }
.clients-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--color-border); }
.client-name {
  background:var(--color-bg);
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-2xl) var(--space-xl);
  font-family:var(--font-heading); font-size:var(--fs-h4); font-style:italic;
  color:var(--color-text-muted); text-align:center;
  transition:color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
}
.client-name:hover { color:var(--color-accent-light); background:rgba(201,168,76,0.03); }

/* CTA */
.cta-section { background:var(--color-bg); padding:var(--section-padding) 0; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 50% 50%, rgba(201,168,76,0.06), transparent); pointer-events:none; }
.cta-section h2 { font-family:var(--font-heading); font-size:var(--fs-h1); color:var(--color-text); letter-spacing:var(--ls-tight); margin-bottom:var(--space-lg); }
.cta-subtitle { font-family:var(--font-body); font-size:var(--fs-body-lg); color:var(--color-text-muted); margin-bottom:var(--space-2xl); }
.cta-buttons { display:flex; gap:var(--space-lg); justify-content:center; flex-wrap:wrap; }

/* RESPONSIVE */
@media (max-width:1024px) {
  .origin-image { position:static; }
  .origin-grid { grid-template-columns:1fr; gap:var(--space-2xl); }
  .clients-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .values-grid, .team-engineers, .clients-grid { grid-template-columns:1fr; }
  .team-founders { grid-template-columns:1fr; }
  .cta-buttons { flex-direction:column; align-items:center; }
}