/* Sample T, "Lines from Babbio". Round 02, 2026-10-02. Built by build.py + app.js. */
:root{
  --red:#A32638; --gray:#363D45; --dblue:#004380; --mblue:#4896CF;
  --lgray:#E4E5E6; --lblue:#E7F2FB; --white:#FFFFFF; --gold:#EBC73B;
  --disp:'Saira Condensed','Arial Narrow',Arial,sans-serif;
  --body:'IBM Plex Sans',Arial,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* geometry: container left edge, the two rail positions, the content column */
  --cl:max(56px, calc((100vw - 1120px) / 2));
  --railA:var(--cl);
  --railB:calc(var(--railA) + 48px);
  --cleft:calc(var(--railA) + 136px);
  --rw:8px;      /* line weight of Events, People and Resources */
  --rwr:12px;    /* the reader's red route is drawn heavier, as a route planner marks your route */
  /* desktop ride: how far the Training section slides up over the zoomed first screen */
  --ovl:calc(.45 * max(100vh, 660px));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--gray);font:400 17px/1.65 var(--body);font-synthesis:none;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
h1,h2,h3,p,ol,ul{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--white);color:var(--red);padding:10px 14px;border:2px solid var(--red);font-weight:600}
.skip:focus{top:12px}

/* ------------------------------------------------ header */
.site-head{position:absolute;top:0;left:0;right:0;height:120px;z-index:8;display:flex;align-items:center;padding:0 40px 0 var(--cl)}
.brand{display:block;flex:none}
.brand img{height:50px;width:auto}
.lab-name{font:600 24px/1 var(--disp);margin-left:30px;white-space:nowrap;padding-left:30px;border-left:1px solid var(--lgray);line-height:50px}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:20px;padding:0;align-items:center}
.nav a{color:var(--gray);text-decoration:none;font:600 14px/1 var(--body);white-space:nowrap;display:inline-flex;align-items:center;padding:8px 0}
.nav a:hover{color:var(--red)}
.nv{display:inline-block;width:14px;height:6px;margin-right:7px;flex:none}
.nv-red{background:var(--red)} .nv-blue{background:var(--dblue)} .nv-gray{background:var(--gray)} .nv-mblue{background:var(--mblue)}
.nv-x{width:16px;height:10px;border:2px solid var(--gray);background:var(--white)}
.nv-end{width:4px;height:14px;background:var(--red)}
.menu-btn{display:none}
.nav-mail{display:none}

