/* =============================================================
   EML TALENT HUB / MASTER DESIGN SYSTEM
   Elidad Motion Limited · Global Operations
   Four-token palette. Editorial luxury. Zero deviation.
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Four-color palette / strict */
  --petrol:    #0A3638;
  --clay:      #B85C4B;
  --bone:      #F2F0EB;
  --obsidian:  #181818;

  /* Derived tints / same hues only, no new colors */
  --petrol-deep:  #072528;
  --petrol-lift:  #12494B;
  --clay-deep:    #9C4A3B;
  --bone-warm:    #E8E5DE;
  --obsidian-70:  rgba(24, 24, 24, 0.70);
  --obsidian-45:  rgba(24, 24, 24, 0.45);
  --bone-78:      rgba(242, 240, 235, 0.78);
  --bone-52:      rgba(242, 240, 235, 0.52);
  --bone-15:      rgba(242, 240, 235, 0.15);
  --petrol-12:    rgba(10, 54, 56, 0.12);
  --petrol-28:    rgba(10, 54, 56, 0.28);

  /* Type */
  --font-display: 'Bodoni Moda', 'Prata', Georgia, serif;
  --font-eyebrow: 'Prata', Georgia, serif;
  --font-body:    'Fraunces', Georgia, serif;
  --font-mark:    'Italiana', 'Prata', serif;

  /* Rhythm */
  --gut:      clamp(20px, 4vw, 40px);
  --section:  clamp(80px, 11vw, 168px);
  --max:      1320px;
  --max-read: 760px;

  /* Motion */
  --ease-lux:  cubic-bezier(0.22, 0.9, 0.32, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.6s;
}

/* ---------- 2. RESET + OVERFLOW CONTAINMENT ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  /* Fallback for older engines. NOTE: overflow-x:hidden on html/body creates a
     scroll container, which kills `position: sticky` on the Method deck. The
     @supports block below upgrades to `clip`, which contains horizontal spill
     WITHOUT creating a scroll container, so sticky survives. */
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

html {
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--obsidian);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--clay); color: var(--bone); }

/* Focus / visible, never ugly */
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- 3. TYPOGRAPHY ---------- */
/* Balanced wrapping prevents orphan words on every display-tier heading */
.h-display, .h1, .h2, .h3, .diag__q, .manifesto p, blockquote {
  text-wrap: balance;
}
.lede, .body-sm, p { text-wrap: pretty; }

/* Headings scale from the viewport and never exceed their container.
   min values are tuned so the longest line fits a 320px screen. */
.h-display, .h1, .h2, .h3 {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(29px, 7.4vw, 96px);
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 5.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3.9vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  display: block;
}
.eyebrow--petrol { color: var(--petrol); }
.eyebrow--bone   { color: var(--bone-78); }
/* Guard: clay text never sits on petrol */
.on-petrol .eyebrow { color: var(--bone-78); }

.lede {
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.55;
  color: var(--obsidian-70);
}
.on-petrol .lede { color: var(--bone-78); }

.body-sm { font-size: 15px; line-height: 1.65; color: var(--obsidian-70); }
.on-petrol .body-sm { color: var(--bone-78); }

.mono-tag {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rule {
  height: 1px;
  background: var(--clay);
  border: 0;
  margin: 0;
  width: 56px;
}
.rule--full { width: 100%; background: var(--petrol-12); }
.on-petrol .rule--full { background: var(--bone-15); }

/* ---------- 4. LAYOUT ---------- */
.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
}
.section {
  padding-block: var(--section);
  position: relative;
  width: 100%;
  max-width: 100%;
  /* clip (not hidden) so sticky descendants keep working */
  overflow-x: clip;
}
.section--bone   { background: var(--bone); }
.section--petrol { background: var(--petrol); color: var(--bone); }
.section--obsidian { background: var(--obsidian); color: var(--bone); }
.on-petrol { color: var(--bone); }
.stack { display: flex; flex-direction: column; }
.gap-s  { gap: 14px; }  .gap-m { gap: 26px; }
.gap-l  { gap: 44px; }  .gap-xl { gap: 72px; }
.measure { max-width: var(--max-read); }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-eyebrow);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 17px 32px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease-lux),
              color var(--dur) var(--ease-lux),
              border-color var(--dur) var(--ease-lux),
              transform 0.4s var(--ease-snap);
  will-change: transform;
}
.btn--clay { background: var(--clay); color: var(--bone); border-color: var(--clay); }
.btn--clay:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.btn--bone { background: var(--bone); color: var(--petrol); border-color: var(--bone); }
.btn--bone:hover { background: var(--clay); color: var(--bone); border-color: var(--clay); }
.btn--ghost { border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--clay); border-color: var(--clay); color: var(--bone); }
.on-petrol .btn--ghost:hover { color: var(--bone); }
.btn:active { transform: scale(0.985); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-eyebrow);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease-lux), gap 0.4s var(--ease-snap);
}
.link-arrow:hover { color: var(--clay); gap: 14px; }
.on-petrol .link-arrow:hover { color: var(--bone); border-bottom-color: var(--clay); }

/* ---------- 6. NAVIGATION ---------- */
.nav {
  position: fixed;
  top: 18px; left: 50%;
  /* translateZ forces its own compositing layer / prevents the iOS Safari
     backdrop-filter "ghost"/double-render behind the pill */
  transform: translateX(-50%) translateZ(0);
  z-index: 95;
  isolation: isolate;
  width: calc(100% - 2 * var(--gut));
  max-width: var(--max);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.nav__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 11px 11px 11px 22px;
  border-radius: 100px;
  background: rgba(10, 54, 56, 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--bone-15);
  transition: background 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux);
}
.nav.is-stuck .nav__pill {
  background: rgba(7, 37, 40, 0.94);
  box-shadow: 0 18px 44px rgba(7, 37, 40, 0.30);
}
.nav__brand { display: flex; align-items: center; gap: 11px; }
.nav__brand img { width: 27px; height: 27px; object-fit: contain; }
.nav__brand span {
  font-family: var(--font-mark);
  font-size: 15px;
  letter-spacing: 0.13em;
  color: var(--bone);
  white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  font-family: var(--font-eyebrow);
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-78);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease-lux), border-color 0.35s var(--ease-lux);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--clay); }
.nav__cta { padding: 13px 24px; font-size: 11px; border-radius: 100px; }
.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.nav__burger span { width: 21px; height: 1.5px; background: var(--bone); transition: transform 0.4s var(--ease-snap), opacity 0.3s; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 26px 24px 30px;
  border-radius: 20px;
  background: rgba(7, 37, 40, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bone-15);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  font-family: var(--font-eyebrow);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 13px 0;
  border-bottom: 1px solid var(--bone-15);
}
.nav__mobile .btn { margin-top: 18px; justify-content: center; }

@media (max-width: 940px) {
  .nav__links, .nav__pill > .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

/* ---------- 7. HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--petrol);
  color: var(--bone);
  overflow: hidden;
  padding-block: 150px 90px;
}
.hero__canvas { position: absolute; inset: 0; pointer-events: none; }
.hero__canvas canvas { width: 100%; height: 100%; opacity: 0.55; }
.hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(18, 73, 75, 0.55) 0%, transparent 62%),
    linear-gradient(180deg, transparent 55%, rgba(7, 37, 40, 0.9) 100%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__grid { display: grid; gap: clamp(30px, 4vw, 56px); }

/* Engine switcher capsule / never spills the viewport */
.switcher {
  display: inline-flex;
  padding: 5px;
  border-radius: 100px;
  background: rgba(242, 240, 235, 0.07);
  border: 1px solid var(--bone-15);
  position: relative;
  align-self: flex-start;
  width: 100%;
  max-width: 520px;
}
/* Responsive label swap: full division name on desktop, concise on mobile */
.switcher__btn .lbl-short { display: none; }
@media (max-width: 700px) {
  .switcher__btn .lbl-full { display: none; }
  .switcher__btn .lbl-short { display: inline; }
}
.switcher__thumb {
  position: absolute;
  top: 5px; left: 5px;
  height: calc(100% - 10px);
  border-radius: 100px;
  background: var(--clay);
  transition: transform 0.62s var(--ease-snap), width 0.62s var(--ease-snap);
  z-index: 0;
}
.switcher__btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-eyebrow);
  font-size: clamp(9.5px, 2.4vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px clamp(8px, 3vw, 24px);
  border-radius: 100px;
  color: var(--bone-52);
  white-space: nowrap;
  text-align: center;
  min-height: 44px;
  transition: color 0.45s var(--ease-lux);
}
.switcher__btn[aria-selected="true"] { color: var(--bone); }

.engine-copy { position: relative; }
.engine-copy__pane {
  transition: opacity 0.5s var(--ease-lux), transform 0.5s var(--ease-lux);
}
.engine-copy__pane[hidden] { display: none; }
.engine-copy__pane.is-out { opacity: 0; transform: translateY(8px); }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.scroll-cue {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-eyebrow);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-52);
  z-index: 2;
}
.scroll-cue__line { width: 1px; height: 46px; background: linear-gradient(180deg, var(--bone-52), transparent); }

/* ---------- 8. MARQUEE ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--petrol-12);
  padding-block: 22px;
  background: var(--bone);
}
.section--petrol .marquee,
.marquee--petrol { background: var(--petrol); border-color: var(--bone-15); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 22px;
  padding-inline: 22px;
  font-family: var(--font-eyebrow);
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--obsidian-70);
  white-space: nowrap;
}
.marquee--petrol .marquee__item { color: var(--bone-78); }
.marquee__item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); }

/* ---------- 9. KINETIC MANIFESTO ----------
   Accessibility first. The display serif at high contrast was elegant but
   punishing to read at length. Body face, regular weight, generous leading
   and solid ink keep the luxury register while remaining legible for older
   readers and anyone wearing corrective lenses. */
