/* =========================================================
   Tendara — Design System
   Cream ground · Navy ink · Oxblood accent
   Display: Instrument Serif · Body: Inter Tight
   ========================================================= */

:root {
  /* Color */
  --cream: #F4EADE;
  --cream-warm: #EFE3D5;        /* slightly deeper tone for layered surfaces */
  --cream-fog: #EAE0D2;         /* even deeper, used sparingly */
  --navy: #1A2942;
  --navy-ink: #14213a;
  --charcoal: #1F1F1F;
  --oxblood: #6B1C2A;
  --oxblood-hot: #7d2233;
  --hairline: rgba(26, 41, 66, 0.14);
  --hairline-strong: rgba(26, 41, 66, 0.28);
  --hairline-soft: rgba(26, 41, 66, 0.08);

  /* Type scale (desktop) */
  --fs-hero: clamp(64px, 11.5vw, 168px);
  --fs-display: clamp(48px, 7.4vw, 112px);
  --fs-stat: clamp(96px, 13vw, 184px);
  --fs-h2: clamp(36px, 4.6vw, 72px);
  --fs-h3: clamp(24px, 2.4vw, 36px);
  --fs-lead: clamp(20px, 1.5vw, 24px);
  --fs-body: 19px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;

  /* Layout */
  --max-w: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-pad: clamp(96px, 14vw, 220px);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 240ms;
  --t-med: 600ms;
  --t-slow: 1200ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

html { overflow-x: clip; }
body {
  font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--cream);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.hero, .cta-band { overflow: clip; }

/* Cross-document View Transitions opt-in. In Chrome 126+, Edge 126+, Safari 18.2+
   the browser snapshots the wordmark before navigation and morphs it into place
   on the destination page, while the rest of the layout crossfades around it.
   Firefox ignores the rule and navigates normally — graceful degradation. */
@view-transition { navigation: auto; }
.brand img { view-transition-name: tendara-wordmark; }

/* Page transition root for both same-document and cross-document fades. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 480ms; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Body scroll lock while cal.com modal is open ---------- */
html.cal-modal-open,
html.cal-modal-open body { overflow: hidden; }

/* ---------- Grain overlay (paper-stock texture over cream ground) ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
@media (max-width: 600px) {
  .grain { opacity: 0.03; }
}

/* ---------- Display type ---------- */
.display, .hero h1, .stat-num, h2.section-title, h1.page-title {
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 0.96;
  color: var(--navy);
}
.display.italic, .hero h1 em, .accent-italic {
  font-style: italic;
  letter-spacing: -0.025em;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); position: relative; }
.section.tight { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); }
.divider {
  width: 100%;
  height: 1px;
  background: var(--hairline);
  transform-origin: left center;
}
.divider.scroll-rule { transform: scaleX(0); transition: transform 1400ms var(--ease-out); }
.divider.scroll-rule.in { transform: scaleX(1); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow.no-rule::before { display: none; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), backdrop-filter var(--t-fast) var(--ease-out);
}
.nav.scrolled {
  padding: 14px 0;
  background: color-mix(in oklab, var(--cream) 72%, transparent);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--hairline-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  font-family: 'Instrument Serif', serif;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1;
}
.brand img {
  height: 32px;
  width: auto;
}
.nav.scrolled .brand img { height: 28px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav-links a {
  color: var(--navy);
  position: relative;
  padding: 4px 0;
  opacity: 0.7;
  transition: opacity var(--t-fast) var(--ease-out);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 380ms var(--ease-out);
}
.nav-links a:hover, .nav-links a.is-active { opacity: 1; }
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); transform-origin: left center; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--navy);
  color: var(--cream);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.nav-cta:hover { background: var(--oxblood); transform: translateY(-1px); }
