/* ============================================================
   SELF-HOSTED WEBFONTS
   Fonts served from /fonts/ on this server — nothing leaves
   the visitor's browser to Google or any third party.
   The browser only downloads the latin-ext file if a character
   requires it (£, é, smart quotes, em-dash, etc).
   ============================================================ */

/* Archivo Black — single weight 400 (the only weight it has) */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-latin-400-normal.woff2') format('woff2');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bebas Neue — single weight 400 */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Crimson Pro — 400 (regular), 600 (semibold), 400 italic */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-pro-latin-400-normal.woff2') format('woff2');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-pro-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-pro-latin-400-italic.woff2') format('woff2');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-pro-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/crimson-pro-latin-600-normal.woff2') format('woff2');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/crimson-pro-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — 500 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   NORWICH & DISTRICT TRADES UNION COUNCIL — STYLESHEET
   ============================================================
   Sections:
     1. Design tokens (CSS variables)
     2. Base reset & body
     3. Navigation
     4. Hero
     5. Scrolling ticker
     6. Generic section styling
     7. "Who We Are" section
     8. "Why Affiliate" section (dark)
     9. Meetings section
    10. Affiliated unions section
    11. CTA band (red)
    12. Footer
    13. Animations
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ------------------------------------------------------------
   Change these to retheme the whole site at once.
   ============================================================ */
:root {
  --red:      #c41e1e;   /* primary brand red */
  --red-deep: #8a1414;   /* shadows / depth */
  --cream:    #faf6ec;   /* page background */
  --ink:      #1a1a1a;   /* body text & dark sections */
  --paper:    #f1ebd9;   /* alt section background */
  --gold:     #e8b923;   /* accent (used sparingly) */
}


/* ============================================================
   2. BASE RESET & BODY
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
  /* subtle paper-texture wash from radial gradients */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(196,30,30,0.04) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(26,26,26,0.04) 0, transparent 50%);
}


/* ============================================================
   3. NAVIGATION  (sticky black bar at the top of every section)
   ============================================================ */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 4px solid var(--red);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.nav-brand {
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: 0.05em;
  font-size: 18px;
  text-transform: uppercase;
}
.nav-brand span { color: var(--red); }

.nav-links { display: flex; gap: 28px; }
.nav-links a {
  color: var(--cream);
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  font-size: 15px;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--red); }
.nav-links a::after {  /* animated underline on hover */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }

/* hide nav links on narrow screens (could be replaced with a burger menu later) */
@media (max-width: 640px) {
  .nav-links { display: none; }
}


/* ============================================================
   4. HERO  (top section with headline + logo)
   ============================================================ */
.hero {
  position: relative;
  padding: 80px 28px 100px;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  /* faded B&W photo of strikers sits behind everything, with a cream
     wash on top to keep the text comfortably readable */
  background-image:
    linear-gradient(rgba(250,246,236,0.88), rgba(250,246,236,0.92)),
    url('../images/strikers.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
/* decorative diagonal red stripes in the background */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0%, transparent 70%, var(--red) 70%, var(--red) 73%, transparent 73%),
    linear-gradient(135deg, transparent 0%, transparent 78%, var(--red-deep) 78%, var(--red-deep) 80%, transparent 80%);
  opacity: 0.18;
  pointer-events: none;
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* "Norfolk's Voice of Organised Labour" pill above headline */
.eyebrow {
  display: inline-block;
  background: var(--red);
  color: var(--cream);
  padding: 6px 14px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.15em;
  font-size: 14px;
  margin-bottom: 24px;
  transform: rotate(-1deg);  /* slight tilt for handmade feel */
}

h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(44px, 7.5vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
h1 .accent    { color: var(--red); display: block; }
h1 .underline {
  display: inline-block;
  border-bottom: 6px solid var(--ink);
  padding-bottom: 2px;
}

.hero-lede {
  font-size: 22px;
  max-width: 520px;
  margin-bottom: 36px;
  font-style: italic;
  line-height: 1.45;
}

/* CTA buttons row */
.cta-group { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 16px 32px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  font-size: 17px;
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid var(--ink);
  border-radius: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.btn-primary {
  background: var(--red);
  color: var(--cream);
  box-shadow: 8px 8px 0 var(--ink);  /* hard offset shadow */
}
.btn-primary:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--ink);
}
.btn-secondary {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--red);
}
.btn-secondary:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--red);
}

/* hero logo image */
.hero-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-logo img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}


/* ============================================================
   5. SCROLLING TICKER  ("Educate · Agitate · Organise")
   ============================================================ */
.ticker {
  background: var(--ink);
  color: var(--cream);
  padding: 14px 0;
  overflow: hidden;
  border-top: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
}
.ticker-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.15em;
  font-size: 18px;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 60px; }
.ticker-track span::after { content: '★'; color: var(--red); }

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   6. GENERIC SECTION STYLING
   ============================================================ */
section { padding: 90px 28px; position: relative; }
.section-inner { max-width: 1200px; margin: 0 auto; }

/* small monospaced label that prefixes each section heading */
.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--red);
}

h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 40px;
}


/* ============================================================
   7. "WHO WE ARE" SECTION
   ============================================================ */
.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 880px) { .who-grid { grid-template-columns: 1fr; gap: 40px; } }

.who-text p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 20px;
}
/* drop-cap on the first paragraph */
.who-text p:first-of-type::first-letter {
  font-family: 'Archivo Black', sans-serif;
  font-size: 72px;
  float: left;
  line-height: 0.85;
  padding: 6px 12px 0 0;
  color: var(--red);
}

