/* ============================================
   MADAME OLIVIA — Global Styles
   Brand: Plural Design Studio
   Colors, Typography, Layout System
   ============================================ */

/* --- Brand Fonts ---
   Font files go in /fonts/ directory as .woff2
   Get these from Plural (your brand identity studio)

   Font system per brand guidelines:
   - Feature (Light)          → Headline 1, Headline 2 — LOWERCASE ONLY
   - ST Transmission (Light)  → Sub headings, highlight text, phrases — UPPERCASE ONLY
   - Basis Grotesque (Light/Regular) → Body text, buttons/CTA — upper and lower case
*/

/* Feature Display — Headlines (lowercase only)
   Using the EXTENDED woff2 files: Feature trial + custom-built composite glyphs
   for Latin-1 Supplement (ú, é, è, à, â, ñ, etc.). Built with fontTools,
   accent strokes drawn at matched stroke weight per font weight. */
@font-face {
  font-family: 'Feature';
  src: url('../fonts/FeatureDisplay-Light-Extended.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Feature';
  src: url('../fonts/FeatureDisplay-Regular-Extended.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Feature';
  src: url('../fonts/FeatureDisplay-Medium-Extended.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ST Transmission — Subheadings (uppercase only) */
@font-face {
  font-family: 'ST Transmission';
  src: url('../fonts/StTransmission-300Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ST Transmission';
  src: url('../fonts/StTransmission-400Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ST Transmission';
  src: url('../fonts/StTransmission-600SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Basis Grotesque Pro — Body text, buttons */
@font-face {
  font-family: 'Basis Grotesque';
  src: url('../fonts/Basis-Grotesque-Pro-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basis Grotesque';
  src: url('../fonts/Basis-Grotesque-Pro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basis Grotesque';
  src: url('../fonts/Basis-Grotesque-Pro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basis Grotesque';
  src: url('../fonts/Basis-Grotesque-Pro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Custom Properties --- */
:root {
  /* Brand Colors */
  --dark-olive: #465625;
  --olive: #9EA980;
  --light-olive: #C8C8A4;
  --beige: #EAE5D5;
  --off-white: #F6F5F2;
  --coral-pink: #DFB2A5;
  --white: #FFFFFF;

  /* Semantic Colors */
  --bg-primary: var(--off-white);
  --bg-secondary: var(--beige);
  --bg-accent: var(--olive);
  --bg-dark: var(--dark-olive);
  --text-primary: var(--dark-olive);
  --text-secondary: #5a6340;
  --text-light: var(--off-white);
  --btn-primary: var(--olive);
  --btn-secondary: var(--coral-pink);
  --btn-outline: var(--dark-olive);

  /* Typography — Brand fonts from Plural guidelines */
  --font-headline: 'Feature', 'Georgia', serif;
  --font-subhead: 'ST Transmission', 'Helvetica Neue', sans-serif;
  --font-body: 'Basis Grotesque', 'Helvetica Neue', sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 96px;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Belt-and-suspenders overflow guard for iOS Safari — body alone isn't
   always enough; html can still expose a horizontal scroll. */
html { overflow-x: hidden; }

/* Mobile menu scroll-lock — when the menu is open, no scrolling on the
   page behind it. Lock both html and body, give the menu its own scroll
   in case it grows taller than the viewport. */
html:has(.nav__mobile.active),
body:has(.nav__mobile.active) { overflow: hidden; }
.nav__mobile.active { overflow-y: auto; }

/* Sitewide inline-grid collapse for mobile. Catches any inline
   `grid-template-columns: Xfr Yfr` on 2-col layouts that don't have their
   own breakpoint. Matches both with-space and without-space variants. */
@media (max-width: 900px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 3fr"],
  [style*="grid-template-columns: 2fr 3fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 3fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.7;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

/* --- Typography --- */
h1, .h1 {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

h2, .h2 {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-family: var(--font-subhead);
  font-weight: 400;
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

h4, .h4 {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.3;
}

p {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
  color: var(--text-secondary);
}

p + p {
  margin-top: var(--space-sm);
}

.eyebrow {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-olive);
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container--wide {
  max-width: 1400px;
}

.container--narrow {
  max-width: 800px;
}

section {
  padding: var(--space-xl) 0;
}

.section--beige { background-color: var(--bg-secondary); }
.section--olive { background-color: var(--bg-accent); }
.section--dark { background-color: var(--bg-dark); color: var(--text-light); }
.section--dark p { color: rgba(246,245,242,0.8); }
.section--white { background-color: var(--white); }

/* Grid */
.grid {
  display: grid;
  gap: var(--space-md);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.grid--content {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4, .grid--content {
    grid-template-columns: 1fr;
  }
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: var(--bg-primary);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav.scrolled {
  background: rgba(246, 245, 242, 0.97);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.nav__left, .nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
}

.nav__right {
  justify-content: flex-end;
}

.nav__link {
  font-family: var(--font-subhead);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-primary);
  transition: color 0.3s ease;
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--dark-olive);
  transition: width 0.3s ease;
}

.nav__link:hover::after {
  width: 100%;
}

.nav__link:hover {
  color: var(--dark-olive);
}

.nav__logo {
  display: block;
  height: 50px;
  overflow: hidden;
  margin-left: -10px;
}

.nav__logo-img {
  display: block;
  height: 70px;
  width: auto;
  transition: opacity 0.3s ease;
}

/* Logo light/dark variants for full-bleed pages where nav is transparent over a hero */
.nav__logo-img--light { display: block; }
.nav__logo-img--dark { display: none; }
.nav.scrolled .nav__logo-img--light { display: none; }
.nav.scrolled .nav__logo-img--dark { display: block; }

/* Mobile Nav */
.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--dark-olive);
  margin: 5px 0;
  transition: 0.3s ease;
}

.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  padding: var(--space-lg) var(--space-md);
  z-index: 999;
}

.nav__mobile.active {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.nav__mobile a:not(.btn) {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 300;
  display: block;
  padding: var(--space-xs) 0;
}

@media (max-width: 900px) {
  .nav__left, .nav__right {
    display: none;
  }
  .nav__toggle {
    display: block;
  }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 50px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--dark-olive);
  color: var(--white);
  border-color: var(--dark-olive);
}

.btn--primary:hover {
  background: #374a1b;
  border-color: #374a1b;
}

.btn--secondary {
  background: var(--btn-secondary);
  color: #3a4720;
  border-color: var(--btn-secondary);
}

.btn--secondary:hover {
  background: #d4a090;
  border-color: #d4a090;
}

.btn--outline {
  background: transparent;
  color: var(--dark-olive);
  border-color: var(--olive);
}

.btn--outline:hover {
  background: var(--olive);
  color: var(--white);
}

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

.btn--white:hover {
  background: var(--off-white);
  border-color: var(--off-white);
}

.btn--lg {
  padding: 18px 42px;
  font-size: 0.82rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* --- Hero Section --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  position: relative;
  overflow: hidden;
}

.hero--short {
  min-height: 60vh;
}

.hero--olive {
  background: var(--olive);
}

.hero__content {
  position: relative;
  z-index: 2;
}

.hero h1 {
  margin-bottom: var(--space-sm);
}

.hero p {
  max-width: 520px;
  margin-bottom: var(--space-md);
}

.hero__image {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: 45%;
  max-width: 600px;
  z-index: 1;
}

/* --- Section Headers --- */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-lg);
}

.section-header .eyebrow {
  margin-bottom: var(--space-sm);
}

.section-header h2 {
  margin-bottom: var(--space-sm);
}

/* --- Cards --- */
.card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.card__image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.card__body {
  padding: var(--space-md);
}

.card__body h4 {
  margin-bottom: var(--space-xs);
}

.card__body p {
  font-size: 0.92rem;
}

/* --- Pillars / Features Row --- */
.pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
}

.pillar {
  text-align: center;
  max-width: 200px;
}

.pillar__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-sm);
}

.pillar__text {
  font-family: var(--font-subhead);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
}

/* --- Location Cards --- */
.location-card {
  background: var(--white);
  border-radius: 16px;
  padding: var(--space-lg);
  text-align: center;
  transition: transform 0.3s ease;
}

.location-card:hover {
  transform: translateY(-4px);
}

.location-card h4 {
  margin-bottom: var(--space-xs);
}

.location-card .eyebrow {
  margin-bottom: var(--space-sm);
}

.location-card p {
  margin-bottom: var(--space-md);
}

/* --- Divider --- */
.divider {
  width: 60px;
  height: 1px;
  background: var(--light-olive);
  margin: var(--space-md) auto;
}

.divider--left {
  margin-left: 0;
}

/* --- Press / As Seen In --- */
.press-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  opacity: 0.6;
}

.press-logos img {
  height: 28px;
  filter: grayscale(100%);
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.press-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* --- CTA Banner --- */
.cta-banner {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.cta-banner h2 {
  margin-bottom: var(--space-sm);
}

.cta-banner p {
  max-width: 600px;
  margin: 0 auto var(--space-md);
}

/* --- Footer --- */
.footer {
  background: var(--bg-dark);
  color: var(--text-light);
  padding: var(--space-lg) 0 var(--space-md);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
  align-items: start;
}

.footer__brand {
  text-align: left;
}

.footer__brand a {
  display: block;
}

.footer__brand h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.8rem;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
}

.footer__brand p {
  color: rgba(246,245,242,0.6);
  font-size: 0.9rem;
}

.footer__col h4 {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin-bottom: var(--space-sm);
  color: var(--off-white);
}

.footer__col a {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(246,245,242,0.85);
  padding: 6px 0;
  transition: color 0.3s ease;
  text-transform: lowercase;
}

.footer__col a:hover {
  color: var(--off-white);
}

.footer__bottom {
  border-top: 1px solid rgba(246,245,242,0.1);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(246,245,242,0.65);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.footer__social a {
  color: rgba(246,245,242,0.5);
  transition: color 0.3s ease;
}

.footer__social a:hover {
  color: var(--off-white);
}

@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* --- FAQ Accordion --- */
.faq__item {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.faq__question {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-md) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-primary);
  text-align: left;
}

.faq__question::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  transition: transform 0.3s ease;
}

.faq__item.active .faq__question::after {
  transform: rotate(45deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq__answer p {
  padding-bottom: var(--space-md);
}

.faq__item.active .faq__answer {
  max-height: 300px;
}

/* --- Forms --- */
.form-group {
  margin-bottom: var(--space-sm);
}

.form-group label {
  display: block;
  font-family: var(--font-subhead);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--white);
  color: var(--text-primary);
  transition: border-color 0.3s ease;
}

.form-group input:focus:not(:focus-visible),
.form-group textarea:focus:not(:focus-visible),
.form-group select:focus:not(:focus-visible) {
  outline: none;
  border-color: var(--olive);
}

/* --- Page Header (Interior Pages) --- */
.page-header {
  padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-lg);
  text-align: center;
}

.page-header .eyebrow {
  margin-bottom: var(--space-sm);
}

.page-header h1 {
  margin-bottom: var(--space-sm);
}

.page-header p {
  max-width: 600px;
  margin: 0 auto;
}

/* --- Utility --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* --- Animations --- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive Spacing --- */
@media (max-width: 768px) {
  section {
    padding: var(--space-lg) 0;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-lg));
    padding-bottom: var(--space-lg);
  }

  .hero__image {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin-top: var(--space-md);
  }
}


/* --- Accessibility: Skip Link --- */
/* Visually hidden — accessible to screen readers, invisible to sighted users */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--dark-olive);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* --- Accessibility: Focus Visible --- */
*:focus-visible {
  outline: 2px solid var(--dark-olive);
  outline-offset: 2px;
}

/* Override the outline:none on form inputs — give them a visible focus ring */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  outline: 2px solid var(--dark-olive);
  outline-offset: 2px;
  border-color: var(--olive);
}

/* Required field indicator — visible asterisk on labels paired with required inputs */
.form-group:has(:required) label::after,
.form-group:has(input[required]) label::after,
.form-group:has(textarea[required]) label::after,
.form-group:has(select[required]) label::after,
label:has(+ input[required])::after,
label:has(+ textarea[required])::after,
label:has(+ select[required])::after {
  content: " *";
  color: #b8745f;
  font-weight: 600;
  margin-left: 2px;
}

/* Form-level instruction (e.g. "Required fields are marked with *") */
.form-required-note {
  font-family: var(--font-subhead);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.form-required-note::before {
  content: "* ";
  color: #b8745f;
  font-weight: 600;
}

/* Form status / success message region (aria-live) */
.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  display: none;
}
.form-status[data-state="success"] {
  display: block;
  background: rgba(70, 86, 37, 0.08);
  color: var(--dark-olive);
  border: 1px solid rgba(70, 86, 37, 0.2);
}
.form-status[data-state="error"] {
  display: block;
  background: rgba(184, 116, 95, 0.10);
  color: #8a4f3b;
  border: 1px solid rgba(184, 116, 95, 0.35);
}

/* --- Cookie Consent Banner --- */
.cookie-banner {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  max-width: 720px;
  margin: 0 auto;
  background: var(--off-white);
  color: var(--dark-olive);
  border: 1px solid rgba(70, 86, 37, 0.15);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  z-index: 10000;
  display: none;
  font-family: var(--font-body);
  animation: cookieFadeIn 0.4s ease;
}

.cookie-banner[data-visible="true"] {
  display: block;
}

@keyframes cookieFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.cookie-banner__title {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 1.25rem;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  color: var(--dark-olive);
}

.cookie-banner__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.cookie-banner__text a {
  color: var(--dark-olive);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.cookie-banner__btn {
  font-family: var(--font-subhead);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--dark-olive);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cookie-banner__btn--accept {
  background: var(--dark-olive);
  color: var(--off-white);
}

.cookie-banner__btn--accept:hover {
  background: #374a1b;
  border-color: #374a1b;
}

.cookie-banner__btn--decline {
  background: transparent;
  color: var(--dark-olive);
}

.cookie-banner__btn--decline:hover {
  background: rgba(70, 86, 37, 0.08);
}

@media (max-width: 600px) {
  .cookie-banner {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 1rem;
  }
  .cookie-banner__actions { flex-direction: column; align-items: stretch; }
  .cookie-banner__btn { text-align: center; }
}

/* =============================================
   Reduced Motion — respect OS-level preference
   Honors prefers-reduced-motion: reduce. Disables
   the ticker, the scroll-triggered fade-ins, the
   logo crossfade, and the cookie banner fade-in,
   and shortens all transitions to near-zero so
   nothing slides, scales, or scrolls on its own.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  /* Kill ALL animations and transitions — broad strokes, then refine. */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* Fade-in scroll reveals: just show, no slide. */
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Ticker: stop scrolling. Keep the first set of items visible. */
  .ticker__track {
    animation: none !important;
    transform: none !important;
  }

  /* Cookie banner: appear instantly without slide-up. */
  .cookie-banner {
    animation: none !important;
  }

  /* Card hover lifts and other transform-on-hover affordances:
     keep the color change but skip the movement. */
  .card:hover,
  .role-card:hover {
    transform: none !important;
  }
}