/* ============================================================
   style.css — Lumière Curators
   Import tokens first, then: reset → base → layout →
   typography → nav → components → utilities → animations
   ============================================================ */

@import "./tokens.css";

/* ── Google Fonts (swap when brand fonts confirmed) ─────────
   Using Cormorant Garamond (display) + Jost (body) as
   editorial stand-ins that closely match the intended feel. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500&display=swap");


/* ╔══════════════════════════════════════════════════════════╗
   ║  1. RESET & BOX MODEL                                   ║
   ╚══════════════════════════════════════════════════════════╝ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
}

hr {
  border: none;
  border-top: 1px solid var(--color-rule);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  2. LAYOUT UTILITIES                                    ║
   ╚══════════════════════════════════════════════════════════╝ */

.container {
  width: 100%;
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

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

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

.section {
  padding-block: var(--space-16);
}

.section--sm {
  padding-block: var(--space-10);
}

.section--lg {
  padding-block: var(--space-20);
}

/* Alternating ivory backgrounds */
.section--alt {
  background-color: var(--color-ivory-warm);
}

.section--dark {
  background-color: var(--color-maroon-deep);
  color: var(--color-ivory);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  3. TYPOGRAPHY                                          ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Display headings — editorial serif */
h1, h2, h3,
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: clamp(2rem,    6vw,  var(--text-4xl)); }
h2, .h2 { font-size: clamp(1.6rem,  4.5vw, var(--text-3xl)); }
h3, .h3 { font-size: clamp(1.25rem, 3.5vw, var(--text-2xl)); }
h4, .h4 { font-size: var(--text-xl); font-family: var(--font-body); font-weight: 400; }
h5, .h5 { font-size: var(--text-lg);  font-family: var(--font-body); font-weight: 400; }
h6, .h6 { font-size: var(--text-md);  font-family: var(--font-body); font-weight: 400; }

/* Editorial overline / eyebrow label */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Large display — hero scale */
.display--hero {
  font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
  line-height: var(--leading-tight);
  font-style: italic;
  font-weight: 300;
}

p {
  line-height: var(--leading-loose);
  color: var(--color-ink-muted);
}

/* Hero overrides — paragraph text must be light on dark overlay */
/* Also targets .label (eyebrow text) which otherwise resolves to --color-ink-muted */
.hero p,
.section--dark p,
.hero .label,
.section--dark .label {
  color: rgba(245, 240, 230, 0.82);
}

.text-center { text-align: center; }
.text-muted   { color: var(--color-ink-muted); }
.italic       { font-style: italic; }


/* ╔══════════════════════════════════════════════════════════╗
   ║  4. NAV — hide on scroll-down, reveal on scroll-up     ║
   ╚══════════════════════════════════════════════════════════╝ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  /* No transform/filter/backdrop-filter directly on this element on purpose:
     any of those would make it the containing block for position:fixed
     descendants (the mobile nav overlay), sizing that overlay against this
     header's box instead of the viewport. The translucent blurred background
     lives on ::before instead, which has no descendants of its own to affect. */
  transition: transform var(--ease-slow);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(245, 240, 230, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--ease-base);
}

/* JS adds this class on scroll-down */
.site-header--hidden {
  transform: translateY(-100%);
}

/* JS adds this class when page scrolled > 60px */
.site-header--scrolled {
  box-shadow: var(--shadow-subtle);
}

.site-header--scrolled::before {
  background-color: rgba(245, 240, 230, 0.97);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Wordmark / logo */
.site-logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--color-maroon);
  white-space: nowrap;
}

.site-logo em {
  font-style: italic;
  font-weight: 300;
}

/* Navigation links */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav__link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  position: relative;
  transition: color var(--ease-base);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-gold-whisper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease-base);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-maroon);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* CTA — "Enquire" button in nav */
.site-nav__cta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ivory);
  background-color: var(--color-maroon);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-maroon);
  transition: background-color var(--ease-base), color var(--ease-base), border-color var(--ease-base);
}

.site-nav__cta:hover {
  background-color: transparent;
  color: var(--color-maroon);
}

