/* ============================================================
   THE LEDE ADVISORY — Credentials site
   Page styles. Tokens come from colors_and_type.css.
   Every value below references brand tokens — no new hexes.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--lede); color: #fff; }
em { font-style: normal; }  /* brand uses Instrument Serif Roman, not italic */

/* ---- Root-level snap scrolling (window scrolls) ---- */
html {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}
body { scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }

/* ============================================================
   PANEL — full-viewport editorial frame
   ============================================================ */
.panel {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  padding: clamp(80px, 8vh, 120px) clamp(28px, 6vw, 128px) clamp(48px, 6vh, 88px);
  background: var(--paper);
  overflow: hidden;
}
.panel.noir { background: var(--noir); color: var(--paper-inv); }
.panel.bone { background: var(--paper); }

/* The inner content stack, vertically centered by default */
.panel-body { margin: auto 0; width: 100%; }
.panel-body.top { margin: 0; }

/* ---- Numbered opener (signature pattern) ---- */
.opener {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--lede);
}
.panel.noir .opener { border-bottom-color: rgba(241,236,224,0.4); color: var(--lede); }
.opener .num { color: var(--lede); }
.opener .pg { margin-left: auto; color: var(--graphite); }
.panel.noir .opener .pg { color: rgba(241,236,224,0.6); }

/* ---- Foot rule ---- */
.foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.85vw, 13px);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--graphite);
}
.panel.noir .foot { border-top-color: rgba(241,236,224,0.4); color: rgba(241,236,224,0.6); }

/* ============================================================
   DISPLAY TYPE
   ============================================================ */
.display-xl, .display-lg, .display-md, .display-sm {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tr-tight);
  margin: 0;
  color: inherit;
}
.display-xl { font-size: clamp(56px, 9vw, 150px); line-height: 0.95; }
.display-lg { font-size: clamp(44px, 6.4vw, 104px); line-height: 1.0; }
.display-md { font-size: clamp(34px, 4.6vw, 72px); line-height: 1.04; }
.display-sm { font-size: clamp(28px, 3.2vw, 50px); line-height: 1.08; }
.display-xl em, .display-lg em, .display-md em, .display-sm em { font-style: normal; }
.accent { color: var(--lede); }

.lede-para {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.panel.noir .lede-para { color: rgba(241,236,224,0.8); }
.lede-para em { font-style: normal; }

.kicker {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--lede);
  display: inline-block;
}

/* ============================================================
   SITE NAV — fixed, color-adaptive
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(28px, 6vw, 128px);
  pointer-events: none;
  transition: color var(--dur-2) var(--ease-out);
  color: var(--ink);
  mix-blend-mode: normal;
}
.site-nav.on-dark { color: var(--paper-inv); }
.site-nav > * { pointer-events: auto; }
.nav-left { display: inline-flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); pointer-events: auto; }

.nav-word {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: var(--tr-tight);
}
.nav-word .period { color: var(--lede); }

/* Favicon-style home mark (replaces wordmark) */
.nav-mark {
  display: inline-flex; align-items: center;
  width: 34px; height: 34px;
  margin-right: clamp(20px, 3vw, 48px);
}
.nav-mark-l {
  font-family: var(--font-display);
  font-size: 30px; line-height: 1;
  letter-spacing: var(--tr-tight);
  color: currentColor;
}
.nav-mark-dot { color: var(--lede); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-links a { color: currentColor; opacity: 0.62; transition: opacity var(--dur-2) var(--ease-out); position: relative; white-space: nowrap; }
.nav-cta { white-space: nowrap; }
.nav-links a:hover { opacity: 1; }
.nav-links a.active { opacity: 1; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 1px; background: var(--lede);
}
.nav-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 9px 16px;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.nav-cta:hover { background: var(--lede); border-color: var(--lede); color: #fff; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---- Right-side panel dot rail ---- */
.dots {
  position: fixed;
  right: clamp(14px, 1.6vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dots button {
  appearance: none; border: none; background: none; cursor: pointer;
  width: 9px; height: 9px; padding: 0; display: block;
}
.dots button i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--graphite);
  transition: all var(--dur-2) var(--ease-out);
}
.site-on-dark .dots button i { border-color: rgba(241,236,224,0.55); }
.dots button.active i { background: var(--lede); border-color: var(--lede); transform: scale(1.25); }
@media (max-width: 860px) { .dots { display: none; } }

/* ---- Scroll cue ---- */
.scroll-cue {
  position: absolute;
  bottom: 30px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: var(--tr-meta); text-transform: uppercase;
  color: rgba(241,236,224,0.6);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue .bar { width: 1px; height: 30px; background: linear-gradient(rgba(241,236,224,0.6), transparent); animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { 0%,100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ============================================================
   HERO (panel 00)
   ============================================================ */
.hero { justify-content: center; align-items: flex-start; }
.hero-word {
  font-family: var(--font-display);
  font-size: clamp(72px, 30vw, 460px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--paper-inv);
}
.hero-word .period { color: var(--lede); }
.hero-tag {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(30px, 5vw, 76px);
  line-height: 1.05;
  letter-spacing: var(--tr-tight);
  color: var(--paper-inv);
  margin-top: clamp(16px, 2vh, 34px);
}
.hero-meta {
  position: absolute;
  left: clamp(28px, 6vw, 128px);
  right: clamp(28px, 6vw, 128px);
  bottom: clamp(48px, 6vh, 88px);
  display: flex; justify-content: flex-end; gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(241,236,224,0.35);
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: var(--tr-meta); text-transform: uppercase;
  color: rgba(241,236,224,0.7);
}

/* ============================================================
   TWO-COLUMN ARGUMENT (thesis etc.)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: end;
}
.split.top { align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 36px; } }

.stack-sm { display: flex; flex-direction: column; gap: 22px; }
.rule-list { display: flex; flex-direction: column; }
.rule-list .item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  align-items: baseline;
  padding: clamp(16px, 2vh, 26px) 0;
  border-bottom: 1px solid var(--hairline-2);
}
.panel.noir .rule-list .item { border-bottom-color: rgba(241,236,224,0.2); }
.rule-list .item:first-child { border-top: 1px solid var(--hairline-2); }
.panel.noir .rule-list .item:first-child { border-top-color: rgba(241,236,224,0.2); }
.rule-list .n { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; color: var(--lede); }
.rule-list .t { font-size: clamp(17px, 1.5vw, 23px); line-height: 1.4; color: var(--ink-2); }
.panel.noir .rule-list .t { color: rgba(241,236,224,0.82); }
.rule-list .t em { font-style: normal; }
.rule-list.alt .item { grid-template-columns: 1fr; }
.rule-list.alt .t { font-size: clamp(19px, 2vw, 31px); line-height: 1.3; color: var(--ink); }
.rule-list.alt .item:nth-child(odd) .t { color: var(--lede); }

/* ============================================================
   CONCEPT 1 — THREE PHONES (channels have changed)
   ============================================================ */
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 52px); align-items: start; margin-top: clamp(26px, 4vh, 46px); }
@media (max-width: 820px) { .phones { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; } }
.phone-col { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.phone-cap { font-family: var(--font-display); font-size: clamp(21px, 1.8vw, 29px); line-height: 1.14; letter-spacing: var(--tr-tight); color: var(--paper-inv); text-align: center; min-height: 2.3em; }
.phone {
  position: relative; width: 100%; max-width: 248px;
  aspect-ratio: 9 / 18.5; border-radius: 32px;
  background: #000; border: 1px solid rgba(241,236,224,0.22);
  padding: 11px; box-shadow: 0 26px 50px -26px rgba(0,0,0,0.85);
}
.phone::before { content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 58px; height: 5px; border-radius: 3px; background: rgba(241,236,224,0.22); z-index: 2; }
.phone-screen {
  width: 100%; height: 100%; border-radius: 22px; background: var(--noir-2);
  display: flex; flex-direction: column; gap: 10px; padding: 32px 15px 16px;
  overflow: hidden;
}
.phone-screen.center { justify-content: center; }
.scr-text { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: rgba(241,236,224,0.85); }
.post { border: 1px solid rgba(241,236,224,0.16); padding: 13px 14px; font-size: 14px; line-height: 1.35; color: rgba(241,236,224,0.55); }
.post.red { border-color: var(--lede); color: var(--paper-inv); background: rgba(124,43,255,0.12); box-shadow: 0 0 0 1px var(--lede); }
.slopstack { display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center; margin: auto 0; }
.slopline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: rgba(241,236,224,0.26); text-transform: uppercase; }
.humanline { font-family: var(--font-display); font-size: 19px; line-height: 1.15; color: var(--lede); padding: 10px 0; }

/* ============================================================
   CONCEPT 1b — FEED DEVICE (channels have changed)
   ============================================================ */
.feed-wrap {
  display: grid; grid-template-columns: 1.05fr 0.78fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
  margin-top: clamp(26px, 4vh, 46px);
}
@media (max-width: 920px) { .feed-wrap { grid-template-columns: 1fr; gap: 40px; } }

.feed {
  position: relative;
  background: var(--noir-2);
  border: 1px solid rgba(241,236,224,0.18);
  padding: 18px 16px 22px;
  max-width: 360px; width: 100%;
  justify-self: end;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 520px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
}
@media (max-width: 920px) { .feed { justify-self: center; } }

.feed-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-meta);
  text-transform: uppercase; color: rgba(241,236,224,0.45);
  padding-bottom: 10px; border-bottom: 1px solid rgba(241,236,224,0.14);
  margin-bottom: 4px;
}

.fcard {
  border: 1px solid rgba(241,236,224,0.14);
  background: rgba(241,236,224,0.02);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.fcard .tagrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-meta);
  text-transform: uppercase; color: rgba(241,236,224,0.42);
}
.fcard .swatch {
  width: 6px; height: 6px; background: rgba(241,236,224,0.35); display: inline-block;
}
.fcard .txt {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
  color: rgba(241,236,224,0.55);
}
.fcard.signal {
  border-color: var(--lede);
  background: rgba(124,43,255,0.10);
  box-shadow: inset 0 0 0 1px var(--lede);
}
.fcard.signal .tagrow { color: var(--lede); }
.fcard.signal .swatch { background: var(--lede); }
.fcard.signal .txt {
  font-family: var(--font-display); font-size: 17px; line-height: 1.2;
  color: var(--paper-inv);
}