/* ------------------------------------------------ hero (desktop) */
.hero{position:relative;height:100vh;min-height:660px;overflow:hidden;background:var(--white)}
@media (min-height:1401px){ .hero{height:900px} }
.hero-text{position:absolute;z-index:4;left:var(--cl);top:0;width:440px;padding-top:clamp(150px, 21vh, 196px)}
.kicker{font:600 12px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
h1{font:700 96px/.98 var(--disp);letter-spacing:-.005em;color:var(--gray);margin:12px 0 24px}
.lede{font:400 19px/1.55 var(--body);max-width:430px;margin:0 0 28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;font:600 15px/1.25 var(--body);text-decoration:none;border-radius:3px;border:2px solid var(--red);text-align:center}
.btn-red{background:var(--red);color:var(--white)}
.btn-red:hover{background:var(--gray);border-color:var(--gray)}
.btn-line{background:var(--white);color:var(--red)}
.btn-line:hover{background:var(--red);color:var(--white)}
.btn-hero{min-height:52px}
.addr{font:400 14px/1.5 var(--body);margin-top:14px}

.map-box{position:absolute;z-index:2;left:calc(var(--cl) + 460px);right:0;top:0;bottom:0;pointer-events:none}
.map-desk{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map-desk a{pointer-events:auto;cursor:pointer}
.map-desk a:focus{outline:none}
.map-desk a:focus-visible .shape{stroke-width:6}
.map-desk a:focus-visible text{text-decoration:underline}
.ln{fill:none;stroke-width:var(--sw,12);stroke-linecap:butt;stroke-linejoin:miter}
.map-desk .ln:not([data-line=red]){stroke-width:var(--osw,8)}
.shape{stroke-width:var(--ssw,3)}
.tag rect{stroke-width:var(--tsw,3)}
.cap-r{stroke-width:var(--csw,4)}
/* label sizes grow with --lf (set by app.js from the diagram scale) so no label renders under 11 px */
.map-desk .l1{font:600 calc(15px * var(--lf,1)) var(--body);fill:var(--gray)}
.map-desk .l2{font:400 calc(14px * var(--lf,1)) var(--body);fill:var(--gray)}
.map-desk .stn-mail .l1{fill:var(--red);text-decoration:underline}
.map-desk .stn-mail .shape{fill:var(--red)}
.map-desk .more .l1{fill:var(--dblue);text-decoration:underline}
.map-desk .more:hover .l1{text-decoration-thickness:2px}
.cap-l{font:600 24px var(--disp);fill:var(--gray);letter-spacing:.01em}
.firm-l{font:600 28px var(--disp);fill:var(--gray)}
.tag text{font:600 calc(14px * var(--lf,1)) var(--body);fill:var(--gray)}
.car{visibility:hidden}
.map-desk .stn:hover .shape{stroke-width:5}
.map-desk .stn:hover text{text-decoration:underline}
/* hover or focus on a station: the other lines turn Light Gray */
.map-desk[data-hl=red] .ln:not([data-line=red]),.map-desk[data-hl=blue] .ln:not([data-line=blue]),
.map-desk[data-hl=gray] .ln:not([data-line=gray]),.map-desk[data-hl=mblue] .ln:not([data-line=mblue]),
.map-desk[data-hl=red] .stn:not([data-line=red]) .shape,.map-desk[data-hl=blue] .stn:not([data-line=blue]) .shape,
.map-desk[data-hl=gray] .stn:not([data-line=gray]) .shape,.map-desk[data-hl=mblue] .stn:not([data-line=mblue]) .shape,
.map-desk[data-hl=red] .tag:not([data-line=red]) rect,.map-desk[data-hl=blue] .tag:not([data-line=blue]) rect,
.map-desk[data-hl=gray] .tag:not([data-line=gray]) rect,.map-desk[data-hl=mblue] .tag:not([data-line=mblue]) rect{stroke:var(--lgray)}
.map-desk[data-hl=blue] .stn:not([data-line=blue]) .shape-in{fill:var(--lgray)}
.map-desk[data-hl=blue] .term,.map-desk[data-hl=gray] .term,.map-desk[data-hl=mblue] .term{fill:var(--lgray)}
.map-desk[data-hl=blue] .stn-mail .shape,.map-desk[data-hl=gray] .stn-mail .shape,.map-desk[data-hl=mblue] .stn-mail .shape{fill:var(--white)}
.map-desk[data-hl=red] .more-arrow,.map-desk[data-hl=gray] .more-arrow,.map-desk[data-hl=mblue] .more-arrow{fill:var(--lgray)}
html.motion .map-desk .ln,html.motion .map-desk .shape,html.motion .map-desk .shape-in,html.motion .map-desk .tag rect,html.motion .map-desk .term,html.motion .map-desk .more-arrow{transition:stroke .15s ease-out,fill .15s ease-out}

/* first paint before the load sequence takes over (removed by app.js, or after 3.5 s if the script never runs) */
html.anim-pre .map-desk .ln{stroke-dasharray:1 1;stroke-dashoffset:1}
html.anim-pre .map-desk .stn,html.anim-pre .map-desk .tag,html.anim-pre .map-desk .cap,html.anim-pre .map-desk .firm-l,html.anim-pre .map-desk .more{opacity:0}
html.anim-pre .strip .s-ln,html.anim-pre .strip .s-stn,html.anim-pre .strip .s-row,html.anim-pre .strip .s-cap,html.anim-pre .strip .s-mail{opacity:0}

.map-card{position:absolute;z-index:6;left:0;top:0;background:var(--white);border:3px solid var(--card,var(--gray));padding:12px 14px 13px;width:290px;opacity:0;visibility:hidden;pointer-events:none}
.map-card.on{opacity:1;visibility:visible}
html.motion .map-card{transition:opacity .15s ease-out,visibility .15s}
.mc-meta{font:600 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--card-text,var(--gray))}
.mc-title{font:600 16px/1.35 var(--body);margin-top:4px}
.mc-who{font:400 15px/1.45 var(--body);margin-top:4px}
.mc-who:empty{display:none}

.strip{display:none}

/* ------------------------------------------------ line sections */
.line-sec{position:relative;padding:120px var(--cl) 128px var(--cleft);--rail:var(--railA);--line:var(--red);--line-text:var(--red);scroll-margin-top:72px}
.line-sec[data-line=red]{--rw:var(--rwr)}
#training{padding-top:128px;--J:56px}
/* the jog: where the first-screen red leg meets the Training rail when there is no zoom (still pages, tablets) */
.jog{position:absolute;left:0;right:0;top:0;height:0;z-index:1;--lx:var(--legx,calc(var(--cl) + 540px))}
.jog-v{position:absolute;left:calc(var(--lx) - var(--rw) / 2);top:0;width:var(--rw);height:calc(var(--J) + var(--rw) / 2);background:var(--red)}
.jog-h{position:absolute;left:calc(var(--railA) - var(--rw) / 2);width:calc(var(--lx) - var(--railA) + var(--rw));top:calc(var(--J) - var(--rw) / 2);height:var(--rw);background:var(--red)}
#training .rail{top:calc(var(--J) - var(--rw) / 2)}
html.desk-ride .jog{display:none}
html.desk-ride #training .rail{top:0}
/* desktop ride: the zoomed first screen stays pinned while the Training section slides up over its lower part,
   so the zoom ends on content; the red rail is drawn over the hero leg at the same x, so the line never breaks */
html.desk-ride .hero{z-index:1}
html.desk-ride #training{z-index:2;background:var(--white);margin-top:calc(-1 * var(--ovl));padding-top:64px}
#events,#resources{--rail:var(--railB)}
.line-sec[data-line=blue]{--line:var(--dblue);--line-text:var(--dblue)}
.line-sec[data-line=gray]{--line:var(--gray);--line-text:var(--gray)}
.line-sec[data-line=mblue]{--line:var(--mblue);--line-text:var(--gray)}
.line-sec .kicker{color:var(--line-text)}
.rail{position:absolute;top:0;bottom:0;left:calc(var(--rail) - var(--rw) / 2);width:var(--rw);z-index:1}
.rail i{position:absolute;inset:0}
.rail .track{background:var(--lgray);display:none}
.rail .fill{background:var(--line);transform-origin:50% 0}
html.motion .rail .track{display:block}

.change{position:absolute;top:0;left:0;right:0;height:0;z-index:3}
.change-cap{position:absolute;top:-16px;left:calc(var(--railA) - 22px);width:calc(var(--railB) - var(--railA) + 44px);height:32px;background:var(--white);border:4px solid var(--gray);z-index:1}
/* the new line arrives across the page from the right into the interchange */
.sweep{position:absolute;top:calc(var(--rw) / -2);left:calc(var(--railB) + 18px);right:0;height:var(--rw);background:var(--line);transform-origin:100% 50%}
.change-l{position:absolute;top:-62px;left:var(--cleft);font:600 30px/1 var(--disp);letter-spacing:.01em;color:var(--gray);white-space:nowrap}

.chip-wrap{display:none}
.chip{display:inline-block;background:var(--white);border:3px solid var(--line);padding:4px 11px;font:600 18px/1.2 var(--disp);color:var(--gray);white-space:nowrap}

.sec-head{max-width:800px;margin-bottom:52px}
.line-sec h2{font:700 clamp(48px,5.6vw,84px)/1 var(--disp);color:var(--gray);margin:10px 0 20px}
.intro{font:400 19px/1.6 var(--body);max-width:62ch}
.intro a{font-weight:600}

.stations{list-style:none;padding:0}
.st{position:relative}
.st:focus{outline:none}
.st:focus-visible{outline:3px solid var(--line);outline-offset:6px}
/* after a click on a map station glides here: the stop and title light up for 1.2 s, in every motion mode */
.st.arrived .stop{background:var(--line)}
.st.arrived .stop.k-transfer{background:var(--gray)}
.st.arrived .st-title{color:var(--line-text)}
.stop{position:absolute;z-index:2;background:var(--white);border:3px solid var(--line);
  --sz:24px;--sh:24px;width:var(--sz);height:var(--sh);left:calc(var(--rail) - var(--cleft) - var(--sz) / 2);top:calc(var(--sy) - var(--sh) / 2)}
.stop.k-talk{--sz:34px;--sh:16px}
.stop.k-forum{--sz:28px;--sh:28px}
.stop.k-forum::after{content:"";position:absolute;inset:6px;background:var(--line)}
.stop.k-transfer{--sz:68px;--sh:32px;border:4px solid var(--gray)}
.st-meta{font:600 13px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--line-text)}
.st-title{color:var(--gray)}
.st-who{font:400 17px/1.5 var(--body);margin-top:4px}
.st-text{font:400 17px/1.65 var(--body);margin-top:8px;max-width:62ch}
.st-plain{font:400 16px/1.5 var(--body);margin-top:6px}
html.motion .st-body,html.motion .stop,html.motion .st-title{transition:transform .15s ease-out,background-color .15s ease-out,color .15s ease-out}
html.motion .st.is-active .stop{background:var(--line)}
html.motion .st.is-active .stop.k-transfer{background:var(--gray)}
html.motion .st.is-active .st-title{color:var(--line-text)}
html.motion .st.is-active .st-body{transform:translateX(6px)}
/* the platform: when the train is at a station, a short line runs from the rail to its text */
html.motion .line-sec .st::before{content:"";position:absolute;z-index:1;left:calc(var(--rail) - var(--cleft));top:calc(var(--sy) - 3px);width:calc(var(--cleft) - var(--rail) - 22px);height:6px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease-out)}
html.motion .line-sec .st.is-active::before{transform:scaleX(1)}