.manifesto p {
  font-family: var(--font-body);
  font-weight: 450;
  font-size: clamp(20px, 3.1vw, 36px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  max-width: 26ch;
  color: var(--obsidian);
  font-style: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
.manifesto--wide p { max-width: 34ch; }
.on-petrol .manifesto p,
.section--petrol .manifesto p { color: var(--bone); }

.kin-word {
  display: inline-block;
  /* Floor raised from 0.15 so unlit words stay perceivable, not invisible */
  opacity: 0.32;
  transition: opacity 0.35s linear;
  will-change: opacity;
}
.kin-word.is-lit { opacity: 1; }

/* Long form narrative blocks inherit the same legibility contract */
.measure p, .lede { font-optical-sizing: auto; }
.lede { line-height: 1.6; }
.kin-word--accent.is-lit { color: var(--clay); }
.on-petrol .kin-word--accent.is-lit { color: var(--bone); }

/* ---------- 10. SPLIT MATRIX (60/40) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--bone-15);
  border: 1px solid var(--bone-15);
}
.split__panel {
  background: var(--petrol);
  padding: clamp(30px, 3.6vw, 54px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  transition: background 0.6s var(--ease-lux);
}
.split__panel::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 100% 0%, rgba(184, 92, 75, 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-lux);
  pointer-events: none;
}
.split__panel:hover::before { opacity: 1; }
.split__panel:hover { background: var(--petrol-lift); }
.split__num {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 800;
  line-height: 0.9;
  color: rgba(242, 240, 235, 0.13);
  letter-spacing: -0.03em;
}
.split__list { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.split__list li {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: 15px; line-height: 1.55;
  /* Default to dark copy so lists remain legible on Bone White surfaces.
     Petrol contexts override below / this was the white-on-white bug. */
  color: var(--obsidian-70);
}
.split__panel .split__list li,
.on-petrol .split__list li,
.card--petrol .split__list li,
.section--petrol .split__list li,
.section--obsidian .split__list li { color: var(--bone-78); }
/* Never render an empty bullet marker */
.split__list li:empty { display: none; }
.split__list li::before {
  content: ''; flex: none;
  width: 5px; height: 5px; margin-top: 9px;
  background: var(--clay);
  border-radius: 50%;
}
.split__foot { margin-top: auto; padding-top: 12px; }

@media (min-width: 981px) {
  .split { transition: grid-template-columns 0.75s var(--ease-snap); }
  .split:has(.split__panel:nth-child(1):hover) { grid-template-columns: 1.5fr 1fr; }
  .split:has(.split__panel:nth-child(2):hover) { grid-template-columns: 1fr 1.5fr; }
}
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .split__panel { min-height: auto; }
}

/* ---------- 11. STACKING METHOD DECK ---------- */
.deck { position: relative; }
.deck__card {
  position: sticky;
  top: 116px;
  background: var(--bone);
  border: 1px solid var(--petrol-12);
  border-radius: 4px;
  padding: clamp(30px, 4vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
  margin-bottom: 26px;
  box-shadow: 0 22px 60px rgba(10, 54, 56, 0.07);
  will-change: transform, opacity;
  transform-origin: center top;
}
.deck__card--dark {
  background: var(--petrol);
  color: var(--bone);
  border-color: var(--bone-15);
}
.deck__phase {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 8vw, 108px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--clay);
}
.deck__card--dark .deck__phase { color: rgba(242, 240, 235, 0.18); }
@media (max-width: 860px) {
  .deck__card { grid-template-columns: 1fr; position: relative; top: 0; }
}

/* ---------- 12. WORK GRID / VIDEO HOVER ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
}
.work-card { display: flex; flex-direction: column; gap: 16px; }
.work-card--tall  { grid-row: span 2; }
.work-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 4 / 3;
  background: var(--petrol);
  isolation: isolate;
}
.work-card--tall .work-card__media { aspect-ratio: 3 / 4; }
.work-card__media video,
.work-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.85s var(--ease-lux), opacity 0.5s var(--ease-lux);
}
.work-card:hover .work-card__media video,
.work-card:hover .work-card__media img { transform: scale(1.045); }
.work-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(7, 37, 40, 0.82) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-lux);
  z-index: 2;
}
.work-card:hover .work-card__scrim { opacity: 1; }
.work-card__reveal {
  position: absolute;
  left: 22px; bottom: 20px; right: 22px;
  z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  color: var(--bone);
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.45s var(--ease-lux), transform 0.45s var(--ease-lux);
}
.work-card:hover .work-card__reveal { opacity: 1; transform: translateY(0); }
.work-card__metric {
  padding: 6px 12px;
  border: 1px solid var(--bone-15);
  border-radius: 100px;
  background: rgba(7, 37, 40, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10px;
}
.work-card__meta { display: flex; flex-direction: column; gap: 5px; }
.work-card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.2; }
@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card--tall { grid-row: auto; }
  .work-card--tall .work-card__media { aspect-ratio: 4 / 3; }
}

/* Editorial tile / procedural media stand-in */
.tile { position: absolute; inset: 0; overflow: hidden; }
.tile__glyph {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(90px, 20vw, 210px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(242, 240, 235, 0.16);
  user-select: none;
}
.tile__rings { position: absolute; inset: -18%; opacity: 0.5; }
.tile__rings i {
  position: absolute; inset: 0; margin: auto;
  border: 1px solid rgba(242, 240, 235, 0.16);
  border-radius: 50%;
}
.tile__rings i:nth-child(1) { width: 62%; height: 62%; }
.tile__rings i:nth-child(2) { width: 84%; height: 84%; }
.tile__rings i:nth-child(3) { width: 104%; height: 104%; }
.tile__grain {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(242,240,235,0.05) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
}

/* ---------- 13. COMPARATIVE MATRIX ---------- */
.matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix { width: 100%; min-width: 720px; border-collapse: collapse; }
.matrix th, .matrix td {
  padding: 19px 20px;
  text-align: left;
  border-bottom: 1px solid var(--petrol-12);
  font-size: 14.5px;
  vertical-align: top;
}
.matrix thead th {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--obsidian-45);
  border-bottom-color: var(--petrol-28);
  white-space: nowrap;
}
.matrix tbody th {
  font-family: var(--font-eyebrow);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--petrol);
  white-space: nowrap;
}
.matrix .col-eml { background: rgba(184, 92, 75, 0.055); }
.matrix thead .col-eml { color: var(--clay); }
.matrix tr:hover td { background: rgba(10, 54, 56, 0.022); }
.matrix tr:hover .col-eml { background: rgba(184, 92, 75, 0.085); }
.mark-yes { color: var(--clay); font-weight: 600; }
.mark-no  { color: var(--obsidian-45); }

/* ---------- 14. DIAGNOSTIC ENGINE ---------- */
.diag {
  border: 1px solid var(--bone-15);
  border-radius: 5px;
  background: rgba(242, 240, 235, 0.04);
  padding: clamp(26px, 3.6vw, 52px);
}
.diag__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.diag__count { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-52); }
.diag__bar { height: 2px; background: var(--bone-15); margin-block: 22px 30px; overflow: hidden; }
.diag__bar span { display: block; height: 100%; width: 0; background: var(--clay); transition: width 0.7s var(--ease-lux); }
.diag__q { font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 2.6vw, 31px); line-height: 1.2; margin-bottom: 8px; }
.diag__opts { display: grid; gap: 11px; margin-top: 26px; }
.diag__opt {
  display: flex; align-items: center; gap: 15px;
  width: 100%; text-align: left;
  padding: 17px 20px;
  border: 1px solid var(--bone-15);
  border-radius: 3px;
  color: var(--bone-78);
  font-size: 15px;
  transition: border-color 0.35s var(--ease-lux), background 0.35s var(--ease-lux), color 0.35s var(--ease-lux), transform 0.35s var(--ease-snap);
}
.diag__opt:hover { border-color: var(--clay); background: rgba(184, 92, 75, 0.1); color: var(--bone); transform: translateX(4px); }
.diag__opt[aria-pressed="true"] { border-color: var(--clay); background: rgba(184, 92, 75, 0.16); color: var(--bone); }
.diag__key {
  flex: none;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-eyebrow);
  font-size: 10px;
  opacity: 0.7;
}
.diag__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.diag__result { display: none; }
.diag__result.is-visible { display: block; }
.diag__score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(60px, 12vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--clay);
}
.diag__panel[hidden] { display: none; }
.diag__breakdown { display: grid; gap: 9px; margin-top: 26px; }
.diag__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--bone-15);
  font-size: 14px;
  color: var(--bone-78);
}
.diag__pill { font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; border: 1px solid currentColor; white-space: nowrap; }
.diag__pill--strong { color: var(--bone); border-color: var(--bone-15); background: rgba(242,240,235,0.08); }
.diag__pill--gap { color: var(--clay); border-color: var(--clay); }

/* ---------- 15. CONSULTATION DRAWER ---------- */
.drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(7, 37, 40, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-lux), visibility 0.5s;
  z-index: 100;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100svh;
  width: min(480px, 100vw);
  background: var(--petrol);
  color: var(--bone);
  border-left: 1px solid var(--bone-15);
  transform: translateX(101%);
  transition: transform 0.72s var(--ease-snap);
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }
.drawer__inner { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 28px; min-height: 100%; }
.drawer__close {
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--bone-15);
  border-radius: 50%;
  color: var(--bone);
  font-size: 17px;
  transition: background 0.35s var(--ease-lux), transform 0.35s var(--ease-snap);
}
.drawer__close:hover { background: var(--clay); transform: rotate(90deg); }
.drawer__channel {
  display: flex; align-items: center; gap: 16px;
  padding: 19px 0;
  border-bottom: 1px solid var(--bone-15);
  transition: color 0.35s var(--ease-lux), padding-left 0.35s var(--ease-snap);
}
.drawer__channel:hover { color: var(--bone); padding-left: 7px; }
.drawer__channel-icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--bone-15);
  border-radius: 50%;
  transition: background 0.35s var(--ease-lux), border-color 0.35s var(--ease-lux);
}
.drawer__channel:hover .drawer__channel-icon { background: var(--clay); border-color: var(--clay); }
.drawer__label { font-family: var(--font-eyebrow); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-52); }
.drawer__value { font-size: 15.5px; }
.drawer__foot { margin-top: auto; padding-top: 22px; }