/* ============================================================
   CONCEPT 3 — INFINITE SCROLL temptation quotes
   ============================================================ */
.quotes { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.qbubble {
  border: 1px solid var(--hairline-2);
  background: var(--paper);
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.18;
  color: var(--ink);
  position: relative;
}
.panel.bone .qbubble { background: var(--paper); }
.qbubble .src { display: block; font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--graphite); margin-top: 10px; }
.qbubble:nth-child(1) { transform: rotate(-0.6deg); }
.qbubble:nth-child(2) { transform: rotate(0.5deg) translateX(6%); }
.qbubble:nth-child(3) { transform: rotate(-0.3deg) translateX(2%); }

/* ============================================================
   CONCEPT 2 — VISIBILITY → AUTHORITY
   ============================================================ */
.axis {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center; gap: clamp(10px, 1.4vw, 22px);
  margin-top: clamp(28px, 4vh, 52px);
}
.axis-node { text-align: center; }
.axis-node .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-meta); text-transform: uppercase; color: rgba(241,236,224,0.55); display: block; margin-bottom: 14px; }
.axis-node .big { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 56px); line-height: 1; letter-spacing: var(--tr-tight); color: var(--paper-inv); }
.axis-node.is-end .big { color: var(--lede); }
.axis-node.mid .big { font-size: clamp(18px, 2vw, 30px); color: rgba(241,236,224,0.78); }
.axis-arrow { color: var(--lede); font-family: var(--font-mono); font-size: 22px; }
.axis-rule { height: 1px; background: linear-gradient(90deg, rgba(241,236,224,0.3), var(--lede)); }
@media (max-width: 820px) { .axis { grid-template-columns: 1fr; gap: 18px; } .axis-arrow { transform: rotate(90deg); justify-self: center; } }

.auth-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(241,236,224,0.2); border: 1px solid rgba(241,236,224,0.2); margin-top: clamp(28px, 4vh, 48px); }
.auth-block { background: var(--noir); padding: clamp(22px, 2.4vw, 36px); }
.auth-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-meta); text-transform: uppercase; color: rgba(241,236,224,0.5); padding-bottom: 16px; border-bottom: 1px solid rgba(241,236,224,0.2); }
.auth-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-list li { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 26px); line-height: 1.18; color: var(--paper-inv); padding-left: 26px; position: relative; }
.auth-list li::before { position: absolute; left: 0; top: 0.05em; font-family: var(--font-mono); font-size: 0.62em; }
.auth-list.pos li::before { content: "+"; color: var(--lede); }
.auth-list.neg li { color: rgba(241,236,224,0.6); font-size: clamp(15px, 1.3vw, 19px); }
.auth-list.neg li::before { content: "\2014"; color: rgba(241,236,224,0.4); }
@media (max-width: 820px) { .auth-cols { grid-template-columns: 1fr; } }

.axis-meta { display: flex; gap: 28px; margin-top: 26px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-meta); text-transform: uppercase; color: rgba(241,236,224,0.5); }
.axis-meta b { color: var(--lede); font-weight: 400; }

/* ============================================================
   BRAND LOGO GRID (18 years)
   ============================================================ */
.brand-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline);
  margin-top: clamp(28px, 4vh, 52px);
}
.brand-cell {
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.brand-cell .ph {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute);
}
.brand-cell img { max-width: 62%; max-height: 64%; object-fit: contain; }
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   LEADERS GRID
   ============================================================ */
.leaders {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  margin-top: clamp(26px, 4vh, 48px);
}
@media (max-width: 1040px) { .leaders { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 780px) { .leaders { grid-template-columns: repeat(2, 1fr); } }
.leader .frame {
  aspect-ratio: 3 / 4;
  background: var(--bone);
  border: 1px solid var(--hairline-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.leader .frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.leader .frame .ph {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute); text-align: center; padding: 8px; line-height: 1.5;
}
.leader .frame::after {
  content: ""; position: absolute; inset: 0; border: 0 solid var(--lede);
  transition: border-width var(--dur-2) var(--ease-out);
}
.leader:hover .frame::after { border-width: 2px; }
.leader .nm { font-family: var(--font-display); font-size: clamp(17px, 1.4vw, 22px); line-height: 1.1; margin-top: 12px; color: var(--ink); }
.leader .rl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin-top: 6px; line-height: 1.4; }

/* ============================================================
   FOUNDER
   ============================================================ */
.founder { display: grid; grid-template-columns: 0.72fr 1fr; gap: clamp(34px, 5vw, 90px); align-items: center; }
@media (max-width: 880px) { .founder { grid-template-columns: 1fr; } }
.founder-photo { position: relative; }
.founder-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(1) contrast(1.03); border: 1px solid var(--hairline-2); }
.founder-photo .cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--graphite); margin-top: 12px; display: flex; justify-content: space-between; }
.founder-photo .cap .accent { color: var(--lede); }
.founder-bio { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 42px); line-height: 1.2; letter-spacing: var(--tr-tight); color: var(--ink); margin: 0; }

/* ============================================================
   SERVICE CARDS (two ways to work)
   ============================================================ */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(26px, 4vh, 48px); }
@media (max-width: 880px) { .ways { grid-template-columns: 1fr; } }
.way {
  border: 1px solid var(--hairline-2);
  border-top: 3px solid var(--ink);
  background: var(--paper);
  padding: clamp(24px, 2.4vw, 40px);
  display: flex; flex-direction: column; gap: 16px;
}
.way.accent { border-top-color: var(--lede); }
.way .wn { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--graphite); }
.way .wh { font-family: var(--font-display); font-size: clamp(28px, 2.8vw, 44px); line-height: 1.04; letter-spacing: var(--tr-tight); color: var(--ink); }
.way .wb { font-size: clamp(14px, 1vw, 16px); line-height: 1.5; color: var(--ink-2); }
.way .wb ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.way .wb li { position: relative; padding-left: 20px; }
.way .wb li::before { content: "—"; position: absolute; left: 0; color: var(--lede); }
.way .who { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.way .who b { color: var(--ink); font-weight: 500; }

/* ============================================================
   FAQ / OBJECTIONS
   ============================================================ */
.faq { margin-top: clamp(26px, 4vh, 46px); border-top: 1px solid var(--ink); }
.faq .qa {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 4vw, 80px);
  padding: clamp(20px, 2.6vh, 34px) 0;
  border-bottom: 1px solid var(--hairline-2);
  align-items: start;
}
@media (max-width: 820px) { .faq .qa { grid-template-columns: 1fr; gap: 10px; } }
.faq .q { font-family: var(--font-display); font-size: clamp(22px, 2vw, 32px); line-height: 1.12; letter-spacing: var(--tr-tight); color: var(--ink); }
.faq .q .qn { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-meta); color: var(--lede); display: block; margin-bottom: 12px; }
.faq .a { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; color: var(--ink-2); }
.faq .a em { font-style: normal; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vh, 64px); }
.contact-cta {
  display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; justify-self: start;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--lede); color: #fff;
  padding: 18px 28px;
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.contact-cta:hover { background: var(--lede-deep); }
.contact-cta:active { transform: translateY(1px); }
.contact-cta .arr { transition: transform var(--dur-2) var(--ease-out); }
.contact-cta:hover .arr { transform: translateX(4px); }

.contact-details {
  display: grid; grid-template-columns: repeat(3, auto); gap: clamp(32px, 5vw, 80px);
  padding-top: 28px; border-top: 1px solid rgba(241,236,224,0.4);
  font-family: var(--font-mono); font-size: clamp(13px, 1vw, 16px); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-inv);
}
@media (max-width: 680px) { .contact-details { grid-template-columns: 1fr; gap: 22px; } }
.contact-details .k { color: rgba(241,236,224,0.5); display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: var(--tr-meta); }
.contact-details a:hover { color: var(--lede); }

/* ============================================================
   REVEAL ANIMATION (moderate motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--d, 0ms); }
  .panel.in .reveal { opacity: 1; transform: none; }
  .reveal-l { opacity: 0; transform: translateX(-16px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--d, 0ms); }
  .panel.in .reveal-l { opacity: 1; transform: none; }
}

/* Utility */
.mt-s { margin-top: clamp(20px, 3vh, 40px); }
.mt-m { margin-top: clamp(28px, 4vh, 56px); }
.mt-l { margin-top: clamp(40px, 6vh, 96px); }
.maxw { max-width: 24ch; }

/* ============================================================
   DECK-FAITHFUL OVERRIDES
   Replicate the original credentials deck — paper-default,
   minimal frames, mono section labels, violet signal accent.
   ============================================================ */
.panel.paper { background: var(--paper); color: var(--ink); }

/* Paper opener — section number violet, label black mono, ink rule */
.opener.paper {
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
}
.opener.paper .num { color: var(--lede); }
.opener.paper > span:nth-child(2) { color: var(--ink); }

/* Paper foot — single ink rule, right-aligned dateline */
.foot.paper {
  border-top: 1px solid var(--hairline-2);
  color: var(--graphite);
}

