/* Homepage sections. Requires tokens.css + site.css. */

/* ===== Hero ===== */
.hero { padding: var(--space-96) 0 var(--space-120); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; right: -10%; top: 10%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--violet-glow), transparent 70%); pointer-events: none;
}
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; column-gap: var(--space-64); align-items: start; position: relative; }
.hero-copy { display: contents; }
.hero-top, h1.hero-h { grid-column: 1 / -1; }
.hero-top { margin-bottom: var(--space-24); }
.hero-top .eyebrow { margin-bottom: var(--space-16); display: flex; }
h1.hero-h {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(40px, 6.8vw, 98px); line-height: 1.06; letter-spacing: -0.04em;
  margin: 0 0 var(--space-48); text-wrap: wrap;
}
h1.hero-h em { color: var(--violet-bright); }
h1.hero-h br { display: none; }
.hero p.lede { font-size: 20px; color: var(--fg-muted); max-width: 540px; margin-bottom: var(--space-24); grid-column: 1; text-wrap: pretty; }
.hero .actions { grid-column: 1; display: flex; gap: var(--space-16); flex-wrap: wrap; align-items: center; margin-top: var(--space-8); }
.hero .orbit { grid-column: 2; grid-row: 3 / span 4; }
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .orbit { grid-column: 1; grid-row: auto; margin: var(--space-64) auto 0; }
}

/* Orbit */
.orbit { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 0.92; margin-left: auto; }
.orbit .ring { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--violet-bright) 28%, transparent); border-radius: 50%; }
.orbit .ring.r2 { inset: 14%; border-style: dashed; }
.orbit .ring.r3 { inset: 28%; border-color: color-mix(in srgb, var(--violet-bright) 40%, transparent); }
.orbit .core {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--violet-bright), var(--violet-deep));
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  color: var(--cream); font-family: var(--font-serif); font-size: clamp(28px, 4vw, 52px); font-style: normal; font-weight: 500;
}
.orbit::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--violet-glow), transparent); filter: blur(10px); z-index: -1;
}
.orbit .chip {
  position: absolute; left: var(--ax); top: var(--ay);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--cream); color: var(--ink); border: 0;
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  transition: left 1200ms var(--ease-in-out), top 1200ms var(--ease-in-out);
}
.orbit[data-state="b"] .chip { left: var(--bx); top: var(--by); }
.orbit .chip .s { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.orbit .chip.done .s { background: var(--success); }
.orbit .chip.prog .s { background: var(--warning); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.orbit .c1 { --ax: 4%;  --ay: 8%;  --bx: 46%; --by: 4%; }
.orbit .c2 { --ax: 46%; --ay: 4%;  --bx: 4%;  --by: 8%; }
.orbit .c3 { --ax: 56%; --ay: 46%; --bx: 2%;  --by: 46%; }
.orbit .c4 { --ax: 2%;  --ay: 46%; --bx: 56%; --by: 46%; }
.orbit .c5 { --ax: 2%;  --ay: 84%; --bx: 44%; --by: 90%; }
.orbit .c6 { --ax: 44%; --ay: 90%; --bx: 2%;  --by: 84%; }
@media (max-width: 480px) { .orbit .chip { font-size: 10.5px; padding: 6px 10px; } }

/* ===== Proof ===== */
.social-proof { padding: var(--space-96) 0; }
.social-proof .wrap { display: grid; grid-template-columns: 1fr; gap: var(--space-48); }
.proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-stats > div { padding: 0 var(--space-40); border-left: 1px solid var(--line); }
.proof-stats > div:first-child { padding-left: 0; border-left: 0; }
.proof-stats small { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-8); }
.proof-stats b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.03em; line-height: 1.1; }
.sp-left { display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); flex-wrap: wrap; padding-top: var(--space-32); border-top: 1px solid var(--line); }
.sp-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.sp-logos { display: flex; align-items: center; gap: var(--space-40); flex-wrap: wrap; }
.sp-logos img { height: 28px; width: auto; opacity: .7; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.sp-logos img:hover { opacity: 1; filter: none; }
.sp-logo-item { display: flex; align-items: center; gap: 8px; }
.sp-logo-item span { font-weight: 600; letter-spacing: -0.02em; font-size: 16px; }
.sp-divider, .sp-dots { display: none; }
.sp-testimonial { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
.sp-quote {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-12); align-content: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-16); padding: var(--space-32);
  opacity: 1; pointer-events: auto;
}
.sp-quote::before { content: "\201C"; grid-column: 1 / -1; font-family: var(--font-serif); font-size: 64px; line-height: .8; color: var(--violet); margin-bottom: var(--space-8); }
.sp-quote-body { display: contents; }
.sp-testimonial blockquote { grid-column: 1 / -1; font-family: var(--font-serif); font-size: 19px; line-height: 1.45; font-weight: 400; font-style: normal; letter-spacing: -0.01em; margin-bottom: var(--space-24); }
.sp-quote-avatar { grid-column: 1; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; align-self: center; }
.sp-testimonial cite { grid-column: 2; font-style: normal; font-size: 14px; color: var(--fg-muted); align-self: center; }
.sp-testimonial cite strong { color: var(--fg); font-weight: 500; }
.sp-quote:not(:has(.sp-quote-avatar)) cite { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .proof-stats { grid-template-columns: 1fr; gap: var(--space-24); }
  .proof-stats > div { padding: var(--space-24) 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .proof-stats > div:first-child { border-top: 0; padding-top: 0; }
  .sp-testimonial { grid-template-columns: 1fr; }
}

/* ===== Who we work with / Frameworks (shared fw cards) ===== */
.fw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.fw { padding: var(--space-32); display: flex; flex-direction: column; min-height: 240px; overflow: hidden; }
.fw .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-24); }
.fw .glyph { padding: 4px 10px; border-radius: 6px; background: var(--chip-bg); color: var(--chip-fg); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; }
.fw .stat { font-size: 13px; color: var(--fg-muted); }
.fw h3 { font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--space-12); }
.fw h3 em { font-style: normal; }
.fw p { color: var(--fg-muted); font-size: 14.5px; line-height: 1.55; margin-bottom: auto; }
.fw .scope { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-24); }
.fw .scope a:hover { text-decoration: underline; }
@media (max-width: 1000px) { .fw-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .fw-grid { grid-template-columns: 1fr; } }

