
/* JOAT homepage restructure v1 — guided chapters without turning the homepage into a click-through maze. */
#overview, #services, #how-it-works, #examples, #selected-work, #network, #questions, #members-only, #client-notes, #lets-connect {
  scroll-margin-top: calc(var(--header-h) + 62px);
}
.hero-dark-copy .actions { display:flex; flex-wrap:wrap; gap:10px; }
.chapter-heading { max-width: 930px; margin-bottom: 44px; }
.chapter-heading .section-title { max-width: 900px; }
.chapter-heading .lede { max-width: 790px; }

.joat-pathways { background: var(--paper); }
.pathway-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.pathway-card { min-height:310px; padding:34px 28px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-start; }
.pathway-card > span, .how-card > span { color:var(--wine); font-size:10px; font-weight:800; letter-spacing:.18em; }
.pathway-card h3, .how-card h3 { margin:46px 0 14px; font-family:var(--serif); font-size:clamp(28px,2.8vw,40px); line-height:1.02; font-weight:500; }
.pathway-card p, .how-card p { margin:0 0 24px; color:rgba(33,26,24,.66); line-height:1.7; }
.pathway-card .text-link { margin-top:auto; border:0; background:transparent; padding:0; color:var(--wine); font:inherit; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; cursor:pointer; text-decoration:none; }

.how-joat-works { background:#1b1412; color:var(--paper); }
.how-joat-works .kicker { color:#d8b2aa; }
.how-joat-works .lede { color:rgba(255,247,238,.7); }
.how-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid rgba(255,247,238,.18); border-left:1px solid rgba(255,247,238,.18); }
.how-card { min-height:330px; padding:34px 28px; border-right:1px solid rgba(255,247,238,.18); border-bottom:1px solid rgba(255,247,238,.18); }
.how-card > span { color:#d8b2aa; }
.how-card p { color:rgba(255,247,238,.68); }
.how-actions { margin-top:34px; }
.how-joat-works .button.ghost { color:var(--paper); border-color:rgba(255,247,238,.35); }

.chapter-next { margin-top:48px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.chapter-next span { color:rgba(33,26,24,.45); font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.chapter-next a { color:var(--wine); font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; text-decoration:none; }
.chapter-next a b { display:inline-block; margin-left:8px; font-size:16px; }
.chapter-next-inset { margin-top:28px; }
.how-joat-works .chapter-next { border-top-color:rgba(255,247,238,.18); }
.how-joat-works .chapter-next span { color:rgba(255,247,238,.45); }
.how-joat-works .chapter-next a { color:#ead4cb; }

.handoff-chips { width:min(1180px,calc(100% - 48px)); margin:0 auto 34px; display:flex; gap:8px; flex-wrap:wrap; }
.handoff-chips span { padding:11px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.32); font-size:10px; font-weight:750; letter-spacing:.04em; }

.invisible-mini { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:30px 0; background:rgba(255,247,238,.22); border:1px solid rgba(255,247,238,.22); }
.invisible-mini > div { padding:18px; background:rgba(24,18,17,.42); display:flex; gap:12px; align-items:flex-start; }
.invisible-mini span { color:#d8b2aa; font-size:9px; font-weight:800; letter-spacing:.14em; }
.invisible-mini strong { color:var(--paper); font-size:12px; line-height:1.4; }

.network-definition { padding:18px 0 6px; font-size:16px; line-height:1.7; }

.joat-questions { background:#efe4d6; }
.questions-layout { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:72px; align-items:start; }
.questions-intro { position:sticky; top:calc(var(--header-h) + 74px); }
.questions-list { border-top:1px solid rgba(70,39,34,.18); }
.questions-list details { border-bottom:1px solid rgba(70,39,34,.18); }
.questions-list summary { list-style:none; cursor:pointer; padding:22px 44px 22px 0; font-family:var(--serif); font-size:clamp(23px,2.2vw,34px); line-height:1.15; position:relative; }
.questions-list summary::-webkit-details-marker { display:none; }
.questions-list summary::after { content:'+'; position:absolute; right:4px; top:18px; font-family:var(--sans); font-size:24px; font-weight:400; }
.questions-list details[open] summary::after { content:'−'; }
.questions-list details p { max-width:760px; margin:0; padding:0 44px 24px 0; color:rgba(33,26,24,.67); line-height:1.72; }

@media (max-width: 980px) {
  .pathway-grid, .how-grid { grid-template-columns:1fr 1fr; }
  .questions-layout { grid-template-columns:1fr; gap:32px; }
  .questions-intro { position:static; }
}
@media (max-width: 680px) {
  .hero-dark-copy .actions { display:grid; grid-template-columns:1fr; }
  .pathway-grid, .how-grid { grid-template-columns:1fr; }
  .pathway-card, .how-card { min-height:0; padding:26px 22px; }
  .pathway-card h3, .how-card h3 { margin-top:28px; }
  .chapter-next { align-items:flex-start; }
  .chapter-next a { text-align:right; line-height:1.5; }
  .handoff-chips { width:calc(100% - 32px); }
  .handoff-chips span { font-size:9px; }
  .invisible-mini { grid-template-columns:1fr; }
  .questions-list summary { font-size:25px; padding-right:36px; }
}
