/* ==========================================================================
   Red 4 Digital — design system
   --------------------------------------------------------------------------
   Light and open by default, with white and warm off-white alternating band by
   band so the page is easy to scan on the way down.

   Four colours only — red, gold, black, white. Black is reserved for the hero
   alone, where it works as a translucent veil over the photograph rather than
   a flat fill. Every other dark area — the opportunity band, the closing call
   to action, the footer — is built from the bronze end of the gold scale, so
   the page reads as one warm family instead of black with gold laid on top.

   Red carries action; gold carries emphasis and numbers. The research behind
   this rebuild found the entire AI-consultancy category sitting in corporate
   blue, so the red is a deliberate differentiator, not decoration.
   ========================================================================== */

:root {
  /* Brand */
  --red: #c41e25;
  --red-dark: #a3161c;
  --red-tint: #fdf2f2;
  --gold: #b08420;
  --gold-bright: #d9ad3f;
  --gold-tint: #fbf6e9;

  /* A full gold scale, dark end first. Black is now reserved for the hero
     alone; every other dark band and the footer are built from these, so the
     page reads as one warm family rather than as black with gold on top.
     The deep end is a true bronze — dark enough for white text at AA, warm
     enough that it never reads as grey. */
  --gold-950: #1d1508;
  --gold-900: #2a1f0f;
  --gold-850: #34270f;
  --gold-800: #43310f;
  --gold-700: #5c4313;
  --gold-600: #7d5c18;
  --gold-300: #e8c877;
  --gold-200: #f0dda8;

  /* Lines and muted text on the gold bands, tinted warm rather than neutral. */
  --on-gold-line: rgba(232, 200, 119, 0.18);
  --on-gold-muted: #cdbb94;

  /* Neutrals, all mixed toward the brand black rather than pure grey */
  --ink: #0b0b0c;
  --ink-soft: #1b1b1f;
  --text: #17171b;
  --text-muted: #5c5c66;
  --text-faint: #8a8a93;
  --line: #e5e3df;
  --line-strong: #d2cfc9;
  --paper: #ffffff;
  --paper-alt: #f7f6f3;
  --paper-warm: #f2efe9;

  /* On dark */
  --on-dark: #ffffff;
  --on-dark-muted: #a9a9b2;
  --on-dark-line: rgba(255, 255, 255, 0.14);

  --wrap: 1240px;
  --wrap-narrow: 820px;
  --radius: 4px;
  --radius-lg: 8px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 1px 2px rgba(11, 11, 12, 0.04), 0 8px 24px rgba(11, 11, 12, 0.06);
  --shadow-float: 0 4px 12px rgba(11, 11, 12, 0.08), 0 24px 64px rgba(11, 11, 12, 0.18);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--red);
}

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}

/* The small uppercase label that opens most sections. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--red); flex: none;
}
.on-dark .eyebrow { color: var(--gold-300); }
.on-dark .eyebrow::before { background: var(--gold-300); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 44px, var(--wrap-narrow)); margin-inline: auto; }

.band { padding-block: clamp(64px, 8vw, 118px); }
.band--alt { background: var(--paper-alt); }
.band--warm { background: var(--paper-warm); }
.band--tight { padding-block: clamp(44px, 5vw, 72px); }

/* The dark bands are bronze-gold, not black. A slow diagonal gradient across
   the gold scale keeps a full-width band from going flat. */
.band--gold {
  background: linear-gradient(165deg, var(--gold-900) 0%, var(--gold-850) 45%, var(--gold-800) 100%);
  color: var(--on-dark);
}

.on-dark, .band--gold { color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark .lead, .on-dark p { color: var(--on-gold-muted); }

.section-head { max-width: 760px; margin-bottom: clamp(38px, 5vw, 62px); }
.section-head h2 + .lead { margin-top: 18px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-soft); }

.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #96701a; }

