/* ============================================
   SELEQT — Stylesheet (v2)
   Modern boutique × private wealth
   ============================================ */

:root {
  /* Brand colors — preserved */
  --navy: #0a1a35;          /* slightly lifted so it reads better on cream */
  --navy-deep: #060e1c;     /* darkest accent, for headlines on light bg */
  --navy-mid: #0a1426;
  --navy-light: #0f1d36;
  --navy-accent: #15264a;
  --ink: #020812;

  --gold: #b8924e;          /* nudged slightly deeper for better contrast on cream */
  --gold-light: #d4b06a;
  --gold-deep: #8a6a32;
  --gold-dim: rgba(184, 146, 78, 0.32);
  --gold-faint: rgba(184, 146, 78, 0.08);

  /* PAPER (new light theme) — primary surface */
  --paper: #f5f1e8;             /* warm cream */
  --paper-soft: #efe9dc;        /* recessed cards */
  --paper-deep: #e6dfce;        /* dividers and accents on paper */

  --ink-strong: #0a1a35;        /* primary text on paper */
  --ink-soft: rgba(10, 26, 53, 0.62);  /* secondary text on paper */
  --ink-faint: rgba(10, 26, 53, 0.42);
  --ink-line: rgba(10, 26, 53, 0.12);
  --ink-line-strong: rgba(10, 26, 53, 0.22);

  /* Legacy dim/ghost (still used by dark surfaces like contact section) */
  --white: #f4f1ea;
  --white-dim: rgba(244, 241, 234, 0.62);
  --white-faint: rgba(244, 241, 234, 0.12);
  --white-ghost: rgba(244, 241, 234, 0.04);

  --border: rgba(10, 26, 53, 0.10);
  --border-strong: rgba(10, 26, 53, 0.22);
  --border-gold: rgba(184, 146, 78, 0.45);

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Outfit', sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --rule: 1px solid var(--border);
  --rule-strong: 1px solid var(--border-strong);
}

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

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

body {
  background: var(--paper);
  color: var(--ink-strong);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(200, 169, 110, 0.85);
  color: var(--white);
  text-shadow: 0 0 16px rgba(232, 201, 138, 0.85);
}
::-moz-selection {
  background: rgba(200, 169, 110, 0.85);
  color: var(--white);
  text-shadow: 0 0 16px rgba(232, 201, 138, 0.85);
}

/* ── Custom Cursor ── */
.cursor {
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background 0.3s;
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid rgba(184, 146, 78, 0.5);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s;
}
body.cursor-hover .cursor { width: 10px; height: 10px; background: var(--gold-light); }
body.cursor-hover .cursor-ring { width: 44px; height: 44px; border-color: var(--gold); }
a, button { cursor: none; }

@media (max-width: 900px), (hover: none) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
  a, button { cursor: pointer; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

/* ============================================
   LAYOUT
   ============================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
.container-wide {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) {
  .container, .container-wide { padding: 0 24px; }
}

/* ============================================
   TYPOGRAPHY PRIMITIVES
   ============================================ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.section-title em { font-style: italic; color: var(--gold); font-weight: 300; }

/* ============================================
   NAVBAR
   ============================================ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 0.5s, backdrop-filter 0.5s, border-color 0.5s;
  border-bottom: 1px solid transparent;
}
/* Default = on hero (dark) */
#navbar .logo { color: var(--white); }
#navbar .nav-links a { color: rgba(244, 241, 234, 0.92); }
#navbar .nav-links a:hover { color: var(--white); }
#navbar .hamburger span { background: var(--white); }

/* Scrolled past hero — paper mode */
#navbar.scrolled {
  background: rgba(245, 241, 232, 0.82);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom-color: var(--ink-line);
}
#navbar.scrolled .logo { color: var(--navy); }
#navbar.scrolled .nav-links a { color: var(--navy); }
#navbar.scrolled .nav-links a:hover { color: var(--gold); }
#navbar.scrolled .hamburger span { background: var(--navy); }
#navbar.scrolled .nav-cta {
  color: var(--gold) !important;
  border-color: var(--gold-dim) !important;
}
#navbar.scrolled .nav-cta:hover {
  background: var(--gold);
  color: var(--white) !important;
  border-color: var(--gold) !important;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  max-width: 1600px;
  margin: 0 auto;
  transition: padding 0.4s var(--ease-out);
}
#navbar.scrolled .nav-inner { padding: 14px 48px; }

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-decoration: none;
  transition: color 0.3s, letter-spacing 0.4s var(--ease-out);
}
.logo:hover { color: var(--gold) !important; letter-spacing: 0.28em; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 44px;
}
.nav-links a {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s, letter-spacing 0.3s;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease-out);
}
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  padding: 11px 22px !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s !important;
}
.nav-cta:hover {
  background: var(--gold);
  border-color: var(--gold) !important;
  color: var(--navy) !important;
  box-shadow: 0 0 24px -4px rgba(200, 169, 110, 0.55);
}
.nav-cta::after { display: none !important; }

.hamburger { display: none; background: none; border: none; padding: 4px; }
.hamburger span {
  display: block; width: 22px; height: 1px;
  margin: 6px 0;
  transition: transform 0.3s, opacity 0.3s, background 0.3s;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 24px 28px 32px;
  background: rgba(6, 14, 28, 0.98);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(244, 241, 234, 0.10);
  gap: 22px;
}
.mobile-menu a {
  color: rgba(244, 241, 234, 0.92);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.06);
  transition: color 0.3s, padding-left 0.3s var(--ease-out);
}
.mobile-menu a:last-child {
  border-bottom: none;
  color: var(--gold);
  margin-top: 8px;
  padding: 14px 0;
  border: 1px solid var(--gold);
  text-align: center;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu a:not(:last-child):hover { padding-left: 8px; }
.mobile-menu.open { display: flex; }

/* When navbar is in scrolled (paper) state, mobile menu also flips */
#navbar.scrolled .mobile-menu {
  background: rgba(245, 241, 232, 0.98);
  border-top-color: var(--ink-line);
}
#navbar.scrolled .mobile-menu a {
  color: var(--navy);
  border-bottom-color: var(--ink-line);
}
#navbar.scrolled .mobile-menu a:hover { color: var(--gold); }
#navbar.scrolled .mobile-menu a:last-child {
  color: var(--gold);
  border-color: var(--gold);
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  .nav-inner { padding: 18px 24px; }
  #navbar.scrolled .nav-inner { padding: 14px 24px; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: 0;
  transition: background 0.3s, color 0.3s, transform 0.4s var(--ease-out), box-shadow 0.4s, padding 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '→';
  font-size: 0.95rem;
  transition: transform 0.4s var(--ease-out);
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 18px 48px rgba(184, 146, 78, 0.28); }
.btn-primary:hover::after { transform: translateX(4px); }
.btn-primary.full-width { width: 100%; justify-content: center; }

/* Ghost button — adapts to surface via currentColor */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(244, 241, 234, 0.25);
  transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.4s var(--ease-out);
}
.btn-ghost::after {
  content: '';
  width: 16px; height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease-out);
  opacity: 0.6;
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.btn-ghost:hover::after { width: 28px; opacity: 1; }

/* Ghost button on paper */
.btn-ghost.on-paper {
  color: var(--navy);
  border-color: var(--ink-line-strong);
}
.btn-ghost.on-paper:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================
   HERO
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 180px 0 140px;
  background: var(--ink);
  color: var(--white);
}
.hero .hero-title { color: var(--white); }
.hero .hero-title em.italic { color: var(--gold); }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-glow {
  position: absolute;
  /* Centered horizontally, aligned to the watermark vertically */
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  width: 130vw; max-width: 1800px; height: 1100px;
  /* Wide elliptical halo that envelops the SELEQT wordmark */
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(26, 58, 107, 0.55) 0%, rgba(26, 58, 107, 0.28) 30%, rgba(26, 58, 107, 0.08) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
}
.hero-glow-2 {
  position: absolute;
  /* A subtler warm gold halo just below the watermark for depth */
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  width: 110vw; max-width: 1400px; height: 800px;
  background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(200, 169, 110, 0.10) 0%, rgba(200, 169, 110, 0.04) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244,241,234,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,234,0.022) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%);
}

.hero-wordmark {
  position: absolute;
  /* Watermark sits in the upper third — just above the title */
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22vw;
  line-height: 1;
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 241, 234, 0.10);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 48px;
}
.hero-meta .dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; }
.hero-meta .accent { color: var(--gold); }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 8rem);
  font-weight: 300;
  line-height: 0.98;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
  color: var(--white);
}
.hero-title .line { display: block; }
.hero-title .italic { font-style: italic; color: var(--gold); font-weight: 300; }

.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300;
  color: var(--white-dim);
  max-width: 580px;
  line-height: 1.7;
  margin-bottom: 56px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 100px;
}

