/* AERTHEIX HOME V10
   H01 — The reading line. A single line of light moves across a dark field; wherever it passes,
         observed work becomes visible, then fades back unless it is kept. Hero copy is unchanged.
   H05 — Read one question at a time. Three illustrative colleagues with the same result, explored in
         five short chapters with the Foundation journey's grammar. The original axis questions stay verbatim.
   Closing statements gain the gold rule used on the other pages.
   Everything is scoped to .page-home and to new class names, so no other page is reached.
   Without JavaScript or with reduced motion, both sections render as complete static compositions. */

/* ---------- H01 · THE READING LINE ---------- */
.page-home .hero--reading{isolation:isolate;touch-action:pan-y}
.page-home .hero--reading .hero-field{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(4,1fr);margin:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--line-x,50%) - 9vw),#000 calc(var(--line-x,50%) - 1.4vw),#000 calc(var(--line-x,50%) + 1.4vw),transparent calc(var(--line-x,50%) + 9vw)),linear-gradient(180deg,transparent 4%,#000 22%,#000 66%,transparent 92%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent calc(var(--line-x,50%) - 9vw),#000 calc(var(--line-x,50%) - 1.4vw),#000 calc(var(--line-x,50%) + 1.4vw),transparent calc(var(--line-x,50%) + 9vw)),linear-gradient(180deg,transparent 4%,#000 22%,#000 66%,transparent 92%);
  mask-composite:intersect}
.page-home .hero--reading .hero-field img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.66) contrast(1.02)}
.page-home .hero--reading::after{position:absolute;top:0;bottom:0;left:var(--line-x,50%);z-index:1;width:1px;background:linear-gradient(180deg,transparent 0,rgba(255,244,222,.9) 16%,rgba(255,244,222,.85) 64%,transparent 96%);box-shadow:0 0 22px 3px rgba(212,188,132,.32);content:"";pointer-events:none}
.page-home .hero--reading .hero-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
.page-home .hero--reading.is-live .hero-field{visibility:hidden}
.page-home .hero--reading.is-live::after{display:none}
.page-home .hero--reading .hero-shell{position:relative;z-index:2}
.page-home .hero--reading .hero-scrim{height:calc(var(--fs-h1) * 3.4);background:radial-gradient(ellipse 50% 40% at 50% 50%,rgba(6,23,17,.72) 0%,rgba(6,23,17,.46) 45%,rgba(6,23,17,0) 82%)}
.page-home .hero--reading .hero-title{gap:0 clamp(34px,4.6vw,80px)}
.page-home .hero--reading .hero-phrase-left,.page-home .hero--reading .hero-phrase-right{transform:none;transition:none}
.page-home .hero--reading .hero-phrase-right{color:var(--gold-light)}
/* The hint travels with the light, so the thing to move is the thing that is labelled. */
.page-home .hero--reading .hero-hint{position:absolute;top:0;left:0;z-index:3;margin:0;padding:6px 10px 6px 14px;color:#F0EBDD;font:500 12.5px/1.3 var(--sans);letter-spacing:.01em;white-space:nowrap;opacity:0;transition:opacity .8s ease;pointer-events:none;will-change:transform}
.page-home .hero--reading .hero-hint::before{position:absolute;top:50%;left:0;width:8px;height:1px;background:var(--gold-light);content:""}
.page-home .hero--reading .hero-hint.is-left{padding:6px 14px 6px 10px}
.page-home .hero--reading .hero-hint.is-left::before{right:0;left:auto}
.page-home .hero--reading[data-state="ready"] .hero-hint{opacity:.86}
.page-home .hero--reading[data-state="ready"].is-touched .hero-hint{opacity:0}
.page-home .hero--reading .hero-hint .hint-touch{display:none}
@media (hover:none){.page-home .hero--reading .hero-hint .hint-fine{display:none}.page-home .hero--reading .hero-hint .hint-touch{display:inline}}
/* Entrance is pure CSS, timed to the line's descent: if the script never runs, the headline still arrives. */
.page-home .hero--reading .eyebrow{animation:hr-fade .9s ease .15s both}
.page-home .hero--reading .hero-phrase-left{animation:hr-part-l 1.2s cubic-bezier(.2,.8,.2,1) .95s both}
.page-home .hero--reading .hero-phrase-right{animation:hr-part-r 1.2s cubic-bezier(.2,.8,.2,1) .95s both}
.page-home .hero--reading .hero-footer{animation:hr-rise 1s cubic-bezier(.2,.8,.2,1) 1.45s both}
@keyframes hr-fade{from{opacity:0}to{opacity:1}}
@keyframes hr-part-l{from{opacity:0;transform:translateX(24%)}to{opacity:1;transform:none}}
@keyframes hr-part-r{from{opacity:0;transform:translateX(-18%)}to{opacity:1;transform:none}}
@keyframes hr-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .page-home .hero--reading .hero-field{grid-template-columns:repeat(2,1fr)}
  .page-home .hero--reading .hero-field img:nth-child(1),.page-home .hero--reading .hero-field img:nth-child(3){display:none}
  .page-home .hero--reading .hero-title{gap:0 .3em}
}

