:root{
  --ink:#17120E; --ink-soft:#221B15; --paper:#FBF6EE; --paper-2:#F4EADC;
  --amber:#F0A429; --amber-bright:#FFC24B; --amber-deep:#9C6210; --coral:#EC5F45;
  --dusk:#3A2C63; --dusk-deep:#241B3A;
  --muted-on-paper:#6B5B49; --muted-on-ink:rgba(251,246,238,.72);
  --line-on-paper:rgba(23,18,14,.12); --line-on-ink:rgba(251,246,238,.14);
  --paper-veil:rgba(251,246,238,.92); --ink-veil:rgba(23,18,14,.5);
  --sky:linear-gradient(165deg,#241B3A 0%,#4A2E63 26%,#9A4358 48%,#EC5F45 66%,#F0A429 82%,#F6CE86 100%);
  --font-display:"Fraunces",Georgia,serif; --font-body:"Inter",system-ui,sans-serif;
  --step--1:clamp(.83rem,.79rem + .2vw,.95rem); --step-0:clamp(1rem,.95rem + .25vw,1.13rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem); --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(2rem,1.6rem + 2vw,3.2rem); --step-4:clamp(2.6rem,1.9rem + 3.4vw,4.6rem);
  --container:1180px; --section-y:clamp(4.5rem,3.5rem + 5vw,8rem);
  --radius:18px; --radius-sm:12px; --shadow:0 24px 60px -28px rgba(23,18,14,.35); --ease:cubic-bezier(.22,.61,.36,1);
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  scroll-behavior:auto;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
}

body {
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}

@media(prefers-reduced-motion:reduce){
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}

a {
  text-decoration:none;
  color:inherit;
}

p {
  margin-block:1rem;
}

h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.2;
  margin-block:.75em 1em;
}

h1 {
  font-size:var(--step-4);
  letter-spacing:-.02em;
}

h2 {
  font-size:var(--step-3);
  letter-spacing:-.015em;
}

.container {
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1rem,2.5vw,2.5rem);
}

.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  color:var(--paper);
  padding-block:1.25rem;
  transition:background-color .3s,color .3s;
}

.site-header>.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.site-header.is-scrolled {
  background:var(--paper-veil);
  backdrop-filter:blur(8px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line-on-paper);
}

.site-nav {
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}

.site-nav a {
  color:inherit;
  font-weight:600;
  text-decoration:none;
  transition:color .3s ease;
}

.site-nav a:hover {
  color:var(--amber);
}

.btn {
  display:inline-block;
  padding:.75rem 1.5rem;
  border-radius:var(--radius-sm);
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition:all .3s ease;
  border:none;
  font-size:var(--step--1);
  line-height:1.2;
  position:relative;
  overflow:hidden;
}

.btn:focus-visible {
  outline-offset:.25rem;
  outline:2px solid var(--amber-deep);
}

.btn:hover {
  transform:translateY(-1px) scale(1.02);
  box-shadow:var(--shadow);
  text-decoration:none;
}

.btn--primary {
  background:var(--ink);
  color:var(--paper);
}

.btn--ghost {
  background:transparent;
  border:1px solid currentColor;
  color:currentColor;
}

.hero {
  min-height:92vh;
  display:grid;
  align-content:center;
  position:relative;
  overflow:hidden;
  background:var(--dusk-deep);
}

.hero::after {
  content:'';
  position:absolute;
  inset:-25%;
  background:var(--sky);
  background-size:150% 150%;
  animation:sky-breathe 30s ease-in-out infinite alternate;
  z-index:0;
}

@keyframes sky-breathe {
  0% {transform:scale(1.05);}
  100% {transform:scale(1.2);}
}

.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,var(--ink-veil) 0%,transparent 60%);
  z-index:1;
}

.hero .container {
  position:relative;
  z-index:2;
}

.hero-content {
  max-width:70ch;
  margin-block-end:2rem;
}

.hero-actions {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-block-start:1.5rem;
}

.hero-proof {
  font-size:var(--step--1);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  margin-block-start:2rem;
  opacity:.8;
}

.eyebrow {
  font-size:var(--step--1);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  margin-block-end:.5rem;
}

.why .eyebrow,
.work .eyebrow,
.partners .eyebrow {
  color:var(--amber-deep);
}

.pillars-section {
  background:var(--paper);
  padding-block:var(--section-y);
}

.pillars {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem;
  margin-block-start:2rem;
}

.pillar {
  padding:1.5rem;
  border-radius:var(--radius);
  background:var(--paper-2);
  border:1px solid var(--line-on-paper);
  transition:transform .3s ease,box-shadow .3s ease;
}

.pillar:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.work {
  background:var(--paper-2);
  padding-block:var(--section-y);
}

.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
  margin-block-start:2rem;
}

.card {
  padding:1.5rem;
  border-radius:var(--radius);
  background:var(--paper);
  border:1px solid var(--line-on-paper);
  transition:transform .3s ease,box-shadow .3s ease;
}

.card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.card__index {
  font-size:var(--step-2);
  font-weight:600;
  color:var(--amber);
  margin-block-end:.5rem;
}

.approach {
  background:var(--ink);
  color:var(--paper);
  padding-block:var(--section-y);
}

.approach h2 {
  color:var(--paper);
}

.approach .intro {
  font-size:var(--step-1);
  margin-block-start:0;
  margin-block-end:1.5rem;
}

.steps {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
  margin-block-start:2rem;
}

.step {
  padding:1.5rem;
  border-radius:var(--radius);
  background:var(--ink-soft);
  border:1px solid var(--line-on-ink);
}