/* training */
.st-ws{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;padding:40px 0;--sy:60px}
.ws-title{font:700 40px/1.05 var(--disp)}
.st-ws .st-meta{margin-top:14px}
.st-ws .st-text{margin:0 0 22px}
.st-mail{padding:44px 0 72px;--sy:56px}
.st-mail .st-meta{margin-bottom:6px}
.mail-big{font:600 26px/1.3 var(--body);color:var(--line-text);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.mail-big:hover{text-decoration-thickness:4px}

/* events */
.legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;font:600 14px/1.4 var(--body)}
.legend li{display:flex;align-items:center;gap:10px}
.lg{display:inline-block;background:var(--white);border:3px solid var(--dblue);width:22px;height:22px;position:relative;flex:none}
.lg.k-talk{width:32px;height:14px}
.lg.k-forum{width:26px;height:26px}
.lg.k-forum::after{content:"";position:absolute;inset:5px;background:var(--dblue)}
.lg.k-transfer{width:44px;height:26px;border:4px solid var(--gray)}
.st-ev{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;padding:30px 0;--sy:68px}
.st-ev .st-meta{margin-bottom:6px}
.st-ev .st-title{font:600 22px/1.3 var(--body);max-width:40ch}
.st-img{width:240px;border:1px solid var(--lgray)}
.st-ev.k-transfer{padding:40px 0;--sy:88px}
.st-ev.k-transfer .st-title{font:700 40px/1.05 var(--disp);max-width:none}
.sold{display:inline-block;margin-left:8px;border:2px solid var(--gray);padding:0 8px;font:600 13px/1.6 var(--body);letter-spacing:.08em;text-transform:uppercase;vertical-align:1px}
.btn-transfer{margin-top:18px;display:flex;width:max-content;max-width:100%;background:var(--white);color:var(--gray);border:4px solid var(--gray);border-radius:0}
.btn-transfer:hover{background:var(--gray);color:var(--white)}

