:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #161616;
  --bg-card-hover: #1c1c1c;
  --border: #222222;
  --border-hover: #333333;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --accent-gold: #d4a843;
  --accent-red: #c0392b;
  --accent-dark-red: #8b1a1a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.03;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

::selection {
  background: linear-gradient(135deg, #f5f5f5, #d4a843, #c0392b);
  color: #0a0a0a;
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, #f5f5f5, #d4a843, #c0392b);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

/* ============================================
   DYNAMIC SCROLL EFFECTS
   ============================================ */
.flip-3d {
  opacity: 0;
  transform: perspective(1000px) rotateY(90deg);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
.flip-3d.visible {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg);
}
.flip-3d-left {
  opacity: 0;
  transform: perspective(1000px) rotateY(-90deg);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
.flip-3d-left.visible {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg);
}

.fold-reveal {
  opacity: 0;
  transform-origin: top center;
  transform: perspective(1000px) rotateX(-90deg) translateY(50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.fold-reveal.visible {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) translateY(0);
}

.cascade-3d {
  opacity: 0;
  transform: perspective(1000px) translateZ(-200px) rotateX(20deg);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cascade-3d.visible {
  opacity: 1;
  transform: perspective(1000px) translateZ(0) rotateX(0deg);
}

.parallax-slow, .parallax-medium, .parallax-fast { will-change: transform; }

.scramble-text { display: inline-block; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float { animation: float 4s ease-in-out infinite; }

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(212, 168, 67, 0.1); }
  50% { box-shadow: 0 0 40px rgba(212, 168, 67, 0.3); }
}
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes slideUp {
  to { transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kenburns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1%, -1%); }
}

/* ---------- Shared hero atoms ---------- */
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 32px;
  animation: fadeInUp 0.8s ease forwards;
  opacity: 0;
  position: relative;
  z-index: 2;
}
.hero-label .dot {
  width: 6px; height: 6px;
  background: #22c55e; border-radius: 50%;
  animation: pulse 2s ease infinite;
}
.hero-label .dot.gold { background: var(--accent-gold); }

.hero-cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease 0.8s forwards;
  opacity: 0;
  position: relative;
  z-index: 2;
}
.hero-cta-primary {
  padding: 14px 36px;
  background: linear-gradient(135deg, #8b1a1a, #5c1212);
  color: #f5f5f5;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(139,26,26,0.3);
}
.hero-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(139,26,26,0.3);
}
.hero-cta-secondary {
  padding: 14px 36px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-cta-secondary:hover {
  border-color: var(--text-primary);
  background: rgba(255,255,255,0.05);
  transform: translateY(-3px);
}

/* ---------- Section atoms ---------- */
.section {
  padding: 100px 40px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.section-desc {
  color: var(--text-secondary);
  max-width: 600px;
  margin-top: 16px;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Marquee */
.marquee-container {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  overflow: hidden;
  background: var(--bg-secondary);
  position: relative;
  z-index: 2;
}
.marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.marquee-item {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 60px;
}
.marquee-item::after {
  content: '\25CF';
  font-size: 0.5rem;
  color: var(--border-hover);
}

/* ---------- CTA section ---------- */
.cta-section {
  padding: 120px 40px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.03) 0%, transparent 70%);
}
.cta-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.cta-section .section-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}
.cta-section .section-title {
  font-size: clamp(2.5rem, 5vw, 5rem);
  margin-bottom: 24px;
}
.cta-section .section-desc {
  margin: 0 auto 40px;
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 640px;
}
.cta-spots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.cta-spots .dot {
  width: 6px; height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* ---------- Portfolio Hero (aligned to site family spec) ---------- */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 150px 40px 70px;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(192,57,43,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 110%, rgba(212,168,67,0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.8rem, 6.5vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  position: relative; z-index: 2;
  max-width: 900px;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span {
  display: block;
  transform: translateY(100%);
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-title .line:nth-child(1) > span { animation-delay: 0.2s; }
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 620px;
  margin-bottom: 0;
  line-height: 1.7;
  animation: fadeInUp 0.8s ease 0.5s forwards;
  opacity: 0;
  position: relative; z-index: 2;
}
.hero-subtitle strong { color: var(--text-primary); font-weight: 600; }

/* ---------- Showreel marquee ---------- */
.pf-marquee {
  position: relative;
  padding: 34px 0 66px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.pf-mq-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: pfMq 46s linear infinite;
  will-change: transform;
}
.pf-marquee:hover .pf-mq-track { animation-play-state: paused; }
@keyframes pfMq { to { transform: translateX(-50%); } }
.pf-mq-tile {
  position: relative;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  /* Placeholder fill shown until the clip's poster / first frame paints —
     keeps tiles from flashing pure black while video bytes stream in. */
  background: linear-gradient(135deg, #161616 0%, #0d0d0d 55%, #171717 100%);
  cursor: pointer;
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.pf-mq-tile.v { width: 218px; height: 388px; }
.pf-mq-tile.h { width: 380px; height: 236px; }
.pf-mq-tile:hover {
  border-color: rgba(212,168,67,0.5);
  transform: translateY(-5px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.55), 0 0 40px rgba(212,168,67,0.12);
}
.pf-mq-tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.pf-mq-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.55) 0%, transparent 38%);
  pointer-events: none;
}
.pf-mq-badge {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 13px;
  border-radius: 100px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212,168,67,0.5);
  color: var(--accent-gold);
  z-index: 2;
}
.pf-mq-stats {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}
.pf-mq-stats span {
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(20,20,20,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text-primary);
}
.pf-mq-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.8);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212,168,67,0.55);
  color: var(--accent-gold);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  z-index: 3;
}
.pf-mq-tile:hover .pf-mq-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.pf-mq-play svg { width: 22px; height: 22px; }