.btn--line { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* The hero is dark but is not marked .on-dark — the white offer card lives
   inside it and must keep its light styling. Buttons are called out directly. */
.on-dark .btn--line,
.hero .btn--line { border-color: var(--on-dark-line); color: #fff; }
.on-dark .btn--line:hover,
.hero .btn--line:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 18px 32px; font-size: 1rem; }

/* Inline text link with an arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 0.92rem;
  color: var(--red);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), gap 0.2s var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: 11px; }
.link-arrow svg { width: 15px; height: 15px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; height: 76px;
}
.header-logo img { height: 34px; width: auto; }

.nav-main { display: flex; align-items: center; gap: 4px; }
.nav-main a {
  padding: 9px 14px; border-radius: var(--radius);
  font-size: 0.94rem; font-weight: 500; color: var(--text);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-main a:hover { background: var(--paper-alt); color: var(--ink); }
.nav-main a[aria-current="page"] { color: var(--red); font-weight: 600; }

.header-right { display: flex; align-items: center; gap: 14px; }
.header-phone {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 0.92rem; color: var(--ink); white-space: nowrap;
}
.header-phone:hover { color: var(--red); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 9px; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 1040px) {
  .nav-main, .header-phone { display: none; }
  .nav-toggle { display: block; }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed; inset: 76px 0 0; z-index: 99;
  background: var(--paper);
  padding: 28px 22px 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.nav-drawer.open { opacity: 1; visibility: visible; transform: none; }
.nav-drawer a {
  display: block; padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.22rem; font-weight: 600;
}
.nav-drawer .btn { margin-top: 26px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  /* The black is a translucent veil rather than a wash over a faded picture:
     the image runs at full strength underneath and this controls how much
     shows through. Heaviest on the left where the headline sits, lifting
     across to the right so the photograph reads around the offer card.
     The lightest stop is still 0.40, which keeps white text on the right-hand
     side of the band above AA. */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(11, 11, 12, 0.93) 0%,
    rgba(11, 11, 12, 0.88) 32%,
    rgba(11, 11, 12, 0.66) 62%,
    rgba(11, 11, 12, 0.40) 100%);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: var(--ink);
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* Favours the right of the frame, where the software on screen actually is. */
  object-position: 60% center;
}