/* people */
.people .st-person{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);gap:28px;padding:18px 0;align-items:start;--sy:66px}
.st-photo{width:96px;height:96px;object-fit:cover;background:var(--lgray)}
.st-person .st-title{font:600 22px/1.3 var(--body)}
.st-talks{padding-top:4px}
.st-role{font:600 13px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-top:4px}
.st-talk{display:block;font:600 16px/1.45 var(--body);color:var(--red);margin-top:4px}
html.motion .st-person.is-active .st-photo{outline:3px solid var(--gray);outline-offset:3px}

/* resources */
.st-res{padding:28px 0 40px;--sy:69px}
.st-res .st-meta{margin-bottom:6px}
.st-res .st-title{font:600 26px/1.3 var(--body)}

/* contact terminus: the rail turns, stops at the email (the buttons hang under that stop), crosses the river, ends at "Your firm" */
.terminus{padding-top:0;padding-bottom:120px}
.t-upper{position:relative;margin:0 calc(-1 * var(--cl)) 0 calc(-1 * var(--cleft));padding:120px var(--cl) 84px var(--cleft)}
.t-river{position:absolute;top:0;bottom:-30px;right:max(120px, calc(var(--cl) - 40px));width:96px;background:var(--lblue);z-index:0}
.t-wrap{position:relative;z-index:2;max-width:780px}
.t-addr{font-style:normal;margin-top:30px;font:400 17px/1.6 var(--body)}
.t-line{position:absolute;left:0;right:0;bottom:0;height:0;z-index:1}
.t-corner{position:absolute;left:calc(var(--rail) - var(--rw) / 2);top:calc(var(--rw) / -2);width:var(--rw);height:var(--rw);background:var(--red)}
.t-h,.t-h-track{position:absolute;top:calc(var(--rw) / -2);left:calc(var(--rail) + var(--rw) / 2);right:calc(max(120px, calc(var(--cl) - 40px)) - 72px);height:var(--rw);background:var(--red);transform-origin:0 50%}
.t-h-track{background:var(--lgray);display:none}
html.motion .t-h-track{display:block}
.t-stn{position:absolute;left:calc(var(--cleft) + 10px);top:-15px;width:30px;height:30px;background:var(--red);border:3px solid var(--red);z-index:1}
.t-term{position:absolute;right:calc(max(120px, calc(var(--cl) - 40px)) - 78px);top:-30px;width:var(--rw);height:60px;background:var(--red)}
.t-firm{position:absolute;right:calc(max(120px, calc(var(--cl) - 40px)) - 64px);top:-74px;font:600 28px/1.2 var(--disp);color:var(--gray);white-space:nowrap}
.t-actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* ------------------------------------------------ footer */
.site-foot{border-top:1px solid var(--lgray);padding:52px var(--cl) 44px}
.foot-in{display:flex;flex-wrap:wrap;gap:24px 56px;align-items:flex-start}
.foot-in img{height:40px;width:auto}
.site-foot p{font:400 16px/1.6 var(--body)}
.foot-motion{margin-left:auto}
.motion-btn{font:600 15px/1.2 var(--body);color:var(--gray);background:var(--white);border:2px solid var(--gray);padding:10px 14px;border-radius:3px;cursor:pointer}
.motion-btn:hover{border-color:var(--red);color:var(--red)}

