:root {
  --display-font: "Segoe UI Variable Display", "Aptos Display", "Arial Black", Impact, sans-serif;
  --body-font: "Segoe UI Variable Text", Aptos, Inter, "Segoe UI", sans-serif;
}

body { font-family: var(--body-font); }
.site-header, main, .site-footer { position: relative; z-index: 1; }

.production-ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #070b13df, #070b13f4 32%, #070b13e9 70%, #070b13f7), url('/assets/production-studio-ambience.png') center / cover no-repeat;
  opacity: .48;
  filter: saturate(.9) contrast(1.04);
}

.hero h1, .section h2, .contact-section h2, .team-heading h2 {
  font-family: var(--display-font);
  font-weight: 950;
  letter-spacing: -.062em;
  line-height: .92;
  text-wrap: balance;
}

.section-heading h2, .contact-section h2 { font-size: clamp(2.8rem, 5.5vw, 5.5rem); }
.service-card h3, .price-card h3, .proof-strip h3, .founder-copy h3, .team-name h3 {
  font-family: var(--display-font);
  font-weight: 850;
  letter-spacing: -.035em;
}

.eyebrow {
  font-family: var(--body-font);
  font-weight: 900;
  letter-spacing: .22em;
  text-shadow: 0 0 20px #58cfff30;
}

.problem { position: relative; max-width: 1320px; overflow: visible; }
.problem-statement .eyebrow {
  font-size: clamp(.9rem, 1.15vw, 1.12rem);
  margin-bottom: 1.8rem;
}

.problem-arrow {
  position: relative;
  width: min(300px, 50%);
  margin: 1.45rem 0 0 auto;
  filter: drop-shadow(0 0 10px #58cfff80);
}

.problem-arrow svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.problem-arrow path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.problem-arrow-stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: write-problem-arrow 2.6s cubic-bezier(.45, 0, .18, 1) infinite;
}

.problem-arrow-tip {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: write-problem-tip 2.6s cubic-bezier(.45, 0, .18, 1) infinite;
}

@keyframes write-problem-arrow {
  0%, 10% { stroke-dashoffset: 1; opacity: .25; }
  68%, 88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .35; }
}

@keyframes write-problem-tip {
  0%, 62% { stroke-dashoffset: 1; opacity: 0; }
  78%, 88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .35; }
}

.contact-form .button.primary {
  position: relative;
  justify-self: stretch;
  min-height: 76px;
  padding: 1.15rem 2rem;
  overflow: hidden;
  border: 1px solid #ffffff42;
  border-radius: 20px;
  background: linear-gradient(105deg, #ed1c32 0%, #f23a4b 42%, #168fdf 100%);
  box-shadow: 0 16px 42px #0007, 0 10px 32px #0898e936, inset 0 1px #ffffff3d;
  font-family: var(--display-font);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.contact-form .button.primary::after {
  content: "\2192";
  margin-left: .8rem;
  font-size: 1.35em;
  line-height: .8;
  transition: transform .22s ease;
}

.contact-form .button.primary:hover {
  transform: translateY(-3px);
  filter: saturate(1.12) brightness(1.05);
  box-shadow: 0 22px 52px #0009, 0 14px 38px #0898e957, inset 0 1px #ffffff52;
}

.contact-form .button.primary:hover::after { transform: translateX(7px); }
.contact-form .button.primary:active { transform: translateY(0) scale(.99); }
.contact-form .button.primary:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

.service-card h3 { font-size: clamp(1.45rem, 1.7vw, 1.85rem); }
.service-card, .price-card, .testimonials blockquote, .contact-section {
  backdrop-filter: blur(8px);
  background-color: #0b121dd9;
}

.service-card, .price-card, .testimonials blockquote {
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.service-card:hover, .price-card:hover, .testimonials blockquote:hover {
  transform: translateY(-7px);
  border-color: #58cfff66;
  box-shadow: 0 24px 55px #0008, 0 0 25px #0898e917;
}

.section-heading { position: relative; }
.section-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.3rem;
  width: clamp(90px, 12vw, 170px);
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--blue), transparent);
  box-shadow: 0 0 15px #0898e955;
}

@media (max-width: 980px) {
  .problem-arrow {
    width: 170px;
    margin: .5rem auto 0;
    transform: rotate(72deg);
  }
}

@media (max-width: 640px) {
  .problem-statement .eyebrow { font-size: .78rem; }
  .problem-arrow { width: 145px; margin-block: -.25rem .5rem; }
  .contact-form .button.primary {
    min-height: 64px;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    font-size: 1.1rem;
  }
  .production-ambience { opacity: .22; background-position: 38% center; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card, .price-card, .testimonials blockquote { transition: none; }
  .problem-arrow-stroke,
  .problem-arrow-tip { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .contact-form .button.primary,
  .contact-form .button.primary::after { transition: none; }
}