/* ---------- 16. FORMS ---------- */
.field { display: flex; flex-direction: column; gap: 9px; }
.field label {
  font-family: var(--font-eyebrow);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-52);
}
.field input, .field textarea, .field select {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--bone);
  background: rgba(242, 240, 235, 0.05);
  border: 1px solid var(--bone-15);
  border-radius: 3px;
  padding: 15px 17px;
  width: 100%;
  transition: border-color 0.35s var(--ease-lux), background 0.35s var(--ease-lux);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(242, 240, 235, 0.35); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--clay);
  background: rgba(242, 240, 235, 0.08);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-size: 13px; color: var(--bone-52); }

/* ---- High-contrast select & dropdown ----
   Native <option> lists inherit OS chrome and rendered as faint text on a
   light system background. Forcing Petrol/Bone on both the control and its
   options keeps the menu legible on desktop and mobile. */
select,
select option {
  background-color: var(--petrol) !important;
  color: var(--bone) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23F2F0EB' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 40px !important;
  cursor: pointer;
}
select option:hover,
select option:focus,
select option:checked {
  background-color: var(--clay) !important;
  color: var(--bone) !important;
}
/* Consistent focus ring across every control */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--clay) !important;
  box-shadow: 0 0 0 2px rgba(184, 92, 75, 0.2) !important;
}

/* ---------- 17. FOOTER ---------- */
.footer { background: var(--obsidian); color: var(--bone); padding-block: clamp(56px, 7vw, 92px) 34px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(30px, 4vw, 64px); }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand img { width: 26px; height: 26px; }
.footer__brand span { font-family: var(--font-mark); font-size: 16px; letter-spacing: 0.13em; }
.footer__col h4 {
  font-family: var(--font-eyebrow);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-52);
  margin-bottom: 17px;
}
.footer__col a, .footer__col li { display: block; font-size: 14.5px; color: var(--bone-78); padding-block: 7px; transition: color 0.35s var(--ease-lux), transform 0.35s var(--ease-snap); }
.footer__col a:hover { color: var(--clay); transform: translateX(4px); }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: clamp(38px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid rgba(242, 240, 235, 0.13);
  font-size: 12.5px;
  color: var(--bone-52);
}
@media (max-width: 800px) { .footer__top { grid-template-columns: 1fr; } }

/* ---------- 18. MAGNETIC CURSOR ---------- */
.cursor, .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 999;
  border-radius: 50%;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor {
  width: 38px; height: 38px;
  border: 1px solid var(--bone);
  transition: width 0.4s var(--ease-snap), height 0.4s var(--ease-snap),
              background 0.4s var(--ease-lux), opacity 0.3s;
}
.cursor-dot { width: 4px; height: 4px; background: var(--bone); }
.cursor.is-active { opacity: 1; }
.cursor-dot.is-active { opacity: 1; }
.cursor.is-magnet { width: 62px; height: 62px; background: rgba(242, 240, 235, 0.13); }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* ---------- 19. REVEAL PRIMITIVES ---------- */
.reveal { opacity: 0; transform: translateY(30px); }
.reveal.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.95s var(--ease-lux), transform 0.95s var(--ease-lux);
}
.reveal-d1.is-in { transition-delay: 0.09s; }
.reveal-d2.is-in { transition-delay: 0.18s; }
.reveal-d3.is-in { transition-delay: 0.27s; }
.reveal-d4.is-in { transition-delay: 0.36s; }

.line-wipe { position: relative; overflow: hidden; display: block; }
.line-wipe > * { display: block; transform: translateY(102%); transition: transform 1.05s var(--ease-lux); }
.line-wipe.is-in > * { transform: translateY(0); }

/* ---------- 20. UTILITIES + A11Y ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 200;
  background: var(--clay); color: var(--bone);
  padding: 12px 20px; border-radius: 0 0 3px 3px;
  font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: top 0.3s var(--ease-lux);
}
.skip-link:focus { top: 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 30px); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--petrol-12);
  border-radius: 4px;
  padding: clamp(24px, 2.8vw, 38px);
  background: var(--bone);
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.5s var(--ease-lux), transform 0.5s var(--ease-snap), box-shadow 0.5s var(--ease-lux);
}
.card:hover { border-color: var(--clay); transform: translateY(-4px); box-shadow: 0 22px 46px rgba(10, 54, 56, 0.1); }
.card--petrol { background: rgba(242, 240, 235, 0.045); border-color: var(--bone-15); color: var(--bone); }
.card--petrol:hover { border-color: var(--clay); background: rgba(242, 240, 235, 0.075); box-shadow: none; }

.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--clay);
}
.on-petrol .stat__num { color: var(--bone); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  font-family: var(--font-eyebrow);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--petrol-28);
  border-radius: 100px;
  color: var(--petrol);
  transition: background 0.4s var(--ease-lux), color 0.4s var(--ease-lux), border-color 0.4s var(--ease-lux), transform 0.4s var(--ease-snap);
}
.pill:hover { background: var(--petrol); color: var(--bone); border-color: var(--petrol); transform: translateY(-2px); }
.on-petrol .pill { border-color: var(--bone-15); color: var(--bone-78); }
.on-petrol .pill:hover { background: var(--clay); border-color: var(--clay); color: var(--bone); }

.page-hero {
  background: var(--petrol);
  color: var(--bone);
  padding-block: clamp(150px, 17vw, 220px) clamp(60px, 8vw, 104px);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(85% 70% at 78% 8%, rgba(184, 92, 75, 0.20) 0%, transparent 62%);
  pointer-events: none;
}
.page-hero .shell { position: relative; z-index: 1; }

/* =============================================================
   20b. NUMERAL LOCK
   Stage and stat numerals must never wrap or stack ("0" above "1").
   tabular-nums also keeps 01/02/03 optically identical in width.
   ============================================================= */
.deck__phase,
.split__num,
.stat__num,
.tile__glyph,
.diag__score,
.step-number,
.phase-num,
.stat-num {
  display: inline-block !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1 !important;
  max-width: none !important;
}
/* Parents must never squeeze the numeral below its intrinsic width */
.deck__card > .stack,
.split__panel,
.stat { min-width: 0; }
.stat { display: flex; flex-direction: column; }
.numeral-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* =============================================================
   20c. POINTER INTEGRITY
   Guarantees mail, WhatsApp, checkout and submit controls are
   always clickable on desktop. Decorative layers are explicitly
   removed from hit testing so they cannot swallow a click.
   ============================================================= */
.email-trigger,
a[href^="mailto:"],
a[href^="tel:"],
a[href*="wa.me"],
a[href*="paystack"],
.drawer__channel,
.btn,
.nav__cta,
.link-arrow,
button[type="submit"],
.diag__opt,
.switcher__btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 40;
  touch-action: manipulation;
}
/* Decorative overlays never intercept the pointer */
.hero__canvas, .hero__veil, .tile, .tile__rings, .tile__grain,
.work-card__scrim, .work-card__reveal, .cursor, .cursor-dot,
.page-hero::after, .split__panel::before, .scroll-cue {
  pointer-events: none !important;
}
/* Scrim only exists while the drawer is open */
.drawer-scrim { pointer-events: none; }
.drawer-scrim.is-open { pointer-events: auto; }
/* Drawer must outrank the custom cursor and nav */
/* Stacking order: scrim < drawer < custom cursor.
   Cursor must stay on top or it visually disappears over the drawer.
   It is pointer-events:none, so it never intercepts a click. */
.drawer-scrim { z-index: 9998 !important; }
.drawer { z-index: 9999 !important; }
.cursor, .cursor-dot { z-index: 10000 !important; }

/* =============================================================
   20e. DRAWER SCROLL CONTRACT
   The panel is a self contained scroll region. Height is pinned to
   the viewport, content expands naturally, and the browser handles
   the scroll natively. Lenis is told to keep out via
   [data-lenis-prevent] on the markup.
   ============================================================= */
#consult-drawer,
#consultation-drawer,
.consultation-drawer,
.drawer-panel,
.drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  width: 100% !important;
  max-width: 520px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
  scrollbar-color: var(--bone-15) transparent;
}

/* Content expands naturally instead of collapsing to the panel height */
.drawer__inner,
.drawer-inner,
.drawer-content {
  min-height: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  /* Clears the fixed close button and gives the last item breathing room */
  padding-bottom: max(80px, env(safe-area-inset-bottom)) !important;
}

/* Critical: flex children default to flex-shrink:1, so a tall stack gets
   squashed to fit the panel instead of overflowing and producing a
   scrollbar. Pinning shrink to 0 makes the content keep its true height,
   which is what actually creates the scrollable overflow. */
.drawer__inner > *,
.drawer-inner > *,
.drawer-content > * {
  flex-shrink: 0 !important;
}
/* The trailing block may still absorb slack when content is short */
.drawer__foot { margin-top: auto !important; }

/* Close control stays reachable while the panel scrolls */
.drawer__close {
  position: sticky !important;
  top: 14px;
  align-self: flex-end;
  margin-bottom: -38px;
  z-index: 2;
  background: rgba(7, 37, 40, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Visible scrollbar so users know the panel scrolls */
.drawer::-webkit-scrollbar { width: 8px; }
.drawer::-webkit-scrollbar-track { background: transparent; }
.drawer::-webkit-scrollbar-thumb {
  background: var(--bone-15);
  border-radius: 100px;
}
.drawer::-webkit-scrollbar-thumb:hover { background: rgba(242, 240, 235, 0.3); }

@media (max-width: 560px) {
  #consult-drawer, .consultation-drawer, .drawer-panel, .drawer { max-width: 100% !important; }
}

/* =============================================================
   20f. POINTER GUARDS (desktop click integrity)
   Any decorative or tracking layer is removed from hit testing so
   it can never swallow a click meant for a link or button.
   ============================================================= */
.custom-cursor,
.cursor-follower,
.cursor-dot,
.cursor,
.ambient-canvas,
.video-overlay,
.hero__canvas,
.hero__veil,
.tile,
.tile__rings,
.tile__grain,
.work-card__scrim,
.work-card__reveal,
.scroll-cue,
.switcher__thumb,
.diag__bar {
  pointer-events: none !important;
}

a, button, input, select, textarea,
.email-link, .email-btn, .email-trigger, .email-direct-trigger {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 10;
}

/* Email triggers: children must not swallow the click either */
.email-direct-trigger,
.email-direct-trigger *,
.email-trigger,
.email-trigger * {
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.email-direct-trigger { z-index: 50; position: relative; }

/* Extra overlay aliases that must never intercept a click */
.canvas-overlay,
.backdrop-blur-wrapper,
.overlay-layer {
  pointer-events: none !important;
}
input, select, textarea { cursor: auto !important; }
input[type="submit"], button[type="submit"] { cursor: pointer !important; }

.email-trigger { text-decoration: none !important; }

/* =============================================================
   20d. PAYSTACK CONSULTATION CARD
   ============================================================= */
.consult-card {
  border: 1px solid var(--clay);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(184,92,75,0.16) 0%, rgba(184,92,75,0.05) 100%);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 41;
}
.consult-card__meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-eyebrow);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-52);
}
.consult-card__meta span {
  padding: 6px 12px; border: 1px solid var(--bone-15); border-radius: 100px;
}
.section--bone .consult-card { border-color: var(--clay); }
.section--bone .consult-card__meta { color: var(--obsidian-45); }
.section--bone .consult-card__meta span { border-color: var(--petrol-28); }
.btn--pay {
  background: var(--clay);
  color: var(--bone);
  border-color: var(--clay);
  border-radius: 100px;
  align-self: flex-start;
}
.btn--pay:hover { background: var(--clay-deep); border-color: var(--clay-deep); transform: scale(1.04); }

