/* ===== Aklara — legacy page alignment =====
   Loaded AFTER aklara.css on every page that still uses the older building blocks
   (About, Practice, Frameworks, Books, essays, etc.). It re-skins the shared blocks
   (hero, section heads, CTA band, buttons, labels) so those pages match the new
   home/work/blog look. Content and structure of those pages are untouched. */

:root{
  --mono:'Inter',system-ui,-apple-system,sans-serif;   /* one type system: no monospace labels */
  --lg-gap:clamp(3.25rem,5.5vw,5rem);
}

.grain,.aurora,.deco{display:none!important}
body{font-size:1.0625rem;line-height:1.7}

/* ---- nav: same refined header as home ---- */
header.nav .nav-inner{justify-content:flex-start;gap:1.6rem;height:66px}
header.nav.scrolled .nav-inner{height:58px}
header.nav .nav-links{margin-right:auto}
header.nav .nav-cta{margin-left:auto}
header.nav.scrolled{background:rgba(243,241,234,.9);border-bottom:1px solid var(--line)}
header.nav .brand .bt span{display:none}
header.nav .brand .mark{width:32px;height:32px;border-radius:9px;font-size:1rem}
header.nav .brand .bt b{font-size:1.05rem}
.nav-trigger{font-size:.88rem;font-weight:500;padding:.45rem .65rem;border-radius:8px}
.nav-trigger:hover,.nav-group.open .nav-trigger{background:rgba(23,34,43,.05)}
header.nav .nav-cta .btn-primary{border-radius:10px;padding:.55rem 1.05rem;font-size:.86rem;font-weight:600;box-shadow:none;transform:none}
header.nav .nav-cta .btn-primary .arr{display:none}
header.nav .nav-cta .btn-primary:hover{transform:none}

/* ---- buttons: small, soft-square ---- */
.btn{border-radius:11px;padding:.8rem 1.35rem;font-size:.93rem;font-weight:600;gap:.5rem}
.btn:hover{transform:none}
.btn-primary,.btn-primary:hover{box-shadow:none}

/* ---- page hero ---- */
.phero{padding:clamp(7.2rem,10vw,8.6rem) 0 2rem}
.phero h1{font-weight:380;font-size:clamp(2.3rem,4.4vw,3.6rem);line-height:1.1;letter-spacing:-.018em;font-variation-settings:"opsz" 72;margin:.9rem 0 1.2rem;max-width:22ch}
.phero p{font-size:1.07rem;color:var(--muted);max-width:56ch}
.pills{margin-bottom:1.1rem}
.pill{font-size:.72rem;letter-spacing:.1em}

/* ---- emphasis: a clean brass underline instead of italics ---- */
.serif-em{font-style:normal;color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.22em;text-decoration-skip-ink:none}
.cta .serif-em,.showcase .serif-em{color:inherit}

/* ---- sections: one rhythm ---- */
.sec{padding:var(--lg-gap) 0}
.sec-head{margin-bottom:2.2rem}
.sec-head h2,.cta h2{font-weight:380;letter-spacing:-.016em;font-variation-settings:"opsz" 72}
.sec-head h2{font-size:clamp(1.9rem,3.5vw,2.7rem);margin:.9rem 0 .9rem}
.sec-head p{font-size:1.05rem}
.eyebrow,.snum{font-size:.74rem;letter-spacing:.15em}

