/* Goanna Productions – rebuilt from the Divi layout. Palette and type taken from the original page. */
:root {
  --blue: #4866ff;
  --cyan: #6fe5f3;
  --purple: #a258ff;
  --sky: #308cff;
  --ink: #333333;
  --text: #4a4a4a;
  --muted: #cccccc;
  --bg: #ffffff;
  --grad-primary: linear-gradient(90deg, #4968ff 0%, #6fe5f3 100%);
  --grad-box: linear-gradient(35deg, #4866ff 0%, #6fe5f3 100%);
  --grad-panel: linear-gradient(120deg, #a258ff 0%, #308cff 100%);
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 1080px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: .5rem 1rem; z-index: 1000; }
.skip-link:focus { left: 0; }

/* ---- Typography ------------------------------------------------------- */
.section-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .5em;
}
.section-title--light { color: #fff; }

.divider { width: 80px; height: 3px; background: var(--blue); margin: 0 0 1.5em; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 20px 45px;
  background: var(--grad-primary);
  color: #fff;
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.btn:hover, .btn:focus-visible { opacity: .9; transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.btn--white { background: #fff; color: #4968ff; }

/* ---- Hero -------------------------------------------------------------- */
.hero { background: var(--ink); }
.hero__img { width: 100%; height: auto; }

/* ---- About -------------------------------------------------------------- */
.about { padding: 90px 0 0; }
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  padding: 40px var(--gutter);
}
.about__text { padding-right: 60px; }
.about__text p:last-of-type { margin-bottom: 0; }
.about__cta { margin-top: 2em; text-align: center; }

.about__photo {
  position: relative;
  background: var(--grad-box);
  padding: 0;
  align-self: start;
}
.about__photo img {
  position: relative;
  width: 100%;
  margin: -40px 40px 40px -40px;
  box-shadow: 13px 42px 45px -3px rgba(0, 0, 0, .1);
}

/* ---- Showreel ------------------------------------------------------------- */
.showreel { padding: 54px 0; }
.showreel__wrap { position: relative; }
.showreel__video {
  position: relative;
  z-index: 2;
  width: 80%;
  aspect-ratio: 16 / 9;
  box-shadow: 0 45px 62px rgba(18, 47, 100, .2);
  background: #000;
}
.showreel__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.showreel__panel {
  position: relative;
  z-index: 1;
  width: 80%;
  margin: -35% 0 0 auto;
  padding: 40% 10% 4.9%;
  background: var(--grad-panel);
  color: #fff;
}
.showreel__panel .section-title { max-width: 960px; }

/* ---- Gallery ----------------------------------------------------------- */
.gallery { padding: 54px 0; }
.gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.gallery__grid a { display: block; overflow: hidden; background: #eee; }
.gallery__grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery__grid a:hover img, .gallery__grid a:focus-visible img { transform: scale(1.04); }
.gallery__grid a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* ---- Lightbox ---------------------------------------------------------- */
.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .92);
  color: #fff;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.lightbox__figure { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 72px; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 100px); width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox__caption { margin-top: 12px; font-size: 14px; color: var(--muted); min-height: 1.5em; text-align: center; }
.lightbox__close, .lightbox__nav {
  position: absolute;
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  padding: 8px 16px;
  opacity: .8;
}
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; }
.lightbox__close { top: 8px; right: 12px; font-size: 40px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid #fff; }

/* ---- Testimonials -------------------------------------------------------- */
.testimonials { background: var(--grad-panel); color: #fff; }
.testimonials .container { max-width: 100%; padding: 0; }
.slider { position: relative; padding: 120px 0; }
.slider__track { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 80px; }
.slider__slide { display: none; margin: 0; text-align: center; font-size: 18px; }
.slider__slide.is-active { display: block; animation: fade .6s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slider__slide.is-active { animation: none; } }
.slider__slide p { margin-bottom: 1.5em; }
.slider__slide footer { font-size: 15px; }
.slider__slide strong { font-weight: 600; }
.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 56px;
  line-height: 1;
  cursor: pointer;
  padding: 0 16px;
  opacity: .7;
}
.slider__arrow:hover, .slider__arrow:focus-visible { opacity: 1; }
.slider__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.slider__arrow--prev { left: 8px; }
.slider__arrow--next { right: 8px; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; gap: 10px; }
.slider__dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.4); cursor: pointer; }
.slider__dots button[aria-selected="true"] { background: #fff; }
.slider__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Contact ---------------------------------------------------------- */
.contact { padding: 54px 0; }
.contact__wrap { max-width: 720px; text-align: center; }
.contact__details { margin-bottom: 2em; }
.contact__details a { color: inherit; text-decoration: none; }
.contact__details a:hover { text-decoration: underline; }

.contact-form { text-align: left; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 0;
  background: rgba(0, 0, 0, .05);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; background: #fff; }
.field.has-error input, .field.has-error textarea { border-color: #d63638; }
.field__error { color: #d63638; font-size: 14px; margin: 6px 0 0; }
.field--hp { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0; overflow: hidden; }
.contact-form__actions { text-align: center; margin: 10px 0 0; }
.cf-turnstile { display: flex; justify-content: center; margin-bottom: 20px; }

.form-msg { padding: 16px 20px; margin: 0 0 24px; font-weight: 500; }
.form-msg--ok { background: #e8f8ef; color: #1d6b3a; border-left: 4px solid #2fb66b; }
.form-msg--err { background: #fdeeee; color: #8a1f21; border-left: 4px solid #d63638; }

/* ---- Footer ---------------------------------------------------------- */
.footer { background: var(--ink); color: var(--muted); text-align: center; padding: 30px 0; font-size: 14px; }
.footer p { margin: 0; }
.footer a { color: var(--muted); font-weight: 600; text-decoration: none; }
.footer a:hover { color: #fff; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 980px) {
  .about { padding-top: 60px; }
  .about__grid { grid-template-columns: 1fr; gap: 60px; }
  .about__text { padding-right: 0; }
  .about__photo { margin: 0 0 40px 40px; max-width: 420px; }
  .about__photo img { margin: -40px 0 40px -40px; }
  .showreel__panel { margin-top: -25%; padding-top: 30%; }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .slider__track { padding: 0 56px; }
}
@media (max-width: 640px) {
  .section-title { font-size: 26px; }
  .about__text { padding: 0 8px; }
  .about__photo { margin-left: 24px; }
  .about__photo img { margin: -24px 0 24px -24px; }
  .showreel__video, .showreel__panel { width: 100%; }
  .showreel__panel { margin-top: -25%; padding: 30% 10% 10%; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .slider { padding: 80px 0 72px; }
  .slider__track { padding: 0 40px; }
  .slider__slide { font-size: 16px; }
  .slider__arrow { font-size: 40px; padding: 0 6px; }
  .slider__dots { bottom: 28px; }
  .lightbox__figure { padding: 56px 16px 24px; }
  .lightbox__nav { font-size: 36px; padding: 8px; }
  .btn { padding: 16px 32px; }
}