/* ===== Where we come in ===== */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
.vs-col { padding: var(--space-40); }
.vs-col.us { background: color-mix(in srgb, var(--violet) 22%, transparent); border-color: color-mix(in srgb, var(--violet-bright) 55%, transparent); }
.vs-cap { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-24); }
.vs-col h3 { font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--space-32); }
.vs-col h3 em { font-style: italic; color: var(--accent); }
.vs-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-24); }
.vs-col li { display: flex; gap: var(--space-16); font-size: 15px; line-height: 1.55; color: var(--fg-muted); }
.vs-col li b { color: var(--fg); font-weight: 500; }
.vs-col li .mk { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; margin-top: 1px; background: var(--cream); color: var(--ink); }
.vs-col.them li .mk { background: transparent; color: var(--danger-tint); border: 1px solid var(--line-strong); }
.vs-col.them li span:last-child { position: relative; }
@media (max-width: 860px) { .vs-grid { grid-template-columns: 1fr; } .vs-col { padding: var(--space-32) var(--space-24); } }

/* ===== What we do ===== */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.work-item { padding: var(--space-32); }
.work-item .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--accent); margin-bottom: var(--space-24); }
.work-item h4 { font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--space-12); }
.work-item h4 em { font-style: normal; }
.work-item p { color: var(--fg-muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1000px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .work-grid { grid-template-columns: 1fr; } }

/* ===== How we work: timeline ===== */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); position: relative; }
.timeline::before { content: ""; position: absolute; top: 7px; left: 7px; right: 0; height: 2px; background: var(--violet); transform-origin: left; transition: transform 1.6s var(--ease); }
.step .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--cream); border: 2px solid var(--violet); position: relative; z-index: 2; margin: 0 0 var(--space-24); }
.step.cur .dot { background: var(--violet); box-shadow: 0 0 0 5px var(--violet-glow); }
.step .w { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-12); }
.step h4 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; margin-bottom: var(--space-8); }
.step p { color: var(--fg-muted); font-size: 14.5px; line-height: 1.6; padding-right: var(--space-16); }
@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; gap: var(--space-32); padding-left: 32px; }
  .timeline::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; transform-origin: top; }
  .step { position: relative; } .step .dot { position: absolute; left: -32px; top: 0; margin: 0; }
}

