/* ── LOCAL FONTS (GDPR-compliant — no external requests) ── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('cormorant-garamond.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('cormorant-garamond-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('dm-sans.woff2') format('woff2');
}

:root {
  --navy:   #0E1525;
  --navy2:  #151F35;
  --navy3:  #1C2A45;
  --gold:   #B8966A;
  --gold2:  #D4AF80;
  --cream:  #F5F0E8;
  --white:  #FFFFFF;
  --grey:   #8A8F9E;
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'DM Sans', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--navy);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

/* ── NOISE TEXTURE ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── NAV ──
   Frosted-glass bar: blurred backdrop + semi-opaque navy gradient.
   Stays readable over any underlying content (dark sections, photos,
   gold manifesto strip) because the blur neutralises whatever is behind it.
   Hides on scroll-down, reappears on scroll-up (see .nav-hidden and script.js).
   Always fully visible when scrollY === 0. */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  /* Constant height in both states → no layout shift / jitter on scroll.
     Uses the "scrolled" padding permanently so only the background,
     border, and translateY change between states. */
  padding: 14px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(
    to bottom,
    rgba(14,21,37,0.88) 0%,
    rgba(14,21,37,0.72) 100%
  );
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(184,150,106,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.3s ease,
    border-color 0.3s ease;
  will-change: transform;
}

/* Denser background once the user has scrolled past the hero top.
   Makes the bar noticeably crisper without changing its color family.
   IMPORTANT: never change height/padding here — that would cause jitter. */
nav.nav-scrolled {
  background: linear-gradient(
    to bottom,
    rgba(14,21,37,0.94) 0%,
    rgba(14,21,37,0.82) 100%
  );
  border-bottom-color: rgba(184,150,106,0.18);
}

/* Hide nav by sliding it up. `transform` is GPU-friendly so this stays 60fps. */
nav.nav-hidden { transform: translateY(-100%); }

/* When the mobile menu is open we want the nav bar to lose its gradient
   (the overlay already paints the background) and fade the nav-logo so
   it doesn't compete with the mobile-nav's own centered logo. Also make
   sure the nav is visible even if the user opened the menu after scrolling
   down (which would otherwise have left the bar hidden). */
body.menu-open nav {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none !important;
}
body.menu-open .nav-logo { opacity: 0; pointer-events: none; }

.nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
  line-height: 0;
}

.nav-logo img {
  display: block;
  height: 38px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.nav-links a:hover { opacity: 1; }

.nav-cta {
  background: var(--gold);
  color: var(--navy) !important;
  padding: 8px 20px;
  font-weight: 600 !important;
  opacity: 1 !important;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover {
  background: var(--gold2);
  transform: translateY(-1px);
}

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  position: relative;
  z-index: 201;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--cream);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV OVERLAY ── */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14,21,37,0.98);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav.open {
  display: flex;
  opacity: 1;
}

.mobile-nav a {
  font-family: var(--sans);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.mobile-nav a:hover { color: var(--gold); }

.mobile-nav-cta {
  display: inline-block;
  margin-top: 20px;
  padding: 11px 29px;
  background: var(--gold);
  color: var(--navy) !important;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}
.mobile-nav-cta:hover {
  background: var(--gold2);
  color: var(--navy) !important;
}

.mobile-nav-logo {
  margin-bottom: 40px;
  line-height: 0;
}

.mobile-nav-logo img {
  display: block;
  height: 64px;
  width: auto;
}

/* ── HERO ── */
#hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
}

.hero-bg-accent {
  position: absolute;
  top: -10%;
  right: 35%;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(184,150,106,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(184,150,106,0.3) 30%, rgba(184,150,106,0.3) 70%, transparent);
}

.hero-text {
  padding: 120px 60px 80px 60px;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.8s 0.2s forwards;
}

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  line-height: 1.12;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.8s 0.4s forwards;
}

.hero-headline em {
  font-style: italic;
  color: var(--gold2);
}

.hero-sub {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cream);
  opacity: 0;
  max-width: 440px;
  margin-bottom: 48px;
  animation: fadeUp 0.8s 0.6s forwards;
}

.hero-sub span { opacity: 0.65; }

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s 0.8s forwards;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.btn-primary:hover {
  background: var(--gold2);
  transform: translateY(-2px);
}

/* Inline SVG icon inside CTA buttons — guarantees identical rendering
   across iOS, Android, macOS and Windows (no emoji-presentation issues). */
.btn-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid rgba(184,150,106,0.4);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}

.btn-secondary:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* ── HERO IMAGE ── */
.hero-image-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 1.2s 0.3s forwards;
}

.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(15%) contrast(1.05);
}

/* Dark gradient overlay on image */
.hero-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--navy) 0%, transparent 30%),
              linear-gradient(to top, var(--navy) 0%, transparent 25%);
}

/* Gold vertical accent bar */
.hero-image-wrap::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 0;
  width: 3px;
  height: 40%;
  background: var(--gold);
  z-index: 2;
}

