:root {
  --paper: #F5F2E9;
  --paper-deep: #EFEADD;
  --charcoal: #2A2A26;
  --charcoal-soft: #3A3A34;
  --ink: #23231F;
  --body: #4A4A44;
  --muted: #5B5B54;
  --faint: #6B6B62;
  --line: #DED8C9;
  --line-dark: #C6BFAC;
  --gold: #8A5A0F;
  --gold-light: #E8BE72;
  --dark-copy: #DAD5C7;
  --dark-muted: #ADA492;
  --mono: "IBM Plex Mono", monospace;
  --sans: "Work Sans", sans-serif;
  --serif: "Newsreader", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
h1 { max-width: 17ch; font-size: clamp(2.45rem, 4.65vw, 3.125rem); line-height: 1.14; color: var(--charcoal); }
h2 { max-width: 34ch; font-size: 2.125rem; line-height: 1.22; }
h3 { font-family: var(--serif); font-size: 1.4375rem; font-weight: 500; color: var(--charcoal); }
p { font-size: 1rem; line-height: 1.7; text-wrap: pretty; }
.shell { width: min(100% - 80px, 1080px); margin: 0 auto; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-lg { gap: 24px; }
.eyebrow { font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.gold { color: var(--gold); }
.muted-gold { color: #B8AE96; }
.bordered-section { border-bottom: 1px solid var(--line); }

.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(10px); }
.header-inner { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 0; }
.wordmark, .footer-wordmark { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; text-decoration: none; }
.wordmark { color: var(--charcoal); font-size: 1.3125rem; }
.nav-list { display: flex; flex-wrap: wrap; gap: 26px; margin: 0; padding: 0; list-style: none; }
.nav-list a { color: var(--muted); font-size: .875rem; text-decoration: none; transition: color .16s ease; }
.nav-list a:hover, .nav-list a[aria-current="location"] { color: var(--gold); }

.hero { padding: 84px 0 92px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 64px; align-items: start; }
.intro { max-width: 50ch; color: var(--body); font-size: 1.0625rem; line-height: 1.6; }
.hero-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 6px; }
.button { display: inline-block; padding: 15px 26px; background: var(--charcoal); color: var(--paper); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.button:hover { background: var(--charcoal-soft); transform: translateY(-1px); }
.email-link { text-decoration: none; transition: color .16s ease; }
.email-link:hover { color: var(--gold); }
.hero-email { color: var(--charcoal); border-bottom: 1px solid var(--line-dark); font-family: var(--mono); font-size: .8125rem; line-height: 1.6; }
.contact-note { max-width: 26ch; color: var(--faint); font-size: .84375rem; line-height: 1.5; }
.portrait-placeholder { display: flex; flex-direction: column; gap: 10px; }
.portrait-box { display: flex; aspect-ratio: 4 / 5; align-items: flex-end; padding: 14px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, #EAE5D8 0 7px, #F0ECE1 7px 14px); }
.portrait-box span, .portrait-placeholder figcaption { font-family: var(--mono); font-size: .65625rem; line-height: 1.5; }
.portrait-box span { color: #8C8C83; }
.portrait-placeholder figcaption { color: #9A9A90; }

.dark-section { background: var(--charcoal); color: var(--dark-copy); }
.dark-section h2 { color: white; }
.problem { padding: 84px 0; }
.split-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.problem .stack { gap: 24px; }
.problem h2 { line-height: 1.28; }
.problem p { max-width: 58ch; font-size: 1.0625rem; }
.problem .secondary-copy { max-width: 56ch; color: var(--dark-muted); font-size: 1rem; }

.how, .fit { padding: 84px 0; }
.section-heading { max-width: 52ch; margin-bottom: 52px; }
.section-heading > p:last-child { color: #55554E; font-size: 1.03125rem; line-height: 1.6; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line-dark); list-style: none; }
.steps li { display: flex; min-width: 0; flex-direction: column; gap: 12px; padding: 26px 22px 30px; border-right: 1px solid var(--line); }
.steps li:first-child { padding-left: 0; }
.steps li:last-child { padding-right: 0; border-right: 0; }
.steps p { color: #55554E; font-size: .90625rem; line-height: 1.6; }
.step-number { color: var(--gold); font-family: var(--mono); font-size: .6875rem; }

.fit { background: var(--paper-deep); }
.fit .section-heading { margin-bottom: 48px; }
.fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.fit-card { padding: 32px 34px; border: 1px solid #DCD5C4; background: var(--paper); gap: 20px; }
.fit-card h3 { font-family: var(--sans); font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fit-card p { color: #3E3E38; font-size: .96875rem; line-height: 1.6; }
.list-copy { gap: 16px; }
.muted-card h3 { color: #8C8C83; }
.muted-card p { color: var(--muted); }
strong { font-weight: 600; }

.proof { padding: 66px 0; }
.proof-copy { max-width: 56ch; gap: 18px; }
.proof-statement { max-width: 44ch; color: var(--charcoal); font-family: var(--serif); font-size: 1.6875rem; line-height: 1.4; }
.proof-copy > p:last-child { color: var(--muted); font-size: .9375rem; line-height: 1.65; }

.offer { padding: 88px 0; }
.offer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; align-items: start; }
.offer h2 { font-size: clamp(2.25rem, 3.15vw, 2.375rem); line-height: 1.2; }
.offer-grid > div > p:last-child { max-width: 52ch; font-size: 1.03125rem; }
.offer-card { padding: 32px 34px; background: var(--charcoal-soft); gap: 18px; }
.offer-card p:first-child { color: #EFEBE0; font-size: .96875rem; line-height: 1.6; }
.offer-email { padding-bottom: 6px; border-bottom: 1px solid #7A7160; color: var(--gold-light); font-family: var(--mono); font-size: .9375rem; }
.offer-email:hover { color: white; }
.offer-card .contact-note { max-width: none; color: var(--dark-muted); }

.site-footer { background: var(--paper-deep); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 44px 0 56px; }
.footer-about { max-width: 46ch; gap: 8px; }
.footer-wordmark { color: var(--charcoal); font-size: 1.125rem; }
.footer-about p { color: var(--faint); font-size: .84375rem; line-height: 1.6; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; color: #7A7A70; font-family: var(--mono); font-size: .78125rem; font-style: normal; }
.footer-contact .email-link { color: var(--charcoal); }

@media (max-width: 900px) {
  .hero { padding: 64px 0 72px; }
  .hero-grid, .split-grid, .offer-grid { grid-template-columns: 1fr; gap: 42px; }
  .portrait-placeholder { max-width: 430px; }
  .problem, .how, .fit { padding: 64px 0; }
  .offer { padding: 68px 0; }
  .section-heading { margin-bottom: 40px; }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li:first-child, .steps li:last-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps li:last-child { border-bottom: 0; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 112px; }
  .shell { width: min(100% - 40px, 1080px); }
  h2 { font-size: 2rem; }
  .header-inner { align-items: flex-start; flex-direction: column; gap: 14px; padding: 16px 0; }
  .nav-list { gap: 12px 20px; }
  .hero { padding-top: 48px; }
  .hero-contact { align-items: flex-start; flex-direction: column; gap: 12px; }
  .contact-note { max-width: 34ch; }
  .fit-grid { grid-template-columns: 1fr; gap: 18px; }
  .fit-card, .offer-card { padding: 26px 24px; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 28px; padding: 36px 0 42px; }
}

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