/* Display dot — violet emphasis at the end of a headline */
.dot { color: var(--lede); }

/* THESIS — big serif headline + understated subhead */
.deck-headline {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 156px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.deck-sub p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 8px;
  max-width: 60ch;
}

/* CHANNELS — three outlined phones on paper */
.phones-paper {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(28px, 4vh, 56px);
}
@media (max-width: 880px) { .phones-paper { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; } }
.phone-col-paper {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.phone-cap-paper {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.18;
  text-align: center;
  color: var(--lede);
  max-width: 30ch;
  min-height: 2.2em;
}
.outline-phone {
  position: relative;
  width: 100%; max-width: 220px;
  aspect-ratio: 9 / 19;
  border: 1.5px solid var(--lede);
  border-radius: 28px;
  padding: 36px 16px 22px;
  display: flex; flex-direction: column;
}
.outline-phone .speaker {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 12px; border: 1.5px solid var(--lede); border-radius: 6px;
}
.outline-screen {
  flex: 1;
  border: 1.5px solid var(--lede);
  padding: 12px 8px;
  display: flex; align-items: center; justify-content: center;
}
.outline-screen p {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
  color: var(--ink);
  margin: 0;
}
.outline-screen .hi { color: var(--lede); }

/* GRAVITY right side — big serif on noir with violet italic emphasis */
.gravity-body { color: var(--paper-inv); }
.gravity-body p {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 54px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}
.gravity-body p:last-child { margin-bottom: 0; }
.gravity-body .emph { color: var(--lede); font-style: italic; }
.gravity-body .dot { color: var(--lede); }

/* LEADER 2026 — alternating violet paragraphs on noir */
.deck-paras { display: flex; flex-direction: column; gap: clamp(18px, 2.4vh, 30px); max-width: 80ch; margin-left: auto; margin-right: auto; }
.deck-paras p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--paper-inv);
  margin: 0;
}
.deck-paras p.accent { color: var(--lede); }
.deck-paras p em { font-style: italic; color: inherit; }

/* VISIBILITY → AUTHORITY two-col with center hairline divider */
.va-grid {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(28px, 4vh, 56px);
  position: relative;
}
.va-grid::before {
  content: ""; grid-column: 2; align-self: stretch;
  background: var(--hairline-2);
}
@media (max-width: 880px) {
  .va-grid { grid-template-columns: 1fr; }
  .va-grid::before { display: none; }
}
.va-col { padding: 0 clamp(0px, 1.5vw, 24px); position: relative; }
.va-h {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 88px);
  line-height: 1;
  text-align: center;
  margin: 0 0 clamp(20px, 3vh, 40px);
  color: var(--ink);
  font-weight: 400;
  padding-bottom: clamp(20px, 3vh, 36px);
  border-bottom: 1px solid var(--hairline-2);
}
.va-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vh, 28px);
}
.va-list li {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 38ch;
}
.va-tag {
  margin-top: clamp(28px, 4vh, 48px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tr-meta);
  color: var(--lede);
}

/* FOUNDER + WAYS combined panel — paper, two-column */
.founder-intro {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 92ch;
  margin: 0;
}
.accent-name { color: var(--lede); }

#ways .ways {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(28px, 4vh, 48px);
  align-items: start;
  position: relative;
}
#ways .ways::before {
  content: ""; grid-column: 2; align-self: stretch;
  background: var(--hairline-2);
}
@media (max-width: 880px) {
  #ways .ways { grid-template-columns: 1fr; }
  #ways .ways::before { display: none; }
}
#ways .way {
  background: transparent; border: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vh, 28px);
}
.wh-deck {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  text-align: center;
  color: var(--lede);
  font-weight: 400;
  padding-bottom: clamp(16px, 2vh, 28px);
  border-bottom: 1px solid var(--hairline-2);
}
.wb-deck { display: flex; flex-direction: column; gap: 14px; max-width: 52ch; }
.wb-deck p { margin: 0; font-family: var(--font-sans); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; color: var(--ink); }
.wb-deck ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.wb-deck li { position: relative; padding-left: 16px; font-family: var(--font-sans); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; color: var(--ink); }
.wb-deck li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--ink); }
.who-deck {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-2);
  font-family: var(--font-sans); font-size: clamp(13px, 1vw, 16px);
  color: var(--ink);
}

/* OBJECTIONS / FAQ — deck table style */
.but-headline {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 120px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(20px, 3vh, 36px);
  color: var(--ink);
  font-weight: 400;
}
.but-headline .dot { color: var(--lede); }
.faq-deck {
  border-top: 1px solid var(--hairline-2);
  margin-top: clamp(16px, 2vh, 28px);
}
.faq-deck .qa {
  display: grid; grid-template-columns: 0.78fr 1.1fr;
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(22px, 3vh, 34px) clamp(0px, 1vw, 16px);
  border-bottom: 1px solid var(--hairline-2);
  align-items: start;
}
@media (max-width: 820px) { .faq-deck .qa { grid-template-columns: 1fr; gap: 8px; } }
.faq-deck .q {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 400;
  padding-left: clamp(12px, 2vw, 32px);
}
.faq-deck .a {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--ink);
}

/* CONTACT — deck noir style */
.contact-deck { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 18px); }
.contact-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--paper-inv);
  font-weight: 400;
}
.contact-cta-line {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--lede);
}
.contact-link {
  color: var(--lede);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.12em;
}
.contact-link:hover { color: var(--lede-deep); }
.contact-cta-line .dot { color: var(--lede); }
.contact-details-deck {
  margin-top: clamp(40px, 6vh, 80px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid rgba(241,236,224,0.3);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
@media (max-width: 720px) { .contact-details-deck { grid-template-columns: 1fr; } }
.contact-details-deck > div { display: flex; flex-direction: column; gap: 12px; }
.contact-details-deck .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-meta);
  text-transform: uppercase; color: rgba(241,236,224,0.55);
}
.contact-details-deck a, .contact-details-deck > div > :last-child {
  font-family: var(--font-mono); font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.04em; color: var(--paper-inv);
}
.contact-details-deck a:hover { color: var(--lede); }

/* Hide the now-obsolete bone-bubble background on noir gravity */
.panel.noir#gravity { background: var(--noir); color: var(--paper-inv); }
.panel.noir#gravity .qbubble {
  background: rgba(241,236,224,0.04);
  border-color: rgba(241,236,224,0.35);
  color: var(--paper-inv);
}

/* Leader portrait placeholders on paper */
.panel.paper#leaders .leader .frame { background: var(--bone); }

/* ============================================================
   ROUND 2 — USER EDITS (hero body, ink phones, venn, tickers …)
   ============================================================ */

/* Hero body paragraph below tagline */
.hero-body {
  margin: clamp(18px, 2.4vh, 32px) 0 0;
  max-width: 62ch;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: rgba(241,236,224,0.78);
}

/* CHANNELS revisions — ink caps, dark-grey phone outlines, aligned heights */
.panel.paper#channels .phones-paper {
  align-items: stretch;
}
.panel.paper#channels .phone-col-paper {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 2.4vh, 36px);
  height: 100%;
}
.panel.paper#channels .phone-cap-paper {
  color: var(--ink);
  min-height: 0;
  height: clamp(56px, 7vh, 88px);
  display: flex; align-items: flex-end; justify-content: center;
  text-align: center;
}
.panel.paper#channels .outline-phone {
  border-color: var(--graphite);
  height: clamp(360px, 52vh, 520px);
  aspect-ratio: auto;
  max-width: 220px; width: 100%;
}
.panel.paper#channels .outline-phone .speaker { border-color: var(--graphite); }
.panel.paper#channels .outline-screen { border-color: var(--graphite); }
.panel.paper#channels .outline-screen p { color: var(--ink); }
.panel.paper#channels .outline-screen .hi { color: var(--lede); }

/* COMPRESSED GRAVITY + LEADER 2026 */
.compressed-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 880px) { .compressed-grid { grid-template-columns: 1fr; gap: 28px; } }

.quotes-mono {
  display: flex; flex-direction: column; gap: 14px;
}
.quotes-mono > div {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.06em;
  color: var(--lede);
  text-transform: uppercase;
  line-height: 1.5;
}

.panel.noir#gravity .gravity-body p {
  color: var(--paper-inv);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.18;
  margin: 0 0 14px;
}
.panel.noir#gravity .gravity-body p:last-child { margin-bottom: 0; }
.panel.noir#gravity .gravity-body .emph { color: var(--lede); font-style: italic; }
.panel.noir#gravity .gravity-body .dot { color: var(--lede); }

/* Tighter, smaller paragraphs in the compressed leader-2026 block */
.deck-paras.compressed { gap: clamp(10px, 1.4vh, 16px); max-width: 110ch; margin-top: clamp(28px, 4vh, 56px); }
.deck-paras.compressed p { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.45; }

/* THE LEDE APPROACH — venn diagram on the right */
.venn-wrap { margin-top: clamp(20px, 3vh, 36px); }
.venn { width: 100%; height: auto; display: block; }

