/* Phocal Studio: premium chromatic system, no pointer glow. */
:root {
  --pho-ink: #070706;
  --pho-ink-2: #10100d;
  --pho-panel: rgba(255, 255, 255, 0.065);
  --pho-line: rgba(255, 212, 61, 0.18);
  --pho-text: #fffaf0;
  --pho-muted: rgba(255, 250, 240, 0.72);
  --pho-soft: rgba(255, 250, 240, 0.52);
  --pho-yellow: #ffd43d;
  --pho-amber: #ffae18;
  --pho-cream: #fff2a8;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.site-shell,
.site-shell main {
  max-width: 100%;
  overflow-x: clip;
}

.hero,
.section {
  position: relative;
  isolation: isolate;
}

.section::after {
  content: "";
  position: absolute;
  inset: 0 auto;
  left: 50%;
  z-index: -2;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Hero: yellow lead, then the rest of the page returns to a controlled studio dark. */
.hero {
  color: var(--pho-ink);
  background:
    radial-gradient(circle at 84% 10%, rgba(255, 255, 255, 0.58), transparent 24rem),
    linear-gradient(160deg, #fff5bd 0%, #ffe16a 48%, #f7b21f 100%);
}

.hero-bg video {
  opacity: 0.13;
  filter: grayscale(0.2) sepia(0.35) saturate(1.05) contrast(1.08);
  mix-blend-mode: multiply;
}

.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(255, 247, 197, 0.9), rgba(255, 213, 61, 0.56) 58%, rgba(247, 178, 31, 0.68)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 44%);
}

.hero h1,
.hero .button-ghost,
.hero .kicker,
.hero-copy > p:not(.kicker) {
  color: var(--pho-ink);
}

.hero .kicker,
.hero-copy > p:not(.kicker) {
  color: rgba(7, 7, 6, 0.72);
}

.hero .kicker::before {
  background: var(--pho-ink);
  box-shadow: 0 0 18px rgba(7, 7, 6, 0.22);
}

.hero .button-primary {
  color: #fffaf0;
  background: linear-gradient(135deg, #050505, #15130b);
  box-shadow: 0 22px 62px rgba(7, 7, 6, 0.22);
}

.hero .button-ghost {
  border-color: rgba(7, 7, 6, 0.2);
  background: rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

/* Content rhythm: one coherent dark studio system, varied by glow direction. */
.video-section::after,
.ig-section::after,
.recent-work-section::after,
.services-section::after,
.custom-section::after,
.process-section::after,
.ai-section::after,
.ads-section::after,
.google-section::after,
.contact-section::after {
  background:
    radial-gradient(circle at var(--glow-x, 76%) var(--glow-y, 16%), rgba(255, 212, 61, var(--glow-a, 0.1)), transparent 28rem),
    linear-gradient(155deg, #080806 0%, #030303 54%, #0d0c08 100%);
}

.ig-section,
.process-section,
.ads-section {
  --glow-x: 16%;
  --glow-y: 10%;
  --glow-x-2: 90%;
  --glow-y-2: 82%;
  --glow-a: 0.08;
}

.services-section,
.contact-section {
  --glow-x: 86%;
  --glow-y: 0%;
  --glow-x-2: 12%;
  --glow-y-2: 100%;
  --glow-a: 0.12;
}

.custom-section,
.recent-work-section {
  --glow-x: 50%;
  --glow-y: 6%;
  --glow-a: 0.1;
}

/* High-contrast text everywhere after the hero. */
.video-section,
.ig-section,
.recent-work-section,
.services-section,
.custom-section,
.process-section,
.ai-section,
.ads-section,
.google-section,
.contact-section {
  color: var(--pho-text);
}

.video-section h2,
.ig-section h2,
.recent-work-section h2,
.services-section h2,
.custom-section h2,
.process-section h2,
.ai-section h2,
.ads-section h2,
.google-section h2,
.contact-section h2,
.section-head h2,
.lab-copy h2,
.custom-copy h2,
.process-copy h2,
.google-card h2,
.contact-copy h2 {
  color: var(--pho-text) !important;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

.video-section .kicker,
.ig-section .kicker,
.recent-work-section .kicker,
.services-section .kicker,
.custom-section .kicker,
.process-section .kicker,
.ai-section .kicker,
.ads-section .kicker,
.google-section .kicker,
.contact-section .kicker {
  color: rgba(255, 250, 240, 0.78) !important;
}

.video-section .kicker::before,
.ig-section .kicker::before,
.recent-work-section .kicker::before,
.services-section .kicker::before,
.custom-section .kicker::before,
.process-section .kicker::before,
.ai-section .kicker::before,
.ads-section .kicker::before,
.google-section .kicker::before,
.contact-section .kicker::before {
  background: var(--pho-yellow);
  box-shadow: 0 0 18px rgba(255, 212, 61, 0.48);
}

.video-section .section-head > p:not(.kicker),
.ig-profile > p:not(.kicker),
.recent-work-copy > p:not(.kicker),
.services-section .section-head > p:not(.kicker),
.custom-copy > p:not(.kicker),
.process-copy > p,
.ai-section .lab-copy > p,
.ads-section .lab-copy > p,
.google-section .google-card > div > p:not(.kicker),
.contact-copy > p:not(.kicker) {
  color: var(--pho-muted) !important;
}

/* Cards and modules: same material, different content. */
.reel-3d-showcase,
.service-playground,
.film-service-machine,
.process-panel,
.lab-visual,
.ads-card,
.ads-console div,
.google-card,
.contact-layout,
.custom-showcase,
.custom-card,
.service-card,
.ai-card,
.flow-card,
.process-step {
  border-color: var(--pho-line) !important;
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 212, 61, 0.12), transparent 18rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.032)),
    rgba(8, 8, 7, 0.78) !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.32);
}

.custom-card h3,
.service-card h3,
.ai-card h3,
.ads-card h3,
.flow-card h3,
.process-step h3,
.film-card strong,
.film-service-panel strong {
  color: var(--pho-text) !important;
}

.custom-card p,
.service-card p,
.ai-card p,
.ads-card p,
.flow-card p,
.process-step p,
.film-card p,
.film-service-panel p {
  color: var(--pho-muted) !important;
}

.ig-stats span,
.contact-promise span,
.contact-links a {
  color: var(--pho-text);
  border-color: rgba(255, 212, 61, 0.16);
  background: rgba(255, 255, 255, 0.055);
}

.ig-stats strong,
.contact-promise strong,
.contact-links a span {
  color: var(--pho-yellow);
}

.button.button-primary,
.ig-section .button-primary,
.video-section .button-primary,
.custom-section .button-primary,
.google-section .button-primary {
  color: #080806;
  background: linear-gradient(135deg, var(--pho-cream), var(--pho-yellow) 52%, var(--pho-amber));
}

.button.button-ghost,
.custom-section .button-ghost,
.google-section .button-ghost {
  color: var(--pho-text);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
}

/* Contact form: dark readable console, no washed-out yellow block. */
.contact-layout {
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.38);
}