/* ------------------------------------------------ the train (desktop): a car seen from above, riding the rail at 40% of the screen */
.train{position:fixed;z-index:7;top:40vh;left:0;display:none;pointer-events:none;flex-direction:column;align-items:center;gap:8px;
  transform:translate3d(var(--tx,160px),-50%,0) translateX(-50%);width:48px;padding:12px 0 14px;
  background:var(--white);border:3px solid var(--tc,var(--red));opacity:0}
.train-w{display:flex;flex-direction:column;gap:5px}
.train-w i{display:block;width:10px;height:10px;background:var(--tc,var(--red))}
html.motion .train-w i{transition:background-color .45s ease-out}
.train-l{writing-mode:vertical-rl;transform:rotate(180deg);font:600 24px/1 var(--disp);color:var(--gray);white-space:nowrap;letter-spacing:.01em}
html.motion .train{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s ease-out,opacity .15s ease-out}
.train.on{opacity:1}
html.desk-ride .train{display:flex}

/* ------------------------------------------------ the ride bar (desktop ride): the in-car "next stop" display, with the email */
.ride{display:none}
html.desk-ride .ride{position:fixed;z-index:9;top:0;left:0;right:0;height:60px;display:flex;align-items:center;gap:24px;padding:0 var(--cl);
  background:var(--gray);color:var(--white);transform:translateY(-100%);visibility:hidden}