.hero-credentials {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  max-width: 720px;
}
.hero-cred {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-cred-label {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-cred-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--white);
  font-style: italic;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  opacity: 0.5;
}
.hero-scroll-hint span {
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.scroll-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Centered hero variant ── */
.hero-center {
  padding: 0;
  text-align: center;
  position: relative;
  min-height: 100vh;
  display: block;
}
.hero-center .hero-content {
  padding: 0;
  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
}
.hero-content-center {
  text-align: center;
  position: relative;
  width: 100%;
  min-height: 100vh;
}
/* Title sits below the watermark */
.hero-content-center .hero-title-center {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0 auto;
  font-size: clamp(2.4rem, 6.6vw, 6.4rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-align: center;
}
.hero-title-center .line { display: block; }
.hero-title-center em.italic {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
}
/* Buttons sit below the title */
.hero-actions-center {
  position: absolute;
  top: 78%;
  left: 0;
  right: 0;
  margin-top: 0;
  justify-content: center;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* One-line variant: title scales linearly with viewport so it ALWAYS fits on a single line.
   Empirically: at 4.6vw the text width stays under ~70% of viewport at every screen size. */
.hero-title.hero-title-oneline {
  max-width: none;
  font-size: 4.6vw;
  line-height: 1.05;
  letter-spacing: -0.015em;
  white-space: nowrap;
  padding: 0 16px;
}
.hero-title.hero-title-oneline .line { display: inline; }
.hero-title.hero-title-oneline em.italic {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
}
.hero-actions-center .btn-ghost { /* keep visual style consistent */ }

@media (max-width: 900px) {
  /* MOBILE HERO — redesigned from scratch, not scaled from desktop.
     Composition: large SELEQT watermark sits constrained at the top of hero,
     title stacks word-by-word in the middle, buttons sit comfortably below. */
  .hero-center {
    padding: 0;
    display: block;
    position: relative;
    min-height: 100svh;
    min-height: 100vh;
  }
  .hero-center .hero-content,
  .hero-center .hero-content-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    max-width: 460px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
    min-height: 0;
    z-index: 2;
  }

  /* Title — stack on three lines for visual rhythm.
     Line breaks come from CSS, not the markup. */
  .hero-content-center .hero-title-center,
  .hero-title.hero-title-oneline {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
    padding: 0;
    white-space: normal;
    font-size: clamp(2.2rem, 9vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.018em;
    max-width: 100%;
    text-align: center;
    text-wrap: balance;
  }
  .hero-title.hero-title-oneline .line { display: inline; }
  /* Make the gold italic word break onto its own line, magazine-style */
  .hero-title.hero-title-oneline em.italic {
    display: block;
    line-height: 1.05;
    margin: 4px 0;
    font-size: 1.15em;
  }

  /* Buttons — wider tap targets, stacked, premium spacing */
  .hero-actions-center {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 320px;
  }
  .hero-actions-center .btn-primary,
  .hero-actions-center .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 18px 24px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
  }

  /* WATERMARK — sized to fit the screen, positioned behind the title */
  .hero-wordmark {
    top: 47%;
    font-size: 16vw;
    letter-spacing: 0.12em;
    opacity: 0.5;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(244, 241, 234, 0.42);
  }

  /* Glow halos — wider, softer behind everything */
  .hero-glow,
  .hero-glow-2 {
    top: 50%;
    width: 200vw;
    max-width: none;
    height: 700px;
  }

  /* Hide scroll cue on mobile — there's no room and the page is obviously scrollable */
  .hero-scroll-hint {
    display: none;
  }
}
@media (max-width: 540px) {
  .hero-center .hero-content,
  .hero-center .hero-content-center {
    width: calc(100% - 40px);
    gap: 44px;
  }
  .hero-content-center .hero-title-center,
  .hero-title.hero-title-oneline {
    font-size: clamp(2rem, 9.5vw, 2.6rem);
  }
  .hero-wordmark { font-size: 13vw; letter-spacing: 0.18em; }
}

@media (max-width: 768px) {
  .hero { padding: 140px 0 100px; }
  .hero-credentials { gap: 32px; }
  .hero-cred-value { font-size: 0.95rem; }
  .hero-actions { margin-bottom: 64px; }
  .hero-scroll-hint { display: none; }
}

/* ============================================
   MARQUEE
   ============================================ */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  padding: 22px 0;
  background: var(--paper-soft);
}
.marquee-track {
  display: flex;
  /* NB: do NOT use flex `gap` here. `gap` only inserts space BETWEEN items,
     not after the last one, which makes the two copies of the track
     asymmetrical (an internal gap between copies but no trailing gap after
     copy 2). The animation translates 0 -> -50% of track width and that ends
     up half-a-gap off from the start of copy 2, causing a visible jump on
     each loop. Using margin-right on every item makes the spacing symmetric
     so -50% lands exactly at the start of copy 2. */
  white-space: nowrap;
  animation: marqueeScroll 14s linear infinite;
}
.marquee-track span {
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-block;
  margin-right: 56px;
  /* Short transition for the JS-driven cursor parallax (see main.js). Was
     previously 0.28s — felt sluggish at high cursor velocities. 0.16s keeps
     the smoothing without lag. */
  transition: transform 0.16s var(--ease-out), color 0.16s var(--ease-out);
  will-change: transform;
}
.marquee-track .dot {
  color: var(--gold);
  /* The dot doesn't participate in the cursor parallax — leaves it as a steady
     anchor between the moving labels. */
  transition: none;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================
   ABOUT
   ============================================ */
.about-strip {
  padding: 160px 0 100px;
  background: var(--paper);
  position: relative;
  color: var(--ink-strong);
}
.about-header {
  text-align: center;
  margin-bottom: 72px;
}
.about-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--navy);
  line-height: 1;
  display: inline-block;
  padding-bottom: 24px;
  position: relative;
}
.about-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: var(--gold);
}

.about-body {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.about-body p {
  color: var(--ink-soft);
  margin-bottom: 24px;
  font-size: 1.02rem;
  line-height: 1.9;
  font-weight: 300;
}
.about-body p:last-child { margin-bottom: 0; }

.about-cta-wrap {
  margin-top: 40px;
}
.about-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 8px;
  transition: gap 0.4s var(--ease-out), border-color 0.3s;
}
.about-cta-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.about-cta:hover { gap: 22px; border-color: var(--gold); }
.about-cta:hover .about-cta-arrow { transform: translateX(6px); }

@media (max-width: 900px) {
  .about-strip { padding: 100px 0; }
  .about-header { margin-bottom: 56px; }
  .about-body { text-align: left; }
}

/* ============================================
   STATS STRIP
   ============================================ */
.stats-strip {
  background: var(--paper);
  padding: 0 0 100px;
  position: relative;
}
.stats-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 80px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
  border-left: 1px solid var(--ink-line);
  position: relative;
}
.stat:first-child { border-left: none; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 300;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  /* See authoritative mobile stylesheet at end of file */
}

/* ============================================
   SERVICES — EDITORIAL LIST
   ============================================ */
.services {
  padding: 160px 0 180px;
  background: var(--navy-mid);
  position: relative;
  overflow: hidden;
}
.services::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.services-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 100px;
}
.services-header .section-title { max-width: 580px; }
.services-intro {
  font-size: 1rem;
  color: var(--white-dim);
  line-height: 1.8;
  max-width: 460px;
  padding-bottom: 8px;
}

.services-list {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-strong);
}

.service-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 48px;
  align-items: center;
  padding: 40px 16px;
  border-bottom: var(--rule);
  text-decoration: none;
  color: var(--white);
  position: relative;
  transition: padding 0.5s var(--ease-out), background 0.4s;
}
.service-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--gold-faint), transparent 80%);
  transition: width 0.5s var(--ease-out);
  pointer-events: none;
}
.service-row:hover { padding-left: 32px; padding-right: 0; }
.service-row:hover::before { width: 100%; }

.service-num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--gold);
  position: relative;
  z-index: 1;
}
.service-num::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.4;
  margin-left: 14px;
  vertical-align: middle;
  transition: width 0.5s var(--ease-out), opacity 0.4s;
}
.service-row:hover .service-num::after { width: 56px; opacity: 1; }

.service-body {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.2fr;
  gap: 48px;
  align-items: baseline;
  position: relative;
  z-index: 1;
}
.service-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--white);
  letter-spacing: -0.005em;
  transition: color 0.4s, transform 0.5s var(--ease-out);
}
.service-row:hover .service-name { color: var(--gold); }
.service-desc {
  font-size: 0.92rem;
  color: var(--white-dim);
  line-height: 1.7;
  max-width: 460px;
}

.service-arrow {
  position: relative;
  z-index: 1;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--white-dim);
  font-size: 1rem;
  transition: all 0.4s var(--ease-out);
}
.service-row:hover .service-arrow {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--navy);
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .services { padding: 100px 0 120px; }
  .services-header { grid-template-columns: 1fr; gap: 32px; margin-bottom: 60px; }
  .service-row { grid-template-columns: 60px 1fr 40px; gap: 24px; padding: 32px 8px; }
  .service-row:hover { padding-left: 16px; }
  .service-body { grid-template-columns: 1fr; gap: 14px; }
  .service-num::after { display: none; }
  .service-arrow { width: 40px; height: 40px; font-size: 0.85rem; }
}


/* ============================================
   SERVICES — VERTICAL CAROUSEL
   ============================================ */
.services-carousel {
  /* Full-section gradient from paper cream to deep ink navy.
     Cleaner path that skips a muddy grey middle. */
  background: linear-gradient(to bottom,
    var(--paper) 0%,
    var(--paper) 8%,
    #e6dccb 22%,
    #b8b3a8 42%,
    #4a5575 62%,
    #1a2647 80%,
    var(--ink) 94%,
    var(--ink) 100%);
  padding: 120px 0 0;
  color: var(--ink-strong);
  position: relative;
}
.services-carousel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--ink-line);
}

.sc-header {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 880px;
  position: relative;
  padding-bottom: 24px;
}
.sc-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--navy);
  line-height: 1;
  display: inline-block;
  padding-bottom: 24px;
  position: relative;
}
.sc-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: var(--gold);
}

.sc-stage {
  position: relative;
  display: block;
  max-width: 920px;
  margin: 0 auto;
}