.nav-cta .arrow { width: 12px; height: 12px; transition: transform var(--t-fast) var(--ease-out); }
.nav-cta:hover .arrow { transform: translateX(2px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px 19px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  position: relative;
  overflow: hidden;
  transition: transform 300ms var(--ease-out);
  will-change: transform;
}
.btn--primary { background: var(--oxblood); color: var(--cream); }
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--oxblood-hot);
  transform: translateY(101%);
  transition: transform 480ms var(--ease-out);
  z-index: 0;
}
.btn--primary:hover::after { transform: translateY(0); }
.btn--primary > * { position: relative; z-index: 1; }

.btn--ghost {
  color: var(--navy);
  background: transparent;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline-strong);
  border-radius: 0;
}
.btn--ghost:hover { border-color: var(--navy); }

.btn .arrow {
  width: 14px;
  height: 14px;
  transition: transform 360ms var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(140px, 18vh, 220px);
  padding-bottom: 80px;
}
.hero h1 {
  font-size: var(--fs-hero);
  margin: 0;
  max-width: 18ch;
}
.hero .subhead {
  margin-top: clamp(36px, 4vw, 56px);
  max-width: 56ch;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.4;
  color: var(--charcoal);
  opacity: 0.82;
}
.hero .cta-row {
  margin-top: clamp(40px, 5vw, 72px);
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-meta {
  position: absolute;
  bottom: 48px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--navy);
  opacity: 0.55;
  pointer-events: none;
}
.hero-meta .scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-meta .scroll-cue::after {
  content: '';
  width: 1px;
  height: 36px;
  background: var(--navy);
  opacity: 0.45;
  display: inline-block;
  animation: scrollPulse 2400ms infinite;
}
@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* hero word-reveal */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}
.reveal-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1100ms var(--ease-out);
  will-change: transform;
}
.reveal.in .reveal-word > span { transform: translateY(0); }

/* line reveal (smaller copy) */
.reveal-line {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal-line.in { opacity: 1; transform: none; }

/* ---------- Stats ---------- */
.stats {
  position: relative;
  background: var(--cream-warm);
}
.stats::before, .stats::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--hairline);
}
.stats::before { top: 0; }
.stats::after { bottom: 0; }
.stats .spotlight {
  position: absolute;
  width: 480px;
  height: 480px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in oklab, var(--cream) 60%, transparent) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  mix-blend-mode: screen;
  filter: blur(8px);
}
.stats:hover .spotlight { opacity: 1; }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  position: relative;
}
.stat {
  padding: 12px clamp(18px, 3vw, 48px);
  border-right: 1px solid var(--hairline);
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat .num {
  font-family: 'Instrument Serif', serif;
  font-size: var(--fs-stat);
  line-height: 0.92;
  color: var(--navy);
  letter-spacing: -0.04em;
  font-weight: 400;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}
.stat.wide .num { font-size: clamp(72px, 10vw, 140px); letter-spacing: -0.045em; }
.stat .num .unit {
  font-size: 0.5em;
  margin-left: 0.08em;
  opacity: 0.7;
}
.stat .num .prefix {
  font-size: 0.6em;
  margin-right: 0.04em;
  opacity: 0.78;
}
.stat .label {
  margin-top: 28px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--navy);
  opacity: 0.78;
  max-width: 28ch;
}
.stat .source {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxblood);
  opacity: 0.85;
}

/* ---------- Protocol (pinned 10-week walkthrough) ---------- */
.protocol .protocol-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.protocol-aside {
  position: sticky;
  top: 22vh;
}
.protocol-aside .eyebrow {
  margin-bottom: 28px;
  display: inline-flex;
}
.protocol-aside h2 {
  font-size: var(--fs-h2);
  margin: 0 0 28px;
  max-width: 14ch;
}
.protocol-aside p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 36ch;
  opacity: 0.78;
  color: var(--charcoal);
  margin: 0;
}
.protocol-weeks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.week {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(36px, 5vw, 56px) 0;
  border-bottom: 1px solid var(--hairline);
}
.week:first-child { padding-top: 0; }
.week:last-child { border-bottom: 0; padding-bottom: 0; }
.week .num {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.02em;
  color: var(--navy);
  opacity: 0.7;
  line-height: 0.9;
  transition: color 480ms var(--ease-out), opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.protocol.has-pin .week .num { opacity: 0.4; }
.week h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 12px;
}
.week p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--charcoal);
  opacity: 0.78;
  margin: 0;
  max-width: 50ch;
}
.protocol.has-pin .week.is-active .num {
  color: var(--oxblood);
  opacity: 1;
  transform: translateX(-6px);
}