/* ── MANIFESTO CAROUSEL ── */
#manifesto {
  background: var(--gold);
  padding: 22px 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.manifesto-track {
  display: inline-flex;
  align-items: center;
  animation: marquee 28s linear infinite;
}

#manifesto:hover .manifesto-track {
  animation-play-state: paused;
}

.manifesto-item {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  padding: 0 48px;
  flex-shrink: 0;
}

.manifesto-item::after {
  content: '·';
  color: rgba(14,21,37,0.35);
  font-size: 2rem;
  margin-left: 48px;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── ABOUT ── */
#about {
  padding: 120px 60px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.about-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 8px;
}

.about-content h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 32px;
}

.about-content h2 em {
  font-style: italic;
  color: var(--gold2);
}

.about-content p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--cream);
  opacity: 0.8;
  margin-bottom: 20px;
  max-width: 580px;
}

.about-stats {
  display: flex;
  gap: 48px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(184,150,106,0.2);
}

.stat-num {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ── ECOSYSTEM ── */
#ecosystem {
  background: var(--navy2);
  padding: 100px 60px;
  position: relative;
  z-index: 1;
}

#ecosystem::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(184,150,106,0.3), transparent);
}

.section-header {
  text-align: center;
  margin-bottom: 72px;
}

.section-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-width: 1200px;
  margin: 0 auto;
}

.eco-card {
  background: var(--navy3);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.eco-card:hover { background: #233050; }

.eco-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 0;
  background: var(--gold);
  transition: height 0.4s ease;
}

.eco-card:hover::before { height: 100%; }

.eco-num {
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 24px;
  display: block;
}

.eco-icon {
  /* Inline SVG icons — rendered identically across iOS, Android, macOS,
     Windows and Linux. Replaces the previous Unicode glyph approach
     (▶ ✉ ❐) which iOS rendered as colored emoji. */
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 20px;
  color: var(--gold);
  line-height: 0;
}

.eco-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.eco-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.eco-desc {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--cream);
  opacity: 0.6;
  margin-bottom: 28px;
}

.eco-link {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s;
}

.eco-card:hover .eco-link { gap: 14px; }

/* ── BOOK TEASER ── */
#book {
  padding: 120px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.book-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.book-mockup {
  width: 220px;
  height: 300px;
  background: linear-gradient(135deg, var(--navy3) 0%, #0a1020 100%);
  border-left: 6px solid var(--gold);
  box-shadow:
    8px 8px 0 rgba(184,150,106,0.15),
    16px 16px 0 rgba(184,150,106,0.08),
    -4px 0 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 28px;
  position: relative;
  transform: rotate(-2deg);
}

.book-mockup::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
}

.book-title-text {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--white);
}

.book-title-text em {
  display: block;
  font-style: italic;
  color: var(--gold2);
  font-size: 1.1rem;
  margin-top: 4px;
}

.book-author-text {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.book-coming {
  position: absolute;
  top: -16px;
  right: -16px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  transform: rotate(4deg);
}

.book-content h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 24px;
}

.book-content h2 em {
  font-style: italic;
  color: var(--gold2);
}

.book-content p {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--cream);
  opacity: 0.75;
  margin-bottom: 16px;
  max-width: 460px;
}

.book-date {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 36px;
  margin-top: 8px;
}

/* ── NEWSLETTER ── */
#newsletter {
  background: var(--navy2);
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#newsletter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(184,150,106,0.3), transparent);
}

.newsletter-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.newsletter-inner h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 20px;
}

.newsletter-inner h2 em {
  font-style: italic;
  color: var(--gold2);
}

.newsletter-inner p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--cream);
  opacity: 0.7;
  margin-bottom: 48px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-form input {
  flex: 1;
  padding: 16px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(184,150,106,0.3);
  border-right: none;
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}

.newsletter-form input::placeholder { color: rgba(255,255,255,0.3); }
.newsletter-form input:focus { border-color: var(--gold); }

.newsletter-form button {
  padding: 16px 28px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.newsletter-form button:hover { background: var(--gold2); }

.newsletter-note {
  font-size: 0.75rem;
  color: var(--grey);
  margin-top: 16px;
  letter-spacing: 0.05em;
}

/* ── FOOTER ── */
footer {
  padding: 60px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 28px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-logo:hover { opacity: 0.8; }

.footer-logo img {
  display: block;
  height: 52px;
  width: auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 32px;
  list-style: none;
  justify-content: flex-end;
}

.footer-links a {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--gold); }

.footer-copy {
  font-size: 0.75rem;
  color: var(--grey);
  opacity: 0.5;
}

.footer-managed {
  font-size: 0.75rem;
  color: var(--grey);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.footer-managed a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(184,150,106,0.35);
  transition: border-color 0.2s, color 0.2s;
}

.footer-managed a:hover {
  color: var(--gold2);
  border-bottom-color: var(--gold2);
}

/* ── LEGAL PAGES (Privacy, Site Notice) ──
   Long-form text layout used by privacy.html and imprint.html.
   Uses the same nav + footer as the homepage, but the body content
   is a single readable column with serif headings and sans-serif copy. */
.legal-page {
  padding: 160px 60px 100px;
  position: relative;
  z-index: 1;
}

.legal-container {
  max-width: 820px;
  margin: 0 auto;
}

.legal-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  display: block;
}

