/* ──────────────────────────────────────────────────────
   Navega Partners — shared site styles
   ────────────────────────────────────────────────────── */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* No CSS scroll-behavior: smooth — it animates scroll position in chunks
   that fight our manual RAF lerps on horizontal pin-scroll sections and
   make the motion read as stepped/choppy. Native scroll is fluid on its
   own. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

:root{
  --navy:       #1A2744;
  --terracotta: #B5796A;
  --sage:       #7A9E96;
  --shell:      #F9F6F1;
  --dune:       #E6DDD4;
  --page:       #ECEAE5;
  --white:      #ffffff;
  --rule:       #dedad4;
  --rule-warm:  rgba(26,39,68,0.10);
  --mid:        #5a6678;
  --muted:      rgba(255,255,255,0.55);
  --muted-2:    rgba(255,255,255,0.38);

  --serif:  'Fraunces', Georgia, serif;
  --sans:   'DM Sans', Helvetica, Arial, sans-serif;
  --body:   'Jost', system-ui, sans-serif;

  --maxw:   1240px;
  --pad-x:  80px;
}

body{
  background: var(--page);
  color: var(--navy);
  font-family: var(--body);
  font-weight: 300;
  /* clip, not hidden: `hidden` makes body a scroll container, which
     breaks position:sticky descendants (the hscroll pin). */
  overflow-x: clip;
  line-height: 1.7;
}

/* ── Type helpers ───────────────────────────────────── */
.eyebrow{
  font-family: var(--sans);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.eyebrow.muted{ color: rgba(181,121,106,0.78); }
.eyebrow.dark{ color: var(--navy); opacity: 0.55; }

.serif-thin{ font-family: var(--serif); font-weight: 200; letter-spacing: -0.02em; line-height: 1.04; }
.serif-light{ font-family: var(--serif); font-weight: 300; letter-spacing: -0.01em; line-height: 1.1; }
em.italic{ font-style: italic; color: var(--terracotta); }

.body-lead{ font-family: var(--body); font-weight: 300; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.7); }
.body-lead.dark{ color: rgba(26,39,68,0.7); }
.body-copy{ font-family: var(--body); font-weight: 300; font-size: 15.5px; line-height: 1.85; color: rgba(26,39,68,0.78); }
.body-copy.invert{ color: rgba(255,255,255,0.7); }

/* ── Nav ────────────────────────────────────────────── */
.site-nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 26px 64px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 360ms ease, padding 360ms ease, border-color 360ms ease;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.site-nav.scrolled{
  background: var(--navy);
  padding: 18px 64px;
  border-bottom-color: rgba(255,255,255,0.06);
}
.site-nav.solid{
  background: var(--navy);
  border-bottom-color: rgba(255,255,255,0.06);
}
.site-nav .logo-lock{ display: flex; align-items: center; gap: 16px; }
.site-nav .logo-lock svg{ display: block; }
.site-nav .vd{ width: 1px; height: 36px; background: rgba(255,255,255,0.18); }
.site-nav .wm{ display:flex; flex-direction: column; gap: 2px; }
.site-nav .wm-navega{ font-family: var(--sans); font-weight: 200; font-size: 22px; letter-spacing: 0.2em; color: var(--white); line-height: 1; }
.site-nav .wm-sub{ font-family: var(--sans); font-weight: 300; font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.4); }

