/* Complex Care — v7 executive pass, 2026-10-05. Page frame = Cancer Navigation v3.1 styles (linked); this file adds only what this page needs.
   Carried from v6: placeholders, hero, ledger band, cycling recognitions, display ladder, chapter-03 block, closing. New: the three moments (02); founder on the LEFT. */

/* photo placeholders: briefs in the slots until the photos are shot */
.photo.ph{display:flex;align-items:flex-end;background:linear-gradient(160deg,#e9e1d7,#d9cfc3)}
.photo.ph span{display:block;position:static;padding:20px 24px;font-size:14px;line-height:1.5;color:#5c5d70;letter-spacing:.02em}
.photo.ph span b{display:block;font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--plum);margin-bottom:6px}

/* hero */
.film-control{background:rgba(34,38,91,.75);padding:8px 14px;border-radius:999px}
.hero h1{max-width:22ch}
.hero :focus-visible,.platform-band :focus-visible{outline-color:#fff}

/* ivory band = headline beside a column, then a two-column ledger (3+2) and the sum under one rule */
.six-band .tr-h2{font-size:48px;line-height:1.06;letter-spacing:-.025em;max-width:21ch;text-wrap:balance;margin-bottom:0}
.ledger-scene{align-items:start}
.ledger-scene .photo{min-height:0;align-self:start;height:563px;aspect-ratio:3/4}   /* native 3:4, like every photo on the page */
.ledger-scene > div:first-child{display:flex;flex-direction:column}
.ledger.lead{margin-top:32px}
.six-band .band-scene .tr-h2{margin-bottom:16px}                /* h2→body 16, the house step */
.six-band .band-scene .platform{margin:0;max-width:40ch}         /* headline and standfirst together at the top; spare space below, never above */
.ledger.lead{display:block;margin-top:40px}            /* the first two entries live in the headline column, under the standfirst */
.ledger.lead li{margin-bottom:32px}
.ledger.lead li:last-child{margin-bottom:0}
.ledger-wrap{margin-top:40px}
/* the ledger: a complete 3×2 that ends on the sum; the five entries carry the kicker (scan anchors in a two-column list), the sum carries the same mark at 34 */
.ledger{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:88px;row-gap:32px}
.ledger li{position:relative;padding-top:20px;margin:0;max-width:44ch}
.ledger li::before{content:"";position:absolute;top:0;left:0;width:32px;height:4px;background:var(--plum)}
.ledger h3{font-size:24px;line-height:1.2;font-weight:400;letter-spacing:-.015em;margin:0 0 8px;color:var(--navy)}
.ledger p{font-size:17px;line-height:1.5;font-weight:300;color:var(--navy);margin:0}
.ledger li.sum{align-self:end}
.ledger .band-close{font-size:34px;line-height:1.2;font-weight:300;color:var(--navy);letter-spacing:-.025em;margin:0;text-wrap:balance}
.six-band .tr-end{margin-top:64px}
.trials-band .reads{border-top-color:#dccbd6}
@media(min-width:913px) and (max-width:1255px){.six-band .tr-h2{font-size:40px}}
@media(max-width:912px){
  .ledger-wrap{margin-top:40px}
  .ledger{grid-template-columns:1fr;row-gap:28px}
  .ledger li{max-width:none}
  .ledger .band-close{font-size:26px}
  .six-band .tr-h2{font-size:32px}
  .six-band .band-scene .platform{margin-top:16px;padding-top:0}
  .six-band .tr-end{margin-top:56px}
  .band-scene .photo{min-height:0;height:440px}
}
.photo-right-band{grid-template-columns:minmax(0,1fr) 422px}
.photo-right-band .photo{order:2}
@media(min-width:913px) and (max-width:1255px){.photo-right-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:912px){.photo-right-band{grid-template-columns:minmax(0,1fr)}}
.band-scene{align-items:stretch}
.band-scene .photo{min-height:480px}
.band-scene .lbl{margin-bottom:12px}
.band-scene .tr-h2{margin-bottom:24px}

/* chapter 01: one scene; the recognitions one at a time under the paragraphs; seven bars, the lit one filling over the interval */
#what .photo{align-self:stretch;min-height:560px}
.recog-step{margin-top:40px}
.rs-stage{display:grid}                                            /* every line in one cell: the stage is as tall as its longest line at any width */
.rs-line{grid-area:1/1;margin:0;font-size:28px;line-height:1.25;font-weight:300;letter-spacing:-.02em;color:var(--navy);opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);pointer-events:none;text-wrap:pretty}
.rs-line.is-on{opacity:1;transform:none;pointer-events:auto}
.rs-foot{display:flex;align-items:center;gap:24px;margin-top:28px}
.rs-ctl{font:500 13px/1 Lexend,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:none;border:0;padding:12px 0;cursor:pointer;min-height:44px}   /* WCAG 2.2.2: a way to stop it */
.rs-ctl:hover{color:var(--plum)}
.rs-bars{display:flex;gap:8px}
.rs-bars i{display:block;width:32px;height:4px;background:#dccbd6;position:relative;overflow:hidden}
.rs-bars i::after{content:"";position:absolute;inset:0;background:var(--plum);transform:scaleX(0);transform-origin:0 50%}
.rs-bars i.is-on::after{animation:rs-fill var(--rs-every,4.5s) linear forwards}
.rs-bars i.is-done::after{transform:scaleX(1)}
@keyframes rs-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* reduced motion: nothing cycles; all seven lines stand, stacked, and the bars and control go away — no reader loses six of seven */
@media (prefers-reduced-motion:reduce){.rs-stage{display:block}.rs-line{opacity:1;transform:none;transition:none;margin:0 0 16px;pointer-events:auto}.rs-foot{display:none}}
@media(max-width:912px){
  #what .photo{height:440px;min-height:0}
  .rs-line{font-size:24px}
  .rs-bars i{width:24px}   /* 7×24 + 6×8 + the control fits the 327 column */
}

/* photos are never filler: each sits at its native 3:4 (422×563) at the top of its column; the chapter's verdict hangs beneath it in the same
   column; the copy column ends on the closer. Two columns, two edges, no slice. */
.scene{align-items:start}
.side{display:flex;flex-direction:column}
.side .photo{align-self:auto;height:563px;min-height:0;aspect-ratio:3/4;width:422px}
#what .photo,#practice .photo,.photo-right .photo{min-height:0}
.side .verdict{margin:40px 0 0;max-width:none;font-size:34px;line-height:1.2}
.closer{text-align:left;margin-left:0;margin-right:0;max-width:46ch}
.copy > p.closer{margin:48px 0 0;font-size:28px;line-height:1.25;font-weight:400;letter-spacing:-.02em;color:var(--navy)}   /* outranks the base .copy > p:not(.num) body rule */
#what .scene,#practice .scene,#engage .scene{margin-bottom:0}
@media(min-width:913px) and (max-width:1255px){.side .photo{width:100%;height:auto}}
@media(max-width:912px){
  .side .photo{width:100%;height:440px;aspect-ratio:auto}
  .side .verdict{font-size:28px;margin-top:24px}
  .copy > p.closer{font-size:24px;margin-top:32px}
}

/* chapter 02: three moments — the proof is set in the page's body size, headlined, no ticks (the kicker mark means "chapter") */
#engage .balanced{margin-top:48px}
.photo-right .side{order:2}
.photo-right .side .photo{order:0}   /* the base .photo-right .photo{order:2} would put the photo under its own verdict */
.moments{margin-top:32px;display:grid;grid-template-columns:1fr;row-gap:36px}
.mo-q{font-size:24px;line-height:1.2;font-weight:400;letter-spacing:-.015em;color:var(--navy);margin:0 0 8px}
.moment p{font-size:19px;line-height:1.6;font-weight:300;color:var(--ink);margin:0}
@media(max-width:912px){#practice .photo{height:440px;min-height:0}.mo-q{font-size:22px}.moments{row-gap:28px}}

/* chapter 03's left block: three registers — 24 head, 19 body, the owner's line at 21/500 */
.tr-limit{font-size:21px}
/* chapter 03's lower block shares the scene's columns (copy 1fr | photo 422): the wide copy under the copy, the navy ladder under the photo and verdict */
#engage .balanced{grid-template-columns:minmax(0,1fr) 422px}
.balanced .narrow{max-width:none}
@media(min-width:913px) and (max-width:1255px){#engage .balanced{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:912px){#engage .balanced{grid-template-columns:1fr}.balanced .narrow{order:-1}}
.turn.sub{font-size:24px;line-height:1.3;font-weight:400;letter-spacing:-.015em;color:var(--navy);margin:0 0 16px;text-wrap:balance}
.balanced .market{font-size:19px;line-height:1.6;font-weight:300;color:var(--ink);letter-spacing:0;margin:0 0 20px}
.balanced .retained{font-size:21px;line-height:1.35;font-weight:500;color:var(--navy);margin:0}
.balanced .platform{font-size:19px;line-height:1.6;font-weight:300;color:var(--ink)}
.tlink{padding:6px 0 10px;min-height:44px;display:inline-flex;align-items:center}
.reads .tlink{display:flex;width:fit-content}
.photo-right .photo{min-height:560px}

/* navy band with the founder on the LEFT (alternation: 03 caps left → founder caps right): portrait 240×300, her line at 34 */
.founder-band .wrap{align-items:center}
.founder-col{margin:0;align-self:center}
.founder-portrait{display:block;width:240px;height:300px;object-fit:cover;object-position:50% 20%;border-radius:170px 170px 5px 5px}
.founder-col figcaption{display:block;margin-top:16px;max-width:300px}
.founder-col .cred-line{display:block;font-size:15px;line-height:1.5;color:#cdb6c6;margin:0}
.founder-band h2.lbl{margin:0 0 16px;line-height:1.3}
.founder-band .frame-line{font-size:34px;margin:0 0 12px;text-wrap:balance}
.founder-band .quote-cite{font-size:17px;line-height:1.4;color:#cdb6c6;margin:0 0 24px}
@media(min-width:913px) and (max-width:1255px){.founder-band .frame-line{font-size:30px}}
@media(max-width:912px){
  .founder-band .wrap{grid-template-columns:1fr;row-gap:32px}
  .founder-portrait{width:200px;height:250px}
  .founder-band .frame-line{font-size:26px}
  .hero-shade{background:linear-gradient(180deg,rgba(15,18,48,.72),rgba(15,18,48,.78) 55%,rgba(15,18,48,.86))}
  .hero .an{max-width:30ch;font-size:17px}
}

/* closing */
.scope{color:var(--muted)}
@media(max-width:912px){
  .closing-answer{font-size:24px}
  .recog p,.market,.retained{font-size:19px}
  .tr-limit{font-size:21px}
  .turn.sub{font-size:24px}
}

/* Wix transfer correction: honor native 3:4 photos and prevent phone overflow from inherited fixed minimum heights. */
@media(max-width:912px){#what .side .photo,#practice .side .photo,#engage .side .photo,.ledger-scene .photo{width:100%;max-width:100%;height:auto;min-height:0;aspect-ratio:3/4}}