html.desk-ride .ride.on{transform:none;visibility:visible}
html.motion .ride{transition:transform .35s var(--ease-out),visibility .35s}
.rd-line{flex:none;display:inline-flex;align-items:center;gap:9px;background:var(--white);color:var(--gray);border:3px solid var(--rc,var(--red));padding:3px 12px 3px 9px;font:600 20px/1.2 var(--disp)}
.rd-sw{display:block;width:18px;height:8px;background:var(--rc,var(--red))}
html.motion .rd-line,html.motion .rd-sw{transition:border-color .3s ease-out,background-color .3s ease-out}
.rd-next{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.rd-k{flex:none;font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lgray)}
.rd-win{display:block;overflow:hidden;height:32px;min-width:0}
.rd-t{display:block;font:600 27px/32px var(--disp);color:var(--gold);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-t.in{animation:rd-in .32s var(--ease-out)}
@keyframes rd-in{from{transform:translateY(100%)}to{transform:none}}
.rd-chg{flex:none;font:600 14px/1 var(--body);color:var(--white);white-space:nowrap}
.rd-chg:empty{display:none}
.rd-mail{margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;background:var(--white);color:var(--red);font:600 15px/1.2 var(--body);text-decoration:none;border-radius:3px}
.rd-mail:hover{background:var(--red);color:var(--white)}
.rd-mail:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ------------------------------------------------ narrower desktop */
@media (min-width:1100px) and (max-width:1279px){
  .site-head{padding-right:28px}
  .lab-name{display:none}
  .hero-text{width:400px}
  h1{font-size:86px}
  .lede{font-size:18px}
  .map-box{left:calc(var(--cl) + 420px)}
  .st-ws{grid-template-columns:1fr;gap:16px}
  .people .st-person{grid-template-columns:96px minmax(0,1fr)}
  .st-talks{grid-column:2}
}
@media (min-width:1100px) and (max-width:1359px){
  .nav ul{gap:15px}
  .nav a{font-size:13px}
}

/* ------------------------------------------------ tablet and phone: stacked hero, no zoom */
@media (max-width:1099px){
  :root{--cl:32px;--railA:28px;--railB:28px;--cleft:68px;--rw:6px;--rwr:10px}
  .site-head{padding:0 32px}
  .lab-name{font-size:22px}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);color:var(--gray);background:var(--white);border:2px solid var(--gray);border-radius:3px;padding:12px 16px;cursor:pointer}
  .nav ul{display:none;position:absolute;right:32px;top:96px;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border:3px solid var(--gray);padding:8px 0;min-width:260px;z-index:9}
  .nav.open ul{display:flex}
  .nav li a{padding:13px 18px;font-size:16px;display:flex}
  .nav-mail{display:block;border-top:1px solid var(--lgray);margin-top:6px}
  .nav-mail a{color:var(--red)!important}
  .hero{height:auto;min-height:0;overflow:hidden}
  .hero-text{position:relative;left:auto;width:auto;max-width:620px;padding:156px 32px 0}
  h1{font-size:80px}
  .map-box{position:relative;left:auto;right:auto;top:auto;bottom:auto;aspect-ratio:820 / 800;margin-top:24px;overflow:hidden}
  .map-desk{inset:auto;left:0;top:-11.25%;width:100%;height:112.5%}
  .line-sec{padding:100px 32px 100px var(--cleft)}
  #training{padding-top:120px}
  .jog{--lx:var(--legx,9.756vw)}
  .change-cap{left:calc(var(--railA) - 15px);width:30px;height:30px;top:-15px}
  .sweep{left:calc(var(--railB) + 12px)}
  .change-l{left:var(--cleft);top:-50px;font-size:26px}
  html.motion .chip-wrap{display:block;position:sticky;top:16px;height:0;z-index:5;margin-left:calc(var(--rail) - var(--cleft) - 17px)}
  .chip{writing-mode:vertical-rl;transform:rotate(180deg);padding:12px 4px;width:34px;text-align:center;line-height:20px}
  .st-ws{grid-template-columns:1fr;gap:14px}
  .ws-title{font-size:34px}
  .people .st-person{grid-template-columns:96px minmax(0,1fr);gap:22px}
  .st-talks{grid-column:2;padding-top:0}
  .terminus{padding-bottom:100px}
  .t-upper{padding:100px 32px 72px var(--cleft)}
  .t-river{right:64px;width:28px;top:auto;bottom:-30px;height:220px}
  .stop.k-transfer{--sz:44px;--sh:28px}
  .t-h,.t-h-track{right:44px}
  .t-stn{width:26px;height:26px;top:-13px;left:calc(var(--cleft) + 6px)}
  .t-term{right:40px;top:-24px;height:48px}
  .t-firm{right:16px;font-size:22px;top:-64px}
}
@media (max-width:899px){
  .st-ev{grid-template-columns:1fr;gap:16px}
}

