/* Inner pages on E's system (Mason 2026-09-08): the Who we are language. Loads after e.css; body has .page-e. */
.page-e .nav{background:var(--navy)}
.page-e main{background:var(--paper)}
/* Opening: Who's head (eyebrow + h1 left, lede right), the rule, then a wide photo */
.page-e__open{padding:calc(var(--navh,96px) + clamp(56px,calc(7vh / var(--z,1)),88px)) 0 0;background:var(--paper)}
.page-e__head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(40px,calc(6vw / var(--z,1)),120px);align-items:end;margin-bottom:clamp(24px,calc(3.5vh / var(--z,1)),36px)}
.page-e .eyebrow{margin-bottom:22px}
.page-e h1{font-family:var(--brand);font-weight:400;font-size:clamp(40px,calc(3.8vw / var(--z,1)),58px);line-height:1.08;letter-spacing:-.012em;color:var(--ink);margin:0;max-width:22ch}
.page-e__lede{margin:0;padding-bottom:6px}
.page-e__lede span{display:block;font-size:19px;line-height:1.6;color:var(--ink-80);max-width:30em}
.page-e__ph{margin:clamp(32px,calc(4vh / var(--z,1)),48px) 0 0;aspect-ratio:21/9;overflow:hidden;background:var(--navy);position:relative}
.page-e__ph .fx-clip{height:100%}
.page-e__ph img{display:block;width:100%;height:100%;object-fit:cover}
/* Sections: h2 and intro left, content right, hairline on top; paper and paper-2 alternate */
.page-e .sec{padding:clamp(56px,calc(7vh / var(--z,1)),88px) 0;background:var(--paper)}
.page-e .sec .rail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,calc(5vw / var(--z,1)),96px);align-items:start;padding-top:clamp(28px,calc(4vh / var(--z,1)),40px);border-top:1px solid var(--line)}
.page-e .sec h2{font-family:var(--brand);font-weight:400;font-size:clamp(30px,calc(2.6vw / var(--z,1)),40px);line-height:1.12;letter-spacing:-.012em;color:var(--ink);margin:0 0 14px;max-width:14ch}
.page-e .sec .note{grid-column:2;font-family:var(--brand);font-weight:500;font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--mute);margin:16px 0 0}
/* Content rows with hairlines, like the practices list on the home page */
.page-e .point{border-top:0;border-bottom:1px solid var(--line);padding:18px 0 20px}
.page-e .point:first-child{padding-top:0}
.page-e .point p{font-size:17px;line-height:1.7;color:var(--ink-80);margin:0;max-width:40em}
/* Phones and tablets */
@media (max-width:900px){
  .page-e__open{padding-top:calc(var(--navh,72px) + 40px)}
  .page-e__head,.page-e .sec .rail{grid-template-columns:minmax(0,1fr);gap:20px}
  .page-e h1{font-size:clamp(30px,calc(8vw / var(--z,1)),38px);max-width:none}
  .page-e__lede span{font-size:17px}
  .page-e__ph{aspect-ratio:4/3;margin-top:24px}
  .page-e .sec{padding:48px 0}
  .page-e .sec h2{max-width:none;font-size:clamp(26px,calc(7vw / var(--z,1)),32px)}
  
  
  .page-e .sec .note{grid-column:1}
}
@media (min-width:1900px) and (max-width:1600px){.page-e h1{font-size:64px}.page-e__lede span,.page-e .sec__head p,.page-e .point p{font-size:20px}}
/* Everything after the section head sits in the content column, however many blocks a section has */
.page-e .sec .rail > :not(.sec__head){grid-column:2}
@media (max-width:900px){.page-e .sec .rail > :not(.sec__head){grid-column:1}}
/* Research index and notes, contact, team, 404 (v2 blocks restyled in E's type and palette) */
.page-e .sec--alt{background:var(--paper-2)}
.page-e .sec--alt .rail,.page-e .sec--tall .rail{display:block;border-top:0;padding-top:0}
.page-e .note,.page-e .jr__feat{text-decoration:none;color:inherit}
.page-e .article{max-width:40em;font-size:18px;line-height:1.75;color:var(--ink-80)}
.page-e .article p{margin:0 0 1.2em}
.page-e .article h2{font-family:var(--brand);font-weight:400;font-size:clamp(26px,calc(2vw / var(--z,1)),32px);letter-spacing:-.012em;color:var(--ink);margin:1.4em 0 .5em}
/* Contact */
.page-e .contact{padding-top:calc(var(--navh,96px) + clamp(56px,calc(7vh / var(--z,1)),88px));padding-bottom:clamp(64px,calc(8vh / var(--z,1)),112px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(40px,calc(6vw / var(--z,1)),120px);align-items:start}
.page-e .contact h1{font-family:var(--brand);font-weight:400;font-size:clamp(40px,calc(3.8vw / var(--z,1)),58px);line-height:1.08;letter-spacing:-.012em;color:var(--ink);margin:0 0 18px}
/* Team */
.page-e .person__fig{position:relative;overflow:hidden;background:var(--navy)}
.page-e .person__fig img{filter:grayscale(1) contrast(1.08)}
.page-e .person__fig::before{content:"";position:absolute;inset:0;z-index:1;background:#2B3E5F;mix-blend-mode:screen;opacity:.42;pointer-events:none}
.page-e .person__fig::after{content:"";position:absolute;inset:0;z-index:1;background:#0C121D;mix-blend-mode:multiply;opacity:.6;pointer-events:none}
.page-e .person h3{font-family:var(--brand);font-weight:400;font-size:clamp(22px,calc(1.7vw / var(--z,1)),26px);letter-spacing:-.012em;color:var(--ink);margin:14px 0 4px}
.page-e .person p{font-size:15px;line-height:1.6;color:var(--ink-80)}
/* 404 opening without a photo keeps some room below */
.page-e__open:last-child{padding-bottom:clamp(96px,calc(14vh / var(--z,1)),160px)}
@media (max-width:900px){.page-e .contact,.page-e .split{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:calc(var(--navh,72px) + 40px)}.page-e .contact h1,.page-e .split h1{font-size:clamp(30px,calc(8vw / var(--z,1)),38px)}}
/* Sections without a head (research lists) are plain blocks; note titles are sentence case */
.page-e .sec .rail:not(:has(.sec__head)){display:block}
/* Only sections with a head use the split grid; research lists and other headless sections are plain blocks */
.page-e .sec .rail{display:block}
.page-e .sec .rail > :not(.sec__head){grid-column:auto}
/* Team page photo hero: navy grade and a heavier wash so the white lines read */
.page-e .phero h1,.page-e .phero .eyebrow{color:var(--paper)}
/* The research cards share the class name of the small "Illustrative only" note; give them their layout back */
.page-e .notes > .note,.page-e .jr__note{grid-column:auto;font-family:inherit;font-weight:inherit;font-size:inherit;letter-spacing:0;text-transform:none;color:inherit;margin:0}
/* Mason 2026-09-08 (night): "why does each page have this giant photo to start" -> the opening follows What we do: head + lede, rule, then a contained photo left and the page's first block right */
.page-e__open{padding-bottom:clamp(56px,calc(7vh / var(--z,1)),88px)}
.page-e__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(40px,calc(5vw / var(--z,1)),96px);align-items:start}
.page-e__ph{margin:0;aspect-ratio:4/5;max-height:calc(calc(100vh / var(--z,1)) - var(--navh,96px) - 48px);position:sticky;top:calc(var(--navh,96px) + 24px)}
.page-e__ph--land{aspect-ratio:5/4}
.page-e__lead h2{font-family:var(--brand);font-weight:400;font-size:clamp(26px,calc(2.1vw / var(--z,1)),32px);line-height:1.15;letter-spacing:-.012em;color:var(--ink);margin:0 0 8px;max-width:none}
.page-e__lead > p{font-size:17px;line-height:1.65;color:var(--ink-80);margin:0 0 22px;max-width:34em}
.page-e__lead .driver:first-child,.page-e__lead .point:first-child,.page-e__lead .serve__col:first-child{border-top:1px solid var(--line);padding-top:18px}
.page-e__lead .btn-br,.page-e__lead .btn-e{margin-top:8px}
@media (min-width:1900px) and (max-width:1600px){.page-e__lead > p{font-size:19px}}
@media (max-width:900px){
  .page-e__open{padding-bottom:48px}
  .page-e__body{grid-template-columns:minmax(0,1fr);gap:28px}
  .page-e__ph,.page-e__ph--land{position:static;aspect-ratio:4/3;max-height:none;margin:0}
}
/* Mason 2026-09-09: no hairlines between text rows; the section top line, tick rules and rails carry the grid */
.page-e .driver,.page-e .serve__col,.page-e .point,.page-e .qa,.page-e__lead .driver:first-child,.page-e__lead .point:first-child,.page-e__lead .serve__col:first-child{border-top:0;border-bottom:0}
.page-e__lead .driver:first-child,.page-e__lead .point:first-child,.page-e__lead .serve__col:first-child{padding-top:0}

/* Mason 2026-09-09 ("images/video built into the design"): the practice pages open on a loop, then run a scroll story with a sticky media column (a clip, the systems figure, a clip) beside the chapters */
.page-e__ph video,.v3-e .fx-clip video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
/* .page-e .sec .rail{display:block} outranks a single class */
.story__m{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s var(--ease,ease)}
.story__m.is-on{opacity:1}
.story__m video,.story__m img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.story__m::before{content:"";position:absolute;inset:0;z-index:1;background:#2B3E5F;mix-blend-mode:screen;opacity:.42;pointer-events:none}
.story__m::after{content:"";position:absolute;inset:0;z-index:1;background:#0C121D;mix-blend-mode:multiply;opacity:.5;pointer-events:none}
/* Mason 2026-09-09 ("grid lines to the background"): the same rails the home bands carry, at the content edges of the opening and the story, plus one down the centre of the story. overflow:clip keeps the sticky frames working. */
.page-e__open--rails,.page-e .story{overflow:clip}
.page-e__open--rails .page-e__in,.page-e .story .story__in{position:relative}
.page-e__open--rails .page-e__in::before,.page-e__open--rails .page-e__in::after,.page-e .story .story__in::before,.page-e .story .story__in::after,.story__rail{content:"";position:absolute;top:calc(-100vh / var(--z,1));bottom:calc(-100vh / var(--z,1));width:1px;background:var(--line);pointer-events:none}
.page-e__open--rails .page-e__in::before,.page-e .story .story__in::before{left:calc(var(--pad) - 28px)}
.page-e__open--rails .page-e__in::after,.page-e .story .story__in::after{right:calc(var(--pad) - 28px)}
@media (max-width:900px){.page-e__open--rails .page-e__in::before,.page-e__open--rails .page-e__in::after,.page-e .story .story__in::before,.page-e .story .story__in::after,.story__rail{display:none}}
/* Mason 2026-09-09: mobile scroll — flat navy tint instead of blend modes on every graded figure (see e.css) */
@media (max-width:900px){
.page-e .note__fig::before,.page-e .person__fig::before,.res-i__fig::before,.res-g__fig::before,.story__m::before,.story__inline::before{display:none}
.page-e .note__fig::after,.page-e .person__fig::after,.res-i__fig::after{mix-blend-mode:normal;opacity:.61}
.res-g__fig::after,.story__m::after,.story__inline::after{mix-blend-mode:normal;opacity:.52}
}
/* ---------- Shell (2026-09-10, wave two, web-r2-fable-why): every non-home page as one family with Who we are / What we do / the research index.
   Rails on every paper section, no tint bands, the research index shares the rail position, Contact and 404 open in the same grammar,
   notes carry a reading hairline. Motion (reveals, arrows, rail draw-in, page transitions) is /assets/css/motion.css (web-r2-fable-home). ---------- */
/* Rails on every paper section, not only the practice opening and story: the section box clips them so the segments meet edge to edge */
.page-e__open,.page-e .sec{overflow:clip}
.page-e__open .page-e__in,.page-e .sec>.rail{position:relative}
.page-e__open .page-e__in::before,.page-e__open .page-e__in::after,.page-e .sec>.rail::before,.page-e .sec>.rail::after{content:"";position:absolute;top:calc(-100vh / var(--z,1));bottom:calc(-100vh / var(--z,1));width:1px;background:var(--line);pointer-events:none}
.page-e__open .page-e__in::before,.page-e .sec>.rail::before{left:calc(var(--pad) - 28px)}
.page-e__open .page-e__in::after,.page-e .sec>.rail::after{right:calc(var(--pad) - 28px)}
/* No tint bands (rule): About's alternate sections and the Team grid sit on the same paper */
.page-e .sec--tint,.page-e .sec--alt{background:var(--paper)}
.page-e .sec--alt .rail{border-top:1px solid var(--line);padding-top:clamp(28px,calc(4vh / var(--z,1)),40px)}
/* Contact: the Who we are opening with the office beside the form. Photo and facts stay in view while the form scrolls */
.page-e__lead form{margin-top:6px}
/* Research notes: a reading hairline under the header grows with the scroll position (CSS scroll timeline; browsers without it show nothing) */
.page-e--note main::before{content:"";position:fixed;left:0;top:var(--navh,96px);z-index:5;width:100%;height:1px;background:var(--acc);transform-origin:left;transform:scaleX(0);animation:readline linear both;animation-timeline:scroll(root);pointer-events:none}
@keyframes readline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.page-e--note main::before{display:none}}
@media (max-width:900px){
  /* phones keep the quiet edge rails inside the gutter, where the research index already has them */
  .page-e__open .page-e__in::before,.page-e__open .page-e__in::after,.page-e .sec>.rail::before,.page-e .sec>.rail::after{display:block}
  .page-e__open .page-e__in::before,.page-e .sec>.rail::before{left:12px}
  .page-e__open .page-e__in::after,.page-e .sec>.rail::after{right:12px}
  .page-e__open--rails .page-e__in::before,.page-e__open--rails .page-e__in::after{display:block}
  
  
  
  .page-e--note main::before{top:var(--navh,72px)}
}