/* Left progress index — absolutely positioned so it doesn't shift the list */
.sc-index {
  position: absolute;
  top: 0;
  left: -130px;
  bottom: 0;
  width: 100px;
  pointer-events: none;
}
.sc-index-inner {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
}
.sc-index-track {
  position: relative;
  width: 1px;
  height: 200px;
  background: rgba(255, 255, 255, 0.25);
  margin-bottom: 20px;
  mix-blend-mode: difference;
}
.sc-index-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: var(--gold);
  transition: height 0.5s var(--ease-out);
}
.sc-index-current {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transition: color 0.4s;
}
.sc-index-total {
  font-family: var(--font-display);
  font-size: 1rem;
  color: rgba(244, 241, 234, 0.5);
  font-variant-numeric: tabular-nums;
  mix-blend-mode: difference;
}

/* Carousel list */
.sc-list {
  display: flex;
  flex-direction: column;
}
.sc-item {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 70px 48px 70px 60px;
  margin: 0 -48px 0 -60px;
  opacity: 0.30;
  filter: blur(0.5px);
  transform: scale(0.985);
  transform-origin: left center;
  transition:
    opacity 0.65s var(--ease-out),
    filter 0.65s var(--ease-out),
    transform 0.65s var(--ease-out),
    color 0.5s var(--ease-out);
}

/* Each card inherits the background gradient by being transparent */
.sc-item { background: transparent; }

/* Subtle divider between rows */
.sc-item + .sc-item::before {
  content: '';
  position: absolute;
  top: 0; left: 60px; right: 48px;
  height: 1px;
  background: rgba(10, 26, 53, 0.10);
  z-index: 1;
}
/* For the last (darkest) card, divider becomes light */
.sc-item[data-i="3"] + .sc-item::before {
  background: rgba(244, 241, 234, 0.10);
}

/* Active-state backing — gives the focused card a stable surface
   regardless of where the gradient sits behind it. */
.sc-item::after {
  content: '';
  position: absolute;
  inset: 18px 0 18px 0;
  background: transparent;
  z-index: 0;
  pointer-events: none;
  transition: background 0.5s var(--ease-out), backdrop-filter 0.5s var(--ease-out);
}
.sc-item-inner { position: relative; z-index: 1; }

/* Light-zone cards (0, 1, 2): cream backing when active */
.sc-item[data-i="0"].is-active::after,
.sc-item[data-i="1"].is-active::after,
.sc-item[data-i="2"].is-active::after {
  background: rgba(245, 241, 232, 0.65);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
/* Dark-zone card (3): navy backing when active */
.sc-item[data-i="3"].is-active::after {
  background: rgba(6, 14, 28, 0.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
/* Lighter version for "near" cards so they still get some surface */
.sc-item[data-i="0"].is-near::after,
.sc-item[data-i="1"].is-near::after,
.sc-item[data-i="2"].is-near::after {
  background: rgba(245, 241, 232, 0.25);
}
.sc-item[data-i="3"].is-near::after {
  background: rgba(6, 14, 28, 0.25);
}

.sc-item.is-active {
  opacity: 1;
  filter: none;
  transform: scale(1);
}
.sc-item.is-near {
  opacity: 0.7;
  filter: blur(0px);
}

/* Card text colors — keep cards 0-2 on dark text since they get a cream surface,
   only card 3 gets light text on its navy surface */
.sc-item[data-i="0"] .sc-name,
.sc-item[data-i="1"] .sc-name,
.sc-item[data-i="2"] .sc-name { color: var(--navy); }
.sc-item[data-i="3"] .sc-name { color: var(--white); }

.sc-item[data-i="0"] .sc-desc,
.sc-item[data-i="1"] .sc-desc,
.sc-item[data-i="2"] .sc-desc { color: var(--ink-soft); }
.sc-item[data-i="3"] .sc-desc { color: var(--white-dim); }

.sc-item-inner {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 36px;
  align-items: baseline;
}
.sc-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
}
.sc-num::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  transition: width 0.5s var(--ease-out), opacity 0.4s;
}
.sc-item.is-active .sc-num::after { width: 44px; opacity: 1; }

.sc-content { max-width: 700px; }
.sc-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin-bottom: 22px;
  transition: color 0.6s var(--ease-out);
}
.sc-name em { font-style: italic; color: var(--gold); font-weight: 300; }
.sc-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 26px;
  max-width: 580px;
  transition: color 0.6s var(--ease-out);
}
.sc-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  padding-bottom: 6px;
  transition: gap 0.4s var(--ease-out), border-color 0.4s;
}
.sc-item.is-active .sc-cta { border-color: var(--gold-dim); }
.sc-cta-arrow { transition: transform 0.4s var(--ease-out); display: inline-block; }
.sc-item:hover .sc-cta { gap: 22px; border-color: var(--gold); }
.sc-item:hover .sc-cta-arrow { transform: translateX(6px); }

@media (max-width: 900px) {
  .services-carousel { padding: 100px 0 0; }
  .sc-header { margin-bottom: 40px; padding-bottom: 16px; }
  .sc-stage { display: block; max-width: 100%; }
  .sc-index { display: none; }
  .sc-item {
    padding: 48px 24px;
    margin: 0 -24px;
    opacity: 1;
    filter: none;
    transform: none;
  }
  /* On mobile, all cards are visible — give every card the proper backing
     surface. Use solid opaque colors to mask the gradient behind. */
  .sc-item[data-i="0"]::after,
  .sc-item[data-i="1"]::after,
  .sc-item[data-i="2"]::after {
    background: var(--paper) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    inset: 0 !important;
  }
  .sc-item[data-i="3"]::after {
    background: var(--ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    inset: 0 !important;
  }
  .sc-item + .sc-item::before { left: 24px; right: 24px; z-index: 2; }
  .sc-item-inner { grid-template-columns: 60px 1fr; gap: 18px; }
  .sc-num { padding-top: 8px; }
  .sc-num::after { display: none; }
  .sc-name { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .sc-item .sc-cta { border-color: var(--gold-dim); }
}



.statement-band {
  padding: 140px 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.statement-band::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; max-width: 900px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(200,169,110,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.statement {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.statement em { font-style: italic; color: var(--gold); }
.statement-attribution {
  margin-top: 48px;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white-dim);
  position: relative;
  z-index: 1;
}

/* ============================================
   PRINCIPLES (replaces "Why SELEQT")
   ============================================ */
.principles {
  padding: 160px 0;
  background: var(--navy-mid);
  position: relative;
  overflow: hidden;
}
.principles-header { margin-bottom: 100px; max-width: 720px; }
.principles-header .section-title { margin-top: 20px; }

.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border);
}
.principle {
  background: var(--navy-mid);
  padding: 56px 48px;
  position: relative;
  transition: background 0.4s;
}
.principle:hover { background: var(--navy-light); }
.principle::before {
  content: '';
  position: absolute;
  top: 56px; left: 0;
  width: 2px; height: 32px;
  background: var(--gold);
  transform: scaleY(0.5);
  transform-origin: top;
  transition: transform 0.5s var(--ease-out);
}
.principle:hover::before { transform: scaleY(1); }

.principle-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 28px;
}
.principle h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 18px;
  color: var(--white);
  letter-spacing: -0.005em;
}
.principle h3 em { font-style: italic; color: var(--gold); }
.principle p {
  font-size: 0.94rem;
  color: var(--white-dim);
  line-height: 1.8;
  max-width: 460px;
}

@media (max-width: 900px) {
  .principles { padding: 100px 0; }
  .principles-header { margin-bottom: 56px; }
  .principles-grid { grid-template-columns: 1fr; }
  .principle { padding: 40px 28px; }
  .principle::before { top: 40px; }
}

/* ============================================
   WHO WE SERVE
   ============================================ */
.serve {
  padding: 160px 0;
  background: var(--navy);
}
.serve-header { margin-bottom: 80px; max-width: 720px; }
.serve-header .section-title { margin-top: 20px; }
.serve-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.serve-col {
  padding: 48px 40px 48px 0;
  border-left: var(--rule);
  padding-left: 40px;
  position: relative;
}
.serve-col:first-child { border-left: none; padding-left: 0; }
.serve-col-tag {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.serve-col h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--white);
}
.serve-col p {
  font-size: 0.92rem;
  color: var(--white-dim);
  line-height: 1.8;
}
.serve-col ul {
  list-style: none;
  margin-top: 28px;
}
.serve-col li {
  font-size: 0.85rem;
  color: var(--white-dim);
  padding: 10px 0;
  border-top: var(--rule);
  display: flex;
  align-items: center;
  gap: 12px;
}
.serve-col li::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .serve { padding: 100px 0; }
  .serve-grid { grid-template-columns: 1fr; }
  .serve-col { border-left: none; padding-left: 0; padding: 36px 0; border-top: var(--rule); }
  .serve-col:first-child { border-top: none; padding-top: 0; }
}

/* ============================================
   CONTACT — kept dark navy for closing bookend
   ============================================ */
.contact-section {
  padding: 100px 0 160px;
  background: var(--ink);
  position: relative;
  color: var(--white);
}
.contact-section .section-title { color: var(--white); }
.contact-section .section-title em { color: var(--gold); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 120px;
  align-items: start;
}
.contact-left .section-title { margin-bottom: 56px; }
.contact-info {
  display: flex; flex-direction: column; gap: 28px;
  padding-top: 32px;
  border-top: 1px solid rgba(244, 241, 234, 0.16);
}
.contact-item { display: flex; flex-direction: column; gap: 6px; }
.contact-label {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact-item a, .contact-item span {
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  transition: color 0.3s;
}
.contact-item a:hover { color: var(--gold); }

.response-note {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 241, 234, 0.16);
  font-size: 0.78rem;
  color: var(--white-dim);
  line-height: 1.7;
}
.response-note span { color: var(--gold); }