/* OUR CREDENTIALS — dual ticker */
.cred-stack { display: flex; flex-direction: column; gap: clamp(28px, 4vh, 56px); }
.ticker-block { display: flex; flex-direction: column; gap: clamp(12px, 1.6vh, 22px); }
.ticker-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--graphite);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-2);
}
.ticker-row {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-rtl 50s linear infinite;
}
.ticker-track.reverse {
  animation: ticker-ltr 60s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-set {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(48px, 6vw, 96px);
  padding-right: clamp(48px, 6vw, 96px);
}
.ticker-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: clamp(48px, 6.5vh, 72px);
  flex: 0 0 auto;
}
.ticker-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
  max-height: 100%;
}
/* per-logo size tweaks so the LETTER cap-height is similar across brands */
.ticker-logo img[alt="Google Pay"]      { height: 86%; }
.ticker-logo img[alt="Tata"]            { height: 78%; }
.ticker-logo img[alt="Google Gemini"]   { height: 68%; }
.ticker-logo img[alt="Star"]            { height: 82%; }
.ticker-logo img[alt="Google"]          { height: 64%; }
.ticker-logo img[alt="JioHotstar"]      { height: 70%; }
.ticker-logo img[alt="Johnnie Walker"]  { height: 110%; transform: translateY(2px); }
.ticker-logo img[alt="YouTube"]         { height: 60%; }
.ticker-logo img[alt="Virgin Mobile"]   { height: 92%; }
.ticker-logo img[alt="U2opia Mobile"]   { height: 58%; }

.ticker-leader {
  display: inline-flex; flex-direction: column; gap: 4px;
  flex: 0 0 auto;
  padding-right: clamp(20px, 2vw, 36px);
  border-right: 1px solid var(--hairline-2);
}
.ticker-leader .lnm {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.1;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.ticker-leader .lrl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--graphite);
}

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

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* SERVICES — extra breathing space between opener and the two-col content */
.services-spaced { margin-top: clamp(60px, 9vh, 140px) !important; }

/* FAQ — vertical hairline between Q and A columns + ink ellipsis */
.but-headline .dot.ink { color: var(--ink); }
.faq-deck.ruled .qa {
  position: relative;
}
.faq-deck.ruled .qa::before {
  content: ""; position: absolute;
  top: clamp(22px, 3vh, 34px);
  bottom: clamp(22px, 3vh, 34px);
  left: calc(0.78fr / (0.78fr + 1.1fr) * 100%); /* fallback below */
  width: 1px; background: var(--hairline-2);
}
/* Reliable column-rule: use grid line via background gradient on row instead */
.faq-deck.ruled .qa {
  background-image: linear-gradient(to right, transparent calc(41.5% - 0.5px), var(--hairline-2) calc(41.5% - 0.5px), var(--hairline-2) calc(41.5% + 0.5px), transparent calc(41.5% + 0.5px));
  background-repeat: no-repeat;
  background-size: 100% calc(100% - clamp(28px, 4vh, 52px));
  background-position: 0 50%;
}
.faq-deck.ruled .qa::before { display: none; }
@media (max-width: 820px) {
  .faq-deck.ruled .qa { background-image: none; }
}

/* CONTACT — white 'Book a clarity call' phrase, violet 'here', violet dot */
.panel.noir#contact .contact-cta-line { color: var(--paper-inv); }
.panel.noir#contact .contact-cta-line .cta-white { color: var(--paper-inv); }
.panel.noir#contact .contact-cta-line .contact-link { color: var(--lede); }
.panel.noir#contact .contact-cta-line .dot { color: var(--lede); }

/* ============================================================
   ROUND 3 — HAMBURGER NAV + REFINEMENTS
   ============================================================ */

/* Always-visible hamburger button */
.nav-toggle {
  display: inline-flex !important;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid currentColor; background: none; color: currentColor; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 0;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1);
}
.site-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Drawer */
.nav-drawer {
  position: fixed;
  top: 0; left: 0;
  height: 100svh;
  width: clamp(300px, 32vw, 420px);
  background: var(--noir);
  color: var(--paper-inv);
  z-index: 60;
  transform: translateX(-100%);
  transition: transform var(--dur-3) var(--ease-out);
  pointer-events: none;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(241,236,224,0.15);
}
.nav-drawer-inner {
  padding: 110px clamp(28px, 4vw, 56px) 48px;
  display: flex; flex-direction: column;
  gap: clamp(24px, 4vh, 56px);
  height: 100%;
  overflow-y: auto;
}
.nav-drawer-head { display: flex; align-items: center; }
.nav-drawer-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: rgba(241,236,224,0.55);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(241,236,224,0.15);
  width: 100%;
}
.nav-drawer .nav-links {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vh, 22px);
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  line-height: 1.3;
}
.nav-drawer .nav-links a {
  color: var(--paper-inv);
  opacity: 0.85;
  transition: opacity var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  white-space: nowrap;
}
.nav-drawer .nav-links a:hover { opacity: 1; color: var(--lede); }
.nav-drawer .nav-links a.active { color: var(--lede); opacity: 1; }
.nav-drawer .nav-links a.active::after { display: none; }

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,19,18,0.6);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out);
}

.site-nav.nav-open ~ .nav-drawer {
  transform: translateX(0);
  pointer-events: auto;
}
.site-nav.nav-open ~ .nav-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Old responsive nav-links hide rule no longer relevant — drawer handles all sizes */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex !important; }
}

/* ============================================================
   HERO refinements
   ============================================================ */
.hero-tag-dot { color: var(--lede); }

/* ============================================================
   THESIS — larger subtitle text
   ============================================================ */
.deck-sub p {
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.55;
  margin: 0 0 10px;
}

/* ============================================================
   CHANNELS — align caps to TOP and larger phone copy
   ============================================================ */
.panel.paper#channels .phones-paper { align-items: start; }
.panel.paper#channels .phone-cap-paper {
  align-items: flex-start;
  text-align: center;
}
.panel.paper#channels .outline-screen p {
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.6;
}

/* ============================================================
   PAGE 4 — quotes as white bullets + section separator
                + restored leader-2026 eyebrow + white sans bullets
   ============================================================ */
.panel.noir#gravity .quotes-mono {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.panel.noir#gravity .quotes-mono li {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.1vw, 17px);
  letter-spacing: 0.04em;
  color: var(--paper-inv);
  line-height: 1.5;
  position: relative;
  padding-left: 18px;
}
.panel.noir#gravity .quotes-mono li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: var(--paper-inv);
}

/* Section separator hairline */
.section-sep {
  height: 1px;
  background: rgba(241,236,224,0.25);
  margin: clamp(28px, 4vh, 52px) 0 clamp(20px, 3vh, 36px);
}

/* Inner opener — smaller, no top padding, mono */
.inner-opener {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(241,236,224,0.25);
  color: var(--paper-inv);
}
.inner-opener .num { color: var(--lede); }

/* Leader-2026 bullets — white Geist sans */
.leader-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
}
.leader-bullets li {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.5;
  color: var(--paper-inv);
  padding-left: 22px;
  position: relative;
}
.leader-bullets li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: var(--paper-inv);
}

/* Replace the older deck-paras.compressed styles so they don't apply here */

/* ============================================================
   LEDE APPROACH — wider columns + venn label spacing
   ============================================================ */
.va-grid { grid-template-columns: 1fr 1px 1.2fr; }
@media (max-width: 880px) { .va-grid { grid-template-columns: 1fr; } }
.va-col:first-child { padding-right: clamp(0px, 2vw, 32px); }
.va-col:last-child  { padding-left:  clamp(0px, 2vw, 32px); }
.venn { max-width: 100%; height: auto; }
.venn-wrap { padding-top: clamp(8px, 1.2vh, 18px); }

/* ============================================================
   CREDENTIALS — violet eyebrow + bigger logos + bigger names
   ============================================================ */
.panel.paper#credentials .ticker-eyebrow { color: var(--lede); }
.panel.paper#credentials .cred-stack { gap: clamp(28px, 4vh, 56px); height: 100%; }
.panel.paper#credentials .ticker-block { flex: 1 1 0; min-height: 0; }
.panel.paper#credentials .ticker-row { flex: 1 1 auto; display: flex; align-items: center; }
.panel.paper#credentials .ticker-logo { height: clamp(72px, 11vh, 120px); }
.panel.paper#credentials .ticker-leader .lnm {
  font-size: clamp(28px, 3.2vw, 48px);
}
.panel.paper#credentials .ticker-leader .lrl {
  font-size: clamp(11px, 1vw, 13px);
}
.panel.paper#credentials .ticker-leader { padding-right: clamp(28px, 3vw, 56px); }

/* ============================================================
   SERVICES — push columns to L/R edges
   ============================================================ */
#ways .ways {
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(40px, 6vw, 100px);
}
@media (max-width: 880px) {
  #ways .ways { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   FAQS — more breathing room and a SOLID continuous column rule
   ============================================================ */
.but-headline { margin-top: clamp(40px, 6vh, 96px) !important; }
.faq-deck.ruled {
  position: relative;
  background-image: none;
}
.faq-deck.ruled .qa {
  background-image: none !important;
}
.faq-deck.ruled::after {
  content: "";
  position: absolute;
  left: 41.5%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline-2);
  pointer-events: none;
}
@media (max-width: 820px) {
  .faq-deck.ruled::after { display: none; }
}

/* ============================================================
   CONTACT — grey labels + white mono values
   ============================================================ */
.panel.noir#contact .contact-details-deck .k {
  color: var(--graphite);
}
.panel.noir#contact .contact-details-deck .v {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.04em;
  color: var(--paper-inv);
}
.panel.noir#contact .contact-details-deck .v:hover { color: var(--lede); }

/* ============================================================
   ROUND 4 — opener violet, grid fixes, ticker heights, larger copy
   ============================================================ */

