:root {
  --ink: #1d1d1b;
  --cream: #f7f2e8;
  --paper: #fffdf8;
  --gold: #f6b83f;
  --brick: #9f4432;
  --sage: #66705a;
  --line: rgba(29, 29, 27, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Manrope", sans-serif; font-size: 16px; line-height: 1.65; }
a { color: inherit; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; background: var(--gold); padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid var(--line); background: rgba(255,253,248,.94); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink); background: var(--gold); border-radius: 50% 50% 50% 12%; font-family: "Fraunces", serif; font-size: 1.2rem; }
nav { display: flex; align-items: center; gap: 2rem; }
nav a { text-decoration: none; font-size: .9rem; font-weight: 600; }
nav a:hover, nav a:focus { text-decoration: underline; text-underline-offset: .35rem; }
.nav-cta { border: 1px solid var(--ink); padding: .65rem 1rem; }
.menu-toggle { display: none; }

.hero { min-height: calc(100vh - 86px); display: grid; grid-template-columns: minmax(0,1.35fr) minmax(360px,.65fr); align-items: stretch; }
.hero-copy { padding: clamp(4rem, 10vw, 9rem) clamp(1.25rem, 7vw, 7rem); background: var(--cream); }
.eyebrow { margin: 0 0 1.2rem; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; }
h1,h2,h3 { font-family: "Fraunces", serif; letter-spacing: -.035em; line-height: 1.02; }
h1 { max-width: 950px; margin: 0; font-size: clamp(3.2rem, 7vw, 7.3rem); font-weight: 600; }
h1 em { color: var(--brick); font-weight: 500; }
.hero-lede { max-width: 710px; margin: 2rem 0 0; font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
.hero-actions { display: flex; align-items: center; gap: 1.8rem; margin-top: 2.5rem; flex-wrap: wrap; }
.button { display: inline-block; padding: .95rem 1.3rem; text-decoration: none; font-weight: 700; border: 2px solid var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.button:hover, .button:focus { transform: translate(-3px,-3px); box-shadow: 5px 5px 0 var(--ink); }
.primary { background: var(--gold); }
.text-link { font-weight: 700; text-underline-offset: .35rem; }
.hero-portrait { position: relative; overflow: hidden; min-height: 650px; background: var(--brick); display: flex; align-items: flex-end; justify-content: center; padding: 3rem 2rem 0; }
.hero-portrait img { position: relative; z-index: 2; display: block; width: min(100%,480px); aspect-ratio: 1/1.08; object-fit: cover; object-position: center top; border-radius: 48% 48% 0 0; }
.portrait-shape { position: absolute; border-radius: 50%; }
.portrait-shape-one { width: 390px; height: 390px; right: -130px; top: -80px; background: var(--gold); }
.portrait-shape-two { width: 250px; height: 250px; left: -90px; bottom: 100px; background: #f79576; }
.portrait-caption { position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 4; padding: .9rem 1rem; background: var(--paper); transform: rotate(-2deg); box-shadow: 7px 7px 0 var(--ink); }
.portrait-caption strong,.portrait-caption span { display: block; }
.portrait-caption span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.portrait-badge { position: absolute; right: 1.3rem; top: 2rem; z-index: 4; width: 128px; height: 128px; border-radius: 50%; background: var(--ink); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(7deg); border: 3px solid var(--paper); }
.portrait-badge strong { color: var(--gold); font-family: "Fraunces", serif; font-size: 2.2rem; line-height: 1; }
.portrait-badge span { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.metric-ribbon { display: grid; grid-template-columns: repeat(5,1fr); background: var(--ink); color: white; }
.metric-ribbon div { min-height: 150px; padding: 1.7rem; border-right: 1px solid rgba(255,255,255,.2); display: flex; flex-direction: column; justify-content: center; }
.metric-ribbon strong { color: var(--gold); font-family: "Fraunces", serif; font-size: clamp(2rem,4vw,3.8rem); line-height: 1; }
.metric-ribbon span { margin-top: .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }

.thesis { display: grid; grid-template-columns: .6fr 1.4fr; gap: 4rem; padding: clamp(4rem,8vw,8rem) clamp(1.25rem,7vw,7rem); background: var(--gold); }
.thesis p { max-width: 300px; margin: 0; font-weight: 700; }
.thesis h2 { margin: 0; max-width: 900px; font-size: clamp(2.3rem,5vw,5rem); }
.section { padding: clamp(5rem,10vw,9rem) clamp(1.25rem,7vw,7rem); }
.section-heading { display: grid; grid-template-columns: .6fr 1.4fr; gap: 4rem; margin-bottom: 4rem; }
.section-heading h2 { margin: 0; font-size: clamp(2.6rem,5vw,5rem); }
.service-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-grid article { min-height: 360px; padding: clamp(1.5rem,4vw,3.5rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-number { color: var(--brick); font-weight: 700; }
.service-grid h3 { margin: 2.3rem 0 1.2rem; font-size: clamp(1.8rem,3vw,3rem); }
.service-output { margin-top: 2rem; color: var(--sage); font-size: .85rem; font-weight: 700; }
.approach { padding: clamp(4rem,8vw,7rem) clamp(1.25rem,7vw,7rem); background: #d7e1d1; }
.approach-heading { display: grid; grid-template-columns: .6fr 1.4fr; gap: 4rem; margin-bottom: 3rem; }
.approach-heading h2 { max-width: 850px; margin: 0; font-size: clamp(2.5rem,4.7vw,4.8rem); }
.approach-heading > div > p { max-width: 720px; margin: 1.25rem 0 0; font-size: 1.05rem; }
.approach-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(29,29,27,.28); border-left: 1px solid rgba(29,29,27,.28); }
.approach-grid article { min-height: 255px; padding: clamp(1.25rem,2.5vw,2rem); border-right: 1px solid rgba(29,29,27,.28); border-bottom: 1px solid rgba(29,29,27,.28); }
.approach-grid span { color: var(--brick); font-family: "Fraunces", serif; font-size: 1.4rem; font-weight: 700; }
.approach-grid h3 { margin: 2rem 0 .85rem; font-size: clamp(1.35rem,2vw,2rem); }
.approach-grid p { margin: 0; font-size: .9rem; }
.impact { padding: clamp(5rem,10vw,9rem) clamp(1.25rem,7vw,7rem); background: var(--brick); color: white; }
.light .eyebrow { color: var(--gold); }
.case-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1px; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.25); }
.case { min-height: 430px; padding: clamp(1.5rem,3vw,3rem); background: var(--brick); display: flex; flex-direction: column; }
.case.featured { background: var(--gold); color: var(--ink); }
.case-tag { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 700; }
.case h3 { margin: 3rem 0 1.2rem; font-size: clamp(1.8rem,3vw,3rem); }
.case-metric { margin-top: auto; padding-top: 2rem; border-top: 1px solid currentColor; }
.case-metric strong { display: block; font-family: "Fraunces", serif; font-size: 3.5rem; line-height: 1; }
.case-metric span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.proof { padding: clamp(5rem,10vw,9rem) clamp(1.25rem,7vw,7rem); background: var(--paper); }
.proof-heading { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 4rem; margin-bottom: 3rem; }
.proof-heading h2 { max-width: 900px; margin: 0; font-size: clamp(2.6rem,5vw,5rem); }
.proof-heading > p { max-width: 520px; margin: 0; font-size: 1.05rem; }
.proof-ledger { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.proof-story { min-height: 490px; padding: clamp(1.5rem,3.5vw,3.25rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-story-primary { background: var(--ink); color: white; }
.proof-story-electoral { background: var(--gold); }
.proof-meta { margin: 0 0 clamp(3rem,7vw,6rem); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.proof-number { display: flex; align-items: end; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid currentColor; }
.proof-number strong { font-family: "Fraunces", serif; font-size: clamp(4rem,8vw,8rem); line-height: .8; }
.proof-number span { max-width: 110px; padding-bottom: .2rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.proof-story h3 { max-width: 620px; margin: 2rem 0 1rem; font-size: clamp(1.8rem,3vw,3.1rem); }
.proof-story > p:not(.proof-meta) { max-width: 680px; }
.proof-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 2.5rem 0 0; background: currentColor; border: 1px solid currentColor; }
.proof-stats div { padding: 1rem; background: var(--paper); color: var(--ink); }
.proof-story-primary .proof-stats div { background: var(--ink); color: white; }
.proof-stats dt { font-family: "Fraunces", serif; font-size: clamp(1.7rem,3vw,2.6rem); font-weight: 700; line-height: 1; }
.proof-stats dd { margin: .55rem 0 0; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.proof-story-compact { position: relative; min-height: 315px; background: var(--cream); }
.proof-story-compact .proof-meta { margin-bottom: 4rem; }
.proof-story-compact h3 { max-width: 520px; margin-top: 0; }
.proof-story-dark { background: var(--brick); color: white; }
.proof-index { position: absolute; top: 2rem; right: 2rem; font-family: "Fraunces", serif; font-size: 2.2rem; opacity: .45; }
.experience { display: grid; grid-template-columns: 1fr; background: #d7e1d1; }
.experience-photo { position: relative; overflow: hidden; background: var(--ink); }
.experience-photo img { display: block; width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; object-position: center; }
.experience-photo p { position: absolute; left: 1.5rem; bottom: 1.5rem; margin: 0; padding: .8rem 1rem; background: var(--gold); color: var(--ink); font-weight: 800; transform: rotate(-2deg); }
.experience-copy { padding: clamp(3rem,5vw,5rem) clamp(1.5rem,6vw,6rem); }
.experience-copy h2 { margin: 0 0 1.25rem; font-size: clamp(2.6rem,4.4vw,4.8rem); }
.field-note h2 { margin: 0 0 2rem; font-size: clamp(2.7rem,5vw,5.4rem); }
.experience-intro { display: grid; grid-template-columns: minmax(0,1fr) 280px; align-items: start; gap: clamp(2rem,4vw,4rem); }
.experience-heading > p:last-child { max-width: 780px; margin: 0; font-size: 1.08rem; }
.speaker-inset { margin: 0; padding: .8rem; background: var(--paper); border: 1px solid rgba(29,29,27,.22); transform: rotate(1.5deg); box-shadow: 8px 8px 0 rgba(29,29,27,.12); }
.speaker-inset img { display: block; width: 100%; max-width: 252px; height: auto; margin: 0 auto; }
.speaker-inset figcaption { padding: .85rem .25rem .2rem; }
.speaker-inset strong,.speaker-inset span { display: block; }
.speaker-inset strong { font-family: "Fraunces", serif; font-size: 1.2rem; }
.speaker-inset span { margin-top: .2rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.speaker-inset figcaption > a { display: inline-block; margin-top: .75rem; color: var(--brick); font-size: .78rem; font-weight: 800; text-underline-offset: .25rem; }
.speaker-inset figcaption > a span { display: inline; margin: 0; font-size: inherit; letter-spacing: normal; text-transform: none; }
.training-feature { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr); gap: clamp(1.5rem,3vw,3rem); margin: 1.75rem 0 1.5rem; padding: clamp(1rem,2vw,1.5rem); background: var(--ink); color: white; }
.training-photo { margin: 0; align-self: center; }
.training-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center; }
.training-photo figcaption { padding: .85rem .25rem 0; color: rgba(255,255,255,.72); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.training-story { padding: clamp(.5rem,2vw,1.5rem) clamp(.25rem,1.5vw,1rem) clamp(.5rem,2vw,1.5rem) 0; }
.training-story .eyebrow { color: var(--gold); }
.training-story h3 { margin: 0 0 1.2rem; color: var(--gold); font-size: clamp(2.3rem,4vw,4rem); }
.training-story > p:not(.eyebrow) { font-size: 1.05rem; }
.training-story ul { margin: 1.25rem 0 1.5rem; padding-left: 1.2rem; }
.training-story li { margin: 0 0 .85rem; }
.framework-sequence { display: grid; gap: 1px; margin-top: 1.5rem; background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.28); }
.framework-sequence div { padding: 1rem; background: var(--ink); }
.framework-sequence span { display: block; margin-bottom: .7rem; color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.framework-sequence strong { display: inline-block; margin: 0 .35rem .35rem 0; padding: .36rem .55rem; background: rgba(255,255,255,.09); font-size: .76rem; line-height: 1.2; }
.impact-summary { display: grid; grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr); align-items: stretch; gap: 1.5rem; margin: 1.5rem 0; }
.press-quote { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 1.5rem 1.5rem 1.5rem 2rem; background: rgba(255,253,248,.48); border-left-color: var(--brick); }
.press-quote p { font-size: clamp(1.35rem,2vw,1.9rem); }
.press-quote cite { color: rgba(29,29,27,.7); }
.win-grid { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border-top: 1px solid rgba(29,29,27,.3); border-left: 1px solid rgba(29,29,27,.3); }
.win-grid div { min-height: 115px; padding: 1rem; border-right: 1px solid rgba(29,29,27,.3); border-bottom: 1px solid rgba(29,29,27,.3); }
.win-grid strong { display: block; color: var(--brick); font-family: "Fraunces", serif; font-size: clamp(2rem,3.5vw,3.7rem); line-height: 1; }
.win-grid span { display: block; margin-top: .5rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.experience-note { font-size: .78rem; color: rgba(29,29,27,.68); }
.field-note { display: grid; grid-template-columns: 1fr 1fr; background: var(--gold); }
.field-note-copy { padding: clamp(4rem,8vw,8rem) clamp(1.5rem,7vw,7rem); }
.field-note img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.client-voice { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(2rem,7vw,7rem); padding: clamp(5rem,9vw,8rem) clamp(1.25rem,7vw,7rem); background: var(--ink); color: white; }
.client-voice-label { align-self: start; }
.client-voice .eyebrow { color: var(--gold); }
.client-voice-context { max-width: 230px; margin: 2rem 0 0; color: rgba(255,255,255,.66); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.client-voice blockquote { max-width: 980px; margin: 0; padding: 0 0 0 clamp(1.5rem,3vw,2.5rem); border-left-color: var(--gold); }
.client-voice blockquote p { font-size: clamp(1.65rem,3vw,3.2rem); line-height: 1.22; }
.client-voice cite { display: grid; gap: .15rem; margin-top: 2rem; }
.client-voice cite strong { color: var(--gold); font-size: 1rem; }
.client-voice cite span { color: rgba(255,255,255,.74); font-size: .78rem; }
.client-voice cite a { text-underline-offset: .25rem; }
.about { display: grid; grid-template-columns: .6fr 1.4fr; gap: 4rem; background: var(--cream); }
.about-label { align-self: start; }
.about-photo { margin: 2rem 0 0; padding: .75rem; background: var(--paper); border: 1px solid var(--line); transform: rotate(-1.25deg); box-shadow: 8px 8px 0 rgba(29,29,27,.1); }
.about-photo img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center; }
.about-photo figcaption { padding: .8rem .25rem .15rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.about-copy { max-width: 850px; }
.about h2 { margin: 0 0 2rem; font-size: clamp(2.6rem,5vw,5rem); }
.about-copy > p { font-size: 1.15rem; }
blockquote { margin: 3.5rem 0; padding: 1.5rem 0 1.5rem 2rem; border-left: 6px solid var(--gold); }
blockquote p { margin: 0; font-family: "Fraunces", serif; font-size: clamp(1.5rem,3vw,2.3rem); line-height: 1.25; }
blockquote cite { display: block; margin-top: 1rem; font-style: normal; font-size: .8rem; font-weight: 700; }
.dark { color: var(--brick); }
.intake { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,7vw,7rem); padding: clamp(5rem,10vw,9rem) clamp(1.25rem,7vw,7rem); background: var(--gold); }
.intake h2 { margin: 0; max-width: 700px; font-size: clamp(2.8rem,6vw,6rem); }
.intake-copy { align-self: end; max-width: 720px; }
.intake-copy > p:first-child { font-size: 1.2rem; }
.investment-note { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; margin: 1.6rem 0 0; padding: 1.25rem 0; border-top: 1px solid rgba(29,29,27,.35); border-bottom: 1px solid rgba(29,29,27,.35); }
.investment-note strong { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.investment-note span { font-size: .92rem; }
.intake-note { margin: 1.5rem 0 2rem; font-weight: 700; }
.intake .button { background: var(--paper); }
.intake-actions { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; }
.intake-actions .button { display: inline-flex; align-items: center; justify-content: center; }
.intake-actions .secondary { background: transparent; }
.contact { padding: clamp(5rem,11vw,10rem) clamp(1.25rem,12vw,12rem); text-align: center; background: var(--sage); color: white; }
.contact .eyebrow { color: var(--gold); }
.contact h2 { max-width: 1050px; margin: 0 auto; font-size: clamp(2.8rem,6vw,6rem); }
.contact > p:not(.eyebrow):not(.contact-note) { max-width: 650px; margin: 2rem auto; font-size: 1.15rem; }
.contact .button { color: var(--ink); margin-top: 1rem; }
.contact-note { margin: 2rem 0 0; font-size: .78rem; color: rgba(255,255,255,.72); }
footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem clamp(1.25rem,5vw,5rem); background: var(--ink); color: white; font-size: .78rem; }
.footer-brand { color: white; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 6rem; }
  .hero-portrait { min-height: 600px; }
  .metric-ribbon { grid-template-columns: repeat(2,1fr); }
  .thesis,.section-heading,.approach-heading,.about { grid-template-columns: 1fr; gap: 1.5rem; }
  .approach-grid { grid-template-columns: repeat(2,1fr); }
  .case-grid { grid-template-columns: 1fr; }
  .case { min-height: auto; }
  .proof-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .experience,.field-note,.client-voice,.intake { grid-template-columns: 1fr; }
  .experience-intro { grid-template-columns: 1fr; }
  .speaker-inset { width: min(100%,320px); }
  .training-feature { grid-template-columns: 1fr; }
  .training-story { padding: 1rem; }
  .impact-summary { grid-template-columns: 1fr; }
  .win-grid { grid-template-columns: repeat(3,1fr); }
  .experience-photo { min-height: 0; }
  .experience-photo img { height: auto; aspect-ratio: 2/1; object-fit: cover; }
}

@media (max-width: 680px) {
  .menu-toggle { display: block; border: 1px solid var(--ink); background: transparent; padding: .55rem .75rem; font: inherit; font-size: .85rem; font-weight: 700; }
  nav { display: none; position: absolute; top: 86px; left: 0; right: 0; padding: 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; }
  nav.open { display: flex; }
  .service-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .metric-ribbon { grid-template-columns: 1fr; }
  .metric-ribbon div { min-height: 110px; }
  .win-grid { grid-template-columns: repeat(2,1fr); }
  .proof-ledger { grid-template-columns: 1fr; }
  .proof-story { min-height: auto; }
  .proof-stats { grid-template-columns: 1fr; }
  .intake-actions { flex-direction: column; }
  .intake-actions .button { width: 100%; }
  .investment-note { grid-template-columns: 1fr; gap: .5rem; }
  .hero-portrait { min-height: 500px; }
  .proof-kicker,.proof-note { grid-column: auto; }
  footer { flex-direction: column; align-items: flex-start; }
  h1 { font-size: clamp(3rem,16vw,5rem); }
}

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