.legal-container h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--cream);
  margin-bottom: 56px;
  letter-spacing: -0.01em;
}

.legal-container h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--cream);
  margin-top: 64px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(184,150,106,0.18);
}

.legal-container h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  margin-top: 40px;
  margin-bottom: 16px;
}

.legal-container h4 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cream);
  margin-top: 28px;
  margin-bottom: 12px;
}

.legal-container h5 {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 24px;
  margin-bottom: 10px;
}

.legal-container p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(245,240,232,0.78);
  margin-bottom: 18px;
}

.legal-container p strong { color: var(--cream); font-weight: 500; }

.legal-container ul {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
}

.legal-container ul li {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(245,240,232,0.78);
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
}

.legal-container ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--gold);
}

.legal-container a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(184,150,106,0.35);
  transition: border-color 0.2s, color 0.2s;
  word-break: break-word;
}

.legal-container a:hover {
  color: var(--gold2);
  border-bottom-color: var(--gold2);
}

@media (max-width: 768px) {
  .legal-page { padding: 120px 24px 72px; }
  .legal-container h1 { margin-bottom: 40px; }
  .legal-container h2 { margin-top: 48px; }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────
   MOBILE OVERRIDES
   Placed at the END so they actually override the base rules
   on small viewports (the original HTML had the media query
   higher up, which got overridden by later desktop rules).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 12px 22px; }

  .nav-logo img { height: 34px; }

  .nav-links { display: none; }
  .hamburger { display: flex; }

  .mobile-nav-logo img { height: 54px; }
  .footer-logo img { height: 44px; }

  /* ── HERO: image on top, text below, fading into the background ──
     padding-top clears the fixed nav (12px + 34px logo + 12px ≈ 58px)
     so the image is not hidden underneath it. */
  #hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-top: 64px;
  }

  .hero-line { display: none; }
  .hero-bg-accent { display: none; }

  /* Match the wrap to the natural aspect ratio of the mobile hero image
     (900 × 599 ≈ 3:2). Because the container now has the same shape as
     the image, object-fit: cover has nothing to crop — the full portrait
     is visible on every screen size. */
  .hero-image-wrap {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 599;
    animation: fadeIn 0.8s forwards;
  }

  /* Drop the gold vertical bar on mobile — we need the horizontal space */
  .hero-image-wrap::before { display: none; }

  /* Replace the dark-left / dark-bottom overlay with a single
     bottom-fade that dissolves the image into the page background,
     creating a clean handover to the text section. */
  .hero-image-wrap::after {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 55%,
      rgba(14,21,37,0.55) 82%,
      var(--navy) 100%
    );
  }

  .hero-image-wrap img {
    object-fit: cover;
    object-position: center center;
  }

  .hero-text {
    padding: 32px 24px 64px 24px;
  }

  .hero-headline {
    font-size: clamp(2rem, 8vw, 2.8rem);
    margin-bottom: 24px;
  }

  .hero-sub { margin-bottom: 36px; }

  .hero-ctas { gap: 12px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    flex: 1 1 auto;
    justify-content: center;
    padding: 14px 20px;
  }

  /* ── MANIFESTO ── */
  #manifesto { padding: 16px 0; }
  .manifesto-item { font-size: 1.1rem; padding: 0 28px; }
  .manifesto-item::after { margin-left: 28px; font-size: 1.6rem; }

  /* ── ABOUT: label + content stack (label, then heading, then body) ── */
  #about {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 72px 24px;
  }

  .about-content h2 { margin-bottom: 24px; }

  .about-stats {
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
    padding-top: 28px;
  }

  .stat-num { font-size: 2.2rem; }

  /* ── ECOSYSTEM: 01/02/03 cards stack ── */
  #ecosystem { padding: 72px 24px; }

  .section-header { margin-bottom: 48px; }

  .ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .eco-card { padding: 36px 28px; }
  .eco-num { font-size: 2.8rem; margin-bottom: 16px; }

  /* ── BOOK: visual on top, content below ── */
  #book {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 72px 24px;
  }

  .book-visual { order: -1; }

  /* ── NEWSLETTER ── */
  #newsletter { padding: 72px 24px; }

  .newsletter-form { flex-direction: column; gap: 12px; }

  .newsletter-form input {
    border-right: 1px solid rgba(184,150,106,0.3);
  }

  .newsletter-form button { padding: 16px 24px; }

  /* ── FOOTER ── */
  footer { padding: 48px 24px; }

  .footer-top {
    flex-direction: column;
    gap: 28px;
    text-align: center;
    padding-bottom: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding-top: 24px;
  }

  .footer-links {
    justify-content: center;
    gap: 16px 24px;
  }
}