/* ==========================================================================
   OH HECK MEDIA: Homepage
   Tokens first: swap the colourway here, nothing else needs to change.
   ========================================================================== */

@font-face {
  font-family: "Oh Heck Display";
  src: url("../assets/fonts/OhHeckDisplay-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Locked marks: cream / deep maroon / red */
  --color-cream: #fffdf1;
  --color-cream-dim: #f6f0da;
  --color-charcoal: #340502;
  --color-charcoal-soft: #872e23;
  --color-red: #f41e1e;

  --color-bg: var(--color-cream);
  --color-text: var(--color-charcoal);
  --color-text-soft: #6b4a45;
  --color-accent: var(--color-red);

  --font-display: "Oh Heck Display", "Arial Narrow", sans-serif;
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* left/right inset that matches .wrap's edge exactly, for elements that
     can't use .wrap's own centering (e.g. flex-positioned full-bleed content) */
  --edge-pad: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--color-cream); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding: 0.75em 1.25em;
  z-index: 200;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Buttons & shared bits
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow .35s var(--ease);
}
.btn--primary {
  background: var(--color-cream);
  color: var(--color-charcoal);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.enquiry .btn--primary,
.site-footer .btn--primary,
.cat-intro .btn--primary {
  background: var(--color-charcoal);
  color: var(--color-cream);
}
.btn--ghost {
  border: 1.5px solid rgba(255,253,241,0.65);
  color: var(--color-cream);
}
.btn--ghost:hover { background: rgba(255,253,241,0.12); transform: translateY(-2px); }

.section-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--color-accent);
  margin-bottom: 0.9em;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  margin-top: 1.4em;
  position: relative;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  height: 2px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }

/* reveal-on-scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background-color 0.4s var(--ease), padding 0.4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
  z-index: -1;
  opacity: 1;
  transition: opacity 0.4s var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-header__logo {
  display: inline-flex;
  padding-block: 0.5rem;
}
.site-header__logo img {
  height: 46px;
  width: auto;
}

@media (max-width: 480px) {
  .site-header__logo img { height: 34px; }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
}
.site-nav__list a {
  color: var(--color-cream);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.4em 0;
  position: relative;
}
.site-nav__list a:not(.site-nav__cta):not(.site-nav__social)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.site-nav__list a:not(.site-nav__cta):not(.site-nav__social):hover::after { transform: scaleX(1); transform-origin: left; }

.site-nav__social {
  /* Block-level, not inline-flex: an inline box with no text inside it gets
     baseline-aligned against the text links, which sat the glyph ~2px high.
     A little extra padding-top then settles it optically against the caps. */
  display: flex;
  align-items: center;
  /* px, not em: this is a fixed optical nudge, and an em value would
     balloon against the 1.8rem type in the mobile overlay. */
  padding: 4px 0 !important;
}
.site-nav__social svg {
  display: block;
  width: 22px;
  height: 22px;
  transition: opacity .35s var(--ease);
}
.site-nav__social:hover svg { opacity: 0.7; }

