/* =============================================================
   Endeavour Group — light editorial hub
   Warm ivory ground, crimson accent, burgundy contrast bands,
   DM Mono micro-type, Cormorant Garamond serif. Split-screen
   hero, hairlines, silence over ornament.

   Full brand palette per EG logo (2026-07-05): white, taupe,
   crimson #9C2327, burgundy #471E27. The page body now runs on
   the light/ivory end of that palette (smart, professional,
   modern) with burgundy reserved for a few deliberate dark
   bands — nav-adjacent vault, footer, cookie banner — rather
   than the whole page. --tech-* and --hosp-* are untouched;
   they represent the division panels and stay dark navy/forest
   regardless of this theme.

   --text / --text-dim / --muted are the DEFAULT (light-bg)
   text tones. --on-dark / --on-dark-dim / --on-dark-muted are
   the equivalents for the deliberate dark bands (hero-split
   division panels, footer, cookie banner) — each of those
   scopes resets the --text/--text-dim/--muted custom properties
   locally to the on-dark tones, so the many existing rules that
   reference var(--text) etc. don't need to be touched one by
   one.
   ============================================================= */

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

:root {
  --bg:          #F6F1EA;
  --bg-deep:     #ECE2D6;
  --ink:         #1E0D11;
  --ink-soft:    #2E151B;
  --gold:        #9C2327;
  --gold-soft:   #B5343A;
  --gold-dim:    rgba(156, 35, 39, 0.24);
  --gold-hair:   rgba(156, 35, 39, 0.16);
  --text:        #241014;
  --text-dim:    #55333A;
  --muted:       #766A62;
  --on-dark:        #F6F1EA;
  --on-dark-dim:    #D8C9BE;
  --on-dark-muted:  #AB9D93;
  --tech-bg:     #050B14;
  --tech-accent: #2895E8;
  --hosp-bg:     #0A130D;
  --hosp-accent: #A98B5D;

  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  'DM Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* Dark-surface scopes: reset text tokens to their on-dark equivalents.
   Everything inside these scopes keeps using var(--text) / var(--muted)
   / var(--text-dim) as before — only the resolved value changes. */
.hero-split,
footer.site-footer,
.cc-banner,
.cc-modal__panel {
  --text: var(--on-dark);
  --text-dim: var(--on-dark-dim);
  --muted: var(--on-dark-muted);
}

html { scroll-behavior: smooth; }

/* ── VAULT INTRO ──────────────────────────────────────── */
.vault {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}
.vault__panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: var(--ink);
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.vault__panel--left  { left: 0; }
.vault__panel--right { right: 0; }

.vault__seam {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--gold-dim) 12%,
    var(--gold) 50%,
    var(--gold-dim) 88%,
    transparent 100%);
  opacity: 0;
  animation: vault-seam 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

.vault__mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  animation:
    vault-mark-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s forwards,
    vault-mark-out 0.35s ease 1.45s forwards;
}
.vault__mark img {
  width: 84px;
  height: 84px;
  display: block;
}
.vault__mark-text {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

/* Panels slide apart */
.vault.is-opening .vault__panel--left  { transform: translateX(-100%); }
.vault.is-opening .vault__panel--right { transform: translateX(100%); }

/* The seam's opacity is set by a CSS *animation* above (fill: forwards
   holds it at 1 once complete). Animations take priority over transitions
   on the same property, so simply adding `transition: opacity` here does
   nothing — the seam stays stuck at full opacity while the doors slide
   apart, then vanishes abruptly when is-done hides the vault. Killing the
   animation explicitly lets the transition actually take effect. */
.vault.is-opening .vault__seam {
  animation: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vault.is-done { display: none; }

@keyframes vault-seam {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vault-mark-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes vault-mark-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vault { display: none; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--ink);
  padding: 0.75rem 1rem; z-index: 999;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── NAV ─────────────────────────────────────────────── */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 2.75rem;
  background: rgba(246, 241, 234, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--gold-hair);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0.9;
  transition: opacity 0.3s;
}
.nav-logo:hover { opacity: 1; }
.nav-logo img {
  width: 30px;
  height: 30px;
  display: block;
}
.nav-logo__stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.nav-logo__word {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text);
}
.nav-logo__sub {
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.65;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--text); }

/* ── HERO SPLIT (index) ──────────────────────────────── */
.hero-split {
  position: relative;
  height: 100vh;
  display: flex;
}

