:root,[data-theme='light']{
  --color-bg: #ffffff;
  --color-surface: #fafafa;
  --color-surface-2: #f4f4f2;
  --color-text: #0a0a0a;
  --color-text-muted: #6b6b6b;
  --color-text-faint: #b4b4b4;
  --color-text-inverse: #ffffff;
  --color-border: #e5e5e5;
  --color-divider: #ececec;
  --color-rule: #0a0a0a;
  --color-accent: #b8842f;

  --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-3xl: clamp(2.75rem, 1.6rem + 4.5vw, 5rem);
  --text-hero: clamp(3rem, 1rem + 8vw, 8.5rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;
  --space-32:8rem; --space-40:10rem;

  --transition-interactive: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1240px;

  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body: 'Satoshi', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

[data-theme='dark']{
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-2: #161616;
  --color-text: #f4f4f2;
  --color-text-muted: #8a8a8a;
  --color-text-faint: #4a4a4a;
  --color-text-inverse: #0a0a0a;
  --color-border: #262626;
  --color-divider: #1c1c1c;
  --color-rule: #f4f4f2;
  --color-accent: #d9a558;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --color-bg: #0a0a0a;
    --color-surface: #111111;
    --color-surface-2: #161616;
    --color-text: #f4f4f2;
    --color-text-muted: #8a8a8a;
    --color-text-faint: #4a4a4a;
    --color-text-inverse: #0a0a0a;
    --color-border: #262626;
    --color-divider: #1c1c1c;
    --color-rule: #f4f4f2;
    --color-accent: #d9a558;
  }
}

/* Amber accent — applied inline on each italic display phrase below.
   Header, nav, footer, meta/eyebrow text remain neutral grey. */

/* ============ LAYOUT ============ */
.wrap{
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-10));
}

section{
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
  border-top: 1px solid var(--color-border);
}
section:first-of-type{ border-top: none; }

.eyebrow{
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  font-weight: 500;
}

.rule{
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin: 0;
}

/* ============ HEADER ============ */
header.site{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
header.site.scrolled{
  border-bottom-color: var(--color-border);
}
header.site .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.brand svg{ width: 22px; height: 22px; color: var(--color-text); }
.brand .name{ display: inline-flex; align-items: baseline; gap: 0; }
.brand .dot{ opacity: 0.35; margin-inline: 1px; }

nav.primary{ display: flex; align-items: center; gap: var(--space-8); }
nav.primary a{
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 450;
  letter-spacing: 0.01em;
}
nav.primary a:hover{ color: var(--color-text); }

.header-cta{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-text);
}
.header-cta:hover{ opacity: 0.6; }

.menu-toggle{
  display: none;
  color: var(--color-text);
  padding: var(--space-2);
}
.menu-toggle svg{ width: 22px; height: 22px; }

@media (max-width: 820px){
  nav.primary{ display: none; }
  .header-cta{ display: none; }
  .menu-toggle{ display: inline-flex; }
  nav.primary.open{
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) 0;
  }
  nav.primary.open a{
    padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-10));
    border-bottom: 1px solid var(--color-divider);
  }
  nav.primary.open a:last-child{ border-bottom: none; }
}