/* Mobile nav toggle (visible < 768px) */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  /* Minimum 44×44px tap target */
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-right: -10px; /* optical align with edge */
}

.site-nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--color-maroon);
  transition: transform var(--ease-base), opacity var(--ease-base);
}

/* Mobile nav close button — injected by JS into the overlay */
/* Hidden by default — only shown inside the mobile nav overlay */
.site-nav__close {
  display: none; /* hidden by default; prevents ghost X on desktop */
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: 1px solid var(--color-rule);
  color: var(--color-maroon);
  font-size: var(--text-lg);
  line-height: 1;
}

@media (max-width: 768px) {
  .site-nav__toggle {
    display: flex;
  }

  /* Close button only shown inside the mobile overlay */
  .site-nav__close {
    display: flex;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-ivory);
    transform: translateX(100%);
    transition: transform var(--ease-slow);
    gap: var(--space-5);
    z-index: var(--z-overlay);
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav__link {
    font-size: var(--text-md);
    /* Ensure ≥44px tap height */
    padding-block: 0.6rem;
    display: block;
  }

  /* CTA button in mobile overlay — make it fully tappable */
  .site-nav__cta {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
  }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  5. FOOTER                                              ║
   ╚══════════════════════════════════════════════════════════╝ */

.site-footer {
  background-color: var(--color-maroon-deep);
  color: var(--color-ivory);
  padding-block: var(--space-10);
  border-top: 1px solid rgba(201, 162, 75, 0.3);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-6);
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 300;
  color: var(--color-ivory);
  margin-bottom: var(--space-2);
}

.site-footer__copy {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(245, 240, 230, 0.5);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.site-footer__link {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.6);
  transition: color var(--ease-base);
}

.site-footer__link:hover {
  color: var(--color-gold-whisper);
}

@media (max-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__nav {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  6. HERO SECTION                                        ║
   ╚══════════════════════════════════════════════════════════╝ */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block-start: var(--space-20);
  padding-block-end: var(--space-16);
  background-color: var(--color-maroon-deep);
  color: var(--color-ivory);
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat; /* prevents tiling on tall mobile viewports */
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.hero__eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-gold-whisper);
  flex-shrink: 0;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
  font-weight: 300;
  font-style: italic;
  line-height: var(--leading-tight);
  color: var(--color-ivory);
  max-width: 14ch;
  margin-bottom: var(--space-6);
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.4);
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--color-gold-whisper), transparent);
}

/* Darkening overlay so text is always legible over photo background */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 12, 10, 0.72) 0%,
    rgba(28, 12, 10, 0.40) 50%,
    rgba(28, 12, 10, 0.25) 100%
  );
  z-index: 1;   /* above the ::after photo layer */
}

/* Keep hero content above the overlay */
.hero .container {
  position: relative;
  z-index: 2;
}

/* Ken Burns slow drift on hero image — subtle, not distracting.
   Runs on a dedicated ::after layer via transform, NOT via background-size.
   Two-value percentage background-size (e.g. 115% 115%) scales width and
   height independently against the box, which stretches the photo to the
   viewport's aspect ratio — visible distortion on the square hero source. */
@keyframes kenBurns {
  from { transform: scale(1.12); }
  to   { transform: scale(1.02); }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;   /* picks up the inline url() from the section */
  background-size: cover;      /* uniform scale — never distorts */
  background-position: center 30%;
  background-repeat: no-repeat;
  transform-origin: center 32%;
  will-change: transform;
}

.hero[style*="background-image"]::after {
  animation: kenBurns 18s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .hero[style*="background-image"]::after { animation: none; }
}

/* ── Team avatar — circle portrait ───────────────────────── */
.team-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-gold-whisper);
  flex-shrink: 0;
}

.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  7. SECTION HEADERS (editorial style)                  ║
   ╚══════════════════════════════════════════════════════════╝ */

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

.section-header--centered {
  text-align: center;
}

.section-header__rule {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-gold-whisper);
  margin-bottom: var(--space-3);
}