.contact-form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-group { display: flex; flex-direction: column; gap: 10px; }
.form-group label {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(244, 241, 234, 0.22);
  color: var(--white);
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(244,241,234,0.22); font-weight: 300; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-bottom-color: var(--gold); }
.form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23c8a96e' d='M4 6l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 4px center; background-size: 14px; padding-right: 28px; }
.form-group select option { background: var(--ink); color: var(--white); }
.form-group textarea { resize: vertical; min-height: 100px; border: 1px solid rgba(244, 241, 234, 0.18); padding: 16px; }
.form-group textarea:focus { border-color: var(--gold-dim); }

/* ── Custom select (matches form field styling) ── */
.custom-select {
  position: relative;
  width: 100%;
}
.cs-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(244, 241, 234, 0.22);
  color: var(--white);
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s;
}
.cs-trigger:hover,
.cs-trigger:focus,
.custom-select.is-open .cs-trigger { border-bottom-color: var(--gold); outline: none; }
.cs-value { flex: 1; color: var(--white); }
.cs-value.cs-placeholder { color: rgba(244, 241, 234, 0.32); }
.cs-caret {
  font-size: 0.7rem;
  color: var(--gold);
  transition: transform 0.3s var(--ease-out);
  display: inline-block;
  line-height: 1;
}
.custom-select.is-open .cs-caret { transform: rotate(180deg); }

.cs-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(2, 8, 18, 0.96);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(184, 146, 78, 0.22);
  padding: 6px 0;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
  box-shadow: 0 24px 60px rgba(2, 8, 18, 0.5);
}
.custom-select.is-open .cs-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0s;
}
.cs-menu li {
  padding: 12px 18px;
  font-size: 0.92rem;
  font-weight: 300;
  color: rgba(244, 241, 234, 0.72);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: var(--font-body);
  border-left: 2px solid transparent;
}
.cs-menu li:hover,
.cs-menu li:focus,
.cs-menu li.is-highlighted {
  background: rgba(184, 146, 78, 0.10);
  color: var(--white);
  border-left-color: var(--gold);
  outline: none;
}
.cs-menu li.is-selected {
  color: var(--gold);
  background: rgba(184, 146, 78, 0.06);
}
.cs-menu::-webkit-scrollbar { width: 4px; }
.cs-menu::-webkit-scrollbar-track { background: transparent; }
.cs-menu::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

.form-footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.form-footer .privacy-note {
  font-size: 0.74rem;
  color: var(--white-dim);
  line-height: 1.6;
  max-width: 360px;
}

@media (max-width: 900px) {
  .contact-section { padding: 100px 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 64px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================
   FOOTER — closing dark band
   ============================================ */
.footer {
  background: var(--ink);
  padding: 100px 0 32px;
  border-top: 1px solid rgba(244, 241, 234, 0.10);
  position: relative;
  overflow: hidden;
  color: var(--white);
}
.footer .logo { color: var(--white); }
.footer .footer-top, .footer .footer-bottom {
  border-color: rgba(244, 241, 234, 0.10);
}
.footer-wordmark {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 16rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 0.9;
  background: linear-gradient(180deg, rgba(244, 241, 234, 0.92) 0%, rgba(184, 146, 78, 0.65) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-align: center;
  margin: 60px 0 0;
  user-select: none;
  pointer-events: none;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(244, 241, 234, 0.10);
}
.footer-brand .logo {
  font-size: 1.3rem;
  display: block;
  margin-bottom: 20px;
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.22em;
}
.footer-brand p {
  color: var(--white-dim);
  font-size: 0.9rem;
  max-width: 280px;
  line-height: 1.75;
  font-family: var(--font-display);
  font-style: italic;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col h5 {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 400;
}
.footer-col a, .footer-col span {
  color: var(--white-dim);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.3s;
  font-weight: 300;
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  padding-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.footer-bottom p {
  font-size: 0.72rem;
  color: rgba(244,241,234,0.32);
  line-height: 1.75;
}
.footer-bottom .disclaimer { max-width: 600px; }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.delay-1 { transition-delay: 0.12s; }
.reveal.delay-2 { transition-delay: 0.24s; }
.reveal.delay-3 { transition-delay: 0.36s; }
.reveal.delay-4 { transition-delay: 0.48s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================
   SUB-PAGE STYLES — match main site theme
   ============================================ */

/* Hero — deep navy (matches main hero) */
.sub-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 200px 0 100px;
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.sub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244,241,234,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,234,0.025) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
}
.sub-hero::after {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 90vw; max-width: 1100px; height: 1100px;
  background: radial-gradient(circle at 30% 40%, rgba(26, 58, 107, 0.5) 0%, transparent 55%);
  filter: blur(60px);
  pointer-events: none;
}
.sub-hero-orb { display: none; }  /* legacy element, hidden */
.sub-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 auto;
}
.sub-hero .back-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  margin-bottom: 48px;
  transition: gap 0.4s var(--ease-out), color 0.3s;
}
.sub-hero .back-link:hover { gap: 18px; color: var(--gold-light); }
.sub-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  font-weight: 300;
  line-height: 1.04;
  margin-bottom: 32px;
  letter-spacing: -0.02em;
  color: var(--white);
}
.sub-hero h1 em { font-style: italic; color: var(--gold); font-weight: 300; }
.sub-hero p.lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300;
  color: var(--white-dim);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.75;
}
.sub-hero .section-tag {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.sub-hero .section-tag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

/* Body — paper */
.sub-content {
  padding: 140px 0;
  background: var(--paper);
  color: var(--ink-strong);
  position: relative;
}
.sub-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--ink-line);
}
.sub-content-inner {
  max-width: 820px;
  margin: 0 auto;
}
.sub-intro {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: 56px;
  text-align: center;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--ink-line);
}
.sub-body p {
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.9;
  margin-bottom: 24px;
}

/* Feature grid */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 80px 0;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.feature-item {
  padding: 48px 40px;
  background: var(--paper);
  transition: background 0.3s, transform 0.5s var(--ease-out);
  position: relative;
}
.feature-item::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 0;
  width: 2px;
  height: 24px;
  background: var(--gold);
  transform: scaleY(0.4);
  transform-origin: top;
  transition: transform 0.5s var(--ease-out);
}
.feature-item:hover { background: #efe9dc; }
.feature-item:hover::before { transform: scaleY(1); }
.feature-item h4 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
/* Parenthetical expansion next to an abbreviation (e.g. "SIF (Specialised...)").
   Reads as a quieter qualifier than the abbreviation itself. */
.feature-item h4 .feat-abbr {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  vertical-align: middle;
  position: relative;
  top: -0.18em;
}
@media (max-width: 768px) {
  .feature-item h4 .feat-abbr {
    display: block;
    margin: 6px 0 0 0;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    top: 0;
  }
}
.feature-item p {
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0;
}

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

/* ============================================
   ABOUT PAGE — Principles block
   ============================================ */
.about-principles {
  margin: 100px 0 0;
  padding-top: 80px;
  border-top: 1px solid var(--ink-line);
}
.about-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 300;
  color: var(--navy);
  text-align: center;
  letter-spacing: -0.005em;
  margin-bottom: 60px;
}
.about-principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 64px;
}
.about-principle {
  position: relative;
  padding-left: 28px;
  border-left: 1px solid var(--ink-line);
}
.about-principle .ap-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 18px;
}
.about-principle h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.about-principle h3 em { font-style: italic; color: var(--gold); font-weight: 300; }
.about-principle p {
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 768px) {
  .about-principles { margin-top: 64px; padding-top: 56px; }
  .about-principles-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================
   ABOUT PAGE — Meet the Team
   ============================================ */
.team-section {
  padding: 140px 0;
  background: var(--paper-soft);
  position: relative;
}
.team-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--ink-line);
}
.team-header {
  text-align: center;
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.team-header .section-tag { justify-content: center; }
.team-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 300;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.team-title em { font-style: italic; color: var(--gold); font-weight: 300; }
.team-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto;
}

.team-grid {
  display: grid;
  /* Four compact cards per row — see comment at .team-card for sizing. */
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.team-card {
  background: var(--paper);
  /* Smaller padding so the card is genuinely compact, more 'badge' than 'tile'. */
  padding: 22px 20px 22px;
  position: relative;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.team-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 24px;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease-out);
}
.team-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -28px rgba(10, 26, 53, 0.22); }
.team-card:hover::before { width: 48px; }