/* ===== Pricing ===== */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: stretch; }
.price-card { padding: var(--space-40) var(--space-32); display: flex; flex-direction: column; }
.price-card .tier { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-24); }
.price-card .tier .badge { background: var(--violet-tint); color: var(--violet-deep); padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: .04em; text-transform: none; }
.price-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--space-12); }
.price-card h3 em { font-style: normal; }
.price-card .who { color: var(--fg-muted); font-size: 14.5px; margin-bottom: var(--space-24); }
.price-card .price { margin-bottom: var(--space-24); font-size: 14px; }
.price-card .price .amt { color: var(--accent); font-weight: 500; }
.price-card .price .unit { color: var(--fg-muted); }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-32); }
.price-card li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.price-card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); }
.price-card .pcta { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; padding: 12px 22px; border-radius: var(--radius-pill); background: var(--ink); color: var(--cream); font-size: 14px; font-weight: 500; transition: transform .25s var(--ease); }
.price-card.featured { --fg: var(--cream); --fg-muted: color-mix(in srgb, var(--cream) 72%, transparent); --accent: var(--violet-bright);
  background: var(--aubergine); color: var(--cream); border-color: var(--violet); }
.price-card.featured .tier .badge { background: var(--cream); color: var(--violet-deep); }
.price-card.featured li::before { background: var(--violet-bright); }
.price-card.featured .pcta { background: var(--cream); color: var(--ink); }
.outcome-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin-top: var(--space-24); }
.outcome-strip > div { padding: var(--space-24) var(--space-32); }
.outcome-strip small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-8); }
.outcome-strip p { font-size: 15px; }
.outcome-strip p em { font-style: normal; color: var(--accent); }
@media (max-width: 1000px) { .pricing-grid, .outcome-strip { grid-template-columns: 1fr; } }

/* ===== Team ===== */
.founders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: start; }
.founder .body { padding: var(--space-32) var(--space-32) var(--space-40) !important; }
.founder .name { font-family: var(--font-serif); font-size: 22px; letter-spacing: -0.02em; margin-bottom: 2px; }
.founder .role { color: var(--fg-muted); font-size: 13.5px; margin-bottom: var(--space-16); }
.founder .creds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-16); }
.founder .bio { font-size: 14px; color: var(--fg-muted); line-height: 1.6; }
@media (max-width: 1000px) { .founders-grid { grid-template-columns: 1fr; } }

/* ===== Audit week ===== */
.warroom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); align-items: center; }
.warroom-grid h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -0.035em; margin-bottom: var(--space-24); text-wrap: balance; }
.warroom-grid h2 em { font-style: italic; color: var(--accent); }
.warroom-grid .label { margin-bottom: var(--space-24); }
.warroom-grid p.copy { color: var(--fg-muted); font-size: 17px; margin-bottom: var(--space-16); max-width: 520px; }
.warroom .seal { margin-top: var(--space-24); padding: var(--space-16) var(--space-24); border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--card-bg); font-size: 12px; }
.warroom .seal::before { display: none; }
.audit-mock { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-16); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.audit-mock .head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--fg-muted); padding-bottom: var(--space-12); }
.audit-mock .head .live { display: inline-flex; align-items: center; gap: 6px; background: var(--success); color: var(--ink); padding: 2px 10px; border-radius: var(--radius-pill); font-weight: 500; }
.audit-mock .row { display: block; padding: 14px 16px; border-radius: 12px; background: var(--aubergine); border: 1px solid var(--line); }
.audit-mock .row:has(.who.us) { background: var(--violet); border-color: var(--violet); }
.audit-mock .who { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; width: auto; }
.audit-mock .who.us { color: color-mix(in srgb, var(--cream) 80%, transparent); }
.audit-mock .msg { font-size: 14px; line-height: 1.5; color: var(--fg); }
.audit-mock .msg.muted { font-style: normal; color: var(--fg); }
@media (max-width: 980px) { .warroom-grid { grid-template-columns: 1fr; gap: var(--space-48); } }

