/* The approved EJALAH composition extended through the institutional journey. */
.ej-story { --ej-story-line:rgba(245,242,234,.16); }
.ej-title-accent { color:var(--ej-orange); }
.ej-story-container { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.ej-story-section { padding-block:clamp(64px,8vw,112px); scroll-margin-top:100px; }
.ej-story h2,.ej-story h3 { font-family:var(--ej-font-display); font-weight:700; letter-spacing:0; text-wrap:balance; }
.ej-story h2 { max-width:24ch; margin:0 0 32px; font-size:clamp(30px,3.8vw,54px); line-height:1.4; }
.ej-story h3 { margin:0 0 20px; font-size:clamp(25px,2.3vw,34px); line-height:1.5; }
.ej-story p { font-family:var(--ej-font-text); font-size:19px; font-weight:400; line-height:1.9; color:#DED9CE; text-wrap:pretty; }
.ej-story .ej-story-lead { max-width:62ch; margin:0 0 42px; font-size:21px; }
.ej-story-action { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:56px; max-width:100%; padding:16px 24px; border:0; border-radius:8px; background:var(--ej-orange); color:var(--ej-ink); font:500 17px/1.5 var(--ej-font-ui); cursor:pointer; transition:background-color 160ms ease; }
.ej-story-action:hover { color:var(--ej-ink); background:var(--ej-orange-text); }
.ej-story-action:disabled { cursor:wait; opacity:.65; }
.ej-story-action:focus-visible,.ej-story-link:focus-visible,.ej-story-reset:focus-visible { outline:2px solid currentColor; outline-offset:6px; }
.ej-story-action svg,.ej-story-link svg { width:22px; height:22px; flex:none; }
.ej-story[dir="rtl"] :is(.ej-story-action,.ej-story-link) svg { transform:scaleX(-1); }
.ej-story-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; margin-top:12px; font:500 17px/1.6 var(--ej-font-ui); color:inherit; text-decoration:underline; text-underline-offset:7px; }
.ej-story-section.ej-possibilities { padding-block:0; }
.ej-paths { --ej-path-pad-start:32px; --ej-path-pad-end:48px; }
.ej-path-stage { position:relative; }
.ej-path { min-width:0; padding-block:clamp(64px,8vw,112px); }
.ej-path-content { width:min(920px,calc(100% - 96px)); margin-inline:auto; text-align:center; }
.ej-path .ej-path-question { max-width:21ch; margin:0 auto 32px; font-size:clamp(38px,4.8vw,68px); line-height:1.45; }
.ej-path-answer h4 { max-width:32ch; margin:0 auto 24px; font:700 clamp(26px,2.5vw,36px)/1.5 var(--ej-font-display); text-wrap:balance; }
.ej-path-answer p { max-width:50ch; margin:0 auto 24px; }
.ej-paths .ej-path-outcome { max-width:42ch; margin-bottom:0; color:var(--ej-cream); font-size:19px; }
.ej-paths-connection { display:grid; justify-items:center; gap:32px; padding:64px 24px 96px; text-align:center; }
.ej-paths-join { width:min(320px,70%); height:auto; }
.ej-paths-join path { stroke:var(--ej-stone); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:var(--ej-join-draw,0); }
.ej-paths-join circle { fill:var(--ej-orange); }
.ej-paths-connection .ej-paths-close { max-width:48ch; margin:0; font-size:clamp(24px,2.3vw,32px); line-height:1.8; }
/* Static text order remains the default. Pin only when the complete scenes fit. */
.ej-paths[data-paths-ready] { height:var(--ej-paths-height); }
.ej-paths[data-paths-ready] .ej-path-stage { position:sticky; top:var(--ej-header-space); height:var(--ej-stage-height); isolation:isolate; overflow:clip; }
.ej-paths[data-paths-ready] .ej-path { position:absolute; inset:0; display:flex; align-items:center; padding-block:var(--ej-path-pad-start) var(--ej-path-pad-end); opacity:var(--ej-path-light); transform:translate3d(0,var(--ej-path-offset),0); pointer-events:none; }
.ej-paths[data-paths-ready] .ej-path-question { transform:translate3d(0,var(--ej-question-offset),0); }
.ej-paths[data-paths-ready] .ej-path-answer { opacity:var(--ej-answer-light); transform:translate3d(0,var(--ej-answer-offset),0); clip-path:inset(0 0 var(--ej-answer-mask) 0); }
.ej-paths[data-paths-ready] .ej-paths-connection { position:absolute; inset:0; align-content:center; padding-block:var(--ej-path-pad-start) var(--ej-path-pad-end); opacity:var(--ej-connection-light); transform:translate3d(0,var(--ej-connection-offset),0); pointer-events:none; }
.ej-paths[data-paths-active] :is(.ej-path-question,.ej-path-answer) { will-change:transform,opacity; }
.ej-scenario { background:var(--ej-cream); color:var(--ej-ink); }
.ej-scenario p { color:#444137; }
.ej-scenario-flow { display:grid; grid-template-columns:1fr 28px 1fr 28px 1fr; align-items:center; gap:24px; padding-block:32px; border-block:1px solid rgba(22,21,15,.22); }
.ej-scenario-flow p { margin:0; font:700 clamp(24px,2.2vw,32px)/1.6 var(--ej-font-display); color:var(--ej-ink); text-wrap:balance; }
.ej-scenario-arrow svg { width:28px; height:28px; }
.ej-story[dir="rtl"] .ej-scenario-arrow { transform:scaleX(-1); }
.ej-story .ej-scenario-note { margin:24px 0 0; font-size:16px; }
.ej-team-preview-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.ej-team-preview p { max-width:45ch; }
.ej-team-portraits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:center; }
.ej-team-portraits img { width:100%; height:auto; aspect-ratio:3/5; object-fit:cover; object-position:center top; border-radius:4px; }
.ej-team-portraits img:nth-child(2) { margin-top:48px; }
.ej-invitation { border-top:1px solid var(--ej-story-line); }
.ej-invitation p { max-width:52ch; margin:0 0 32px; }
/* Each remaining homepage chapter first gives its idea the whole scene,
   then opens into its own evidence. Shared about/contact sections stay flat. */
.ej-chapter { --ej-chapter-pad-start:32px; --ej-chapter-pad-end:48px; }
.ej-chapter-stage { position:relative; }
.ej-chapter-content { max-width:1080px; }
.ej-chapter .ej-chapter-title { max-width:21ch; margin:0 auto 40px; text-align:center; font-size:clamp(38px,4.8vw,68px); line-height:1.45; }
.ej-chapter.ej-scenario .ej-chapter-body { text-align:center; }
.ej-chapter.ej-scenario .ej-story-lead { margin-inline:auto; }
.ej-chapter.ej-invitation .ej-chapter-body { text-align:center; }
.ej-chapter.ej-invitation p { margin-inline:auto; }
.ej-chapter[data-chapter-ready] { height:var(--ej-chapter-height); padding-block:0; }
.ej-chapter[data-chapter-ready] .ej-chapter-stage { position:sticky; top:var(--ej-header-space); height:var(--ej-stage-height); display:flex; align-items:center; padding-block:var(--ej-chapter-pad-start) var(--ej-chapter-pad-end); overflow:clip; }
.ej-chapter[data-chapter-ready] .ej-chapter-title { transform:translate3d(0,var(--ej-chapter-title-offset),0); }
.ej-chapter[data-chapter-ready] .ej-chapter-body { opacity:var(--ej-chapter-reveal); transform:translate3d(0,var(--ej-chapter-body-offset),0); clip-path:inset(0 0 var(--ej-chapter-mask) 0); pointer-events:var(--ej-chapter-pointer); }
.ej-chapter[data-chapter-ready] :is(.ej-scenario-flow p,.ej-scenario-arrow) { opacity:var(--ej-step-light,1); }
.ej-chapter[data-chapter-ready] .ej-scenario-panels { display:grid; align-items:center; }
.ej-chapter[data-chapter-ready] .ej-scenario-panels > * { grid-area:1 / 1; }
.ej-chapter[data-chapter-ready] .ej-scenario-panels .ej-story-lead { margin-block:0; opacity:var(--ej-example-intro); }
.ej-chapter[data-chapter-ready] .ej-scenario-flow { opacity:var(--ej-example-flow); }
.ej-chapter[data-chapter-ready] .ej-team-portraits img { opacity:var(--ej-portrait-light,1); transform:translate3d(0,var(--ej-portrait-offset,0px),0); }
.ej-chapter[data-chapter-active] :is(.ej-chapter-title,.ej-chapter-body) { will-change:transform,opacity; }
/* Tab can reveal an action immediately, independent of scroll progress. */
.ej-chapter[data-chapter-ready]:focus-within .ej-chapter-body { opacity:1; transform:none; clip-path:none; pointer-events:auto; }
.ej-chapter[data-chapter-ready]:focus-within .ej-chapter-title { transform:none; }
.ej-chapter[data-chapter-ready]:focus-within .ej-team-portraits img { opacity:1; transform:none; }
.ej-story-header { padding-block:clamp(56px,7vw,104px) 64px; }
.ej-story-header h1 { max-width:16ch; margin:0 0 28px; font:700 clamp(48px,7vw,96px)/1.4 var(--ej-font-display); color:var(--ej-cream); text-wrap:balance; animation:ej-story-focus 600ms cubic-bezier(.16,1,.3,1) both; }
.ej-story-header p { max-width:54ch; margin:0; font-size:22px; animation:ej-story-support 440ms cubic-bezier(.16,1,.3,1) 160ms both; }
.ej-purpose-layout { display:grid; grid-template-columns:1fr 1fr; gap:100px; border-top:1px solid var(--ej-story-line); padding-top:48px; }
.ej-purpose-layout p { margin:0 0 24px; }
.ej-founder-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:48px; }
.ej-founder { min-width:0; }
.ej-founder img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center top; margin-bottom:28px; border-radius:4px; }
.ej-founder h3 { margin-bottom:8px; font-size:26px; }
.ej-founder p { margin:0; font:400 17px/1.8 var(--ej-font-ui); color:var(--ej-stone); }
.ej-founder .ej-story-link { font-size:16px; }
.ej-contact-header { padding-bottom:40px; }
.ej-conversation-section { padding-top:24px; }
.ej-conversation-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; align-items:start; }
.ej-conversation-note h2 { font-size:36px; }
.ej-conversation-note p { max-width:32ch; }
.ej-contact-form { width:100%; min-width:0; }
.ej-contact-form .ej-form-fields { gap:24px; }
.ej-field { display:flex; flex-direction:column; gap:10px; min-width:0; }
.ej-field label { color:var(--ej-cream); font:500 16px/1.7 var(--ej-font-ui); }
.ej-field :is(input,select,textarea) { display:block; width:100%; min-width:0; max-width:100%; min-height:54px; padding:14px 16px; border:1px solid rgba(245,242,234,.25); border-radius:8px; background:var(--ej-ink); color:var(--ej-cream); font:400 17px/1.7 var(--ej-font-ui); caret-color:var(--ej-orange); color-scheme:dark; }
.ej-field input[dir="ltr"] { text-align:start; }
.ej-field textarea { min-height:160px; resize:vertical; }
.ej-field :is(input,select,textarea):focus-visible { outline:2px solid var(--ej-cream); outline-offset:3px; border-color:var(--ej-cream); }
.ej-field :is(input,textarea)::placeholder { color:var(--ej-stone); opacity:1; }
.ej-story .ej-form-context { font:400 15px/1.8 var(--ej-font-ui); color:var(--ej-stone); margin:0; }
.ej-story .ej-form-notice { border:0; border-top:1px solid var(--ej-story-line); padding:20px 0; margin-top:24px; }
.ej-story .ej-form-success { color:#A7D7B4; }
.ej-story-reset { min-height:44px; padding:8px 0; border:0; background:none; color:var(--ej-cream); font:500 16px/1.6 var(--ej-font-ui); text-decoration:underline; text-underline-offset:5px; cursor:pointer; }
.ej-questions-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.ej-decision-questions { border-top:1px solid var(--ej-story-line); }
.ej-decision-questions details { border-bottom:1px solid var(--ej-story-line); }
.ej-decision-questions summary { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:76px; padding-block:20px; cursor:pointer; list-style:none; font:500 19px/1.7 var(--ej-font-ui); }
.ej-decision-questions summary::-webkit-details-marker { display:none; }
.ej-decision-questions summary:focus-visible { outline:2px solid var(--ej-cream); outline-offset:4px; }
.ej-decision-questions summary svg { width:22px; height:22px; flex:none; transition:transform 180ms ease; }
.ej-decision-questions details[open] summary svg { transform:rotate(180deg); }
.ej-decision-questions details p { margin:0; padding-bottom:24px; font-size:18px; animation:ej-story-support 180ms ease both; }
.ej-redirect-link { padding:96px 24px; }
@keyframes ej-story-focus { from { opacity:.65; filter:blur(5px); transform:translateY(10px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
@keyframes ej-story-support { from { opacity:.65; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:900px) {
    .ej-story-container { width:calc(100% - 48px); }
    .ej-team-preview-layout,.ej-purpose-layout,.ej-conversation-layout,.ej-questions-layout { gap:40px; }
    .ej-founder-grid { gap:24px; }
    .ej-founder h3 { font-size:24px; }
}
@media(max-width:700px) {
    .ej-story-container { width:calc(100% - 40px); }
    .ej-story-section { padding-block:56px; }
    .ej-story h2 { font-size:30px; margin-bottom:24px; }
    .ej-story h3 { font-size:25px; }
    .ej-story p { font-size:18px; line-height:1.85; }
    .ej-story .ej-story-lead { font-size:19px; margin-bottom:32px; }
    .ej-team-preview-layout,.ej-purpose-layout,.ej-conversation-layout,.ej-questions-layout { grid-template-columns:1fr; gap:32px; }
    .ej-path-content { width:calc(100% - 40px); }
    .ej-path .ej-path-question { font-size:clamp(34px,9vw,48px); margin-bottom:24px; }
    .ej-path-answer h4 { font-size:26px; margin-bottom:20px; }
    .ej-path-answer p { margin-bottom:20px; }
    .ej-paths .ej-path-outcome { font-size:18px; margin-bottom:0; }
    .ej-paths-connection { padding-block:48px 64px; gap:24px; }
    .ej-scenario-flow { grid-template-columns:1fr; gap:16px; }
    .ej-story[dir="rtl"] .ej-scenario-arrow,.ej-scenario-arrow { transform:rotate(90deg); width:28px; }
    .ej-scenario-flow p { font-size:26px; }
    .ej-team-portraits { max-width:520px; }
    .ej-team-portraits img { aspect-ratio:3/4; }
    .ej-chapter .ej-chapter-title { font-size:clamp(34px,9vw,48px); margin-bottom:28px; }
    .ej-chapter.ej-team-preview .ej-team-preview-layout { gap:24px; }
    .ej-chapter .ej-team-portraits { width:min(440px,100%); margin-inline:auto; }
    .ej-chapter .ej-team-portraits img:nth-child(2) { margin-top:32px; }
    .ej-chapter .ej-scenario-flow { gap:8px; padding-block:20px; }
    .ej-chapter .ej-scenario-flow p { font-size:24px; line-height:1.4; }
    .ej-chapter .ej-scenario-arrow svg { width:20px; height:20px; }
    .ej-chapter .ej-scenario-arrow { justify-self:center; width:20px; height:20px; }
    .ej-story-header { padding-block:56px 40px; }
    .ej-story-header h1 { font-size:clamp(44px,12vw,68px); }
    .ej-story-header p { font-size:20px; }
    .ej-founder-grid { grid-template-columns:1fr; gap:48px; margin-top:36px; }
    .ej-founder { display:grid; grid-template-columns:112px minmax(0,1fr); gap:8px 20px; align-items:start; }
    .ej-founder img { grid-row:1/4; margin:0; }
    .ej-founder h3 { font-size:24px; margin:0; }
    .ej-founder p { font-size:16px; }
    .ej-founder .ej-story-link { margin:0; }
    .ej-conversation-section { padding-top:12px; }
    .ej-conversation-note h2 { font-size:28px; }
    .ej-conversation-note p { max-width:100%; }
    .ej-questions-layout { gap:12px; }
    .ej-decision-questions summary { font-size:17px; }
}
@media(max-width:1023px) {
    .ej-paths { --ej-path-pad-end:104px; }
    .ej-chapter { --ej-chapter-pad-end:104px; }
}
@media(prefers-reduced-motion:reduce) {
    .ej-story-header :is(h1,p),.ej-decision-questions details p { animation:none; }
    .ej-decision-questions summary svg { transition:none; }
}