/* ---------- Trusted By strip ---------- */
.pf-clients { padding: 6px 0 30px; text-align: center; }
.pf-clients-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 26px;
}
.pf-clients-label::before,
.pf-clients-label::after {
  content: '';
  width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.5));
}
.pf-clients-label::after {
  background: linear-gradient(90deg, rgba(212,168,67,0.5), transparent);
}
.pf-clients-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  padding: 4px 0;
}
.pf-clients-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: pfClients 30s linear infinite;
  will-change: transform;
}
.pf-clients-viewport:hover .pf-clients-track { animation-play-state: paused; }
@keyframes pfClients { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.pf-client {
  color: rgba(245,245,245,0.78);
  flex-shrink: 0;
  padding: 14px 26px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  transition: color 0.35s, border-color 0.35s, transform 0.35s, box-shadow 0.35s;
}
.pf-client:hover {
  border-color: rgba(212,168,67,0.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.pf-client:hover img {
  filter: drop-shadow(0 0 7px rgba(212,168,67,0.55)) brightness(1.1);
}
.pf-client img { transition: filter 0.35s; }
.pf-client img { height: 26px; width: auto; display: block; }

/* ---------- Tabs ---------- */
.pf-tabs {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 34px 0 0;
}
.pf-tab {
  padding: 13px 30px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  width: 200px;
}
.pf-tab:hover {
  border-color: rgba(212, 168, 67, 0.5);
  color: var(--text-primary);
  transform: translateY(-2px);
}
.pf-tab.active {
  background: linear-gradient(135deg, #8b1a1a, #5c1212);
  border-color: rgba(139, 26, 26, 0.5);
  color: #f5f5f5;
  box-shadow: 0 10px 30px rgba(139, 26, 26, 0.3);
}

/* ---------- Load More ---------- */
.pf-load-more-wrap { display: flex; justify-content: center; margin: 44px 0 8px; }
.pf-load-more {
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.pf-load-more .pf-load-more-count {
  font-weight: 500;
  opacity: 0.7;
  font-size: 0.82rem;
  padding-left: 2px;
}

/* ---------- Panel ---------- */
.pf-panel-head { text-align: center; margin: 60px 0 40px; }
.pf-panel-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.pf-panel-sub { color: var(--text-secondary); font-size: 1rem; max-width: 520px; margin: 0 auto; }

/* ---------- Category chips (single-select) ---------- */
.pf-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 36px 0 52px;
}
.pf-chip {
  padding: 9px 20px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-chip:hover {
  border-color: rgba(212, 168, 67, 0.5);
  color: var(--text-primary);
  transform: translateY(-2px);
}
.pf-chip.active {
  background: linear-gradient(135deg, #f5f5f5, #d4a843, #c0392b);
  border-color: transparent;
  color: #0a0a0a;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(212, 168, 67, 0.25);
}

/* ---------- Count ---------- */
.pf-count {
  display: block;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 28px;
}

/* ---------- Work wall ---------- */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pf-grid.pf-grid-shorts { grid-template-columns: repeat(4, 1fr); }
.pf-grid.pf-grid-docs { grid-template-columns: repeat(4, 1fr); }
.pf-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  animation: cardEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cardEnter { to { opacity: 1; transform: translateY(0); } }
.pf-item:hover {
  border-color: rgba(212, 168, 67, 0.45);
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.pf-item-media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.pf-item.is-short .pf-item-media { aspect-ratio: 9/16; }
.pf-item.is-doc .pf-item-media { aspect-ratio: 3/4; }
.pf-item-doc-btn { border-radius: 16px; }
.pf-item-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}
.pf-item:hover .pf-item-media img { transform: scale(1.07); }
.pf-item-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.45) 0%, transparent 50%);
  transition: background 0.4s;
}
.pf-item-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5f5f5, #d4a843, #c0392b);
  color: #0a0a0a;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 16px 44px rgba(0,0,0,0.55);
  z-index: 2;
}
.pf-item-play svg { width: 34px; height: 34px; }
.pf-item:hover .pf-item-play {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 44px rgba(212,168,67,0.4);
}
.pf-item-dur {
  position: absolute;
  bottom: 14px; right: 14px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}
.pf-item-ctr {
  position: absolute;
  top: 14px; right: 14px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(212, 168, 67, 0.16);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 168, 67, 0.45);
  color: var(--accent-gold);
  z-index: 2;
}
.pf-item-variants {
  position: absolute;
  top: 14px; left: 14px;
  padding: 7px 13px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.pf-item-eye {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(10,10,10,0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 168, 67, 0.5);
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}
.pf-item:hover .pf-item-eye { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pf-item-info { padding: 18px 20px 20px; 
display: flex;
flex-direction: column;
}
.pf-item-row {
  display: flex;
  margin-bottom: 8px;
  flex-direction: column;
}
.pf-item-niche {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-gold);
}
.pf-item-views { font-size: 0.75rem; color: var(--text-muted); }
.pf-item-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pf-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  border: 1px dashed var(--border);
  border-radius: 20px;
}

/* ---------- Results band ---------- */
.pf-results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.pf-result {
  padding: 40px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-result:hover {
  border-color: rgba(212, 168, 67, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.pf-result .num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}
.pf-result .lbl {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- Testimonials carousel ---------- */
.pf-testi-viewport {
  overflow: hidden;
  margin-top: 56px;
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.pf-testi-track {
  display: flex;
  gap: 26px;
  width: max-content;
  animation: pfTesti 52s linear infinite;
  will-change: transform;
}
.pf-testi-viewport:hover .pf-testi-track { animation-play-state: paused; }
@keyframes pfTesti { to { transform: translateX(-50%); } }
.pf-testi-card {
  width: 400px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.4s, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s;
}
.pf-testi-card:hover {
  border-color: rgba(212,168,67,0.45);
  transform: translateY(-5px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.5);
}
.pf-testi-shot { display: block; width: 100%; height: auto; }
.pf-testi-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 16px;
}
.pf-testi-stars { color: var(--accent-gold); font-size: 0.85rem; letter-spacing: 2px; }
.pf-testi-who {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-testi-who strong { color: var(--text-primary); font-weight: 600; }

/* ---------- Modal ---------- */
.pf-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5,5,5,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-modal.open { opacity: 1; visibility: visible; }
.pf-modal-box {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 50px 140px rgba(0,0,0,0.7);
  transform: translateY(30px) scale(0.96);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100%;
}
.pf-modal.open .pf-modal-box { transform: translateY(0) scale(1); }
.pf-modal-box.is-wide { width: min(1100px, 94vw); }
.pf-modal-box.is-vertical { width: min(420px, 92vw); }
.pf-modal-box.is-image { width: min(1000px, 94vw); }
.pf-modal-box.is-doc { width: min(1000px, 96vw); }
.pf-modal-frame { position: relative; width: 100%; background: #000; }
.is-wide .pf-modal-frame { aspect-ratio: 16/9; }
.is-vertical .pf-modal-frame { aspect-ratio: 9/16; max-height: 72vh; }
/* The script viewer wants height, not a fixed ratio — a long script should
   fill the window so it reads top-to-bottom instead of through a keyhole. */
.is-doc .pf-modal-frame { height: min(86vh, 1400px); background: #fff; }
.is-doc .pf-modal-frame iframe { background: #fff; }
.pf-doc-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  background: #fff;
  color: #555;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
}
.pf-doc-spinner {
  width: 34px; height: 34px;
  border: 3px solid rgba(0,0,0,0.14);
  border-top-color: var(--accent-gold, #d4a843);
  border-radius: 50%;
  animation: pfDocSpin 0.8s linear infinite;
}
@keyframes pfDocSpin { to { transform: rotate(360deg); } }
.pf-modal-frame iframe,
.pf-modal-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.pf-modal-img-wrap { position: relative; background: #000; }
.pf-modal-img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: #000;
  display: block;
}
/* ---------- Image carousel — no arrows, no dots. Swipe (touch),
   click-drag (mouse) or the arrow keys. Neighbouring images are decoded
   up front so a move is an instant GPU crossfade with no blank flash,
   including inside the browser's native fullscreen. ---------- */
.pf-modal-img-wrap.pf-cx {
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
.pf-modal-img-wrap.pf-cx:active { cursor: grabbing; }
.pf-cx-base {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-user-drag: none;
  user-drag: none;
}
.pf-cx-over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.pf-cx-over.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pf-cx-base { transition: none; }
  .pf-cx-over { transition: opacity 0.01s linear; }
}
/* ---------- Full-viewport view of the modal media ----------
   A plain fixed overlay, NOT the Fullscreen API: that one rejects silently
   inside a transformed modal on several desktop browsers and does nothing
   on iOS Safari for a non-video element. This always works, on every
   browser, and swipe / arrow keys keep running because the same nodes stay
   in the DOM. Used by the image carousel and the script viewer.

   Two things fight it and BOTH need !important:
   1. .pf-modal-box has its own `transform` (open/close animation) plus
      `overflow: hidden`. A transform on an ancestor makes IT the containing
      block for any `position: fixed` descendant instead of the viewport —
      so the "fullscreen" layer was rendering pinned to, and clipped by, the
      small modal box, i.e. visibly doing nothing. Neutralise both while
      .pf-fs is active.
   2. A later stylesheet rule (`.pf-modal-box.is-doc .pf-modal-frame`, same
      3-class specificity) sets its own width/height/background and — being
      later in the file — normally wins over this block for the script
      viewer, silently reverting it to its normal small size. !important
      makes source order irrelevant here. */
.pf-modal-box.pf-fs {
  transform: none !important;
  overflow: visible !important;
}
/* The outer overlay's `backdrop-filter` is a THIRD thing that hijacks the
   fixed-position containing block in Chromium browsers (same mechanism as
   `transform`) and its `padding: 24px` would otherwise leave a visible gap
   around the "fullscreen" layer. Neutralise both while a descendant is
   fullscreen so the containing block resolves to the true viewport. */
.pf-modal:has(.pf-modal-box.pf-fs),
.pf-modal.pf-fs-active {
  padding: 0 !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.pf-modal-box.pf-fs .pf-modal-caption { display: none !important; }
.pf-modal-box.pf-fs .pf-modal-img-wrap,
.pf-modal-box.pf-fs .pf-modal-frame {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pf-modal-box.pf-fs .pf-modal-img,
.pf-modal-box.pf-fs .pf-cx-base {
  width: auto !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  height: auto !important;
  object-fit: contain !important;
}
.pf-modal-box.pf-fs .pf-cx-over {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}
.pf-modal-box.pf-fs .pf-modal-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.pf-modal-box.pf-fs .pf-modal-bare-toggle {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 100001 !important;
  width: 40px !important;
  height: 40px !important;
}
.pf-modal-box.pf-fs .pf-var-count {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 100001 !important;
}

/* "Swipe to see more slides" nudge — shown for 6s when a multi-slide work
   item is opened, or until the first swipe/drag. */
.pf-swipe-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 8px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 100px;
  background: rgba(10, 10, 10, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 7;
}
.pf-swipe-hint.show { opacity: 1; transform: translate(-50%, 0); }
.pf-swipe-hint svg { width: 20px; height: 20px; animation: pfSwipeNudge 1.1s ease-in-out infinite; }
@keyframes pfSwipeNudge { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .pf-swipe-hint svg { animation: none; } }
.pf-modal-box.pf-fs .pf-swipe-hint { position: fixed; z-index: 100001; }

.pf-var-count {
  position: absolute;
  top: 14px; right: 14px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-primary);
  z-index: 5;
}
.pf-modal-caption {
  padding: 20px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-modal-caption h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}
.pf-modal-caption p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.pf-modal-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pf-modal-stats span {
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(212,168,67,0.1);
  border: 1px solid rgba(212,168,67,0.35);
  color: var(--accent-gold);
}
.pf-modal-ctr {
  width: fit-content;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(212, 168, 67, 0.12);
  border: 1px solid rgba(212, 168, 67, 0.4);
  color: var(--accent-gold);
}
.pf-watch-yt {
  color: var(--accent-gold);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.3s;
}
.pf-watch-yt:hover { opacity: 0.75; }
.pf-modal-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(10,10,10,0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, color 0.3s, transform 0.3s;
  z-index: 2100;
}
.pf-modal-close:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  transform: rotate(90deg);
}

/* ---------- Responsive ---------- */

@media (max-width: 1215px){
  .pf-grid.pf-grid-shorts { grid-template-columns: repeat(3, 1fr); }
  .pf-grid.pf-grid-docs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1215px){
  .pf-grid.pf-grid-shorts { grid-template-columns: repeat(3, 1fr); }
  .pf-grid.pf-grid-docs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px)
 {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-results { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 938px){
  .pf-grid.pf-grid-shorts { grid-template-columns: repeat(2, 1fr); }
  .pf-grid.pf-grid-docs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero { padding: 120px 20px 56px; }
  .pf-marquee { padding: 22px 0 48px; }
  .pf-mq-tile.v { width: 158px; height: 280px; border-radius: 14px; }
  .pf-mq-tile.h { width: 270px; height: 168px; border-radius: 14px; }
  .pf-mq-stats span { font-size: 0.62rem; padding: 4px 9px; }
  .pf-clients-track { gap: 22px; }
  .pf-client { padding: 11px 20px; }
  .pf-client img { height: 22px; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-results { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pf-tabs { margin-top: 26px; }
  .pf-testi-card { width: 300px; }
  .pf-item-info{
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 560px){
  .pf-grid.pf-grid-shorts { grid-template-columns: repeat(1, 1fr); }
  .pf-grid.pf-grid-docs { grid-template-columns: repeat(1, 1fr); }
}

/* ============================================================
   MODAL PLAYER
   The WIDTH of every category (long-form / short-form / image /
   doc) is left exactly as it was. Only two things are added:
   1. the overlay can scroll, so a box taller than the window is
      reachable instead of clipped;
   2. on genuinely short windows the media frame is capped so the
      caption + native video controls stay on screen.
   ============================================================ */
.pf-modal{
  align-items: flex-start;   /* + margin:auto below = still centred when it fits, scrollable when it doesn't */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pf-modal-box{ margin: auto; }
.pf-modal-frame video,
.pf-modal-frame iframe{ object-fit: contain; }

/* Short windows only (short laptop windows, tablets, landscape phones) —
   above 860px tall NOTHING here applies, the default look is untouched.
   These cap height only; width is never changed. */
@media (max-height: 860px){
  .is-wide .pf-modal-frame{ max-height: calc(100dvh - 190px); }
  .is-vertical .pf-modal-frame{ max-height: calc(100dvh - 150px); }
  .is-doc .pf-modal-frame{ max-height: calc(100dvh - 130px); }
  .pf-modal-img{ max-height: calc(100dvh - 170px); }
}
@media (max-height: 620px){
  .is-wide .pf-modal-frame,
  .is-vertical .pf-modal-frame,
  .is-doc .pf-modal-frame,
  .pf-modal-img{ max-height: 66dvh; }
}
@media (max-width: 680px){
  .pf-modal{ padding: 0; }
  .pf-modal-box.is-image,
  .pf-modal-box.is-doc{ width: 100%; max-width: 100%; border-radius: 0; }
  .pf-modal-caption{ padding: 16px 18px 22px; }
  .pf-modal-close{ top: 10px; right: 10px; width: 40px; height: 40px; }
}

/* "View media only" — hide the caption text so it's just the video /
   image. Used on every category modal via the corner button. */
.pf-modal-bare-toggle{
  position: absolute; top: 14px; left: 14px; z-index: 8;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,10,10,0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, color 0.3s;
}
.pf-modal-bare-toggle svg{ width: 16px; height: 16px; }
.pf-modal-bare-toggle:hover{ border-color: var(--accent-gold); color: var(--accent-gold); }
.pf-modal-box.bare .pf-modal-caption{ display: none; }
.pf-modal-box.bare .pf-modal-img,
.pf-modal-box.bare .pf-cx-over{ max-height: 92vh; max-height: 92dvh; }
.pf-modal-box.bare .pf-modal-img-wrap{ background: #000; }
.pf-modal-box.bare.is-wide .pf-modal-frame,
.pf-modal-box.bare.is-vertical .pf-modal-frame{ max-height: 90vh; max-height: 90dvh; }

/* ============================================================
   CUSTOM FILE-VIDEO PLAYER  (portfolio modal — long-form,
   short-form, showreel). Iframe videos (YouTube/Drive preview)
   keep the provider player. Control bar is fully responsive
   down to small phones.
   ============================================================ */
.pf-player{ position:absolute; inset:0; background:#000; overflow:hidden; }
.pf-player-video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; cursor:pointer; }
.pf-player-spinner{
  position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px;
  border:3px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.pf-player.is-buffering .pf-player-spinner{ opacity:1; animation:pfPlayerSpin .8s linear infinite; }
@keyframes pfPlayerSpin{ to{ transform:rotate(360deg); } }
.pf-player-bigplay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.94); color:#0a0a0a;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
}
.pf-player-bigplay svg{ width:30px; height:30px; margin-left:3px; }
.pf-player[data-state="playing"] .pf-player-bigplay{ opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.75); }

.pf-player-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:26px 14px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.55) 40%, rgba(0,0,0,.82));
  display:flex; flex-direction:column; gap:9px;
}
.pf-player-seek{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:4px;
  background:rgba(255,255,255,.28); cursor:pointer;
}
.pf-player-seek::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.pf-player-seek::-moz-range-thumb{ width:14px; height:14px; border:none; border-radius:50%; background:#fff; }
.pf-player-ctrls{ display:flex; align-items:center; gap:6px; color:#fff; }
.pf-player-ctrls button{
  background:none; border:none; color:#fff; cursor:pointer; padding:8px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0;
  transition:background .2s;
}
.pf-player-ctrls button:hover{ background:rgba(255,255,255,.16); }
.pf-player-ctrls button svg{ width:20px; height:20px; }
.pf-player-play{ background:#fff !important; color:#0a0a0a !important; border-radius:100px !important; padding:9px 22px !important; }
.pf-player-play svg{ width:16px; height:16px; }
.pf-player-time{ font-size:.82rem; font-variant-numeric:tabular-nums; white-space:nowrap; opacity:.95; }
.pf-player-spacer{ flex:1 1 auto; }
.pf-player-vol{
  -webkit-appearance:none; appearance:none; width:80px; height:4px; border-radius:4px;
  background:rgba(255,255,255,.3); cursor:pointer; flex-shrink:0;
}
.pf-player-vol::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; }
.pf-player-vol::-moz-range-thumb{ width:12px; height:12px; border:none; border-radius:50%; background:#fff; }
.pf-player-rate{ font-size:.8rem; font-weight:700; min-width:38px; }
.pf-player-menu{
  position:absolute; right:14px; bottom:66px; z-index:6;
  background:rgba(16,16,16,.98); border:1px solid rgba(255,255,255,.13); border-radius:12px;
  padding:6px; display:none; flex-direction:column; min-width:132px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.pf-player-menu.open{ display:flex; }
.pf-player-menu button{
  background:none; border:none; color:#fff; cursor:pointer; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.82rem; padding:9px 12px; border-radius:8px;
}
.pf-player-menu button:hover{ background:rgba(255,255,255,.1); }
.pf-player-menu button.on{ color:var(--accent-gold); }

/* Tablet & mobile — keep every control, just make it fit + touch-sized */
@media (max-width: 820px), (max-height: 620px){
  .pf-player-bar{ padding:22px 8px 9px; gap:7px; }
  .pf-player-ctrls{ gap:2px; }
  .pf-player-ctrls button{ padding:9px; }
  .pf-player-ctrls button svg{ width:22px; height:22px; }
  .pf-player-play{ padding:9px 16px !important; }
  .pf-player-vol{ display:none; }              /* mute button stays */
  .pf-player-time{ font-size:.75rem; }
  .pf-player-bigplay{ width:64px; height:64px; }
  .pf-player-menu{ bottom:60px; right:8px; }
}
@media (max-width: 400px){
  .pf-player-ctrls{ gap:0; }
  .pf-player-ctrls button{ padding:8px; }
  .pf-player-play{ padding:8px 13px !important; }
  .pf-player-time{ font-size:.68rem; }
  .pf-player-rate{ min-width:30px; font-size:.72rem; }
}

/* Trusted Section */

  .trusted-by-section{background:transparent;padding:70px 0 60px;position:relative;overflow:hidden}
  .trusted-by-inner{max-width:1400px;margin:0 auto;padding:0 24px}
  .trusted-by-label{display:flex;align-items:center;justify-content:center;gap:16px;color:#c9a24a;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.35em;font-weight:600;margin-bottom:36px;text-transform:uppercase}
  .tb-line{display:inline-block;width:60px;height:1px;background:linear-gradient(90deg,transparent,#c9a24a,transparent)}
  .trusted-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .trusted-marquee-track{display:flex;gap:22px;width:max-content;animation:trustedScroll 40s linear infinite}
  .trusted-marquee:hover .trusted-marquee-track{animation-play-state:paused}
  .trusted-logo{flex:0 0 auto;min-width:220px;height:88px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:0 32px;transition:transform .3s ease,border-color .3s ease,background .3s ease}
  .trusted-logo:hover{transform:translateY(-3px);border-color:rgba(201,162,74,.4);background:linear-gradient(180deg,rgba(201,162,74,.08),rgba(255,255,255,.02))}
  .trusted-logo img{max-height:44px;max-width:160px;width:auto;height:auto;object-fit:contain;filter:brightness(1.05)}
  @keyframes trustedScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (max-width:640px){.trusted-logo{min-width:170px;height:74px;padding:0 22px}.trusted-logo img{max-height:36px;max-width:130px}.trusted-by-label{font-size:11px}}
/* ============================================
   SCRIPTWRITING CARDS — HORIZONTAL LAYOUT
   ============================================ */

/* 1. Make the grid use wider columns */
.pf-grid-docs {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

/* 2. Make each scriptwriting card landscape */
.pf-item.is-doc {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
}

/* 3. Force the media area to horizontal aspect ratio */
.pf-item.is-doc .pf-item-media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}

.pf-item.is-doc .pf-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4. Keep the document icon centered and sized nicely */
.pf-item.is-doc .pf-item-doc-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 5. Info area padding tweak for horizontal feel */
.pf-item.is-doc .pf-item-info {
  padding: 16px 18px 18px;
}

.pf-item-doc-btn { display: none !important; }
/* ============================================
   SCRIPTWRITING MODAL
   A script is a long, portrait document — give the viewer real height so it
   reads top-to-bottom, instead of a 16:9 letterbox that shows a few lines.
   ============================================ */

.pf-modal-box.is-doc {
  max-width: 1000px;
  width: min(1000px, 96vw);
}

.pf-modal-box.is-doc .pf-modal-frame {
  width: 100%;
  height: min(86vh, 1400px);
  background: #ffffff;          /* letterbox gaps become white, not dark */
  border-radius: 14px;
  overflow: hidden;
}

.pf-modal-box.is-doc .pf-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================
   BELOW-THE-FOLD RENDER SKIPPING
   The browser skips layout / paint / image + video decode for these
   sections until they are scrolled near the viewport. On phones this is
   the difference between the reel, trusted strip and work grid all
   fighting for the CPU/radio on load vs. only when you reach them.
   contain-intrinsic-size reserves space so the scrollbar doesn't jump.
   ============================================ */
.pf-marquee,
.trusted-by-section,
#pf-results,
#testimonials {
  content-visibility: auto;
  contain-intrinsic-size: auto 460px;
}
#work {
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}