.contact-form {
  color: var(--pho-text);
  border: 1px solid rgba(255, 212, 61, 0.28);
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 212, 61, 0.14), transparent 18rem),
    linear-gradient(145deg, #181611, #070707 68%) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.contact-form-head span,
.project-options input:checked + span {
  color: var(--pho-ink);
}

.contact-form-head span {
  color: var(--pho-yellow);
}

.contact-form-head strong,
.contact-form > label,
.contact-form-row > label,
.project-options legend {
  color: var(--pho-text);
}

.project-options span {
  color: rgba(255, 250, 240, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

.project-options input:checked + span {
  border-color: rgba(255, 212, 61, 0.7);
  background: linear-gradient(135deg, var(--pho-cream), var(--pho-yellow));
}

.contact-form input:not([type="radio"]),
.contact-form textarea {
  color: #fff;
  caret-color: var(--pho-yellow);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.075);
}

.contact-form input:not([type="radio"])::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.52);
  opacity: 1;
}

.contact-form input:not([type="radio"]):focus,
.contact-form textarea:focus {
  border-color: var(--pho-yellow);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(255, 212, 61, 0.15);
}

.contact-form > .button {
  color: var(--pho-ink);
  background: linear-gradient(135deg, var(--pho-cream), var(--pho-yellow), var(--pho-amber));
}

@media (max-width: 640px) {
  .section::after {
    width: 100dvw;
  }

  .hero {
    background:
      radial-gradient(circle at 86% 3%, rgba(255, 255, 255, 0.42), transparent 15rem),
      linear-gradient(180deg, #fff3b0 0%, #ffdb4d 58%, #eda414 100%);
  }

  .hero-bg video {
    opacity: 0.09;
  }

  .reel-3d-showcase,
  .service-playground,
  .film-service-machine,
  .contact-layout {
    box-shadow: 0 22px 72px rgba(0, 0, 0, 0.34);
  }

  .section {
    overflow: clip;
  }

  .section-head > p:not(.kicker),
  .ig-profile > p:not(.kicker),
  .recent-work-copy > p:not(.kicker),
  .custom-copy > p:not(.kicker),
  .contact-copy > p:not(.kicker),
  .hero-copy > p:not(.kicker) {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .logo-marquee,
  .word-marquee,
  .reel-3d-stage,
  .project-reel-track,
  .service-playground,
  .film-service-machine,
  .film-strip-viewport,
  .custom-showcase,
  .contact-layout {
    max-width: 100%;
    overflow: hidden;
  }

  .reel-3d-stage {
    min-height: 330px !important;
    transform: none;
    transform-origin: center top;
    margin-inline: auto;
  }

  .reel-3d-showcase {
    min-height: 405px !important;
    padding-top: 0 !important;
  }

  .reel-3d-card {
    top: 44% !important;
    width: min(66vw, 236px) !important;
  }

  .reel-3d-card.is-active {
    --ty: -4px;
  }

  .project-reel-track,
  .film-strip-viewport,
  .film-strip {
    min-width: 0;
  }

  .film-strip {
    width: max-content;
  }

  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}