.team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--paper-soft) 0%, var(--paper-deep) 100%);
  margin-bottom: 16px;
  position: relative;
}
.team-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 26, 53, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 26, 53, 0.04) 1px, transparent 1px);
  background-size: 18px 18px;
}
.team-card-body { position: relative; }
.team-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.team-role {
  font-family: var(--font-body);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.team-bio {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .team-section { padding: 90px 0; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 100%; }
}

/* CTA — deep navy, matches contact section */
.sub-cta-section {
  padding: 140px 0;
  background: var(--ink);
  color: var(--white);
  text-align: center;
  position: relative;
}
.sub-cta-section h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 300;
  margin-bottom: 32px;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.sub-cta-section h3 em { font-style: italic; color: var(--gold); font-weight: 300; }
.sub-cta-section p {
  color: var(--white-dim);
  margin: 0 auto 48px;
  font-size: 1rem;
  max-width: 540px;
  line-height: 1.75;
}

/* ============================================
   FLOATING BACK BUTTON (sub-pages)
   ============================================ */
.floating-back {
  position: fixed;
  left: 32px;
  top: 96px;  /* sits just below the navbar */
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-dim);
  text-decoration: none;
  background: rgba(6, 14, 28, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(244, 241, 234, 0.08);
  border-radius: 999px;
  transition:
    color 0.3s,
    background 0.3s,
    border-color 0.3s,
    padding 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    top 0.4s var(--ease-out);
}
.floating-back .fb-arrow {
  color: var(--gold);
  font-size: 0.95rem;
  transition: transform 0.4s var(--ease-out);
  line-height: 1;
}
.floating-back:hover {
  color: var(--white);
  background: rgba(6, 14, 28, 0.85);
  border-color: rgba(200, 169, 110, 0.45);
  box-shadow: 0 12px 32px -12px rgba(6, 14, 28, 0.5);
  padding-left: 18px;
  padding-right: 22px;
  transform: translateX(2px);
}
.floating-back:hover .fb-arrow { transform: translateX(-4px); }

/* On sub-content (paper) sections, invert the colour scheme so it stays visible. */
.floating-back.is-on-paper {
  background: rgba(245, 241, 232, 0.82);
  border-color: rgba(10, 26, 53, 0.12);
  color: var(--ink-soft);
}
.floating-back.is-on-paper:hover {
  background: rgba(245, 241, 232, 0.95);
  color: var(--navy);
  border-color: var(--gold-dim);
}

@media (max-width: 900px) {
  .floating-back {
    left: 16px;
    top: 76px;
    padding: 10px 16px 10px 12px;
    font-size: 0.62rem;
  }
}
@media (max-width: 480px) {
  /* Collapse to icon-only on tight screens */
  .floating-back .fb-text { display: none; }
  .floating-back { padding: 12px 14px; }
}

/* Sub-page section-tag (used outside hero too) */
.section-tag {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.section-tag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

/* Sub-page footer — sits on dark already, matches main footer style */
body > footer.footer {
  padding: 80px 0 32px;
}
body > footer.footer .footer-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 0;
  border: none;
}
@media (max-width: 700px) {
  body > footer.footer .footer-bottom { grid-template-columns: 1fr; }
}


/* ============================================================================
   MOBILE STYLESHEET — authoritative, designed phone-first, not scaled-down.
   Appended at end so it wins on cascade. Applied below 900px.
   ============================================================================ */
@media (max-width: 900px) {

  /* ── HERO ─────────────────────────────────────────────────────────────── */
  /* Three discrete vertical zones with breathing room.
     Watermark in upper third, title in middle, buttons in lower third.
     No more absolute centering of the whole content block. */
  .hero-center {
    padding: 0 !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    position: relative !important;
    display: block !important;
    overflow: hidden;
  }

  /* The content block (title + buttons) sits with the title closer to the watermark. */
  .hero-center .hero-content,
  .hero-center .hero-content-center {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 48px) !important;
    max-width: 460px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 56px !important;
    z-index: 2 !important;
  }

  /* Title sits cleanly below the watermark with its own dedicated zone.
     One-line variant: forced to a single line at every width via vw sizing.
     Increased size since we're committed to one line. */
  .hero-content-center .hero-title-center,
  .hero-title.hero-title-oneline,
  .hero-title.hero-title-center.hero-title-oneline {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 5.6vw !important;
    line-height: 1.2 !important;
    letter-spacing: -0.012em !important;
    max-width: 100% !important;
    text-align: center !important;
    color: var(--white) !important;
  }
  .hero-title.hero-title-oneline .line { display: inline !important; }
  /* Inline italic — stays on the title line, not broken to a new line */
  .hero-title em.italic,
  .hero-title.hero-title-oneline em.italic {
    display: inline !important;
    font-style: italic !important;
    color: var(--gold) !important;
    font-weight: 300 !important;
    font-size: 1em !important;
    line-height: inherit !important;
    margin: 0 !important;
  }

  /* WATERMARK — sits above title with comfortable but not excessive gap.
     Centered horizontally, anchored higher up the viewport.
     Note: opacity intentionally has NO !important so the intro-active rule
     (html.intro-active .hero-wordmark { opacity: 0 }) can hide the watermark
     during the masthead intro, and the wordmarkSettle animation can fade it
     in afterwards. --wordmark-end-opacity sets the settle animation's end
     value to match the mobile resting state. */
  .hero-wordmark {
    top: 36% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 18vw !important;
    letter-spacing: 0.12em !important;
    opacity: 0.85;
    --wordmark-end-opacity: 0.85;
    -webkit-text-stroke-width: 1px !important;
    -webkit-text-stroke-color: rgba(244, 241, 234, 0.42) !important;
    white-space: nowrap !important;
  }

  /* GLOW HALOS — anchored near the watermark, not the title */
  .hero-glow {
    top: 36% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 200vw !important;
    max-width: none !important;
    height: 600px !important;
  }
  .hero-glow-2 {
    top: 44% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 180vw !important;
    max-width: none !important;
    height: 500px !important;
  }

  /* BUTTONS — full width, generous, premium */
  .hero-actions,
  .hero-actions-center {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 320px !important;
  }
  .hero-actions-center .btn-primary,
  .hero-actions-center .btn-ghost,
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
    padding: 18px 24px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.2em !important;
  }

  /* Hide scroll cue — no room and the page is obviously scrollable */
  .hero-scroll-hint { display: none !important; }

  /* ── NAV ──────────────────────────────────────────────────────────────── */
  .nav-inner { padding: 16px 20px !important; }
  #navbar.scrolled .nav-inner { padding: 12px 20px !important; }
  .nav-links { display: none !important; }
  .hamburger { display: block !important; }

  /* Mobile menu panel — dark navy, premium */
  .mobile-menu {
    background: rgba(6, 14, 28, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.08) !important;
    padding: 24px 24px 32px !important;
    gap: 0 !important;
  }
  .mobile-menu a {
    color: rgba(244, 241, 234, 0.92) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(244, 241, 234, 0.06) !important;
    text-transform: uppercase !important;
  }
  .mobile-menu a:last-child {
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
    text-align: center !important;
    margin-top: 16px !important;
    padding: 14px 0 !important;
  }
  #navbar.scrolled .mobile-menu {
    background: rgba(245, 241, 232, 0.98) !important;
    border-top-color: var(--ink-line) !important;
  }
  #navbar.scrolled .mobile-menu a {
    color: var(--navy) !important;
    border-bottom-color: var(--ink-line) !important;
  }
  #navbar.scrolled .mobile-menu a:last-child {
    color: var(--gold) !important;
    border-color: var(--gold) !important;
  }

  /* ── ABOUT ───────────────────────────────────────────────────────────── */
  .about-strip { padding: 120px 24px 80px !important; }
  .about-header { margin-bottom: 56px !important; }
  .about-title { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
  .about-body p { font-size: 1.05rem !important; line-height: 1.85 !important; margin-bottom: 24px !important; }
  .about-cta-wrap { margin-top: 56px !important; }

  /* ── STATS ───────────────────────────────────────────────────────────── */
  /* 2x2 clean grid. No dividers — they look broken on mobile.
     Each stat sits in its own quadrant with generous breathing room. */
  .stats-strip { padding: 0 24px 100px !important; }
  .stats-strip::before { display: none !important; }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 56px 24px !important;
    padding-top: 72px !important;
    border-top: 1px solid var(--ink-line) !important;
    max-width: 100% !important;
  }
  .stats-grid .stat,
  .stats-grid .stat:first-child,
  .stats-grid .stat:nth-child(2),
  .stats-grid .stat:nth-child(3),
  .stats-grid .stat:nth-child(4),
  .stats-grid .stat:nth-child(odd),
  .stats-grid .stat:nth-child(even) {
    padding: 0 !important;
    gap: 14px !important;
    border: none !important;
    text-align: center !important;
  }
  .stat-num {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1 !important;
  }
  .stat-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    line-height: 1.5 !important;
  }

  /* ── SERVICES CAROUSEL ───────────────────────────────────────────────── */
  .services-carousel { padding: 100px 0 0 !important; }
  .sc-header { margin-bottom: 64px !important; padding: 0 24px 16px !important; }
  .sc-stage {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .sc-index { display: none !important; }
  .sc-list { padding: 0 !important; }

  .sc-item {
    padding: 64px 24px !important;
    margin: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    position: relative !important;
  }
  /* Scroll-driven entrance animation for mobile.
     Each card slides up and fades in as it enters the viewport. */
  .sc-item.sc-mobile-reveal {
    opacity: 0 !important;
    transform: translateY(36px) !important;
    transition:
      opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .sc-item.sc-mobile-reveal.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  /* Stagger the inner elements so name, desc, and CTA cascade in. */
  .sc-item.sc-mobile-reveal .sc-num,
  .sc-item.sc-mobile-reveal .sc-name,
  .sc-item.sc-mobile-reveal .sc-desc,
  .sc-item.sc-mobile-reveal .sc-cta {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sc-item.sc-mobile-reveal.visible .sc-num { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
  .sc-item.sc-mobile-reveal.visible .sc-name { transition-delay: 0.18s; opacity: 1; transform: translateY(0); }
  .sc-item.sc-mobile-reveal.visible .sc-desc { transition-delay: 0.28s; opacity: 1; transform: translateY(0); }
  .sc-item.sc-mobile-reveal.visible .sc-cta { transition-delay: 0.38s; opacity: 1; transform: translateY(0); }

  /* All cards visible at full opacity on mobile — give every card a SOLID
     opaque backing so it never sits on the muddy mid-gradient */
  .sc-item[data-i="0"]::after,
  .sc-item[data-i="1"]::after,
  .sc-item[data-i="2"]::after {
    inset: 0 !important;
    background: var(--paper) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .sc-item[data-i="3"]::after {
    inset: 0 !important;
    background: var(--ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .sc-item + .sc-item::before {
    left: 24px !important;
    right: 24px !important;
    z-index: 2 !important;
  }
  .sc-item-inner {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    gap: 16px !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .sc-num {
    font-size: 0.75rem !important;
    padding-top: 12px !important;
    letter-spacing: 0.18em !important;
  }
  .sc-num::after { display: none !important; }
  .sc-name {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
  }
  .sc-desc {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    margin-bottom: 32px !important;
  }
  .sc-cta {
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    border-color: var(--gold-dim) !important;
  }

  /* ── CONTACT ─────────────────────────────────────────────────────────── */
  /* On mobile, restructure: title first, then form, then contact details.
     Use flex on contact-grid + order to reposition contact-info after form. */
  .contact-section { padding: 100px 0 !important; }
  .contact-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
    padding: 0 24px !important;
  }
  /* Contact-left contains the title AND contact-info.
     Flatten it into the grid so we can reorder the children. */
  .contact-left {
    display: contents !important;
  }
  /* Section title appears first */
  .contact-left .section-title {
    order: 1 !important;
    margin-bottom: 0 !important;
  }
  /* Contact info (email/phone/office) gets pushed AFTER the form */
  .contact-left .contact-info {
    order: 3 !important;
    margin-top: 16px !important;
    padding-top: 40px !important;
    border-top: 1px solid rgba(244, 241, 234, 0.10) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
  .contact-left .contact-item {
    margin: 0 !important;
  }
  /* Form sits between title and contact details */
  .contact-right {
    order: 2 !important;
  }
  .section-title {
    font-size: clamp(2.2rem, 8.5vw, 3rem) !important;
    line-height: 1.1 !important;
  }
  .contact-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
  .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .form-group label {
    margin-bottom: 10px !important;
  }
  .form-group input,
  .form-group textarea,
  .cs-trigger {
    font-size: 16px !important;
  }
  .form-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin-top: 16px !important;
  }
  .form-footer .privacy-note {
    text-align: center !important;
    max-width: 100% !important;
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }
  .form-footer .btn-primary {
    width: 100% !important;
    justify-content: center !important;
    padding: 18px 24px !important;
  }

  /* ── MARQUEE ─────────────────────────────────────────────────────────── */
  .marquee-wrap { padding: 20px 0 !important; }
  .marquee-track span {
    font-size: 0.88rem !important;
    letter-spacing: 0.26em !important;
    margin-right: 36px !important;
  }
  /* Mobile track is narrower (smaller fonts + smaller margins) than desktop,
     so the same 14s duration reads visibly slower. Shorter duration on
     mobile keeps the apparent scroll speed comparable to desktop. */
  .marquee-track {
    animation-duration: 9s !important;
  }

  /* ── FOOTER ──────────────────────────────────────────────────────────── */
  .footer { padding: 80px 0 40px !important; }
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 52px !important;
    padding: 0 24px !important;
  }
  .footer-wordmark {
    font-size: 22vw !important;
    margin: 56px 0 32px !important;
    letter-spacing: 0.04em !important;
  }
  .footer-bottom {
    padding: 32px 24px !important;
    flex-direction: column !important;
    gap: 20px !important;
    text-align: center !important;
  }
  .footer-bottom .disclaimer { font-size: 0.72rem !important; max-width: 100% !important; line-height: 1.7 !important; }

  /* ── SUB-PAGE HEROES (about, services) ───────────────────────────────── */
  .sub-hero { padding: 120px 24px 100px !important; min-height: auto !important; }
  .sub-hero-content { padding: 0 !important; }
  .sub-hero h1 { font-size: clamp(2.4rem, 9.5vw, 3.4rem) !important; line-height: 1.08 !important; }
  .sub-hero p.lead { font-size: 1.05rem !important; max-width: 100% !important; margin-top: 32px !important; line-height: 1.65 !important; }
  .sub-hero .section-tag { justify-content: center !important; font-size: 0.62rem !important; }

  .sub-content { padding: 110px 0 !important; }
  .sub-content-inner { padding: 0 24px !important; }
  .sub-intro {
    font-size: 1.3rem !important;
    line-height: 1.55 !important;
    margin-bottom: 72px !important;
  }
  .sub-body p { font-size: 1rem !important; line-height: 1.85 !important; margin-bottom: 28px !important; }

  .feature-list {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 72px 0 !important;
  }
  .feature-item { padding: 36px 24px !important; }
  .feature-item h4 { font-size: 1.15rem !important; }
  .feature-item p { font-size: 0.95rem !important; line-height: 1.8 !important; }

  .sub-cta-section { padding: 110px 24px !important; }
  .sub-cta-section h3 { font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1.1 !important; }
  .sub-cta-section p { font-size: 1rem !important; }

  /* ── ABOUT PAGE — PRINCIPLES ─────────────────────────────────────────── */
  .about-principles { margin-top: 72px !important; padding-top: 72px !important; }
  .about-principles-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .about-principle { padding-left: 24px !important; }
  .about-principle h3 { font-size: 1.3rem !important; margin-bottom: 16px !important; }
  .about-principle p { font-size: 0.98rem !important; line-height: 1.85 !important; }
  .about-section-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; margin-bottom: 56px !important; }

  /* ── ABOUT PAGE — MEET THE TEAM ──────────────────────────────────────── */
  .team-section { padding: 100px 24px !important; }
  .team-header { margin-bottom: 72px !important; gap: 22px !important; }
  .team-title { font-size: clamp(2.2rem, 8.5vw, 3rem) !important; }
  .team-lead { font-size: 1rem !important; line-height: 1.65 !important; }
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    max-width: 100% !important;
  }
  .team-card { padding: 16px 14px !important; }
  .team-photo { margin-bottom: 12px !important; }
  .team-name { font-size: 0.98rem !important; margin-bottom: 2px !important; }
  .team-role { font-size: 0.52rem !important; letter-spacing: 0.22em !important; margin-bottom: 8px !important; }
  .team-bio { font-size: 0.74rem !important; line-height: 1.55 !important; }

  /* ── FLOATING BACK ───────────────────────────────────────────────────── */
  .floating-back {
    left: 16px !important;
    top: 72px !important;
    padding: 10px 14px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.2em !important;
  }
  .floating-back:hover { transform: none !important; }
}

/* Narrow phones — tighten everything one more notch */
@media (max-width: 400px) {
  .hero-center .hero-content,
  .hero-center .hero-content-center {
    width: calc(100% - 32px) !important;
    gap: 60px !important;
  }
  .hero-title.hero-title-oneline { font-size: clamp(1.9rem, 9vw, 2.6rem) !important; }
  .hero-wordmark { font-size: 17vw !important; letter-spacing: 0.16em !important; }
  .hero-actions-center .btn-primary,
  .hero-actions-center .btn-ghost {
    padding: 16px 20px !important;
    font-size: 0.66rem !important;
  }

  .nav-inner { padding: 14px 16px !important; }
  .about-strip { padding: 70px 20px 50px !important; }
  .stats-strip { padding: 0 20px 70px !important; }
  .sc-item { padding: 40px 20px !important; }
  .sc-item-inner { grid-template-columns: 36px 1fr !important; gap: 12px !important; }
  .contact-grid { padding: 0 20px !important; }
  .sub-hero { padding: 90px 20px 70px !important; }
  .sub-content-inner { padding: 0 20px !important; }
  .footer-top { padding: 0 20px !important; }

  /* On the smallest phones, collapse floating-back label */
  .floating-back .fb-text { display: none !important; }
  .floating-back { padding: 12px 12px !important; }
}


/* ============================================================================
   HERO INTRO ANIMATION
   Plays once per session. Sequence:
   0.0s — page loads, dark navy fills screen, content hidden
   0.1s — SELEQT begins drawing via clipPath wipe (left to right)
   0.1–1.0s — letters draw in over 900ms
   1.0–1.5s — completed wordmark pauses at full opacity
   1.5–2.0s — wordmark shrinks & fades to its watermark state
   2.0s — title fades in
   2.2s — buttons fade in
   Honors prefers-reduced-motion via the pre-paint script in <head>.
   ============================================================================ */

/* While the intro is active, hide everything that's not part of the sequence. */
html.intro-active body {
  /* Lock the page so the user can't scroll during the intro */
  overflow: hidden;
}
html.intro-active #navbar {
  opacity: 0;
  transition: opacity 0.6s ease;
}
html.intro-active .hero-wordmark,
html.intro-active .hero-glow,
html.intro-active .hero-glow-2,
html.intro-active .hero-grid {
  opacity: 0;
}
html.intro-active .hero-title,
html.intro-active .hero-actions,
html.intro-active .hero-scroll-hint {
  opacity: 0;
  transform: translateY(8px);
}

/* Editorial-masthead intro stage. A flex column containing eyebrow + top rule
   + SELEQT SVG outline + bottom rule. All four pieces animate in sequence
   then fade together as the watermark settles in behind them. */
.hero-intro-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(72vw, 1100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}
html.intro-active .hero-intro-stage { opacity: 1; }
html:not(.intro-active) .hero-intro-stage { display: none; }

/* SVG inside the stage — overrides the legacy absolute positioning */
.hero-intro-stage .hero-intro-svg {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  height: auto;
  pointer-events: none;
  display: block;
}

/* Eyebrow — small caps, gold, wide tracking, like the cover of a private
   banking annual report. Starts invisible & slightly translated, slides in. */
.hero-intro-eyebrow {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 1.1vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.92);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
}

/* Hairlines flanking the wordmark. Each is a thin gold line with a soft
   gradient fade at both ends. Scales horizontally from 0 to 1 during the
   intro to give the impression of being drawn out from the centre. */
.hero-intro-rule {
  width: min(320px, 60%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.35) 12%,
    rgba(232, 201, 138, 0.85) 50%,
    rgba(200, 169, 110, 0.35) 88%,
    transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  flex-shrink: 0;
}

/* Mobile: anchor the entire stage at top:47% (where the watermark will end
   up), shrink hairlines, and ensure the eyebrow stays legible. */
@media (max-width: 900px) {
  .hero-intro-stage {
    top: 47%;
    width: min(94vw, 540px);
    gap: 14px;
  }
  .hero-intro-eyebrow {
    font-size: clamp(0.55rem, 2.2vw, 0.72rem);
    letter-spacing: 0.32em;
  }
  .hero-intro-rule {
    width: min(220px, 70%);
  }
}
@media (max-width: 540px) {
  .hero-intro-stage {
    width: min(96vw, 460px);
    gap: 12px;
  }
  .hero-intro-eyebrow {
    font-size: clamp(0.5rem, 2.4vw, 0.66rem);
    letter-spacing: 0.28em;
  }
  .hero-intro-rule {
    width: min(180px, 70%);
  }
}

/* When the intro is RUNNING (body has .intro-running), play the sequence.
   Choreography (desktop, all delays from page-load):
     0.10-0.55s  eyebrow fades in + slides up
     0.50-1.05s  top hairline draws from centre (scaleX 0 -> 1)
     0.90-2.00s  SELEQT outline wipes left -> right
     1.80-2.35s  bottom hairline draws (mirror)
     2.30-2.55s  brief hold so the composition reads
     2.55-3.10s  whole masthead fades out (introFade on the stage)
     2.85-3.65s  filled wordmark settles into position
     2.95-3.55s+ remaining hero pieces (glow, grid, nav, title, etc.) cascade in
     4.30s       cleanup (main.js removes intro classes) */
html.intro-running .hero-intro-eyebrow {
  animation: introEyebrowIn 600ms cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
}
html.intro-running .hero-intro-rule-top {
  animation: introRuleDraw 600ms cubic-bezier(0.22, 1, 0.36, 1) 500ms forwards;
}
html.intro-running .intro-wipe-rect {
  animation: introWipe 1100ms cubic-bezier(0.55, 0.05, 0.35, 1) 900ms forwards;
}
html.intro-running .hero-intro-rule-bottom {
  animation: introRuleDraw 600ms cubic-bezier(0.22, 1, 0.36, 1) 1800ms forwards;
}
html.intro-running .hero-intro-stage {
  animation: introFade 600ms cubic-bezier(0.4, 0, 0.6, 1) 2550ms forwards;
}
html.intro-running .hero-wordmark {
  animation: wordmarkSettle 800ms cubic-bezier(0.4, 0, 0.2, 1) 2850ms forwards;
}
html.intro-running .hero-glow,
html.intro-running .hero-glow-2 {
  animation: glowIn 800ms ease-out 2950ms forwards;
}
html.intro-running .hero-grid {
  animation: gridIn 800ms ease-out 3050ms forwards;
}
html.intro-running #navbar {
  animation: navIn 600ms ease-out 3200ms forwards;
}
html.intro-running .hero-title {
  animation: heroPartIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 3350ms forwards;
}
html.intro-running .hero-actions {
  animation: heroPartIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 3500ms forwards;
}
html.intro-running .hero-scroll-hint {
  animation: heroPartIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 3650ms forwards;
}

