/* ============================================
   Base — reset + global
   Concatenated verbatim, in the exact order these files were linked from
   index.html. Nothing was edited: the cascade depends on this order.
   ============================================ */

/* ---------- reset.css ---------- */
/* ============================================
   CSS Reset / Normalize
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
}

p {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
}

/* Remove animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- global.css ---------- */
/* ============================================
   Global Styles & Utilities
   ============================================ */

/* ---- Typeface ----
   Inter, self-hosted. It has to be the VARIABLE font, not static instances:
   the stylesheets ask for font-weight 720, 760, 780, 820, 840, 850 and 860 in
   nine places, and static cuts would round every one of them to the nearest
   hundred and change the typography.

   One file, latin subset (U+0000-00FF covers every accented character Spanish
   needs), 47 KB, whole 100-900 weight axis.

   No metric-adjusted fallback face. That technique needs its family appended to
   --font-primary, which this change is not allowed to touch, and a single
   size-adjust cannot be right everywhere: measured against Inter it is 106.61%
   for Segoe UI but 112.24% for Helvetica Neue. The file is preloaded from the
   same origin, so the swap window is short, and index.html measures CLS 0.0001
   either way. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-variable.3100e775e8.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

/* ---- Section Spacing ---- */
.section {
  padding-block: var(--space-section);
}

.section--no-top {
  padding-top: 0;
}

.section--no-bottom {
  padding-bottom: 0;
}

/* ---- Typography Utilities ---- */
.text-muted {
  color: var(--color-text-muted);
}

.text-white {
  color: var(--color-white);
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.text-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

/* ---- Links ---- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: gap var(--duration-normal) var(--ease-out);
}

.link-arrow::after {
  content: '→';
  transition: transform var(--duration-normal) var(--ease-out);
}

.link-arrow:hover {
  gap: var(--space-3);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-out);
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-gray-800);
  transform: translateY(-1px);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-gray-300);
}

.btn--outline:hover {
  border-color: var(--color-black);
}

.btn--accent {
  background-color: var(--color-primary);
  color: var(--color-navy);
}

.btn--accent:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* ---- Divider ---- */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
}

/* ---- Scroll Reveal Animations ----
   The hidden state is scoped to `.js-reveal` on <html>, which only the reveal
   bootstrap in index.html adds. Nothing here hides content on its own, so a
   blocked script, a load error or a client without IntersectionObserver leaves
   a readable page instead of a header above four empty sections.

   Same contract and same class name as css/lp.css, which already works this
   way. The state class differs (`revealed` here, `is-in` there) because
   js/animations.js and js/main.js both write this one. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

.js-reveal .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal .reveal-delay-1 { transition-delay: 100ms; }
.js-reveal .reveal-delay-2 { transition-delay: 200ms; }
.js-reveal .reveal-delay-3 { transition-delay: 300ms; }
.js-reveal .reveal-delay-4 { transition-delay: 400ms; }

/* Belt and braces: the bootstrap already refuses to add the class under
   reduced motion, but if it ever gets there anyway the content stays put. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---- Visually Hidden (Accessibility) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ---- Body overlay when mobile menu open ---- */
body.menu-open {
  overflow: hidden;
}

/* ---- Skip Navigation Link (Accessibility) ---- */
.skip-nav {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-3) var(--space-6);
  /* The skip link is the first thing a keyboard visitor meets, so it is the
     last place to spend a 2.87:1 gold-on-navy pair. Plate and its own ink:
     14.79:1, and it reads as a pressed plate rather than a highlighter. */
  background-color: var(--plate);
  color: var(--plate-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: 0;
  z-index: 10000;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-nav:focus {
  top: var(--space-4);
}

/* ---- Focus Visible (Accessibility) ----
   The two-sided rule of direction.md §5.4.1, and the reason it exists: raw
   gold is 1.36:1 on paper — under half of what SC 1.4.11 requires — so the
   ring cannot be one colour across both grounds. On paper the core is ink
   (15.45:1) with a paper halo; on the plate it inverts to raw gold (10.89:1)
   with an ink halo. The halo is cut from the ground it sits on, not from
   white: a neutral-white halo on warm paper reads as a rendering artefact. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(237, 233, 225, 0.9);
  border-radius: 0;
}

/* On the dark acts the pair inverts: gold core, ink halo. Raw --gold here,
   never the aged cut — aged gold on the plate is the weak half of the pair. */
.hero :focus-visible,
.showreel :focus-visible,
.news :focus-visible,
.faq :focus-visible,
.footer :focus-visible,
.header:not(.scrolled) :focus-visible {
  outline-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(25, 23, 18, 0.9);
}

/* ---- Newsletter Success ---- */
.footer__newsletter-success {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-3) 0;
}