.division {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-split:hover .division { flex: 0.85; }
.hero-split:hover .division:hover { flex: 1.15; }

.division::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.division-tech {
  background: var(--tech-bg);
  padding: 0 7vw 0 5vw;
  align-items: flex-end;
}
.division-tech::after {
  background: radial-gradient(ellipse 65% 55% at 85% 50%, rgba(40, 149, 232, 0.28) 0%, transparent 100%);
}
.division-tech .division-cta { color: var(--tech-accent); }
.division-tech:hover .division-tag { color: var(--tech-accent); }

.division-hosp {
  background: var(--hosp-bg);
  padding: 0 5vw 0 7vw;
  align-items: flex-start;
}
.division-hosp::after {
  background: radial-gradient(ellipse 65% 55% at 15% 50%, rgba(169, 139, 93, 0.24) 0%, transparent 100%);
}
.division-hosp .division-cta { color: var(--hosp-accent); }
.division-hosp:hover .division-tag { color: var(--hosp-accent); }

.division:hover::after { opacity: 1; }

/* Big, faded division mark sitting in the empty half of each panel —
   ET on the left (tech text sits right), EH on the right (hosp text
   sits left). Brightens slightly on hover along with the rest of the
   panel "lighting up". */
.division-watermark {
  position: absolute;
  top: 50%;
  height: clamp(170px, 30vh, 300px);
  width: auto;
  opacity: 0.09;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 0.55s ease;
  z-index: 1;
}
.division-tech .division-watermark { left: 4vw; }
.division-hosp .division-watermark { right: 4vw; }
.division:hover .division-watermark { opacity: 0.13; }

.division-inner {
  position: relative;
  z-index: 2;
  max-width: 320px;
}
.division-tech .division-inner { text-align: right; }

/* Draft alternative to .division-watermark: a solid mark sitting
   in normal flow above the copy, rather than large and faded behind
   it. Not wired to replace the watermark treatment yet — swap the
   class on the <img> in index.html to compare. */
.division-mark {
  display: inline-block;
  height: 46px;
  width: auto;
  margin-bottom: 1.5rem;
}

.division-tag {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 1.1rem;
  transition: color 0.35s, opacity 0.35s;
}
.division:hover .division-tag { color: var(--gold); opacity: 0.7; }

.division-name {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--text);
  display: block;
  margin-bottom: 1rem;
}

.division-desc {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 2.25rem;
  transition: color 0.35s;
}
.division:hover .division-desc { color: #8A8A8A; }

.division-cta {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.45;
  transition: opacity 0.35s, gap 0.35s;
}
.division:hover .division-cta { opacity: 1; gap: 1rem; }

/* ── SEAM ─────────────────────────────────────────────── */
/* A real flex item sitting between the two divisions (not absolutely
   positioned) so it tracks the boundary as the divisions resize on
   hover, rather than staying pinned to the container's exact centre. */
.seam {
  flex: 0 0 1px;
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--gold-dim) 15%,
    var(--gold-dim) 85%,
    transparent 100%
  );
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.seam-badge {
  background: var(--bg);
  border: 1px solid var(--gold-hair);
  padding: 2rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seam-text {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ── PAGE HERO (about / contact) ─────────────────────── */
.page-hero {
  padding: 12rem 2.75rem 5rem;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.page-hero .section-eyebrow { margin-bottom: 2.25rem; }
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 2rem;
  letter-spacing: -0.005em;
}
.page-hero h1 em {
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
}
.page-hero__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto;
}

/* ── HOME HERO (index only) ───────────────────────────── */
/* Introductory banner shown before the split-screen divisions, so
   visitors land somewhere oriented rather than straight onto the
   Tech/Hospitality split. Text left, a crowd of muted logos right —
   one logo keeps its true colours and glows, standing in for "the
   right fit, found" among many candidates. */
.home-hero {
  min-height: 90vh;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 2.5rem;
  padding: 8rem 2.75rem 6rem;
  position: relative;
}

.home-hero__text { text-align: left; }
.home-hero__text .section-eyebrow { display: block; margin-bottom: 1.65rem; }
.home-hero__text h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.6vw, 3.5rem);
  font-weight: 300;
  line-height: 1.14;
  color: var(--text);
  margin-bottom: 1.75rem;
  letter-spacing: -0.005em;
}
.home-hero__text h1 em { color: var(--gold); font-style: italic; font-weight: 300; }

