/* Modern Life Skills Academy — preview rebuild, v2 "Cinematic dark".
   Fonts: Fraunces (light + italic display serif), Inter (body/UI), Montserrat (caps eyebrow + buttons).
   Bands alternate near-black and cream (#efeae6); maroon #84231d is the one accent; every page closes on a full-bleed maroon band. */
:root {
  --maroon: #84231d;
  --maroon-ink: #651a15;
  --maroon-deep: #3a0f0c;
  --tint: #e9b4ac;
  --cream: #efeae6;
  --cream2: #e5ddd6;
  --ink: #0a0606;
  --ink2: #150b0a;
  --f-disp: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-head: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-ui: 'Montserrat', 'Inter', system-ui, sans-serif;
  --max: 1240px;
  --gut: clamp(20px, 4.2vw, 56px);
  --sec: clamp(72px, 10vw, 144px);
  --rad: 18px;
  --header-h: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--ink); }
body { margin: 0; background: var(--ink); color: #efeae6; font: 400 1rem/1.7 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sec--cream :focus-visible, .sec--cream2 :focus-visible { outline-color: var(--maroon); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--cream); color: var(--maroon-ink); padding: 12px 18px; font-weight: 700; border-radius: 999px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.wrap--prose { max-width: calc(820px + var(--gut) * 2); }
.center { text-align: center; margin-top: clamp(28px, 4vw, 48px); }
.icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------- band colour contexts ---------- */
.sec--dark, .sec--grad, .hero, .course-hero, .post-hero, .legal-hero, .site-header, .site-footer, .nav, .selector, .sec--maroon {
  --bg: var(--ink); --fg: #efeae6; --muted: rgba(239, 234, 230, .78); --line: rgba(239, 234, 230, .16); --line2: rgba(239, 234, 230, .32);
  --card: rgba(255, 255, 255, .045); --card2: rgba(255, 255, 255, .09); --acc: var(--tint); --link: #fff;
  --bp-bg: var(--cream); --bp-fg: var(--maroon-deep); --bp-hv: #fff; --bi-bg: var(--cream); --bi-fg: var(--maroon-deep); --bi-hv: #fff;
  --ghost: rgba(239, 234, 230, .6);
  color: var(--fg);
}
.sec--maroon { --bg: var(--maroon); --fg: #f8f1ec; --muted: rgba(248, 241, 236, .88); --line: rgba(255, 255, 255, .26); --line2: rgba(255, 255, 255, .4); --acc: #f6d3cc; }
.sec--cream, .sec--cream2 {
  --bg: var(--cream); --fg: #140d0c; --muted: #554a47; --line: rgba(20, 13, 12, .14); --line2: rgba(20, 13, 12, .3);
  --card: #f8f5f2; --card2: #fff; --acc: var(--maroon); --link: var(--maroon);
  --bp-bg: var(--maroon); --bp-fg: #fff; --bp-hv: var(--maroon-ink); --bi-bg: #140d0c; --bi-fg: var(--cream); --bi-hv: #000;
  --ghost: rgba(20, 13, 12, .55);
  color: var(--fg);
}
.sec--cream2 { --bg: var(--cream2); --card: #f1ebe6; }
.sec { position: relative; padding-block: var(--sec); background: var(--bg); color: var(--fg); }
.sec--tight { padding-block: clamp(44px, 6vw, 84px); }
.sec--grad {
  background:
    radial-gradient(70% 55% at 85% 108%, rgba(176, 48, 36, .55), transparent 70%),
    radial-gradient(50% 45% at 8% 0%, rgba(132, 35, 29, .22), transparent 70%),
    linear-gradient(180deg, #0a0606 0%, #170807 50%, #34100c 100%);
}

/* ---------- type ---------- */
.h1 { font: 300 clamp(2.75rem, 7.2vw, 7.5rem)/1.04 var(--f-disp); letter-spacing: -.012em; word-spacing: .04em; font-variation-settings: 'opsz' 144; }
.h2 { font: 300 clamp(2.05rem, 1rem + 3.5vw, 4rem)/1.07 var(--f-disp); letter-spacing: -.012em; word-spacing: .04em; font-variation-settings: 'opsz' 144; }
.h3 { font: 600 clamp(1.05rem, .96rem + .4vw, 1.28rem)/1.28 var(--f-head); letter-spacing: -.01em; }
.h4 { font: 600 1.05rem/1.3 var(--f-head); }
@media (min-width: 860px) { .h1 { font-weight: 260; } }
.h1 em, .h2 em { font-style: italic; font-weight: 300; color: #f3cfc8; }
.ln { display: block; overflow: hidden; padding: .08em 0 .16em; margin: -.08em 0 -.16em; }
.ln__in { display: block; animation: lnUp 1.15s var(--ease) both; animation-delay: calc(.12s + var(--i, 0) * .16s); }
@keyframes lnUp { from { transform: translateY(112%); } }
.lede { font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height: 1.65; color: var(--muted); max-width: 62ch; }
.lede--strong { color: var(--fg); font-weight: 500; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; font: 600 .72rem/1.3 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.eyebrow::before { content: ''; width: 36px; height: 1px; background: currentColor; flex: none; opacity: .8; }
.ruler { display: none; }

/* ---------- buttons (pills) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 15px 30px; border: 1.5px solid transparent; border-radius: 999px; font: 600 .76rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.btn:active { transform: scale(.97); }
.btn--solid { background: var(--bp-bg); color: var(--bp-fg); }
.btn--solid:hover { background: var(--bp-hv); color: var(--bp-fg); }
.btn--light { background: var(--bi-bg); color: var(--bi-fg); }
.btn--light:hover { background: var(--bi-hv); color: var(--bi-fg); }
.btn--ghost, .btn--outline-light { border-color: var(--ghost); color: var(--fg); background: transparent; }
.btn--ghost:hover, .btn--outline-light:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.sec--maroon .btn--ghost:hover { color: var(--maroon-ink); }
.btn--link { min-height: 44px; padding: 0; color: var(--link); justify-content: flex-start; letter-spacing: .12em; border-radius: 0; }
.btn--link:hover { color: var(--link); }
.btn--link::after, .course__cta::after { content: '\2192'; display: inline-block; transition: transform .25s var(--ease); }
.btn--link:hover::after, .course:hover .course__cta::after { transform: translateX(6px); }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: .7rem; }
.is-static { cursor: default; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---------- section headings ---------- */
.shead { display: grid; gap: 14px 64px; margin-bottom: clamp(36px, 5.5vw, 72px); }
.shead .eyebrow { grid-column: 1 / -1; margin-bottom: 4px; }
.shead__lede .lede { margin: 0 0 .7em; }
.shead--center { text-align: center; justify-items: center; }
@media (min-width: 900px) {
  .shead:not(.shead--stack):not(.shead--center) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; margin-bottom: calc(var(--header-h) * -1); background: linear-gradient(rgba(8, 4, 4, .72), rgba(8, 4, 4, 0)); border-bottom: 1px solid transparent; transition: background-color .35s, border-color .35s; }
.site-header.is-stuck { background: rgba(10, 6, 6, .9); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom-color: var(--line); }
html:not(.js) .site-header { background: var(--ink); }
.header__in { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 20px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand__img { height: 42px; width: auto; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: transparent; border: 1.5px solid rgba(239, 234, 230, .45); border-radius: 50%; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; background: #efeae6; position: relative; transition: transform .25s, opacity .2s; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--ink); padding: 12px var(--gut) 40px; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
.nav-open body { overflow: hidden; }
.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ink); }
.nav__list { list-style: none; display: flex; flex-direction: column; }
.nav__list a { display: flex; align-items: center; min-height: 58px; border-bottom: 1px solid var(--line); font: 300 1.7rem/1 var(--f-disp); color: #efeae6; text-decoration: none; }
.nav__list a[aria-current='page'] { color: var(--tint); font-style: italic; }
.nav__cta { display: flex; gap: 12px; margin-top: 28px; }
.nav__cta .btn { flex: 1; }
@media (min-width: 1180px) {
  .nav-toggle { display: none; }
  .nav { position: static; inset: auto; padding: 0; overflow: visible; background: transparent; opacity: 1; visibility: visible; transform: none; display: flex; align-items: center; gap: 22px; }
  .nav__list { flex-direction: row; gap: 2px; }
  .nav__list a { min-height: 44px; padding: 0 12px; border: 0; font: 600 .72rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; position: relative; color: rgba(239, 234, 230, .88); }
  .nav__list a:hover { color: #fff; }
  .nav__list a[aria-current='page'] { color: #fff; font-style: normal; }
  .nav__list a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: var(--tint); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
  .nav__list a:hover::after, .nav__list a[aria-current='page']::after { transform: scaleX(1); }
  .nav__cta { margin: 0; }
  .nav__cta .btn { flex: none; }
}
/* 2026-10-08 new logo is wider (5.6:1): keep it unsquashed at 1180-1359 by tightening the desktop nav, and move the burger breakpoint 1080 -> 1180 */
@media (min-width: 1180px) and (max-width: 1359px) {
  .brand { flex: none; }
  .brand__img { height: 34px; }
  .header__in { gap: 12px; }
  .nav { gap: 10px; }
  .nav__list a { white-space: nowrap; padding: 0 7px; letter-spacing: .08em; }
  .nav__list a::after { left: 7px; right: 7px; }
  .nav__cta { gap: 8px; }
}
@media (min-width: 1360px) { .brand { flex: none; } }
html:not(.js) .nav { position: static; opacity: 1; visibility: visible; transform: none; padding: 12px var(--gut) 24px; }
html:not(.js) .nav-toggle { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(460px, 64vh, 680px); padding: calc(var(--header-h) + 56px) 0 clamp(52px, 7vw, 92px); background: var(--ink); overflow: hidden; }
.hero--plain, .course-hero, .post-hero, .legal-hero {
  background:
    radial-gradient(55% 80% at 88% 20%, rgba(150, 40, 31, .5), transparent 70%),
    radial-gradient(45% 70% at 4% 100%, rgba(100, 24, 19, .45), transparent 70%),
    var(--ink);
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: #1a0807; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); filter: grayscale(1) brightness(.78) contrast(1.45); transform-origin: 70% 40%; animation: kenburns 32s ease-out both; }
.hero__media::before, .hero__media::after { content: ''; position: absolute; inset: 0; }
.hero__media::before { background: linear-gradient(115deg, #cf3b27 0%, #94261d 40%, #4d130f 74%, #1c0605 100%); mix-blend-mode: color; }
.hero__media::after { background: linear-gradient(115deg, #ff9a86 0%, #d4503d 45%, #9a2f24 100%); mix-blend-mode: multiply; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.13); } }
.hero__shade { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(90deg, rgba(8, 3, 3, .94) 0%, rgba(8, 3, 3, .78) 34%, rgba(8, 3, 3, .12) 66%, rgba(8, 3, 3, .62) 100%),
    linear-gradient(0deg, #0a0606 0%, rgba(10, 6, 6, 0) 42%),
    radial-gradient(50% 70% at 80% 30%, rgba(190, 60, 44, .28), transparent 72%); }
.hero__shade::after, .sec--grad::after, .closer::before { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
.hero--plain .hero__shade { background: none; }
.hero__wrap { position: relative; }
.hero__body { max-width: 1100px; }
.hero__body .h1 { margin-bottom: clamp(22px, 3vw, 36px); }
.hero__lede { max-width: 54ch; font-size: clamp(1.02rem, .96rem + .32vw, 1.22rem); color: rgba(239, 234, 230, .88); }
.hero__lede + .hero__lede { margin-top: -.3em; }
.hero__body > .eyebrow { animation: fadeUp .9s var(--ease) both; }
.hero__body > .hero__lede, .hero__body > .btn-row { animation: fadeUp 1s var(--ease) .55s both; }
.hero__body > .btn-row { animation-delay: .7s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }
.hero--home { min-height: max(640px, 100svh); align-items: center; padding-bottom: 190px; }
.hero--home .hero__body { max-width: 1180px; }
.hero--home .hero__lede { max-width: 50ch; }
@media (max-width: 859px) {
  .hero__shade { background: linear-gradient(0deg, #0a0606 4%, rgba(8, 3, 3, .86) 38%, rgba(8, 3, 3, .3) 74%, rgba(8, 3, 3, .55) 100%); }
  .hero { align-items: flex-end; }
  .hero--home { align-items: flex-end; padding-bottom: 150px; }
}
.hero--books .hero__wrap--split { display: grid; gap: 32px; align-items: center; }
.hero__figure { margin: 0; }
.hero__figure img { width: 100%; max-width: 520px; margin-inline: auto; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); border-radius: 8px; }
@media (min-width: 960px) { .hero--books .hero__wrap--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

/* ---------- overlap selector (home) ---------- */
.selector { --pull: 140px; position: relative; z-index: 5; margin-top: calc(var(--pull) * -1); padding-bottom: 56px; background: linear-gradient(transparent var(--pull), var(--cream) var(--pull)); }
.selector__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: linear-gradient(180deg, #1d0c0b, #100707); border: 1px solid rgba(239, 234, 230, .2); border-radius: 22px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); }
.selector__item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.selector__item:nth-child(2n) { border-right: 0; }
.selector__item:nth-last-child(-n+2) { border-bottom: 0; }
.sel { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 150px; padding: 22px 20px 54px; color: #efeae6; text-decoration: none; transition: background-color .3s; }
.sel:hover, .sel:focus-visible { background: var(--maroon); color: #fff; }
.sel__k { font: 600 .68rem/1.2 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--tint); }
.sel:hover .sel__k { color: #fff; }
.sel__t { font: 300 1.14rem/1.25 var(--f-disp); }
.sel__go { position: absolute; right: 20px; bottom: 18px; width: 34px; height: 34px; border: 1px solid rgba(239, 234, 230, .4); border-radius: 50%; transition: transform .3s var(--ease), background-color .3s; }
.sel__go::after { content: '\2192'; position: absolute; inset: 0; display: grid; place-items: center; font-size: .95rem; }
.sel:hover .sel__go { transform: translateX(4px); background: rgba(255, 255, 255, .15); }
@media (min-width: 900px) {
  .selector__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .selector__item { border-bottom: 0; border-right: 1px solid var(--line); }
  .selector__item:nth-child(2n) { border-right: 1px solid var(--line); }
  .selector__item:last-child { border-right: 0; }
  .sel { min-height: 176px; padding: 28px 28px 62px; gap: 12px; }
  .sel__t { font-size: 1.4rem; }
  .sel__go { right: 26px; bottom: 22px; }
}

/* ---------- sectors strip ---------- */
.sectors { padding-block: 0 clamp(48px, 6vw, 80px); }
.sectors__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 8px; padding-block: 34px; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line); }
.sectors__list li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font: 600 .66rem/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); overflow-wrap: anywhere; }
.sectors__list .icon { width: 30px; height: 30px; color: var(--maroon); }
@media (max-width: 479px) { .sectors__list li { font-size: .58rem; letter-spacing: .06em; } }
@media (min-width: 760px) { .sectors__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sectors__list li { font-size: .72rem; } }

/* ---------- 9 pillars wheel ---------- */
.sec--wheel { background: radial-gradient(60% 70% at 24% 62%, rgba(132, 35, 29, .3), transparent 72%), var(--ink); overflow: hidden; }
.wheel-wrap { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .wheel-wrap { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); } }
.wheel { margin: 0; }
.wheel svg { width: 100%; max-width: 660px; height: auto; margin-inline: auto; overflow: visible; }
.wheel__ring { fill: none; stroke: rgba(239, 234, 230, .3); stroke-width: 1; }
.wheel__ring--in { stroke: rgba(239, 234, 230, .16); }
.wheel__dot { fill: var(--tint); }
.seg { cursor: pointer; outline: none; }
.seg path { fill: rgba(239, 234, 230, .075); stroke: rgba(239, 234, 230, .42); stroke-width: 1; transition: fill .35s, stroke .35s; }
.seg__t { font: 600 16.5px/1 var(--f-head); fill: rgba(239, 234, 230, .88); pointer-events: none; transition: fill .3s; letter-spacing: -.01em; }
.seg:hover path { fill: rgba(132, 35, 29, .5); }
.seg.is-active path { fill: var(--maroon); stroke: var(--tint); filter: drop-shadow(0 0 22px rgba(205, 70, 52, .55)); }
.seg.is-active .seg__t { fill: #fff; }
.seg__n { font: 600 13px/1 var(--f-ui); letter-spacing: .16em; fill: var(--tint); pointer-events: none; transition: fill .3s; }
.seg.is-active .seg__n { fill: #fff; }
.seg:focus-visible path { stroke: #fff; stroke-width: 3; }
.wheel__hub { fill: var(--ink); stroke: rgba(239, 234, 230, .34); stroke-width: 1; }
.wheel__hubt { font: 300 31px var(--f-disp); fill: #efeae6; font-variation-settings: 'opsz' 144; letter-spacing: -.01em; }
@media (max-width: 700px) { .seg__t { font-size: 18.5px; } .wheel__hubt { font-size: 34px; } }
.pl-list { list-style: none; border-top: 1px solid var(--line2); }
.pl { position: relative; padding: 14px 0 14px 22px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pl::before { content: ''; position: absolute; left: 0; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--line2); transition: background-color .3s, transform .3s var(--ease); }
.pl.is-active::before { background: var(--tint); transform: scale(1.5); box-shadow: 0 0 14px rgba(233, 180, 172, .8); }
.pl__name { display: flex; align-items: baseline; gap: 14px; font: 300 clamp(1.3rem, 1rem + 1vw, 1.85rem)/1.2 var(--f-disp); color: rgba(239, 234, 230, .66); transition: color .3s; letter-spacing: -.01em; }
.pl.is-active .pl__name { color: #fff; font-style: italic; }
.pl__n { flex: none; min-width: 1.9em; font: 600 .72rem/1 var(--f-ui); font-style: normal; letter-spacing: .16em; color: var(--tint); }
.pl.is-active .pl__n { color: #fff; }
.pl__d { margin: 0; max-height: 0; opacity: 0; overflow: hidden; color: var(--muted); max-width: 46ch; transition: max-height .5s var(--ease), opacity .45s, margin .45s; }
.pl.is-active .pl__d { max-height: 16em; opacity: 1; margin-top: 8px; }
@media (max-width: 899px) { .pl__d { max-height: none; opacity: 1; margin-top: 6px; } .pl::before { top: 20px; } }
.wheel__cta { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line2); }
.wheel__cta .h3 { font: 300 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.15 var(--f-disp); }
.wheel__cta p { color: var(--muted); max-width: 46ch; margin: .6em 0 0; }
.wheel__cta .wheel__cta-k { font: italic 300 1.25rem/1.3 var(--f-disp); color: var(--tint); }
.wheel__cta .btn { margin-top: 22px; }

/* ---------- stats band ---------- */
.statband { padding-block: calc(var(--sec) * 1.05); overflow: hidden; border-top: 1px solid var(--line); }
.statband > .wrap { position: relative; z-index: 1; }
.statband__head { display: grid; gap: 18px 64px; margin-bottom: clamp(48px, 7vw, 96px); }
.statband__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.statband__lede .lede { margin: 0 0 .6em; }
@media (min-width: 900px) { .statband__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.stats { list-style: none; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line2); }
.stat { padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.stat__num { margin: 0 0 18px; font: 200 clamp(3.4rem, 15vw, 5.2rem)/.98 var(--f-disp); font-variation-settings: 'opsz' 144; letter-spacing: -.035em; color: #fff; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.stat__label { margin: 0; color: rgba(239, 234, 230, .88); max-width: 30ch; font-size: 1.02rem; }
.stat__src { margin: 16px 0 0; font: 600 .68rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--tint); }
@media (min-width: 760px) {
  .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--3 .stat { padding: 56px 28px 60px; border-bottom: 0; border-left: 1px solid var(--line2); }
  .stats--3 .stat:first-child { border-left: 0; padding-left: 0; }
  .stats--3 .stat__num { font-size: clamp(3rem, 6.3vw, 6.1rem); }
  .stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--2 .stat { padding: 52px 36px 56px; border-left: 1px solid var(--line2); }
  .stats--2 .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats--2 .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stats--2 .stat__num { font-size: clamp(3.4rem, 7vw, 6.6rem); }
}
.callout { display: flex; gap: 20px; align-items: flex-start; margin-top: clamp(36px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line2); border-radius: var(--rad); background: rgba(255, 255, 255, .04); }
.callout .stat__icon { color: var(--tint); }
.callout .stat__icon .icon { width: 30px; height: 30px; }
.callout .h3 { font: 300 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.15 var(--f-disp); }
.callout p { margin: .5em 0 0; color: rgba(239, 234, 230, .88); max-width: 62ch; }

/* ---------- cells (hairline matrix) ---------- */
.cells { --c: 4; list-style: none; display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); border-top: 1px solid var(--line2); border-left: 1px solid var(--line2); }
.cells--3 { --c: 3; }
.cells--5, .cells--five { --c: 5; }
.cell { position: relative; padding: clamp(24px, 2.8vw, 38px); border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); transition: background-color .3s; }
.cell::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--maroon); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.sec--dark .cell::before, .sec--grad .cell::before { background: var(--tint); }
.cell:hover { background: var(--card2); }
.cell:hover::before { transform: scaleX(1); }
.cell__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 20px; color: var(--acc); border: 1px solid var(--line2); border-radius: 50%; flex: none; }
.cell__icon .icon { width: 25px; height: 25px; }
.cell__label { font: 600 .7rem/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); margin-bottom: 10px; }
.cell__title { font: 600 clamp(1.08rem, 1rem + .4vw, 1.28rem)/1.25 var(--f-head); margin-bottom: 10px; letter-spacing: -.01em; }
.cell p { color: var(--muted); font-size: .95rem; margin: 0; }
.cells--lg .cell { padding: clamp(30px, 3.6vw, 52px); }
.cells--lg .cell__title { font: 300 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1.15 var(--f-disp); }
.cells--plain .cell { padding-block: clamp(28px, 3vw, 42px); }
.cells--plain .cell__title { font: 300 clamp(1.3rem, 1.05rem + .9vw, 1.8rem)/1.2 var(--f-disp); }
.cells--strip .cell { padding-block: 28px; }
.cells--strip .cell__icon { margin-bottom: 12px; }
@media (max-width: 1099px) {
  .cells--five { --c: 2; }
  .cells--five .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 999px) {
  .cells, .cells--3, .cells--features { --c: 2; }
  .cells > .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 619px) {
  .cells, .cells--3, .cells--five, .cells--features { --c: 1; }
}

/* ---------- panel ---------- */
.panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: clamp(36px, 5vw, 64px); padding: clamp(26px, 3.6vw, 48px); background: var(--card2); border: 1px solid var(--line2); border-radius: var(--rad); }
.panel__text { max-width: 62ch; }
.panel__text .h3 { font: 300 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.12 var(--f-disp); }
.panel__text p { color: var(--muted); margin: .5em 0 0; }
.panel__text p:first-of-type { color: var(--fg); font-weight: 500; margin-top: .8em; }

/* ---------- course + blog cards ---------- */
.course-grid, .post-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 620px) { .course-grid, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .course-grid, .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }
.course, .post { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2); border-radius: var(--rad); overflow: hidden; transition: translate .35s var(--ease), box-shadow .35s, border-color .35s; }
.course:hover, .post:hover { translate: 0 -5px; box-shadow: 0 30px 50px -30px rgba(60, 14, 10, .5); border-color: var(--maroon); }
.course[hidden] { display: none; }
.course__img, .post__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--maroon-deep); }
.course__img img, .post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.course:hover .course__img img, .post:hover .post__img img { transform: scale(1.05); }
.course__tag { position: absolute; right: 12px; bottom: 12px; padding: 7px 14px; background: var(--maroon); color: #fff; font: 600 .72rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; }
.course__body, .post__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 26px; }
.course__title, .post__title { font: 400 1.36rem/1.2 var(--f-disp); letter-spacing: -.01em; font-variation-settings: 'opsz' 72; }
.course__title a, .post__title a { color: var(--fg); text-decoration: none; }
.course__title a::after, .post__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.course__title a:hover, .post__title a:hover { color: var(--maroon); }
.course__title a:focus-visible::after, .post__title a:focus-visible::after { outline: 3px solid var(--maroon); outline-offset: -3px; border-radius: var(--rad); }
.course__ex, .post__body p { color: var(--muted); font-size: .92rem; margin: 0; }
.course__cta { margin-top: auto; padding-top: 8px; font: 600 .72rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.chip { min-height: 44px; padding: 0 22px; background: transparent; border: 1.5px solid var(--line2); border-radius: 999px; font: 600 .72rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); cursor: pointer; transition: all .25s; }
.chip:hover { border-color: var(--maroon); color: var(--maroon); }
.chip[aria-pressed='true'] { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.chip__n { opacity: .75; font-weight: 500; margin-left: 4px; }

/* ---------- content hub (home) ---------- */
.hub { overflow: hidden; isolation: isolate; background: var(--ink); }
.hub__bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(120deg, #7e2019, #3a0f0c 60%, #12090a); }
.hub__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; filter: grayscale(1) brightness(2.6) contrast(1.05); mix-blend-mode: multiply; }
.hub__bg { background: linear-gradient(120deg, #c13a28, #7e2019 55%, #3a0f0c); }
.hub::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 3, 3, .86) 6%, rgba(8, 3, 3, .35) 56%, rgba(8, 3, 3, .7)), linear-gradient(0deg, rgba(10, 6, 6, .85), transparent 26%); }
.hub__grid { position: relative; display: grid; gap: 44px; }
.hub__intro { align-self: center; max-width: 560px; }
.hub__badge { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; color: var(--tint); border: 1px solid var(--line2); border-radius: 50%; margin-bottom: 24px; }
.hub__badge .icon { width: 26px; height: 26px; }
.hub__intro .h2 { margin-bottom: 22px; }
.hub__cards { list-style: none; display: grid; gap: 16px; }
.hub__card { padding: 28px 30px; background: rgba(20, 8, 7, .62); border: 1px solid var(--line2); border-radius: var(--rad); backdrop-filter: blur(8px); }
.hub__card p { color: rgba(239, 234, 230, .86); margin: .5em 0 1.3em; }
.hub__ic { color: var(--tint); display: block; margin-bottom: 14px; }
@media (min-width: 960px) { .hub__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }

/* ---------- closer (full-bleed maroon CTA before the footer) ---------- */
.closer { overflow: hidden; isolation: isolate; padding-block: clamp(84px, 12vw, 176px);
  background:
    radial-gradient(60% 120% at 88% 0%, #a73229 0%, transparent 62%),
    radial-gradient(50% 100% at 0% 100%, #5a1812 0%, transparent 70%),
    var(--maroon); }
.closer::before { z-index: -1; opacity: .12; }
.closer::after { content: ''; position: absolute; z-index: -1; right: -14vw; top: 50%; width: clamp(420px, 56vw, 820px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 clamp(40px, 6vw, 90px) rgba(255, 255, 255, .025), 0 0 0 clamp(40px, 6vw, 90px) rgba(255, 255, 255, .02); }
.closer__in { position: relative; }
.closer__h { font-size: clamp(2.4rem, 1rem + 5.4vw, 5.4rem); max-width: 21ch; margin-bottom: 24px; }
.closer .lede { max-width: 52ch; }
.closer .btn-row { margin-top: 34px; }

/* ---------- split layouts ---------- */
.split { display: grid; gap: clamp(32px, 5vw, 76px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .split--rev .split__media { order: -1; }
  .split--text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .split--faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .split--book { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .split--rev.split--book { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .split--author, .split--instructor { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
}
.split__media img { width: 100%; border-radius: var(--rad); }
.split__media--shot img { border: 1px solid var(--line2); box-shadow: 0 50px 80px -40px rgba(40, 10, 8, .7); }
.split__media--book img { max-width: 480px; margin-inline: auto; border-radius: 6px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .75); }
.split__body > p:not(.lede):not(.eyebrow):not(.pullline) { color: var(--muted); }
.split__body .h2 { margin-bottom: 24px; }
.stack { position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto; width: 100%; }
.split__media.stack img.stack__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rad); filter: grayscale(.6) brightness(.75); }
.split__media.stack img.stack__cover { position: absolute; left: 50%; top: 50%; width: 52%; max-width: none; transform: translate(-50%, -50%) rotate(-4deg); border-radius: 4px; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .75); }
.pull { margin: 24px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--acc); }
.pull p { font: italic 300 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.35 var(--f-disp); margin: 0; }
.pullline { font: italic 300 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.3 var(--f-disp); color: var(--acc); }
.author__cred { font: 600 .72rem/1.6 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin-bottom: 16px; }

/* ---------- checklist ---------- */
.checklist { list-style: none; display: grid; gap: 0; margin: 24px 0 8px; }
.checklist li { position: relative; padding: 13px 0 13px 38px; border-bottom: 1px solid var(--line); font-weight: 500; }
.checklist li::before { content: ''; position: absolute; left: 0; top: 16px; width: 22px; height: 22px; background: var(--acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.checklist--tight li { padding-block: 9px; font-size: .95rem; }
.checklist--tight li::before { top: 11px; width: 20px; height: 20px; }
@media (min-width: 700px) { .checklist--two { grid-template-columns: 1fr 1fr; column-gap: 36px; } }
.checklist--cards { margin: 0; gap: 14px; }
.checklist--cards li { padding: 24px 26px 24px 68px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--rad); font: 300 1.3rem/1.3 var(--f-disp); }
.checklist--cards li::before { left: 26px; top: 27px; }
.split--text > .checklist--cards { align-self: center; }

/* ---------- perspectives (corporate) ---------- */
.persp { list-style: none; display: grid; gap: 22px; }
.persp__card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2); border-radius: var(--rad); overflow: hidden; }
.persp__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--maroon-deep); }
.persp__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.8); transition: filter .5s, transform .9s var(--ease); }
.persp__card:hover .persp__img img { filter: none; transform: scale(1.04); }
.persp__body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.persp__body .h3 { font: 300 1.8rem/1.12 var(--f-disp); margin-bottom: 6px; }
.persp__body .btn--link { margin-top: auto; }
.persp__tag { font: 500 1rem/1.4 var(--f-head); margin-bottom: 6px; color: var(--fg); }
@media (min-width: 900px) { .persp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }

/* ---------- steps / sequences ---------- */
.steps { list-style: none; display: grid; gap: 0 28px; grid-template-columns: 1fr; }
.step { position: relative; padding: 30px 0 34px; border-top: 1px solid var(--line2); }
.step::before { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 2px; background: var(--acc); }
.step__n { display: block; font: 200 clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem)/1 var(--f-disp); letter-spacing: -.03em; color: var(--acc); margin-bottom: 18px; font-variant-numeric: lining-nums tabular-nums; }
.step__icon { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; color: var(--acc); margin-bottom: 14px; border: 1px solid var(--line2); border-radius: 50%; }
.step__icon .icon { width: 24px; height: 24px; }
.step__title { font: 600 1.2rem/1.25 var(--f-head); margin-bottom: 8px; letter-spacing: -.01em; }
.step p { color: var(--muted); margin: 0; font-size: .95rem; }
.steps--cycle .step__n { font: 600 .7rem/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
.steps--cycle .step { background: var(--card2); padding: 28px 24px 30px; border: 1px solid var(--line2); border-radius: var(--rad); margin-bottom: 20px; }
.steps--cycle .step::before { display: none; }
.steps--plain .step p { font-size: 1rem; }
@media (min-width: 700px) { .steps--four, .steps--cycle { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .steps--three { grid-template-columns: repeat(3, 1fr); }
  .steps--four { grid-template-columns: repeat(4, 1fr); }
  .steps--cycle { grid-template-columns: repeat(4, 1fr); gap: 0 20px; }
}
.steps--timeline { display: block; max-width: 860px; }
.steps--timeline .step { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 0 26px; border-top: 0; padding: 0 0 40px; }
.steps--timeline .step::before { width: 1px; height: auto; left: 27px; top: 60px; bottom: 4px; background: var(--line2); }
.steps--timeline .step:last-child::before { display: none; }
.steps--timeline .step__icon { grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; }
.steps--timeline .step__title { align-self: end; margin: 0 0 4px; }
.progress { margin-top: clamp(52px, 6vw, 88px); }
.progress > .h3 { margin-bottom: 8px; font: 300 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.15 var(--f-disp); }

/* ---------- modules (academy syllabus) ---------- */
.modules { list-style: none; border-top: 1px solid var(--line2); }
.module { display: grid; gap: 6px 40px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.module__n { font: 600 .7rem/1.2 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.module .h3 { font: 300 clamp(1.4rem, 1.1rem + 1vw, 2.1rem)/1.15 var(--f-disp); }
.module p { margin: 0; color: var(--muted); }
@media (min-width: 900px) { .module { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.1fr); align-items: baseline; } }

/* ---------- misc grids ---------- */
.recs { list-style: none; display: grid; gap: 20px; }
.rec { padding: 30px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--rad); }
.rec .h3 { margin-bottom: 4px; }
.rec__hours { font: 600 .7rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin: 8px 0 22px; }
@media (min-width: 800px) { .recs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line2); border-radius: var(--rad); background: var(--card2); }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .95rem; }
.compare thead th { background: var(--ink); color: #efeae6; font: 600 .72rem/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.compare thead th:last-child { background: var(--maroon); color: #fff; }
.compare td:last-child { font-weight: 600; background: rgba(132, 35, 29, .07); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare-wrap { display: grid; gap: 28px; }
.cta-card { padding: clamp(28px, 3.4vw, 44px); background: var(--maroon); color: #f8f1ec; display: flex; flex-direction: column; gap: 14px; justify-content: center; border-radius: var(--rad); }
.cta-card .h3 { font: 300 clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem)/1.12 var(--f-disp); }
.cta-card p { margin: 0 0 8px; }
.evidence { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.evidence__item { position: relative; padding: 22px 20px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--rad); display: flex; flex-direction: column; gap: 10px; transition: border-color .25s, translate .35s var(--ease); }
.evidence__item:hover { border-color: var(--maroon); translate: 0 -4px; }
.evidence__n { font: 600 .7rem/1 var(--f-ui); letter-spacing: .18em; color: var(--acc); }
.evidence__t { font: 600 1rem/1.28 var(--f-head); }
.evidence__item .cell__icon { width: 42px; height: 42px; margin: 0; }
.evidence__item .cell__icon .icon { width: 20px; height: 20px; }
@media (min-width: 700px) { .evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .evidence { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.accred { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.badge { margin: 0; display: flex; align-items: center; gap: 22px; padding: 22px 26px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--rad); }
.badge img { width: 112px; flex: none; border-radius: 6px; }
.badge figcaption { display: flex; flex-direction: column; gap: 4px; font: 600 .9rem/1.35 var(--f-body); }
.badge__no { font: 300 1.5rem/1.1 var(--f-disp); color: var(--acc); }
@media (min-width: 1000px) { .accred { grid-template-columns: minmax(0, 1fr) 380px; } }
.assure { list-style: none; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.assure li { padding: 24px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--rad); }
.assure .h3 { font-size: 1.05rem; }
.assure .cell__icon { margin-bottom: 14px; }
.formats { list-style: none; display: grid; gap: 22px; }
.format { padding: 32px; border: 1px solid var(--line2); background: var(--card2); border-radius: var(--rad); display: flex; flex-direction: column; align-items: flex-start; }
.format .h3 { font: 300 1.7rem/1.15 var(--f-disp); margin-bottom: 8px; }
.format p:not(.format__k) { color: var(--muted); }
.format__k { font: 600 .7rem/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); margin-bottom: 22px; }
.format .btn--link { margin-top: auto; }
@media (min-width: 900px) { .formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rituals { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ritual { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--rad); }
.ritual .cell__icon { margin-bottom: 12px; }
@media (min-width: 900px) { .rituals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.embed { border: 1px solid var(--line2); border-radius: var(--rad); overflow: hidden; background: #fff; margin-bottom: 8px; }
.embed iframe { display: block; width: 100%; height: 450px; border: 0; }
.strip { background: var(--ink); color: #efeae6; border-bottom: 1px solid var(--line); }
.strip__list { list-style: none; display: grid; grid-template-columns: 1fr; }
.strip__list li { padding: 18px 0; border-bottom: 1px solid var(--line); font: 600 .72rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; }
.strip__list li:last-child { border-bottom: 0; }
@media (min-width: 900px) { .strip__list { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 24px; } .strip__list li { border: 0; padding-block: 26px; } }
.quotes { list-style: none; display: grid; gap: 20px; }
.quote { display: flex; flex-direction: column; padding: 30px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--rad); border-top: 2px solid var(--maroon); }
.quote__tag { font: 600 .7rem/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); margin-bottom: 16px; }
.quote blockquote { margin: 0 0 22px; font: italic 300 1.25rem/1.5 var(--f-disp); }
.quote blockquote p { margin: 0; }
.quote__by { margin: auto 0 0; font: 600 .9rem var(--f-body); }
@media (min-width: 700px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- about ---------- */
.founders { display: grid; gap: clamp(48px, 7vw, 100px); }
.founder { display: grid; gap: 30px; align-items: center; }
.founder__img { overflow: hidden; border: 1px solid var(--line2); border-radius: 26px; padding: 12px; background: var(--card); }
.founder__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: 16px; }
.founder__ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 4 / 5; border-radius: 16px; background: var(--ink); border: 1px dashed rgba(239, 234, 230, .35); }
.founder__mono { font: 300 clamp(4.5rem, 3rem + 6vw, 8rem)/1 var(--f-disp); font-variation-settings: 'opsz' 144; letter-spacing: .02em; color: var(--cream); }
.founder__cap { font: 600 .68rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: rgba(239, 234, 230, .78); }
.founder__name { margin-bottom: 8px; }
.founder__role { font: 600 .74rem/1.5 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-bottom: 22px; }
.founder__body p:not(.founder__role) { color: var(--muted); max-width: 56ch; }
@media (min-width: 860px) {
  .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 76px; }
  .founder:nth-child(even) .founder__img { order: 2; }
  .founder:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .founder__img { max-width: 520px; }
}
.mission-line { font: italic 300 clamp(1.7rem, 1rem + 3vw, 3.6rem)/1.16 var(--f-disp); letter-spacing: -.02em; max-width: 26ch; margin: 0; color: #f3cfc8; font-variation-settings: 'opsz' 144; }
.tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rad); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; color: #fff; font: 500 .92rem/1.25 var(--f-head); background: linear-gradient(0deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0)); }
@media (min-width: 800px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .tile figcaption { font-size: 1.02rem; padding: 52px 20px 18px; } }
.duo { display: grid; gap: 20px; }
.duo__card { padding: clamp(30px, 4vw, 56px); background: var(--card2); border: 1px solid var(--line2); border-radius: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.duo__card .h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.7rem); margin-bottom: 10px; }
.duo__card > p { color: var(--muted); }
.duo__card--maroon { background: var(--maroon); color: #f8f1ec; border-color: var(--maroon); --fg: #f8f1ec; --muted: rgba(248, 241, 236, .9); --line: rgba(255, 255, 255, .26); --bi-bg: var(--cream); --bi-fg: var(--maroon-ink); --bi-hv: #fff; }
.iconlist { list-style: none; display: grid; gap: 0; margin: 14px 0 26px; width: 100%; }
.iconlist li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.iconlist .icon { color: var(--acc); width: 22px; height: 22px; margin-top: 2px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 28px; }
.chips li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; font: 500 .85rem/1.3 var(--f-body); border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; }
.chips .icon { width: 18px; height: 18px; }
@media (min-width: 1000px) { .duo { grid-template-columns: 1fr 1fr; gap: 28px; } }
.manifesto { max-width: 860px; }
.manifesto .h2 { margin-bottom: 28px; }
.manifesto .lede { max-width: 60ch; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); }

/* ---------- contact ---------- */
.routes { list-style: none; display: grid; gap: 20px; }
.route { padding: 30px; border: 1px solid var(--line2); border-radius: var(--rad); background: var(--card2); display: flex; flex-direction: column; }
.route p { color: var(--muted); font-size: .95rem; }
.route__mail { color: var(--link); margin-top: auto; padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; font: 600 .85rem/1.3 var(--f-body); word-break: break-word; }
@media (min-width: 700px) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.write { display: grid; gap: clamp(36px, 5vw, 76px); }
@media (min-width: 960px) { .write { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.write__info .h2 { margin-bottom: 20px; }
/* Google Form: fixed heights with headroom for validation errors + a long message (opus L9 F1: empty form 1695-2039px). */
.enquiry-embed { min-width: 0; background: #fff; color: #140d0c; border-radius: 26px; }
.enquiry-embed iframe { display: block; width: 100%; height: 2250px; border: 0; border-radius: 26px; background: #fff; }
.enquiry-gate { padding: 28px 20px 8px; }
.enquiry-gate p { margin: 0 0 18px; font: 400 .9rem/1.5 var(--f-body); color: #140d0c; }
.enquiry-gate .btn { --bp-bg: var(--maroon); --bp-fg: #fff; --bp-hv: var(--maroon-ink); max-width: 100%; }
.enquiry-gate .btn:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; }
html:not(.js) .enquiry-gate .btn { display: none; }
.enquiry-embed iframe:focus { outline: 3px solid var(--maroon); outline-offset: -3px; }
.enquiry-embed__links { padding: 20px; }
.enquiry-embed__links > a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.enquiry-embed__links a:focus-visible { outline-color: var(--maroon); }
@media (min-width: 600px) { .enquiry-embed iframe { height: 2000px; } }

.facts { margin: 28px 0; display: grid; gap: 0; }
.facts div { padding: 16px 0; border-top: 1px solid var(--line2); }
.facts div:last-child { border-bottom: 1px solid var(--line2); }
.facts dt { font: 600 .7rem/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); margin-bottom: 8px; }
.facts dd { margin: 0; font-weight: 600; word-break: break-word; }
.social { display: flex; gap: 12px; margin: 0; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid var(--maroon); color: var(--maroon); border-radius: 50%; transition: all .25s; }
.social a:hover { background: var(--maroon); color: #fff; }
.form { padding: clamp(26px, 3.6vw, 48px); background: #fff; border: 1px solid var(--line2); border-radius: 26px; color: #140d0c; }
.form__row { display: grid; gap: 0 20px; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.field label { font: 600 .72rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; font: 400 1rem/1.4 var(--f-body); color: #140d0c; background: #fff; border: 1.5px solid rgba(20, 13, 12, .3); border-radius: 12px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(132, 35, 29, .35); outline-offset: 0; border-color: var(--maroon); }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin: 0 0 16px; font-size: .9rem; color: #554a47; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--maroon); }
.check label { cursor: pointer; }
.form__err { color: #8a1b14; font-weight: 700; padding: 12px 14px; background: #fbe4e1; border-left: 4px solid var(--maroon); }
.form .btn { margin-top: 8px; --bp-bg: var(--maroon); --bp-fg: #fff; --bp-hv: var(--maroon-ink); }
.faq { border-top: 1px solid var(--line2); }
.faq__item { border-bottom: 1px solid var(--line2); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; padding: 14px 0; font: 400 1.25rem/1.3 var(--f-disp); letter-spacing: -.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1.5px solid var(--acc); border-radius: 50%; color: var(--acc); font: 400 1.4rem/1 var(--f-body); transition: transform .25s, background-color .2s, color .2s; }
.faq__item[open] summary::after { content: '\2212'; background: var(--maroon); border-color: var(--maroon); color: #fff; }
.faq__item summary:hover { color: var(--acc); }
.faq__a { padding: 0 56px 24px 0; color: var(--muted); }
.faq__a p { margin: 0; }
.letter { display: grid; gap: 28px; align-items: center; }
.letter__cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.letter__note { margin: 0; color: var(--muted); font-size: .9rem; }
@media (min-width: 900px) { .letter { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 72px; } }

/* ---------- course / post / legal heroes ---------- */
.course-hero, .post-hero, .legal-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(36px, 5vw, 64px)) 0 clamp(52px, 7vw, 88px); }
.course-hero::before, .post-hero::before, .legal-hero::before, .hero--plain::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
.post-hero__in, .course-hero__in { display: grid; gap: 36px; align-items: center; }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 16px; font: 600 .72rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--tint); }
.back::before { content: '\2190'; margin-right: 10px; }
.h1--post, .h1--course, .h1--legal { font-size: clamp(2.2rem, 1rem + 4.4vw, 4.6rem); margin-bottom: 26px; line-height: 1.06; }
.h1--legal { margin-bottom: 0; font-size: clamp(2.4rem, 1rem + 5vw, 5.6rem); }
.post-hero__img img, .course-hero__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; border: 1px solid var(--line2); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9); }
.course-hero__text .eyebrow { margin-bottom: 14px; }
.course-hero .lede, .post-hero .lede { color: rgba(239, 234, 230, .88); }
.course-hero .btn-row { margin-top: 28px; }
@media (min-width: 900px) {
  .post-hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; }
  .course-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}
.legal-hero { min-height: clamp(300px, 40vh, 420px); display: flex; align-items: flex-end; }
.legal-hero .wrap { width: 100%; }
.legal-hero__col { max-width: 75ch; margin-inline: auto; font-size: .975rem; } /* S17: same measure as .prose--legal so the title lines up with the body column */
.curr { display: grid; gap: 18px 28px; align-items: center; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line2); border-radius: var(--rad); background: var(--card2); }
.curr__n { font: 200 clamp(2.6rem, 1.6rem + 2.4vw, 4.2rem)/1 var(--f-disp); color: var(--acc); letter-spacing: -.03em; }
.curr__body p { color: var(--muted); max-width: 70ch; }
.curr__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.tag { display: inline-flex; padding: 7px 14px; border: 1px solid var(--line2); border-radius: 999px; font: 600 .68rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.tag--free, .tag--price { background: var(--maroon); border-color: var(--maroon); color: #fff; }
@media (min-width: 800px) { .curr { grid-template-columns: auto minmax(0, 1fr); } }

/* ---------- prose (blog + legal): readable cream, 65-75ch ---------- */
.article { padding-block: clamp(52px, 7vw, 104px) var(--sec); }
.prose { max-width: 70ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.85; color: #231a18; }
.prose p { margin: 0 0 1.5em; }
.prose a { overflow-wrap: anywhere; color: var(--maroon); }
.prose h2 { font: 400 clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem)/1.15 var(--f-disp); margin: 2.2em 0 .7em; letter-spacing: -.015em; }
.prose h3 { font: 600 1.25rem/1.3 var(--f-head); margin: 1.8em 0 .5em; color: var(--maroon); }
.prose > h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.6em; padding-left: 1.3em; }
.prose ol { margin: 0 0 1.6em; padding-left: 1.6em; list-style-position: outside; } /* S4: numbered markers stay inside the page gutter */
.prose li { margin-bottom: .4em; padding-left: .3em; }
.prose li::marker { color: var(--maroon); }
.prose--legal { font-size: .975rem; line-height: 1.75; max-width: 75ch; }
.prose--legal h2 { font-size: 1.7rem; margin-top: 2.2em; }
.prose--legal p { margin-bottom: 1em; }
.prose--legal .clause { padding-left: 0; }
.ctable { width: 100%; border-collapse: collapse; font-size: .84rem; line-height: 1.5; min-width: 560px; }
.ctable th, .ctable td { padding: 10px 14px; border-bottom: 1px solid rgba(20, 13, 12, .16); text-align: left; vertical-align: top; word-break: break-word; }
.ctable th { background: #e5ddd6; font-weight: 700; }
.prose--legal .tablewrap { margin: 0 0 2em; background: #fff; border-color: rgba(20, 13, 12, .2); }
.prose--legal h3 { font-size: 1.05rem; margin: 1.6em 0 .6em; color: #140d0c; }
.notfound { min-height: 70vh; }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--ink); color: #efeae6; padding-top: calc(var(--sec) * .6); border-top: 1px solid var(--line); }
.footer__grid { display: grid; gap: 40px; padding-bottom: 52px; }
.footer__logo { height: 56px; width: auto; margin-bottom: 20px; }
.footer__brand p { color: rgba(239, 234, 230, .8); max-width: 44ch; font-size: .95rem; }
.footer__h { font: 600 .7rem/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--tint); margin-bottom: 18px; }
.footer__col ul { list-style: none; display: grid; gap: 0; }
.footer__col li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: #efeae6; text-decoration: none; font-weight: 500; }
.footer__col li a:hover { text-decoration: underline; color: #fff; }
.footer__news p { color: rgba(239, 234, 230, .82); font-size: .95rem; }
.footer__copy { padding-block: 28px; margin: 0 auto; font-size: .82rem; color: rgba(239, 234, 230, .72); background: linear-gradient(var(--line2), var(--line2)) var(--gut) 0 / calc(100% - var(--gut) * 2) 1px no-repeat; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr .8fr .8fr 1.2fr; gap: 56px; } }

/* ---------- reveal motion (content visible by default; .js enables the transition) ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .course.reveal, .js .post.reveal { transition: opacity .95s var(--ease), transform .95s var(--ease), translate .35s var(--ease), box-shadow .35s, border-color .35s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- home v3 (client mock-up 2026-10-08) ----------
   The home page (src/pages/home.mjs). Ported from the client's own mock-up
   (director Ashton Hewitt, WhatsApp 2026-10-08 08:14), which was built on the same tokens/fonts as v2: only what v2 lacks is added here,
   under unique class names (prod, kicker, blk, rp-*, plus-head, laptop, ds/dm/dc, solve*, hero--v3). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* -- hero v3: dark maroon glow, no photo, one large ring (mock-up) -- */
.hero--v3 { min-height: 0; align-items: flex-end; padding: calc(var(--header-h) + clamp(72px, 12vw, 160px)) 0 clamp(64px, 9vw, 120px); }
.hero--v3::after { content: ''; position: absolute; z-index: -1; right: -12vw; top: 50%; width: clamp(380px, 52vw, 760px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 clamp(40px, 6vw, 90px) rgba(255, 255, 255, .02), 0 0 0 clamp(40px, 6vw, 90px) rgba(255, 255, 255, .015); pointer-events: none; }
.hero--v3 .hero__lede { max-width: 52ch; }

/* -- product intro (Baseline / Baseline+) -- */
.kicker { font: italic 300 clamp(1.2rem, 1rem + .6vw, 1.5rem)/1.3 var(--f-disp); color: var(--acc); }
.prod { display: grid; gap: clamp(36px, 5vw, 72px); }
.prod__name { font: 300 clamp(2.6rem, 1rem + 4.6vw, 5.6rem)/.95 var(--f-disp); letter-spacing: -.035em; font-variation-settings: 'opsz' 144; }
.prod__name sup { font: 700 .5em/1 var(--f-body); vertical-align: .9em; margin-left: .04em; color: var(--maroon); }
.prod__tag { margin-top: 18px; }
.prod__cols { display: grid; gap: 28px; }
.blk { padding-top: 22px; border-top: 1px solid var(--line2); }
.blk__k { font: 600 .68rem/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); margin-bottom: 12px; }
.blk p:not(.blk__k) { color: var(--fg); font-size: 1.05rem; line-height: 1.65; max-width: 52ch; margin: 0; }
@media (min-width: 900px) { .prod { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .prod__cols { gap: 32px; } }

/* -- sample report (client's "02 Executive summary" page; own light palette, as in the mock-up) -- */
.rp-wrap { margin-top: clamp(48px, 6vw, 80px); }
.rp-label { font: 600 .68rem/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--maroon); margin: 0 0 16px; display: flex; align-items: center; gap: 14px; }
.rp-label::before { content: ''; width: 36px; height: 1px; background: currentColor; opacity: .8; }
.rp { --rp-ink: #1E1F2E; --rp-muted: #5B5D6B; --rp-body: #4E5060; --rp-line: #E2E0E7; --rp-track: #ECEAF0;
  margin: 0; padding: clamp(18px, 3vw, 36px) clamp(16px, 3.4vw, 48px) clamp(16px, 2vw, 26px); background: #F4F3F6; color: var(--rp-ink); border-radius: 22px;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; box-shadow: 0 40px 80px -48px rgba(20, 13, 12, .5), 0 0 0 1px rgba(20, 13, 12, .06); display: flex; flex-direction: column; gap: 16px; }
.rp p, .rp h3, .rp h4 { margin: 0; }
.rp-muted { color: var(--rp-muted); font-size: .82rem; line-height: 1.45; }
.rp-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rp-line); }
.rp-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-brand svg { width: 26px; height: 26px; fill: #000; flex: none; }
.rp-word { font-weight: 600; font-size: 1rem; letter-spacing: -.015em; color: #000; white-space: nowrap; }
.rp-word span { color: #84231D; }
.rp-brand i { width: 1px; height: 16px; background: #D4D1DA; }
.rp-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; }
.rp-k { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #84231D; }
.rp-title h3 { margin: 4px 0 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.rp-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-grid > :first-child { grid-row: span 2; } }
@media (min-width: 1100px) { .rp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rp-grid > :first-child { grid-row: auto; } }
.rp-card { background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(30, 25, 45, .06), 0 6px 18px rgba(30, 25, 45, .05); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rp-card h4 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.rp-bars { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rp-bar { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(48px, 1fr) 26px; align-items: center; gap: 10px; font-size: .78rem; line-height: 1.25; color: #2A2B3A; }
.rp-bar i { height: 8px; border-radius: 6px; background: var(--rp-track); overflow: hidden; }
.rp-bar b { display: block; height: 100%; border-radius: 6px; }
.rp-bar em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rp-bar--hci span { font-weight: 800; color: #84231D; }
.rp-donut { flex: 1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rp-donut svg { width: clamp(120px, 12vw, 160px); height: auto; flex: none; }
.rp-legend { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: .86rem; }
.rp-legend li { display: flex; align-items: center; gap: 10px; }
.rp-legend i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.rp-legend strong { width: 36px; }
.rp-note { font-size: .78rem; line-height: 1.5; color: var(--rp-body); }
.rp-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rp-pill { font-size: .72rem; font-weight: 700; color: #24572A; background: #E3F0E1; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.rp-big { font-size: 3.2rem; font-weight: 800; color: #2E3270; letter-spacing: -.02em; line-height: 1; }
.rp-strong { font-weight: 700; font-size: .95rem; }
.rp-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: #2A2B3A; }
.rp-track { height: 8px; background: var(--rp-track); border-radius: 6px; overflow: hidden; }
.rp-track b { display: block; height: 100%; background: #2E3270; border-radius: 6px; }
.rp-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rp-list li { display: flex; align-items: center; gap: 12px; font-size: .88rem; line-height: 1.3; }
.rp-list li > span:nth-child(2) { flex: 1; }
.rp-ic { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-weight: 800; font-size: .8rem; }
.rp-ic svg { width: 13px; height: 13px; fill: none; stroke: #2F6B33; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.rp-ic--ok { background: #E3F0E1; }
.rp-ic--warn { background: #FBEACB; color: #8A5300; }
.rp-prio { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; font-size: .86rem; line-height: 1.4; }
.rp-prio li::marker { color: #84231D; font-weight: 800; }
.rp-insight { background: #fff; border-radius: 16px; padding: 20px 24px; box-shadow: 0 1px 2px rgba(30, 25, 45, .06), 0 6px 18px rgba(30, 25, 45, .05); display: grid; gap: 10px 24px; }
@media (min-width: 720px) { .rp-insight { grid-template-columns: 150px minmax(0, 1fr); } }
.rp-insight > p { font-size: .95rem; line-height: 1.6; color: #2A2B3A; max-width: 95ch; }
.rp-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--rp-line); font-size: .74rem; color: #6A6C7A; }
.rp-foot strong { color: #84231D; }
/* capped summary (Ashton, 2026-10-08 09:33: show only the summary so it does not take too much space): the body is clipped with a soft fade and a
   toggle expands it; the "Sample report using a fictional organisation and data" footer sits OUTSIDE the clip and is always visible. */
.rp__body { position: relative; display: flex; flex-direction: column; gap: 16px; max-height: 600px; overflow: hidden; transition: max-height .8s var(--ease); }
@media (min-width: 720px) { .rp__body { max-height: 720px; } }
.rp__body::after { content: ''; position: absolute; inset: auto 0 0 0; height: 170px; background: linear-gradient(rgba(244, 243, 246, 0), #F4F3F6 86%); pointer-events: none; transition: opacity .4s; }
.rp.is-open .rp__body { max-height: 6000px; }
.rp.is-open .rp__body::after { opacity: 0; }
.rp__more { position: relative; z-index: 1; display: flex; justify-content: center; }
.rp:not(.is-open) .rp__more { margin-top: 14px; } /* S1 (ui sweep 2026-10-25): toggle sits on its own row below the fade, never over the preview text */
.rp__toggle { display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 48px; padding: 12px 26px; border: 1.5px solid #84231D; border-radius: 999px; background: #fff; color: #84231D; font: 700 .72rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .25s, color .25s; }
.rp__toggle::after { content: '\2193'; display: inline-block; transition: transform .3s var(--ease); }
.rp__toggle:hover { background: #84231D; color: #fff; }
.rp__toggle[aria-expanded='true']::after { transform: rotate(180deg); }
.rp__toggle:focus-visible { outline-color: #84231D; }
html:not(.js) .rp__body { max-height: none; }
html:not(.js) .rp__body::after, html:not(.js) .rp__more { display: none; }

/* -- wheel: mock-up hub sub-label + label sizes tuned for the nine mock-up names (overrides the earlier .seg__t sizes; used by home and /courses/) -- */
.wheel__hubs { font: 600 10px/1 var(--f-ui); letter-spacing: .26em; fill: var(--tint); text-transform: uppercase; }
.seg__t { font-size: 14.5px; letter-spacing: -.005em; }
@media (max-width: 700px) { .seg__t { font-size: 16.5px; } .seg__t { display: none; } .seg__n { font-size: 38px; letter-spacing: .06em; transform: translate(var(--mx), var(--my)); } .wheel__hubt { font-size: 31px; } .wheel__hubs { font-size: 11px; } }

/* -- Baseline+ -- */
.plus-head { display: grid; gap: 20px 64px; margin-bottom: clamp(40px, 6vw, 80px); }
.plus-head .eyebrow { grid-column: 1 / -1; margin-bottom: 4px; }
.plus-head .lede { color: var(--fg); }
.plus-head .lede + .lede { color: var(--muted); margin: .7em 0 0; }
@media (min-width: 900px) { .plus-head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; } }

/* laptop dashboard mock (CSS only, client's illustrative data) */
.laptop { max-width: 1040px; margin-inline: auto; padding-inline: 4%; }
.laptop__lid { background: #1b1514; border-radius: 18px 18px 6px 6px; padding: 1.6% 1.6% 2.2%; box-shadow: 0 50px 90px -40px rgba(20, 13, 12, .55); }
.laptop__cam { width: 6px; height: 6px; border-radius: 50%; background: #3a302e; margin: 0 auto 1.2%; }
.screen { container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--cream); color: #140d0c; font-family: var(--f-body); display: grid; grid-template-columns: 17cqw 1fr; }
.laptop__base { height: clamp(10px, 1.8vw, 20px); margin-inline: -5%; background: linear-gradient(#d9d1ca, #b8afa8); border-radius: 0 0 22px 22px; position: relative; }
.laptop__base::before { content: ''; position: absolute; left: 50%; top: 0; width: 14%; height: 40%; transform: translateX(-50%); background: #a69c95; border-radius: 0 0 8px 8px; }
.ds { background: var(--maroon-deep); color: var(--cream); padding: 2.2cqw 1.6cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
.ds__brand { display: flex; align-items: center; gap: .9cqw; }
.ds__brand svg { width: 2.6cqw; height: 2.6cqw; fill: var(--cream); flex: none; }
.ds__brand b { font: 400 1.7cqw/1 var(--f-disp); letter-spacing: -.01em; }
.ds__brand b span { color: var(--tint); font: 700 1em/1 var(--f-body); }
.ds__nav { list-style: none; display: flex; flex-direction: column; gap: .5cqw; }
.ds__nav li { font: 500 1.05cqw/1 var(--f-body); padding: .9cqw 1cqw; border-radius: .7cqw; color: rgba(239, 234, 230, .7); }
.ds__nav li.on { background: rgba(255, 255, 255, .1); color: #fff; }
.ds__org { margin-top: auto; font-size: .95cqw; line-height: 1.4; color: rgba(239, 234, 230, .6); }
.ds__org b { display: block; color: #fff; font-weight: 600; }
.dm { padding: 2.2cqw 2.4cqw; display: grid; grid-template-rows: auto 1fr; gap: 1.8cqw; min-width: 0; }
.dm__top { display: flex; justify-content: space-between; align-items: center; }
.dm__top h4 { margin: 0; font: 300 2.1cqw/1 var(--f-disp); letter-spacing: -.02em; }
.dm__chip { font: 600 .8cqw/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #554a47; border: 1px solid rgba(20, 13, 12, .2); border-radius: 99px; padding: .5cqw .9cqw; }
.dm__grid { display: grid; grid-template-columns: 21cqw 1fr 21cqw; gap: 1.4cqw; min-height: 0; }
.dc { background: #fbf8f5; border-radius: 1.2cqw; padding: 1.6cqw; display: flex; flex-direction: column; gap: 1cqw; min-width: 0; }
.dc__k { font: 600 .82cqw/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: #554a47; }
.dc--hci { background: var(--maroon); color: #fff; }
.dc--hci .dc__k { color: #f3cfc8; }
.dc__big { font: 300 7.4cqw/.9 var(--f-disp); letter-spacing: -.04em; }
.dc__s { font-size: .95cqw; line-height: 1.4; color: inherit; opacity: .8; }
.dw { width: 100%; height: auto; display: block; }
.bars { list-style: none; display: flex; flex-direction: column; gap: .75cqw; }
.bars li { display: grid; grid-template-columns: 1fr 6cqw 2cqw; align-items: center; gap: .8cqw; font-size: .92cqw; }
.bars i { height: .5cqw; border-radius: 1cqw; background: rgba(20, 13, 12, .08); overflow: hidden; }
.bars b { display: block; height: 100%; background: var(--maroon); }
.bars em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sig { list-style: none; display: flex; flex-direction: column; }
.sig li { display: grid; grid-template-columns: .7cqw 1fr; gap: .8cqw; padding: .9cqw 0; border-top: 1px solid rgba(20, 13, 12, .1); font-size: .92cqw; line-height: 1.35; }
.sig li::before { content: ''; width: .7cqw; height: .7cqw; margin-top: .35cqw; border-radius: 50%; background: var(--maroon); }
.sig b { font-weight: 600; display: block; }
.sig span { color: #554a47; }
.crs { margin-top: auto; padding: 1cqw; border-radius: .8cqw; background: var(--cream); font-size: .92cqw; line-height: 1.35; }
.crs b { display: block; font: 400 1.1cqw/1.25 var(--f-disp); margin-top: .3cqw; }
.crs small { color: var(--maroon); font-weight: 600; font-size: .8cqw; letter-spacing: .08em; text-transform: uppercase; }
.dc p, .dm p, .laptop p { margin: 0; }
.mock-note { margin: 18px 0 0; text-align: center; font: 600 .66rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: #554a47; }

/* the problem Baseline+ solves */
.solve { display: grid; gap: clamp(36px, 5vw, 64px); margin-top: clamp(64px, 9vw, 120px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line2); }
@media (min-width: 900px) { .solve { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.solve .lede { margin-top: 18px; }
.solve__h { font: 300 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.15 var(--f-disp); letter-spacing: -.01em; }
/* 2026-10-28: the 4-step cycle (replaces the numbered 3-step list, Ashton 16:38) */
.cyc { border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: clamp(28px, 4vw, 44px) 0 clamp(24px, 3vw, 32px); color: var(--acc); }
.cyc__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cyc__hub { order: -1; justify-self: center; width: min(250px, 72%); }
.cyc__svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--maroon); }
.cyc__hubc { fill: var(--maroon); }
.cyc__hubt { color: #fff; fill: currentColor; font: 300 13px/1 var(--f-disp); letter-spacing: .01em; }
.cyc__node circle { fill: #f4e8e3; stroke: var(--maroon); stroke-width: 1.2; }
.cyc__step h3 { font: 400 1.45rem/1.2 var(--f-disp); letter-spacing: -.01em; color: var(--fg); margin: 0 0 8px; }
.cyc__step p { color: var(--muted); margin: 0; max-width: 34ch; font-size: 1rem; line-height: 1.55; }
.cyc__loop { margin: 28px 0 0; text-align: center; font: italic 300 clamp(1rem, .9rem + .2vw, 1.1rem)/1.4 var(--f-disp); color: var(--maroon); text-wrap: balance; }
@media (min-width: 1100px) {
  .cyc__steps { grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(20px, 2.4vw, 36px); row-gap: 16px; align-items: start; }
  .cyc__step p { font-size: .95rem; }
  .cyc__hub { order: 0; grid-column: 2; grid-row: 1 / 3; width: 180px; align-self: center; }
  .cyc__step--tl { grid-column: 1; grid-row: 1; text-align: right; justify-self: end; }
  .cyc__step--tr { grid-column: 3; grid-row: 1; }
  .cyc__step--br { grid-column: 3; grid-row: 2; }
  .cyc__step--bl { grid-column: 1; grid-row: 2; text-align: right; justify-self: end; }
}

/* closing CTA row under the stats band */
.btn-row--cost { margin-top: clamp(48px, 6vw, 72px); }

/* -- home hero, photo restored (Matt 2026-10-08: "let's put the person back there") --
   Same photo + v2 grade as the v2 home (.hero__media / .hero__shade above). The mock-up's ring (.hero--v3::after) is not used here. */
.hero--v3photo { padding-bottom: clamp(72px, 9vw, 110px); }
@media (max-width: 760px) { .hero--v3photo { padding-bottom: 96px; } }

/* ---------- Baseline tour: scoped page styles ---------- */
.tour { overflow-wrap: anywhere; }
.tour-opening { padding-top: calc(var(--header-h) + clamp(48px, 6vw, 88px)); padding-bottom: clamp(48px, 6vw, 80px); background: radial-gradient(ellipse at 90% 0, rgba(132, 35, 29, .2), transparent 55%), var(--ink); }
.tour-hero { display: grid; gap: 24px 64px; padding-bottom: clamp(36px, 4vw, 56px); }
.tour-kicker { grid-column: 1 / -1; margin: 0; max-width: 100%; font: italic 300 clamp(1.2rem, 1rem + .6vw, 1.5rem)/1.3 var(--f-disp); color: var(--acc); text-wrap: balance; }
.tour-title { font-size: clamp(3.4rem, 7.2vw, 6.8rem); }
.tour-lede { margin: 0; font-size: clamp(1rem, 1.1vw, 1.1rem); max-width: 54ch; }
.tour-screening { display: grid; gap: 32px; align-items: start; }
.tour-film { margin: 0; min-width: 0; }
.tour-video-box { aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; box-shadow: 0 28px 72px -36px #000; }
.tour-video { display: block; width: 100%; height: 100%; object-fit: contain; scroll-margin-top: 8px; }
.tour-film-caption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; color: var(--muted); font-size: .76rem; }
.tour-note { margin: 0; }
.tour-duration { flex: none; font-variant-numeric: tabular-nums; }
.tour-duration span { color: var(--muted); }
.tour-label { margin-bottom: 16px; font: 600 .68rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--tint); }
.tour-chapter-links { list-style: none; border-top: 1px solid var(--line2); }
.tour-chapter-link { display: grid; grid-template-columns: 3ch minmax(0, 1fr) 12px; align-items: center; gap: 16px; min-height: 65px; padding: 14px 10px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; text-decoration: none; transition: background-color .2s, border-color .2s; }
.tour-time { font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tour-chapter-link .tour-time { color: var(--tint); }
.tour-chapter-name { font-size: .88rem; line-height: 1.4; }
.tour-play { width: 0; height: 0; border-block: 4px solid transparent; border-left: 6px solid currentColor; opacity: .45; }
.tour-chapter-link:hover { background: var(--card); }
.tour-chapter-link[aria-current='true'] { border-left-color: var(--tint); background: rgba(233, 180, 172, .1); }
.tour-chapter-link[aria-current='true'] .tour-play { opacity: 1; color: var(--tint); }
.tour :is(a, video):focus-visible { outline: 3px solid var(--acc, var(--cream)); outline-offset: 4px; }
.tour-video-box:focus-within { outline: 3px solid var(--tint); outline-offset: 4px; }
.tour-transcript-note { margin: 0 0 32px; font-size: .86rem; color: var(--muted); }
.tour-chapter-grid { display: grid; gap: 48px 64px; }
.tour-chapter { min-width: 0; border-top: 1px solid var(--line2); padding-top: 22px; scroll-margin-top: 24px; }
.tour-chapter-range { margin: 0 0 12px; color: var(--maroon); }
.tour-timestamp-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration-thickness: 1px; }
.tour-chapter-title { max-width: 24ch; margin-bottom: 24px; font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.2 var(--f-disp); letter-spacing: -.015em; }
.tour-caption-list { display: grid; gap: 14px; list-style: none; color: var(--muted); }
.tour-caption-list li { display: grid; grid-template-columns: 3.5ch minmax(0, 1fr); gap: 18px; font-size: .94rem; line-height: 1.6; }
.tour-caption-time { padding-top: .2em; color: var(--maroon); font-size: .72rem; font-variant-numeric: tabular-nums; }
.tour-section-head { display: grid; gap: 24px 64px; margin-bottom: clamp(40px, 5vw, 64px); }
.tour-section-head .h2 { max-width: 17ch; }
.tour-section-head .lede { margin: 0; }
.tour-pillar-grid { display: grid; list-style: none; column-gap: 40px; }
.tour-pillar { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 22px; padding-block: 28px 34px; border-top: 1px solid var(--line2); }
.tour-pillar-number { font: 300 1.8rem/1.1 var(--f-disp); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--tint); }
.tour-pillar-name { margin-bottom: 12px; font: 400 1.3rem/1.3 var(--f-disp); }
.tour-pillar-desc { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--muted); }
.tour-cta { padding-block: clamp(56px, 7vw, 96px); }
.tour-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px 64px; }
.tour-cta-inner:has(> .tour-cta-button:only-child) { justify-content: center; align-items: center; }
.tour-cta-title { margin-bottom: 24px; }
.tour-cta-lede { max-width: 48ch; margin: 0; color: var(--fg); font: 300 clamp(1.5rem, 2.5vw, 2.25rem)/1.4 var(--f-disp); }
.tour-cta-button { flex-shrink: 0; gap: 24px; }
.tour-cta-button span { font-size: 1.2rem; }
@media (min-width: 760px) {
  .tour-chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .tour-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .tour-screening { grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; }
  .tour-chapters { padding-top: 4px; }
  .tour-section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .tour-pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .tour-chapter-link { min-height: 62px; }
  .tour-cta-inner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .tour *, .tour *::before, .tour *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Marketing films (2026-10-16): home Baseline / Baseline+ sections and /videos/ ----------
   One pattern: caption column + 16:9 player on the section's own grid (5/7 under .prod, 6/6 under .plus-head);
   on phones the caption stacks and the 1:1 cut runs full-bleed. Two <video> elements per film, one displayed per
   width (src/film.mjs); preload="none" so the hidden one never loads its MP4. No JS, native controls. */
.film { display: grid; gap: 24px 64px; align-items: start; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line2); }
.film--plus { margin-top: 0; margin-bottom: clamp(56px, 8vw, 112px); }
.film__cap { min-width: 0; }
.film__cap .eyebrow { margin-bottom: 14px; }
.film__title { margin: 0; font: 300 clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem)/1.05 var(--f-disp); letter-spacing: -.025em; font-variation-settings: 'opsz' 144; }
.film__title sup { font: 700 .5em/1 var(--f-body); vertical-align: .9em; margin-left: .04em; color: var(--maroon); }
.film__meta { display: flex; flex-wrap: wrap; align-items: baseline; margin: 18px 0 0; font: 600 .68rem/1.6 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.film__meta span + span::before { content: '\00b7'; margin-inline: .8em; opacity: .7; }
.film__cap > p { margin: 0; }
.film__cap .btn--link { margin-top: 24px; }
.film__box { position: relative; aspect-ratio: 16 / 9; min-width: 0; background: #000; border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; box-shadow: 0 28px 72px -36px #000; }
.film__box:focus-within { outline: 3px solid var(--acc); outline-offset: 4px; }
.film__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.film__video--square { display: none; }
/* /videos/ page */
.films { padding-top: calc(var(--header-h) + clamp(48px, 6vw, 88px)); background: radial-gradient(ellipse at 90% 0, rgba(132, 35, 29, .2), transparent 55%), var(--ink); }
.films__head { display: grid; gap: 24px 64px; align-items: end; margin-bottom: clamp(44px, 6vw, 80px); padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line2); }
.films__head .eyebrow { grid-column: 1 / -1; }
.films__title { font-size: clamp(3.4rem, 7.2vw, 6.8rem); }
.films__aside { min-width: 0; }
.films__aside .film__meta { margin: 0 0 18px; }
.films__list { list-style: none; display: grid; gap: clamp(48px, 6vw, 72px) 64px; }
.film-card { min-width: 0; }
.film-card__cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding-top: 20px; }
.film-card__n { font: 300 1.5rem/1 var(--f-disp); color: var(--tint); font-variant-numeric: lining-nums tabular-nums; }
.film-card__title { font: 400 clamp(1.45rem, 1.1rem + 1vw, 1.9rem)/1.2 var(--f-disp); letter-spacing: -.015em; }
.film-card__dur { font: 600 .68rem/1.6 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.film-card__link { grid-column: 2; margin-top: 2px; }
.films__cta { justify-content: center; margin-top: clamp(56px, 8vw, 104px); }
@media (min-width: 900px) {
  .film { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .film--plus { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .films__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .films__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 2026-10-16 (Ashton's ask, Layout A): Ashton's own films are single-source — one aspect ratio, so the box takes the film's own shape.
   The 1:1 Baseline cut is capped so it sits at the visual size of its 16:9 neighbours in the two-column grid. */
.film__box--1x1 { aspect-ratio: 1; }
.film__box--16x9 { aspect-ratio: 16 / 9; }
.film-card--1x1 .film__box { max-width: min(100%, 360px); }
.film-card__note { grid-column: 2 / -1; margin: 0; font: 600 .68rem/1.6 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.btn-row--plus-tour { align-items: center; gap: 14px 28px; margin-top: 0; margin-bottom: clamp(40px, 5vw, 64px); }
@media (max-width: 759px) {
  .film__box { aspect-ratio: 1; margin-inline: calc(var(--gut) * -1); border-radius: 0; border-inline: 0; box-shadow: none; }
  .film__box:focus-within { outline: none; }
  .film__box::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
  .film__box:focus-within::after { box-shadow: inset 0 0 0 3px var(--acc); }
  .film__video--wide { display: none; }
  .film__video--square { display: block; }
}

@media (max-width: 759px) {
  .film__box.film__box--16x9 { aspect-ratio: 16 / 9; }
  .film-card--1x1 .film__box { max-width: none; }
}

/* 2026-10-15 lead: visible keyboard focus on the white contact form (opus S1 F1) */
.form :focus-visible { outline-color: var(--maroon); }

/* -- 2026-10-18 (portal build plan, leg U1; WCAG 1.2.x, 4.1.2): film "Transcript" disclosure on /videos/, the Contact page's plain "Email" label -- */
.film-card__text { margin-top: 18px; border-top: 1px solid var(--line2); }
.film-card__text summary { font-size: 1.05rem; min-height: 56px; }
.film-text { padding-right: 0; }
.film-text__lead { margin: 0 0 16px; }
.film-text__cues { list-style: none; display: grid; gap: 10px; }
.film-text__cues li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.film-text__t { font: 600 .68rem/1.9 var(--f-ui); letter-spacing: .14em; color: var(--tint); font-variant-numeric: lining-nums tabular-nums; }
.film-text__words { color: var(--fg); }
.film-text__h { margin: 20px 0 10px; font: 600 .72rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--tint); }
.film-text__items { list-style: none; display: grid; gap: 10px; }
.film-text__items b { color: var(--fg); font-weight: 600; }
.field__label { font: 600 .72rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.film-text__slot { margin: 16px 0 0; color: var(--tint); font-style: italic; }
/* visually hidden, still read by assistive tech (the /videos/ page h1 — Ashton 2026-10-18: no visible "Videos" title) */
.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; }

/* ---------- UI sweep 2026-10-25 (L17) ---------- */
/* S20: filter-chip border >= 3:1 on the light band */
.chip { border-color: var(--ctl-line, #8c7e79); }
.chip:hover { border-color: var(--maroon); }
.chip[aria-pressed='true'] { border-color: var(--maroon); }
/* S2: cookie tables keep whole words (no mid-word breaks) and scroll sideways on a phone, with a soft edge cue */
.ctable th, .ctable td { word-break: normal; overflow-wrap: normal; hyphens: none; }
.prose--legal .tablewrap {
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20, 13, 12, .22), rgba(20, 13, 12, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 13, 12, .22), rgba(20, 13, 12, 0)) right center / 14px 100% no-repeat scroll,
    #fff;
}
/* S10: cookie-type list on the privacy page */
.prose ul.cookie-types { list-style: none; padding-left: 0; margin: 0 0 1.4em; }
.prose ul.cookie-types li { padding: 12px 0 12px 16px; margin: 0; border-left: 3px solid var(--maroon); background: rgba(20, 13, 12, .035); }
.prose ul.cookie-types li + li { margin-top: 8px; }
.prose ul.cookie-types strong { display: block; color: #140d0c; }
/* S26: phone label / pill / caption floor of 12px */
@media (max-width: 759px) {
  .blk__k, .rp-label, .pl__n, .tag, .chip, .chip__n, .facts dt, .field__label, .stat__src, .tour-label, .tour-caption-time, .film__meta, .film-card__dur, .film-card__note { font-size: 12px; }
}
/* S28: /videos/ on a phone: tighter top strip and gaps between the two films, content unchanged */
@media (max-width: 759px) {
  .films { padding-top: calc(var(--header-h) + 12px); padding-bottom: 40px; }
  .films__list { gap: 20px; }
  .film-card__cap { padding-top: 12px; }
  .film-card__text { margin-top: 8px; }
}
/* ---------- UI sweep 2026-10-26 (card 20): S18 show-more paging, S21 no lone last card, S31 dashboard sample link ---------- */
.more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin: 34px 0 0; }
.more[hidden] { display: none; }
.more__n { margin: 0; color: var(--muted); font-size: .92rem; }
/* a lone last card spans its row (set by site.js on .course-grid / .post-grid) */
.course.is-wide, .post.is-wide { grid-column: 1 / -1; flex-direction: row; }
.course.is-wide .course__img, .post.is-wide .post__img { flex: 0 0 min(42%, 440px); aspect-ratio: auto; min-height: 220px; }
.course.is-wide .course__body, .post.is-wide .post__body { justify-content: center; flex: 1; }
@media (max-width: 719px) { .course.is-wide, .post.is-wide { flex-direction: column; } }
/* the same fix without JS: every card is shown, so :last-child is the real last card */
@media (min-width: 1000px) { html:not(.js) .course-grid > .course:last-child:nth-child(3n + 1), html:not(.js) .post-grid > .post:last-child:nth-child(3n + 1) { grid-column: 1 / -1; flex-direction: row; } }
@media (min-width: 620px) and (max-width: 999px) { html:not(.js) .course-grid > .course:last-child:nth-child(2n + 1), html:not(.js) .post-grid > .post:last-child:nth-child(2n + 1) { grid-column: 1 / -1; flex-direction: row; } }
html:not(.js) .course-grid > .course:last-child:nth-child(3n + 1) .course__img, html:not(.js) .post-grid > .post:last-child:nth-child(3n + 1) .post__img { flex: 0 0 min(42%, 440px); aspect-ratio: auto; min-height: 220px; }
.shot-link { margin: 0; }
.shot-link__a { display: block; }
.shot-link__cap { margin-top: 12px; font: 600 .72rem/1.4 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.shot-link__cap a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link, var(--maroon)); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- courses page (Ashton 2026-10-28 12:57): hero CPD badge, pillar-grouped catalogue ---------- */
.hero__wrap .hero__badge { margin-top: 36px; width: fit-content; max-width: 100%; background: rgba(8, 3, 3, .55); border-color: rgba(239, 234, 230, .3); backdrop-filter: blur(6px); animation: fadeUp 1s var(--ease) .9s both; }
.hero__badge img { width: 88px; }
.hero__badge figcaption { color: rgba(239, 234, 230, .88); }
.hero__badge .badge__no { color: #f6d3cc; }
@media (min-width: 1200px) {
  .hero__wrap .hero__badge { position: absolute; right: var(--gut, 0px); bottom: 0; margin-top: 0; }
}
.pjump { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(40px, 5vw, 68px); padding: 0; }
.pjump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--ctl-line, #8c7e79); border-radius: 999px; font: 600 .72rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.pjump a:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.pjump__n { opacity: .7; font-weight: 500; }
.pgroup { scroll-margin-top: calc(var(--header-h) + 24px); }
.pgroup + .pgroup { margin-top: clamp(56px, 7vw, 104px); }
.pgroup__head { display: grid; gap: 6px 36px; align-items: end; margin-bottom: clamp(22px, 3vw, 36px); padding-top: 22px; border-top: 1px solid var(--line2); }
.pgroup__n { font: 300 clamp(1.1rem, 1rem + .5vw, 1.4rem)/1 var(--f-disp); color: var(--acc); letter-spacing: .04em; }
.pgroup__t { font: 300 clamp(1.7rem, 1.2rem + 2vw, 2.9rem)/1.08 var(--f-disp); letter-spacing: -.01em; }
.pgroup__d { margin: 0; max-width: 56ch; color: var(--muted); }
.pgroup__c { margin: 0; font: 600 .72rem/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) {
  .pgroup__head { grid-template-columns: minmax(0, 1fr) auto; }
  .pgroup__head > :not(.pgroup__c) { grid-column: 1; }
  .pgroup__c { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}
.shead--courses { gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); }
.shead--courses .lede { max-width: 60ch; margin: 0; font-size: clamp(.98rem, .94rem + .2vw, 1.1rem); color: var(--muted); }

/* ===== Website freshen-up 2026-11-03 — NEW rules only. BASE = site/src/styles.css verbatim.
   The builder appends this block to styles.css (nothing above it changes). Tokens, bands, type roles,
   buttons, hero, pillars wheel, cycle and footer are the site's own. ===== */

/* themed browser surfaces (craft floor) */
::selection { background: var(--maroon); color: #f8f1ec; }
html { scrollbar-color: var(--maroon-ink) var(--ink); caret-color: var(--maroon); }

/* =====================================================================
   HOME
   ===================================================================== */

/* ---- product photograph: a quiet full-width still under each product head ---- */
.prod__photo { margin: clamp(40px, 6vw, 72px) 0 0; aspect-ratio: 5 / 2; border-radius: var(--rad); overflow: hidden; background: var(--cream2); box-shadow: 0 28px 64px -40px rgba(20, 13, 12, .55); }
.prod__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
@media (max-width: 759px) { .prod__photo { aspect-ratio: 4 / 3; } }

/* ---- a "part" = one labelled stage of the product story (The problem · How it solves it) ---- */
.part { margin-top: clamp(64px, 9vw, 120px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line2); }
.part__k { margin-bottom: clamp(32px, 5vw, 56px); }
.part__cta { margin-top: clamp(36px, 5vw, 56px); }

/* ---- beat: one stage of the argument (The problem · The impact), in sequence — label + heading left, the figures right.
        Problem and impact each get a full band at the top of the page; inside Baseline+ the same beats sit on ruled .parts. ---- */
.beat { display: grid; gap: clamp(32px, 5vw, 48px); }
.beat__k { flex-wrap: wrap; row-gap: 8px; white-space: nowrap; }
.beat__k span { display: inline-flex; align-items: center; gap: 14px; color: var(--muted); }
.beat__k span::before { content: ''; width: 28px; height: 1px; background: var(--line2); }
.beat__h { margin: 0; font: 260 clamp(2.1rem, 1.3rem + 2.8vw, 3.9rem)/1.05 var(--f-disp); letter-spacing: -.015em; word-spacing: .04em; font-variation-settings: 'opsz' 144; color: var(--fg); max-width: 15ch; text-wrap: balance; }
.beat__h em { font-style: italic; font-weight: 300; color: var(--acc); }
.beat__close { margin: 26px 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; max-width: 48ch; text-wrap: pretty; }
.beat__note { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font: italic 300 clamp(1.02rem, .95rem + .25vw, 1.15rem)/1.5 var(--f-disp); color: var(--acc); max-width: 50ch; text-wrap: pretty; }
.part.beat { padding-top: clamp(40px, 6vw, 64px); }
.part--prod .prod__photo--tight { margin-top: 0; }
@media (min-width: 900px) {
  .beat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
}

/* ---- figures: the numbers as typography, not boxes (bar 2.7); sources as footnotes; colour follows the band (--acc) ---- */
.fig { display: grid; gap: 0 clamp(24px, 3vw, 40px); margin: 0; border-top: 1px solid var(--line); }
.fig__item { display: grid; align-content: start; gap: 12px; padding: 22px 0 24px; border-bottom: 1px solid var(--line); container-type: inline-size; }
.fig__n { margin: 0; font: 200 clamp(2.5rem, 24cqi, 4rem)/1 var(--f-disp); font-variation-settings: 'opsz' 144; letter-spacing: -.035em; color: var(--acc); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.fig__n--words { font-size: clamp(2.2rem, 21cqi, 3.5rem); letter-spacing: -.025em; }
.fig__d { margin: 0; color: var(--fg); font-size: .98rem; line-height: 1.55; max-width: 34ch; text-wrap: pretty; }
.fig__src { display: block; margin-top: 10px; font: 600 .68rem/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 600px) { .fig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- ledger: Today | With Baseline as one comparison table, one row per promise (numbered 01–04 like the pillars) ---- */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); counter-reset: ledger; }
.ledger__head { display: none; }
.ledger__row { display: grid; gap: 14px 40px; padding: clamp(26px, 3.5vw, 40px) 0; border-bottom: 1px solid var(--line); counter-increment: ledger; }
.ledger__t { margin: 0; font: 300 clamp(1.4rem, 1.15rem + .8vw, 1.9rem)/1.12 var(--f-disp); letter-spacing: -.012em; font-variation-settings: 'opsz' 144; color: var(--fg); text-wrap: balance; }
.ledger__t::before { content: counter(ledger, decimal-leading-zero); display: block; margin-bottom: 10px; font: 600 .68rem/1.4 var(--f-ui); letter-spacing: .18em; color: var(--acc); }
.ledger__now, .ledger__with { margin: 0; font-size: 1rem; line-height: 1.6; max-width: 44ch; text-wrap: pretty; }
.ledger__now { color: var(--muted); }
.ledger__with { color: var(--fg); }
.ledger__l { display: block; margin-bottom: 8px; font: 600 .68rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ledger__with .ledger__l { color: var(--acc); }
@media (max-width: 899px) { .ledger__with { padding-top: 14px; border-top: 1px solid var(--line); } }
@media (min-width: 900px) {
  .ledger__head, .ledger__row { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 6fr); column-gap: clamp(32px, 4vw, 56px); }
  .ledger__head { display: grid; padding: 0 0 14px; font: 600 .68rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .ledger__head span:last-child { color: var(--acc); padding-left: 24px; }
  .ledger__row { align-items: start; }
  .ledger__with { padding-left: 24px; border-left: 2px solid rgba(132, 35, 29, .55); font-size: 1.04rem; }
  .ledger__l { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ---- the cycle block inside Baseline+: today's .solve, head-only (no lede) ---- */
.solve--cycle > div:first-child { align-self: start; }
.solve--cycle .solve__h { max-width: 16ch; }

/* =====================================================================
   ABOUT
   ===================================================================== */

/* ---- no hero: the journey opens the page under the header ---- */
.sec--open { padding-top: calc(var(--header-h) + clamp(44px, 7vw, 96px)); } /* the fixed header sits over the first band: clear it */
.split--story .split__media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 45%; box-shadow: 0 28px 64px -40px rgba(20, 13, 12, .55); }

/* ---- the team, per Ashton's mock-up: four headshots on a dark band with a warm glow, story panel beneath ---- */
.sec--team { position: relative; overflow: hidden; }
.sec--team::before { content: ''; position: absolute; left: -10%; right: -10%; top: -10%; height: 80%; background: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(132, 35, 29, .55), rgba(132, 35, 29, 0) 70%); pointer-events: none; }
.sec--team .wrap { position: relative; }
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 28px); }
@media (min-width: 760px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tm__btn { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; border-radius: 12px; }
.tm__btn:focus-visible { outline: 2px solid var(--tint); outline-offset: 6px; }
.tm__img { display: block; aspect-ratio: 3 / 4; margin-bottom: 10px; border-radius: 10px; overflow: hidden; background: var(--maroon-deep); box-shadow: 0 0 0 1px rgba(233, 180, 172, 0); transition: box-shadow .4s var(--ease); }
.tm__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.9); transition: transform .7s var(--ease), filter .4s var(--ease); }
.tm__btn:hover .tm__img img, .tm__btn:focus-visible .tm__img img, .tm__btn[aria-expanded="true"] .tm__img img { transform: scale(1.03); filter: none; }
.tm__btn[aria-expanded="true"] .tm__img { box-shadow: 0 0 0 1px rgba(233, 180, 172, .7); }
.tm__name { font: 400 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.2 var(--f-disp); font-variation-settings: 'opsz' 144; color: var(--fg); }
.tm__role { font: 600 .68rem/1.45 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.tm-story { margin-top: clamp(32px, 5vw, 56px); padding: clamp(26px, 4vw, 48px); border-radius: var(--rad); background: var(--card); border: 1px solid var(--line); }
.tm-story__k { margin: 0 0 20px; font: 600 .68rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* P4 (online review: hovering the photos made the page jump): every bio sits in the same grid cell, so the panel is always as tall as the longest bio and swapping people moves nothing. */
.tm-story { display: grid; }
.tm-story__p { grid-area: 1 / 1; visibility: hidden; }
.tm-story__p.is-on { visibility: visible; }
.tm-story__n { margin: 0 0 20px; font: 300 clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem)/1.1 var(--f-disp); font-variation-settings: 'opsz' 144; letter-spacing: -.012em; color: var(--fg); }
.tm-story__n span { display: block; margin-top: 8px; font: 600 .68rem/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.tm-story__body p { color: var(--muted); max-width: 62ch; }
.tm-story__body p:last-child { margin-bottom: 0; }
.tm-story__ph { font: italic 300 1.15rem/1.5 var(--f-disp); }
@media (min-width: 900px) { .tm-story__body { columns: 2; column-gap: clamp(32px, 4vw, 56px); } .tm-story__body p { max-width: none; break-inside: avoid; } }
@media (prefers-reduced-motion: reduce) { .tm__img, .tm__img img { transition: none; } }
/* ---- touch devices have no hover: the panel's instruction swaps its verb (the words are otherwise Ashton's) ---- */
.if-touch { display: none; }
@media (hover: none) { .if-hover { display: none; } .if-touch { display: inline; } }

/* Review pins, 2026-11-03: one opaque navigation bar on every page, including the cream About opener. */
body:has(main > .sec--open) .site-header:not(.is-stuck) { background: var(--ink); border-bottom-color: transparent; }

/* Problem then impact in reading order, side by side on desktop and stacked on phones. */
.product-opening .back { margin-bottom: clamp(30px, 4vw, 48px); }
.problem-pair, .overview__pair { display: grid; gap: 48px; }
.problem-pair__panel { min-width: 0; }
.problem-pair__panel .beat__body { margin-top: 36px; }
.problem-pair__panel .beat__h { max-width: 17ch; }
.problem-pair__panel + .problem-pair__panel { padding-top: 40px; border-top: 1px solid var(--line); }
.overview { padding-block: clamp(48px, 6vw, 80px); }
.overview .beat__h { font-size: clamp(2rem, 1.3rem + 2.1vw, 3rem); max-width: 20ch; }
.overview .beat__close { margin-top: 22px; max-width: 52ch; }
.product-teaser__grid { display: grid; gap: 36px; align-items: center; }
.product-teaser .prod__photo { margin: 0; aspect-ratio: 4 / 3; }
.product-teaser .prod__name { font-size: clamp(3.1rem, 6vw, 5rem); }
.product-teaser__copy { max-width: 58ch; color: var(--muted); }
.product-teaser .btn-row { margin-top: 28px; }
.product-next { padding-block: clamp(48px, 6vw, 72px); }
.problem-pair__panel .fig:has(.fig__item:only-child) { grid-template-columns: minmax(0, 1fr); }
.solution-heading { margin: 0 0 clamp(28px, 4vw, 48px); font: 300 clamp(2.2rem, 1.4rem + 2.5vw, 3.6rem)/1.1 var(--f-disp); letter-spacing: -.015em; font-variation-settings: 'opsz' 144; text-wrap: balance; color: var(--fg); }
.solution-heading--teaser { margin: 30px 0 16px; }
/* Comparison labels have their own breathing space below the top rule, aligned with their text columns. */
.ledger__l { font-size: .78rem; letter-spacing: .08em; }
@media (min-width: 900px) {
  .problem-pair, .overview__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 80px); }
  .problem-pair__panel + .problem-pair__panel { padding: 0 0 0 clamp(32px, 4vw, 52px); border-top: 0; border-left: 1px solid var(--line); }
  .problem-pair__panel .fig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .problem-pair__panel .fig__n { font-size: clamp(2.4rem, 22cqi, 3.4rem); }
  .problem-pair__panel .fig__n--words { font-size: clamp(2.1rem, 20cqi, 3rem); }
  .product-teaser__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 80px); }
  .product-teaser .prod__photo { aspect-ratio: 4 / 5; }
  .ledger__head { padding: 22px 0; border-bottom: 1px solid var(--line); font: 500 1rem/1.4 var(--f-body); text-transform: none; letter-spacing: 0; }
  .ledger__head span:last-child { padding-left: 0; }
  .ledger__with { padding-left: 0; border-left: 0; }
}
/* Narrow layouts use tap language even when a desktop browser is resized for review. */
@media (max-width: 759px) { .if-hover { display: none; } .if-touch { display: inline; } }

/* Films live, 2026-11-03: reuse the film layout/player next to the existing solution heading. */
.solution-film { margin: 0 0 clamp(32px, 5vw, 56px); padding: 0; border: 0; align-items: center; }
.solution-film .solution-heading { margin-bottom: 24px; }
.solution-film .film-card { scroll-margin-top: calc(var(--header-h) + 28px); }
@media (min-width: 900px) { .solution-film .film-card--1x1 .film__box { margin-inline: auto; } }

/* P3: the About hero starts at y=0; account for the shared header's 1px border in its overlap. */
body:has(main > .hero--about) .site-header { margin-bottom: calc(-1 * (var(--header-h) + 1px)); }

/* P4 (online review, Ashton): home problem bands are two sides - people, then business - with the client's figures set large. */
.overview__side .fig { margin-top: clamp(28px, 4vw, 40px); }
.overview__side .beat__close { margin-top: 24px; }
.overview .fig__n { font-size: clamp(2.8rem, 24cqi, 4.6rem); }
.overview .fig__n--words { font-size: clamp(2.4rem, 21cqi, 4rem); }
.overview .fig__d { font-size: 1rem; max-width: 30ch; }
@media (min-width: 900px) {
  .overview .problem-pair__panel .fig__n { font-size: clamp(2.8rem, 28cqi, 5rem); }
  .overview .problem-pair__panel .fig__n--words { font-size: clamp(2.4rem, 24cqi, 4.2rem); }
  .overview .problem-pair__panel .fig:has(.fig__item:only-child) .fig__n { font-size: clamp(3.4rem, 16cqi, 5.6rem); }
}


/* =====================================================================================================================
   W1, 2026-11-04 - Home in Ashton's PDF format; one type scale across Home, About, Baseline and Baseline+; AA contrast on dark bands.
   Matt, Desk cards 483fed-1 (PDF sections, keep bands), 483fed-2 (their photos), 483fed-3 (stats as written, with source), 2026-11-04 07:50Z.
   Backup of the previous stylesheet: styles.css.pre-pdf-home-2026-11-04.bak.
   ===================================================================================================================== */

/* ---- The type scale (C7). One token per role; body.scale-w1 (layout.mjs) locks every same-purpose text to it on the four pages. ---- */
:root {
  --t-eyebrow: .75rem;                                   /* eyebrows, kickers, field labels */
  --t-h1: clamp(2.25rem, 1.1rem + 3.2vw, 4rem);          /* page headline: hero H1, product problem statement */
  --t-h2: clamp(1.9rem, 1.1rem + 2.2vw, 3rem);           /* section headline: every H2, closing band, product name */
  --t-card: clamp(1.4rem, 1.15rem + .7vw, 1.75rem);      /* card / row / step titles */
  --t-fig: clamp(2.6rem, 2rem + 1.6vw, 3.75rem);         /* stat figures */
  --t-lede: clamp(1.05rem, 1rem + .3vw, 1.2rem);         /* lede and hero lines */
  --t-body: 1rem;                                        /* body copy, stat labels, card text */
  --t-src: .75rem;                                       /* source lines */
}
.btn--brand { background: var(--maroon); color: #fff; border-color: rgba(246, 211, 204, .55); }
.btn--brand:hover { background: var(--maroon-ink); color: #fff; border-color: #f6d3cc; }
.btn-row--tight { margin-top: 14px; }

body.scale-w1 .h1, body.scale-w1 .beat__h { font-size: var(--t-h1) !important; line-height: 1.06 !important; font-weight: 300 !important; letter-spacing: -.012em; }
body.scale-w1 .h2, body.scale-w1 .closer__h, body.scale-w1 .prod__name, body.scale-w1 .solution-heading, body.scale-w1 .solve__h, body.scale-w1 .film__cap h2 { font-size: var(--t-h2) !important; line-height: 1.1 !important; font-weight: 300 !important; letter-spacing: -.012em; }
body.scale-w1 .h1 em, body.scale-w1 .h2 em, body.scale-w1 .beat__h em, body.scale-w1 .prod__name em { font-weight: 400; }
body.scale-w1 .cell__title, body.scale-w1 .ledger__t, body.scale-w1 .tm-story__n, body.scale-w1 .cyc__step h3, body.scale-w1 .pl__name, body.scale-w1 .pdf-card__t, body.scale-w1 .dash__title, body.scale-w1 .product-next .h2 {
  font-size: var(--t-card) !important; line-height: 1.18 !important; font-weight: 400;
}
body.scale-w1 .tm-story__n span { font-size: var(--t-body); }
body.scale-w1 .fig__n, body.scale-w1 .fig__n--words, body.scale-w1 .stat__num, body.scale-w1 .overview .fig__n, body.scale-w1 .overview .problem-pair__panel .fig__n, body.scale-w1 .problem-pair__panel .fig__n--words, body.scale-w1 .problem-pair__panel .fig__n {
  font-size: var(--t-fig) !important; font-weight: 300 !important; line-height: 1;
}
body.scale-w1 .eyebrow, body.scale-w1 .blk__k, body.scale-w1 .tm-story__k, body.scale-w1 .ledger__l, body.scale-w1 .cell__label, body.scale-w1 .pdf-card__n { font-size: var(--t-eyebrow) !important; }
body.scale-w1 .ledger__t::before { font-size: var(--t-eyebrow); }
body.scale-w1 .fig__src, body.scale-w1 .stat__src, body.scale-w1 .dash__note { font-size: var(--t-src) !important; }
body.scale-w1 .lede, body.scale-w1 .hero__lede, body.scale-w1 .product-next .lede { font-size: var(--t-lede) !important; font-weight: 400 !important; }
body.scale-w1 .fig__d, body.scale-w1 .stat__label, body.scale-w1 .ledger__now, body.scale-w1 .ledger__with, body.scale-w1 .cell p, body.scale-w1 .cyc__step p, body.scale-w1 .beat__close, body.scale-w1 .pdf-card__p, body.scale-w1 .pdf-pair__c p, body.scale-w1 .blk p, body.scale-w1 .product-teaser__copy {
  font-size: var(--t-body) !important;
}
body.scale-w1 .beat__note, body.scale-w1 .pdf-evidence__note, body.scale-w1 .cyc__loop { font-size: var(--t-lede) !important; font-weight: 400; }

/* ---- Contrast (C6): thin weight-200/300 blush and italic text on black gets heavier and lighter; muted copy on dark moves up. ---- */
body.scale-w1 .sec--dark, body.scale-w1 .hero { --acc: #f6d3cc; --muted: rgba(239, 234, 230, .9); }
body.scale-w1 .sec--dark em, body.scale-w1 .hero em { color: #f6d3cc; }
body.scale-w1 .hero__lede { color: rgba(239, 234, 230, .94); }
body.scale-w1 .sec--maroon { --muted: rgba(248, 241, 236, .94); }

body.scale-w1 .sec--cream .h2 em, body.scale-w1 .sec--cream2 .h2 em, body.scale-w1 .sec--cream .h1 em, body.scale-w1 .sec--cream2 .h1 em { color: var(--maroon); }

/* ---- Home, PDF sections ---- */
.hero--pdf { min-height: clamp(560px, 80vh, 740px); align-items: center; padding-bottom: clamp(56px, 7vw, 96px); }
.hero--pdf .hero__body { max-width: 760px; }
.hero--pdf .hero__lede { max-width: 54ch; }
.pdf-who, .pdf-mission, .pdf-challenges, .pdf-econ, .pdf-principles, .pdf-approach, .pdf-closer { padding-block: clamp(56px, 7vw, 100px); }
.pdf-head { margin-bottom: clamp(28px, 4vw, 48px); }
.pdf-split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pdf-photo { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--rad); overflow: hidden; background: var(--cream2); box-shadow: 0 28px 64px -40px rgba(20, 13, 12, .55); }
.pdf-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
@media (min-width: 900px) {
  .pdf-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .pdf-split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pdf-closer .pdf-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .pdf-photo { aspect-ratio: 4 / 5; }
  .pdf-split--rev .pdf-photo { align-self: stretch; aspect-ratio: auto; min-height: 420px; }
}
.pdf-who .lede { margin: 18px 0 0; }
.pdf-pair { display: grid; gap: 22px; margin-top: 32px; }
@media (min-width: 600px) { .pdf-pair { grid-template-columns: 1fr 1fr; gap: 28px; } }
.pdf-pair__c { border-top: 2px solid var(--maroon); padding-top: 16px; }
.pdf-pair__c .pdf-card__t { margin-bottom: 10px; }
.pdf-pair__c p { margin: 0; color: var(--muted); line-height: 1.6; }
.pdf-mission__h span, .pdf-mission__h em { display: block; }
.pdf-mission .lede { margin: 28px 0 0; max-width: 62ch; color: var(--fg); }
.pdf-mission__close { margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line2); max-width: 62ch; }
.pdf-mission__close p { margin: 0 0 6px; color: var(--muted); font-size: var(--t-body); }
.pdf-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pdf-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); background: var(--card); border: 1px solid var(--line); border-radius: var(--rad); }
.pdf-card__n { margin: 0; font: 600 .75rem/1.3 var(--f-ui); letter-spacing: .2em; color: var(--acc); }
.pdf-ic { width: 30px; height: 30px; color: var(--acc); }
.pdf-card__t { margin: 0; font-family: var(--f-disp); letter-spacing: -.01em; color: var(--fg); }
.pdf-card__p { margin: 0; color: var(--muted); line-height: 1.6; }
.pdf-card__a { margin-top: auto; padding-top: 10px; min-height: 44px; display: inline-flex; align-items: center; gap: .5em; font: 600 .75rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--link); text-decoration: none; }
.pdf-card__a::after { content: '\2192'; transition: transform .25s var(--ease); }
.pdf-card__a:hover::after { transform: translateX(5px); }
@media (min-width: 600px) { .pdf-cards--five, .pdf-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pdf-cards--five { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pdf-cards--five > li { grid-column: span 2; } .pdf-cards--five > li:nth-child(n+4) { grid-column: span 3; } }
@media (min-width: 1500px) { .pdf-cards--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pdf-cards--five > li, .pdf-cards--five > li:nth-child(n+4) { grid-column: auto; } }
@media (min-width: 1100px) { .pdf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pdf-step__n { margin: 0 0 4px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--maroon); color: #fff; font: 600 .875rem/1 var(--f-ui); }
.pdf-evidence { margin-top: clamp(24px, 3vw, 36px); padding: clamp(28px, 4vw, 48px); border-radius: var(--rad); background: var(--ink); color: var(--fg); }
.pdf-evidence .pdf-card__t { margin-bottom: 20px; }
.pdf-evidence .fig { border-top: 1px solid var(--line); }
.pdf-evidence__note { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--f-disp); font-style: italic; line-height: 1.5; color: var(--acc); max-width: 62ch; text-wrap: pretty; }
.pdf-econ__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .pdf-econ__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pdf-ticks { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.pdf-ticks li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--fg); line-height: 1.55; }
.pdf-tick { width: 20px; height: 20px; margin-top: 3px; color: var(--acc); flex: none; }
.dash { margin: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--rad); background: #fbf8f5; color: #140d0c; box-shadow: 0 28px 64px -36px rgba(0, 0, 0, .8); }
.dash__h { display: grid; gap: 4px; margin-bottom: 14px; }
.dash__title { font-family: var(--f-disp); color: #140d0c; }
.dash__note { font-family: var(--f-ui); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #554a47; }
.dash__svg { width: 100%; height: auto; }
.dash__t { font: 400 11px/1 var(--f-body); fill: #3d312e; }
.dash__t--b { font-weight: 600; fill: #140d0c; }
.dash__bar--1 { fill: #84231d; } .dash__bar--2 { fill: #a93a2e; } .dash__bar--3 { fill: #c8503f; }
.dash__line { stroke: #84231d; stroke-width: 2.5; stroke-linejoin: round; }
.dash__dot { fill: #84231d; }
.dash__grid { stroke: rgba(20, 13, 12, .16); stroke-width: 1; }
.pdf-approach__close { margin: clamp(24px, 3vw, 36px) 0 0; font-size: var(--t-lede); color: var(--fg); max-width: 62ch; }
.pdf-closer .lede { margin: 20px 0 0; max-width: 54ch; color: var(--fg); }
.pdf-closer .btn-row { margin-top: 28px; }
.pdf-closer .btn-row--tight { margin-top: 14px; }
@media (max-width: 759px) { .pdf-photo { aspect-ratio: 4 / 3; } }

/* Blog: team photos as covers and the post hero. */
.post__img img, .post-hero__img img { object-position: 50% 32%; }


/* =====================================================================================================================
   Agreed layout, 2026-11-04 - Home restored to the 3 Nov "freshen" layout shown in Ashton's recording (intake/ashton-agreed-layout-2026-11-04/).
   ADDITIVE and scoped to the .hl-* classes used only by pages/home.mjs; nothing above is changed. Backup: styles.css.pre-agreed-layout-20261104.bak.
   Problem pair (people | business) and "How X solves it" as four Today / With cards. Type sizes come from the W1 tokens above.
   ===================================================================================================================== */
.hl-product { padding-block: clamp(56px, 7vw, 104px); }
.hl-part { margin-top: clamp(48px, 7vw, 88px); }
.hl-part .part__k { margin: 0 0 clamp(16px, 2.4vw, 24px); }

/* the problem pair */
.hl-pair { display: grid; border-top: 2px solid var(--acc); border-bottom: 1px solid var(--line2); }
.hl-side { min-width: 0; padding-block: clamp(24px, 3vw, 36px); }
.hl-side + .hl-side { border-top: 1px solid var(--line2); }
.hl-side__k { margin: 0 0 14px; font: 600 var(--t-eyebrow)/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hl-side__h { margin: 0 0 clamp(20px, 2.6vw, 32px); font: 400 clamp(1.6rem, 1.25rem + 1.1vw, 2.1rem)/1.2 var(--f-disp); letter-spacing: -.01em; color: var(--fg); max-width: 22ch; text-wrap: balance; }
.hl-side__h em { font-style: normal; color: inherit; font-weight: inherit; }
.hl-side .fig { border-top: 0; gap: 20px clamp(24px, 3vw, 40px); }
.hl-side .fig__item { border-bottom: 0; padding: 0; gap: 10px; }
.hl-side .fig__d { max-width: 30ch; }
.hl-side .fig__src { margin-top: 8px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.hl-side__close { margin: clamp(18px, 2.4vw, 26px) 0 0; max-width: 52ch; font-size: var(--t-body); line-height: 1.6; color: var(--fg); text-wrap: pretty; }
.hl-side__quote { margin: 20px 0 0; padding-left: 16px; border-left: 3px solid var(--acc); max-width: 52ch; font-size: .95rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
@media (min-width: 900px) {
  .hl-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hl-side { padding-right: clamp(24px, 3vw, 40px); }
  .hl-side + .hl-side { border-top: 0; border-left: 1px solid var(--line2); padding-right: 0; padding-left: clamp(24px, 3vw, 40px); }
}
@media (min-width: 900px) and (max-width: 1179px) { .hl-side .fig { grid-template-columns: minmax(0, 1fr); } }

/* How X solves it: four Today / With cards */
.hl-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.hl-card { display: grid; align-content: start; padding: clamp(24px, 2.6vw, 34px); background: var(--card2); border-radius: 16px; box-shadow: 0 1px 2px rgba(30, 25, 45, .06), 0 6px 18px rgba(30, 25, 45, .05); }
.sec--cream2 .hl-card { background: var(--card); box-shadow: none; }
.hl-card__head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.hl-card__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--acc); background: rgba(132, 35, 29, .08); color: var(--acc); }
.hl-card__t { margin: 0; font: 400 var(--t-card)/1.18 var(--f-disp); letter-spacing: -.005em; color: var(--fg); text-wrap: balance; }
.hl-card__l { display: block; margin-bottom: 8px; font: 600 var(--t-eyebrow)/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hl-card__l--with { color: var(--acc); }
.hl-card__now, .hl-card__with { margin: 0; font-size: var(--t-body); line-height: 1.6; text-wrap: pretty; }
.hl-card__now { color: var(--muted); padding-bottom: 26px; }
.hl-card__with { position: relative; padding-top: 24px; color: var(--fg); font-weight: 500; }
.hl-card__with::before { content: ''; position: absolute; top: 0; left: 0; right: 32px; height: 1px; background: var(--acc); }
.hl-card__with::after { content: ''; position: absolute; top: -5px; right: 6px; width: 8px; height: 8px; border-right: 1.5px solid var(--acc); border-bottom: 1.5px solid var(--acc); transform: rotate(45deg) translate(-2px, -2px); }
.hl-card__with .hl-card__l { font-weight: 600; }
.hl-cta { margin-top: clamp(32px, 4.5vw, 48px); }
@media (min-width: 760px) {
  .hl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-card { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
/* 2026-11-08: the enquiry thank-you panel styles now live in the /contact/ CSS block (site/src/pages/contact.mjs, design 2026-11-08); the earlier rules here are superseded (kept in styles.css.pre-fable-2026-11-08.bak). */