/* A single hairline of red along the top edge — the brand, stated quietly. */
.hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 38%, var(--gold) 38%, var(--gold) 52%, transparent 52%);
  z-index: 2;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 108px);
}
.hero-copy h1 { color: #fff; margin-bottom: 24px; }
.hero-copy h1 em { color: var(--gold-bright); }
.hero-copy .lead { color: var(--on-dark-muted); font-size: clamp(1.05rem, 1.4vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* The white offer card, floated over the dark band. */
.offer-card {
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: clamp(26px, 3vw, 36px);
  border-top: 4px solid var(--red);
}
.offer-card .eyebrow { color: var(--red); margin-bottom: 12px; }
.offer-card h2 {
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  color: var(--ink);
  margin-bottom: 16px;
}
.offer-price {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.offer-price .amount {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.offer-price .note { font-size: 0.88rem; color: var(--text-muted); }
.offer-card p { font-size: 0.96rem; color: var(--text-muted); margin-bottom: 18px; }

.offer-guarantee {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--gold-tint);
  border-left: 3px solid var(--gold);
  padding: 14px 16px; margin-bottom: 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.offer-guarantee svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }
.offer-guarantee strong {
  font-size: 0.93rem; font-weight: 600; color: var(--ink); line-height: 1.5;
}
.offer-foot {
  font-size: 0.83rem; color: var(--text-faint);
  margin: 14px 0 0; text-align: center;
}

/* Trust bar under the hero */
.trust-bar {
  border-top: 1px solid var(--on-dark-line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust-item { padding: 26px 26px 30px; }
.trust-item + .trust-item { border-left: 1px solid var(--on-dark-line); }
.trust-item .value {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 700;
  letter-spacing: -0.02em; color: var(--gold-bright); margin-bottom: 7px;
}
.trust-item .label { font-size: 0.88rem; color: var(--on-dark-muted); line-height: 1.5; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(3) { border-left: none; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--on-dark-line); }
}
@media (max-width: 560px) {
  .trust-bar { grid-template-columns: 1fr; }
  .trust-item + .trust-item { border-left: none; border-top: 1px solid var(--on-dark-line); }
}

/* ── Cards & grids ───────────────────────────────────────────────────────── */
/* Explicit column counts rather than auto-fit. auto-fit decides the count from
   available width, which orphaned the fourth service card into a row of its
   own at desktop widths — four items in a three-column grid. Fixed counts with
   named breakpoints keep every grid balanced at every size. */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
.grid > * { background: var(--paper); padding: clamp(26px, 2.8vw, 38px); }
.band--alt .grid > * { background: var(--paper-alt); }

/* Numbered service card — the 01/02/03 pattern */
.svc-card { display: flex; flex-direction: column; position: relative; transition: background 0.25s var(--ease); }
.svc-card:hover { background: var(--red-tint); }
.svc-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--red); margin-bottom: 16px;
}
.svc-card h3 { margin-bottom: 12px; }
.svc-card p { color: var(--text-muted); font-size: 0.97rem; margin-bottom: 20px; flex: 1; }

/* Promise / feature tiles */
.tile h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 11px; }
.tile h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.tile p { color: var(--text-muted); font-size: 0.97rem; }

/* Stat tiles */
.stat .value {
  display: block; font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--gold); line-height: 1; margin-bottom: 14px;
}
/* On bronze the mid gold disappears — the figures need the light end. */
.band--gold .stat .value { color: var(--gold-300); }
.stat p { font-size: 0.95rem; color: var(--text-muted); }
.band--gold .stat p { color: var(--on-gold-muted); }

/* ── AI model strip ──────────────────────────────────────────────────────── */
.models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 1000px) { .models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .models { grid-template-columns: 1fr; } }
.model { background: var(--paper); padding: 30px 28px; }
.model-name {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px;
}
.model-name strong {
  font-family: "Space Grotesk", sans-serif; font-size: 1.15rem;
  font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.model-name span { font-size: 0.8rem; color: var(--text-faint); }
.model p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
.model::before {
  content: ""; display: block; width: 34px; height: 3px;
  background: var(--red); margin-bottom: 18px;
}
.model:nth-child(even)::before { background: var(--gold); }

/* ── Split comparison (the opportunity band) ─────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--on-gold-line); border: 1px solid var(--on-gold-line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split-side { background: rgba(29, 21, 8, 0.55); padding: clamp(26px, 3vw, 40px); }
.split-side--win { background: linear-gradient(160deg, rgba(232, 200, 119, 0.14), rgba(232, 200, 119, 0.02)); }
.split-side h3 {
  font-family: "Space Grotesk", sans-serif; font-size: 1.15rem;
  margin-bottom: 20px; color: #fff;
}
.split-side--lose h3 { color: var(--on-gold-muted); }
.split-side li {
  padding: 12px 0 12px 28px; position: relative;
  border-top: 1px solid var(--on-gold-line);
  color: var(--on-gold-muted); font-size: 0.96rem; line-height: 1.6;
}
.split-side li:first-child { border-top: none; }
.split-side li::before {
  position: absolute; left: 0; top: 12px; font-weight: 700; font-size: 1rem;
}
.split-side--lose li::before { content: "↓"; color: #8a7a5a; }
.split-side--win li::before { content: "↑"; color: var(--gold-300); }
.split-side--win li { color: #efe6d2; }

.punch { margin-top: clamp(40px, 5vw, 66px); max-width: 900px; }
.punch p:first-child {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.35rem, 2.7vw, 2rem); line-height: 1.35;
  letter-spacing: -0.02em; color: #fff; font-weight: 500; margin-bottom: 16px;
}
.punch p + p { color: var(--on-dark-muted); max-width: 62ch; }

/* ── Proof ───────────────────────────────────────────────────────────────── */
.client-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 900px) { .client-list { grid-template-columns: 1fr; } }
.client { background: var(--paper); padding: clamp(24px, 2.6vw, 34px); }
.client h3 { font-size: 1.08rem; margin-bottom: 10px; }
.client h3::after {
  content: ""; display: block; width: 30px; height: 2px;
  background: var(--gold); margin-top: 12px;
}
.client p { font-size: 0.93rem; color: var(--text-muted); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 22px; }
.product {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--paper);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.product:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.product-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-warm); }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 22px 24px 26px; }
.product-body h3 { font-size: 1.08rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.product-body h3 svg { width: 15px; height: 15px; color: var(--text-faint); }
.product-body p { font-size: 0.93rem; color: var(--text-muted); }

/* ── Tech stack chips ────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 9px 16px; border: 1px solid var(--line-strong);
  border-radius: 100px; font-size: 0.88rem; font-weight: 500;
  color: var(--text-muted); background: var(--paper);
}
.band--gold .chip, .on-dark .chip {
  border-color: var(--on-gold-line); color: var(--on-gold-muted); background: transparent;
}

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 18px; }
.cta-band .lead { margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 32px; }
.cta-band .link-arrow { color: var(--gold-bright); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(180deg, var(--gold-900) 0%, var(--gold-950) 100%);
  color: var(--on-gold-muted);
  padding-block: clamp(52px, 6vw, 80px) 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(28px, 3vw, 48px);
  padding-bottom: 48px;
}
.footer-brand img { height: 32px; margin-bottom: 18px; }
.footer-brand p { font-size: 0.92rem; line-height: 1.7; max-width: 38ch; }
.footer-col h5 {
  font-family: "Space Grotesk", sans-serif; font-size: 0.78rem;
  font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: #fff; margin-bottom: 16px;
}
.footer-col li { margin-bottom: 10px; font-size: 0.91rem; line-height: 1.6; }
.footer-col a:hover { color: #fff; }

.footer-four {
  border-top: 1px solid var(--on-gold-line);
  padding-block: 32px;
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: start;
}
.footer-four h5 {
  font-family: "Space Grotesk", sans-serif; font-size: 0.78rem;
  font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-bright);
}
.footer-four p { font-size: 0.89rem; line-height: 1.7; max-width: 74ch; }

.footer-bottom {
  border-top: 1px solid var(--on-gold-line);
  padding-block: 26px 34px;
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  justify-content: space-between; font-size: 0.84rem;
}
.footer-bottom a:hover { color: #fff; }

@media (max-width: 700px) {
  .footer-four { grid-template-columns: 1fr; }
}

/* ── Reveal on scroll ─────────────────────────────────────────────────────
   Gated behind the .js class, which the inline script sets before first paint.
   Without it every .reveal stays fully visible — so a JS error, a blocked
   script or a text-only browser can never leave the page blank below the fold.
   The content is in the HTML either way; only the animation is conditional. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}