/* ── WORD CYCLE (reusable animated-word component) ───────
   Vanilla-JS/CSS equivalent of the WordCycle pattern used on the
   other Endeavour sites: an invisible "sizer" reserves the width of
   the longest word so swapping text never shifts layout, while the
   visible word cross-fades and slides up between rotations. */
.word-cycle {
  position: relative;
  display: inline-block;
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
  vertical-align: baseline;
}
.word-cycle__sizer {
  visibility: hidden;
  white-space: nowrap;
}
.word-cycle__slot {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  white-space: nowrap;
}
.word-cycle__text {
  display: inline-block;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.word-cycle__text.is-in { opacity: 1; transform: none; }
.word-cycle__text.is-out { opacity: 0; transform: translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
  .word-cycle__text { transition: none; }
}

.home-hero__text .page-hero__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: none;
  margin: 0;
}

.home-hero__crowd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* Dot-logo assembly: idle dots drift in a loose muted scatter; on
   hover (or tap/scroll-into-view on touch) they ease together into
   the exact silhouette of the real logo, sampled pixel-for-pixel by
   assets/js/dot-logo.js. Square canvas, sized by the shorter side of
   its box so it never distorts. */
.dot-logo__canvas {
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
  display: block;
  cursor: pointer;
}

.crowd__caption {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 980px) {
  .home-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 7rem;
  }
  .home-hero__text { text-align: center; }
  .home-hero__text .page-hero__lead { margin: 0 auto; }
  .dot-logo__canvas { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .dot-logo__canvas { max-width: 320px; }
}

.home-hero__scroll {
  position: absolute;
  bottom: 2.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  color: var(--gold);
  opacity: 0.65;
  transition: opacity 0.3s ease;
}
.home-hero__scroll:hover { opacity: 1; }
.home-hero__scroll-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.home-hero__scroll-chevron {
  font-size: 1rem;
  line-height: 1;
  animation: home-hero-bounce 1.8s ease-in-out infinite;
}
@keyframes home-hero-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__scroll-chevron { animation: none; }
}

@media (max-width: 768px) {
  .page-hero.home-hero { min-height: 80vh; padding: 7rem 1.5rem 5rem; }
}

/* ── STATS (inline within About) ──────────────────────── */
.stats-inline {
  max-width: 860px;
  margin: 4rem auto 0;
  padding: 3rem 0;
  border-top: 1px solid var(--gold-hair);
  border-bottom: 1px solid var(--gold-hair);
}
.stats-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stats-grid > li {
  padding: 0 1.5rem;
  text-align: center;
  border-right: 1px solid var(--gold-hair);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.stats-grid > li:last-child { border-right: none; }

.stat-value {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--text);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}
.stat-value em {
  color: var(--gold);
  font-style: italic;
  font-size: 0.5em;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.stat-label {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 20ch;
}
.stats-note {
  margin-top: 2.25rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.5;
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 0; }
  .stats-grid > li:nth-child(2n) { border-right: none; }
}
@media (max-width: 520px) {
  .stats-inline { padding: 2rem 0; }
  .stats-grid { grid-template-columns: 1fr; gap: 2.5rem 0; }
  .stats-grid > li { border-right: none; }
}

/* ── SECTION ──────────────────────────────────────────── */
.about {
  padding: 8rem 2.5rem 5rem;
  text-align: center;
}

/* The homepage's "Group" section now sits directly under the ivory
   hero banner (before the split-screen divisions), so it gets the
   deeper cream tone to read as its own block rather than blurring
   into the hero above it. */
.about--group {
  background: var(--bg-deep);
  border-top: 1px solid var(--gold-hair);
  border-bottom: 1px solid var(--gold-hair);
  padding-bottom: 3rem;
}

.section-eyebrow {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 2.25rem;
}

.about-headline {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--text);
  margin: 0 auto 2rem;
  max-width: 720px;
}
.about-headline em { color: var(--gold); font-style: italic; }

.about-body {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.95;
  max-width: 580px;
  margin: 0 auto 4rem;
}
.about-body + .about-body { margin-top: -2.5rem; margin-bottom: 4rem; }

/* ── DIVISION CARDS ──────────────────────────────────── */
.div-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--gold-hair);
  border-bottom: 1px solid var(--gold-hair);
}

.div-card {
  padding: 3rem 2.5rem;
  border-right: 1px solid var(--gold-hair);
  transition: background 0.35s;
  text-align: left;
}
.div-card:last-child { border-right: none; }
.div-card:hover { background: rgba(156, 35, 39, 0.03); }