/* ---------- H05 · READ ONE QUESTION AT A TIME ----------
   Same interaction grammar as the Foundation journey (chapters, photographed scene, a sheet to explore),
   so the site teaches one way of exploring. Few words on screen; every full reading stays in the HTML. */
.page-home #three-questions.rj{background:#EEF0E7}
.page-home .rj-track{position:relative}
.page-home .rj-pin{padding-block:6px 0}
.page-home .rj.is-pinned .rj-pin{position:sticky;top:calc(var(--header-h) + 14px)}
.page-home .rj-grid{display:grid;grid-template-columns:23% 1fr;gap:clamp(18px,2vw,28px)}
.page-home .rj-chapters{display:flex;flex-direction:column;gap:3px;padding-top:10px}
.page-home .rj-chapters button{display:flex;gap:14px;align-items:center;min-height:62px;padding:12px 10px;border:0;border-left:2px solid transparent;background:none;color:#4D6555;font:500 13px/1.3 var(--sans);text-align:left;cursor:pointer;transition:transform .25s,color .25s,background-color .25s}
.page-home .rj-chapters button span{flex:none;width:1.6em;font:400 28px/1 var(--display)}
.page-home .rj-chapters button b{margin-left:auto;font-weight:400;font-size:15px;opacity:.7}
.page-home .rj-chapters button[aria-pressed="true"]{border-color:#A18752;background:rgba(250,248,239,.7);color:#856A32}
@media (hover:hover){.page-home .rj-chapters button:hover{transform:translateX(4px);color:#244B37}}
.page-home .rj-hint{margin:auto 0 0;padding:14px 0 0 12px;color:#647166;font-size:11px;line-height:1.65;letter-spacing:.035em}
.page-home .rj-stage{min-width:0}
.page-home .rj-scene{position:relative;display:flex;min-height:clamp(440px,34vw,500px);flex-direction:column;justify-content:space-between;overflow:hidden;padding:clamp(22px,2.4vw,34px);border-radius:12px;background:#DCE3D5}
.page-home .rj-scene[hidden]{display:none}
.page-home .rj-scene + .rj-scene{margin-top:18px}
.page-home .rj.is-live .rj-scene + .rj-scene{margin-top:0}
.page-home .rj-photo{position:absolute;inset:0;margin:0}
.page-home .rj-photo::after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,32,26,.72),rgba(13,32,26,.18) 48%,rgba(13,32,26,.05) 75%);content:""}
.page-home .rj-photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.page-home .rj.is-live .rj-scene:not([hidden]) .rj-photo img{animation:rj-photo .7s cubic-bezier(.2,.8,.2,1)}
.page-home .rj.is-live .rj-scene:not([hidden]) .rj-heading{animation:rj-rise .6s cubic-bezier(.2,.8,.2,1) .05s both}
.page-home .rj.is-live .rj-scene:not([hidden]) .rj-sheet{animation:rj-sheet .7s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes rj-photo{from{opacity:.35;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes rj-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rj-sheet{from{opacity:0;transform:translateY(16px) rotate(-1.5deg)}to{opacity:1;transform:rotate(-1.5deg)}}
.page-home .rj-heading{position:relative;max-width:560px;color:#fff}
.page-home .rj-heading > span{display:block;color:var(--gold-light);font:600 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.page-home .rj-heading h3{margin:10px 0 0;color:#fff;font:400 clamp(28px,2.5vw,36px)/1.1 var(--display);letter-spacing:-.025em;text-wrap:balance}
.page-home .rj-heading p{max-width:52ch;margin:10px 0 0;color:rgba(255,255,255,.9);font-size:14px;line-height:1.6}

/* the sheet: three colleagues side by side, one line of reading for the one you follow */
.page-home .rj-sheet{position:relative;width:min(100%,470px);align-self:flex-end;margin-top:22px;padding:20px 24px 16px;border-radius:2px;background:#FFFDF5;box-shadow:0 14px 32px rgba(19,40,23,.22);transform:rotate(-1.5deg);transition:transform .3s}
@media (hover:hover){.page-home .rj-sheet:hover{transform:rotate(0) translateY(-4px)}}
.page-home .rj-sheet-label{margin:0 0 10px;color:#8A6D32;font:600 9.5px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.page-home .rj-sheet-label::after{display:block;width:42px;height:1px;margin-top:9px;background:var(--gold);content:""}
.page-home .rj-rows{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.page-home .rj-row{display:grid;grid-template-columns:34px minmax(90px,1fr) minmax(0,1.15fr);gap:12px;align-items:center;padding:7px 8px 7px 4px;border-radius:6px;transition:background-color .25s,opacity .25s}
.page-home .rj-row button{width:30px;height:30px;padding:0;border:1px solid #BFB599;border-radius:50%;background:none;color:#365541;font:500 14px/1 var(--display);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.page-home .rj-row.is-on{background:rgba(36,75,55,.06)}
.page-home .rj-row.is-on button{border-color:#244B37;background:#244B37;color:#fff}
.page-home .rj.is-live .rj-row:not(.is-on){opacity:1}
.page-home .rj.is-live .rj-row:not(.is-on):hover{opacity:1}
.page-home .rj-tag{color:#294D38;font-size:13px;line-height:1.35}
.page-home .rj-say{display:block;margin-top:2px;color:#556657;font-size:12.5px;line-height:1.45}
.page-home .rj.is-live .rj-say{display:none}
.page-home .rj-text{min-height:3.1em;margin:12px 0 8px;color:#294D38;font:400 16px/1.5 var(--display)}
.page-home .rj:not(.is-live) .rj-text{display:none}
.page-home .rj-sheet small{display:block;color:#667063;font-size:10px;line-height:1.6}

/* mini readings on paper */
.page-home .rj-viz{position:relative;display:block;height:22px}
.page-home .rj-bar{position:absolute;top:8px;left:0;right:0;height:5px;border-radius:5px;background:#E4E1D4}
.page-home .rj-bar i{position:absolute;top:0;bottom:0;left:0;border-radius:5px;transform-origin:left}
.page-home .rj-bar .r{background:#8C948A}
.page-home .rj-bar .x{background:#B8985A}
.page-home .rj-bar .s{background:repeating-linear-gradient(90deg,#B8985A 0 4px,transparent 4px 7px);opacity:.8;border-radius:0 5px 5px 0}
.page-home .rj-bar b{position:absolute;top:-5px;bottom:-5px;width:1px;background:#6D7468}
.page-home .rj-viz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.page-home .rj-viz path{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.page-home .rj-viz .base{stroke:#D8D3C2;stroke-width:1;stroke-dasharray:2 4}
.page-home .rj-viz .y{stroke:#5F7F63}
.page-home .rj-viz .z{stroke:#8E6F86}
.page-home .rj-viz .band{position:absolute;top:0;bottom:0;left:39%;width:31%;border-left:1px dashed rgba(142,111,134,.5);border-right:1px dashed rgba(142,111,134,.5);background:rgba(142,111,134,.07)}
.page-home .rj-viz .dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%}
.page-home .rj-viz .dot.y{background:#5F7F63}
.page-home .rj-viz .dot.z{background:#8E6F86}
.page-home .rj-viz .mv{position:absolute;top:50%;left:0;width:26px;height:26px;margin-top:-13px;border:1px solid #B8985A;border-radius:50%;color:#8A6D32;font:500 14px/24px var(--display);text-align:center}
.page-home .rj.is-live .rj-scene:not([hidden]) .rj-bar i{animation:rj-grow .9s cubic-bezier(.3,.7,.2,1) .35s both}
.page-home .rj.is-live .rj-scene:not([hidden]) .rj-viz svg{animation:rj-draw 1s cubic-bezier(.3,.7,.2,1) .35s both}
.page-home .rj.is-live .rj-scene:not([hidden]) .rj-viz .dot{animation:rj-dot .4s ease 1.2s both}
@keyframes rj-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes rj-draw{from{clip-path:inset(-4px 100% -4px -4px)}to{clip-path:inset(-4px -4px -4px -4px)}}
@keyframes rj-dot{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}

.page-home .rj-bottom{display:flex;align-items:center;gap:24px;margin-top:14px;color:#627262;font-size:11px}
.page-home .rj-progress{flex:1;height:2px;background:#C6CEBD}
.page-home .rj-progress i{display:block;width:20%;height:2px;background:#967943;transition:width .4s}
.page-home .rj-bottom button{padding:10px;border:0;border-bottom:1px solid #B2A17B;background:transparent;color:#244B37;font-size:12px;cursor:pointer}
.page-home .rj:not(.is-live) .rj-chapters,.page-home .rj:not(.is-live) .rj-bottom{display:none}
.page-home .rj:not(.is-live) .rj-grid{grid-template-columns:1fr}

@media (max-width:999px){
  .page-home .rj-grid{grid-template-columns:1fr}
  .page-home .rj-chapters{flex-direction:row;flex-wrap:wrap;gap:6px;padding:0}
  .page-home .rj-chapters button{flex:1 1 30%;min-height:52px;gap:8px;padding:10px 8px;border-left:0;border-bottom:2px solid transparent;font-size:12px}
  .page-home .rj-chapters button[aria-pressed="true"]{border-color:#A18752}
  .page-home .rj-chapters button span{font-size:21px}
  .page-home .rj-chapters button b,.page-home .rj-hint{display:none}
}
@media (max-width:760px){
  .page-home .rj-chapters button{flex:1 1 18%;flex-direction:column;align-items:flex-start;gap:4px;min-height:58px;padding:8px 4px;font-size:10.5px;line-height:1.2}
  .page-home .rj-chapters button span{font-size:19px}
  .page-home .rj-scene{min-height:560px;padding:20px 16px 16px}
  .page-home .rj-heading h3{font-size:26px}
  .page-home .rj-heading p{font-size:13.5px}
  .page-home .rj-sheet{width:100%;padding:16px 14px 12px;transform:none}
  .page-home .rj.is-live .rj-scene:not([hidden]) .rj-sheet{animation-name:rj-rise}
  .page-home .rj-row{grid-template-columns:30px minmax(70px,.9fr) minmax(0,1.1fr);gap:9px}
  .page-home .rj-bottom{gap:12px;flex-wrap:wrap}
}

/* Gold rule under the closing statements, as on the other pages (motion-v53 supplies .m-rule). */
body.page-home main .close-rule{position:relative}
body.page-home main .close-rule>.m-rule{position:relative;top:auto;left:auto;right:auto;display:block;width:min(100%,640px);margin:22px auto 0}
body.page-home main .field .close-rule>.m-rule{background:linear-gradient(90deg,transparent,var(--gold-light),transparent)}

@media (prefers-reduced-motion:reduce){
  .page-home .hero--reading .eyebrow,.page-home .hero--reading .hero-phrase-left,.page-home .hero--reading .hero-phrase-right,.page-home .hero--reading .hero-footer{animation:none}
  .page-home .rj .rj-scene *{animation:none!important}
}
@media print{.page-home .hero--reading .hero-canvas{display:none}}
.page-home .rj-after{margin-top:var(--sp-block)}

/* ---------- H01B · INTRODUCTION FILM ---------- */
.page-home .home-film-region{padding:clamp(30px,4vw,58px) var(--gutter) clamp(46px,5.5vw,78px);background:#F7F5EE}
#home-intro-film{display:block;position:relative;width:min(100%,var(--max));aspect-ratio:16/9;margin:0 auto;overflow:hidden;border-radius:4px 4px 16px 16px;background:#F7F5EE;box-shadow:0 22px 58px -36px rgba(15,42,33,.5)}
#home-intro-film video{display:block;width:100%;height:100%;object-fit:cover;background:#F7F5EE}
#home-intro-film .system-film-controls{position:absolute;z-index:2;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);display:flex;align-items:center;gap:8px}
#home-intro-film .system-film-controls[hidden]{display:none}
#home-intro-film .system-film-controls button{min-height:44px;padding:10px 17px;border:1px solid rgba(244,232,207,.72);border-radius:4px;background:rgba(15,48,35,.9);color:#fff;font:600 12px/1.2 var(--sans);letter-spacing:.04em;cursor:pointer;box-shadow:0 8px 25px rgba(16,46,33,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#home-intro-film .system-film-controls button:hover{background:#173f30;border-color:#d3b77d}
#home-intro-film .system-film-controls button:focus-visible{outline:3px solid #f4d38b;outline-offset:3px}
#home-intro-film .system-film-fallback{position:absolute;z-index:3;left:16px;bottom:16px;padding:12px 16px;background:#173f30;color:#fff}
#home-intro-film .system-film-fallback[hidden]{display:none}
@media(max-width:600px){#home-intro-film .system-film-controls{right:8px;bottom:8px;gap:5px}#home-intro-film .system-film-controls button{min-height:38px;padding:7px 10px;font-size:10px}}


/* H05 financial-services reading: a shared outcome, distinct evidence and an always-readable decision summary. */
.page-home .rj-shared-result{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:4px 0 8px;border:1px solid rgba(184,152,90,.42);border-radius:6px;background:#F6F3E9;color:#294D38;font-size:13px;line-height:1.35}
.page-home .rj-shared-result span{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:#244B37;color:#fff;font-size:12px}
.page-home .rj-scene[data-scene="0"] .rj-row{grid-template-columns:34px minmax(0,1fr);min-height:48px}
.page-home .rj-scene[data-scene="0"] .rj-tag{font-size:12.5px}
.page-home .rj-scene[data-scene="4"]{min-height:clamp(550px,42vw,630px)}
.page-home .rj-scene[data-scene="4"] .rj-row{grid-template-columns:30px 28px minmax(0,1fr);gap:9px;min-height:66px}
.page-home .rj-scene[data-scene="4"] .rj-say{display:block;font-size:11px}
.page-home .rj-scene[data-scene="4"] .rj-text{min-height:0}
.page-home .rj-scene[data-scene="4"] .rj-row:not(.is-on){opacity:.88}
@media(max-width:760px){.page-home .rj-scene[data-scene="4"]{min-height:670px}}