/* New keyframes for the masthead pieces */
@keyframes introEyebrowIn {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.6em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.42em; }
}
@keyframes introRuleDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Keyframes */
@keyframes introWipe {
  from { width: 0; }
  to { width: 1000px; }
}
@keyframes introFade {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@keyframes wordmarkSettle {
  /* Starts from a slightly larger state, drops into the regular watermark spot.
     The "from" state matches the intro SVG's apparent size. */
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.04);
  }
  to {
    opacity: var(--wordmark-end-opacity, 1);
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes glowIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes gridIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes navIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroPartIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile — tightened intro choreography. Same composition (eyebrow + rules +
   SELEQT), ~25% faster so phone users aren't waiting through a desktop-paced
   sequence on a small screen. Final cleanup at ~3700ms (main.js). */
@media (max-width: 900px) {
  html.intro-running .hero-intro-eyebrow {
    animation-duration: 500ms;
    animation-delay: 100ms;
  }
  html.intro-running .hero-intro-rule-top {
    animation-duration: 500ms;
    animation-delay: 400ms;
  }
  html.intro-running .intro-wipe-rect {
    animation-duration: 900ms;
    animation-delay: 700ms;
  }
  html.intro-running .hero-intro-rule-bottom {
    animation-duration: 500ms;
    animation-delay: 1500ms;
  }
  html.intro-running .hero-intro-stage {
    animation-delay: 2100ms;
  }
  /* On mobile the masthead and the settled wordmark occupy the SAME vertical
     position (both at top:47%), so any timing overlap between them reads as
     two SELEQTs crossfading on top of each other. We push the wordmark to
     start AFTER the masthead has fully faded out (stage fade ends at 2700ms,
     watermark begins at 2800ms with a 100ms breath). Downstream cascade
     pushed by 400ms to maintain rhythm. */
  html.intro-running .hero-wordmark {
    animation-delay: 2800ms;
  }
  html.intro-running .hero-glow,
  html.intro-running .hero-glow-2 {
    animation-delay: 2900ms;
  }
  html.intro-running .hero-grid {
    animation-delay: 3000ms;
  }
  html.intro-running #navbar {
    animation-delay: 3150ms;
  }
  html.intro-running .hero-title {
    animation-delay: 3300ms;
  }
  html.intro-running .hero-actions {
    animation-delay: 3450ms;
  }
  html.intro-running .hero-scroll-hint {
    animation-delay: 3600ms;
  }
}