.div-card-tag {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.5;
  display: block;
  margin-bottom: 0.9rem;
}

.div-card-name {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--text);
  display: block;
  margin-bottom: 0.9rem;
  line-height: 1.2;
}

.div-card-desc {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.div-card-link {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.4;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.3s, gap 0.3s;
}
.div-card:hover .div-card-link { opacity: 0.85; gap: 0.8rem; }

/* ── PRINCIPLES (about) ──────────────────────────────── */
.principles {
  padding: 4rem 2.5rem 6rem;
  max-width: 1080px;
  margin: 0 auto;
}
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 3.5rem;
  border-top: 1px solid var(--gold-hair);
  padding-top: 3.5rem;
}
.principle-num {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  display: block;
  margin-bottom: 1.5rem;
}
.principle h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 1rem;
}
.principle p {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.85;
}

/* ── FOUNDER NOTE ────────────────────────────────────── */
.founder {
  padding: 6rem 2.5rem;
  border-top: 1px solid var(--gold-hair);
  border-bottom: 1px solid var(--gold-hair);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.founder blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 2.5rem;
}
.founder__sig {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
}

/* ── CONTACT ─────────────────────────────────────────── */
.contact-grid {
  padding: 4rem 2.5rem 6rem;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  border-top: 1px solid var(--gold-hair);
}
.contact-block {
  padding-top: 3rem;
}
.contact-block .section-eyebrow { margin-bottom: 1.5rem; }
.contact-block h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 1.25rem;
  line-height: 1.2;
}
.contact-block p,
.contact-block address {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.85;
  font-style: normal;
  margin-bottom: 1.5rem;
}
.contact-block a.mail {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 0.25rem;
  transition: border-color 0.3s;
}
.contact-block a.mail:hover { border-color: var(--gold); }

.route-list {
  padding: 4rem 2.5rem 6rem;
  max-width: 860px;
  margin: 0 auto;
}
.route-list .section-eyebrow { text-align: center; margin-bottom: 2rem; }
.route-list h2 {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.5vw, 2.1rem);
  font-weight: 300;
  color: var(--text);
  text-align: center;
  margin-bottom: 3.5rem;
  line-height: 1.3;
}

/* ── COMMITMENTS (index) ───────────────────────────────
   Four proof points, not just claims. Cards sit quiet until you
   hover or focus them: the icon fills crimson, the card lifts, and
   the supporting line unfolds underneath. */
.commitments {
  padding: 6rem 2.5rem 5rem;
  max-width: 1160px;
  margin: 0 auto;
  border-top: 1px solid var(--gold-hair);
  text-align: center;
}
.commitments__kicker {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1.25rem;
}
.commitments__title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--text);
  margin-bottom: 3.5rem;
  line-height: 1.25;
}
.commitments__title em { color: var(--gold); font-style: italic; }

.commitments__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.commit {
  background: var(--bg);
  border: 1px solid var(--gold-hair);
  padding: 2rem 1.5rem 1.75rem;
  text-align: left;
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.commit:hover,
.commit:focus-within {
  transform: translateY(-6px);
  border-color: var(--gold-dim);
  box-shadow: 0 24px 48px -28px rgba(30, 13, 17, 0.35);
}

.commit__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-hair);
  color: var(--muted);
  margin-bottom: 1.5rem;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.commit:hover .commit__icon,
.commit:focus-within .commit__icon {
  color: var(--bg);
  background: var(--gold);
  border-color: var(--gold);
}

.commit__title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 0;
}

.commit__body {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.35s ease, margin-top 0.4s ease;
  margin-top: 0;
}
.commit:hover .commit__body,
.commit:focus-within .commit__body {
  max-height: 8rem;
  opacity: 1;
  margin-top: 0.85rem;
}

@media (max-width: 860px) {
  .commitments__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .commitments__grid { grid-template-columns: 1fr; }
  .commit__body { max-height: none; opacity: 1; margin-top: 0.85rem; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .commit, .commit__icon, .commit__body { transition: none; }
}

/* ── REFERRAL (index) ────────────────────────────────── */
.referral {
  padding: 4.5rem 3rem 5rem;
  max-width: 1080px;
  margin: 5rem auto 6rem;
  border: 1px solid var(--gold-hair);
  border-radius: 6px;
  text-align: center;
}
.referral__kicker {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  display: block;
  margin-bottom: 2rem;
}
.referral__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  line-height: 1.2;
  color: var(--text);
  max-width: 22ch;
  margin: 0 auto 1.75rem;
}
.referral__title em { color: var(--gold); font-style: italic; }
.referral__lead {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 3.5rem;
}
.referral__numbers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 620px;
  margin: 0 auto 3.5rem;
}
.referral__amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.referral__figure {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.01em;
}
.referral__figure em { color: var(--gold); font-style: italic; }
.referral__caption {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.referral__divider {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
  opacity: 0.7;
}
.referral__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 1rem 1.75rem;
  transition: border-color 0.3s, background 0.3s, gap 0.3s;
}
.referral__cta:hover {
  border-color: var(--gold);
  background: rgba(156, 35, 39, 0.05);
  gap: 1rem;
}