/* All page headers (openers) — 2x bigger, graphite (deep grey), solid ink rule */
.opener,
.opener.paper,
.inner-opener,
.opener.paper > span,
.opener > span {
  color: var(--graphite);
}
.panel.noir .opener,
.panel.noir .opener > span,
.panel.noir .inner-opener,
.panel.noir .inner-opener > span {
  color: rgba(241,236,224,0.78);
}
/* 2x size bump */
.opener {
  font-size: clamp(22px, 2vw, 30px) !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--ink-2) !important;
}
.panel.noir .opener {
  border-bottom: 1px solid rgba(241,236,224,0.55) !important;
}
.inner-opener {
  font-size: clamp(22px, 2vw, 30px) !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--ink-2) !important;
}
.panel.noir .inner-opener {
  border-bottom: 1px solid rgba(241,236,224,0.55) !important;
}

/* CHANNELS — phone content +20% (was clamp 13/16) */
.panel.paper#channels .outline-screen p {
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.6;
}

/* GRAVITY — drop the separator line, more breathing room, larger Geist */
.section-sep { display: none !important; }
.inner-opener.mt-l { margin-top: clamp(56px, 8vh, 120px); }
.panel.noir#gravity .leader-bullets {
  margin-top: clamp(28px, 4vh, 48px);
  gap: clamp(14px, 2vh, 22px);
}
.panel.noir#gravity .leader-bullets li {
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
}

/* LEDE APPROACH — proper 2-col, no broken 3-col grid */
.va-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 0;
  margin-top: clamp(28px, 4vh, 56px);
  align-items: start;
}
.va-grid::before { display: none; }
.va-col:first-child {
  padding-right: clamp(28px, 3.5vw, 64px);
  border-right: 1px solid var(--hairline-2);
}
.va-col:last-child {
  padding-left: clamp(28px, 3.5vw, 64px);
  border-right: 0;
}
@media (max-width: 880px) {
  .va-grid { grid-template-columns: 1fr; }
  .va-col:first-child { padding-right: 0; border-right: 0; padding-bottom: 32px; border-bottom: 1px solid var(--hairline-2); margin-bottom: 32px; }
  .va-col:last-child { padding-left: 0; }
}

/* CREDENTIALS — give the cred-stack actual height so the tickers show */
.panel.paper#credentials { display: flex; }
.panel.paper#credentials .panel-body {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  height: auto;
}
.panel.paper#credentials .cred-stack {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-height: 60vh;
}
.panel.paper#credentials .ticker-block {
  flex: 1 1 0;
  min-height: clamp(180px, 28vh, 320px);
  display: flex; flex-direction: column;
}
.panel.paper#credentials .ticker-row {
  flex: 1 1 auto;
  min-height: clamp(140px, 22vh, 260px);
  display: flex; align-items: center;
}

/* SERVICES — proper 2-col, no broken 3-col grid */
#ways .ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: clamp(40px, 6vh, 96px);
  align-items: start;
}
#ways .ways::before { display: none; }
#ways .way:first-child {
  padding-right: clamp(28px, 4vw, 80px);
  border-right: 1px solid var(--ink-2);
}
#ways .way:last-child {
  padding-left: clamp(28px, 4vw, 80px);
  border-right: 0;
}
@media (max-width: 880px) {
  #ways .ways { grid-template-columns: 1fr; }
  #ways .way:first-child { padding-right: 0; border-right: 0; padding-bottom: 28px; border-bottom: 1px solid var(--ink-2); margin-bottom: 28px; }
  #ways .way:last-child { padding-left: 0; }
}

/* ============================================================
   ROUND 5 — favicon size, hairline darkening, ticker speed/size,
              equal-height stretch on grids, moved gravity paper variant
   ============================================================ */

/* Favicon "L." matches hamburger button height */
.nav-mark {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-mark-l {
  font-family: var(--font-display);
  font-size: 38px; line-height: 1;
  letter-spacing: -0.02em;
}

/* Darker / fully-solid hairlines under section titles & between cards */
.wh-deck {
  border-bottom: 1px solid var(--ink-2) !important;
}
.who-deck {
  border-top: 1px solid var(--ink-2) !important;
}
.ticker-eyebrow {
  border-bottom: 1px solid var(--ink-2) !important;
  /* 2x size bump */
  font-size: clamp(18px, 1.6vw, 24px) !important;
  letter-spacing: 0.1em;
}

/* LEDE APPROACH — equal-height columns so vertical line runs full height */
.va-grid { align-items: stretch; }
.va-col:first-child { border-right: 1px solid var(--ink-2); }

/* SERVICES — equal-height cards so 'Who it's for' lines align */
#ways .ways { align-items: stretch; }
#ways .way { height: 100%; }

/* CREDENTIALS — faster scroll, much larger leader names, 2-line role */
.ticker-track { animation-duration: 35s !important; }
.ticker-track.reverse { animation-duration: 38s !important; }

.panel.paper#credentials .ticker-leader .lnm {
  font-size: clamp(56px, 7vw, 110px) !important;
  line-height: 1.0;
}
.panel.paper#credentials .ticker-leader .lrl {
  font-size: clamp(13px, 1.1vw, 16px) !important;
  line-height: 1.35;
  max-width: 22ch;
  white-space: normal;
}
.panel.paper#credentials .ticker-leader {
  gap: 8px;
  padding-right: clamp(40px, 4vw, 80px);
}
/* Make leader ticker row take enough vertical space for the bigger type */
.panel.paper#credentials .ticker-block:last-child { min-height: clamp(240px, 36vh, 420px); }

/* MOVED GRAVITY (now on channels/paper) — paper-surface variants */
.panel.paper#channels .quotes-mono.paper {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.panel.paper#channels .quotes-mono.paper li {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.5;
  position: relative;
  padding-left: 18px;
}
.panel.paper#channels .quotes-mono.paper li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: var(--ink);
}
.panel.paper#channels .gravity-body.paper p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.18;
  margin: 0 0 14px;
}
.panel.paper#channels .gravity-body.paper p:last-child { margin-bottom: 0; }
.panel.paper#channels .gravity-body.paper .emph { color: var(--lede); font-style: italic; }
.panel.paper#channels .gravity-body.paper .dot { color: var(--lede); }
.panel.paper#channels .compressed-grid { gap: clamp(28px, 4vw, 64px); }

/* Tighten channels: a bit smaller phones so the page can fit infinite scroll too */
.panel.paper#channels .outline-phone {
  height: clamp(280px, 38vh, 380px);
}

/* Allow channels to grow taller than 100svh now that it has two sections */
.panel.paper#channels { min-height: auto; padding-top: clamp(80px, 8vh, 120px); padding-bottom: clamp(64px, 8vh, 100px); scroll-snap-stop: normal; }

/* ============================================================
   ROUND 6 — bigger Geist body, 2-line opener, role-on-2-lines,
              faster + larger normalised logos, solid services rules
   ============================================================ */

/* GRAVITY — leader-bullets 2x */
.panel.noir#gravity .leader-bullets li {
  font-size: clamp(28px, 2.4vw, 38px) !important;
  line-height: 1.4;
}

/* LEDE APPROACH — Visibility list 2x */
.va-list li {
  font-size: clamp(22px, 1.9vw, 30px) !important;
  line-height: 1.4;
  max-width: 26ch;
}

/* Two-line opener — needs more vertical breathing */
.opener.two-line {
  align-items: flex-start;
  padding-bottom: 22px !important;
}
.opener.two-line > span {
  line-height: 1.18;
}

/* CREDENTIALS — faster logo ticker, normalised oversized logos */
.ticker-track { animation-duration: 18s !important; }
.ticker-track.reverse { animation-duration: 26s !important; }

/* Larger container + uniform full-height logos */
.panel.paper#credentials .ticker-logo {
  height: clamp(110px, 16vh, 180px);
}
.panel.paper#credentials .ticker-logo img {
  height: 100% !important;
  width: auto;
  max-height: 100%;
  object-fit: contain;
}
/* Override only the differently-shaped logos that look off at full height */
.panel.paper#credentials .ticker-logo img[alt="Johnnie Walker"] {
  height: 130% !important;
  transform: translateY(2%);
}
.panel.paper#credentials .ticker-logo img[alt="Virgin Mobile"] {
  height: 110% !important;
}

/* Leader role on 2 separate lines (title / company), consistent everywhere */
.ticker-leader .lrl {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: none !important;
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
.ticker-leader .lrl .role,
.ticker-leader .lrl .company {
  display: block;
  white-space: nowrap;
}
.ticker-leader .lrl .role { color: var(--graphite); }
.ticker-leader .lrl .company { color: var(--ink); font-weight: 500; }

/* ============================================================
   ROUND 7 — bg-gradient hairlines (truly solid), bio + hero
   ============================================================ */

/* All "broken-looking" 1px borders → replaced with bg-gradient lines.
   Linear-gradient backgrounds paint as crisp solid pixels and bypass
   the sub-pixel border anti-aliasing that was reading as dashed. */

/* OPENERS — paper + noir */
.opener,
.opener.paper,
.inner-opener {
  border-bottom: none !important;
  background-image: linear-gradient(to right, var(--ink), var(--ink)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 1px !important;
}
.panel.noir .opener,
.panel.noir .inner-opener {
  background-image: linear-gradient(to right, rgba(241,236,224,0.6), rgba(241,236,224,0.6)) !important;
}

/* SERVICES — 1px (matching weight), guaranteed solid via bg-gradient */
.wh-deck {
  border-bottom: none !important;
  background-image: linear-gradient(to right, var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}
.who-deck {
  border-top: none !important;
  background-image: linear-gradient(to right, var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 1px;
}
/* Vertical column rule on services — also keep at 1px to match */
#ways .way:first-child {
  border-right: 1px solid var(--ink) !important;
}

/* CREDENTIALS eyebrow — same treatment (it's a horizontal rule too) */
.ticker-eyebrow {
  border-bottom: none !important;
  background-image: linear-gradient(to right, var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

/* HERO short body (now the two-line thesis text) */
.hero-body p {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.4;
  color: var(--paper-inv);
}
.hero-body p:last-child { margin-bottom: 0; }
/* Override .hero-body sans paragraph rule from earlier (it was the long block) */
.hero-body { font-family: var(--font-display); font-size: inherit; line-height: inherit; }

/* ============================================================
   ROUND 8 — Gauri photo, pseudo-element rules, 2x services
   ============================================================ */

/* WHO WE ARE photo + 2-col layout */
.thesis-grid {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 880px) {
  .thesis-grid { grid-template-columns: 1fr; gap: 32px; }
  .thesis-photo { max-width: 380px; }
}
.thesis-photo {
  position: relative;
}
.thesis-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 28%;
  filter: grayscale(1) contrast(1.04) brightness(0.97);
  display: block;
}
.thesis-photo-cap {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--graphite);
}

/* LEDE APPROACH — pseudo-element rule under Visibility / Authority h3 */
.va-h {
  border-bottom: none !important;
  background-image: none !important;
  position: relative;
}
.va-h::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
}

/* CREDENTIALS — drop the hairline under the eyebrow */
.ticker-eyebrow {
  border-bottom: none !important;
  background-image: none !important;
  padding-bottom: 0 !important;
}

/* SERVICES — pseudo-element rules everywhere (most paint-reliable) */
.wh-deck {
  border-bottom: none !important;
  background-image: none !important;
  position: relative;
}
.wh-deck::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
}
.who-deck {
  border-top: none !important;
  background-image: none !important;
  position: relative;
}
.who-deck::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--ink);
}