/* ============================================================================
   MOTION ENHANCEMENTS
   Additive polish on top of the foundational styles above. Includes:
   1. Magnetic CTA hooks
   2. Slow breathing on the hero wordmark
   3. Cursor-tracked hero glow easing
   4. Split-text reveal primitives (words slide up from a clipped baseline)
   5. Marquee pause-on-hover + variable speed
   6. Outbound page-transition curtain
   7. Carousel number-flip animation
   Honors prefers-reduced-motion at the bottom.
   ============================================================================ */

/* 1 — Magnetic CTA hooks. JS writes inline transform on hover; this just primes
   the GPU layer and overrides the existing translateY(-2px) hover lift so the
   pointer-following motion reads cleanly. */
.btn-primary.magnetic,
.btn-ghost.magnetic {
  will-change: transform;
}
.btn-primary.magnetic:hover,
.btn-ghost.magnetic:hover {
  transform: none;
}

/* 2 — Wordmark breathing. Pulses both scale AND stroke colour for visible
   motion. Stroke colours are stored in CSS variables so mobile (which uses
   a brighter base stroke at rgba(244,241,234,0.42)) can override and pulse
   from bright to brighter, not from dim to bright. */
.hero-wordmark {
  --breathe-dim: rgba(244, 241, 234, 0.10);
  --breathe-lit: rgba(244, 241, 234, 0.26);
  animation: wordmarkBreathe 6s ease-in-out 2.5s infinite;
}
@media (max-width: 900px) {
  .hero-wordmark {
    /* Mobile wordmark has stroke 0.42 by default — pulse stays in that range */
    --breathe-dim: rgba(244, 241, 234, 0.42);
    --breathe-lit: rgba(244, 241, 234, 0.66);
  }
}
@keyframes wordmarkBreathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    -webkit-text-stroke-color: var(--breathe-dim);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.035);
    -webkit-text-stroke-color: var(--breathe-lit);
  }
}

/* 3 — Hero glow ease. Smooth transition so JS-driven translates feel like
   floating light. JS now uses larger offsets (see main.js) so the parallax
   is properly visible. */
.hero-glow,
.hero-glow-2 {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4 — Split-text reveal. Each word is wrapped into .split-word > .split-word-inner.
   The outer clips, the inner slides up. Triggered when the parent .reveal becomes
   visible (existing IntersectionObserver in main.js handles that). */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
  /* leaves room for descenders (g, p, y) so they aren't clipped by overflow:hidden */
  padding: 0.05em 0.02em 0.2em;
  margin-bottom: -0.2em;
}
.split-word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.95s var(--ease-out);
  will-change: transform;
}
.reveal.visible .split-word-inner,
.is-text-revealed .split-word-inner {
  /* Released by either the natural .reveal parent OR the host title itself
     (fallback for parents whose box is removed by display:contents). */
  transform: translateY(0);
}

/* 5 — Marquee tuning. Constant duration (no JS speed changes — those caused
   visible loop jumps when the duration ping-ponged mid-animation). Hover-
   pause is guarded by @media (hover: hover) so it only fires on devices
   that have a real hover state — prevents the sticky pause that touch
   devices can produce when :hover lingers after a tap. */
.marquee-track {
  animation-duration: 14s;
}
@media (hover: hover) {
  .marquee-wrap:hover .marquee-track {
    animation-play-state: paused;
  }
}

/* 6 — Page-transition curtain. A single continuous downward wipe spans the
   navigation boundary: outbound panel slides DOWN from above to cover, then
   inbound a pseudo-::before slides DOWN further off the bottom of the screen.
   To the eye, one navy panel wipes through the viewport without seam.

   Outbound side uses a JS-injected .page-transition overlay (panel starts
   above the viewport, translates down to cover). Inbound side uses an
   html::before pseudo so the covering layer exists at first paint — no flash
   while waiting for main.js. */

/* --- Outbound overlay (built by main.js) --- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}
.page-transition-panel {
  position: absolute;
  inset: 0;
  /* Outbound panel = navy base + a soft radial gold glow that frames the
     SELEQT glyph. The floral artwork lives as a child SVG element
     (.page-transition-art) so its paths can animate live via
     stroke-dasharray — see main.js animateCurtainDraw(). */
  background-color: var(--ink);
  background-image: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.18) 0%, transparent 55%);
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-100%);
  will-change: transform;
  transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Container for the live-drawn floral SVG inside the outbound panel.
   Sits behind the SELEQT glyph (z-index 0 vs glyph default). */