@media (max-width: 520px) {
  .referral__numbers { grid-template-columns: 1fr; gap: 1.5rem; }
  .referral__divider { display: none; }
}

/* ── CONTACT STRIP (unused now) ──────────────────────── */
.contact-strip {
  padding: 5rem 2.5rem;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.contact-strip p {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 300;
  font-style: italic;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 2.5rem;
}
.contact-strip a {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 0.25rem;
  transition: border-color 0.3s;
}
.contact-strip a:hover { border-color: var(--gold); }

/* ── FOOTER ──────────────────────────────────────────── */
footer.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2rem 2.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.6;
}
.footer-wordmark img { width: 22px; height: 22px; display: block; }

.footer-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  flex-wrap: wrap;
}
.footer-links a {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.45;
  transition: opacity 0.3s;
}
.footer-links a:hover { opacity: 0.85; }

.footer-copy {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.3;
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
  .principles-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 1rem; }
  .div-grid { grid-template-columns: 1fr; }
  .div-card {
    border-right: none;
    border-bottom: 1px solid var(--gold-hair);
  }
  .div-card:last-child { border-bottom: none; }
}

@media (max-width: 768px) {
  nav.site-nav { padding: 1.25rem 1.5rem; }
  .nav-links { gap: 1.25rem; }

  .hero-split {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  .division {
    min-height: 50vh;
    padding: 5rem 1.75rem 4rem;
  }
  .division-tech { align-items: flex-start; padding-right: 1.75rem; }
  .division-tech .division-inner { text-align: left; }
  .hero-split:hover .division,
  .hero-split:hover .division:hover { flex: 1; }

  .seam {
    /* Sits in normal document flow between the two divisions (rather
       than being absolutely positioned at 50% of the stacked column's
       total height) so it lands exactly on the boundary between them
       even when their content-driven heights differ. */
    position: static;
    width: 100%; height: 1px;
    flex: 0 0 auto;
    background: linear-gradient(to right,
      transparent 0%,
      var(--gold-dim) 15%,
      var(--gold-dim) 85%,
      transparent 100%
    );
    flex-direction: row;
    justify-content: center;
  }
  .seam-badge { flex-direction: row; padding: 0 1.5rem; gap: 0.75rem; }
  .seam-text {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: 0.22em;
  }

  .page-hero { padding: 8rem 1.5rem 3rem; }
  .about { padding: 5rem 1.5rem 3rem; }
  .principles, .founder, .contact-grid, .route-list { padding-left: 1.5rem; padding-right: 1.5rem; }

  footer.site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.75rem 1.5rem;
  }
  .footer-links { gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .division, .division-cta, .div-card-link,
  .division-tag, .division-desc { transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Legal pages — left-aligned long-form content ────────────────────── */
.legal {
  padding: 6rem 2.5rem 6rem;
  max-width: 720px;
  margin: 0 auto;
}
.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--gold);
  margin: 2.75rem 0 1rem;
}
.legal h2:first-of-type { margin-top: 0.5rem; }
.legal p {
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.9;
  margin-bottom: 1.1rem;
}
.legal ul {
  margin: 0 0 1.1rem 1.25rem;
  color: var(--text-dim);
}
.legal li {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 0.4rem;
}
.legal a { color: var(--gold); }
.legal a:hover { color: var(--gold-soft); }

@media (max-width: 768px) {
  .legal { padding: 4rem 1.5rem 4rem; }
}

/* ── Footer — redesigned multi-column, matching Endeavour Tech's
   structure in Group's own ink + antique-gold register ─────────────── */
footer.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--gold-hair);
  padding: 5rem 2.75rem 2rem;
  display: block;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.footer-brand__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text);
}
.footer-brand__wordmark img { width: 24px; height: 24px; display: block; }
.footer-brand p {
  margin-top: 1.1rem;
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
  max-width: 34ch;
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a {
  font-size: 0.84rem;
  color: var(--muted);
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-bottom__text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-bottom p {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 0.7;
}
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--gold); }