/* SERVICES — content blocks (25% smaller than the Round-8 2x version) */
.wb-deck p,
.wb-deck li {
  font-size: clamp(21px, 1.65vw, 27px) !important;
  line-height: 1.45 !important;
}
.wb-deck { max-width: none; gap: 18px; }
.who-deck {
  font-size: clamp(15px, 1.1vw, 20px) !important;
  padding-top: 16px;
}
/* Re-tune card spacing */
#ways .way { gap: clamp(20px, 2.6vh, 32px); }

/* ============================================================
   ROUND 9 — real .rule DOM hairline, prominent companies,
              equalised ticker speeds, FAQ 1.5x
   ============================================================ */

/* Real DOM hairline element — block, 1px, ink background.
   Most paint-reliable horizontal rule possible. Replaces every
   pseudo-element / border attempt that the user kept seeing as broken. */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--ink);
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  flex: 0 0 auto;
}
/* Push the rule above 'Who it's for' against the bottom of the .wb-deck */
.rule.rule-bottom {
  margin-top: auto;
}

/* Kill the now-redundant pseudo-element rules from earlier rounds */
.va-h::after,
.wh-deck::after,
.who-deck::before { display: none !important; }

/* Make the .way cards flex columns that grow so the rule-bottom + who-deck land at the same Y */
#ways .way {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: clamp(16px, 2vh, 28px);
}
#ways .way .wb-deck { flex: 0 0 auto; }
#ways .way .who-deck { flex: 0 0 auto; }

/* LEDE APPROACH — match the va-col rhythm */
.va-col {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vh, 32px);
}

/* CREDENTIALS — make companies more prominent than roles */
.ticker-leader .lrl {
  gap: 4px !important;
}
.ticker-leader .lrl .role {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1vw, 14px) !important;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--graphite);
  order: 1;
}
.ticker-leader .lrl .company {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 30px) !important;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.1;
  order: 2;
  margin-top: 4px;
}
.ticker-leader .lrl {
  display: flex !important;
  flex-direction: column;
}

/* Equalised ticker speeds — recomputed for similar px/s
   (logos content ≈ 1238px, leaders content ≈ 3633px)
   target ≈ 100px/s for both */
.ticker-track { animation-duration: 13s !important; }
.ticker-track.reverse { animation-duration: 36s !important; }

/* ============================================================
   FAQs — Geist content 1.5x
   ============================================================ */
.faq-deck .q { font-size: clamp(22px, 1.8vw, 28px) !important; line-height: 1.4 !important; }
.faq-deck .a { font-size: clamp(21px, 1.65vw, 25px) !important; line-height: 1.55 !important; }

/* ============================================================
   ROUND 10 — Geist hero, photo frame, channel caps + phone fix,
              venn 1.5x labels, services 5-row grid
   ============================================================ */

/* HOME hero-body in Geist, slightly smaller than 'What comes first.' but still prominent */
.hero-body {
  font-family: var(--font-sans) !important;
}
.hero-body p {
  font-family: var(--font-sans) !important;
  font-size: clamp(18px, 1.4vw, 24px) !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

/* THESIS — thin grey frame around the founder portrait */
.thesis-photo img {
  border: 1px solid var(--mute);
  padding: 0;
}

/* CHANNELS — phone captions match the gravity-body 'There is a deep temptation' size */
.panel.paper#channels .phone-cap-paper {
  font-size: clamp(22px, 2.2vw, 36px) !important;
  line-height: 1.18 !important;
  font-family: var(--font-display) !important;
  height: auto !important;
  min-height: clamp(100px, 12vh, 150px);
}

/* CHANNELS — keep phone 3 from distorting its shape when content overflows */
.panel.paper#channels .outline-screen {
  overflow: hidden;
  min-height: 0;
}
/* All channels phones equal height + uniform shape */
.panel.paper#channels .outline-phone {
  height: clamp(320px, 44vh, 440px) !important;
  flex-shrink: 0;
}
/* Constrain inner phone copy so it fits and the device shape stays clean */
.panel.paper#channels .outline-screen p {
  font-size: clamp(13px, 1.1vw, 16px) !important;
  line-height: 1.5 !important;
}

/* LEDE APPROACH — breathing room between the two opener lines */
.opener.two-line {
  align-items: flex-start;
  padding-bottom: 22px !important;
}
.opener.two-line > span {
  line-height: 1.6 !important;
  display: inline-block;
}

/* Venn labels 1.5x (24 → 36) — re-tuned in SVG inline style */
.venn .v-label,
.venn text.v-label {
  font-size: 36px !important;
}

/* SERVICES — explicit 5-row grid: title / rule / content / rule-bottom / who.
   With both .way cards in the parent grid's align-items:stretch, every row
   aligns across columns and the rules sit at the same Y. */
#ways .way {
  display: grid !important;
  grid-template-rows: auto auto 1fr auto auto;
  height: 100%;
  gap: clamp(14px, 2vh, 22px);
}
/* Don't let the auto-margin earlier round push things */
.rule.rule-bottom { margin-top: 0 !important; }
/* Re-anchor explicit row placement for safety */
#ways .way > .wh-deck { grid-row: 1; }
#ways .way > .rule:not(.rule-bottom) { grid-row: 2; }
#ways .way > .wb-deck { grid-row: 3; min-height: 0; }
#ways .way > .rule-bottom { grid-row: 4; }
#ways .way > .who-deck { grid-row: 5; }

/* Make the rule div paint reliably as a real 1px ink stripe regardless of context */
.rule {
  flex-shrink: 0 !important;
  min-height: 1px !important;
}

/* ============================================================
   ROUND 11 — services ink headlines + who-deck size,
              venn label-size override removed (using SVG inline)
   ============================================================ */

/* SERVICES — Leadership Branding / Fractional CCO in ink, not violet */
#ways .wh-deck { color: var(--ink) !important; }

/* SERVICES — 'Who it's for' text size matches the content block above */
#ways .who-deck {
  font-size: clamp(21px, 1.65vw, 27px) !important;
  line-height: 1.45 !important;
}

/* Remove the earlier round-10 venn label override so the SVG inline size wins */
.venn .v-label,
.venn text.v-label { font-size: 28px !important; }

/* ============================================================
   ROUND 12 — services who-deck row equalised, logos uniform
   ============================================================ */

/* SERVICES — row 5 has a min-track size so wb-deck rows match across cards
   regardless of how 'Who it's for' wraps; row 3 absorbs the extra space.
   .who-deck and .rule-bottom are pinned to the TOP of their grid cells. */
#ways .way {
  grid-template-rows: auto auto 1fr auto minmax(100px, auto) !important;
}
#ways .who-deck {
  margin-top: 0 !important;
  align-self: start !important;
}
#ways .rule.rule-bottom {
  margin-top: 0 !important;
  align-self: start !important;
}

/* CREDENTIALS — logo container matches leader name-card height.
   Leader names render at clamp(56→110px) + role lines ≈ leader card ≈ 150-200px. */
.panel.paper#credentials .ticker-logo {
  height: clamp(150px, 18vh, 200px) !important;
}
/* Drop per-brand height tweaks — let every logo fill the container uniformly */
.panel.paper#credentials .ticker-logo img,
.panel.paper#credentials .ticker-logo img[alt="Google Pay"],
.panel.paper#credentials .ticker-logo img[alt="Tata"],
.panel.paper#credentials .ticker-logo img[alt="Google Gemini"],
.panel.paper#credentials .ticker-logo img[alt="Star"],
.panel.paper#credentials .ticker-logo img[alt="Google"],
.panel.paper#credentials .ticker-logo img[alt="JioHotstar"],
.panel.paper#credentials .ticker-logo img[alt="YouTube"],
.panel.paper#credentials .ticker-logo img[alt="Virgin Mobile"],
.panel.paper#credentials .ticker-logo img[alt="U2opia Mobile"] {
  height: 100% !important;
  width: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}
/* Keep the tall-format Johnnie Walker proportionate to the cluster */
.panel.paper#credentials .ticker-logo img[alt="Johnnie Walker"] {
  height: 130% !important;
  transform: translateY(2%) !important;
}