.page-transition-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.page-transition-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.page-transition-glyph {
  z-index: 1;
}
.page-transition.is-leaving .page-transition-panel {
  transform: translateY(0);
}
.page-transition-glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(20px);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0.22em;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.4s 0.25s ease, transform 0.6s 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  pointer-events: none;
}
.page-transition.is-leaving .page-transition-glyph {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

/* --- Inbound curtain (no JS dependency for first paint) ---
   Pre-paint script in <head> adds .is-page-entering to <html> if the user
   arrived via the outbound curtain. The pseudo-::before below appears
   immediately, covering the new page. main.js then adds .is-page-entered,
   which animates the pseudo down off the screen. */
html.is-page-entering {
  /* Lock scroll so the entering page can't jump around behind the curtain. */
  overflow: hidden;
}
html.is-page-entering body {
  /* Block input until the curtain has lifted */
  pointer-events: none;
}
html.is-page-entering::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99998;
  /* Inbound curtain = same abstract floral composition as the outbound
     panel (see main.js), but rendered statically as a background image.
     We can't animate path drawing on a pseudo-element, so the inbound
     side shows the artwork already fully drawn — as if the same painting
     stayed in place across the navigation. Soft radial gold glow at
     centre frames the SELEQT glyph. */
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse at center, rgba(200, 169, 110, 0.18) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='rgba(200,169,110,0.3)' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M -20,80 Q 100,40 180,100 Q 250,150 280,220 Q 310,290 380,300 Q 460,310 540,280 Q 600,260 620,260'/%3E%3Cpath d='M -20,380 Q 80,360 140,300 Q 200,240 260,250 Q 320,260 380,200 Q 440,140 520,140 Q 580,140 620,120'/%3E%3Cpath d='M 620,40 Q 560,80 540,140 Q 520,180 480,180'/%3E%3Cg transform='translate(180 100)'%3E%3Ccircle r='2.5'/%3E%3Cpath d='M 0,-7 C -4,-6 -6,-3 -6,1'/%3E%3Cpath d='M 6,1 C 6,-3 4,-6 0,-7'/%3E%3Cpath d='M -6,1 C -5,4 -2,7 1,7'/%3E%3Cpath d='M 1,7 C 4,6 6,4 6,1'/%3E%3Cpath d='M -9,-2 C -10,-7 -5,-11 0,-11'/%3E%3Cpath d='M 0,-11 C 5,-11 10,-7 9,-2'/%3E%3Cpath d='M 9,-2 C 10,3 6,9 1,10'/%3E%3Cpath d='M 1,10 C -4,11 -10,8 -9,-2'/%3E%3C/g%3E%3Cg transform='translate(440 320)'%3E%3Ccircle r='2.2'/%3E%3Cellipse cx='0' cy='-7' rx='1.4' ry='4.5'/%3E%3Cellipse cx='0' cy='-7' rx='1.4' ry='4.5' transform='rotate(45)'/%3E%3Cellipse cx='0' cy='-7' rx='1.4' ry='4.5' transform='rotate(90)'/%3E%3Cellipse cx='0' cy='-7' rx='1.4' ry='4.5' transform='rotate(135)'/%3E%3Cellipse cx='0' cy='-7' rx='1.4' ry='4.5' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-7' rx='1.4' ry='4.5' transform='rotate(225)'/%3E%3Cellipse cx='0' cy='-7' rx='1.4' ry='4.5' transform='rotate(270)'/%3E%3Cellipse cx='0' cy='-7' rx='1.4' ry='4.5' transform='rotate(315)'/%3E%3C/g%3E%3Cg transform='translate(300 240)'%3E%3Cpath d='M 0,0 C -10,-3 -11,-22 0,-26 C 11,-22 10,-3 0,0 Z'/%3E%3Cpath d='M -7,-15 C -3,-19 0,-19 0,-19'/%3E%3Cpath d='M 7,-15 C 3,-19 0,-19 0,-19'/%3E%3C/g%3E%3Cg transform='translate(380 200)'%3E%3Ccircle r='3'/%3E%3Cpath d='M -5,-3 C -5,-7 -2,-10 2,-10 C 6,-9 7,-5 5,-2'/%3E%3Cpath d='M 5,-2 C 9,-4 12,-1 11,3 C 9,7 5,7 3,5'/%3E%3Cpath d='M 3,5 C 6,9 3,12 -1,11 C -5,9 -5,4 -3,3'/%3E%3Cpath d='M -3,3 C -7,4 -10,1 -8,-3 C -6,-6 -3,-6 -5,-3'/%3E%3Cellipse cx='0' cy='-13' rx='3' ry='5'/%3E%3Cellipse cx='0' cy='-13' rx='3' ry='5' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-13' rx='3' ry='5' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-13' rx='3' ry='5' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-13' rx='3' ry='5' transform='rotate(288)'/%3E%3C/g%3E%3Cpath d='M 100,70 C 80,60 70,75 75,85 C 90,82 102,80 100,70 Z'/%3E%3Cpath d='M 240,180 C 220,170 205,180 210,195 C 230,192 245,188 240,180 Z'/%3E%3Cpath d='M 360,260 C 340,250 325,260 330,275 C 350,272 365,268 360,260 Z'/%3E%3Cpath d='M 480,300 C 460,290 445,300 450,315 C 470,312 485,308 480,300 Z'/%3E%3Cpath d='M 120,290 C 100,280 85,290 90,305 C 110,302 125,298 120,290 Z'/%3E%3Cpath d='M 220,260 C 240,255 255,265 250,278 C 232,275 220,272 220,260 Z'/%3E%3Cpath d='M 360,150 C 380,145 393,155 388,168 C 370,165 358,160 360,150 Z'/%3E%3Cpath d='M 540,210 C 520,200 505,210 510,225 C 530,222 545,218 540,210 Z'/%3E%3Cellipse cx='60' cy='120' rx='2' ry='3' transform='rotate(20 60 120)'/%3E%3Cellipse cx='540' cy='200' rx='2' ry='3' transform='rotate(-15 540 200)'/%3E%3Cellipse cx='160' cy='350' rx='2' ry='3' transform='rotate(45 160 350)'/%3E%3C/g%3E%3Cg fill='rgba(200,169,110,0.42)'%3E%3Ccircle cx='500' cy='80' r='2'/%3E%3Ccircle cx='80' cy='340' r='2'/%3E%3Ccircle cx='350' cy='350' r='1.5'/%3E%3Ccircle cx='50' cy='220' r='1.5'/%3E%3Ccircle cx='580' cy='350' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  background-position: center, center;
  transform: translateY(0);
  will-change: transform;
  pointer-events: none;
}
html.is-page-entering::after {
  /* Brand glyph riding the curtain */
  content: 'SELEQT';
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0.22em;
  color: var(--gold);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
}
html.is-page-entering.is-page-entered::before {
  transform: translateY(100%);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
html.is-page-entering.is-page-entered::after {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* 7 — Carousel number flip. The number inside .sc-index-current is rewrapped
   each change so the wrap animation re-fires. */
.sc-index-current {
  position: relative;
  overflow: hidden;
  display: inline-block;
  min-width: 2ch;
  vertical-align: bottom;
}
.sc-index-flip {
  display: inline-block;
  animation: numberFlipIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes numberFlipIn {
  0%   { transform: translateY(-90%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 8 — Hero wordmark spotlight. A gold-stroked twin of the wordmark sits over
   the original, hidden behind a radial mask. JS updates --spot-x / --spot-y
   on mousemove to follow the cursor, so the part of the wordmark under the
   cursor 'lights up' in gold while the rest stays dim white. */
.hero-wordmark-spotlight {
  position: absolute;
  /* Match the base .hero-wordmark positioning byte-for-byte */
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22vw;
  line-height: 1;
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(232, 201, 138, 0.92);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.55s ease;
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-radius: 240px;
  -webkit-mask-image: radial-gradient(circle var(--spot-radius) at var(--spot-x) var(--spot-y), black 0%, rgba(0,0,0,0.7) 35%, transparent 75%);
          mask-image: radial-gradient(circle var(--spot-radius) at var(--spot-x) var(--spot-y), black 0%, rgba(0,0,0,0.7) 35%, transparent 75%);
}
/* Reveal the spotlight overlay only after the intro has settled, and only on
   pointer-equipped devices that are actively hovering the hero. */
.hero:hover .hero-wordmark-spotlight {
  opacity: 1;
}
html.intro-active .hero-wordmark-spotlight,
html.intro-running .hero-wordmark-spotlight {
  opacity: 0 !important;
}
@media (max-width: 900px) {
  .hero-wordmark-spotlight {
    top: 47%;
    font-size: 16vw;
    letter-spacing: 0.12em;
    /* Disable spotlight on small touch screens — there's no cursor to follow. */
    display: none;
  }
}

/* 9 — Reduced-motion accommodations for everything added above. */
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark { animation: none !important; }
  .hero-wordmark-spotlight { display: none !important; }
  .hero-glow, .hero-glow-2 { transition: none !important; }
  .split-word-inner { transform: none !important; transition: none !important; }
  .marquee-track { animation-duration: 0s !important; animation: none !important; }
  .page-transition-panel { transition: none !important; }
  html.is-page-entering::before { display: none !important; }
  html.is-page-entering::after  { display: none !important; }
  .sc-index-flip { animation: none !important; }
  .btn-primary.magnetic, .btn-ghost.magnetic { transform: none !important; }
}