.section-header--centered .section-header__rule {
  margin-inline: auto;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  8. IMAGE COMPONENTS                                    ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Hover: subtle scale-zoom — no bounce */
.img-zoom {
  overflow: hidden;
  display: block;
}

.img-zoom img {
  transition: transform var(--ease-slow);
  transform: scale(1);
}

.img-zoom:hover img {
  transform: scale(1.025);
}

/* Aspect-ratio containers */
.aspect-3-2  { aspect-ratio: 3 / 2; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-1-1  { aspect-ratio: 1 / 1; }
.aspect-2-3  { aspect-ratio: 2 / 3; }

.img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  9. CAROUSEL / SLIDER SHELL                             ║
   ╚══════════════════════════════════════════════════════════╝ */

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  transition: transform var(--ease-slow);
}

.carousel__slide {
  flex: 0 0 100%;
}

/* Arrows — hidden by default, fade in on hover */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-raised);
  cursor: pointer;
  padding: var(--space-2);
  background-color: rgba(245, 240, 230, 0.85);
  border: 1px solid var(--color-rule);
  color: var(--color-maroon);
  opacity: 0;
  transition: opacity var(--ease-base);
}

.carousel__btn--prev { left: var(--space-3); }
.carousel__btn--next { right: var(--space-3); }

.carousel:hover .carousel__btn {
  opacity: 1;
}

/* Dots — hidden by default, fade in on hover */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  opacity: 0;
  transition: opacity var(--ease-base);
}

.carousel:hover .carousel__dots {
  opacity: 1;
}

.carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-rule);
  cursor: pointer;
  transition: background-color var(--ease-base);
}

.carousel__dot.is-active {
  background-color: var(--color-gold-whisper);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  10. GRID LAYOUTS                                       ║
   ╚══════════════════════════════════════════════════════════╝ */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

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

/* Collapse all grids at tablet and below */
@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Critical: reset inline order values so DOM order (image first) wins on mobile.
     Uses !important to override the inline style="order: 1/2" on alternating sections. */
  .grid-2 > * {
    order: unset !important;
  }

  /* For side-by-side image/text layouts, force the image or aspect-ratio block to stack on top */
  .grid-2 > .img-zoom,
  .grid-2 > [class*="aspect-"] {
    order: -1 !important;
  }

  /* Side-by-side section gap was 96px — collapse on mobile */
  .grid-2[style*="gap"] {
    gap: var(--space-6) !important;
  }
}

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


/* ╔══════════════════════════════════════════════════════════╗
   ║  11. CARD COMPONENT                                     ║
   ╚══════════════════════════════════════════════════════════╝ */

.card {
  background-color: var(--color-ivory-cool);
  overflow: hidden;
}

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

.card__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-maroon);
  margin-top: var(--space-3);
  transition: gap var(--ease-base);
}

.card__link::after {
  content: "→";
  transition: transform var(--ease-base);
}

.card__link:hover::after {
  transform: translateX(4px);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  12. BUTTON / CTA COMPONENTS                            ║
   ╚══════════════════════════════════════════════════════════╝ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-5);
  border: 1px solid currentColor;
  cursor: pointer;
  transition: background-color var(--ease-base), color var(--ease-base), border-color var(--ease-base);
}

/* Primary — maroon fill */
.btn--primary {
  background-color: var(--color-maroon);
  border-color: var(--color-maroon);
  color: var(--color-ivory);
}

.btn--primary:hover {
  background-color: transparent;
  color: var(--color-maroon);
}

/* Ghost — transparent with maroon border */
.btn--ghost {
  background-color: transparent;
  border-color: var(--color-maroon);
  color: var(--color-maroon);
}

.btn--ghost:hover {
  background-color: var(--color-maroon);
  color: var(--color-ivory);
}

/* Light — for use on dark backgrounds */
.btn--light {
  background-color: transparent;
  border-color: var(--color-ivory);
  color: var(--color-ivory);
}