.step p:first-child {
  font-size:var(--step-1);
  color:var(--amber);
  margin-block-end:.5rem;
}

.proof {
  background:var(--dusk-deep);
  color:var(--paper);
  padding-block:var(--section-y);
}

.stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2rem;
  margin-block-end:2rem;
}

.stat {
  text-align:center;
}

.number {
  font-size:var(--step-3);
  font-weight:600;
  margin-block-end:.5rem;
}

.stat-note {
  font-size:var(--step--1);
  opacity:.7;
  margin-block-end:1rem;
}

.caption {
  text-align:center;
  font-size:var(--step--1);
  opacity:.8;
}

.partners {
  background:var(--paper);
  padding-block:var(--section-y);
}

.partners h2 {
  color:var(--ink);
}

.panels {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
  margin-block-start:2rem;
}

.panel {
  padding:1.5rem;
  border-radius:var(--radius);
  background:var(--paper-2);
  border:1px solid var(--line-on-paper);
}

.panel h3 {
  color:var(--ink);
  margin-block-end:.75rem;
}

.panel ul {
  list-style:none;
  padding-left:0;
  margin-block-start:1.5rem;
}

.panel li {
  position:relative;
  padding-left:1.25rem;
  margin-block-end:.5rem;
}

.panel li::before {
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:var(--amber);
}

.cta {
  background:var(--sky);
  color:var(--paper);
  padding-block:var(--section-y);
  position:relative;
  overflow:hidden;
}

.cta::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,var(--ink-veil) 0%,transparent 60%);
  z-index:0;
}

.cta h2 {
  color:var(--paper);
  margin-block-end:1rem;
}

.cta p {
  max-width:50ch;
  margin-block-end:2rem;
}

.site-footer {
  background:var(--ink);
  color:var(--paper);
  padding-block:3rem 1.5rem;
}

.footer-brand {
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-block-end:1.5rem;
}

.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
}

.footer-hairline {
  height:1px;
  background:var(--line-on-ink);
  margin-block:1.5rem;
}

.copyright {
  text-align:center;
  font-size:var(--step--1);
  opacity:.7;
  margin-block-start:1rem;
}

[data-reveal] {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}

html.js [data-reveal].is-in {
  opacity:1;
  transform:none;
}

section[id] {
  scroll-margin-top:5.5rem;
}

@media(max-width:719.98px) {
  .site-nav {
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-wrap:wrap;
  }

  .site-nav a:not(.btn--primary) {
    display:none;
  }

  .hero-content {
    text-align:center;
  }

  .hero-actions {
    justify-content:center;
  }

  .pillars {
    grid-template-columns:1fr;
  }

  .cards {
    grid-template-columns:1fr;
  }

  .steps {
    grid-template-columns:1fr;
  }

  .stats {
    grid-template-columns:1fr 1fr;
  }

  .panels {
    grid-template-columns:1fr;
  }

  .footer-nav {
    flex-direction:column;
    gap:.75rem;
    align-items:flex-start;
  }
}

/* --- review fixes (Opus) --- */
.mark{width:2rem;height:2rem;flex:0 0 auto}
.hero{color:var(--paper);padding-block:7rem 3rem}
.hero .eyebrow{color:var(--amber-bright)}
.hero h1,.hero .lede{color:var(--paper)}
.hero .btn--ghost{color:var(--paper)}
.hero-proof{color:var(--muted-on-ink)}
.site-header > .container > a{display:flex;align-items:center;gap:.6rem}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:var(--step-1)}

/* --- impeccable polish pass (Opus) --- */
:root{ --ease-expo:cubic-bezier(.16,1,.3,1); }
/* Differentiate the "why" pillars from the capability cards: editorial top-rule, no card chrome */
#why .pillars{ gap:clamp(1.5rem,3vw,2.75rem); }
.pillar{ background:transparent; border:0; border-top:2px solid var(--amber-deep); border-radius:0;
  padding:1.25rem 0 0; box-shadow:none; }
.pillar:hover{ transform:none; box-shadow:none; }
.pillar h3{ font-size:var(--step-1); margin-bottom:.5rem; }
.pillar p{ color:var(--muted-on-paper); }
/* Capability cards: amber display index, refined depth + expo hover */
.card{ transition:transform .5s var(--ease-expo), box-shadow .5s var(--ease-expo); }
.card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(23,18,14,.4); }
.card__index{ font-family:var(--font-display); font-weight:600; font-size:var(--step-3);
  line-height:1; color:var(--amber-deep); margin-bottom:1rem; display:block; }
.card h3{ font-size:var(--step-1); }
/* Proof band: amber display figures, tighter label, feels intentional not templated */
.stat__number{ font-family:var(--font-display); font-weight:600; color:var(--amber-bright);
  font-size:clamp(2.4rem,1.8rem + 2.4vw,3.4rem); line-height:1; letter-spacing:-.02em; }
.stat__label{ text-transform:uppercase; letter-spacing:.1em; font-size:var(--step--1); }
.proof .caption{ font-family:var(--font-display); font-size:var(--step-1); color:var(--paper); font-style:italic; opacity:.9; }
/* Buttons + links: expo easing */
.btn{ transition:transform .4s var(--ease-expo), box-shadow .4s var(--ease-expo), background-color .3s; }
/* Panels: subtle depth + expo hover */
.panel{ transition:transform .5s var(--ease-expo), box-shadow .5s var(--ease-expo); }
.panel:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(23,18,14,.35); }
/* Section headers breathe a touch more */
.work h2, #why h2, #partners h2, .approach h2{ margin-bottom:clamp(2.5rem,4vw,3.5rem); }