/* ============================================================
   ROUND 13 — proportional logos, renamed sections, hero copyright
   ============================================================ */

/* CREDENTIALS — fixed-pixel sizing so logos don't resize mid-scroll.
   Each logo has an absolute pixel target height; the row is tall enough
   to fit the tallest (YouTube at 450px). All logos centred vertically. */
.panel.paper#credentials .ticker-row {
  align-items: center !important;
}
.panel.paper#credentials .ticker-set {
  align-items: center !important;
  gap: 140px !important;
  padding-right: 140px !important;
}
.panel.paper#credentials .ticker-logo {
  height: 480px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.panel.paper#credentials .ticker-logo img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}

/* Per-brand absolute pixel heights — applies user multipliers to previous sizes */
.panel.paper#credentials .ticker-logo img[alt="Google Pay"]      { max-height: 144px !important; transform: none !important; }
.panel.paper#credentials .ticker-logo img[alt="Tata"]            { max-height: 144px !important; transform: none !important; }
.panel.paper#credentials .ticker-logo img[alt="Google Gemini"]   { max-height: 76px  !important; transform: none !important; }
.panel.paper#credentials .ticker-logo img[alt="Star"]            { max-height: 200px !important; transform: none !important; }
.panel.paper#credentials .ticker-logo img[alt="Google"]          { max-height: 384px !important; transform: none !important; }
.panel.paper#credentials .ticker-logo img[alt="JioHotstar"]      { max-height: 330px !important; transform: none !important; }
.panel.paper#credentials .ticker-logo img[alt="Johnnie Walker"]  { max-height: 220px !important; transform: none !important; }
.panel.paper#credentials .ticker-logo img[alt="YouTube"]         { max-height: 450px !important; transform: none !important; }
.panel.paper#credentials .ticker-logo img[alt="Virgin Mobile"]   { max-height: 150px !important; transform: none !important; }
.panel.paper#credentials .ticker-logo img[alt="U2opia Mobile"]   { max-height: 80px  !important; transform: none !important; }

/* Re-tune the credentials panel block heights to fit the taller logo row */
.panel.paper#credentials .ticker-block:first-child { min-height: 520px !important; }

/* HERO copyright statement — small, thin, JetBrains Mono, low-emphasis grey */
.hero-copy {
  position: absolute;
  left: clamp(28px, 6vw, 128px);
  bottom: clamp(24px, 4vh, 48px);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(241,236,224,0.42);
}
.note {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); margin-top: 14px;
}

/* ============================================================
   MOBILE NAV TOGGLE
   ============================================================ */
.nav-toggle {
  display: none;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid currentColor; background: none; color: currentColor; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1); }
.site-nav.nav-open .nav-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
.site-nav.nav-open .nav-toggle span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ============================================================
   TABLET  (≤ 1040px)  — looser gutters, fewer columns handled
   inline per-section above (leaders 4-col, brand grid 3-col).
   ============================================================ */
@media (max-width: 1040px) {
  .split { gap: clamp(32px, 5vw, 64px); }
}

/* ============================================================
   MOBILE  (≤ 860px)
   ------------------------------------------------------------
   · inline nav links collapse into a toggle dropdown
   · dot rail hidden; keyboard/scroll still work
   ============================================================ */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav { padding: 14px clamp(20px, 6vw, 40px); }
  .nav-cta { font-size: 11px; padding: 8px 12px; }

  .nav-links {
    display: none;
    position: fixed; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    padding: 4px clamp(20px, 6vw, 40px) 12px;
  }
  .site-nav.on-dark .nav-links { background: var(--noir); border-color: rgba(241,236,224,0.2); }
  .site-nav.nav-open .nav-links { display: flex; }
  .nav-links a {
    padding: 15px 0; font-size: 14px; opacity: 0.9; width: 100%;
    border-bottom: 1px solid var(--hairline);
  }
  .site-nav.on-dark .nav-links a { border-color: rgba(241,236,224,0.15); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a.active::after { display: none; }

  /* Panels breathe; titles wrap; openers can stack */
  .opener { flex-wrap: wrap; gap: 10px 16px; }
  .opener .pg { margin-left: 0; flex-basis: 100%; }
  .hero-meta { flex-direction: column; gap: 6px; }
}

/* ============================================================
   TOUCH / SMALL  (≤ 720px)
   ------------------------------------------------------------
   Snap is removed on small touch screens — it fights natural
   momentum scrolling and traps on panels taller than the
   viewport. Panels become min-height auto so dense ones
   (leaders, ways, objections) size to their content instead of
   being clipped to one screen.
   ============================================================ */