/* Mail fallback panel (shown if no desktop mail client responds) */
.mail-fallback {
  display: none;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--bone-15);
  border-radius: 3px;
  background: rgba(242,240,235,0.06);
  gap: 10px;
  flex-direction: column;
}
.mail-fallback.is-visible { display: flex; }
.mail-fallback code {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--bone);
  word-break: break-all;
}
.section--bone .mail-fallback { border-color: var(--petrol-28); background: rgba(10,54,56,0.04); }
.section--bone .mail-fallback code { color: var(--obsidian); }

/* =============================================================
   21. RESPONSIVE ENGINE
   Breakpoints target real devices:
   320 (SE) · 375 (13 mini) · 390 (14/15 Pro) · 412 (Pixel/Galaxy)
   768 (iPad) · 1024 (iPad Pro) · 1440+ (desktop)
   ============================================================= */

/* Universal spill guards / anything that can exceed its box */
img, video, svg, canvas, iframe, table, pre { max-width: 100%; }
p, li, h1, h2, h3, h4, span, a, blockquote, figcaption { overflow-wrap: anywhere; }
.marquee, .hero, .page-hero, .footer, .drawer { max-width: 100%; overflow-x: clip; }
.hero, .page-hero { overflow: hidden; }   /* no sticky children / safe to fully hide */

/* ---- Tablet and below ---- */
@media (max-width: 1024px) {
  :root { --section: clamp(64px, 9vw, 110px); }
  .deck__card { top: 96px; }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  :root {
    --gut: 18px;
    --section: clamp(56px, 12vw, 84px);
  }

  /* Nav sits tighter and stays clear of the notch */
  .nav {
    top: max(12px, env(safe-area-inset-top));
    width: calc(100% - 2 * var(--gut));
  }
  .nav__pill { padding: 9px 9px 9px 16px; gap: 12px; }
  .nav__brand img { width: 24px; height: 24px; }
  .nav__brand span { font-size: 13px; letter-spacing: 0.1em; }
  .nav__burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

  /* Hero breathing room + no clipped display type */
  .hero { padding-block: 124px 76px; min-height: auto; }
  .hero__grid { gap: 24px; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .scroll-cue { display: none; }

  /* Comfortable tap targets everywhere (WCAG 2.5.5 ~44px) */
  .btn { padding: 15px 24px; min-height: 46px; width: auto; }
  .pill { padding: 12px 18px; min-height: 42px; display: inline-flex; align-items: center; }
  .link-arrow { min-height: 40px; align-items: center; }
  .footer__col a { padding-block: 11px; }
  .drawer__channel { padding: 17px 0; }
  .diag__opt { padding: 15px 16px; min-height: 52px; font-size: 14.5px; }
  .diag__key { width: 24px; height: 24px; }
  .diag__nav .btn { flex: 1 1 0; justify-content: center; }

  /* Stacked layouts */
  .split { grid-template-columns: 1fr; }
  .deck__card { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; position: relative; top: 0; }
  .work-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .form-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* Case-study media must never sit above its own copy on mobile */
  .grid-2 > [style*="order:2"] { order: 0 !important; }

  /* Type trims */
  .lede { font-size: 16.5px; }
  .manifesto p { font-size: clamp(21px, 6.4vw, 32px); max-width: none; }
  .deck__phase { font-size: clamp(42px, 15vw, 64px); }
  .split__num { font-size: clamp(38px, 13vw, 56px); }
  .diag { padding: 22px 18px; }
  .diag__q { font-size: clamp(19px, 5.4vw, 24px); }
  .diag__score { font-size: clamp(52px, 17vw, 82px); }

  /* Drawer becomes full width */
  .drawer { width: 100%; }

  /* Marquee slows and tightens */
  .marquee { padding-block: 16px; }
  .marquee__item { padding-inline: 14px; gap: 14px; font-size: 11.5px; }

  /* Matrix scrolls inside its own rail, never the page */
  .matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gut));
    padding-inline: var(--gut);
  }
  .matrix { min-width: 640px; }
}

/* ---- Small phones ---- */
@media (max-width: 430px) {
  :root { --gut: 15px; }
  .nav__brand span { font-size: 12px; }
  /* Allow the capsule labels to wrap. With flex:1 + min-width:0 + normal
     wrapping, the switcher can never exceed its track no matter how long
     the division name is / the capsule grows in height instead. */
  .switcher__btn {
    font-size: 9.5px;
    padding: 11px 8px;
    letter-spacing: 0.05em;
    white-space: normal;
    line-height: 1.25;
    hyphens: none;
  }
  .switcher { border-radius: 22px; }
  .switcher__thumb { border-radius: 18px; }
  .btn { font-size: 11px; padding: 14px 18px; }
  .work-card__reveal { left: 14px; right: 14px; bottom: 14px; }
  .footer__base { font-size: 11.5px; }
}

/* Landscape phones: reclaim vertical space */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 108px 56px; }
  .scroll-cue { display: none; }
}

/* Respect iOS safe areas on notched hardware */
@supports (padding: max(0px)) {
  .shell { padding-left: max(var(--gut), env(safe-area-inset-left));
           padding-right: max(var(--gut), env(safe-area-inset-right)); }
  .drawer__inner { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

/* Prevent iOS auto-zoom on focus (needs >=16px) */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ---------- 22. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .line-wipe > * { transform: none !important; }
  .kin-word { opacity: 1 !important; }
  .marquee__track { transform: none !important; }
  .deck__card { position: relative; top: 0; transform: none !important; opacity: 1 !important; }
  .cursor, .cursor-dot { display: none; }
}

/* =============================================================
   23. RESTRUCTURE COMPONENTS
   ============================================================= */

/* Hero emblem motion reveal */
.hero__emblem {
  width: clamp(76px, 11vw, 132px);
  margin-bottom: 6px;
}
.hero__emblem img {
  width: 100%; height: auto;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.45));
  animation: eml-emblem-in 1.5s var(--ease-lux) both, eml-float 7s ease-in-out 1.5s infinite;
}
@keyframes eml-emblem-in {
  from { opacity: 0; transform: translateY(20px) scale(0.9) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes eml-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Essence media block */
.essence-media { margin: 0; }
.essence-media .work-card__media {
  position: relative; overflow: hidden; border-radius: 3px; background: var(--petrol);
}
.essence-media:hover .work-card__scrim { opacity: 1; }
.essence-media:hover .work-card__reveal { opacity: 1; transform: translateY(0); }

/* Our Story gap cards */
.gap-card {
  border: 1px solid var(--bone-15);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 18px;
  background: rgba(242, 240, 235, 0.04);
  transition: border-color 0.5s var(--ease-lux), background 0.5s var(--ease-lux), transform 0.5s var(--ease-snap);
}
.gap-card:hover {
  border-color: var(--clay);
  background: rgba(242, 240, 235, 0.07);
  transform: translateY(-4px);
}
.gap-card__num { color: rgba(242, 240, 235, 0.22); font-size: clamp(30px, 4vw, 46px); }
.gap-card .h3 { color: var(--bone); }
.gap-card .split__list li { color: var(--bone-78); }
.gap-card__solution {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--bone-15);
}
.gap-card__solution p { font-size: 15px; line-height: 1.6; color: var(--bone); margin-top: 6px; }

/* Impact line */
.impact-line { margin-top: 8px; display: flex; flex-direction: column; gap: 20px; }
.impact-line .h2 { max-width: 20ch; }

/* Services */
.service-bar { display: flex; flex-wrap: wrap; gap: 18px; align-items: end; }
.service-bar .field label { color: var(--obsidian-45); }
.service-card {
  border: 1px solid var(--petrol-12);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bone);
  transition: border-color 0.5s var(--ease-lux), transform 0.5s var(--ease-snap), box-shadow 0.5s var(--ease-lux), opacity 0.4s var(--ease-lux);
}
.service-card:hover {
  border-color: var(--clay);
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(10, 54, 56, 0.1);
}
.service-card__num { color: var(--clay); font-size: clamp(26px, 3.2vw, 38px); }
.service-card.is-dimmed { opacity: 0.28; }
.service-card.is-target { border-color: var(--clay); box-shadow: 0 0 0 2px rgba(184,92,75,0.18); }

/* Contact tiles */
.contact-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--bone-15);
  border-radius: 4px;
  background: rgba(242, 240, 235, 0.04);
  transition: border-color 0.45s var(--ease-lux), background 0.45s var(--ease-lux), transform 0.45s var(--ease-snap);
}
.contact-tile:hover {
  border-color: var(--clay);
  background: rgba(184, 92, 75, 0.12);
  transform: translateY(-3px);
}
.contact-tile__value { font-size: clamp(16px, 1.9vw, 20px); color: var(--bone); }

/* Numeral row keeps digits locked beside their heading */
.numeral-row { align-items: baseline; }
.numeral-row .h3 { min-width: 0; }