/* ===== Book a session ===== */
section.final { text-align: left; }
section.final .seal { margin: 0 0 var(--space-24) !important; justify-content: flex-start !important; }
section.final h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -0.035em; max-width: 900px; margin-bottom: var(--space-24); text-wrap: balance; }
section.final h2 em { font-style: italic; color: var(--accent); }
section.final p { color: var(--fg-muted); font-size: 20px; max-width: 780px; margin: 0 0 var(--space-32); }
section.final .actions { display: flex; gap: var(--space-24); align-items: center; flex-wrap: wrap; }
section.final .cta.ghost { border: 0; padding: 0; color: var(--violet); background: none; }
section.final small.fineprint { display: block; margin-top: var(--space-32); font-size: 14px; color: var(--fg-muted); }

/* ===== Partners ===== */
.partners { padding: var(--space-64) 0; }
.partners .partners-row { display: flex; justify-content: center; align-items: center; gap: var(--space-48); flex-wrap: wrap; }
.partners .partners-row a { opacity: .75; transition: opacity .2s; }
.partners .partners-row a:hover { opacity: 1; }
.partners .partners-row img { height: 40px; display: block; }
.partners .partners-row a:first-child img { filter: grayscale(1); }
.partners .label { display: flex; justify-content: center; margin-bottom: var(--space-32); }

/* ===== Services / guides ===== */
.service-link-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); }
.svc-card { display: flex; flex-direction: column; padding: var(--space-32) var(--space-24); color: var(--fg); }
.svc-kind, .popular-guides-grid .pg-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); margin-bottom: var(--space-16); display: block; }
.svc-title { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--space-12); }
.svc-title em { font-style: normal; }
.svc-desc { font-size: 13.5px; color: var(--fg-muted); line-height: 1.6; }
.popular-guides-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); list-style: none; margin-top: 0; }
.popular-guides-grid a { display: block; height: 100%; padding: var(--space-24); background: var(--paper); }
.popular-guides-grid .pg-title { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.03em; }
.popular-guides-more { margin-top: var(--space-32); font-size: 14px; }
.popular-guides-more a { color: var(--fg-muted); }
.popular-guides-more a::after { content: " \2192"; color: var(--violet); }
.popular-guides-more a:hover { color: var(--violet); }
@media (max-width: 1100px) { .service-link-grid, .popular-guides-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .service-link-grid, .popular-guides-grid { grid-template-columns: 1fr; } }

/* ===== FAQ ===== */
.faq-section .faq-list { display: flex; flex-direction: column; gap: var(--space-12); max-width: 1000px; }

/* ===== Small shared bits ===== */
.hero-tag { font-size: 15px; color: var(--fg-muted); letter-spacing: .06em; text-transform: none; font-family: var(--font-mono); }
.hero-tag em { color: var(--violet-bright); font-style: italic; }
.warroom .label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.warroom .label::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.warroom .label .num { color: var(--accent); margin: 0; }
.warroom .label .tag { margin: 0; }
.partners .label .tag { color: var(--fg-muted); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.foot-legal { color: var(--fg-muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: var(--space-24); line-height: 1.6; }
.foot-legal a { text-decoration: underline; }
#audience .fw-grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { #audience .fw-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { #audience .fw-grid { grid-template-columns: 1fr; } }
.sp-testimonial blockquote { grid-row: 2; }
.sp-quote-avatar, .sp-testimonial cite { grid-row: 3; }
.orbit .c1 { --ax: 2%; --bx: 52%; }
.orbit .c2 { --ax: 52%; --bx: 2%; }
.orbit .c3 { --ax: 60%; --bx: 0%; }
.orbit .c4 { --ax: 0%; --bx: 60%; }
.orbit .c5 { --ax: 0%; --ay: 80%; --bx: 50%; --by: 90%; }
.orbit .c6 { --ax: 52%; --ay: 90%; --bx: 0%; --by: 80%; }
@media (max-width: 520px) {
  nav.top .cta { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
  nav.top .cta .dot { display: none; }
  .brand .name { font-size: 19px; white-space: nowrap; }
  .orbit .chip { font-size: 9.5px; padding: 5px 8px; gap: 5px; }
  .orbit .c3 { --ax: 50%; } .orbit .c4 { --bx: 50%; }
  .orbit .c5 { --bx: 38%; } .orbit .c2 { --ax: 44%; } .orbit .c1 { --bx: 44%; }
}