@media (max-width: 900px) {
  .protocol .protocol-grid { grid-template-columns: 1fr; }
  .protocol-aside { position: static; }
  .week { grid-template-columns: 64px 1fr; }
}

/* ---------- Marquee strip ---------- */
.marquee {
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--cream);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-slide 38s linear infinite;
  will-change: transform;
}
.marquee__group {
  display: inline-flex;
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
  padding-right: clamp(36px, 5vw, 64px);
  white-space: nowrap;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 44px);
  letter-spacing: -0.012em;
  color: var(--navy);
}
.marquee__group .dot {
  color: var(--oxblood);
  font-size: 0.5em;
  opacity: 0.9;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: translateX(0); }
}

/* ---------- Section header ---------- */
.section-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 112px);
}
.section-header h2 {
  margin: 0;
  font-size: var(--fs-h2);
  max-width: 18ch;
}
.section-header .meta {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ---------- The Work (3 blocks) ---------- */
.work-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.work-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.work-item .num {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  color: var(--navy);
  opacity: 0.45;
  letter-spacing: 0.05em;
}
.work-item .label {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.work-item .label em {
  font-style: italic;
  opacity: 0.72;
  font-size: 0.78em;
  margin-left: 0.4em;
  letter-spacing: -0.02em;
}
.work-item .meta-right {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.55;
  text-align: right;
}

/* ---------- Deliverable list ---------- */
.deliverable {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.deliverable .left h2 {
  font-size: var(--fs-h2);
  margin: 0 0 32px;
  max-width: 12ch;
}
.deliverable .left p {
  font-size: var(--fs-lead);
  line-height: 1.45;
  max-width: 32ch;
  opacity: 0.78;
  color: var(--charcoal);
}
.deliverable-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.deliverable-list li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: 'Instrument Serif', serif;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: -0.012em;
  transition: padding-left var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.deliverable-list li:hover {
  padding-left: 14px;
  color: var(--oxblood);
}
.deliverable-list li .idx {
  font-size: 12px;
  letter-spacing: 0.18em;
  font-family: 'Inter Tight', sans-serif;
  color: var(--navy);
  opacity: 0.4;
  font-style: normal;
  font-weight: 500;
}
.deliverable-list li .pages {
  font-size: 12px;
  letter-spacing: 0.18em;
  font-family: 'Inter Tight', sans-serif;
  color: var(--navy);
  opacity: 0.4;
  font-style: normal;
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- Closing CTA band ---------- */
.cta-band {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(96px, 14vw, 200px) 0;
  position: relative;
  overflow: hidden;
}
.cta-band .display { color: var(--cream); }
.cta-band .display em { color: color-mix(in oklab, var(--cream) 80%, var(--oxblood) 30%); }
.cta-band .row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.cta-band h2 {
  font-size: var(--fs-display);
  margin: 0;
  max-width: 16ch;
}
.cta-band .btn--primary { background: var(--cream); color: var(--navy); }
.cta-band .btn--primary::after { background: color-mix(in oklab, var(--cream) 84%, var(--oxblood) 18%); }
.cta-band .floating-t {
  position: absolute;
  right: -80px;
  bottom: -180px;
  width: 720px;
  opacity: 0.04;
  pointer-events: none;
  filter: invert(1);
}

/* ---------- Footer ---------- */
.footer {
  padding: 80px 0 56px;
  border-top: 1px solid var(--hairline);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 80px;
}
.footer-inner h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.55;
  margin: 0 0 16px;
}
.footer-inner ul { list-style: none; padding: 0; margin: 0; }
.footer-inner ul li { padding: 4px 0; }
.footer-inner ul li a {
  font-size: 15px;
  color: var(--charcoal);
  opacity: 0.78;
  transition: opacity var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.footer-inner ul li a:hover { opacity: 1; color: var(--oxblood); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.footer-mark img {
  width: 48px;
  height: auto;
  opacity: 0.85;
}
.footer-bottom .legal {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  opacity: 0.5;
}

/* ---------- About page ---------- */
.about-hero {
  padding-top: 220px;
  padding-bottom: 80px;
}
.about-hero h1 {
  font-size: var(--fs-display);
  margin: 0 0 0;
  max-width: 16ch;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1;
}
.about-hero h1 em { font-style: italic; }

/* Inline Tendara wordmark used inside running headlines/labels —
   keeps the unique custom T glyph everywhere the brand name appears. */
.word-tendara {
  display: inline-block;
  height: 0.78em;
  width: auto;
  vertical-align: baseline;
  transform: translateY(0.04em);
  margin: 0 0.04em;
}
.word-tendara--sm { height: 0.95em; transform: translateY(0.18em); }
.cta-band .word-tendara { filter: brightness(0) invert(1) brightness(1.06) sepia(0.04); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.about-grid p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0 0 28px;
}
.about-grid p strong { color: var(--navy); font-weight: 500; }
.about-grid .index-col h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.55;
  margin: 0 0 22px;
}
.about-grid .index-col dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.about-grid .index-col .row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.about-grid .index-col .row dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--navy);
  opacity: 0.6;
  margin: 0;
  padding-top: 4px;
}
.about-grid .index-col .row dd {
  margin: 0;
  color: var(--navy);
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ---------- Contact page ---------- */
.contact-hero {
  padding-top: 220px;
  padding-bottom: 60px;
}
.contact-hero h1 {
  font-size: var(--fs-display);
  margin: 0;
  max-width: 14ch;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 0.98;
}
.contact-hero h1 em { font-style: italic; }
.contact-hero .lead {
  margin-top: 36px;
  font-size: var(--fs-lead);
  max-width: 50ch;
  opacity: 0.78;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-bottom: var(--section-pad);
}

.contact-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-cta .display {
  font-size: var(--fs-h2);
  margin: 0 0 24px;
  max-width: 14ch;
}
.contact-cta p {
  font-size: var(--fs-lead);
  line-height: 1.45;
  max-width: 36ch;
  opacity: 0.78;
  color: var(--charcoal);
  margin: 0;
}

.contact-side h3 {
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  color: var(--navy);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.contact-row .item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.contact-row .item dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--navy);
  opacity: 0.55;
}
.contact-row .item dd {
  margin: 0;
  font-size: 16px;
  color: var(--navy);
}
.contact-row .item a {
  color: var(--navy);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.contact-row .item a:hover { color: var(--oxblood); border-color: var(--oxblood); }

/* ---------- Hero T mark backdrop ---------- */
.hero-t {
  position: absolute;
  right: clamp(-80px, -6vw, -40px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(240px, 36vw, 560px);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.hero > .wrap { position: relative; z-index: 1; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  :root {
    --section-pad: clamp(72px, 14vw, 120px);
  }
  .nav-links { display: none; }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 36px 0;
  }
  .stat:last-child { border-bottom: 0; }
  .section-header {
    grid-template-columns: 1fr;
  }
  .work-item {
    grid-template-columns: 40px 1fr;
  }
  .work-item .meta-right {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 64px;
    margin-top: 4px;
  }
  .deliverable {
    grid-template-columns: 1fr;
  }
  .deliverable-list li {
    grid-template-columns: 36px 1fr;
  }
  .deliverable-list li .pages { display: none; }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .about-grid, .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero h1 { max-width: none; }
  .cta-band .row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .nav-cta { padding: 9px 14px; font-size: 12px; }
  .brand img { height: 22px; }
  .work-item .meta-right { padding-left: 52px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .reveal-word > span { transform: none !important; }
  .reveal-line { opacity: 1 !important; transform: none !important; }
  .divider.scroll-rule { transform: scaleX(1) !important; }
}