* { box-sizing: border-box; }

:root {
  --hero-top: 150px;   /* how far down the hero image + text start, clearing the header */
  --max-w: 1500px;     /* content never gets wider than this — black bars fill the rest */
}

html {
  scroll-behavior: smooth;
  background: #080808;   /* the letterbox colour on very wide screens */
  /* faint topographic contours behind everything, seen at the sides on wide screens; tiles top to bottom */
  background: #080808 url(images/bg-contours.jpg?v=3) center top / 3000px auto repeat;
}

body {
  margin: 0 auto;               /* centre the content column */
  max-width: var(--max-w);
  background: #080808;
  color: #f5f5f5;
  font: 14px/1.6 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}

/* ===== HEADER ===== */
header {
  position: fixed;
  z-index: 5;
  top: 0; left: 0; right: 0;
  max-width: var(--max-w);     /* line up with the centred content column */
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 5%;
  background: none;
}
/* strong black gradient behind the header — taller than the bar itself, so anything
   scrolling underneath has faded to solid black by the time it reaches the logo / nav */
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 210px;
  background: linear-gradient(180deg, #080808 0%, #080808 48%, rgba(8,8,8,0) 100%);
  z-index: -1;
  pointer-events: none;
}
.brand img { width: 120px; height: auto; object-fit: contain; }
nav { display: flex; gap: 34px; }
a { color: inherit; text-decoration: none; }
nav a { font-size: 11px; }

/* ===== HERO ===== */
.hero {
  position: relative;        /* anchor for the image + scrim layers */
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: calc(var(--hero-top) + 40px) 8% 90px;   /* top padding clears the header */
  background: #080808;       /* black base, shows if the image is missing */
  overflow: hidden;
}