.site-nav__cta {
  border: 1.5px solid rgba(255,253,241,0.7);
  border-radius: 999px;
  padding: 0.55em 1.3em !important;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.site-nav__cta:hover { background: var(--color-cream); color: var(--color-charcoal); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-cream);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    background: var(--color-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s var(--ease);
  }
  .site-nav.is-open { opacity: 1; visibility: visible; }
  .site-nav__list { flex-direction: column; gap: 2rem; }
  .site-nav__list a { font-family: var(--font-display); font-weight: 400; line-height: 0.95; text-transform: uppercase; font-size: 1.8rem; }
  /* The pill's border IS its visible edge, whereas the text links carry ~11px
     of internal padding, so a shared numeric gap looks uneven around it. Making
     the CTA inline-block lets its box hug the border, and the 2rem list gap then
     lands every item ~32px apart measured edge-to-visible-edge.
     (A margin-top here previously did nothing at all: vertical margins are
     ignored on inline boxes, which is why the pill sat almost touching About.) */
  .site-nav__cta { display: inline-block; }
  .site-nav__social svg { width: 30px; height: 30px; }
  /* overlay items are evenly spaced by the list gap; no nudge needed */
  .site-nav__social { padding: 0 !important; }
  /* In the stacked overlay the icon reads better last, under the CTA. Ordering
     it here rather than in the markup keeps the desktop row unchanged, where it
     belongs before the Enquire pill.
     It needs the same extra top margin the CTA gets: the pill's border makes the
     gap look tighter than the identical numeric gap between two plain links. */
  .site-nav__social-item {
    order: 1;
    /* No extra margin: the list gap already clears the CTA's pill border, which
       sits well below its text. Measured edge-to-edge, not text-to-text. */
    margin-top: 0;
  }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-cream);
}
.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hero slideshow.
   The incoming slide fades in ON TOP of the outgoing one, which is held fully
   opaque underneath (.is-prev, z-index 1). Cross-dissolving both at once would
   leave them each at ~50% over the section background mid-fade, which reads as
   a brightness dip rather than a fade.
   The push-in is a transition, not a keyframe animation: an animation cut off
   when the slide changes snaps its transform back, which is what made the
   change look jolty. A transition just eases to wherever it is told next. */