.nav-links{
  display: flex; align-items: center; gap: 38px;
}
.nav-link{
  font-family: var(--sans); font-weight: 300;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-decoration: none; padding: 6px 0;
  position: relative;
  transition: color 200ms ease;
}
.nav-link:hover{ color: var(--white); }
.nav-link.active{ color: var(--white); }
.nav-link.has-dd{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav-link.has-dd::after{ content: "↓"; font-size: 9px; opacity: 0.5; }

.nav-dd-wrap{ position: relative; }
.nav-dd{
  position: absolute; top: calc(100% + 14px); right: -20px;
  min-width: 260px;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 18px 0;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.nav-dd-wrap:hover .nav-dd,
.nav-dd-wrap:focus-within .nav-dd{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dd a{
  display: block; padding: 11px 26px;
  font-family: var(--body); font-weight: 300; font-size: 14px;
  color: rgba(255,255,255,0.7); text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 200ms, background 200ms;
}
.nav-dd a:hover{ color: var(--white); background: rgba(255,255,255,0.04); }

/* mobile menu */
.nav-burger{ display:none; background:none; border:none; cursor:pointer; padding: 8px; }
.nav-burger span{ display:block; width:22px; height:1px; background: var(--white); margin: 5px 0; }
.mobile-overlay{
  position: fixed; inset: 0; z-index: 200;
  background: var(--navy);
  display: none;
  flex-direction: column; padding: 80px 32px;
}
.mobile-overlay.open{ display:flex; }
.mobile-overlay .mob-close{
  position: absolute; top: 28px; right: 28px;
  background: none; border: none; color: var(--white);
  font-family: var(--serif); font-size: 32px; cursor: pointer;
  font-weight: 200;
}
.mobile-overlay a{
  font-family: var(--serif); font-weight: 200; font-size: 28px;
  color: var(--white); text-decoration: none; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-overlay a.sub{
  font-size: 16px; padding-left: 20px;
  color: rgba(255,255,255,0.6);
  font-family: var(--body); font-weight: 300;
  letter-spacing: 0.01em;
}

/* ── Sections ───────────────────────────────────────── */
.sec{
  padding: 140px 0;
  position: relative;
}
.sec.tight{ padding: 110px 0; }
.sec.compact{ padding: 88px 0; }
.sec.navy{ background: var(--navy); color: var(--white); }
.sec.shell{ background: var(--shell); }
.sec.dune{ background: var(--dune); }
.sec.sage{ background: var(--sage); color: var(--white); }
.sec.white{ background: var(--white); }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap.narrow{ max-width: 920px; }
.wrap.reader{ max-width: 720px; }

/* ── Inter-panel gap signature ──────────────────────── */
.gap-4{ height: 4px; background: var(--page); }

/* ── Footer ─────────────────────────────────────────── */
.site-footer{
  background: var(--navy); color: var(--white);
  padding: 56px 64px 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-footer .top{
  display: grid; grid-template-columns: 1fr 2fr 1fr;
  gap: 40px; align-items: start;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-footer .foot-logo{ display: flex; align-items: center; gap: 14px; }
.site-footer .foot-logo .vd{ width: 1px; height: 34px; background: rgba(255,255,255,0.18); }
.site-footer .foot-logo .wm-navega{ font-family: var(--sans); font-weight: 200; font-size: 26px; letter-spacing: 0.2em; color: var(--white); line-height: 1; }
.site-footer .foot-logo .wm-sub{ font-family: var(--sans); font-weight: 300; font-size: 8.5px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 4px; }
.site-footer .foot-nav{
  display: flex; gap: 36px; justify-content: center; flex-wrap: wrap;
}
.site-footer .foot-nav a{
  font-family: var(--sans); font-weight: 300; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); text-decoration: none;
  transition: color 200ms;
}
.site-footer .foot-nav a:hover{ color: var(--white); }
.site-footer .foot-meta{
  text-align: right;
  font-family: var(--sans); font-weight: 300; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.site-footer .bottom{
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-weight: 300;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.site-footer .bottom .ll{
  display: flex; align-items: center; gap: 18px;
}
.site-footer .bottom a{
  color: rgba(181,121,106,0.85); text-decoration: none; transition: color 200ms;
}
.site-footer .bottom a:hover{ color: var(--terracotta); }

/* ── Text links ─────────────────────────────────────── */
.tlink{
  font-family: var(--sans); font-weight: 300;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--terracotta); text-decoration: none;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, color 240ms ease;
}
.tlink::after{ content: "→"; font-size: 14px; transition: transform 240ms ease; }
.tlink:hover{ border-bottom-color: var(--terracotta); }
.tlink:hover::after{ transform: translateX(4px); }
.tlink.large{ font-size: 13px; }

/* ── Cards (practice / insight) ─────────────────────── */
.pcard{
  background: var(--shell);
  padding: 48px 40px 40px;
  display: flex; flex-direction: column;
  gap: 22px;
  border: 1px solid var(--rule);
  transition: transform 320ms ease, border-color 320ms ease;
}
.pcard.dune{ background: var(--dune); }
.pcard:hover{ transform: translateY(-3px); border-color: rgba(26,39,68,0.18); }
.pcard .illus{ height: 88px; display: flex; align-items: flex-start; }
.pcard .ptitle{
  font-family: var(--serif); font-weight: 300;
  font-size: 26px; color: var(--navy); line-height: 1.2;
  letter-spacing: -0.005em;
}
.pcard .pcopy{
  font-family: var(--body); font-weight: 300;
  font-size: 14.5px; line-height: 1.7;
  color: rgba(26,39,68,0.72);
  flex: 1;
}
.pcard .tlink{ margin-top: 4px; }

/* ── Insight row (editorial) ────────────────────────── */
.irow{
  display: grid; grid-template-columns: 160px 1fr 160px;
  gap: 48px;
  padding: 42px 0;
  border-top: 1px solid var(--rule-warm);
  align-items: baseline;
  text-decoration: none;
  transition: background 240ms;
}
.irow:last-child{ border-bottom: 1px solid var(--rule-warm); }
.irow .meta{
  font-family: var(--sans); font-weight: 300;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(26,39,68,0.55);
}
.irow .meta div + div{ margin-top: 6px; color: rgba(26,39,68,0.4); }
.irow h3{
  font-family: var(--serif); font-weight: 300;
  font-size: 30px; line-height: 1.2; color: var(--navy);
  letter-spacing: -0.01em;
}
.irow .excerpt{
  margin-top: 14px;
  font-family: var(--body); font-weight: 300;
  font-size: 16px; line-height: 1.65;
  color: rgba(26,39,68,0.68);
  max-width: 620px;
}
.irow .read-cell{
  font-family: var(--sans); font-weight: 300;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--terracotta); text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.irow .read-cell::after{ content: "→"; font-size: 14px; transition: transform 240ms; }
.irow:hover h3{ color: rgba(26,39,68,0.85); }
.irow:hover .read-cell::after{ transform: translateX(4px); }

/* ── Article reading layout ─────────────────────────── */
.article-body{
  font-family: var(--body); font-weight: 300;
  font-size: 18px; line-height: 1.85;
  color: rgba(26,39,68,0.82);
}
.article-body p{ margin: 0 0 26px; }
.article-body p:first-of-type{ font-size: 21px; line-height: 1.65; color: rgba(26,39,68,0.92); }
.article-body h2{
  font-family: var(--serif); font-weight: 300;
  font-size: 28px; line-height: 1.25; color: var(--navy);
  letter-spacing: -0.01em;
  margin: 56px 0 22px;
}
.article-body blockquote{
  font-family: var(--serif); font-weight: 200; font-style: italic;
  font-size: 28px; line-height: 1.35; color: var(--terracotta);
  margin: 48px 0; padding: 0;
  border: none;
  letter-spacing: -0.005em;
}
.article-body a{ color: var(--terracotta); text-decoration: none; border-bottom: 1px solid rgba(181,121,106,0.4); }

/* ── Section header pattern ─────────────────────────── */
.s-header{
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 80px;
  max-width: 720px;
}
.s-header.center{ margin-left: auto; margin-right: auto; text-align: center; }
.s-header h2{
  font-family: var(--serif); font-weight: 300;
  font-size: 52px; line-height: 1.05; letter-spacing: -0.015em;
  color: inherit;
}
.sec.navy .s-header h2{ color: var(--white); }
.s-header p{
  font-family: var(--body); font-weight: 300;
  font-size: 18px; line-height: 1.65;
  color: rgba(26,39,68,0.65);
  max-width: 540px;
}
.sec.navy .s-header p{ color: rgba(255,255,255,0.6); }

/* ── 3-col grid ────────────────────────────────────── */
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }

/* ── Practice section (text + illus alternating) ────── */
.practice-row{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  padding: 100px 0;
  border-top: 1px solid var(--rule-warm);
}
.practice-row.reverse > .ptext{ order: 2; }
.practice-row.reverse > .pillus{ order: 1; }
.practice-row .pillus{
  display: flex; align-items: center; justify-content: center;
  min-height: 300px;
}
.practice-row h2{
  font-family: var(--serif); font-weight: 300;
  font-size: 44px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--navy); margin-bottom: 28px;
}
.practice-row .num{
  font-family: var(--sans); font-weight: 300;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 16px;
}
.practice-row p{
  font-family: var(--body); font-weight: 300;
  font-size: 16.5px; line-height: 1.75;
  color: rgba(26,39,68,0.72);
  margin-bottom: 20px;
}
.practice-row .tlink{ margin-top: 16px; }

/* ── Reveal anim ───────────────────────────────────── */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity 900ms ease, transform 900ms ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal.d1{ transition-delay: 80ms; }
.reveal.d2{ transition-delay: 160ms; }
.reveal.d3{ transition-delay: 240ms; }
.reveal.d4{ transition-delay: 320ms; }

/* ── Horizontal parallax drift ─────────────────────── */
/* JS sets transform: translate3d(x,0,0) on these. Opacity fades in
   via .hp-in once the item is observed in viewport. */
.hp-item{
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.hp-item.hp-in{ opacity: 1; }
@media (max-width: 760px){
  .hp-item{ opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce){
  .hp-item{ opacity: 1 !important; transform: none !important; }
}

/* ── Horizontal pin-scroll (BCG-style) ────────────── */
/* JS sets stage height + track translateX. Each slide fills the viewport;
   the section pins for the duration of the horizontal traverse, then
   releases to normal flow. On mobile (<880px) we fall back to a stack. */
.hscroll{
  position: relative;
  /* JS sets height: N * 100vh */
}
.hscroll-pin{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: inherit;
}
.hscroll-track{
  display: flex;
  height: 100%;
  will-change: transform;
}
.hscroll-slide{
  flex: 0 0 100vw;
  height: 100%;
  padding: 96px clamp(48px, 8vw, 140px) 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}
/* Editorial slide typography */
.hs-num{
  font-family: var(--sans); font-weight: 300;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 18px;
}
.hs-meta{
  font-family: var(--sans); font-weight: 300;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 56px;
}
.hs-title{
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(40px, 5.6vw, 96px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  max-width: 1100px;
  margin: 0 0 36px;
}
.hs-title em{ font-style: italic; color: var(--terracotta); }
.hs-sub{
  font-family: var(--body); font-weight: 300;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.6;
  opacity: 0.7;
  max-width: 640px;
  margin: 0 0 48px;
}
.hs-read{
  font-family: var(--sans); font-weight: 300;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--terracotta);
  align-self: flex-start;
}
.hs-read::after{ content: " \2192"; }
/* Tension footer (used in values slides) */
.hs-tension{
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--body); font-weight: 300;
  font-style: italic;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  opacity: 0.5;
  max-width: 720px;
  border-top: 1px solid currentColor;
  border-top-color: rgba(127, 127, 127, 0.18);
}
.hs-navy .hs-tension{ border-top-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.6); opacity: 1; }
.hs-shell .hs-tension, .hs-dune .hs-tension{ border-top-color: rgba(26,39,68,0.14); color: rgba(26,39,68,0.55); opacity: 1; }
/* Two-column variant: large title left, body right */
.hscroll-slide.two-col{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}
.hscroll-slide.two-col > .hs-right{
  align-self: end;
  padding-bottom: 8vh;
}
/* Slide colour variants */
.hs-navy{ background: var(--navy); color: var(--white); }
.hs-navy .hs-meta{ color: rgba(255,255,255,0.55); opacity: 1; }
.hs-navy .hs-sub{ color: rgba(255,255,255,0.7); opacity: 1; }
.hs-shell{ background: var(--shell); color: var(--navy); }
.hs-shell .hs-meta{ color: rgba(26,39,68,0.55); opacity: 1; }
.hs-shell .hs-sub{ color: rgba(26,39,68,0.7); opacity: 1; }
.hs-dune{ background: var(--dune); color: var(--navy); }
.hs-dune .hs-meta{ color: rgba(26,39,68,0.55); opacity: 1; }
.hs-dune .hs-sub{ color: rgba(26,39,68,0.7); opacity: 1; }
/* Progress strip */
.hscroll-progress{
  position: absolute;
  bottom: 48px;
  left: clamp(48px, 8vw, 140px);
  right: clamp(48px, 8vw, 140px);
  display: flex;
  gap: 6px;
  z-index: 5;
  pointer-events: none;
}
.hscroll-progress span{
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.12;
  position: relative;
}
.hscroll-progress span::after{
  content: '';
  position: absolute; inset: 0;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(.22,1,.36,1);
}
.hscroll-progress span.done::after{ transform: scaleX(1); }
.hscroll-progress span.cur::after{ transform: scaleX(1); }
/* Scroll cue on intro slide */
.hs-cue{
  font-family: var(--sans); font-weight: 300;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--terracotta);
  margin-top: 64px;
  display: inline-flex; align-items: center; gap: 14px;
}
.hs-cue::after{ content: ""; width: 56px; height: 1px; background: var(--terracotta); opacity: 0.55; }
/* Mobile fallback: render as a vertical stack */
@media (max-width: 879px){
  .hscroll{ height: auto !important; }
  .hscroll-pin{ position: static; height: auto; overflow: visible; }
  .hscroll-track{ display: block; height: auto; transform: none !important; }
  .hscroll-slide{ flex: none; width: auto; height: auto; min-height: 80vh; padding: 80px 28px; }
  .hscroll-progress{ display: none; }
  /* Collapse the two-column slide layout — a 1.4fr/1fr grid is
     unreadable at phone widths. */
  .hscroll-slide.two-col{ display: flex; flex-direction: column; justify-content: center; gap: 36px; }
  .hscroll-slide.two-col > .hs-right{ align-self: stretch; padding-bottom: 0; }
  .hs-illus svg{ max-width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce){
  .hscroll{ height: auto !important; }
  .hscroll-pin{ position: static; height: auto; overflow: visible; }
  .hscroll-track{ display: block; height: auto; transform: none !important; }
  .hscroll-slide{ flex: none; width: auto; height: auto; min-height: 70vh; }
  .hscroll-progress{ display: none; }
}

/* ── Stack-fade pin-scroll ─────────────────────────── */
/* Cards stacked at the same point; JS cross-fades between them as you
   scroll. Used for compact-content sections (e.g. values). */
.stack{
  position: relative;
  background: var(--dune);
  /* JS sets height: N * 70vh (or whatever data-per-card says) */
}
.stack-pin{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.stack-card{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(640px, 70vw);
  max-height: 78vh;
  padding: 48px clamp(36px, 4vw, 56px) 40px;
  box-sizing: border-box;
  background: var(--shell);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  will-change: opacity, transform;
}
.stack-card.is-navy{ background: var(--navy); color: var(--white); }
.stack-card.is-dune{ background: var(--dune); color: var(--navy); }
.stack-card .stack-num{
  font-family: var(--sans); font-weight: 300;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--terracotta);
}
.stack-card h3{
  font-family: var(--serif); font-weight: 200; font-style: italic;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 6px 0 8px;
}
.stack-card p{
  font-family: var(--body); font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16.5px);
  line-height: 1.65;
  opacity: 0.75;
  margin: 0;
}
.stack-card .stack-tension{
  margin-top: 18px;
  padding-top: 18px;
  font-family: var(--body); font-weight: 300; font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.55;
  border-top: 1px solid currentColor;
  border-top-color: rgba(26,39,68,0.14);
}
.stack-card.is-navy .stack-tension{ border-top-color: rgba(255,255,255,0.16); opacity: 0.65; }
/* Heading + intro that floats above the stack */
.stack-header{
  position: absolute;
  top: clamp(64px, 9vh, 110px);
  left: clamp(48px, 8vw, 140px);
  right: clamp(48px, 8vw, 140px);
  z-index: 4;
  pointer-events: none;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 32px;
}
.stack-header .eyebrow{ color: var(--terracotta); }
.stack-header h2{
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  max-width: 600px;
  margin: 0;
}
.stack-progress{
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 5;
  pointer-events: none;
}
.stack-progress span{
  width: 28px; height: 1px;
  background: var(--navy);
  opacity: 0.18;
  position: relative;
}
.stack-progress span::after{
  content: '';
  position: absolute; inset: 0;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(.22,1,.36,1);
}
.stack-progress span.done::after, .stack-progress span.cur::after{ transform: scaleX(1); }
/* Mobile + reduced-motion: stack becomes a normal grid of cards */
@media (max-width: 759px){
  .stack{ height: auto !important; background: var(--dune); padding: 60px 0; }
  .stack-pin{ position: static; height: auto; overflow: visible; padding: 0 24px; }
  .stack-header{ position: static; padding: 0 0 40px; flex-direction: column; gap: 12px; }
  .stack-card{
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-height: none;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 4px;
  }
  .stack-progress{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .stack{ height: auto !important; }
  .stack-pin{ position: static; height: auto; overflow: visible; }
  .stack-header{ position: static; padding: 60px clamp(48px,8vw,140px) 24px; flex-direction: column; gap: 12px; }
  .stack-card{
    position: relative;
    top: auto; left: auto;
    width: min(640px, 92%);
    margin: 0 auto 12px;
    opacity: 1 !important;
    transform: none !important;
  }
  .stack-progress{ display: none; }
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 960px){
  :root{ --pad-x: 40px; }
  .sec{ padding: 100px 0; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .practice-row{ grid-template-columns: 1fr; gap: 40px; padding: 70px 0; }
  .practice-row.reverse > .ptext{ order: 1; }
  .practice-row.reverse > .pillus{ order: 2; }
  .practice-row h2{ font-size: 36px; }
  .s-header h2{ font-size: 38px; }
  .irow{ grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
  .irow .read-cell{ text-align: left; justify-content: flex-start; }
  .nav-links{ display: none; }
  .nav-burger{ display: block; }
  .site-nav, .site-nav.scrolled{ padding: 18px 28px; }
  .site-footer{ padding: 40px 28px 24px; }
  .site-footer .top{ grid-template-columns: 1fr; text-align: left; }
  .site-footer .foot-nav{ justify-content: flex-start; }
  .site-footer .foot-meta{ text-align: left; }
  .site-footer .bottom{ flex-direction: column; gap: 12px; align-items: flex-start; }
}