@media (max-width:599px){
  :root{--cl:16px;--railA:22px;--railB:22px;--cleft:52px;--rw:6px;--rwr:8px}
  .site-head{display:block;padding:20px 16px 0;height:120px}
  .brand img{height:50px}
  .lab-name{display:block;margin:8px 0 0;padding:0;border:0;font-size:21px;line-height:1.1}
  .nav{position:absolute;right:16px;top:24px}
  .nav ul{right:0;top:58px;min-width:min(300px, calc(100vw - 32px))}
  .hero-text{padding:140px 16px 0}
  h1{font-size:52px;line-height:1;margin:8px 0 14px;white-space:nowrap}
  .lede{font-size:17px;line-height:1.6;margin-bottom:16px}
  .btn-hero{display:flex;width:100%;min-height:52px}
  .addr{margin-top:16px}
  .map-box{display:none}
  .map-card{display:none}

  /* phone strip map */
  .strip{display:block;position:relative;height:352px;margin-top:28px;overflow:hidden}
  .s-river{position:absolute;top:0;bottom:0;right:22px;width:16px;background:var(--lblue)}
  .s-ln{position:absolute;background:var(--red);display:block}
  .s-ln[data-line=blue]{background:var(--dblue)} .s-ln[data-line=gray]{background:var(--gray)} .s-ln[data-line=mblue]{background:var(--mblue)}
  .s-in{top:30px;height:8px;left:116px;right:9px;transform-origin:100% 50%}
  .s-in-drop{left:116px;width:8px;top:30px;height:42px;transform-origin:50% 0}
  .s-term{position:absolute;right:4px;top:18px;width:6px;height:32px;background:var(--red)}
  .s-firm{position:absolute;right:16px;top:-2px;font:600 18px/1.2 var(--disp);color:var(--gray)}
  .s-stn{position:absolute;left:92px;width:16px;height:16px;margin-top:-8px;background:var(--white);border:3px solid var(--red);display:block}
  .s-stn[data-line=blue]{border-color:var(--dblue)} .s-stn[data-line=gray]{border-color:var(--gray)} .s-stn[data-line=mblue]{border-color:var(--mblue)}
  .s-stn.k-talk{width:22px;height:12px;left:89px;margin-top:-6px}
  .s-mail-stn{left:206px;top:34px}
  .s-mail-stn{background:var(--red)}
  .s-mail{position:absolute;left:194px;top:40px;font:600 14px/24px var(--body);color:var(--red);padding:10px 0}
  .s-car{position:absolute;left:0;top:24px;width:36px;height:20px;border:3px solid var(--red);background:var(--white);display:flex;gap:3px;align-items:center;justify-content:center;visibility:hidden}
  .s-car i{display:block;width:5px;height:5px;background:var(--red)}
  .s-cap{position:absolute;left:16px;top:72px;width:172px;height:40px;border:4px solid var(--gray);background:var(--white);font:600 20px/32px var(--disp);text-align:center;color:var(--gray)}
  .s-drop{top:112px;width:6px;margin-left:-3px;transform-origin:50% 0}
  .s-stub{height:6px;margin-left:-3px;transform-origin:0 50%}
  .s-drop[data-line=red]{width:8px;margin-left:-4px}
  .s-stub[data-line=red]{height:8px;margin-top:-1px;margin-left:-4px}
  .s-row{position:absolute;left:116px;right:44px;min-height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:var(--gray);text-decoration:none}
  .s-name{font:600 14px/1.3 var(--body)}
  .s-first{font:400 14px/1.35 var(--body);text-decoration:underline;text-underline-offset:2px}
  .strip[data-hl] .s-row[data-line]{color:var(--gray)}
  .strip[data-hl=red] .s-ln:not([data-line=red]),.strip[data-hl=blue] .s-ln:not([data-line=blue]),
  .strip[data-hl=gray] .s-ln:not([data-line=gray]),.strip[data-hl=mblue] .s-ln:not([data-line=mblue]){background:var(--lgray)}
  .strip[data-hl=red] .s-stn:not([data-line=red]),.strip[data-hl=blue] .s-stn:not([data-line=blue]),
  .strip[data-hl=gray] .s-stn:not([data-line=gray]),.strip[data-hl=mblue] .s-stn:not([data-line=mblue]){border-color:var(--lgray)}
  .strip[data-hl]:not([data-hl=red]) .s-term{background:var(--lgray)}

  .line-sec{padding:84px 16px 76px var(--cleft)}
  #training{padding-top:76px}
  .jog{display:none}
  #training .rail{top:0}
  .line-sec h2{font-size:46px}
  .intro{font-size:17px}
  .sec-head{margin-bottom:34px}
  .change-l{font-size:22px;top:-44px}
  .st-ws{padding:28px 0;--sy:40px}
  .ws-title{font-size:30px}
  .st-mail{--sy:56px}
  .mail-big{font-size:20px}
  .st-ev{padding:24px 0;--sy:60px}
  .st-ev.k-transfer{--sy:68px}
  .st-res{--sy:64px}
  .st-ev .st-title{font-size:19px}
  .st-ev.k-transfer .st-title{font-size:32px}
  .st-img{width:100%;max-width:280px}
  .stop{--sz:20px;--sh:20px}
  .stop.k-talk{--sz:26px;--sh:14px}
  .stop.k-forum{--sz:22px;--sh:22px}
  .stop.k-forum::after{inset:4px}
  .stop.k-transfer{--sz:36px;--sh:26px}
  .btn-transfer{width:100%}
  .people .st-person{grid-template-columns:72px minmax(0,1fr);gap:16px;--sy:50px}
  .st-photo{width:72px;height:72px}
  .st-person .st-title{font-size:19px}
  .st-res .st-title{font-size:21px}
  .legend{gap:10px 20px;font-size:14px}
  .terminus{padding-bottom:76px}
  .t-upper{padding:84px 16px 56px var(--cleft)}
  .t-actions{margin-top:34px}
  .t-actions .btn{width:100%}
  .t-river{right:44px;width:16px;height:180px}
  .t-h,.t-h-track{right:20px}
  .t-term{right:16px}
  .t-firm{right:16px;top:-58px;font-size:20px}
  .foot-motion{margin-left:0}
}

/* ------------------------------------------------ review captures (?scroll): settled states, no transitions */
html.hold *,html.hold *::before,html.hold *::after{transition:none!important;animation:none!important}

/* ------------------------------------------------ still pages (reduced motion, motion switched off, no script) */
html.still .train,html.still .chip-wrap,html.still .ride{display:none!important}
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) *,html:not(.force-motion) *::before,html:not(.force-motion) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html:not(.force-motion) .train,html:not(.force-motion) .chip-wrap,html:not(.force-motion) .ride{display:none!important}
  html:not(.force-motion) .rail .track,html:not(.force-motion) .t-h-track{display:none!important}
}