@media (max-width: 720px) {
  html { scroll-snap-type: none; }
  .panel {
    min-height: auto;
    scroll-snap-align: none;
    padding: 96px clamp(22px, 6vw, 40px) 56px;
  }
  .hero { min-height: 100svh; padding-top: 120px; }
  .feed { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .feed-wrap, .founder, .contact-details { gap: 28px; }
  .contact-details { grid-template-columns: 1fr; }
}

/* ============================================================
   ROUND 15 — CREDENTIALS LOGO TICKER: stable size on every pass
   ------------------------------------------------------------
   Bug fixed: per-brand sizing was keyed off the [alt="…"] value,
   which only exists on the FIRST ticker-set. The looping duplicate
   set is aria-hidden with alt="" so it matched no per-brand rule and
   fell back to the image's NATURAL pixel size (gemini.png is 3840×867,
   the square PNGs 600×600) — i.e. the logos ballooned 3–6× on the
   second pass. Sizing is now keyed off a per-brand CLASS that is
   present on BOTH sets, so every pass is pixel-identical.
   ============================================================ */

/* Both sets, both logos: contain by height, free width, centred.
   The .ticker-track in the selector lifts specificity above the
   leftover [alt="…"] rules from earlier rounds (which set height:100%
   and otherwise win on the first set only, desyncing the two passes). */
.panel.paper#credentials .ticker-track .ticker-logo img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Uniform row. The container is tall enough to hold the most heavily-padded
   asset (youtube, ~20% ink) at the shared optical size; every logo is
   vertically centred so the visible marks sit on one line. */
.panel.paper#credentials .ticker-block:first-child { min-height: 560px !important; }
.panel.paper#credentials .ticker-block:first-child .ticker-row { min-height: 520px !important; }
.panel.paper#credentials .ticker-block:first-child .ticker-set { gap: 120px !important; padding-right: 120px !important; }
.panel.paper#credentials .ticker-logo { height: 520px !important; }

/* Per-brand cap heights = TARGET ÷ that logo's ink fraction (measured from
   each asset's non-transparent content box), so every logo lands at the SAME
   optical height regardless of the padding baked into the source file.
   TARGET is now ~104px visible (2× the previous ~52px). Virgin Mobile is
   tripled (~156px) per request — it read as disproportionately small. */
.panel.paper#credentials .ticker-logo.logo-youtube img    { max-height: 512px !important; } /* 20% ink  · 2× */
.panel.paper#credentials .ticker-logo.logo-google img     { max-height: 352px !important; } /* 30% ink  · 2× */
.panel.paper#credentials .ticker-logo.logo-jiohotstar img { max-height: 208px !important; } /* 50% ink  · 2× */
.panel.paper#credentials .ticker-logo.logo-virgin img     { max-height: 234px !important; } /* 67% ink  · 3× */
.panel.paper#credentials .ticker-logo.logo-tata  img      { max-height: 132px !important; } /* 79% ink  · 2× */
.panel.paper#credentials .ticker-logo.logo-gpay  img      { max-height: 124px !important; } /* 84% ink  · 2× */
/* u2opia is a vector whose intrinsic box (62px) is smaller than the target,
   so max-height can't enlarge it — set an explicit height to scale it up. */
.panel.paper#credentials .ticker-logo.logo-u2opia img     { height: 116px !important; max-height: 116px !important; } /* 88% ink · 2× */
.panel.paper#credentials .ticker-logo.logo-jw img         { max-height: 135px !important; } /* 100% ink · 2× +30% (user) */
.panel.paper#credentials .ticker-logo.logo-gemini img     { max-height: 104px !important; } /* 100% ink · 2× */
.panel.paper#credentials .ticker-logo.logo-star  img      { max-height: 104px !important; } /* 100% ink · 2× */

/* ============================================================
   ROUND 16 — MOBILE OPTIMISATION  (added 2026-06-15)
   ------------------------------------------------------------
   PURELY ADDITIVE. Every rule below lives inside a max-width media
   query, so the desktop layout (> 880px) never evaluates any of it —
   the desktop site is unchanged. Fixes the live-site mobile issues:
   broken nav drawer, oversized credentials ticker, stray column
   divider lines, plus a general type/spacing pass for phones.
   ============================================================ */

/* ---- Structural fixes: anything that must hold across the whole
        tablet+phone range where the desktop grids collapse (≤ 880px) ---- */
@media (max-width: 880px) {

  /* NAV DRAWER — neutralise the obsolete ≤860px ".nav-links" dropdown
     styling (white bg + position:fixed) that leaks onto the drawer's
     inner link list and renders it as a white panel with invisible text.
     The drawer keeps its dark-panel look from the base rules. */
  .nav-drawer .nav-links {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    display: flex !important;
  }
  .nav-drawer .nav-links a {
    position: static !important;
    width: auto !important;
    border-bottom: 0 !important;
    padding: 8px 0 !important;            /* comfortable tap target */
    font-size: 15px !important;
    color: var(--paper-inv) !important;
    opacity: 0.9 !important;
  }
  .nav-drawer .nav-links a.active { color: var(--lede) !important; }

  /* STRAY COLUMN DIVIDERS — later desktop rounds re-add a border-right
     (with !important) that survives the column-stacking media queries,
     leaving a vertical line down the single stacked column. Remove it;
     the stack rules already supply a bottom hairline between cards. */
  .va-col:first-child       { border-right: 0 !important; }
  #ways .way:first-child    { border-right: 0 !important; }
}

/* ---- Phone-scale layer (≤ 768px): size things for a handset ---- */
@media (max-width: 768px) {

  /* ===== NAV BAR ===== */
  .nav-cta { font-size: 11px; padding: 8px 12px; letter-spacing: 0.12em; }
  .nav-left { gap: 12px; }

  /* ===== CREDENTIALS TICKER — same scrolling concept, scaled to a phone.
     Per-brand heights = desktop values × ~0.29, so the optical-uniform
     calibration (and Virgin 3× / Johnnie Walker 1.3×) is preserved.
     Container fits the most-padded asset (youtube) at the shared size. ===== */
  .panel.paper#credentials .ticker-block:first-child            { min-height: 180px !important; }
  .panel.paper#credentials .ticker-block:first-child .ticker-row { min-height: 150px !important; }
  .panel.paper#credentials .ticker-block:first-child .ticker-set { gap: 48px !important; padding-right: 48px !important; }
  .panel.paper#credentials .ticker-logo                         { height: 150px !important; }

  .panel.paper#credentials .ticker-logo.logo-youtube img    { max-height: 148px !important; }
  .panel.paper#credentials .ticker-logo.logo-google img     { max-height: 102px !important; }
  .panel.paper#credentials .ticker-logo.logo-jiohotstar img { max-height: 60px  !important; }
  .panel.paper#credentials .ticker-logo.logo-virgin img     { max-height: 68px  !important; }
  .panel.paper#credentials .ticker-logo.logo-tata  img      { max-height: 38px  !important; }
  .panel.paper#credentials .ticker-logo.logo-gpay  img      { max-height: 36px  !important; }
  .panel.paper#credentials .ticker-logo.logo-u2opia img     { height: 34px !important; max-height: 34px !important; }
  .panel.paper#credentials .ticker-logo.logo-jw img         { max-height: 40px  !important; }
  .panel.paper#credentials .ticker-logo.logo-gemini img     { max-height: 30px  !important; }
  .panel.paper#credentials .ticker-logo.logo-star  img      { max-height: 30px  !important; }

  /* Leaders ticker — shrink the oversized names + compact the row */
  .panel.paper#credentials .ticker-block:last-child            { min-height: 130px !important; }
  .panel.paper#credentials .ticker-block:last-child .ticker-set { gap: 36px !important; padding-right: 36px !important; }
  .panel.paper#credentials .ticker-leader                      { padding-right: 28px !important; }
  .panel.paper#credentials .ticker-leader .lnm                 { font-size: clamp(24px, 7.5vw, 32px) !important; }
  .panel.paper#credentials .ticker-leader .lrl .company        { font-size: clamp(15px, 4.5vw, 19px) !important; }
  .panel.paper#credentials .ticker-leader .lrl .role           { font-size: 11px !important; }

  /* Both eyebrows ("GLOBAL BRANDS / LEADERS SUPPORTED") fit one line */
  .panel.paper#credentials .ticker-eyebrow { font-size: 13px !important; letter-spacing: 0.08em; }

  /* ===== TYPE / SPACING POLISH — desktop body copy uses large min-sizes
     (21–28px) that feel oversized on a phone; bring them to ~16–18px. ===== */
  .wb-deck p, .wb-deck li                       { font-size: 17px !important; line-height: 1.5 !important; }
  #ways .who-deck                               { font-size: 17px !important; line-height: 1.5 !important; }  /* match "What it is" (.wb-deck) */
  .faq-deck .q                                  { font-size: 18px !important; line-height: 1.35 !important; }
  .faq-deck .a                                  { font-size: 18px !important; line-height: 1.5 !important; }  /* match the question (.q) size */
  .va-list li                                   { font-size: 17px !important; line-height: 1.5 !important; }
  .panel.noir#gravity .leader-bullets li        { font-size: 18px !important; line-height: 1.45 !important; }
  .deck-sub p                                   { font-size: 17px !important; line-height: 1.55 !important; }

  /* Big section openers read fine; just keep them from crowding the nav */
  .panel-body { width: 100%; }
}

/* ---- Narrow handsets (≤ 380px): final nav-bar tightening so the
        hamburger + monogram + "BOOK A CALL" never collide ---- */
@media (max-width: 380px) {
  .site-nav { padding-left: 16px; padding-right: 16px; }
  .nav-cta { font-size: 10px; padding: 7px 10px; letter-spacing: 0.08em; }
  .nav-left { gap: 8px; }
}

/* ============================================================
   ROUND 16b — MOBILE REFINEMENTS (2026-06-15) — still desktop-safe
   (all inside max-width queries; desktop > 880px never sees these)
   ============================================================ */
@media (max-width: 768px) {

  /* 1. HOMEPAGE COPYRIGHT — break after "PVT LTD." so the whole phrase
     "ALL RIGHTS RESERVED." moves to line 2 together (was wrapping with
     only "RESERVED." orphaned). The <span> is inline on desktop = no change. */
  .hero-copy .copy-tail { display: block; }

  /* 2. VISIBILITY / AUTHORITY HEADERS — once the grid stacks, each column
     kept asymmetric side padding (Visibility 5.6px left / 0 right →
     +2.8px right of centre; Authority the mirror), so the two centred
     headings didn't align with each other or the panel. Zero the side
     padding → both headings sit on the true panel centre. (padding-bottom
     / the stacked separator on the first column are preserved.) */
  #authority .va-col { padding-left: 0 !important; padding-right: 0 !important; }

  /* 3. SERVICES "Fractional CCO" — the 2nd stacked card's heading has a
     1.02 line-height (≈ no leading) and the card's margin-bottom is absorbed
     by the equal-height grid, so the title sat flush against the inter-card
     divider (0px above vs 24px below). Add real top headroom on the 2nd card
     so the heading breathes evenly between the two rules. Centring is
     unaffected (already dead-centre). */
  #ways .way:last-child { padding-top: 30px !important; }
}

/* ============================================================
   ROUND 17 — FAQ font parity + mobile divider/indent fixes (2026-06-15)
   ============================================================ */

/* CONTENT (desktop/tablet): the FAQ answer column rendered smaller than the
   question column. Match the answer to the question's size. Scoped to
   >768px so it doesn't override the phone size set in ROUND 16. */
@media (min-width: 769px) {
  .faq-deck .a { font-size: clamp(22px, 1.8vw, 28px) !important; } /* = .faq-deck .q */
}

/* MOBILE-ONLY refinements (all inside max-width queries; desktop untouched) */
@media (max-width: 880px) {
  /* Remove the faint horizontal line above the 2nd stacked column header on
     The Lede Approach ("Authority") and on Services ("Fractional CCO").
     These are the first column/card's bottom border that the stacking
     queries leave behind; the padding/margin still separate the sections. */
  #authority .va-col:first-child { border-bottom: 0 !important; }
  #ways .way:first-child         { border-bottom: 0 !important; }
}

@media (max-width: 820px) {
  /* FAQ, once stacked: the question kept a left indent the answer didn't, so
     they looked misaligned. Zero the indent and open up the gap so each
     question reads as separate from its answer (a clear line break). */
  .faq-deck .q  { padding-left: 0 !important; }
  .faq-deck .qa { gap: 20px !important; }
}

/* ============================================================
   ROUND 18 — 'Why we exist' phones: tighten caption→phone gap (2026-06-15)
   ============================================================ */
/* Halve the gap between each phone caption and its phone (desktop + mobile).
   On desktop the equal-height caption zone (min-height) is kept, so the
   header tops AND the phone tops stay aligned across the three columns —
   shorter captions therefore still carry some space below them (the cost of
   aligning rows of unequal-length headers). */
.panel.paper#channels .phone-col-paper { gap: clamp(10px, 1.2vh, 18px) !important; }

@media (max-width: 880px) {
  /* Once the phones stack into one column, the equal-height caption zone is
     no longer needed for alignment and only pads empty space below short
     captions — drop it so each caption sits right above its own phone. */
  .panel.paper#channels .phone-cap-paper { min-height: 0 !important; }
}

/* ============================================================
   ROUND 19 — Lede Approach + Services heading spacing & Visibility
   bullets (2026-06-15) — mobile only; desktop untouched
   ============================================================ */
@media (max-width: 768px) {

  /* THE LEDE APPROACH — halve the padding around the Visibility / Authority
     headings and their underline (heading→line and line→content). Each
     spacing property is reduced to ~50% of its desktop value. */
  #authority .va-h   { padding-bottom: clamp(10px, 1.5vh, 18px) !important;
                       margin-bottom:  clamp(10px, 1.5vh, 20px) !important; }
  #authority .va-col { gap: clamp(10px, 1.2vh, 16px) !important; }

  /* (Visibility-list bullets moved to ROUND 20 — now applied on all widths.) */

  /* SERVICES — halve the padding below the Leadership Branding / Fractional
     CCO headings and around the rule (wh-deck padding + margin + the card's
     row-gap all reduced ~50%). */
  #ways .wh-deck { padding-bottom: 8px !important; margin-bottom: 4px !important; }
  #ways .way     { row-gap: 8px !important; }
}

/* ============================================================
   ROUND 20 — Visibility list bullets on ALL widths (desktop + mobile)
   ============================================================ */
#authority .va-list li         { padding-left: 22px !important; position: relative !important; }
#authority .va-list li::before { content: "•" !important; position: absolute !important;
                                  left: 0 !important; top: 0 !important; color: var(--ink) !important; }