@media (max-width: 640px) {
  .numeral-row { align-items: center; gap: 10px; }
  .gap-card, .service-card { padding: 22px 18px; }
}

/* =============================================================
   24. GLOBAL PILL BUTTON STANDARD
   Every action control shares one curved pill geometry.
   Structural icon buttons (burger, drawer close) keep the pill
   radius but override padding so they stay circular.
   ============================================================= */
.btn,
.btn-primary,
.btn-secondary,
a.btn,
input[type="submit"],
button[type="submit"] {
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 28px !important;
  font-family: 'Prata', serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: 1px solid transparent;
  gap: 9px;
  line-height: 1.1;
  text-align: center;
}

.btn-terracotta,
.btn--clay {
  background-color: #B85C4B !important;
  color: #F2F0EB !important;
  border-color: #B85C4B !important;
  box-shadow: 0 4px 18px rgba(184, 92, 75, 0.28) !important;
}
.btn-terracotta:hover,
.btn--clay:hover {
  background-color: #a04e3f !important;
  border-color: #a04e3f !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(184, 92, 75, 0.42) !important;
}

.btn-bone, .btn--bone {
  background-color: var(--bone) !important;
  color: var(--petrol) !important;
  border-color: var(--bone) !important;
}
.btn-bone:hover, .btn--bone:hover {
  background-color: var(--clay) !important;
  color: var(--bone) !important;
  border-color: var(--clay) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.btn-ghost-line, .btn--ghost {
  background: transparent !important;
  border-color: currentColor !important;
  color: inherit !important;
}
.btn-ghost-line:hover, .btn--ghost:hover {
  background: var(--clay) !important;
  border-color: var(--clay) !important;
  color: var(--bone) !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.btn:active, .btn-primary:active { transform: scale(0.985) !important; }

/* Icon buttons: pill radius, square footprint */
.nav__burger, .drawer__close {
  border-radius: 9999px !important;
  padding: 0 !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: normal !important;
}
.nav__burger { flex-direction: column; gap: 5px; }
/* Service and filter controls keep their own scale */
.switcher__btn { padding: 13px clamp(8px, 3vw, 24px) !important; font-size: clamp(9.5px, 2.4vw, 11px) !important; }
.diag__opt { border-radius: 9999px !important; padding: 15px 22px !important;
  letter-spacing: normal !important; text-transform: none !important;
  font-family: var(--font-body) !important; font-size: 15px !important; justify-content: flex-start !important; }
.nav__cta { padding: 12px 22px !important; }

/* =============================================================
   25. NUMBER MARKERS
   ============================================================= */
.num-marker {
  display: inline-block !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1 !important;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.gap-card__num { color: rgba(242,240,235,0.24); font-size: clamp(30px, 4vw, 46px); }
.service-card__num { color: var(--clay); font-size: clamp(26px, 3.2vw, 38px); }

/* =============================================================
   26. FULL SCREEN MOTION GRAPHICS INTRO
   ============================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: var(--petrol);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.intro.is-done {
  opacity: 0;
  transform: translateY(-3%);
  pointer-events: none;
  transition: opacity 0.9s var(--ease-lux), transform 1.1s var(--ease-lux);
}
.intro.is-removed { display: none; }
body[data-intro] { overflow: hidden; }
body[data-intro].intro-finished { overflow: visible; }

.intro__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding-inline: 24px; text-align: center;
}
.intro__glow {
  position: absolute; top: 42%; left: 50%;
  width: min(90vw, 720px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242,240,235,0.20) 0%, rgba(184,92,75,0.14) 40%, transparent 68%);
  filter: blur(30px);
  animation: intro-glow 2.6s var(--ease-lux) both;
}
.intro__emblem {
  width: clamp(130px, 24vw, 250px);
  height: auto;
  animation: intro-emblem 1.9s var(--ease-lux) both;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
.intro__type span {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: clamp(11px, 2.3vw, 15px);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--bone);
  animation: intro-type 1.5s var(--ease-lux) 0.85s both;
}
.intro__rule {
  width: 0; height: 1px; background: var(--clay);
  animation: intro-rule 1.2s var(--ease-lux) 1.5s both;
}
.intro__skip {
  position: absolute; bottom: 34px; right: 34px;
  color: var(--bone-52) !important;
  animation: intro-fade 0.6s ease 1.9s both;
  padding: 10px 20px !important; font-size: 10px !important;
}
@keyframes intro-emblem {
  0%   { opacity: 0; transform: scale(0.55) rotate(-14deg); filter: blur(12px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
@keyframes intro-type {
  from { opacity: 0; transform: translateY(16px); letter-spacing: 0.62em; }
  to   { opacity: 1; transform: none; letter-spacing: 0.36em; }
}
@keyframes intro-rule { from { width: 0; } to { width: min(220px, 52vw); } }
@keyframes intro-glow { from { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
                        to   { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .intro__emblem, .intro__type span, .intro__rule, .intro__glow { animation: none !important; opacity: 1 !important; }
  .intro__rule { width: 180px; }
}

/* =============================================================
   27. BRAND LOGO MARQUEE + LOGO TILES
   ============================================================= */
.marquee--logos { padding-block: 30px; background: var(--bone); border-block: 1px solid var(--petrol-12); }
.marquee__item--logo { padding-inline: clamp(24px, 4vw, 52px); }
.marquee__item--logo::after { display: none; }
.marquee__item--logo img {
  height: clamp(34px, 5vw, 54px);
  width: auto; max-width: 190px; object-fit: contain;
  filter: grayscale(1) brightness(0.28);
  opacity: 0.72;
  transition: filter 0.5s var(--ease-lux), opacity 0.5s var(--ease-lux), transform 0.5s var(--ease-snap);
}
.marquee--logos:hover .marquee__item--logo img { opacity: 0.55; }
.marquee__item--logo img:hover {
  filter: none; opacity: 1; transform: scale(1.06);
}

.tile--logo { display: grid; place-items: center; }
.tile__logo {
  position: relative; z-index: 2;
  width: min(46%, 260px); height: auto; object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 12px 26px rgba(0,0,0,0.4));
  opacity: 0.94;
}

/* Ecosystem list on The EML Difference */
.eco-list { display: grid; gap: 2px; }
.eco-list li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--petrol-12);
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.5;
  color: var(--obsidian);
}
.eco-list li::before {
  content: ''; flex: none; width: 7px; height: 7px; margin-top: 12px;
  background: var(--clay); border-radius: 50%;
}
.on-petrol .eco-list li { color: var(--bone); border-bottom-color: var(--bone-15); }

.contact-tile--action { text-align: left; }

/* =============================================================
   28. NAV FIT
   Six longer labels plus the CTA crowd the pill and cause the
   link text to wrap. Tighten the type, forbid wrapping, and
   switch to the burger earlier so the bar never breaks.
   ============================================================= */
.nav__links a {
  white-space: nowrap;
  font-size: clamp(10px, 0.78vw, 11.5px);
  letter-spacing: 0.12em;
}
.nav__links { gap: clamp(14px, 1.5vw, 24px); }
.nav__pill { gap: clamp(14px, 1.6vw, 24px); }
.nav__cta { white-space: nowrap; font-size: 10px !important; padding: 12px 20px !important; }
.nav__brand span { white-space: nowrap; }

/* Burger takes over before the bar can crowd */
@media (max-width: 1180px) {
  .nav__links, .nav__pill > .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
}
@media (min-width: 1181px) {
  .nav__burger { display: none; }
}

/* =============================================================
   29. ESSENCE PRINCIPLES
   Replaces the removed media plate. Real content only, no
   placeholder frames waiting on assets.
   ============================================================= */
.principle {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px;
  border: 1px solid var(--petrol-12);
  border-radius: 4px;
  background: var(--bone);
  transition: border-color 0.5s var(--ease-lux), transform 0.5s var(--ease-snap);
}
.principle:hover { border-color: var(--clay); transform: translateY(-4px); }
.principle__num {
  font-size: clamp(26px, 3.2vw, 40px);
  color: var(--clay);
}
.principle__label {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.4;
  color: var(--obsidian);
}
.on-petrol .principle { background: rgba(242,240,235,0.04); border-color: var(--bone-15); }
.on-petrol .principle__label { color: var(--bone); }
@media (max-width: 900px) { .principle { padding: 20px 18px; } }

/* =============================================================
   30. BRAND LOGO MARQUEE (7 partners)
   NOTE: brightness(0) invert(1) renders the marks pure white,
   so the strip must sit on Petrol. On the Bone background the
   logos would have been white-on-white and invisible.
   ============================================================= */
.marquee--logos {
  background: var(--petrol) !important;
  border-block: 1px solid var(--bone-15) !important;
  padding-block: 34px;
}
.brand-logo-item { padding-inline: clamp(22px, 4vw, 54px); }
.brand-logo-item::after { display: none; }
.brand-logo-item img {
  max-height: 42px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.75);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.brand-logo-item img:hover {
  filter: brightness(0) invert(1) opacity(1);
  transform: scale(1.08);
}
@media (max-width: 600px) {
  .brand-logo-item img { max-height: 30px; }
  .brand-logo-item { padding-inline: 18px; }
}

/* Intro subtitle */
.intro__sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 2.6vw, 24px);
  line-height: 1.25;
  color: var(--bone-78);
  max-width: 20ch;
  animation: intro-sub 1.2s var(--ease-lux) 1.75s both;
}
@keyframes intro-sub { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .intro__sub { animation: none !important; opacity: 1 !important; } }