.footer-badges {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-badges img {
  height: 38px;
  width: auto;
  opacity: 0.88;
  transition: opacity 0.3s ease;
}
.footer-badges img:hover { opacity: 1; }

@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  footer.site-footer { padding: 3.5rem 1.5rem 2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ── Cookie consent — bespoke banner + preferences modal ─────────────
   Ink + antique-gold, matching this site's own register. Rounded
   corners are intentionally modest (4-6px) — enough to read as "soft",
   not at odds with the site's otherwise sharp-cornered restraint. ── */
.cc-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 16px);
  z-index: 9999;
  width: min(640px, calc(100vw - 2rem));
  background: var(--ink-soft);
  border: 1px solid var(--gold-hair);
  border-radius: 6px;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.6);
  padding: 1.6rem 1.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1), transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cc-banner.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cc-banner__text {
  margin: 0 0 0.9rem;
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 60ch;
}
.cc-banner__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-bottom: 1.15rem; }
.cc-banner__links a {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cc-banner__links a:hover { color: var(--gold); }
.cc-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }

.cc-btn {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.7rem 1.2rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cc-btn--primary { background: var(--gold); color: var(--ink); }
.cc-btn--primary:hover { background: var(--gold-soft); }
.cc-btn--secondary { background: transparent; border-color: var(--gold-hair); color: var(--text); }
.cc-btn--secondary:hover { border-color: var(--gold-dim); }
.cc-btn--link {
  background: transparent; border: 0; padding: 0.7rem 0.2rem;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  margin-left: auto;
}
.cc-btn--link:hover { color: var(--gold); }

@media (max-width: 560px) {
  .cc-banner { padding: 1.3rem 1.3rem 1.5rem; bottom: 12px; }
  .cc-banner__actions { flex-direction: column; align-items: stretch; }
  .cc-btn { width: 100%; text-align: center; }
  .cc-btn--link { margin-left: 0; }
}

.cc-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.cc-modal[hidden] { display: none; }
.cc-modal__scrim { position: absolute; inset: 0; background: rgba(3, 4, 5, 0.72); opacity: 0; transition: opacity 300ms; }
.cc-modal.is-visible .cc-modal__scrim { opacity: 1; }
.cc-modal__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  background: var(--ink-soft);
  border: 1px solid var(--gold-hair);
  border-radius: 6px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7);
  padding: 2rem;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 300ms, transform 300ms;
}
.cc-modal.is-visible .cc-modal__panel { opacity: 1; transform: translateY(0) scale(1); }
.cc-modal__close {
  position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px;
  border: 1px solid var(--gold-hair); background: transparent; border-radius: 50%;
  font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.cc-modal__close:hover { color: var(--gold); }
.cc-modal__title { margin: 0 2rem 0.6rem 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--text); }
.cc-modal__lead { margin: 0 0 1.5rem; font-size: 0.85rem; font-weight: 300; line-height: 1.7; color: var(--muted); }
.cc-modal__categories { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.5rem; }
.cc-category { border: 1px solid var(--gold-hair); border-radius: 4px; padding: 1rem 1.1rem; }
.cc-category__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cc-category__title { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.cc-category__body { margin: 0.6rem 0 0; font-size: 0.8rem; font-weight: 300; line-height: 1.65; color: var(--muted); }

.cc-switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.cc-switch.is-locked { cursor: default; }
.cc-switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cc-switch__track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.12); transition: background 0.25s; flex-shrink: 0; }
.cc-switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: transform 0.25s; }
.cc-switch input:checked + .cc-switch__track { background: var(--gold-soft); }
.cc-switch input:checked + .cc-switch__track .cc-switch__thumb { transform: translateX(16px); }
.cc-switch.is-locked .cc-switch__track { background: var(--gold-dim); }
.cc-switch.is-locked .cc-switch__track .cc-switch__thumb { transform: translateX(16px); background: var(--gold); }
.cc-switch__state { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.cc-modal__footer { display: flex; flex-direction: column; gap: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--gold-hair); }
.cc-modal__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.cc-modal__links a { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cc-modal__links a:hover { color: var(--gold); }
.cc-modal__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cc-modal__actions .cc-btn { flex: 1 1 auto; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-modal__scrim, .cc-modal__panel { transition: none; }
}