.hero__slides {
  overflow: hidden;
  /* Own stacking context, so the slides' z-indexes stay contained here and
     cannot paint over the scrim, the headline or the scroll cue. */
  z-index: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__slide.is-prev {
  opacity: 1;
  z-index: 1;
  transition: none;
}
.hero__slide.is-active {
  opacity: 1;
  z-index: 2;
}
.hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 3600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__slide.is-active img,
.hero__slide.is-prev img {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__slide img { transition: none; }
  .hero__slide img { transform: none; }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(10,10,8,0.82) 0%, rgba(10,10,8,0.32) 42%, rgba(10,10,8,0.12) 65%, rgba(10,10,8,0.35) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(4rem, 9vh, 7rem);
  padding-top: 8rem;
  padding-inline: var(--edge-pad);
  margin-inline: 0;
}
.hero__eyebrow {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  color: var(--color-cream);
  opacity: 0.85;
  margin-bottom: 1rem;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.hero__actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__scroll-bracket svg {
  width: 16px;
  aspect-ratio: 77.21 / 76.55;
  display: block;
  transform: rotate(-135deg);
}
.hero__scroll {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 2rem;
  color: var(--color-cream);
  opacity: 0.8;
  animation: bob 2.6s ease-in-out infinite;
}
.hero__scroll:hover { opacity: 1; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}
@media (max-width: 760px) {
  .hero__scroll { display: none; }
  /* The scroll cue is hidden here, so the padding that made room for it just
     leaves dead space under the buttons. */
  .hero__content { padding-bottom: 2.25rem; }
}

/* -------------------------------------------------------------------------
   Capabilities (USP row under the hero)
   ------------------------------------------------------------------------- */
.usp {
  position: relative;
  overflow: hidden;
  background: var(--color-cream);
  padding-block: clamp(4rem, 10vh, 7rem);
}
/* Oversized logo framing corners, bled off the top-right as a watermark. */
.usp::before {
  content: "";
  position: absolute;
  top: -5rem;
  right: -2.5rem;
  width: clamp(26rem, 50vw, 54rem);
  aspect-ratio: 260 / 211;
  background: url("../assets/logo/frame-corners.svg") no-repeat center / contain;
  transform: rotate(-10deg);
  opacity: 0.09;
  pointer-events: none;
}
.usp > .wrap {
  position: relative;
  z-index: 1;
}
.usp__kicker {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--color-accent);
}
.usp__lead {
  margin-top: 1rem;
  max-width: 26ch;
}
.usp__sub {
  margin-top: 1.15rem;
  max-width: 36rem;
  color: var(--color-text-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}
.usp__grid {
  list-style: none;
  margin: clamp(2.75rem, 7vh, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
.usp__item {
  min-width: 0;
  border-top: 1px solid rgba(52, 5, 2, 0.16);
  padding-top: 1.6rem;
}
.usp__icon {
  display: block;
  color: var(--color-accent);
}
.usp__icon svg {
  display: block;
  width: 38px;
  height: 38px;
}
.usp__title {
  margin-top: 1.15rem;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
}
.usp__body {
  margin-top: 0.85rem;
  color: var(--color-text-soft);
  font-size: 0.98rem;
  line-height: 1.62;
}
@media (max-width: 860px) {
  .usp__grid { grid-template-columns: 1fr; gap: 1.9rem; }
  .usp__lead { max-width: none; }
  /* Narrow screens leave the watermark nowhere to sit but behind the
     headline, where it muddies the type. Decorative, so drop it. */
  .usp::before { display: none; }
}

/* -------------------------------------------------------------------------
   Portfolio pillars
   ------------------------------------------------------------------------- */

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  height: 100vh;
  gap: 0;
}
.pillar {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: block;
  background: var(--color-charcoal-soft);
}
.pillar__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pillar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.pillar__media--cover {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar__bracket-art {
  color: var(--color-red);
  opacity: 0.9;
  width: 30%;
  transition: transform 0.8s var(--ease);
}
.pillar__bracket-art svg { width: 100%; height: auto; }
.pillar__bracket-art--light { color: var(--color-cream); }

.pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,8,0.86) 0%, rgba(10,10,8,0.05) 55%);
  transition: opacity .4s var(--ease);
}
.pillar:hover .pillar__media img,
.pillar:hover .pillar__bracket-art { transform: scale(1.06); }

.pillar__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.6rem clamp(1.2rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  color: var(--color-cream);
  gap: 0.8rem;
}
.pillar__index {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.7rem;
  aspect-ratio: 259.48 / 210.51;
  color: var(--color-accent);
}
.pillar__index-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pillar__index-num {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  font-size: 0.95rem;
}
.pillar__name {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  flex: 1;
}
.pillar__arrow {
  font-size: 1.3rem;
  transform: translateX(-6px);
  opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.pillar:hover .pillar__arrow { transform: translateX(0); opacity: 1; }

@media (max-width: 700px) {
  .portfolio__grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
}

.projects-portfolio .portfolio__grid { height: 100vh; }
@media (max-width: 700px) {
  .projects-portfolio .portfolio__grid { height: auto; }
  .projects-portfolio .pillar { height: 60vh; }
}

/* -------------------------------------------------------------------------
   About teaser
   ------------------------------------------------------------------------- */
.about-teaser {
  background: var(--color-cream);
  padding-block: clamp(4.5rem, 11vh, 8rem);
}
.about-teaser__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.about-teaser__media {
  border-radius: 6px;
  overflow: hidden;
}
.about-teaser__media img { width: 100%; height: 100%; object-fit: cover; }
.about-teaser__copy p { margin-top: 1.1rem; color: var(--color-text-soft); font-size: 1.05rem; max-width: 32rem; }
.about-teaser__copy .section-title { margin-top: 0.2rem; }

@media (max-width: 800px) {
  .about-teaser__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Enquiry
   ------------------------------------------------------------------------- */
.enquiry {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding-block: clamp(4.5rem, 11vh, 8rem);
}
.enquiry__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.enquiry .section-title { color: var(--color-cream); }
.enquiry__intro p { margin-top: 1rem; color: rgba(255,253,241,0.82); max-width: 28rem; }
.enquiry__direct { margin-top: 1.8rem !important; font-size: 0.95rem; }
.enquiry__direct a { font-weight: 700; color: var(--color-cream); border-bottom: 1.5px solid var(--color-accent); }

.enquiry__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.4rem;
}
/* The confirmation page has no hero above it, so it needs its own top space
   to clear the fixed header. */
.cat-intro--standalone {
  padding-top: clamp(9rem, 18vh, 13rem);
  min-height: 60svh;
}
.cat-intro a:not(.btn) {
  border-bottom: 1.5px solid var(--color-accent);
  font-weight: 700;
}

/* Honeypot. Off-screen rather than display:none -- some bots skip hidden
   fields but happily fill ones that are merely positioned away. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.form-row--full { grid-column: 1 / -1; }
.form-row--submit { display: flex; flex-direction: row; align-items: center; gap: 1.2rem; flex-wrap: wrap; }

.enquiry label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,253,241,0.85);
}
.enquiry label .optional { font-weight: 400; opacity: 0.7; }

.enquiry input,
.enquiry select,
.enquiry textarea {
  font: inherit;
  color: var(--color-cream);
  background: rgba(255,253,241,0.06);
  border: 1.5px solid rgba(255,253,241,0.25);
  border-radius: 8px;
  padding: 0.85em 1em;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.enquiry input::placeholder,
.enquiry textarea::placeholder { color: rgba(255,253,241,0.45); }
.enquiry input:focus,
.enquiry select:focus,
.enquiry textarea:focus {
  border-color: var(--color-accent);
  background: rgba(255,253,241,0.1);
  outline: none;
}
.enquiry select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23fffdf1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.6em;
}
.enquiry select option { color: var(--color-charcoal); }
.enquiry textarea { resize: vertical; min-height: 8rem; }

.form-status {
  font-size: 0.9rem;
  font-weight: 700;
}
.form-status[data-state="success"] { color: #b7d99a; }
.form-status[data-state="error"] { color: #f0a893; }

@media (max-width: 800px) {
  .enquiry__grid { grid-template-columns: 1fr; }
  .enquiry__form { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-accent);
  color: var(--color-cream);
  padding-block: 3.5rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo nav"
    "tag  tag"
    "copy copy";
  row-gap: 1.6rem;
  align-items: center;
}
.site-footer__logo { grid-area: logo; }
.site-footer__logo img { height: 40px; width: auto; }
.site-footer__nav {
  grid-area: nav;
  display: flex;
  justify-content: flex-end;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.9rem;
}
.site-footer__nav a:hover { color: var(--color-charcoal); }
.site-footer__social {
  display: inline-flex;
  align-items: center;
}
.site-footer__social svg {
  display: block;
  width: 20px;
  height: 20px;
  transition: opacity .35s var(--ease);
}
.site-footer__social:hover svg { opacity: 0.65; }
.site-footer__tagline {
  grid-area: tag;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}
.site-footer__tagline span {
  display: block;
  font-family: var(--font-body);
  text-transform: none;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255,253,241,0.75);
  margin-top: 0.35em;
  letter-spacing: 0;
}
.site-footer__copyright {
  grid-area: copy;
  color: rgba(255,253,241,0.75);
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "nav"
      "tag"
      "copy";
  }
  .site-footer__nav { justify-content: flex-start; }
}

/* -------------------------------------------------------------------------
   Category pages (Sports / Commercial)
   ------------------------------------------------------------------------- */
.cat-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-cream);
}
.cat-hero__media,
.cat-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* About hero only. The frame is portrait, so on a wide screen `cover` crops it
   top and bottom and a centred crop cuts the top of her head. Anchoring to the
   top keeps her face; on mobile the container is taller than the image is wide,
   so the crop runs horizontally instead and centred is already correct. */