/* Intro exit: upward fade */
.intro.is-done {
  opacity: 0 !important;
  transform: translateY(-40px) !important;
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* =============================================================
   31. UNIVERSAL RESPONSIVENESS (360px to 2560px)
   ============================================================= */
.nav-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.nav { width: calc(100% - 32px) !important; max-width: 1200px !important; margin: 16px auto !important; left: 0; right: 0; transform: none !important; }

@media (max-width: 1024px) {
  .desktop-nav-links { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
  .nav__pill > .nav__cta { display: none !important; }
}
@media (min-width: 1025px) {
  .desktop-nav-links { display: flex !important; }
  .mobile-menu-btn { display: none !important; }
}

/* Fluid display type */
h1.hero-title, .h-display.hero-title {
  font-size: clamp(2rem, 5.5vw, 5.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
h2.section-title, .h2.section-title {
  font-size: clamp(1.75rem, 4vw, 3.75rem) !important;
  line-height: 1.12 !important;
  overflow-wrap: break-word !important;
}

/* Card grids: 1 column on phones, 2 from tablet up */
.responsive-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}
@media (min-width: 768px) {
  .responsive-grid-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
}

/* Ultra wide: keep the measure sane rather than stretching */
@media (min-width: 1800px) {
  :root { --max: 1480px; }
  body { font-size: 18px; }
}

/* Very small phones (360px and under) */
@media (max-width: 380px) {
  :root { --gut: 14px; }
  .nav { width: calc(100% - 20px) !important; }
  .nav-container { padding: 8px 12px !important; }
  .nav__brand span { font-size: 11px; letter-spacing: 0.08em; }
  .nav__brand img { width: 20px; height: 20px; }
  .btn, .btn-primary { padding: 12px 18px !important; font-size: 10px !important; }
  .principle, .gap-card, .service-card { padding: 18px 15px; }
}

/* Absolute overflow guard on every layout primitive */
.shell, .section, .hero, .page-hero, .marquee, .deck, .footer,
.grid-2, .grid-3, .grid-4, .work-grid, .responsive-grid-2 {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* =============================================================
   32. NAV FLEX INTEGRITY
   The brand lockup and CTA default to flex-shrink:1, so in a
   crowded bar they compress below their own nowrap text width
   and the label visibly overlaps the first nav link. Pin them.
   ============================================================= */
.nav__brand { flex: 0 0 auto !important; min-width: 0; }
.nav__cta   { flex: 0 0 auto !important; }
.nav__links {
  flex: 1 1 auto !important;
  min-width: 0;
  justify-content: center !important;
  overflow: hidden;
}
.nav__pill.nav-container { gap: clamp(12px, 1.4vw, 22px) !important; }

/* Below 1280px the six labels crowd the lockup: hand over to the burger */
@media (max-width: 1280px) {
  .desktop-nav-links { display: none !important; }
  .nav__pill > .nav__cta { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
}
@media (min-width: 1281px) {
  .desktop-nav-links { display: flex !important; }
  .nav__pill > .nav__cta { display: inline-flex !important; }
  .mobile-menu-btn { display: none !important; }
}

/* =============================================================
   33. NAV FIT, FINAL
   Never clip labels. The six-item bar plus lockup plus CTA needs
   roughly 1400px to sit comfortably, so the burger takes over
   below that instead of squeezing or cutting text.
   ============================================================= */
.nav__links {
  overflow: visible !important;
  flex-wrap: nowrap !important;
}
.nav__links a { flex: 0 0 auto; }

@media (max-width: 1400px) {
  .desktop-nav-links { display: none !important; }
  .nav__pill > .nav__cta { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
}
@media (min-width: 1401px) {
  .desktop-nav-links { display: flex !important; }
  .nav__pill > .nav__cta { display: inline-flex !important; }
  .mobile-menu-btn { display: none !important; }
}

/* =============================================================
   34. FLOATING HEADER, SPACED
   Wide, breathable link rhythm on desktop; clean collapse to
   emblem + CTA + burger below 1180px.
   ============================================================= */
.nav {
  width: min(94%, 1320px) !important;
  max-width: 1320px !important;
  margin: 20px auto !important;
  left: 0 !important; right: 0 !important;
  transform: none !important;
}
.nav-container {
  width: 100% !important;
  padding: 12px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  background: rgba(10, 54, 56, 0.9) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(242, 240, 235, 0.12) !important;
  border-radius: 9999px !important;
}
.nav.is-stuck .nav-container {
  background: rgba(7, 37, 40, 0.94) !important;
  box-shadow: 0 18px 44px rgba(7, 37, 40, 0.30) !important;
}

.desktop-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
}
.desktop-nav-links a {
  font-family: 'Prata', serif !important;
  font-size: 11.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #F2F0EB !important;
  opacity: 0.85 !important;
  transition: opacity 0.25s ease, color 0.25s ease !important;
  white-space: nowrap !important;
  border-bottom: 1.5px solid transparent !important;
  padding-bottom: 2px !important;
}
.desktop-nav-links a:hover,
.desktop-nav-links a.active,
.desktop-nav-links a[aria-current="page"] { opacity: 1 !important; color: #F2F0EB !important; }
.desktop-nav-links a.active,
.desktop-nav-links a[aria-current="page"] { border-bottom-color: #B85C4B !important; }

/* Collapse below 1180px: emblem + CTA + burger only */
@media (max-width: 1180px) {
  .desktop-nav-links { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
  .nav__pill > .nav__cta { display: inline-flex !important; }
  .nav-container { gap: 14px !important; padding: 10px 12px 10px 20px !important; }
  .nav__cta { font-size: 9.5px !important; padding: 11px 16px !important; }
}
@media (min-width: 1181px) {
  .desktop-nav-links { display: flex !important; }
  .mobile-menu-btn { display: none !important; }
  .nav__pill > .nav__cta { display: inline-flex !important; }
}
/* Very narrow: brand mark only, CTA moves into the overlay */
@media (max-width: 560px) {
  .nav__pill > .nav__cta { display: none !important; }
  /* removed: the brand wordmark is never hidden, see §44 */
  .nav-container { padding: 10px 12px !important; justify-content: space-between !important; }
}

/* Full screen glass overlay menu */
.nav__mobile {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(7, 37, 40, 0.96) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  z-index: 9990 !important;
  padding: clamp(90px, 16vh, 150px) var(--gut) 40px !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.nav__mobile a {
  font-family: 'Prata', serif !important;
  font-size: clamp(19px, 5.4vw, 30px) !important;
  letter-spacing: 0.06em !important;
  line-height: 1.5 !important;
  padding: 20px 0 !important;
  min-height: 60px;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--bone-15) !important;
}
.nav__mobile .btn { margin-top: 28px !important; align-self: flex-start; }

/* First section on pages without a page-hero must clear the pill */
.section--first { padding-top: clamp(140px, 18vh, 200px) !important; }

/* =============================================================
   35. NAV FIT BETWEEN 1180px AND 1400px
   At the requested 1180px breakpoint the six labels, wordmark
   and CTA exceed the pill, so the links container shrinks and
   its nowrap children overflow left, colliding with the brand.
   Between 1181 and 1400 we drop the wordmark and keep the
   emblem, which frees the ~150px needed for the links to sit
   comfortably. Full lockup returns above 1400.
   ============================================================= */
.desktop-nav-links { flex: 0 0 auto !important; }
.nav__brand { flex: 0 0 auto !important; }

@media (min-width: 1181px) and (max-width: 1400px) {
  /* removed: the brand wordmark is never hidden, see §44 */
  .desktop-nav-links { gap: 22px !important; }
  .desktop-nav-links a { font-size: 10.5px !important; letter-spacing: 0.13em !important; }
  .nav-container { gap: 20px !important; padding: 12px 20px !important; }
  .nav__cta { font-size: 9.5px !important; padding: 11px 18px !important; }
}
@media (min-width: 1401px) {
  .nav__brand span { display: inline !important; }
}

/* =============================================================
   36. PILL WIDTH RECONCILIATION
   Section 31 capped .nav-container at 1200px, which is narrower
   than the spacious layout in section 34 needs once the wordmark
   returns above 1400px. The CTA then overflowed the pill. Let
   .nav own the width and give it room at large viewports.
   ============================================================= */
.nav-container { max-width: 100% !important; }

@media (min-width: 1401px) {
  .nav {
    width: min(96%, 1440px) !important;
    max-width: 1440px !important;
  }
}

/* =============================================================
   37. BRAND LOGO MARQUEE — 8 BRAND LINEUP, OPTICAL BALANCE
   Kenchio Ventures and Beard & Butter now use dedicated horizontal
   wordmark crops, so their names read at marquee scale instead of
   collapsing into an emblem. IGGFY ships pre-cleaned (its opaque
   black offset-shadow layer is stripped from the asset) so the
   invert filter renders letterforms, not a solid blob.
   Heights are set per lockup: aspect ratios here run from 0.68:1
   (Xela) to 8.17:1 (Kenchio), so one shared max-height cannot give
   them equal optical weight.
   ============================================================= */
.brand-logo-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: clamp(20px, 3vw, 34px) !important;
  height: 58px !important;
}
.brand-logo-item::after { display: none !important; }

.brand-logo-item img,
.marquee__item--logo img {
  height: auto !important;
  width: auto !important;
  max-height: 42px;
  max-width: 220px;
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast;
  filter: brightness(0) invert(1);
  opacity: 0.88;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Per lockup calibration (aspect ratio in comment) */
.brand-logo-item img[src*="kenchio"]       { max-height: 26px; max-width: 220px; opacity: 0.95; } /* 8.17:1 */
.brand-logo-item img[src*="soul-ties"]     { max-height: 30px; max-width: 200px; }                /* 6.21:1 */
.brand-logo-item img[src*="beard"]         { max-height: 28px; max-width: 190px; opacity: 0.95; } /* 5.64:1 */
.brand-logo-item img[src*="ichie"]         { max-height: 42px; }                                  /* 1.87:1 */
.brand-logo-item img[src*="pay-with-play"] { max-height: 42px; }                                  /* 1.81:1 */
.brand-logo-item img[src*="iggfy"]         { max-height: 42px; opacity: 0.95; }                   /* 1.77:1 */
.brand-logo-item img[src*="afro"]          { max-height: 54px; }                                  /* 0.72:1 */
.brand-logo-item img[src*="xela"]          { max-height: 54px; }                                  /* 0.68:1 */

.marquee--logos:hover .brand-logo-item img,
.marquee--logos:hover .marquee__item--logo img { opacity: 0.88; }

.brand-logo-item img:hover,
.marquee__item--logo img:hover {
  opacity: 1;
  transform: scale(1.06);
}

@media (max-width: 700px) {
  .brand-logo-item { height: 46px !important; padding-inline: 16px !important; }
  .brand-logo-item img,
  .marquee__item--logo img { max-height: 32px; max-width: 160px; }
  .brand-logo-item img[src*="kenchio"]   { max-height: 19px; max-width: 160px; }
  .brand-logo-item img[src*="soul-ties"] { max-height: 22px; max-width: 146px; }
  .brand-logo-item img[src*="beard"]     { max-height: 21px; max-width: 140px; }
  .brand-logo-item img[src*="afro"],
  .brand-logo-item img[src*="xela"]      { max-height: 42px; }
}

/* =============================================================
   38. VERTICAL RHYTHM COMPRESSION
   Two failure modes produced the dead voids:
   (a) --section was up to 168px, applied top AND bottom, so any two
       stacked sections cost up to 336px of empty scroll;
   (b) consecutive sections sharing a background (bone -> bone) pay
       that full double padding with no visual break to justify it,
       which is exactly the gap above "Who We Work With".
   ============================================================= */
:root {
  --section:     clamp(64px, 7.2vw, 104px);
  --section-sub: clamp(40px, 4.4vw, 60px);
  --seam:        clamp(26px, 3vw, 46px);
}

/* Same background back to back: collapse the seam to one soft beat.
   Both sides are trimmed, not just the top, so bone -> bone reads as
   one continuous canvas with a single breath between the blocks. */
.section--bone + .section--bone,
.section--petrol + .section--petrol,
.section--obsidian + .section--obsidian {
  padding-top: var(--seam);
}
@supports selector(:has(*)) {
  .section--bone:has(+ .section--bone),
  .section--petrol:has(+ .section--petrol),
  .section--obsidian:has(+ .section--obsidian) {
    padding-bottom: var(--seam);
  }
}

/* Marquee strips are transition furniture, not sections */
.marquee--logos { padding-block: clamp(22px, 2.6vw, 32px); }
.marquee--logos + .section { padding-top: var(--section-sub); }
@supports selector(:has(*)) {
  .section:has(+ .marquee--logos) { padding-bottom: var(--section-sub); }
}

/* Closing statements should not carry their own trailing void */
.section > .shell > .stack:last-child { margin-bottom: 0; }
.impact-line { padding-block: 0; }

/* =============================================================
   39. RESPONSIVE FIT — 360px TO 2560px
   ============================================================= */
.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
@media (min-width: 1900px) { :root { --max: 1480px; } }

/* No element may create a horizontal scrollbar */
img, svg, video, canvas, iframe { max-width: 100%; }
.marquee, .marquee__track { max-width: 100vw; }

/* Rhythm ladder re-declared here so it wins over the older §21 blocks
   that sit earlier in this file and would otherwise be overridden by
   the new §38 base values. */
@media (max-width: 1024px) {
  :root { --section: clamp(58px, 6.6vw, 88px); --section-sub: clamp(34px, 4vw, 50px); --seam: clamp(24px, 2.8vw, 38px); }
}
@media (max-width: 768px) {
  :root { --section: clamp(52px, 8vw, 72px); --section-sub: 32px; --seam: 24px; }
}
@media (max-width: 480px) {
  :root { --section: clamp(46px, 10vw, 62px); --section-sub: 28px; --seam: 20px; }
}

/* Tap targets: every interactive pill clears 44px on touch */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav__mobile a, .nav__burger, [data-drawer-open] {
    min-height: 44px;
    border-radius: 9999px;
  }
  .nav__mobile a { display: flex; align-items: center; }
}

/* =============================================================
   40. NAV BREAKPOINT AT 1100px + BRAND FALLBACK
   Owns every nav visibility decision. Earlier blocks (§32, §33,
   §35) set this at 1180px and 1400px; this section supersedes them
   because it is last in the cascade. The six labels are sized
   fluidly rather than in discrete steps, so the bar self fits at
   any width from 1101px up instead of clipping between guesses.
   ============================================================= */
@media (max-width: 1100px) {
  .desktop-nav-links   { display: none !important; }
  .mobile-menu-btn,
  .nav__burger         { display: inline-flex !important; }
  .nav__pill > .nav__cta { display: inline-flex !important; }
  .nav-container       { gap: 14px !important; padding: 10px 12px 10px 18px !important; }
  .nav__cta            { font-size: 9.5px !important; padding: 11px 16px !important; }
}
@media (min-width: 1101px) {
  .desktop-nav-links   { display: flex !important; }
  .mobile-menu-btn,
  .nav__burger         { display: none !important; }
  .nav__pill > .nav__cta { display: inline-flex !important; }
  .nav__mobile         { display: none !important; }

  /* Fluid fit: gap and label size scale with the viewport so the
     bar never needs to clip, wrap, or drop to the burger early. */
  .desktop-nav-links   { gap: clamp(14px, 1.9vw, 28px) !important; }
  .desktop-nav-links a { font-size: clamp(10px, 0.82vw, 11.5px) !important; }
  .nav-container       { gap: clamp(18px, 2.2vw, 32px) !important; }
}
/* Wordmark is permanent at every width, see §44. The rule that used
   to hide it between 1101 and 1400px has been deleted, not overridden. */

/* Inline SVG emblem shown only if the PNG fails to load */
.nav__brand-fallback {
  display: none;
  width: 26px; height: 26px;
  color: var(--bone);
  flex: 0 0 auto;
}

/* =============================================================
   41. PAINT AND SCROLL PERFORMANCE
   Long pages force the browser to lay out and paint sections that
   are nowhere near the viewport. content-visibility lets it skip
   that work until each section is close to being scrolled into
   view, which is the single biggest first paint win available
   here without touching the markup.

   Scoped deliberately: sections that host GSAP ScrollTrigger work
   (sticky decks, kinetic scrubs) are excluded, because skipping
   their layout makes ScrollTrigger measure zero height and the
   animation never fires. Only inert content sections opt in.
   ============================================================= */
/* content-visibility was applied to .section here and has been REMOVED.
   On a Lenis smooth scrolled page it is not safe: skipped sections are
   sized from contain-intrinsic-size, so the document height changes as
   they render on first scroll through, and Lenis plus ScrollTrigger
   cache the old limit. The footer keeps it because nothing sits below
   it, so a height correction there cannot shift anything. */
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
/* =============================================================
   42. UNIFORM BUTTON GEOMETRY
   The 44px floor previously existed only below 768px and on coarse
   pointers, so desktop buttons rendered short. Applied globally now,
   with the pill radius restated so no later override can square a
   button off.
   ============================================================= */
.btn,
button.btn,
a.btn {
  min-height: 44px !important;
  border-radius: 9999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Compositor hints for the only continuously animating elements */
.marquee__track { will-change: transform; }
.hero__canvas   { will-change: opacity; }

/* Respect reduced motion at the engine level */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none !important; transform: none !important; }
}

/* =============================================================
   43. LUXURY MORPHING MENU TOGGLE + FULL SCREEN OVERLAY
   Supersedes every earlier .nav__burger / .nav__mobile rule.
   The old markup is gone, so those blocks are now dead selectors.

   STACKING NOTE, the part that actually decides whether this works:
   .nav is position fixed with z-index 95 AND isolation: isolate,
   which forces its own stacking context. A z-index on the toggle is
   therefore scoped inside .nav and cannot lift it above a sibling
   of .nav. The overlay is a direct child of body at z-index 90, so
   the whole pill (toggle included) paints above it because 95 > 90.
   Raising the toggle to 100 inside .nav would have done nothing.
   ============================================================= */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:hover { transform: scale(1.05); }
.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

.menu-line {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: #F2F0EB;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              background-color 0.3s ease;
}
/* Morph to a thin terracotta X. 6.5px = one line height (1.5) plus one gap (5). */
.mobile-menu-btn.is-active .line-1 { transform: translateY(6.5px) rotate(45deg);  background-color: #B85C4B; }
.mobile-menu-btn.is-active .line-2 { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.is-active .line-3 { transform: translateY(-6.5px) rotate(-45deg); background-color: #B85C4B; }

/* ---------- Overlay ---------- */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: rgba(10, 54, 56, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: clamp(96px, 15vh, 132px) clamp(20px, 6vw, 28px) max(40px, env(safe-area-inset-bottom));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.mobile-nav-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 100%;
  max-width: 500px;
  margin-inline: auto;
  width: 100%;
}
/* Children must never be squeezed by the flex parent, the same failure
   that previously stopped the consultation drawer from scrolling. */
.mobile-nav-container > * { flex-shrink: 0; }

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vh, 16px);
}
.mobile-link {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  padding: clamp(10px, 1.6vh, 14px) 0;
  min-height: 52px;
  border-bottom: 1px solid rgba(242, 240, 235, 0.08);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease,
              border-color 0.3s ease;
}
.mobile-link .link-num {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #B85C4B;
  flex: 0 0 auto;
}
.mobile-link .link-text {
  font-family: var(--font-eyebrow);
  font-size: clamp(1.25rem, 4.5vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #F2F0EB;
  transition: color 0.3s ease, transform 0.3s ease;
}
.mobile-link[aria-current="page"] .link-text { color: #B85C4B; }
.mobile-link:hover .link-text,
.mobile-link:focus-visible .link-text { color: #B85C4B; transform: translateX(6px); }
.mobile-link:hover { border-color: rgba(184, 92, 75, 0.5); }

/* Staggered entry */
.mobile-nav-overlay.is-open .mobile-link { transform: translateY(0); opacity: 1; }
.mobile-nav-overlay.is-open .mobile-link[data-index="1"] { transition-delay: 0.08s; }
.mobile-nav-overlay.is-open .mobile-link[data-index="2"] { transition-delay: 0.14s; }
.mobile-nav-overlay.is-open .mobile-link[data-index="3"] { transition-delay: 0.20s; }
.mobile-nav-overlay.is-open .mobile-link[data-index="4"] { transition-delay: 0.26s; }
.mobile-nav-overlay.is-open .mobile-link[data-index="5"] { transition-delay: 0.32s; }
.mobile-nav-overlay.is-open .mobile-link[data-index="6"] { transition-delay: 0.38s; }

.mobile-nav-footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.42s, opacity 0.5s ease 0.42s;
}
.mobile-nav-overlay.is-open .mobile-nav-footer { transform: translateY(0); opacity: 1; }
.mobile-nav-cta { width: 100%; justify-content: center; }

.mobile-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-eyebrow);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(242, 240, 235, 0.6);
}
.mobile-socials a {
  color: #F2F0EB;
  text-decoration: none;
  padding: 10px 2px;          /* touch target without changing the visual */
  transition: color 0.25s ease;
}
.mobile-socials a:hover { color: #B85C4B; }

/* Body scroll lock. touch-action alone does not stop iOS Safari, the
   fixed position plus restored scrollTop in support.js does. */
body.menu-locked {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Visibility ladder, matches the 1100px breakpoint in §40 */
@media (max-width: 1100px) {
  .mobile-menu-btn { display: flex !important; }
}
@media (min-width: 1101px) {
  .mobile-menu-btn { display: none !important; }
  .mobile-nav-overlay { display: none !important; }
}

/* Landscape phones. Six 44px links plus the CTA cannot fit in ~300px of
   usable height, so the overlay scrolls here by design. The 44px tap
   target floor is kept, type and padding shrink instead, and the CTA is
   pinned to the bottom of the scroll area so it is always reachable. */
@media (max-width: 1100px) and (max-height: 520px) {
  /* Must clear the floating pill, which sits at top 18px and is ~62px
     tall, so it ends near 80px. The pill is z-index 95 and the overlay
     90, so anything the pill covers is unclickable. 92px leaves margin. */
  .mobile-nav-overlay { padding-top: 92px; padding-bottom: 24px; }
  .mobile-link { min-height: 44px; padding-block: 4px; }
  .mobile-link .link-text { font-size: clamp(0.95rem, 3.2vh, 1.3rem); }
  .mobile-nav-links { gap: 2px; }
  .mobile-nav-container { gap: 18px; }
  .mobile-nav-footer { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-link, .mobile-nav-footer { transition-delay: 0s !important; transform: none !important; }
  .menu-line { transition: none !important; }
}

/* =============================================================
   44. BRAND IDENTITY LOCK + LUXURY ARCHITECTURAL TRIGGER
   Last block in the file, so it settles every earlier nav rule.

   THE BUG THIS FIXES: §32 hid .nav__brand span below 560px and §35
   hid it again between 1181 and 1400px, so the wordmark disappeared
   on phones and on mid size laptops. The CTA was the element being
   protected. That priority is now inverted: the brand is the
   authority anchor and never yields, the CTA is what gives way.
   ============================================================= */

/* ---- Brand: never hidden, never shrunk, at any width ---- */
.nav__brand,
.brand-anchor {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto !important;
  min-width: 0;
  text-decoration: none;
}
.nav__brand span,
.brand-anchor span {
  display: inline !important;      /* overrides §32 and §35 */
  visibility: visible !important;
  font-family: var(--font-mark);
  color: var(--bone);
  white-space: nowrap;
  overflow: visible;
  font-size: clamp(10px, 2.9vw, 15px);
  letter-spacing: clamp(0.07em, 0.6vw, 0.13em);
}
.nav__brand img,
.nav__brand-fallback {
  width: clamp(22px, 5.4vw, 27px);
  height: clamp(22px, 5.4vw, 27px);
  flex: 0 0 auto;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__brand:hover img { transform: rotate(45deg); }

/* ---- CTA yields to the brand below 768px ---- */
@media (max-width: 767px) {
  .nav__pill > .nav__cta { display: none !important; }
  .nav-container { gap: 12px !important; padding: 9px 10px 9px 16px !important; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .nav__pill > .nav__cta { display: inline-flex !important; }
  .nav__cta { font-size: 9.5px !important; padding: 11px 16px !important; }
  .nav-container { gap: 14px !important; }
}
/* The pill must distribute, never compress the brand */
.nav__pill { justify-content: space-between !important; }
.nav__pill > .nav__cta { flex: 0 0 auto !important; }

/* =============================================================
   LUXURY ARCHITECTURAL TRIGGER
   Two asymmetric bars, not three. Resting state is 18px over 11px,
   right aligned; hover equalises; open crosses them into a thin X.
   ============================================================= */
.luxury-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;               /* 44, not 42, to hold the tap target floor */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(242, 240, 235, 0.06);
  border: 1px solid rgba(242, 240, 235, 0.15);
  cursor: pointer;
  position: relative;
  z-index: 100;
  pointer-events: auto !important;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.luxury-menu-btn:hover {
  background: rgba(242, 240, 235, 0.12);
  border-color: rgba(242, 240, 235, 0.3);
  transform: scale(1.05);
}
.luxury-menu-btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

.luxury-menu-icon {
  width: 18px;
  height: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.menu-bar {
  display: block;
  height: 1.5px;
  background-color: #F2F0EB;
  border-radius: 2px;
  transform-origin: center;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease,
              top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bar-top    { width: 18px; }
.bar-bottom { width: 11px; }
.luxury-menu-btn:hover .bar-bottom { width: 18px; }

/* Open: both bars pinned to the exact centre, then crossed.
   Explicit top/left/translate rather than relying on the static
   position of absolutely positioned flex children, which is not
   dependable across engines. */
.luxury-menu-btn.is-active {
  background: rgba(184, 92, 75, 0.22);
  border-color: #B85C4B;
}
.luxury-menu-btn.is-active .menu-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  background-color: #F2F0EB;
}
.luxury-menu-btn.is-active .bar-top    { transform: translate(-50%, -50%) rotate(45deg); }
.luxury-menu-btn.is-active .bar-bottom { transform: translate(-50%, -50%) rotate(-45deg); }

/* Visibility ladder, aligned with the 1100px breakpoint in §40 */
@media (max-width: 1100px) { .luxury-menu-btn { display: flex !important; } }
@media (min-width: 1101px) { .luxury-menu-btn { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .menu-bar, .luxury-menu-btn, .nav__brand img { transition: none !important; }
}

/* =============================================================
   45. HEADER CTA IS DESKTOP ONLY
   Final word on header CTA visibility. Twelve earlier rules across
   §21, §32, §33, §35, §40 and §44 argued about this at 560, 768,
   940, 1100, 1180 and 1400px. All of them are now settled here.

   Below 1100px the header is exactly two things: the brand anchor
   on the left, the luxury trigger on the right. The conversion path
   is not lost, it moves into the overlay footer, which is where a
   full width terracotta pill converts better on a phone anyway.
   ============================================================= */
.header-cta,
.header-cta-btn,
.nav-cta,
.nav__cta,
.nav__pill > .nav__cta,
.nav-container a[href*="eml-consultation"],
.nav-container .btn-terracotta {
  display: none !important;
}

@media (min-width: 1100px) {
  .header-cta,
  .header-cta-btn,
  .nav-cta,
  .nav__cta,
  .nav__pill > .nav__cta,
  .nav-container a[href*="eml-consultation"],
  .nav-container .btn-terracotta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
    font-family: var(--font-eyebrow) !important;
    font-size: clamp(10px, 0.82vw, 11px) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    background-color: #B85C4B !important;
    color: #F2F0EB !important;
    border-radius: 9999px !important;
    border: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .header-cta:hover,
  .header-cta-btn:hover,
  .nav__cta:hover {
    background-color: #A04E3F !important;
    transform: translateY(-1px) scale(1.03) !important;
    box-shadow: 0 6px 18px rgba(184, 92, 75, 0.35) !important;
  }
  .header-cta:focus-visible,
  .nav__cta:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
}

/* Below 1100px the brand may claim the space the CTA gave up */
@media (max-width: 1099px) {
  .nav-container { gap: 12px !important; padding: 9px 10px 9px 16px !important; }
  .nav__brand span { font-size: clamp(10.5px, 3vw, 15px) !important; }
}

/* Overlay footer pill carries the conversion path on touch devices.
   Selector is deliberately a.btn.mobile-nav-cta: §42 sets a 44px floor
   via `a.btn` (0,1,1), which outranks a bare .mobile-nav-cta (0,1,0),
   so the taller target was silently losing the cascade. */
.mobile-nav-overlay a.btn.mobile-nav-cta,
a.btn.mobile-nav-cta {
  width: 100% !important;
  justify-content: center !important;
  padding-block: 16px !important;
  min-height: 54px !important;
}

/* -------------------------------------------------------------
   Breakpoint reconciliation.
   §40 and §44 treated 1100px as tablet (links from 1101, trigger to
   1100). This brief defines 1100px and wider as desktop, so at
   exactly 1100px the CTA would have appeared next to the trigger
   with no inline links. One threshold now, applied to all three.
   ------------------------------------------------------------- */
@media (max-width: 1099px) {
  .desktop-nav-links { display: none !important; }
  .luxury-menu-btn   { display: flex !important; }
}
@media (min-width: 1100px) {
  .desktop-nav-links { display: flex !important; }
  .luxury-menu-btn   { display: none !important; }
  .mobile-nav-overlay { display: none !important; }
}


/* -------------------------------------------------------------
   Desktop floor, 1100 to 1200px.
   At exactly 1100px the pill is min(94%, 1320) = 1034px wide, and
   brand plus six labels plus CTA measured 1098px, so the CTA hung
   46px outside the pill. The bar is compressed across this band
   instead of pushing the desktop threshold back up.
   ------------------------------------------------------------- */
@media (min-width: 1100px) and (max-width: 1200px) {
  .nav { width: calc(100% - 2 * 14px) !important; max-width: none !important; }
  .nav-container { gap: 12px !important; padding: 10px 10px 10px 16px !important; }
  /* The wordmark is NOT hidden here. Measured at 1100px the bar needs
     about 807px of a 1046px pill once the type is tightened, so there
     is no reason to drop the brand. Hiding it was the §32/§35 mistake
     that §44 exists to undo. */
  .nav__brand span { font-size: 11.5px !important; letter-spacing: 0.08em !important; }
  .nav__brand img  { width: 24px !important; height: 24px !important; }
  .desktop-nav-links { gap: 14px !important; }
  .desktop-nav-links a { font-size: 9.5px !important; letter-spacing: 0.08em !important; }
  .header-cta, .nav__cta, .nav__pill > .nav__cta {
    padding: 9px 14px !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }
}