/* ============ HERO ============ */
.hero{
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(var(--space-24), 18vh, var(--space-40));
  padding-bottom: clamp(var(--space-12), 8vw, var(--space-20));
  border-top: none;
}
.hero .wrap{ display: grid; gap: var(--space-16); }
.hero-meta{
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}
@media (max-width: 900px){
  .hero-meta{ flex-wrap: nowrap; gap: var(--space-4); justify-content: space-between; }
  .hero-meta-brand{ display: none; }
  .hero-meta span{ letter-spacing: 0.14em; }
}
.hero-meta span{ display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-meta .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-text); display: inline-block;
}
.hero h1{
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 14ch;
}
.hero h1 em{
  font-style: italic;
  color: var(--color-accent);
}
.hero-footer{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-10);
  align-items: end;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.hero-lede{
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-text);
  max-width: 44ch;
  font-weight: 400;
}
.hero-actions{
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
@media (max-width: 640px){
  .hero-footer{ grid-template-columns: 1fr; }
  .hero-actions{ flex-wrap: wrap; gap: var(--space-6); }
}

/* ============ BUTTONS / LINKS ============ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--color-text);
  color: var(--color-text-inverse);
  background: var(--color-text);
  border-radius: 0;
}
.btn:hover{ background: transparent; color: var(--color-text); }
.btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
}
.btn-ghost:hover{ letter-spacing: 0.04em; }
.btn .arrow, .btn-ghost .arrow{
  transition: transform var(--transition-interactive);
}
.btn:hover .arrow, .btn-ghost:hover .arrow{
  transform: translateX(4px);
}

/* ============ TWO-COL SECTION HEADERS ============ */
.section-head{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
  align-items: baseline;
}
.section-head h2{
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.section-head h2 em{ font-style: italic; color: var(--color-accent); }
.section-head .col-label{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.section-head .col-label .num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
@media (max-width: 820px){
  .section-head{ grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ============ PHILOSOPHY (essay) ============ */
.essay{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  align-items: start;
}
.essay .aside{
  position: sticky;
  top: calc(var(--space-16) + var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.essay .body p{
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  line-height: 1.35;
  font-weight: 400;
  color: var(--color-text);
  max-width: 32ch;
  margin-bottom: var(--space-8);
}
.essay .body p:last-child{ margin-bottom: 0; }
.essay .body p em{ color: var(--color-accent); font-style: italic; }
.essay .body p.small{
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 62ch;
}
@media (max-width: 820px){
  .essay{ grid-template-columns: 1fr; }
  .essay .aside{ position: static; }
}

/* ============ PRACTICE / SERVICES GRID ============ */
.practice-list{
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border);
}
.practice-item{
  display: grid;
  grid-template-columns: 80px 1.2fr 2fr auto;
  gap: var(--space-8);
  align-items: baseline;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  cursor: default;
  transition: padding-inline var(--transition-interactive), background var(--transition-interactive);
}
.practice-item:hover{
  padding-inline: var(--space-4);
  background: var(--color-surface);
}
.practice-item .num{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}
.practice-item h3{
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 1.1;
}
.practice-item p{
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.5;
  max-width: 52ch;
}
.practice-item .tag{
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-faint);
  white-space: nowrap;
}
@media (max-width: 820px){
  .practice-item{
    grid-template-columns: auto 1fr;
    grid-template-areas: "num title" "num desc" ". tag";
    gap: var(--space-2) var(--space-6);
  }
  .practice-item .num{ grid-area: num; }
  .practice-item h3{ grid-area: title; }
  .practice-item p{ grid-area: desc; }
  .practice-item .tag{ grid-area: tag; padding-top: var(--space-3); }
}

/* ============ APPROACH ============ */
.approach-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-block: 1px solid var(--color-border);
}
.approach-step{
  padding: var(--space-8) var(--space-6);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 320px;
}
.approach-step:last-child{ border-right: none; }
.approach-step .step-num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-text);
}
.approach-step .step-eyebrow{
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin-top: auto;
}
.approach-step h3{
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.approach-step p{
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
@media (max-width: 900px){
  .approach-grid{ grid-template-columns: repeat(2, 1fr); }
  .approach-step:nth-child(2){ border-right: none; }
  .approach-step:nth-child(-n+2){ border-bottom: 1px solid var(--color-border); }
  .approach-step{ min-height: auto; }
}
@media (max-width: 560px){
  .approach-grid{ grid-template-columns: 1fr; }
  .approach-step{ border-right: none !important; border-bottom: 1px solid var(--color-border); }
  .approach-step:last-child{ border-bottom: none; }
}

/* ============ FOR WHOM ============ */
.for-whom{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.for-card{
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  margin-left: -1px;
  margin-top: -1px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 280px;
}
.for-card .label{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
.for-card h3{
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.for-card p{
  color: var(--color-text-muted);
  margin-top: auto;
  max-width: 42ch;
  line-height: 1.55;
}
@media (max-width: 820px){
  .for-whom{ grid-template-columns: 1fr; }
  .for-card{ padding: var(--space-8); min-height: auto; }
}

/* ============ PRINCIPLES / CREDO ============ */
.principles{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.principle{
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-12);
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
  align-items: baseline;
}
.principle:last-child{ border-bottom: 1px solid var(--color-border); }
.principle .k{
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}
.principle .v{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  line-height: 1.2;
  font-weight: 400;
  max-width: 32ch;
  letter-spacing: -0.01em;
}
.principle .v em{ font-style: italic; color: var(--color-accent); }
@media (max-width: 720px){
  .principle{ grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ============ CTA / CONTACT ============ */
.cta{
  padding-block: clamp(var(--space-24), 15vw, var(--space-40));
  text-align: left;
}
.cta .wrap{ display: grid; gap: var(--space-12); }
.cta h2{
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 400;
  max-width: 18ch;
}
.cta h2 em{ font-style: italic; color: var(--color-accent); }
.cta-meta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}
.cta-meta .cell .k{
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: block;
}
.cta-meta .cell .v{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text);
}
.cta-meta .cell a{ color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.cta-meta .cell a:hover{ border-bottom-color: var(--color-text); }
@media (max-width: 720px){
  .cta-meta{ grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ============ FOOTER ============ */
footer.site{
  padding-block: var(--space-10) var(--space-6);
  border-top: 1px solid var(--color-border);
}
footer.site .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
footer.site .foot-brand{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
}
footer.site .foot-brand svg{ width: 18px; height: 18px; color: var(--color-text); }
footer.site .foot-meta{
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}
footer.site .foot-tag{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}
@media (max-width: 640px){
  footer.site .foot-tag{ display: none; }
}
footer.site .foot-links{
  display: flex;
  gap: var(--space-6);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
footer.site .foot-links a{
  color: var(--color-text-muted);
  text-decoration: none;
}
footer.site .foot-links a:hover{ color: var(--color-text); }

/* ============ THEME TOGGLE ============ */
.theme-toggle{
  color: var(--color-text-muted);
  padding: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover{ color: var(--color-text); }
.theme-toggle svg{ width: 18px; height: 18px; }

/* ============ REVEAL ============ */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
}

/* ============ RUNNING TICKER ROW ============ */
.marker-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.marker-row span{ display: inline-flex; align-items: center; gap: var(--space-3); }
.marker-row .live-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-text);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity: 1; }
  50%{ opacity: 0.3; }
}