@media (min-width: 761px) {
  .cat-hero__media--top img { object-position: top; }
}
.cat-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,8,0.78) 0%, rgba(10,10,8,0.2) 55%, rgba(10,10,8,0.05) 100%);
}
.cat-hero__content {
  position: relative;
  z-index: 1;
  padding-inline: var(--edge-pad);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  padding-top: 8rem;
}
.cat-hero__kicker {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 0.9rem;
}
.cat-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  line-height: 0.95;
  max-width: 18ch;
}

.cat-intro {
  /* Edge padding lives here, on the full-width parent, not on the
     max-width child below. Padding + max-width on the SAME element fight
     each other under box-sizing:border-box: once --edge-pad grows past
     max-width on wide screens, the child's content box gets crushed
     toward zero (confirmed at a plain 1920px desktop, not just ultrawide).
     Splitting them like this means neither can starve the other. */
  background: var(--color-cream);
  padding-block: clamp(4rem, 10vh, 7rem);
  padding-inline: var(--edge-pad);
  display: flex;
  justify-content: center;
}
.cat-intro__inner {
  width: 100%;
  max-width: 56rem;
  min-width: 0;
}
@media (min-width: 700px) {
  .cat-intro__inner { min-width: min(600px, 100%); }
}
.cat-intro p {
  margin-top: 1.2rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-text);
}
.cat-intro p:first-child { margin-top: 0; }