/* background: full-window slides (poster walls + AI shots), cross-faded (script.js .is-active) */
.hero-bg {
  position: absolute;
  left: 0;
  top: var(--hero-top);
  width: 100%;
  height: calc(100% - var(--hero-top));
  object-fit: cover;         /* fill the whole area, crop, never squash */
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-bg.is-active { opacity: 1; }

/* gradient scrim: sits OVER the image, UNDER the text.
   Default = dark fade so the white text stays readable.
   For a WHITE fade instead, change the three 8,8,8 values below to 255,255,255 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(8,8,8,.85) 0%,
    rgba(8,8,8,.45) 45%,
    rgba(8,8,8,0)  80%);
}

/* text + button: sits on top of the image and the scrim */
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.hero p { font-size: 12px; }
.hero h1 {
  font-size: clamp(48px, 7vw, 96px);
  line-height: .95;
  margin: 14px 0;
  font-weight: 800;
  letter-spacing: -.03em;
}
.strap { font-size: 12px; }
.btn {
  display: inline-block;
  border: 1px solid #aaa;
  padding: 12px 22px;
  margin-top: 22px;
  font-size: 11px;
}

/* ===== SHARED SECTION BITS ===== */
section[id], #services { scroll-margin-top: 120px; }   /* so the fixed header doesn't cover anchors */
.clients h2, .contact h2 {
  font-size: 18px;
  letter-spacing: .12em;
  margin: 0 0 30px;
}
p { color: #cfcfcf; }

/* ===== SERVICES — the three pillars, a banner straight off the hero ===== */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
.services article { padding: 44px 6%; border-right: 1px solid #333; }
.services article:last-child { border-right: 0; }
.services b { display: block; margin-bottom: 14px; letter-spacing: .06em; }
.services span { display: block; color: #aaa; font-size: 12px; letter-spacing: .03em; }

/* ===== ABOUT — intro + photo on top, three columns full-width below ===== */
.about { padding: 84px 8%; }

.about-intro {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
  margin-bottom: 50px;
}
.about-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.about h2 {
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.005em;
  color: #f5f5f5;
  margin: 0 0 26px;
}
.about-copy p {
  font-size: 13.5px;
  line-height: 1.8;
  color: #cbcbcb;
  margin: 0 0 14px;
  max-width: 42em;
}
.about-copy p:last-child { margin-bottom: 0; }
.about-photo {
  width: 100%;
  height: 375px;
  object-fit: cover;
  object-position: center 30%;
  border: 1px solid #2a2a2a;
  background: #161616;
}

.about-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
  padding-top: 46px;
  border-top: 1px solid #333;
}
.about-ways h3 {
  font-size: 14px;
  letter-spacing: .02em;
  color: #fff;
  margin: 0 0 10px;
}
.about-ways p {
  font-size: 12.5px;
  line-height: 1.75;
  color: #a8a8a8;
  margin: 0 0 10px;
}
.about-ways p:last-child { margin-bottom: 0; }
.about-ways h3.ways-next { margin-top: 34px; }
.ways-img { width: 100%; height: auto; display: block; border: 1px solid #2a2a2a; }

/* "However we work together" — cartoon down the LEFT, principles stacked on the right */
.ethos-wrap {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 56px;
  padding-top: 46px;
  border-top: 1px solid #333;
}
.ethos-art  { order: 1; }
.ethos-main { order: 2; }
.ethos-label {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.about-ethos {
  display: block;
  padding-top: 0;
  border-top: 0;
  margin-top: 0;
}
.ethos-art {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ethos-art figure { margin: 0; }
.ethos-art img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid #2a2a2a;
  background: #161616;
}
.about-ethos > div {
  max-width: 44em;
  padding: 22px 0;
}
.about-ethos > div + div { border-top: 1px solid #262626; }
.about-ethos h3 { font-size: 16px; margin-bottom: 9px; }
.about-ethos p { color: #b4b4b4; }

.about-fineprint {
  margin: 26px 0 0;                /* sits with the About content, above the divider */
  font-size: 11px;
  line-height: 1.7;
  color: #8a8a8a;
  letter-spacing: .03em;
}
.about-fineprint a { color: #d8d8d8; }
.about-fineprint a:hover { color: #fff; text-decoration: underline; }

/* ===== SHOWREEL POSTER TICKER (after Services) ===== */
.posters { padding: 0; overflow: hidden; border-top: 1px solid #222; border-bottom: 1px solid #222; }
.poster-ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.poster-track {
  display: flex;
  width: max-content;
  animation: poster-scroll 80s linear infinite;
}
.posters:hover .poster-track { animation-play-state: paused; }
.poster-group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 7px;
  flex: none;
}
.poster-group img {
  height: 132px;
  width: 88px;
  object-fit: cover;
  border: 1px solid #262626;
  opacity: .78;
}
.poster-group img:hover { opacity: 1; }
@keyframes poster-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .poster-track { animation: none; }
  .poster-group:last-child { display: none; }
  .poster-group { flex-wrap: wrap; justify-content: center; }
  .poster-ticker { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 760px) {
  .poster-group img { height: 108px; width: 72px; }
}

/* ===== CLIENTS (scrolling logo ticker) ===== */
.clients {
  padding: 44px 0 56px;                 /* ticker spans the full column; heading is inset below */
}
.clients h2 { margin: 0 8% 28px; }

/* ===== TESTIMONIALS (inside the clients section, under the ticker) ===== */
.quote-feature {
  margin: 48px 0 0;
  padding: 34px 8%;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  background: #0d0d0d;             /* reads as a card, full column width */
}
.quote-feature blockquote {
  margin: 0 0 14px;
  max-width: 46em;                 /* keeps the longer recommendations readable at this size */
  font-size: clamp(16px, 1.9vw, 23px);
  line-height: 1.4;
  font-weight: 600;
  color: #f5f5f5;
}
.quote-feature blockquote::before { content: "\201C"; }
.quote-feature blockquote::after  { content: "\201D"; }
.quote-feature figcaption b { display: block; color: #fff; font-size: 10.5px; letter-spacing: .1em; }
.quote-feature figcaption span { display: block; color: #7f7f7f; font-size: 10.5px; letter-spacing: .03em; margin-top: 3px; }

.quotes-label {
  margin: 40px 8% 24px;
  font-size: 12px;
  letter-spacing: .12em;
  color: #fff;
}
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
  margin: 0 8%;
}
.quotes figure { margin: 0; }
.quotes blockquote {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #cfcfcf;
  letter-spacing: .01em;
}
.quotes blockquote::before { content: "\201C"; }
.quotes blockquote::after  { content: "\201D"; }
.quotes figcaption b { display: block; color: #fff; font-size: 10.5px; letter-spacing: .1em; }
.quotes figcaption span { display: block; color: #7f7f7f; font-size: 10.5px; letter-spacing: .03em; margin-top: 3px; }

/* the ticker fills the whole content column, edge to edge */
.ticker {
  overflow: hidden;
  /* fade the logos out at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 90s linear infinite;   /* raise seconds = slower */
}
.ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-group {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-right: 60px;        /* keeps spacing even where the two groups meet */
  flex: none;
}

.ticker-group img {
  height: 28px;               /* default height — wide wordmark logos */
  width: auto;
  max-width: 170px;           /* stop a very wide wordmark dominating the row */
  object-fit: contain;
  opacity: .55;
  /* flatten every logo to plain white so they sit consistently on the dark bg */
  filter: grayscale(1) brightness(0) invert(1);
}

/* icon / stacked marks need more height to carry the same visual weight as a wordmark */
.ticker-group img[src$="warner-bros.svg"],
.ticker-group img[src$="goodbye-kansas.svg"],
.ticker-group img[src$="hochkant-film.svg"],
.ticker-group img[src$="electric-theatre-collective.svg"],
.ticker-group img[src$="framestore.svg"]      { height: 44px; }

.ticker-group img[src$="nexus-studios.png"],
.ticker-group img[src$="host-vfx.svg"],
.ticker-group img[src$="3-mills-studios.png"] { height: 38px; }

.ticker-group img[src$="sky.png"] { height: 36px; filter: none; opacity: .9; }  /* Sky keeps its spectrum colours */

/* Quint FX logo has a baked-in black background — 'screen' blend drops the black,
   leaving just its gradient wordmark glowing on the dark strip */
.ticker-group img[src$="quint-vfx.png"] { filter: none; opacity: .9; mix-blend-mode: screen; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* one full group width */
}

/* accessibility: hold still for anyone who asks the OS to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; }
  .ticker-group:last-child { display: none; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 760px) {
  .ticker-group { gap: 44px; padding-right: 44px; }
  .ticker-group img { height: 22px; }
}

/* ===== AI ===== */
.ai { padding: 84px 8%; border-top: 1px solid #333; }
.ai-kicker {
  margin: 0 0 14px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a8a8a;
}
.ai h2 {
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 700; line-height: 1.32; letter-spacing: -.005em;
  color: #f5f5f5; margin: 0 0 28px; max-width: 18em;
}
.ai-banner { margin: 0 0 30px; }
.ai-banner img {
  display: block; width: 100%;
  border: 1px solid #2a2a2a; background: #161616;
}
.ai-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
}
.ai-pipeline { margin: 36px 0 0; }
.ai-pipeline img {
  display: block; width: 100%;
  border: 1px solid #2a2a2a; background: #161616;
}
.ai-body p, .ai-line p {
  font-size: 13.5px; line-height: 1.8; color: #cbcbcb;
  margin: 0 0 14px;
}
.ai-body p:last-child, .ai-line p:last-child { margin-bottom: 0; }
.ai-line {
  border-left: 2px solid #333;
  padding-left: 26px;
}
.ai-line p.ai-line-lead { color: #f5f5f5; font-weight: 600; }
.ai-close {
  margin: 36px 0 0;
  padding-top: 34px;
  border-top: 1px solid #2a2a2a;
  text-align: center;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #f4f4f4;
}

/* ===== CONTACT ===== */
.contact { padding: 90px 8%; border-top: 1px solid #333; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-intro p { font-size: 13px; letter-spacing: .03em; }
.contact-intro b { color: #f5f5f5; }

.map {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 26px 0 20px;
}
.urgent { font-size: 12px; line-height: 1.7; color: #9a9a9a; margin: 6px 0 0; }
.urgent b { color: #f5f5f5; font-weight: 600; }
.urgent a { color: #f5f5f5; text-decoration: underline; text-underline-offset: 3px; }
.map-land  { fill: #141414; stroke: #333; stroke-width: 1; }
.map-coast { fill: none; stroke: #2a2a2a; stroke-width: 1; }
.map-link  { stroke: #666; stroke-width: 1; stroke-dasharray: 3 3; }
.map-dot   { fill: #f5f5f5; }
.map-pin   { fill: #f5f5f5; }
.map-pin-c { fill: #141414; }
.map-label { fill: #cfcfcf; font-size: 11px; letter-spacing: .12em; }
.map-here  { fill: #fff; }
.map-time  { fill: #888; font-size: 9px; letter-spacing: .1em; }

.contact-direct { display: flex; gap: 12px; }
.contact-direct .btn { margin-top: 6px; }

/* enquiry form */
.enquiry { display: flex; flex-direction: column; gap: 16px; }
.enquiry label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .14em;
  color: #9a9a9a;
}
.enquiry input,
.enquiry textarea {
  background: #111;
  border: 1px solid #333;
  color: #f5f5f5;
  padding: 11px 12px;
  font: inherit;
  font-size: 13px;
  letter-spacing: .02em;
}
.enquiry input:focus,
.enquiry textarea:focus { outline: none; border-color: #888; }
.enquiry textarea { resize: vertical; }
.enquiry button {
  align-self: flex-start;
  background: none;
  border: 1px solid #aaa;
  color: #f5f5f5;
  padding: 12px 30px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  cursor: pointer;
}
.enquiry button:hover { background: #f5f5f5; color: #080808; }
.enquiry .hp { position: absolute; left: -9999px; }
.form-note { font-size: 10px; color: #777; letter-spacing: .04em; margin: 0; }

/* ===== FOOTER ===== */
footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 5%;
  border-top: 1px solid #333;
  color: #aaa;
  font-size: 10px;
}
footer a:hover { color: #f5f5f5; }

#menu { display: none; background: none; color: white; border: 1px solid #555; padding: 8px; }

/* ===== HOLDING PAGES (training, vouched for crew) ===== */
nav a.on { color: #f5f5f5; }
nav .soon { font-size: 8px; letter-spacing: .14em; border: 1px solid #555; padding: 1px 4px; margin-left: 4px; vertical-align: 1px; }
.holding { min-height: 80vh; display: flex; align-items: center; padding: 170px 8% 90px; }
.holding-inner { max-width: 640px; }
.holding-kicker { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #9a9a9a; margin: 0 0 14px; }
.holding h1 { font-size: clamp(28px, 5vw, 52px); letter-spacing: .12em; line-height: 1.1; text-transform: uppercase; margin: 0 0 18px; }
.holding h1.vfc { border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; padding-block: .22em; display: inline-block; white-space: nowrap; font-size: clamp(22px, 6vw, 52px); }
.holding h1.vfc i { font-style: normal; font-weight: 400; color: #9a9a9a; text-transform: lowercase; }
.holding-soon { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #f5f5f5; margin: 0 0 22px; }
.holding p { color: #cbcbcb; line-height: 1.8; }
.holding .btn { margin-top: 10px; }
/* Vouched for Crew page: a faded, tilted screen grab of the directory behind the text,
   like the Star Wars opening crawl turned 10 degrees anticlockwise. Names in the grab are blanked. */
.holding.ghost { position: relative; overflow: hidden; }
.holding.ghost::before {
  content: ""; position: absolute; inset: -30% -20% -20% -20%;
  background: url(images/vouched-ghost-nightshoot.jpg) 62% top / 58% auto repeat-y;
  opacity: 1; pointer-events: none; z-index: 0;
  transform: perspective(1400px) rotate(-10deg) rotateX(30deg) scale(1.1);
  transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 88%, transparent 100%);
}
.holding.ghost .holding-inner { position: relative; z-index: 1; background: rgba(8,8,8,.88); padding: 28px 32px; box-shadow: 0 0 60px 30px rgba(8,8,8,.88); }
.holding.ghost-training::before { background: url(images/training-ghost.jpg?v=2) 60% 22% / 70% auto no-repeat; }

/* ===== MOBILE ===== */
@media (max-width: 760px) {
  nav { display: none; }
  #menu { display: block; }
  .services { grid-template-columns: 1fr; }
  .services article { border-right: 0; border-bottom: 1px solid #333; }
  .about-intro { grid-template-columns: 1fr; gap: 28px; }
  .about-photo { width: 260px; height: 320px; }
  .about-ways { grid-template-columns: 1fr; gap: 28px; }
  .ethos-wrap { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; padding-top: 32px; }
  .ethos-art, .ethos-main { order: 0; }   /* text first, image after, on phones */
  .ai-grid { grid-template-columns: 1fr; gap: 26px; }
  .ai-line { padding-left: 18px; }
  .quotes { grid-template-columns: 1fr; gap: 30px; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero { min-height: 78vh; }
  :root { --hero-top: 104px; }          /* smaller header offset on phones */
  header::after { height: 150px; }
  footer { flex-direction: column; }
}