/* stat cards stack (right side of Who We Are) */
.stat-stack { display: flex; flex-direction: column; gap: 24px; }
.stat {
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  text-align: center;
  position: relative;
  background: var(--cream);
  box-shadow: 8px 8px 0 var(--ink);   /* hard offset block shadow */
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--red);  /* deeper, switches to red on hover */
}

.stat-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 64px;
  line-height: 1;
  color: var(--red);
  margin-bottom: 8px;
}
.stat-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  font-size: 16px;
  text-transform: uppercase;
}


/* ============================================================
   8. "WHY AFFILIATE" SECTION  (dark / reversed)
   ============================================================ */
.why {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.why::before {  /* large soft red disc top-right */
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: var(--red);
  border-radius: 50%;
  opacity: 0.12;
}
.why .section-label          { color: var(--red); }
.why .section-label::before  { background: var(--red); }
.why h2                      { color: var(--cream); }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 20px;
}
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }

.pillar { border-top: 4px solid var(--red); padding-top: 24px; }
.pillar-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 12px;
}
.pillar h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pillar p { color: rgba(250,246,236,0.85); }


/* ============================================================
   9. MEETINGS SECTION
   ============================================================ */
.meetings-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 880px) { .meetings-grid { grid-template-columns: 1fr; } }

.meeting-card {
  background: var(--red);
  color: var(--cream);
  padding: 48px 40px;
  border-radius: 20px;
  position: relative;
  box-shadow: 10px 10px 0 var(--ink);  /* hard offset block-shadow */
}
.meeting-day {
  font-family: 'Archivo Black', sans-serif;
  font-size: 48px;
  line-height: 1;
  margin-bottom: 6px;
}
.meeting-time {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 2px solid rgba(250,246,236,0.3);
}
.meeting-detail { font-size: 17px; line-height: 1.55; }
.meeting-detail strong {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
}


/* ============================================================
   9a. BANNER FEATURE  (the physical TU banner with brief history)
   ============================================================ */
.banner-feature {
  background: var(--ink);
  color: var(--cream);
  padding: 80px 28px;
}
.banner-feature .section-label          { color: var(--red); }
.banner-feature .section-label::before  { background: var(--red); }
.banner-feature h2                      { color: var(--cream); }

.banner-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 880px) { .banner-grid { grid-template-columns: 1fr; } }

.banner-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 12px 12px 0 var(--red);
}
.banner-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.banner-text p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: rgba(250,246,236,0.85);
}
.banner-text strong {
  color: var(--cream);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  font-size: 19px;
}


/* ============================================================
  10. AFFILIATED UNIONS SECTION  (chip list)
   ============================================================ */
.unions {
  background: var(--paper);
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}.union-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 30px;
}

/* Each button is a link. Buttons share a fixed shape so the
   grid stays tidy regardless of label length. The arrow fades
   in on hover/focus to signal it's an external link. */
.union-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 14px 20px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  min-height: 56px;
  transition: transform 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 5px 5px 0 var(--ink);
}
.union-button:hover,
.union-button:focus-visible {
  background: var(--ink);
  color: var(--cream);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--red);
  outline: none;
}
.union-button-label {
  flex: 1;
  /* allow long labels (e.g. "Musicians' Union") to wrap nicely */
  line-height: 1.1;
}
.union-button-arrow {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 22px;
  line-height: 1;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.15s, transform 0.15s;
  margin-left: 8px;
}
.union-button:hover .union-button-arrow,
.union-button:focus-visible .union-button-arrow {
  opacity: 1;
  transform: translate(0, 0);
}


/* ============================================================
  11. CTA BAND  (big red "Affiliate your branch" block)
   ============================================================ */
.cta-band {
  background: var(--red);
  color: var(--cream);
  padding: 80px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* decorative ring outlines either side */
.cta-band::before, .cta-band::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 200px;
  height: 200px;
  border: 8px solid rgba(250,246,236,0.1);
  border-radius: 50%;
  transform: translateY(-50%);
}
.cta-band::before { left: -100px; }
.cta-band::after  { right: -100px; }

.cta-band h2 { color: var(--cream); margin-bottom: 20px; position: relative; }
.cta-band p {
  font-size: 22px;
  font-style: italic;
  max-width: 600px;
  margin: 0 auto 36px;
  position: relative;
}
.cta-band .btn {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
  box-shadow: 6px 6px 0 var(--ink);
  position: relative;
}
.cta-band .btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}


/* ============================================================
  12. FOOTER
   ============================================================ */
footer {
  background: var(--ink);
  color: var(--cream);
  padding: 60px 28px 30px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; } }

.footer-brand {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  line-height: 1.1;
}
.footer-brand span { color: var(--red); }
.footer-tag {
  font-style: italic;
  color: rgba(250,246,236,0.7);
  max-width: 380px;
}

.footer-col h4 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.12em;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.footer-col a,
.footer-col p {
  color: rgba(250,246,236,0.85);
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  word-break: break-word;
  font-size: 15px;
}
.footer-col a:hover { color: var(--red); text-decoration: underline; }

.footer-bottom {
  max-width: 1200px;
  margin: 50px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(250,246,236,0.15);
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(250,246,236,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 10px;
}


/* ============================================================
  13. ANIMATIONS  (page-load fade/rise sequence on the hero)
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise   { animation: rise 0.8s ease-out 0s    both; }
.rise-2 { animation: rise 0.8s ease-out 0.15s both; }
.rise-3 { animation: rise 0.8s ease-out 0.30s both; }
.rise-4 { animation: rise 0.8s ease-out 0.45s both; }