/* -------------------------------------------------------------------------
   Gear list (About)
   Lives inside the dark .about-credit band, under the broadcast logos, where
   the stat row used to sit. Deliberately a spec list rather than a second set
   of the homepage's icon cards: term left, detail right, hairline between.
   ------------------------------------------------------------------------- */
.about-credit__kicker--gear {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.gear__list {
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
.gear__item {
  min-width: 0;
}
.gear__icon {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--color-accent);
}
.gear__icon svg {
  display: block;
  width: 32px;
  height: 32px;
}
.gear__item dt {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.gear__item dd {
  margin: 0.7rem 0 0;
  color: rgba(255, 253, 241, 0.75);
  font-size: 0.96rem;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .gear__list { grid-template-columns: 1fr; gap: 2rem; }
}

.about-credit {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding-block: clamp(3.5rem, 8vh, 6rem);
}
.about-credit__inner {
  padding-inline: var(--edge-pad);
}
.about-credit__kicker {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--color-accent);
  margin-bottom: 1.4rem;
}
.about-credit__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid rgba(255, 253, 241, 0.15);
}
.about-credit__logos img {
  height: 26px;
  width: auto;
  opacity: 0.95;
}
@media (max-width: 700px) {
  .about-credit__logos { gap: 2rem 2.5rem; }
  .about-credit__logos img { height: 22px; }
}

.cat-gallery {
  background: var(--color-cream);
  padding: 28px;
}
/* Row-justified gallery: JS (gallery.js) measures each item's real
   aspect-ratio (already on the element via style="aspect-ratio:…") and
   sets an explicit height + flex-basis per row so every row's items sum
   to exactly the container width -- no stretching, no object-fit crop.
   Until JS runs, fall back to the old flex-wrap behaviour so the grid
   isn't broken (e.g. JS disabled) -- see .gallery-item below. */
.cat-gallery__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gallery-item {
  display: block;
  height: clamp(260px, 28vw, 460px);
  flex-grow: 1;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
/* Once JS has computed a row layout, each item's own height/flex-basis
   (set inline by gallery.js) take over -- this is the no-JS/pre-layout
   fallback only. Flexbox's own `gap` (above) provides the spacing in both
   states, so the JS's row-width math (which subtracts `gap * (n-1)` per
   row) stays accurate -- a margin-based gap would add space at each row's
   outer edges too, which the JS doesn't account for. */
.cat-gallery__grid.is-justified .gallery-item {
  flex-grow: 0;
  height: auto;
}
/* cover, not fill: once JS has sized each element to its own true ratio
   there's nothing left to crop, so cover and fill look identical -- but
   cover degrades safely (a hair of crop) rather than visibly squashing the
   image if a width is ever a pixel or two off. */
.gallery-item img,
.gallery-item__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10,6,4,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
}
.lightbox__stage img,
.lightbox__stage video {
  max-width: 100%;
  max-height: calc(100svh - 4rem);
  display: block;
  margin-inline: auto;
  object-fit: contain;
}
.lightbox__close,
.lightbox__nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  background: rgba(255,253,241,0.1);
  border: 1px solid rgba(255,253,241,0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255,253,241,0.22); }
.lightbox__close {
  top: clamp(1rem, 3vh, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 44px;
  height: 44px;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}
.lightbox__nav--prev { left: clamp(0.5rem, 3vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.5rem, 3vw, 1.5rem); }
@media (max-width: 700px) {
  .lightbox__nav { display: none; }
}