/* The member portal — a fixed navy menu on the left (the same dark blue as Angela's Hub), her deep teal and gold as the
   accents, white cards on a warm ground, square corners, big easy type. */
:root { --ground: #F5F3EE; --card: #fff; --line: #E2DFD7; --hair: #ECE9E2; --ink: #121518; --ink2: #333B44; --muted: #5C636C;
  --navy: #15212B; --navy2: #1C2B38; --navy3: #243646; --primary: #204E62; --deep: #10303D; --gold: #CDB176; --gold-ink: #8A6D2F; --gold-soft: #F4ECD8;
  --green: #2E7D4F; --green-soft: #E3F0E7; --teal-soft: #E7EFF2; --teal-mid: #CFDEE4; --red: #B42318; --red-soft: #F8E4E1;
  --serif: 'Spectral', Georgia, serif; --sans: 'Albert Sans', 'Segoe UI', system-ui, Arial, sans-serif; --r: 2px; --side: 268px; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--sans); font-size: 17.5px; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; line-height: 1.55; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--primary); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -0.01em; line-height: 1.18; }
h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 21px; }
p { margin: 0; }
.muted { color: var(--muted); }
.lbl { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; }
mark { background: #F6E7B4; color: inherit; padding: 0 2px; }

/* ---- the portal frame: sidebar + main */
.portal { display: flex; min-height: 100vh; }
.side { width: var(--side); flex: none; background: var(--navy); color: #CFD8DF; position: sticky; top: 0; height: 100vh; overflow: auto; display: flex; flex-direction: column; border-right: 0; }
.side .logo { display: block; padding: 26px 24px 10px; }
.side .logo img { height: 40px; width: auto; display: block; }
.side .tag { display: block; padding: 0 24px 18px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8FA3B1; }
.side nav { display: flex; flex-direction: column; gap: 18px; padding: 6px 14px 18px; }   /* tightened ~6 % (Ollie, 2026-10-07) */
.side .glbl { display: block; padding: 0 10px 5px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8FA3B1; position: relative; margin-bottom: 4px; }
.side .glbl::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: var(--gold); opacity: 0.7; }
.side .glbl.rule { height: 6px; padding: 0; margin-bottom: 8px; }   /* an unnamed group: just the gold line */
.side .it { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: 0; color: #CFD8DF; padding: 9px 12px; font-size: 16px; font-weight: 600; border-radius: var(--r); text-decoration: none; }
.side .it:hover { background: var(--navy2); color: #fff; }
.side .it.on { background: var(--navy3); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.side .it .ic { width: 22px; height: 22px; flex: none; opacity: 0.9; }
.side .it .ic svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side .it small { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: #0E171E; background: var(--gold); border-radius: 999px; line-height: 1; }   /* every count in the menu: the same small gold circle */
.side .it small.soft { background: var(--gold); color: #0E171E; }
.side .me { margin-top: auto; padding: 18px 24px 22px; border-top: 1px solid #0E171E; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #AEBCC7; }
.side .me strong { color: #fff; font-size: 16px; display: block; }
.side .me .btn { align-self: flex-start; }
/* the top bar is the same navy as the sidebar; the pale page below it has a rounded corner where the two navy edges meet */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--navy); }
.topbar { background: var(--navy); color: #fff; border-bottom: 0; display: flex; align-items: center; gap: 18px; padding: 0 32px; min-height: 68px; position: sticky; top: 0; z-index: 20; }
/* the bar carries no page name: the lit item in the sidebar says where you are */
.topbar form input { border-color: rgba(255,255,255,0.35); }
.content { background: var(--ground); border-top-left-radius: 26px; }
.footer { border-top-left-radius: 0; }
.topbar form { margin-left: auto; display: flex; align-items: center; gap: 0; max-width: 460px; width: 100%; }
.topbar form input { width: 100%; border: 1px solid #C9C4B9; border-right: 0; background: #fff; padding: 10px 14px; font-size: 15.5px; border-radius: var(--r) 0 0 var(--r); }
.topbar form input:focus { outline: 2px solid rgba(32,78,98,0.28); border-color: var(--primary); }
.topbar form button { border: 1px solid var(--primary); background: var(--primary); color: #fff; padding: 10px 14px; border-radius: 0 var(--r) var(--r) 0; display: inline-flex; }
.topbar form button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.topbar .menubtn { display: none; }
/* Back: at the left of the top bar whenever there is somewhere to go back to */
.topbar .back { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; color: #E3C784; font-weight: 800; font-size: 17.5px; letter-spacing: 0.01em; padding: 8px 16px 8px 0; margin-right: 4px; border-right: 1px solid rgba(255,255,255,0.22); white-space: nowrap; cursor: pointer; }
.topbar .back:hover { color: #FFE9B3; background: none; text-decoration: none; }
.topbar .back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.content { padding: 30px 32px 60px; flex: 1; }
.content.flush { padding: 0 0 60px; }
.in { max-width: 1120px; margin: 0 auto; }
.in.narrow { max-width: 860px; display: flex; flex-direction: column; gap: 20px; }
.footer { background: #fff; border-top: 1px solid var(--line); color: var(--muted); padding: 22px 32px; font-size: 14px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.footer .right { margin-left: auto; text-align: right; }

/* ---- buttons, fields, notes */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--primary); color: #fff; border: 1px solid var(--primary); padding: 12px 22px; font-weight: 700; font-size: 16.5px; border-radius: var(--r); white-space: nowrap; text-decoration: none; }
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.5; cursor: default; filter: none; }
.btn.plain { background: #fff; color: var(--ink); border-color: #C9C4B9; }
.btn.plain:hover { background: var(--ground); filter: none; }
.btn.go { background: var(--green); border-color: var(--green); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn.ghost:hover { background: rgba(255,255,255,0.1); filter: none; }
.btn.sm { padding: 8px 14px; font-size: 15px; }
.btn.lg { padding: 15px 28px; font-size: 18px; }
.btn.link { background: none; border: 0; color: var(--primary); padding: 0; text-decoration: underline; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld label { font-size: 15.5px; font-weight: 700; color: var(--ink2); }
.fld .help { font-size: 14.5px; color: var(--muted); }
.fld .req { color: var(--gold-ink); }
.f { width: 100%; border: 1px solid #C9C4B9; background: #fff; padding: 13px 15px; border-radius: var(--r); font-size: 17.5px; }
.f:focus { outline: 2px solid rgba(32,78,98,0.28); border-color: var(--primary); }
.f.computed { background: var(--ground); color: var(--ink2); }
.radios { display: flex; gap: 18px; flex-wrap: wrap; }
.radios label { display: flex; align-items: center; gap: 8px; font-size: 17.5px; cursor: pointer; }
.radios input { width: 19px; height: 19px; accent-color: var(--primary); }
.grid { display: grid; gap: 16px 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.c6 { grid-column: span 6; } .c3 { grid-column: span 3; } .c2 { grid-column: span 2; }
.note { padding: 14px 16px; border-left: 4px solid var(--gold); background: #FBF8F1; font-size: 16.5px; }
.note.info { border-left-color: var(--primary); background: var(--teal-soft); }
.note.good { border-left-color: var(--green); background: var(--green-soft); }
.note.bad { border-left-color: var(--red); background: var(--red-soft); }
.pre { white-space: pre-wrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 1px 2px rgba(21,24,27,0.05), 0 6px 18px rgba(21,24,27,0.05); }
.card.pad { padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; }

/* ---- the gate: invitation and sign-in, before anyone is signed in */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; background: var(--navy) url(img/wash-process.jpg) center / cover no-repeat; background-blend-mode: luminosity; position: relative; }
.gate::before { content: ''; position: absolute; inset: 0; background: rgba(21,33,43,0.90); }   /* the map sketch stays as a whisper of texture under the navy */
.gate .folio { position: relative; width: min(1180px, 100%); min-height: 660px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: #FBFAF7; border: 1px solid rgba(205,177,118,0.7); box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 10px rgba(255,255,255,0.03); }
/* the art panel: his sketch at full strength, the words set on a soft navy gradient along the foot */
.gate .pane.art { position: relative; overflow: hidden; background: #EFE9DC; min-height: 660px; }
.gate .pane.art .sketch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; filter: sepia(0.08) contrast(1.04); }   /* the left of his sketch: the tree, the slope and the path fill the panel; the blank sky stays out */
.gate .pane.art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,33,43,0) 34%, rgba(21,33,43,0.42) 58%, rgba(21,33,43,0.93) 100%); }
.gate .pane.art .lockup { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 44px 48px 40px; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.gate .pane.art .logo { height: 44px; width: auto; align-self: flex-start; margin-bottom: 14px; }
.gate .pane.art .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.gate .pane.art h1 { font-family: var(--serif); font-size: 50px; line-height: 1.02; margin: 0; color: #fff; }
.gate .pane.art .lead { margin: 4px 0 0; font-size: 17.5px; line-height: 1.55; color: #D9E1E6; max-width: 44ch; }
/* the form panel: cream, generous, the form itself with no extra card chrome */
.gate .pane.form { display: flex; flex-direction: column; justify-content: center; padding: 56px 56px 32px; border-left: 1px solid rgba(205,177,118,0.45); }
.gate .pane.form .gcard { background: transparent; border: 0; box-shadow: none; padding: 0; width: 100%; max-width: 440px; margin: 0 auto; gap: 18px; }
.gate .pane.form .gcard h2 { font-size: 32px; margin: 0 0 2px; }
.gate .pane.form .gcard .gfoot { font-size: 14.5px; margin: 0; }
.gate .pane.form .gcard .btn.lg, .gate .pane.form .gcard .btn.go { width: 100%; justify-content: center; }
.gate .pane.form .glegal { margin-top: auto; padding-top: 36px; font-size: 12.5px; letter-spacing: 0.03em; color: var(--muted); text-align: center; }

/* ---- home: the welcome screen. A greeting, where you are, your documents, tidy tiles. Fits one screen. */
.home { display: flex; flex-direction: column; gap: 22px; }
.welcome { display: grid; grid-template-columns: 132px minmax(0, 1fr) 280px; gap: 28px; align-items: center; padding: 26px 32px; }
.welcome .cta { border-left: 1px solid var(--hair); padding-left: 28px; display: flex; flex-direction: column; gap: 10px; align-self: stretch; justify-content: center; }
.welcome .cta .btn { align-self: flex-start; }
.welcome .cta .btn.final { font-size: 20px; padding: 17px 30px; box-shadow: 0 0 0 4px rgba(46,125,79,0.18); animation: finalpulse 2.4s ease-in-out infinite; }
@keyframes finalpulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(46,125,79,0.18); } 50% { box-shadow: 0 0 0 10px rgba(46,125,79,0); } }
.welcome .cta > span:last-child { font-size: 14.5px; color: var(--ink2); line-height: 1.45; }
.welcome img { width: 132px; height: 132px; object-fit: cover; object-position: center 20%; border: 1px solid var(--line); }
.welcome h1 { font-size: 38px; margin: 4px 0 8px; }
.welcome .lead { font-size: 17px; color: var(--ink2); max-width: 78ch; line-height: 1.55; }
.welcome .sig { margin-top: 10px; font-size: 15px; color: var(--muted); }
.welcome .sig strong { color: var(--ink); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.panel { padding: 24px 28px 22px; display: flex; flex-direction: column; gap: 16px; }
.panel .ph h2 { font-size: 24px; margin-top: 4px; }
.panel .acts { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 6px; }
.journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.journey li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--hair); color: var(--muted); }
.journey li:last-child { border-bottom: 0; }
.journey li i { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #C7C3BA; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 13px; margin-top: 2px; background: #fff; }
.journey li strong { display: block; font-size: 16px; color: var(--ink2); }
.journey li span { display: block; font-size: 14.5px; line-height: 1.45; }
.journey li.done i { background: var(--green); border-color: var(--green); color: #fff; }
.journey li.done strong { color: var(--ink2); }
.journey li.now { color: var(--ink2); }
.journey li.now i { background: var(--primary); border-color: var(--primary); color: #fff; }
.journey li.now strong { color: var(--ink); font-size: 17px; }
.sets { display: flex; flex-direction: column; }
.set { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.set:last-child { border-bottom: 0; }
.set i { width: 12px; height: 12px; border-radius: 50%; background: #C7C3BA; display: block; }
.set.ready i { background: var(--green); } .set.prep i { background: var(--primary); }
.set strong { display: block; font-size: 16px; }
.set span { display: block; font-size: 14px; color: var(--muted); line-height: 1.4; }
.set em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.set.ready em { color: var(--green); } .set.prep em { color: var(--primary); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; box-shadow: 0 1px 2px rgba(21,24,27,0.05), 0 6px 18px rgba(21,24,27,0.05); min-height: 150px; }
.tile:hover { border-color: #C9C4B9; box-shadow: 0 8px 26px rgba(21,24,27,0.12); }
.tile .ic { width: 30px; height: 30px; color: var(--primary); margin-bottom: 4px; }
.tile .ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile strong { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.tile span { font-size: 15px; color: var(--ink2); line-height: 1.45; }
.tile em { font-style: normal; margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); }
/* (the long scrolling home: kept for the collage pieces, not shown) */
.banner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; background: var(--primary); border-bottom: 3px solid var(--gold); }
.banner div { height: clamp(130px, 13vw, 190px); background: var(--deep) center / cover no-repeat; }
.intro { padding: 44px 32px 20px; text-align: center; }
.intro .in { max-width: 820px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.intro h1 { font-size: 42px; max-width: 18ch; }
.intro .lead { font-size: 18px; color: var(--ink2); max-width: 62ch; line-height: 1.6; }
.status { background: #fff; color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--gold); padding: 24px 30px 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; width: 100%; max-width: 680px; box-shadow: 0 1px 2px rgba(21,24,27,0.05), 0 8px 24px rgba(21,24,27,0.07); }
.status h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; }
.status p { color: var(--ink2); font-size: 16.5px; max-width: 54ch; }
.status .acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.track { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: #fff; }
.track .st { padding: 16px 18px; display: flex; gap: 14px; align-items: center; border-right: 1px solid var(--hair); color: var(--muted); font-size: 16px; }
.track .st:last-child { border-right: 0; }
.track .st i { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #C7C3BA; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 14px; }
.track .st.done { color: var(--ink2); }
.track .st.done i { background: var(--green); border-color: var(--green); color: #fff; }
.track .st.now { color: var(--ink); font-weight: 700; background: var(--teal-soft); box-shadow: inset 0 -3px 0 var(--gold); }
.track .st.now i { background: var(--primary); border-color: var(--primary); color: #fff; }
.sec { padding: 36px 32px; }
.sec .in { max-width: 1040px; }
.sec.last { padding-bottom: 60px; }
.sec .head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 22px; }
.sec .head h2 { max-width: 30ch; }
.sec .head p { color: var(--ink2); max-width: 64ch; font-size: 17px; }
.sec .head .lbl { display: block; margin-bottom: 6px; }
.sec .head .btn { margin-top: 6px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { background: #fff; border: 1px solid var(--line); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--teal-mid); }
.step.you { border-top-color: var(--gold); }
.step .n { font-family: var(--serif); font-size: 34px; color: var(--primary); line-height: 1; }
.step h3 { font-size: 19.5px; }
.step p { font-size: 15.5px; color: var(--ink2); }
.step .tag { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pcard { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.pcard .pic { aspect-ratio: 16 / 10; background: var(--teal-soft) center / cover no-repeat; border-bottom: 1px solid var(--hair); }
.pcard .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcard h3 { font-size: 20px; }
.pcard p { font-size: 15.5px; color: var(--ink2); }
.pcard .foot { margin-top: auto; padding-top: 10px; display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--muted); }
.pcard .count { font-family: var(--serif); font-size: 15px; color: var(--gold-ink); letter-spacing: 0.02em; border-bottom: 2px solid var(--gold); align-self: flex-start; padding-bottom: 2px; margin-bottom: 4px; }
.pcard.link { cursor: pointer; text-align: left; border-radius: var(--r); text-decoration: none; color: inherit; }
.pcard.link:hover { border-color: #C9C4B9; box-shadow: 0 8px 26px rgba(21,24,27,0.12); }
.about { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 32px; }
.about .por { display: flex; flex-direction: column; gap: 10px; }
.about .por img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; border: 1px solid var(--line); }
.about blockquote { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.45; color: var(--ink); }
.about blockquote::before { content: '“'; color: var(--gold); font-size: 54px; line-height: 0; vertical-align: -22px; margin-right: 4px; }
.about .sig { margin-top: 14px; display: flex; flex-direction: column; gap: 3px; }
.about .sig strong { font-size: 17px; }
.about .sig span { color: var(--muted); font-size: 15px; }
.programs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---- the questionnaire */
.qhead { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.qhead h2 { font-size: 30px; }
.qhead .prog { margin-left: auto; min-width: 260px; font-size: 15px; color: var(--muted); }
.qhead .prog .bar { height: 8px; background: var(--hair); margin-top: 8px; }
.qhead .prog .bar i { display: block; height: 100%; background: var(--primary); }
.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.rail .s { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--hair); cursor: pointer; font-size: 16px; color: var(--ink2); }
.rail .s:last-of-type { border-bottom: 0; }
.rail .s:hover { background: #FAF9F6; }
.rail .s.on { color: var(--ink); font-weight: 700; box-shadow: inset 4px 0 0 var(--gold); background: var(--teal-soft); }
.rail .s .d { width: 28px; height: 28px; border: 1.5px solid #C7C3BA; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); flex: none; background: #fff; }
.rail .s.done .d { background: var(--green); border-color: var(--green); color: #fff; }
.rail .s.seen .d { border-color: var(--teal-mid); color: var(--primary); }
.rail .s .opt { margin-left: auto; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rail .sidecard { padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; font-size: 15.5px; color: var(--ink2); }
.rail .sidecard strong { color: var(--ink); }
.rep { border: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; background: #FCFBF9; }
.rep .row.head { justify-content: space-between; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px solid var(--hair); }
.missmark { color: var(--red); font-weight: 700; font-family: var(--serif); }
/* the fill-in view of a document: underlined values, red bold markers you can click, and the Fill in now drawer */
.btn.alert { background: var(--red); border-color: var(--red); color: #fff; }
.fillbar { display: flex; gap: 18px; align-items: center; padding: 14px 18px; background: var(--red-soft); border-bottom: 1px solid var(--line); }
.fillbar.ok { background: var(--green-soft); }
.fillbar > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fillbar strong { font-size: 16px; } .fillbar span { font-size: 14.5px; color: var(--ink2); }
.fillbar.ok .btn { margin-left: auto; }
.vtabs { display: inline-flex; border: 1px solid #C9C4B9; border-radius: var(--r); overflow: hidden; }
.vtabs button { border: 0; background: #fff; padding: 8px 14px; font-size: 15px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.vtabs button.on { background: var(--primary); color: #fff; }
.docwrap { background: rgba(255,255,255,0.08); flex: 1; overflow: auto; padding: 28px 20px; }   /* the frame around the page is near-clear glass now, not grey */
.docview { background: #fff; padding: 56px 64px 64px; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: #111; max-width: 820px; margin: 0 auto; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.08); border: 1px solid var(--line); min-height: 60vh; }
.docview h2 { font-size: 20px; text-align: center; margin: 0 0 18px; font-weight: 700; font-family: var(--serif); }
.docview p { margin: 0 0 14px; text-align: justify; }
.docview .sp { height: 10px; }
.docview u.val { text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.docview .missbtn { background: none; border: 0; padding: 0 2px; font: inherit; font-weight: 700; color: var(--red); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.docview .missbtn:hover { background: var(--red-soft); }
.docview .sign { margin-top: 48px; } .docview .sign .line { margin-top: 40px; }
.filldrawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100vw); background: #fff; z-index: 70; box-shadow: -12px 0 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; border-left: 4px solid var(--red); }
.filldrawer .fh { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid var(--line); }
.filldrawer .fh h2 { font-size: 24px; }
.filldrawer .fh .x { margin-left: auto; color: var(--ink); font-size: 30px; line-height: 1; width: 40px; height: 36px; border: 0; background: none; cursor: pointer; }
.filldrawer .fb { flex: 1; overflow: auto; padding: 14px 24px 24px; }
.filldrawer .ff { display: flex; gap: 10px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line); background: #FAF9F6; }
.fillrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.fillrow .lhs { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--ink2); }
.fillrow .lhs strong { color: var(--red); font-family: var(--serif); font-size: 16px; line-height: 1.4; }
.fillrow .rhs { display: flex; flex-direction: column; gap: 8px; }
.fillrow.flash { background: var(--gold-soft); box-shadow: 0 0 0 8px var(--gold-soft); }
.gapsec.optional { border-left: 4px solid var(--gold); }
.check .it { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); align-items: flex-start; }
.check .it .n { width: 26px; color: var(--muted); flex: none; padding-top: 2px; }
.check .it .v { flex: 1; color: var(--ink2); font-size: 15.5px; }
.check .it .v.miss { color: var(--red); }

/* ---- documents: the list on the left, the document itself on the right, never leaving the portal */
.docs { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; align-items: start; }
.printcard { grid-column: 1 / -1; padding: 22px 26px; border-left: 5px solid var(--green); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; }
.printcard .ph h2 { margin: 2px 0 0; font-size: 26px; }
.printcard .pacts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.printcard .phelp { grid-column: 1 / -1; margin: 4px 0 0; font-size: 15px; color: var(--ink2); line-height: 1.5; max-width: 90ch; }
.printcard .psteps { grid-column: 1 / -1; margin: 6px 0 0; padding-left: 22px; font-size: 15.5px; color: var(--ink); line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 900px) { .printcard { grid-template-columns: 1fr; } .printcard .pacts { justify-content: flex-start; } }
/* the documents list: a tally, then a block per set (plain name, what is in it), roomy rows with pages and state; no light blue */
.doclist { --ok: #2E7D4F; --part: #B42318; position: sticky; top: 88px; }
.doclist .row { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.doclist .ctally { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line); }
.doclist .ctally strong { font-size: 18px; }
.doclist .ctally .sub { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.doclist .dgrp { border-top: 8px solid #EFEBE3; }
.doclist .dgh { padding: 14px 18px 12px; background: #FBFAF7; border-top: 3px solid var(--gold); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.doclist .dgh strong { font-size: 16.5px; color: var(--navy); }
.doclist .dgh .cnt { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.doclist .dgh .desc { font-size: 13.5px; color: var(--ink2); line-height: 1.4; }
.doclist .d { display: flex; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--hair); cursor: pointer; color: var(--ink2); }
.doclist .d:hover { background: #FAF9F6; }
.doclist .d.on { background: #FBF6EA; color: var(--ink); box-shadow: inset 4px 0 0 var(--gold); }
.doclist .d .dn { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #F1EEE7; color: var(--ink2); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.doclist .d .dt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doclist .d .dt strong { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.doclist .d.on .dt strong { font-weight: 700; }
.doclist .d .dm { font-size: 13.5px; color: var(--muted); }
.doclist .d .dm em { font-style: normal; }
.doclist .d .dm em.done { color: var(--ok); font-weight: 700; }
.doclist .d .dm em.part { color: var(--part); font-weight: 700; }
.doclist .d .dst { flex: none; min-width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.doclist .d .dst.done { background: var(--ok); color: #fff; }
.doclist .d .dst.part { background: var(--part); color: #fff; padding: 0 8px; }
.doclist .d .dst svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.doclist .dhow { border-top: 1px solid var(--line); }
.doclist .dhow summary { padding: 13px 18px; cursor: pointer; font-weight: 700; font-size: 15px; }
.doclist .dhow .steps { padding: 4px 18px 16px; font-size: 15px; color: var(--ink2); display: flex; flex-direction: column; gap: 8px; }
/* Ask Angela pop-up */
.popm .askback { position: fixed; inset: 0; background: rgba(21,33,43,0.45); z-index: 60; }
.popm .askpop { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, calc(100vw - 32px)); background: #fff; border-radius: var(--r); box-shadow: 0 24px 60px rgba(0,0,0,0.35); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.popm .askpop h3 { font-size: 22px; margin: 2px 0 0; }
.popm .askpop .x { background: none; border: 0; font-size: 30px; line-height: 1; color: var(--muted); padding: 0 4px; cursor: pointer; }
.popm .askpop .x:hover { color: var(--ink); }
.popm .askpop .about { font-size: 15px; color: var(--ink2); }
.popm .askpop textarea { width: 100%; border: 1px solid #C9C4B9; border-radius: var(--r); padding: 12px 14px; font: inherit; font-size: 16.5px; resize: vertical; }
.popm .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.popm .grow { flex: 1; }
.popm .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
/* How it goes: the client's order of things, the step they are on lit */
.popm .askpop.how { width: min(720px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; }
.howlist { list-style: none; counter-reset: how; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.howlist li { counter-increment: how; display: grid; grid-template-columns: 40px 1fr; gap: 3px 14px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid #D9D4C8; background: #fff; }
.howlist li::before { content: counter(how); grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.howlist li strong { font-size: 17px; }
.howlist li span { font-size: 15.5px; color: var(--ink2); line-height: 1.5; }
.howlist li.done { border-left-color: #2E7D4F; } .howlist li.done::before { background: #2E7D4F; content: '✓'; }
.howlist li.now { border-left-color: var(--gold); background: #FBF6EA; }
.howlist li.now strong::after { content: ' · you are here'; color: #8A6A2E; font-size: 14px; font-weight: 700; }
/* Speak: the microphone button, red and pulsing while it listens */
.mic { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #C9C4B9; border-radius: var(--r); padding: 11px 16px; font-weight: 700; font-size: 15.5px; color: var(--ink); cursor: pointer; }
.mic:hover { background: var(--ground); }
.mic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mic.on { background: #B42318; color: #fff; border-color: #B42318; }
.kbacts { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.kbact { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.kbact svg { width: 18px; height: 18px; flex: none; }
.kbact small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6B675F); margin-left: 4px; }
.micoff { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 14.5px; color: var(--muted, #6B675F); max-width: 420px; line-height: 1.3; }
.micoff svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.mic.on svg { animation: micpulse 1.1s ease-in-out infinite; }
@keyframes micpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.18); } }
.viewer { display: flex; flex-direction: column; min-height: 70vh; }
.viewer .vtop { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.viewer .vtop h2 { font-size: 21px; }
.viewer .vtop .meta { font-size: 14px; color: var(--muted); }
.viewer .vtop .tools { margin-left: auto; display: flex; gap: 8px; }
.viewer iframe { flex: 1; width: 100%; min-height: 70vh; border: 0; background: transparent; }
.viewer .vnote { padding: 10px 18px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--hair); display: flex; gap: 14px; align-items: center; }
.todo { counter-reset: t; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.todo div { display: flex; gap: 14px; font-size: 15.5px; color: var(--ink2); }
.todo div::before { counter-increment: t; content: counter(t); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }

/* ---- classroom: modules and recordings on the left, the recording playing on the right */
.class { display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 22px; align-items: start; }
/* the recordings list: an overall tally, then one block per group (gold rule, name, count, tally, bar), then roomy rows
   with a thumbnail, the title, the status in words and a progress bar; the one playing has a gold edge (no light blue) */
.classlist { --ok: #2E7D4F; --part: #8A6A2E; position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; }
.classlist .row { display: flex; align-items: baseline; gap: 4px 10px; min-width: 0; flex-wrap: wrap; }
.classlist .grow { flex: 1; }
.classlist .sub, .classlist .cnt { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.classlist .ctally { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line); }
.classlist .ctally strong { font-size: 18px; }
.classlist .ctally .sub { white-space: normal; margin-bottom: 6px; }
.pbar { height: 7px; background: #E7E3DA; border-radius: 4px; overflow: hidden; display: flex; }
.pbar i { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width 0.4s; }
.pbar i.done { background: var(--ok, #2E7D4F); }
.pbar i.none { background: transparent; }
.pbar.seg i { border-radius: 0; }
.classlist .cgrp { border-top: 8px solid #EFEBE3; }
.classlist .cgh { padding: 14px 18px 12px; background: #FBFAF7; border-top: 3px solid var(--gold); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.classlist .cgh strong { font-size: 16.5px; color: var(--navy); }
.classlist .v { display: flex; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--hair); cursor: pointer; color: var(--ink2); }
.classlist .v:hover { background: #FAF9F6; }
.classlist .v.on { background: #FBF6EA; color: var(--ink); box-shadow: inset 4px 0 0 var(--gold); }
.classlist .v .th { flex: none; width: 88px; height: 50px; background: var(--navy) center / cover no-repeat; border: 1px solid var(--line); }
.classlist .v .vt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.classlist .v .vt strong { font-size: 15.5px; line-height: 1.3; font-weight: 600; }
.classlist .v.on .vt strong { font-weight: 700; }
.classlist .v .vm { font-size: 13.5px; color: var(--muted); }
.classlist .v .vm em { font-style: normal; }
.classlist .v .vm em.done { color: var(--ok); font-weight: 700; }
.classlist .v .vm em.part { color: var(--part); font-weight: 700; }
.classlist .v .vst { flex: none; min-width: 38px; text-align: right; font-size: 13px; font-weight: 800; color: var(--part); }
.classlist .v .vst.done { min-width: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.classlist .v .vst svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.lesson { display: flex; flex-direction: column; }
.lesson .stage { position: relative; padding-top: 56.25%; background: #000; }
.lesson .stage video { position: absolute; inset: 0; width: 100%; height: 100%; }
.lesson .lbody { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 12px; }
.lesson .lbody h2 { font-size: 26px; }
.lesson .lbody p { color: var(--ink2); font-size: 16.5px; max-width: 70ch; }
.lesson .lnav { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hair); }
.vtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.vtile { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 0 0 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; box-shadow: 0 1px 2px rgba(21,24,27,0.05), 0 6px 18px rgba(21,24,27,0.05); overflow: hidden; }
.vtile:hover { border-color: #C9C4B9; box-shadow: 0 8px 26px rgba(21,24,27,0.12); }
.vpic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--navy) center / cover no-repeat; }
.vpic .play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(16,48,61,0.82); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.35); border: 2px solid rgba(255,255,255,0.7); }
.vtile:hover .play { background: var(--primary); }
.vpic .play svg { width: 26px; height: 26px; margin-left: 3px; }
.vpic .dur { position: absolute; right: 10px; bottom: 9px; color: #fff; font-size: 13px; font-weight: 700; background: rgba(0,0,0,0.7); padding: 2px 7px; border-radius: var(--r); }
.vtile .vt { font-weight: 700; font-size: 16.5px; padding: 4px 14px 0; line-height: 1.3; }
.vtile .vd { font-size: 14px; color: var(--muted); padding: 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- knowledge base: categories · entries · the reading page */
/* the knowledge base uses the whole width: categories at the far left, the lesson list beside them, the reading pane takes the rest */
.in.wide { max-width: none; }
.kb { display: grid; grid-template-columns: 236px 312px minmax(0, 1fr); gap: 20px; align-items: start; }
.kb .list .l .spk { margin-left: auto; flex: none; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; color: var(--primary); align-self: center; }
.kb .list .l .spk:hover { background: var(--primary); color: #fff; }
.kb .list .l .spk svg, .tts svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Read this to me */
.tts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; background: #FBF8F1; border: 1px solid #E8DFC9; border-radius: var(--r); }
.tts .main { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; font-size: 17px; padding: 12px 22px; width: auto; flex: 0 0 auto; }
.tts .main svg { width: 24px; height: 24px; }
.tts .ctl { display: inline-flex; gap: 8px; align-items: center; }
.tts .speed { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tts .speed button { background: #fff; border: 0; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.tts .speed button + button { border-left: 1px solid var(--line); }
.tts .speed button.on { background: var(--primary); color: #fff; }
.tts .prog { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.tts .prog .pbar { flex: 1; }
.tts .note { font-size: 14px; color: var(--muted); }
.reader .body p.reading, .reader .body h3.reading, .reader .body li.reading { background: #FFF4CF; box-shadow: 0 0 0 6px #FFF4CF; border-radius: 2px; }
/* reading marks: a grey ring = not read, gold = started, green check = read; the category shows "x read" with a bar */
.kb .cats .c .pbar { height: 5px; margin-top: 6px; }
.kb .list .l .lm { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #D9D4C8; display: inline-flex; align-items: center; justify-content: center; align-self: center; color: #fff; background: #fff; }
.kb .list .l .lm.started { border-color: var(--gold); background: #FBF6EA; }
.kb .list .l .lm.done { border-color: #2E7D4F; background: #2E7D4F; }
.kb .list .l .lm svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kb .list .filter { display: flex; gap: 8px; align-items: center; }
.kb .list .filter input { flex: 1; }
.kb .list .ask { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; font-weight: 800; font-size: 20px; line-height: 1; }
.kb .list .ask:hover { filter: brightness(1.12); }
.donetag { display: inline-flex; align-items: center; gap: 6px; color: #2E7D4F; font-weight: 700; font-size: 15px; }
.donetag svg, .rnav .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Ask Angela + private messages */
.askbox { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: #F3F6F7; border: 1px solid #CFDEE4; border-radius: var(--r); }
.askbox .row, .msgs .row, .compose .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.askbox .grow { flex: 1; }
.askbox textarea, .compose textarea { width: 100%; border: 1px solid #C9C4B9; border-radius: var(--r); padding: 12px 14px; font: inherit; font-size: 16.5px; resize: vertical; background: #fff; }
.askbox .btn svg, .compose .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.side .it small.alert { background: #B42318; color: #fff; }
.topbar .flag { display: inline-flex; align-items: center; gap: 6px; background: #B42318; color: #fff; border: 0; border-radius: var(--r); padding: 9px 12px; font-weight: 800; font-size: 14px; margin-left: 10px; white-space: nowrap; }
.topbar .flag svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.msgs .thread { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 18px; max-height: calc(100vh - 580px); min-height: 110px; overflow: auto; scrollbar-width: thin; }
.msgs .day { border: 1px solid var(--line); border-radius: var(--r); background: #fff; flex: none; }
.msgs .dayhead { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 11px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); border-radius: var(--r); }
.msgs .dayhead:hover { background: var(--ground); }
.msgs .dayhead .chev { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform .15s; }
.msgs .dayhead .chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.msgs .day.open .dayhead .chev { transform: rotate(90deg); }
.msgs .dayhead .dl { font-weight: 700; font-size: 16px; }
.msgs .dayhead .dn { margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; }
.msgs .dayhead .alert { background: #B3261E; color: #fff; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.msgs .day.open .dayhead { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.msgs .daybody { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.msgs .empty { font-size: 16.5px; }
.bub { max-width: 80%; padding: 12px 16px; border-radius: 12px; font-size: 16.5px; line-height: 1.55; }
.bub .who { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.bub .about { display: block; font-size: 13.5px; color: var(--muted); font-style: italic; margin-bottom: 4px; }
.bub p { margin: 0; }
.bub.her { align-self: flex-start; background: #F1F4F6; border-top-left-radius: 2px; }
.bub.me { align-self: flex-end; background: #E6F0E8; border-top-right-radius: 2px; }
.bub.sys { align-self: center; max-width: 90%; background: #FBF6EA; border: 1px solid #E8DFC9; text-align: center; font-weight: 600; }
.bub.sys svg { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: #2E7D4F; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.bub .btn.go.sm { padding: 8px 14px; font-size: 14.5px; }
.compose { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.kb .cats { position: sticky; top: 88px; }
.kb .cats .c { padding: 13px 18px; border-bottom: 1px solid var(--hair); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.kb .cats .c:last-child { border-bottom: 0; }
.kb .cats .c strong { font-size: 16px; }
.kb .cats .c span { font-size: 13.5px; color: var(--muted); }
.kb .cats .c.on { background: var(--teal-soft); box-shadow: inset 4px 0 0 var(--gold); }
.kb .list { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; }
.kb .list .filter { padding: 10px 12px; border-bottom: 1px solid var(--hair); background: #FAF9F6; }
.kb .list .filter input { width: 100%; border: 1px solid #C9C4B9; padding: 8px 12px; font-size: 15px; border-radius: var(--r); background: #fff; }
.kb .list .l { display: flex; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--hair); cursor: pointer; font-size: 15.5px; color: var(--ink2); align-items: baseline; }
.kb .list .l:hover { background: #FAF9F6; }
.kb .list .l.on { background: var(--teal-soft); color: var(--ink); font-weight: 700; box-shadow: inset 4px 0 0 var(--gold); }
.kb .list .l .n { flex: none; width: 28px; font-size: 13px; color: var(--muted); font-weight: 600; }
.reader { padding: 36px 48px 48px; display: flex; flex-direction: column; gap: 18px; min-height: 480px; }
.reader h1 { font-size: 36px; line-height: 1.2; }
.reader .body p { font-size: 18.5px; line-height: 1.75; color: var(--ink); margin: 0 0 18px; max-width: 80ch; }
.reader .body h3 { margin: 24px 0 10px; font-size: 22px; }
.reader .body ul { margin: 0 0 18px; padding-left: 26px; font-size: 18px; line-height: 1.65; max-width: 80ch; }
.reader .body li { margin-bottom: 6px; }
.reader .empty { color: var(--muted); font-size: 17px; }
.reader .rnav { display: flex; gap: 12px; border-top: 1px solid var(--hair); padding-top: 16px; flex-wrap: wrap; }

/* ---- search */
.search .big { display: flex; gap: 0; max-width: 760px; }
.search .big input { flex: 1; border: 1px solid #C9C4B9; border-right: 0; padding: 15px 18px; font-size: 19px; border-radius: var(--r) 0 0 var(--r); background: #fff; }
.search .big input:focus { outline: 2px solid rgba(32,78,98,0.28); border-color: var(--primary); }
.search .big button { border-radius: 0 var(--r) var(--r) 0; }
.results { display: flex; flex-direction: column; gap: 26px; margin-top: 26px; }
.results .grp h2 { font-size: 18px; font-family: var(--sans); font-weight: 700; color: var(--primary); margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; }
.results .grp h2 span { color: var(--muted); font-weight: 500; font-size: 14px; }
.results .r { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); padding: 14px 18px; cursor: pointer; margin-bottom: -1px; }
.results .r:hover { background: #FAF9F6; }
.results .r strong { display: block; font-size: 16.5px; }
.results .r span { display: block; font-size: 15px; color: var(--ink2); margin-top: 3px; }
.results .r em { font-style: normal; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---- help */
.faq details { border: 1px solid var(--line); background: #fff; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 15px 20px; font-weight: 700; font-size: 17px; list-style: none; display: flex; gap: 12px; align-items: center; }
.faq summary::before { content: '+'; color: var(--gold-ink); font-size: 22px; width: 18px; }
.faq details[open] summary::before { content: '−'; }
.faq details p { padding: 0 20px 18px 50px; color: var(--ink2); font-size: 16.5px; }
.gloss { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; }
.gloss div { background: #fff; border: 1px solid var(--line); padding: 16px 18px; font-size: 16px; color: var(--ink2); }
.gloss strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact div { background: var(--navy); color: #fff; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.contact div .lbl { color: var(--gold); }
.contact div a { color: #fff; font-weight: 700; font-size: 17px; }
.contact div span { font-size: 15px; color: #CFD8DF; }

/* ---- the player dock: a little window of its own; it keeps playing through every page change */
#playerDock { display: none; }
#playerDock.on { display: block; }
#playerDock .pd-box { position: fixed; z-index: 81; background: #fff; border: 1px solid #C9C4B9; box-shadow: 0 0 0 2px var(--gold), 0 24px 60px rgba(0,0,0,0.45); display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; }
#playerDock.large .pd-box { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(960px, calc(100vw - 48px)); }
#playerDock.mini .pd-box { right: 24px; bottom: 24px; width: 420px; }
#playerDock .pd-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--hair); background: var(--navy); color: #fff; cursor: move; user-select: none; }
#playerDock .pd-title { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-right: 10px; }
#playerDock .pd-btn { width: 36px; height: 32px; border: 0; background: transparent; color: #fff; font-size: 24px; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); cursor: pointer; }
#playerDock .pd-btn:hover { background: rgba(255,255,255,0.14); }
#playerDock .pd-btn.pd-x:hover { background: #C62828; }
#playerDock.mini .pd-title { font-size: 13.5px; }
#playerDock.mini .pd-btn { width: 30px; height: 28px; font-size: 20px; }
#playerDock.mini [data-pd="mini"], #playerDock.large [data-pd="large"] { display: none; }
#playerDock .pd-media { position: relative; padding-top: 56.25%; background: #000; }
#playerDock .pd-media video, #playerDock .pd-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#playerDock .pd-grip { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; background: repeating-linear-gradient(135deg, transparent 0 3px, var(--gold) 3px 5px); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
#playerDock .pd-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #fff; background: var(--navy); }
#playerDock .pd-wait strong { font-size: 20px; }
#playerDock .pd-wait span { font-size: 15px; color: #C9D2D9; max-width: 520px; line-height: 1.5; }

.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; font-size: 15.5px; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.toast.bad { background: var(--red); }
#tip { position: fixed; z-index: 120; display: none; max-width: 340px; background: var(--ink); color: #fff; font-size: 14.5px; line-height: 1.45; padding: 9px 12px; border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,0.25); pointer-events: none; }
#tip::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 10px; height: 10px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
#tip.below::after { bottom: auto; top: -5px; }
.fld label[data-tip] { text-decoration: underline dotted #C7C3BA; text-underline-offset: 3px; cursor: help; }
/* owner mode (inside the Hub): the lighter teal strip tells Angela she is looking through a client's eyes */
.ownerbar { background: #163F4A; color: #DDEBEE; font-size: 14.5px; padding: 6px 24px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ownerbar .pill { background: var(--gold); color: #1F1707; font-weight: 800; padding: 3px 9px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
/* with the strip on top, the portal below it must be shorter by the strip, or the window grows a scrollbar for nothing */
.ownerbar + .portal { min-height: calc(100vh - 36px); }
.ownerbar + .portal .side { height: calc(100vh - 36px); top: 36px; }
.edit[contenteditable] { outline: 1px dashed var(--gold); outline-offset: 4px; background: rgba(255,251,239,0.9); color: var(--ink); min-height: 1em; }
.edit[contenteditable]:focus { outline: 2px solid var(--gold); }
.savebar { position: fixed; right: 24px; bottom: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 14px 16px; display: flex; gap: 12px; align-items: center; z-index: 40; font-size: 15.5px; }

@media (max-width: 1200px) { .kb { grid-template-columns: 220px minmax(0, 1fr); } .kb .reader-wrap { grid-column: 1 / -1; } .steps { grid-template-columns: repeat(2, 1fr); } .cards3, .programs, .contact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .portal { display: block; } .side { position: fixed; left: 0; top: 0; bottom: 0; height: auto; transform: translateX(-100%); transition: transform 0.2s; z-index: 60; width: 300px; } body.navopen .side { transform: none; box-shadow: 0 0 0 100vw rgba(0,0,0,0.35); }
  .topbar { padding: 0 16px; gap: 10px; } .topbar .menubtn { display: inline-flex; } .topbar form { max-width: none; } .topbar .crumb { display: none; }
  .content { padding: 20px 16px 50px; } .banner { grid-template-columns: repeat(3, 1fr); } .banner div { height: 100px; } .intro { padding: 28px 16px 16px; } .intro h1 { font-size: 32px; } .sec { padding: 28px 16px; }
  .gate { padding: 0; display: block; } .gate .folio { width: 100%; min-height: 100vh; grid-template-columns: minmax(0, 1fr); border: 0; box-shadow: none; } .gate .pane.art { min-height: 300px; } .gate .pane.art .sketch { object-position: 0% 55%; } .gate .pane.art .lockup { padding: 24px 20px 22px; } .gate .pane.art .logo { height: 36px; margin-bottom: 6px; } .gate .pane.art h1 { font-size: 36px; } .gate .pane.art .lead { font-size: 16px; } .gate .pane.form { padding: 28px 20px 24px; border-left: 0; } .gate .pane.form .gcard .gfoot { overflow-wrap: anywhere; }
  .track { grid-template-columns: 1fr 1fr; } .steps, .cards3, .programs, .contact, .gloss, .todo, .two, .tiles { grid-template-columns: 1fr; } .welcome { grid-template-columns: 1fr; } .welcome img { width: 96px; height: 96px; } .welcome .cta { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 16px; }
  .about { grid-template-columns: 1fr; padding: 22px; } .about .por { max-width: 190px; }
  .split, .docs, .class, .kb { grid-template-columns: 1fr; } .rail, .doclist, .classlist, .kb .cats, .kb .list { position: static; max-height: none; } .c3, .c2 { grid-column: span 6; }
  .reader { padding: 24px 20px; } h1 { font-size: 30px; }
}

/* Email her pop-up */
.popm .mailbox { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; background: var(--ground); border-radius: var(--r); margin: 6px 0 14px; }
.popm .mailbox strong { font-size: 21px; font-weight: 700; word-break: break-all; color: var(--ink); }

/* Faded imagery in the empty margins of the wide screens: a toned photograph on the right, fading in from nothing,
   and a second one low on the left. The page content sits above both. Each screen names its own pair. */
.content.wash { position: relative; overflow: hidden; }
.content.wash::before, .content.wash::after { content: ''; position: absolute; pointer-events: none; background-repeat: no-repeat; }
.content.wash > * { position: relative; z-index: 1; }
.content.msgwash::before { /* Ollie's sketch: an open book, a sealed letter and blossom on the left, a hand writing with a quill on the right; whole page, locked, faint */
  position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto;
  background-image: url(img/wash-messages.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.45;
  -webkit-mask-image: none; mask-image: none; }
.content.msgwash::after { display: none; }
@media (max-width: 1500px) { .content.wash::after { display: none; } .content.msgwash::before { width: 36%; opacity: 0.18; } }
@media (max-width: 1100px) { .content.wash::before { display: none; } }
/* Questionnaire: giant tan question marks on an angle, right side. Search: an antique compass, enlarged, fading in. */
.content.qwash::before { /* Ollie's sketch: a checklist notebook with a seal on the left, a ticked sheet with quill and inkwell on the right; whole page, locked, very faint */
  position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto;
  background-image: url(img/wash-questions.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.36;
  -webkit-mask-image: none; mask-image: none; }
.content.searchwash::before { /* Ollie's sketch: a magnifying glass over botanical drawings, an armillary globe and a flask; whole page, locked, faint */
  position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto; aspect-ratio: auto;
  background-image: url(img/wash-search.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.55;
  -webkit-mask-image: linear-gradient(to right, #000 55%, rgba(0,0,0,0.8) 100%); mask-image: linear-gradient(to right, #000 55%, rgba(0,0,0,0.8) 100%); }   /* the right side, where the glass is, eases off a touch */
/* Home: giant scales of justice, the column through the middle of the page and the pans out at the sides, fading in from the left */
.content.homewash::before { /* Ollie's drawing (2026-10-07): a stone mill with its wheel, the river, a packhorse bridge, fields to the hills; whole page, locked, 10 % fainter than the hillside drawing before it */
  position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto;
  background-image: url(img/wash-home-mill.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.62;
  -webkit-mask-image: none; mask-image: none; }
.content.homewash::after { /* the green tint was cut for the old hillside drawing; off while the mill drawing is in place */
  content: ''; display: none; position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto; pointer-events: none;
  background: #6F8F4E; opacity: 0.22; mix-blend-mode: multiply;
  -webkit-mask-image: url(img/wash-home-green.png); -webkit-mask-size: cover; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
  mask-image: url(img/wash-home-green.png); mask-size: cover; mask-position: center; mask-repeat: no-repeat; }   /* right: the cleared desk, mirrored, a quarter fainter than the left */
/* My documents: a stack of sealed documents and a pen, large, low on the left, fading in from the left margin */
.content.docwash::before { /* Ollie's sketch: sealed letters, quill and inkwell on the left, tied scrolls by a leaded window on the right; whole page, locked */
  position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto; aspect-ratio: auto;
  background-image: url(img/wash-documents-page.jpg); background-size: 100% auto; background-position: center; background-repeat: no-repeat; opacity: 0.45;   /* the whole width of the drawing, so both seals are on screen; its top and bottom edges fade into the page */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 22%, #000 78%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 22%, #000 78%, rgba(0,0,0,0) 100%); }
.content.docwash::after { /* a faded old-wax red, laid only over the two seals through a mask cut from the drawing; the drawing itself is untouched */
  content: ''; display: block; position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto; aspect-ratio: auto; transform: none; pointer-events: none;
  background: #9A4A3C; opacity: 0.32; mix-blend-mode: multiply;
  -webkit-mask-image: url(img/wash-documents-seals.png); -webkit-mask-size: 100% auto; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
  mask-image: url(img/wash-documents-seals.png); mask-size: 100% auto; mask-position: center; mask-repeat: no-repeat; }
.footer { position: relative; z-index: 1; }
/* The process window: the big play button, and the video window */
.btn.play { display: inline-flex; align-items: center; gap: 14px; background: var(--green); color: #fff; border: 0; border-radius: var(--r); padding: 10px 22px 10px 12px; font-size: 18px; font-weight: 800; line-height: 1.15; text-align: left; }
.btn.play:hover { background: #256A42; }
.btn.play .pb { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.btn.play .pb svg { width: 26px; height: 26px; fill: var(--green); stroke: none; margin-left: 3px; }
.btn.play small { display: block; font-size: 13px; font-weight: 500; opacity: 0.9; margin-top: 2px; }
.popm .askpop.vid { width: min(1200px, calc(100vw - 32px)); }
.popm .askpop.vid video { width: 100%; aspect-ratio: 16 / 9; background: var(--navy); border-radius: var(--r); display: block; margin: 8px 0 14px; }
/* Knowledge base: Ollie's pale cobblestone road, running off into the mist, across the whole page; pinned to the window */
/* The journey: Ollie's sepia drawing of a path winding up to the peak, whole page, locked; the player sits on it */
.content.journeywash::before { position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto; aspect-ratio: auto; transform: none; background-image: url(img/wash-journey.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.85; -webkit-mask-image: none; mask-image: none; }
.jwrap { width: 50%; max-width: 680px; margin: 0 auto; transition: width .45s ease, max-width .45s ease; }
.procgrid .vidcol { display: block; }
.procgrid .vidcol .jwrap { width: 100%; max-width: none; margin: 0; }
.content.journeywash { min-height: calc(100vh - 64px); display: flex; flex-direction: column; }   /* the gold Back bar on top, the player centred in what is left */
.content.journeywash > .in.backbar { width: 100%; max-width: none; flex: none; }
.content.journeywash > .in:not(.backbar) { width: 100%; max-width: none; flex: 1; display: flex; align-items: center; justify-content: center; }
.content.journeywash .jwrap { margin: 0; }
.jwrap.big { width: 100%; max-width: 1120px; }
.jwrap video { display: block; width: 100%; height: auto; aspect-ratio: auto; background: transparent; border: 0; }   /* the film's own shape: no bars above, below or beside it */
/* the open film sits in a cream mat with a double gold hairline, like a matted print; the picture fills the mat edge to edge */
/* the open film is an unrolled scroll: a parchment sheet with a rolled end standing at each side (both The journey and The process) */
.jwrap.big { position: relative; padding: 12px 14px; width: calc(100% - 64px); max-width: 1120px; margin: 10px auto 0; background: linear-gradient(to bottom, #F8F3E8, #EFE7D4); border: 1px solid rgba(205,177,118,0.75); box-shadow: 0 18px 50px rgba(21,24,27,0.22); }
.jwrap.big::before, .jwrap.big::after { content: ''; position: absolute; top: -12px; bottom: -12px; width: 38px; border-radius: 19px; z-index: 2;
  background: linear-gradient(to right, #A89270 0%, #D9CBA8 18%, #F6EEDC 42%, #E2D5B4 62%, #B9A47C 84%, #8F7B57 100%);
  box-shadow: 0 8px 18px rgba(21,24,27,0.28), inset 0 0 0 1px rgba(138,109,47,0.4), inset 0 14px 10px -10px rgba(255,255,255,0.7), inset 0 -14px 10px -10px rgba(90,70,40,0.35); }
.jwrap.big::before { left: -24px; }
.jwrap.big::after { right: -24px; background: linear-gradient(to left, #A89270 0%, #D9CBA8 18%, #F6EEDC 42%, #E2D5B4 62%, #B9A47C 84%, #8F7B57 100%); }
.jwrap.big video { position: relative; z-index: 1; }
.jwrap.big .jclose { position: absolute; right: 20px; top: 18px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(205,177,118,0.9); background: rgba(21,33,43,0.78); color: #fff; font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 0 2px; box-shadow: 0 4px 12px rgba(21,24,27,0.3); transition: background .15s, transform .15s; }
.jwrap.big .jclose:hover { background: var(--navy); transform: scale(1.06); }
@media (max-width: 760px) { .jwrap.big { width: 100%; margin: 0; } .jwrap.big::before, .jwrap.big::after { display: none; } }
.jposter { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid rgba(255,255,255,0.6); padding: 0; cursor: pointer; overflow: hidden; background: rgba(255,255,255,0.06); -webkit-backdrop-filter: contrast(1.16) saturate(1.08); backdrop-filter: contrast(1.16) saturate(1.08); box-shadow: 0 18px 50px rgba(21,24,27,0.18); text-align: left; }   /* glass, barely there: the drawing behind the page shows through, a touch deeper than around it */
.jposter::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(245,243,238,0.30) 0%, rgba(245,243,238,0) 30%, rgba(245,243,238,0) 70%, rgba(245,243,238,0.30) 100%); }   /* a breath of cream top and bottom so the words read */
/* The journey poster: the home-page corner accent, very subtle: a 1.5 px gold line from each of two corners (top-left, bottom-right), running a little over half of each edge, thinning to a point and fading */
.jposter .jc { position: absolute; pointer-events: none; z-index: 3; }
.jposter .jc::before, .jposter .jc::after { content: ''; position: absolute; background: var(--gold); opacity: 0.8; }
.jposter .jc.tl { left: 0; top: 0; }
.jposter .jc.tl::before { left: 0; top: 0; width: 1.5px; height: 56cqh; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,0) 100%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.jposter .jc.tl::after { left: 0; top: 0; height: 1.5px; width: 56cqw; -webkit-mask-image: linear-gradient(to right, #000 0%, #000 40%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, #000 0%, #000 40%, rgba(0,0,0,0) 100%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.jposter .jc.br { right: 0; bottom: 0; }
.jposter .jc.br::before { right: 0; bottom: 0; width: 1.5px; height: 56cqh; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to top, #000 0%, #000 40%, rgba(0,0,0,0) 100%); clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.jposter .jc.br::after { right: 0; bottom: 0; height: 1.5px; width: 56cqw; -webkit-mask-image: linear-gradient(to left, #000 0%, #000 40%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to left, #000 0%, #000 40%, rgba(0,0,0,0) 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.jposter { container-type: size; }
.jposter .jlogo { position: absolute; left: 6%; top: 8%; width: 44%; height: auto; display: block; pointer-events: none; }
.jposter .jcap { position: absolute; left: 8%; right: 8%; bottom: 9%; text-align: center; font-size: clamp(13px, 1.35vw, 16px); color: var(--ink); line-height: 1.4; }
.jposter .jplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(52px, 7vw, 74px); aspect-ratio: 1; border-radius: 50%; background: url(img/play-gold.png) center / contain no-repeat; border: 0; display: block; filter: drop-shadow(0 8px 18px rgba(21,24,27,0.3)); transition: transform .2s, filter .2s; }   /* Ollie's brushed-gold disc with the navy triangle, cut from his picture */
.jposter .jplay svg { display: none; }
.jposter:hover .jplay { transform: translate(-50%, -50%) scale(1.06); filter: drop-shadow(0 12px 24px rgba(21,24,27,0.34)) brightness(1.04); }
.jnote { text-align: center; margin: 16px auto 0; font-size: 15px; color: var(--ink2); max-width: 70ch; background: rgba(255,255,255,0.55); display: table; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.7); }
.jnote .btn.link { font-size: 15px; padding: 0; vertical-align: baseline; }
@media (max-width: 760px) { .jwrap { width: 100%; max-width: none; } }
.content.kbwash::before { /* Ollie's sketch: a cobbled lane past stone cottages into the hills; whole page, locked */
  position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto; aspect-ratio: auto; transform: none;
  background-image: url(img/wash-kb.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.7;
  -webkit-mask-image: none; mask-image: none; }
/* Knowledge base: the three panes are slightly see-through, frosted, so the road shows softly behind them (a trial Ollie asked for) */
.content .card { background: rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); border-color: rgba(255,255,255,0.55); box-shadow: 0 1px 2px rgba(21,24,27,0.06), 0 10px 30px rgba(21,24,27,0.08); }   /* every card on every portal page: frosted glass over the page's picture */
/* Home: the panes are nearly clear glass over the picture */
.content.homewash .card { background: rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); border-color: rgba(255,255,255,0.55); }
/* Home fits above the fold: tighter breathing room so nothing peeks from underneath */
.content.homewash { padding: 12px 32px 6px; }
.content.homewash .home { gap: 16px; }
.content.homewash .welcome { padding: 20px 32px; }
.content.homewash .home .card.pad { padding: 22px 26px; gap: 14px; }
.content.homewash .welcome h1 { font-size: 34px; margin: 2px 0 6px; }
/* Knowledge base panes: the same near-clear glass as Home */
.content.kbwash .card { background: rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); border-color: rgba(255,255,255,0.55); }
/* Back, inside the page (as on Angela's side): gold lettering, top left, above the content, same width as the page */
.in.backbar { display: block; margin-bottom: 10px; }
.in.backbar.narrow { display: block; }
.backbar .back { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; color: #A8853F; font-weight: 800; font-size: 17.5px; padding: 0; cursor: pointer; }
.backbar .back:hover { color: #C9A24E; }
.backbar .back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.content.homewash .in.backbar { display: none; }
/* Classroom: Ollie's open book on a marble sill, hills and arches behind, across the whole page; pinned to the window */
.content.classwash::before { /* Ollie's sketch: a schoolroom, desks with an open book and quill, a bookcase, a blackboard with a diagram, a globe on the lectern; whole page, locked, very faint */
  position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto; aspect-ratio: auto; transform: none;
  background-image: url(img/wash-classroom.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.34;
  -webkit-mask-image: none; mask-image: none; }
/* a tiny play disc beside The process in the menu: there is a video there */
.side .it .vidtag { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.side .it .vidtag em { font-style: normal; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.side .it .vid { width: 24px; height: 24px; border-radius: 50%; background: url(img/play-gold.png) center / contain no-repeat; box-shadow: 0 2px 6px rgba(0,0,0,0.35); display: inline-flex; flex: none; }   /* the same brushed-gold disc as the thumbnails, at the rail's size */
.side .it .vid svg { width: 13px; height: 13px; fill: #0E171E; stroke: none; margin-left: 2px; }
.side .it:hover .vid { box-shadow: 0 0 0 3px rgba(205,177,118,0.35), 0 2px 6px rgba(0,0,0,0.35); }
/* Home: the first screen holds exactly the welcome and the two panes; everything else waits below the fold */
.content.homewash .home .fold { display: flex; flex-direction: column; gap: 16px; min-height: calc(100vh - 68px - 18px); }
.ownerbar + .portal .content.homewash .home .fold { min-height: calc(100vh - 68px - 18px - 36px); }
.content.homewash .home .tiles { margin-top: 28px; }
/* The portrait: an editorial panel the full height of the welcome card, bled to its left edge, warm grade, thin gold frame
   line, her name in small caps over a soft dark gradient at the foot; its right edge melts into the glass */
.content.homewash .welcome { grid-template-columns: 236px minmax(0, 1fr) 280px; gap: 30px; padding: 20px 32px 20px 0; overflow: hidden; }
.welcome .por { position: relative; margin: -20px 0 -20px 0; align-self: stretch; min-height: 232px; border-radius: 26px 0 0 var(--r); overflow: hidden; background: var(--navy); }   /* the top-left corner rounds like the page sheet against the bar */
.content.homewash .welcome { border-top-left-radius: 26px; }
.welcome .por img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; border: 0; filter: contrast(1.06) saturate(0.9) sepia(0.14); -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.55) 0%, #000 28%, #000 82%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0.55) 0%, #000 28%, #000 82%, rgba(0,0,0,0) 100%); }   /* a slight fade on her left edge, a full melt on the right */
.welcome .por::before { content: ''; position: absolute; inset: 10px 10px 10px 10px; border: 1px solid rgba(205,177,118,0.75); border-radius: 2px; pointer-events: none; z-index: 2; -webkit-mask-image: linear-gradient(to left, #000 80%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to left, #000 80%, rgba(0,0,0,0) 100%); }   /* the gold frame turned about: its open side is now on the left */
.welcome .por::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, rgba(14,23,30,0.82), rgba(14,23,30,0)); z-index: 1; }
.welcome .por figcaption { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 3; color: #fff; display: flex; flex-direction: column; gap: 3px; }
.welcome .por figcaption strong { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: 0.01em; line-height: 1.15; }
.welcome .por figcaption span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.content.homewash .welcome h1 { font-size: 36px; }
@media (max-width: 1200px) { .content.homewash .welcome { grid-template-columns: 1fr; padding: 20px 24px; } .welcome .por { margin: 0; min-height: 300px; border-radius: var(--r); } .welcome .por img, .welcome .por::before { -webkit-mask-image: none; mask-image: none; } }
/* the footer stays below the fold on every page: the content area is never shorter than the window */
.content { min-height: calc(100vh - 68px); }
/* the rounded corner where the sidebar meets the top bar is drawn on the sticky top bar itself, so it stays put when the page scrolls */
.topbar::after { content: ''; position: absolute; left: 0; bottom: -26px; width: 26px; height: 26px; pointer-events: none; z-index: 21;
  background: radial-gradient(circle at 26px 26px, rgba(0,0,0,0) 25.5px, var(--navy) 26.5px); }
/* Help: Ollie's clasped hands under the arches, flipped so they sit on the left; locked to the window */
.content.helpwash::before { position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto; background-image: url(img/wash-help.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.73; }   /* Ollie's sketch: a helping hand on the left, neighbours raising a house on the right */
.ownerbar { position: relative; z-index: 30; }   /* the Client-view strip stays above the window-locked pictures */
/* Help: heavy frost on the question boxes and the three contact boxes (light glass instead of navy blocks) */
.content.helpwash .faq details { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.65); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); }
.content.helpwash .faq details[open] { background: rgba(255,255,255,0.42); }
.content.helpwash .contact div { background: rgba(255,255,255,0.3); color: var(--ink); border: 1px solid rgba(255,255,255,0.65); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); }
.content.helpwash .contact div .lbl { color: var(--gold-ink); }
.content.helpwash .contact div a { color: var(--primary); }
.content.helpwash .contact div span { color: var(--ink2); }
/* Home: the shortcut tiles below the fold are lighter glass still, quieter than the two panes above */
.content.homewash .tiles .tile { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05); }
.content.homewash .tiles .tile:hover { background: rgba(255,255,255,0.28); }
/* The process window as a film slate: clapper stripes across the top, the five steps on the slate, the play button in a
   dark film-strip footer with sprocket holes */
.popm .askpop.slate { padding: 0; overflow: hidden; background: #FBF9F5; width: min(720px, calc(100vw - 32px)); display: flex; flex-direction: column; max-height: calc(100vh - 32px); }   /* header and footer always in view; the steps scroll if the window is short */
.popm .askpop.slate .howlist { flex: 1 1 auto; overflow: auto; min-height: 0; }
.popm .askpop.slate > .row:first-child { background: var(--navy); color: #fff; margin: 0; padding: 30px 28px 18px; position: relative; }
.popm .askpop.slate > .row:first-child::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(135deg, #0B1218 0 18px, #EDE7D9 18px 36px); }
.popm .askpop.slate > .row:first-child .lbl { color: var(--gold); }
.popm .askpop.slate > .row:first-child h3 { color: #fff; font-size: 26px; }
.popm .askpop.slate > .row:first-child .x { color: #CFD8DF; }
.popm .askpop.slate > .row:first-child .x:hover { color: #fff; }
.popm .askpop.slate .howlist { margin: 0; padding: 22px 28px 10px; }
.popm .askpop.slate > .row:last-child { margin: 0; padding: 26px 28px; background: var(--navy); position: relative; align-items: center; }
.popm .askpop.slate > .row:last-child::before, .popm .askpop.slate > .row:last-child::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: radial-gradient(circle at 50% 50%, #F5F3EE 0 2.6px, rgba(0,0,0,0) 3.4px) 0 0 / 22px 10px repeat-x; }
.popm .askpop.slate > .row:last-child::before { top: 5px; }
.popm .askpop.slate > .row:last-child::after { bottom: 5px; }
.popm .askpop.slate > .row:last-child .btn.plain { background: none; border-color: rgba(255,255,255,0.35); color: #E6EBEF; }
.popm .askpop.slate > .row:last-child .btn.plain:hover { background: rgba(255,255,255,0.1); }
.popm .askpop.slate .take { flex-basis: 100%; order: -1; color: #AEBCC7; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px; }   /* its own line above the buttons, so the play button never wraps */
.popm .askpop.slate .btn.play { background: var(--gold); color: #0E171E; box-shadow: 0 0 0 4px rgba(205,177,118,0.22); }
.popm .askpop.slate .btn.play:hover { background: #DCC38B; }
.popm .askpop.slate .btn.play .pb { background: #0E171E; }
.popm .askpop.slate .btn.play .pb svg { fill: var(--gold); }
.popm .askpop.slate .btn.play small { color: #2E2614; opacity: 0.85; }
/* Search: the things people most often look for, as one-click chips under the box */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.chips .lbl { margin-right: 4px; }
.chip { border: 1px solid rgba(21,24,27,0.18); background: rgba(255,255,255,0.45); color: var(--ink); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Email window as an envelope: the top corners cut away, the flap a proper triangle folded down over the body, and a
   melted red wax seal pressed with an S at the point of the flap */
.popm .askpop.envelope { overflow: visible; padding: 176px 40px 30px; background: rgba(250,247,240,0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 0; box-shadow: 0 30px 80px rgba(14,23,30,0.35); width: min(680px, calc(100vw - 32px));
  clip-path: polygon(0 34px, 34px 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
.popm .askpop.envelope::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 154px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(238,230,214,0.98), rgba(229,219,199,0.98)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.popm .askpop.envelope::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 154px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(60,45,20,0.14)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.popm .askpop.envelope .seal { position: absolute; left: 50%; top: 154px; transform: translate(-50%, -56%) rotate(-6deg); width: 84px; height: 80px; z-index: 3; display: flex; align-items: center; justify-content: center;
  border-radius: 48% 52% 46% 54% / 56% 44% 56% 44%;
  background: radial-gradient(circle at 36% 30%, #C4453A 0, #9E2A22 42%, #7A1C17 78%, #5E130F 100%);
  box-shadow: 0 7px 14px rgba(60,20,15,0.4), inset 0 -5px 10px rgba(50,10,8,0.45), inset 0 4px 6px rgba(255,180,160,0.25); }
.popm .askpop.envelope .seal::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; border: 1.5px solid rgba(255,220,210,0.35); box-shadow: inset 0 0 0 1px rgba(60,10,8,0.5), inset 0 2px 4px rgba(50,10,8,0.5); }
.popm .askpop.envelope .seal::after { content: ''; position: absolute; width: 14px; height: 10px; right: -4px; bottom: 16px; border-radius: 50%; background: #8E241D; box-shadow: 0 3px 6px rgba(60,20,15,0.35); }   /* a drip of wax */
.popm .askpop.envelope .seal i { font-family: var(--serif); font-style: normal; font-weight: 700; font-size: 34px; color: #4A0F0B; text-shadow: 0 1px 0 rgba(255,200,190,0.35), 0 -1px 1px rgba(30,5,5,0.6); }
.popm .askpop.envelope > .row:first-child { margin-top: 0; }
.popm .askpop.envelope .mailbox { background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.8); }
.popm .askpop.envelope .x { color: var(--ink2); }

.docview { box-shadow: 0 2px 6px rgba(21,24,27,0.08), 0 18px 48px rgba(21,24,27,0.12); border: 1px solid rgba(255,255,255,0.7); }   /* the page floats on the glass with a soft shadow */
.side { z-index: 25; }   /* the navy sidebar always paints above the window-locked pictures (the compass runs under it) */
/* Search, rebuilt: a search panel, then the common searches as justified rows with a line of context each */
.sgrid { gap: 18px; }
.spanel h2 { font-size: 24px; margin: 2px 0 10px; }
.spanel .search .big { position: relative; display: flex; gap: 10px; align-items: stretch; }
.spanel .search .big .sico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--muted); pointer-events: none; }
.spanel .search .big .sico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.spanel .search .big input { flex: 1; padding: 16px 16px 16px 50px; font-size: 18px; border: 1px solid rgba(21,24,27,0.2); border-radius: var(--r); background: rgba(255,255,255,0.85); }
.spanel .search .big input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.spanel .srcs { margin: 12px 0 0; font-size: 14px; }
.slist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 8px; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid rgba(21,24,27,0.12); border-radius: var(--r); background: rgba(255,255,255,0.5); cursor: pointer; font: inherit; color: var(--ink); }
.srow span { display: flex; flex-direction: column; gap: 2px; }
.srow strong { font-size: 16px; }
.srow small { font-size: 13.5px; color: var(--muted); }
.srow i { width: 22px; height: 22px; flex: none; color: var(--gold-ink); }
.srow i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.srow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.srow:hover small, .srow:hover i { color: #D3BE8E; }
@media (max-width: 900px) { .slist { grid-template-columns: 1fr; } }
.spanel .search .big { max-width: none; }
.spanel .search .big input { border-right: 1px solid rgba(21,24,27,0.2); border-radius: var(--r); }
.spanel .search .big button { border-radius: var(--r); padding-left: 26px; padding-right: 26px; }
/* The process page: the steps beside the walkthrough poster, the Hub's shape */
.procgrid { display: grid; grid-template-columns: 440px auto; gap: 22px; align-items: start; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto; }   /* the pair sits centred on any screen; the poster's width is set from the steps' height */
.procgrid .card.pad { padding: 0; gap: 10px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* no outer box: the heading and the steps sit straight on the page */
/* the heading sits straight on the map, so it is given more weight: darker ink, a touch of cream glow behind the letters */
.procgrid .card.pad > .lbl { color: var(--gold-ink); font-weight: 700; text-shadow: 0 0 6px rgba(245,243,238,0.95), 0 0 2px rgba(245,243,238,1); }
.procgrid .card.pad > h2 { color: var(--navy); font-weight: 700; text-shadow: 0 0 8px rgba(245,243,238,0.95), 0 0 2px rgba(245,243,238,1); }
.procgrid .card.pad > p.muted { color: var(--ink); font-weight: 500; text-shadow: 0 0 6px rgba(245,243,238,0.95), 0 0 2px rgba(245,243,238,1); }
.procgrid .howlist li { background: rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); border-top-color: rgba(255,255,255,0.55); border-right-color: rgba(255,255,255,0.55); border-bottom-color: rgba(255,255,255,0.55); box-shadow: 0 1px 2px rgba(21,24,27,0.06), 0 10px 30px rgba(21,24,27,0.08); }   /* each step is the frosted pane the outer box used to be; its coloured left edge stays */
.procgrid .howlist { margin: 0; }
.procgrid .howlist li { padding: 10px 12px; }
.procgrid .howlist li strong { font-size: 15.5px; }
.procgrid .howlist li span { font-size: 14px; line-height: 1.4; }
.procgrid h2 { font-size: 20px; }
.vidcol .poster { position: relative; display: block; width: 100%; border: 0; padding: 0; background: var(--navy); border-radius: var(--r); overflow: hidden; cursor: pointer; box-shadow: 0 14px 40px rgba(21,24,27,0.22); }   /* bare: no card, no frost, the full width of its column */
.vidcol .poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.vidcol .poster:hover img { transform: scale(1.02); }
.vidcol .poster .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; color: #fff; font-weight: 700; font-size: 15px; text-align: left; background: linear-gradient(to top, rgba(14,23,30,0.75), rgba(14,23,30,0)); }
@media (max-width: 1200px) { .procgrid { grid-template-columns: 1fr; } }
.vidcol p.muted { max-width: 70ch; }
/* 'Member portal' sits along the top edge of the main window, in the navy, half an inch in from the curve */
.topbar .tag { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8FA3B1; margin-left: 0.5in; align-self: flex-end; padding-bottom: 10px; line-height: 1; }   /* 10 px above the bottom of the bar */
.side .logo { padding-bottom: 44px; }   /* the room the old tag line took, so the menu sits exactly where it was */
/* The process: Ollie's treasure-map drawing (ship, dotted course, bridge, tower, the X), barely there, locked to the window */
.content.processwash::before { position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; width: auto; height: auto; background-image: url(img/wash-process-map.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.50; }   /* Ollie's treasure-map drawing, route markers in red; 5 % softer than the old wash */
.procpage { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.procpage .jwrap { margin: 6px 0 0; }
.procpage .procsteps { width: 100%; max-width: 860px; }
/* Classroom list, rebuilt: a status mark, the title, the length, a thin progress line; no thumbnails */
.classlist .ctally { padding: 18px 20px 16px; gap: 10px; border-bottom: 0; }
.classlist .ctally strong { font-size: 17px; }
.classlist .cgrp { border-top: 1px solid var(--line); }
.classlist .cgh { padding: 16px 20px 6px; background: none; border: 0; display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.classlist .cgh strong { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.classlist .cgh .cnt { font-size: 13px; color: var(--muted); }
.classlist .v { gap: 14px; padding: 12px 20px 12px 18px; border-bottom: 0; align-items: center; }
.classlist .v + .v { border-top: 1px solid var(--hair); }
.classlist .v.on { background: rgba(251,246,234,0.9); box-shadow: inset 3px 0 0 var(--gold); }
.classlist .v .th { display: none; }
.classlist .v .mark { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #D9D4C8; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--muted); background: #fff; }
.classlist .v .mark.part { border-color: var(--gold); color: var(--gold-ink); background: #FBF6EA; }
.classlist .v .mark.done { border-color: var(--ok); background: var(--ok); color: #fff; }
.classlist .v .mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.classlist .v .vt { gap: 7px; }
.classlist .v .vl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.classlist .v .vl strong { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.classlist .v .vd { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.classlist .v .pbar { height: 3px; }
/* Questionnaire: a second copy of the same drawing, shown only over the notebook (left) and the ticked sheet (right), adds ten percent of depth to just those two things; the picture itself is untouched */
.content.qwash::after { content: ''; position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; pointer-events: none;
  background-image: url(img/wash-questions.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1;
  -webkit-mask-image: url(img/wash-questions-lines.png); -webkit-mask-size: cover; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
  mask-image: url(img/wash-questions-lines.png); mask-size: cover; mask-position: center; mask-repeat: no-repeat; }   /* the mask is white only on the ruled lines and boxes of the two pages, so only those deepen */
/* Knowledge base: the block sits 14 % in from the left, and the reader card is only as wide as its text, so no empty frost to its right */
.content.kbwash .kb { grid-template-columns: 236px 312px minmax(0, 880px); padding-left: 14%; justify-content: start; }
@media (max-width: 1200px) { .content.kbwash .kb { padding-left: 0; grid-template-columns: 220px minmax(0, 1fr); } }

.topbar .flag, .side .it small.alert { animation: flagpulse 1.6s ease-in-out infinite; }
@keyframes flagpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,0.55); } 50% { box-shadow: 0 0 0 7px rgba(180,35,24,0); } }

/* Home page cards: Ollie's corner accent (2026-10-06, third pass). A plain gold line, 2.5 px at the bottom-right corner,
   running up the right edge and along the bottom almost to the far edges, thinning to a point and fading. The line IS the
   edge: the card's own right and bottom borders are switched off and its paint stops at the padding edge, so nothing
   white or grey shows outside the gold. */
.content.homewash .card, .content.homewash .tile { position: relative; border-right-width: 0; border-bottom-width: 0; }   /* no border at all on those two sides: the gold line is the outer edge */
.content.homewash .card::before, .content.homewash .tile::before { content: ''; position: absolute; right: 0; bottom: 0; width: 2.5px; height: 92%; pointer-events: none; z-index: 3; background: var(--gold);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to top, #000 0%, #000 45%, rgba(0,0,0,0) 100%); clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.content.homewash .card::after, .content.homewash .tile::after { content: ''; position: absolute; right: 0; bottom: 0; height: 2.5px; width: 92%; pointer-events: none; z-index: 3; background: var(--gold);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 45%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to left, #000 0%, #000 45%, rgba(0,0,0,0) 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Classroom, Ollie 2026-10-07: bold course separators in the list; no frosted block under the player; the words and the
   buttons under the player centred; the player itself centred against the list. */
.classlist .cgrp { border-top: 0; }
.classlist .cgh { padding: 11px 18px 10px; background: var(--navy); border-top: 0; border-bottom: 2px solid var(--gold); display: flex; flex-direction: row; align-items: baseline; gap: 12px; }
.classlist .cgh strong { font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff; font-weight: 800; }
.classlist .cgh .cnt { color: #CFD8DF; margin-left: auto; }
.classlist .cgh .pbar { display: none; }
.class { align-items: center; }
.lesson.card { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lesson .stage { box-shadow: 0 18px 50px rgba(21,24,27,0.22); }
.lesson .lbody { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 0; }
.lesson .lbody .lbl { color: var(--gold-ink); }
.lesson .lbody h2 { color: var(--navy); text-shadow: 0 0 8px rgba(245,243,238,0.95); }
.lesson .lbody p { max-width: 70ch; color: var(--ink); text-shadow: 0 0 6px rgba(245,243,238,0.95); }
.lesson .lnav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 6px; }
.lesson .lnav .grow { display: none; }
/* Classroom poster (Ollie): the same glass pane as The journey / The process, the recording's title as the caption, the gold disc in the middle; the list card lighter; the course bands the bar colour */
.classlist .cgh { background: var(--navy3); }
.classlist.card { background: rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(5px) saturate(1.03); backdrop-filter: blur(5px) saturate(1.03); }
.lesson .stage.glass { background: transparent; }
.lesson .stage .cposter { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.lesson .stage .cposter .ccap { position: absolute; left: 8%; right: 8%; bottom: 8%; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; text-shadow: 0 0 10px rgba(245,243,238,0.95); }
.lesson .stage .cposter .ccap em { font-style: normal; font-family: var(--sans); font-weight: 500; font-size: clamp(12px, 1.1vw, 14px); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.lesson .stage .cposter .ccap strong { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.3vw, 30px); line-height: 1.15; color: var(--navy); opacity: .92; }
.lesson .stage .cposter .cresume { position: absolute; left: 8%; right: 8%; top: 9%; text-align: center; font-size: 14px; color: var(--ink2); text-shadow: 0 0 6px rgba(245,243,238,0.95); }
.lesson .stage { background: transparent; }   /* a recording narrower than the frame shows the page's drawing beside it, not black bars */
/* Under the classroom player (Ollie): nothing but the way onward — a big "Next in the queue" with the next recording's name and a large arrow; Previous small at the left */
.lesson .lbody { padding-top: 14px; }
.lesson .lnav { justify-content: center; align-items: stretch; gap: 12px; }
.lesson .lnav .btn.nextq { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px 12px 20px; background: var(--navy); color: #fff; border-color: var(--navy); border-left: 4px solid var(--gold); text-align: left; max-width: 620px; }
.lesson .lnav .btn.nextq .nq { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); display: block; }
.lesson .lnav .btn.nextq strong { display: block; font-size: 16px; line-height: 1.25; font-weight: 600; }
.lesson .lnav .btn.nextq .arrow { display: inline-flex; margin-left: auto; width: 30px; height: 30px; color: var(--gold); flex: none; }
.lesson .lnav .btn.nextq .arrow svg { width: 30px; height: 30px; }
.lesson .lnav .btn.nextq:hover { background: var(--navy2); }
.lesson .lnav .btn.nextq > span, .lesson .lnav .btn.nextq > strong { pointer-events: none; }
.lesson .lnav .btn.nextq .nq + strong { margin-top: 2px; }
.lesson .lnav .btn.nextq { flex-direction: row; flex-wrap: wrap; }
.lesson .lnav .btn.nextq .nq, .lesson .lnav .btn.nextq strong { flex: 1 1 100%; }
.lesson .lnav .btn.nextq .arrow { flex: none; }
.lesson .lnav .btn.nextq { display: grid; grid-template-columns: minmax(0, 1fr) 30px; grid-template-rows: auto auto; column-gap: 16px; }
.lesson .lnav .btn.nextq .nq { grid-column: 1; grid-row: 1; }
.lesson .lnav .btn.nextq strong { grid-column: 1; grid-row: 2; }
.lesson .lnav .btn.nextq .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.lesson .lnav .btn.plain.sm svg { width: 16px; height: 16px; }
.lesson .lnav .btn svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.classlist .cgh { background: var(--navy); }   /* the course bands: exactly the sidebar and top-bar colour (Ollie, 2026-10-07) */
/* Section 8 rows: choice · Other box · percentage on ONE line, at every width; on a phone the three stack inside their numbered row */
.grid .tgroup { grid-column: 1 / -1; margin-top: 6px; }
.grid .tgroup .lbl { color: var(--gold-ink); }
.grid .trow { grid-column: 1 / -1; display: grid; grid-template-columns: 34px minmax(0, 2fr) minmax(0, 1.6fr) 130px; gap: 10px 14px; align-items: end; padding: 10px 12px 12px; border: 1px solid var(--hair); background: rgba(255,255,255,0.45); border-radius: var(--r); }
.grid .trow > .fld { grid-column: auto; }
.grid .trow .trow-n { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
#secCard { container-type: inline-size; }   /* the rows size themselves by the card they sit in, not by the window */
.grid .trow { grid-template-columns: 34px minmax(0, 2fr) minmax(0, 1.5fr) 110px; }
@container (max-width: 640px) { .grid .trow { grid-template-columns: 34px minmax(0, 1fr) 96px; } .grid .trow > .fld:nth-of-type(2) { grid-column: 2 / span 2; } }
@container (max-width: 420px) { .grid .trow { grid-template-columns: 34px minmax(0, 1fr); } .grid .trow > .fld { grid-column: 2; } }
.grid .trow label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Documents shared by Angela with every member (My documents) */
.libcard { grid-column: 1 / -1; }
.libcard .ph { padding: 18px 20px 10px; }
.libcard .ph h2 { margin: 2px 0 0; font-size: 20px; }
.libcard .list .l { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--hair); }
.libcard .list .l .n { flex: none; min-width: 38px; height: 26px; padding: 0 8px; border-radius: var(--r); background: var(--navy); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; display: inline-flex; align-items: center; justify-content: center; }
.libcard .list .l .t { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; }

/* Home, Ollie 2026-10-07 evening: the welcome and the two panes sit in the middle of the first screen (not jammed under the top bar,
   no empty field at the bottom); the panes close under the welcome; Where you are / Your documents are clearer glass */
.content.homewash .home .fold { justify-content: center; gap: 18px; padding-bottom: 28px; }
.content.homewash .panel { background: rgba(255,255,255,0.15); -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05); border-color: rgba(255,255,255,0.5); }   /* a tad more frosted (Ollie) */
.content.homewash .tiles .tile { background: rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); }