/* ---- closing CTA band: same blue-teal dark as the home page ---- */
.cta{padding:var(--lg-gap) 0;background:linear-gradient(165deg,#132b3c,#1a3f54);color:#b6c4cb}
.cta h2{color:#f1f5f7;font-size:clamp(1.9rem,3.5vw,2.7rem)}
.cta p{color:#b6c4cb}
.cta .eyebrow{color:#8da1ab}
.cta .eyebrow::before{background:#8da1ab}
.cta .btn-ghost{color:#f1f5f7;border-color:#4a6a70}
.cta .btn-ghost:hover{border-color:#f1f5f7;background:transparent}

/* ---- cards and lists: calmer ---- */
.faq-item h3{font-weight:420}
.drill{border-radius:20px}

@media (max-width:880px){
  header.nav .nav-inner{height:60px}
  .phero{padding-top:6.4rem}
}


/* ===== review fixes ===== */
.btn-primary,header.nav .nav-cta .btn-primary{background:#8f6629}
.btn-primary:hover,header.nav .nav-cta .btn-primary:hover{background:#7a561f}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fw-dark,.fw-panel-dark,.b-illus,.showcase{background:linear-gradient(165deg,#132b3c,#1a3f54)}
.fw-panel-ink,.ws-sec{background:#132b3c}
footer a,.foot-mail{display:inline-block;padding:.5rem 0}
.foot-col a{display:block}
.dbtn{min-height:44px;display:inline-flex;align-items:center}
.reveal>h2+p,.sec-head h2+p{margin-top:.7em}
.phero ~ .sec .reveal>p{margin-bottom:1.05em}
.drill{background:#fff;border:1px solid var(--line);box-shadow:none}
.btn:focus-visible,.nav-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bc-cat,.dt,.fh-num,.fw-label,.group-label,.cap,.ti,.foot-col h5,.post-tag,.pill{font-size:max(.75rem,12px)}
.menu-btn{width:44px;height:44px;align-items:center;justify-content:center}

/* booking page: rotating testimonials (same behaviour as the home page) */
.b-qcar .bq-slides{display:grid}
.b-qcar .bq-slide{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.b-qcar .bq-slide.on{opacity:1;visibility:visible;transition-delay:.22s}
.bq-ctrl{display:flex;align-items:center;gap:.9rem;margin-top:1rem}
.bq-dots{display:flex}
.bq-dots button{width:24px;height:24px;border:0;background:none;padding:0;position:relative;cursor:pointer}
.bq-dots button::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:99px;background:#cfcabb;transition:width .3s,margin .3s,background .3s}
.bq-dots button.on{width:34px}
.bq-dots button.on::before{width:22px;margin-left:-11px;background:var(--ink)}
.bq-pp{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:.65rem;cursor:pointer;display:grid;place-items:center}
.bq-pp:hover{border-color:var(--ink)}
.bq-dots button:focus-visible,.bq-pp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.b-qcar .bq-slide,.b-qcar .bq-slide.on{transition:none;transition-delay:0s}}

/* intellectual lineage: five equal items on one level, Compassionate Systems highlighted */
.lineage.lineage-eq{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;align-items:stretch}
.lineage-eq .li{display:flex;flex-direction:column;gap:.45rem;padding:1.15rem 1.1rem 1.25rem;background:#fff;border:1px solid var(--line);border-radius:16px}
.lineage-eq .li b{margin:0}
.lineage-eq .li span{font-size:.95rem;line-height:1.5;color:var(--muted)}
.lineage-eq .li em{font-style:normal;font-size:.82rem;line-height:1.45;margin-top:auto;padding-top:.6rem;color:#b6c4cb}
.lineage-eq .li.hl{background:linear-gradient(165deg,#132b3c,#1a3f54);border-color:transparent;box-shadow:0 18px 40px -26px rgba(19,43,60,.7)}
.lineage-eq .li.hl b{color:#d8b97e}
.lineage-eq .li.hl span{color:#f1f5f7}
@media (max-width:900px){.lineage.lineage-eq{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.lineage.lineage-eq{grid-template-columns:1fr}}

/* book cards: "Who it's for" reads as part of the card, left-aligned */
.drill .cred-line{text-align:left;max-width:none}

/* accordion rows are cards: give their content real inner padding and a little air between them */
.drill{margin-bottom:.8rem;overflow:hidden}
.drill-head{padding:1.45rem 1.7rem}
.drill-head:hover{padding-left:2rem}
.db-inner{padding:.2rem 1.7rem 1.9rem}
.db-inner.single{max-width:none}
@media (max-width:880px){
  .drill-head{padding:1.15rem 1.15rem;gap:1rem}
  .drill-head:hover{padding-left:1.15rem}
  .db-inner{padding:.2rem 1.15rem 1.5rem}
}


/* ===== audit fixes: headings, dark bands, footer, forms, mobile ===== */
/* headings always breathe and wrap evenly */
.sec h2,.cta h2{line-height:1.18;text-wrap:balance}
.phero ~ .sec .reveal>h2{margin-bottom:.9rem}
.phero ~ .sec .reveal>.eyebrow+h2,.reveal>.eyebrow+h2{margin-top:.9rem}
.sec .group-label,.sec-head .group-label{display:block;margin-bottom:.7rem}
.sec .reveal>.eyebrow{display:inline-flex;margin-bottom:.1rem}
.faq-item h3{line-height:1.22;margin-bottom:.4rem;text-wrap:balance}
.lenses h3{margin-bottom:.4rem}

/* dark bands: labels and highlighted words must be readable (was dark blue on dark blue) */
.fw-dark .fw-label,.fw-panel-dark .fw-label,.fw-panel-ink .fw-label,.b-illus .fw-label,.ws-sec .fw-label,.fh-num{color:#d8b97e}
.fw-dark .serif-em,.fw-panel-dark .serif-em,.fw-panel-ink .serif-em,.ws-sec .serif-em,.b-illus .serif-em{color:#8fb8d4;text-decoration-color:#d8b97e}
.fw-panel-dark+.fw-panel-dark,.fw-panel-dark+.fw-dark,.fw-dark+.fw-panel-dark,.fw-dark+.fw-dark{border-top:1px solid rgba(255,255,255,.09)}

/* contact accordions: keep a comfortable reading line length */
.db-inner.single .db-detail{max-width:64ch}

/* footer links: real tap size, tidy underline */
footer .foot-col a{padding:.5rem 0}
.foot-mail{padding:.5rem 0 2px}

/* frameworks lineage: no empty slot at tablet widths */
@media (max-width:900px) and (min-width:641px){.lineage-eq .li.hl{grid-column:span 2}}

/* booking: summary box and banner on small screens */
.summary-box{overflow-wrap:anywhere}
.for-banner{padding:14px 18px}
.skiplink{padding:.6rem .5rem}
@media (max-width:480px){.summary-box{font-size:.7rem;padding:18px}}

/* one gutter on phones */
@media (max-width:640px){.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}}

/* inline links: easier to tap on phones */
@media (max-width:700px){.sec p a,.faq-item p a{display:inline-block;padding:.3em 0}}

/* inside dark bands the "accent-2" colour (a dark blue for light pages) must be a light blue */
.fw-dark,.fw-panel-dark,.fw-panel-ink,.b-illus,.ws-sec,.showcase,.cta{--accent-2:#8fb8d4}
.fw-panel-dark .fw-label,.fw-dark .fw-label,.fw-panel-ink .fw-label{color:#d8b97e!important}
.fw-panel-dark .fw-text-col h2 .serif-em{color:#8fb8d4}
.fh-num,.fw-panel-dark .fh-num,.fw-dark .fh-num,.fw-panel-ink .fh-num{color:#d8b97e!important}