.btn--light:hover {
  background-color: var(--color-ivory);
  color: var(--color-maroon);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  13. FORM ELEMENTS                                      ║
   ╚══════════════════════════════════════════════════════════╝ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  /* Explicit 16px minimum — prevents iOS Safari auto-zoom on focus */
  font-size: max(16px, var(--text-base));
  font-weight: 300;
  color: var(--color-ink);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
  transition: border-color var(--ease-base);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-bottom-color: var(--color-maroon);
  outline: none;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  14. THIN ACCENT RULE                                   ║
   ╚══════════════════════════════════════════════════════════╝ */

.accent-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-gold-whisper),
    transparent
  );
  margin-block: var(--space-8);
  opacity: 0.5;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  15. FADE-UP ANIMATION UTILITY                          ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Initial hidden state — JS IntersectionObserver toggles .is-visible */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--ease-slow),
    transform var(--ease-slow);
  will-change: opacity, transform;
}

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

/* Staggered children */
.fade-up--delay-1 { transition-delay: 80ms; }
.fade-up--delay-2 { transition-delay: 160ms; }
.fade-up--delay-3 { transition-delay: 240ms; }
.fade-up--delay-4 { transition-delay: 320ms; }


/* ╔══════════════════════════════════════════════════════════╗
   ║  16. MAIN CONTENT OFFSET (accounts for fixed nav)       ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Pages where hero doesn't start behind nav */
.page-offset {
  padding-top: 80px;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  17. HORIZONTAL MARQUEE / TICKER (optional)             ║
   ╚══════════════════════════════════════════════════════════╝ */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding-block: var(--space-3);
}

.marquee__track {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-ink-muted);
  padding-right: var(--space-6);
}

.marquee__separator {
  color: var(--color-gold-whisper);
  font-style: normal;
}

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


/* ╔══════════════════════════════════════════════════════════╗
   ║  18. UTILITY CLASSES                                    ║
   ╚══════════════════════════════════════════════════════════╝ */

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-auto { margin-top: auto; }
.mb-0    { margin-bottom: 0; }
.w-full  { width: 100%; }

/* Gold whisper used only as a decorative element */
.gold-accent {
  color: var(--color-gold-whisper);
}

.gold-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--color-gold-whisper);
  vertical-align: middle;
  margin-inline: var(--space-2);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  19. RESPONSIVE OVERRIDES (mobile-first additions)      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Tighter container padding on small phones */
@media (max-width: 428px) {
  .container {
    padding-inline: var(--space-3);
  }

  .section {
    padding-block: var(--space-10);
  }

  .section--lg {
    padding-block: var(--space-12);
  }

  /* Hero bottom padding */
  .hero {
    padding-block-end: var(--space-10);
  }
}

@media (max-width: 375px) {
  .container {
    padding-inline: var(--space-2);
  }
}

/* Ensure full-width inputs on mobile */
@media (max-width: 768px) {
  .form-input,
  .form-textarea,
  .form-select {
    width: 100%;
  }

  /* Contact form two-column → single column */
  .grid-2 > .fade-up + aside {
    margin-top: 0;
  }
}

/* Team grid — keep 2 columns on tablet, single on small phone */
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  20. COOKIE CONSENT BANNER                              ║
   ╚══════════════════════════════════════════════════════════╝ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modal);
  background-color: var(--color-maroon-deep);
  border-top: 1px solid rgba(201, 162, 75, 0.4);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Enter animation */
  transform: translateY(100%);
  transition: transform var(--ease-slow);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(245, 240, 230, 0.8);
  line-height: var(--leading-normal);
  max-width: 65ch;
}

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

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.cookie-banner__accept {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ivory);
  background-color: var(--color-maroon);
  border: 1px solid var(--color-maroon);
  padding: 0.5rem var(--space-3);
  cursor: pointer;
  min-height: 44px;
  transition: background-color var(--ease-base), color var(--ease-base);
}

.cookie-banner__accept:hover {
  background-color: transparent;
  color: var(--color-ivory);
  border-color: rgba(245, 240, 230, 0.6);
}

@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4) var(--space-3);
    gap: var(--space-3);
  }

  .cookie-banner__accept {
    width: 100%;
    text-align: center;
  }
}