/* ============================================================
   ALT ERP — schematic language. Blueprint grid, monospace plant
   labels, a pipeline that lights in sequence, a console with a
   sticky index, and a rail you scroll sideways. No card grid.
   Loads after home.css.
   ============================================================ */

.er-page{
	--er:#456c4f;--er-deep:#2e4a36;--er-ink:#1f2a20;--er-muted:#5a6656;
	--er-line:color-mix(in srgb,#456c4f 22%,transparent);
	--er-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
.er-sec{position:relative;}

/* ---------- Reading progress ---------- */
.er-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;}
.er-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--er-deep),var(--er));}

/* ---------- The blueprint ground ---------- */
.er-blueprint{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
	background-image:
		linear-gradient(var(--er-line) 1px,transparent 1px),
		linear-gradient(90deg,var(--er-line) 1px,transparent 1px);
	background-size:64px 64px;
	mask-image:radial-gradient(90% 70% at 22% 10%,#000,transparent 78%);
	-webkit-mask-image:radial-gradient(90% 70% at 22% 10%,#000,transparent 78%);
	animation:er-pan 30s linear infinite;}
.er-blueprint--dark{opacity:.22;
	background-image:
		linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);}
@keyframes er-pan{to{background-position:64px 64px,64px 64px}}

/* ---------- Monospace plant labels ---------- */
.er-tag{display:inline-block;margin-bottom:16px;
	font-family:var(--er-mono);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
	color:var(--er);position:relative;padding-left:22px;}
.er-tag::before{content:"";position:absolute;left:0;top:.52em;width:14px;height:1px;background:var(--er);}
.er-tag--light{color:rgba(255,255,255,.7);}
.er-tag--light::before{background:rgba(255,255,255,.7);}

/* ============================================================
   HERO
   ============================================================ */
.er-hero{position:relative;overflow:hidden;isolation:isolate;}
.er-hero > .am-wrap{position:relative;z-index:1;}
.er-hero .er-blueprint{z-index:-1;}
.er-hero__sys{position:absolute;right:clamp(14px,3vw,44px);top:clamp(96px,11vw,150px);z-index:1;
	font-family:var(--er-mono);font-size:11px;letter-spacing:.2em;color:color-mix(in srgb,var(--er) 55%,transparent);
	pointer-events:none;user-select:none;}
body.am .er-hero h1{letter-spacing:-0.035em;}

.er-readout{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);margin:clamp(26px,3vw,38px) 0 0;padding:0;}
.er-readout li{display:flex;align-items:baseline;gap:9px;position:relative;padding-right:clamp(16px,3vw,40px);}
.er-readout li + li::before{content:"";position:absolute;left:calc(-1 * clamp(8px,1.5vw,20px));top:.2em;bottom:.2em;width:1px;background:var(--er-line);}
.er-readout b{font-family:var(--er-mono);font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-0.02em;line-height:1;color:var(--er-deep);}
.er-readout span{font-family:var(--er-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--er-muted);}
.as-anim .er-readout li{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);}
.as-ready .er-readout li{opacity:1;transform:none;}
.as-ready .er-readout li:nth-child(1){transition-delay:.42s;}
.as-ready .er-readout li:nth-child(2){transition-delay:.53s;}
.as-ready .er-readout li:nth-child(3){transition-delay:.64s;}

/* ---------- Section head ---------- */
.er-head{max-width:64ch;margin-bottom:clamp(30px,4vw,52px);}
body.am .er-head h2{font-size:clamp(27px,3.4vw,44px);letter-spacing:-0.035em;line-height:1.1;}
.er-head p{margin-top:14px;font-size:17px;line-height:1.65;color:var(--er-muted);}
.er-note{margin-top:clamp(22px,3vw,34px);font-size:16px;line-height:1.7;color:var(--er-muted);max-width:70ch;}

/* ============================================================
   01 · PIPELINE — the wire is drawn, then each node lights up
   ============================================================ */
.er-pipe{position:relative;padding-top:8px;}
.er-pipe__line{position:absolute;left:0;right:0;top:19px;height:2px;background:var(--er-line);overflow:hidden;}
.er-pipe__line i{display:block;height:100%;width:100%;
	background:repeating-linear-gradient(90deg,var(--er) 0 12px,transparent 12px 26px);
	transform:scaleX(0);transform-origin:left;transition:transform 1.5s cubic-bezier(.2,.8,.2,1);}
.as-anim .er-pipe.as-in .er-pipe__line i{transform:scaleX(1);animation:er-flow 1.4s linear .9s infinite;}
@keyframes er-flow{to{background-position:26px 0}}
.er-pipe__nodes{list-style:none;margin:0;padding:0;display:grid;
	grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(6px,1vw,16px);}
.er-pipe__nodes li{position:relative;padding-top:34px;}
.er-pipe__dot{position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%;
	background:var(--bg);border:2px solid var(--er-line);
	transition:background-color .4s ease,border-color .4s ease,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;}
.as-anim .er-pipe.as-in .er-pipe__dot{background:var(--er);border-color:var(--er);transform:scale(1.05);
	box-shadow:0 0 0 5px color-mix(in srgb,var(--er) 16%,transparent);
	transition-delay:calc(.9s + var(--n) * 110ms);}
.er-pipe__nodes b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--er-ink);letter-spacing:-0.01em;
	transition:color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.er-pipe__nodes li:hover .er-pipe__dot{transform:scale(1.45);box-shadow:0 0 0 9px color-mix(in srgb,var(--er) 20%,transparent);}
.er-pipe__nodes li:hover b{color:var(--er-deep);transform:translateY(-2px);}
}
@media (max-width:860px){
.er-pipe__nodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;}
.er-pipe__line{display:none;}
.er-pipe__nodes li{padding-top:0;padding-left:30px;}
.er-pipe__dot{top:2px;width:15px;height:15px;}
}

/* ============================================================
   02 · CONSOLE — sticky index on the left, detail on the right
   ============================================================ */
.er-console{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,72px);align-items:start;}
.er-console__index{position:sticky;top:104px;}
.er-console__index ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--er-line);}
.er-console__index a{display:flex;align-items:baseline;gap:12px;padding:11px 0 11px 18px;position:relative;
	font-size:15px;font-weight:600;color:var(--er-muted);text-decoration:none;
	transition:color .3s ease,padding-left .35s cubic-bezier(.2,.8,.2,1);}
.er-console__index a::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;background:var(--er);
	transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.er-console__index em{font-style:normal;font-family:var(--er-mono);font-size:11px;letter-spacing:.1em;color:var(--er);opacity:.7;}
.er-console__index li.is-on a,.er-console__index a:hover,.er-console__index a:focus-visible{color:var(--er-deep);padding-left:24px;}
.er-console__index li.is-on a::before,.er-console__index a:hover::before{transform:scaleY(1);}

.er-console__body{display:grid;gap:clamp(4px,1vw,12px);}
.er-mod{position:relative;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--er-line);scroll-margin-top:96px;}
.er-mod:first-child{border-top:1px solid var(--er-line);}
.er-mod__id{display:inline-block;margin-bottom:10px;font-family:var(--er-mono);font-size:11px;letter-spacing:.16em;color:var(--er);}
body.am .er-mod h3{font-size:clamp(20px,2.3vw,27px);letter-spacing:-0.025em;margin-bottom:8px;
	transition:transform .4s cubic-bezier(.2,.8,.2,1),color .3s ease;}
.er-mod p{font-size:16px;line-height:1.68;color:var(--er-muted);max-width:62ch;margin:0;}
.er-mod::after{content:"";position:absolute;left:calc(-1 * clamp(14px,2vw,26px));top:clamp(22px,2.6vw,34px);
	width:7px;height:7px;border-radius:50%;background:var(--er);
	opacity:0;transform:scale(.4);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.8,.2,1);}
.er-mod.is-on::after{opacity:1;transform:none;}
@media (hover:hover){
.er-mod:hover h3{transform:translateX(6px);color:var(--er-deep);}
}
@media (max-width:900px){
.er-console{grid-template-columns:1fr;}
.er-console__index{position:static;display:none;}
}

/* ============================================================
   03 · WIRE — two systems joined, packets running down the link
   ============================================================ */
.er-wire{display:grid;grid-template-columns:1fr;justify-items:center;gap:0;max-width:640px;margin-inline:auto;}
.er-wire__box{width:100%;border:1px solid var(--er-line);border-radius:4px;padding:clamp(20px,2.4vw,30px);
	background:var(--surface);
	transition:border-color .35s ease,transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;}
.er-wire__box--b{background:var(--er-deep);border-color:var(--er-deep);color:rgba(255,255,255,.82);}
.er-wire__id{display:block;margin-bottom:14px;font-family:var(--er-mono);font-size:11.5px;letter-spacing:.2em;color:var(--er);}
.er-wire__box--b .er-wire__id{color:rgba(255,255,255,.72);}
.er-wire__box ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.er-wire__box li{position:relative;padding-left:17px;font-size:15.5px;font-weight:600;color:var(--er-ink);}
.er-wire__box--b li{color:#fff;}
.er-wire__box li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--er);}
.er-wire__box--b li::before{background:rgba(255,255,255,.7);}
.er-wire__link{position:relative;width:2px;height:clamp(56px,7vw,92px);background:var(--er-line);overflow:visible;}
.er-wire__link i{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--er);
	animation:er-packet 2.4s cubic-bezier(.5,0,.5,1) infinite;}
.er-wire__link i:nth-child(2){animation-delay:.8s;}
.er-wire__link i:nth-child(3){animation-delay:1.6s;}
@keyframes er-packet{0%{top:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.er-wire__arrow{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
	font-size:17px;line-height:1;color:var(--er);}
@media (hover:hover){
.er-wire__box:hover{transform:translateY(-4px);border-color:var(--er);box-shadow:0 26px 54px -34px rgba(46,60,40,.45);}
}

/* ============================================================
   04 · RAIL — a sideways strip, snapped
   ============================================================ */
.er-rail{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
	padding:4px clamp(16px,6vw,110px) 22px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.er-rail__item{flex:0 0 min(360px,78vw);scroll-snap-align:center;
	border-top:2px solid var(--er);padding-top:18px;
	transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s ease;}
.er-rail__n{display:block;margin-bottom:10px;font-family:var(--er-mono);font-size:11.5px;letter-spacing:.18em;color:var(--er);}
body.am .er-rail h3{font-size:clamp(19px,2.2vw,25px);letter-spacing:-0.025em;margin-bottom:9px;}
.er-rail p{font-size:15.5px;line-height:1.65;color:var(--er-muted);margin:0;}
@media (hover:hover){
.er-rail__item:hover{transform:translateY(-6px);border-color:var(--er-deep);}
}

/* ============================================================
   05 · LEGEND — schematic ticks in two columns
   ============================================================ */
.er-legend{list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:clamp(28px,4vw,64px);}
.er-legend li{position:relative;display:flex;align-items:center;gap:14px;
	padding:clamp(12px,1.4vw,16px) 0;border-bottom:1px solid var(--er-line);
	font-size:16.5px;font-weight:600;color:var(--er-ink);letter-spacing:-0.01em;
	transition:transform .35s cubic-bezier(.2,.8,.2,1),color .3s ease;}
.er-legend i{position:relative;width:16px;height:16px;flex:0 0 auto;border:1.5px solid var(--er);}
.er-legend i::after{content:"";position:absolute;left:3px;top:3px;right:3px;bottom:3px;background:var(--er);
	transform:scale(0);transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.as-anim .er-legend.as-in i::after{transform:scale(1);transition-delay:calc(var(--i,0)*65ms);}
html:not(.as-anim) .er-legend i::after{transform:scale(1);}
@media (hover:hover){
.er-legend li:hover{transform:translateX(7px);color:var(--er-deep);}
}

/* ============================================================
   06 · BUILT — a plain statement, ruled top and bottom
   ============================================================ */
.er-built{border-top:2px solid var(--er);border-bottom:1px solid var(--er-line);padding:clamp(28px,3.4vw,44px) 0;max-width:74ch;}
body.am .er-built h2{font-size:clamp(25px,3vw,38px);letter-spacing:-0.03em;margin-bottom:14px;}
.er-built p{font-size:17px;line-height:1.72;color:var(--er-muted);margin-bottom:12px;}
.er-built p:last-child{margin-bottom:0;}

/* ============================================================
   07 · END — terminal sign-off on the deep green
   ============================================================ */
.er-end{position:relative;overflow:hidden;isolation:isolate;background:var(--er-deep);color:rgba(255,255,255,.8);
	padding-block:clamp(64px,9vw,128px);}
.er-end > .am-wrap{position:relative;z-index:1;}
.er-end .er-blueprint{z-index:0;}
body.am .er-end h2{font-size:clamp(32px,6vw,76px);line-height:1.04;letter-spacing:-0.045em;color:#fff;}
.er-end h2 em{font-style:normal;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.8);}
.er-end__lead{margin-top:clamp(18px,2.6vw,28px);max-width:56ch;font-size:17px;line-height:1.68;color:rgba(255,255,255,.76);}
.er-end__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(24px,3.2vw,40px);}
.er-end__btn{--tx:0px;--ty:0px;gap:10px;min-height:52px;}
.er-js .er-end__btn{transform:translate(var(--tx),var(--ty));transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.er-end__btn i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){.er-end__btn:hover i{transform:translateX(7px);}}
.er-end__back{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:rgba(255,255,255,.72);}
.er-end__back:hover{color:#fff;}

@media (max-width:640px){
.er-readout{gap:14px 20px;}
.er-readout li{padding-right:14px;}
.er-hero__sys{display:none;}
.er-blueprint{background-size:44px 44px;}
}

/* ---------- Static fallback ---------- */
@media (prefers-reduced-motion:reduce){
.er-prog{display:none;}
.er-blueprint,.er-wire__link i,.er-pipe__line i{animation:none;}
.er-wire__link i{opacity:1;top:40%;}
.er-pipe__line i{transform:scaleX(1);}
.as-anim .er-pipe .er-pipe__dot{background:var(--er);border-color:var(--er);}
.er-legend i::after{transform:scale(1);}
.er-pipe__dot,.er-pipe__nodes b,.er-console__index a,.er-mod h3,.er-mod::after,.er-wire__box,
.er-rail__item,.er-legend li,.er-end__btn,.er-end__btn i{transition:none;}
.er-pipe__nodes li:hover .er-pipe__dot,.er-wire__box:hover,.er-rail__item:hover,.er-legend li:hover{transform:none;}
.as-anim .er-readout li{opacity:1;transform:none;}
}






/* ============================================================
   Real screens, inside the bands they belong to.
   The same family of entrances as the Alt Schools and ALT POS
   pages, so all four product pages move the same way.
   ============================================================ */
.er-shot{margin-block:clamp(30px,3.8vw,56px);}
.er-shot figure{margin:0;min-width:0;}
.er-shot__frame{
	position:relative;overflow:hidden;
	border-radius:clamp(9px,1vw,14px);
	border:1px solid rgba(31,42,32,.14);
	background:#f2efe7;
	box-shadow:0 30px 62px -46px rgba(31,42,32,.58);
	transition:box-shadow .6s ease;
}
.er-shot img{display:block;width:100%;height:auto;}

/* Every shot breathes in: the picture eases back to true size
   as its frame arrives. One shared gesture under the rest. */
.as-anim .er-shot img{transform:scale(1.06);transform-origin:50% 14%;
	transition:transform 1.4s cubic-bezier(.16,.84,.26,1);}
.as-anim .er-shot.as-in img{transform:none;}

.er-shot figcaption{
	display:flex;gap:10px;align-items:baseline;margin-top:11px;
	font-size:12.8px;line-height:1.5;color:var(--muted);
}
.er-shot figcaption b{
	flex:0 0 auto;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
	font-weight:700;color:var(--green);padding-top:.2em;
}

/* ---------- Two cards dealt onto the table ---------- */
.er-shot--fan{position:relative;max-width:min(980px,100%);margin-inline:auto;perspective:1500px;}
.er-shot--fan .er-shot__pair{position:relative;display:grid;transform-style:preserve-3d;}
.er-shot--fan figure{grid-area:1 / 1;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .6s ease;}
.er-shot--fan figure:nth-child(1){--rest:translate(-4.5%,0) rotate(-2.8deg);z-index:1;}
.er-shot--fan figure:nth-child(2){--rest:translate(4.5%,4.5%) rotate(2.4deg);z-index:2;}
.er-shot--fan figure{transform:var(--rest);}
.as-anim .er-shot--fan figure{opacity:0;transform:translate(34%,12%) rotate(9deg) scale(.94);}
.as-anim .er-shot--fan.as-in figure{opacity:1;transform:var(--rest);
	transition:transform 1.05s cubic-bezier(.17,.85,.24,1),opacity .6s ease;}
.as-anim .er-shot--fan.as-in figure:nth-child(2){transition-delay:.13s;}
.er-shot--fan figcaption{position:absolute;left:0;right:0;bottom:-2.6em;opacity:0;transform:translateY(-5px);
	transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover) and (min-width:861px){
.er-shot--fan:hover figure:nth-child(1){transform:translate(-27%,-2.5%) rotate(-4.2deg);}
.er-shot--fan:hover figure:nth-child(2){transform:translate(27%,2.5%) rotate(3.6deg);}
.er-shot--fan figure:hover{z-index:3;}
.er-shot--fan figure:hover .er-shot__frame{box-shadow:0 52px 96px -40px rgba(31,42,32,.72);}
.er-shot--fan figure:hover figcaption{opacity:1;transform:none;}
.er-shot--fan:hover .er-shot__note{opacity:0;}
}
.er-shot--fan .er-shot__note{
	margin-top:clamp(24px,3vw,40px);text-align:center;font-size:12.8px;color:var(--muted);
	transition:opacity .35s ease;
}
.er-shot--fan .er-shot__note b{color:var(--green);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:10px;}

/* ---------- One card, dealt the same way ---------- */
.er-shot--deal{max-width:min(1000px,100%);margin-inline:auto;perspective:1500px;}
.as-anim .er-shot--deal figure{opacity:0;transform:translate(26%,10%) rotate(7deg) scale(.95);
	transition:opacity .6s ease,transform 1.05s cubic-bezier(.17,.85,.24,1);}
.as-anim .er-shot--deal.as-in figure{opacity:1;transform:none;}
@media (hover:hover){
.er-shot--deal figure:hover .er-shot__frame{box-shadow:0 50px 92px -42px rgba(31,42,32,.7);}
}

/* ---------- The pair drifts at two speeds ---------- */
.er-shot--drift{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,40px);align-items:start;}
.er-shot--drift figure{will-change:transform;}
.er-shot--drift figure:nth-child(2){margin-top:clamp(26px,4.6vw,68px);}
/* --d is written by script from the scroll position; without it
   the pair simply sits where the grid puts it. */
.er-shot--drift .er-shot__frame{transform:translateY(calc(var(--d,0) * 1px));}
.as-anim .er-shot--drift figure{opacity:0;transform:translateY(52px);
	transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1);}
.as-anim .er-shot--drift.as-in figure{opacity:1;transform:none;}
.as-anim .er-shot--drift.as-in figure:nth-child(2){transition-delay:.15s;}
@media (hover:hover){
.er-shot--drift figure:hover .er-shot__frame{box-shadow:0 44px 78px -40px rgba(31,42,32,.66);}
}

/* ---------- A diagonal wipe with a lit edge ---------- */
.er-shot--wipe{max-width:min(1060px,100%);margin-inline:auto;}
.as-anim .er-shot--wipe .er-shot__frame{clip-path:polygon(-30% 0,0 0,-14% 100%,-44% 100%);
	transition:clip-path 1.15s cubic-bezier(.2,.84,.22,1);}
.as-anim .er-shot--wipe.as-in .er-shot__frame{clip-path:polygon(-30% 0,145% 0,131% 100%,-44% 100%);}
.er-shot--wipe .er-shot__frame::after{
	content:"";position:absolute;inset:-10% -30%;pointer-events:none;z-index:2;opacity:0;
	background:linear-gradient(97deg,transparent 46%,rgba(255,255,255,.72) 50%,transparent 54%);
	background-size:300% 100%;
}
.as-anim .er-shot--wipe.as-in .er-shot__frame::after{animation:er-edge 1.15s cubic-bezier(.2,.84,.22,1);}
@keyframes er-edge{0%{opacity:0;background-position:118% 0}10%{opacity:1}92%{opacity:1}100%{opacity:0;background-position:-40% 0}}
.as-anim .er-shot--wipe figcaption{opacity:0;transform:translateY(6px);
	transition:opacity .5s ease .62s,transform .6s cubic-bezier(.2,.8,.2,1) .62s;}
.as-anim .er-shot--wipe.as-in figcaption{opacity:1;transform:none;}

/* ---------- In from an edge, then a gleam ---------- */
.er-shot--slide{max-width:min(1060px,100%);margin-inline:auto;}
.as-anim .er-shot--slide figure{opacity:0;transform:translateX(-14%) rotate(-1.6deg);
	transition:opacity .7s ease,transform 1.05s cubic-bezier(.16,.86,.22,1);}
.as-anim .er-shot--slide--right figure{transform:translateX(14%) rotate(1.6deg);}
.as-anim .er-shot--slide.as-in figure{opacity:1;transform:none;}
.er-shot--slide .er-shot__frame::after{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
	background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
	background-size:240% 100%;background-position:150% 0;opacity:0;
}
.as-anim .er-shot--slide.as-in .er-shot__frame::after{animation:er-gleam 1.15s cubic-bezier(.3,.7,.3,1) .5s;}
@keyframes er-gleam{0%{opacity:0;background-position:150% 0}25%{opacity:1}100%{opacity:0;background-position:-60% 0}}
.er-shot--slide img{transition:transform .8s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.er-shot--slide figure:hover img{transform:scale(1.03);}
.er-shot--slide figure:hover .er-shot__frame{box-shadow:0 46px 84px -40px rgba(31,42,32,.68);}
}

/* ---------- It turns in on its hinge ---------- */
.er-shot--flip{max-width:min(1060px,100%);margin-inline:auto;perspective:1500px;}
.er-shot--flip figure{transform-style:preserve-3d;}
.as-anim .er-shot--flip figure{opacity:0;transform:rotateY(-24deg) translateZ(-70px);transform-origin:left center;
	transition:opacity .7s ease,transform 1.05s cubic-bezier(.2,.84,.22,1);}
.as-anim .er-shot--flip.as-in figure{opacity:1;transform:none;}
.er-shot--flip .er-shot__frame::after{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
	background:linear-gradient(80deg,rgba(255,255,255,.6),transparent 55%);
}
.as-anim .er-shot--flip.as-in .er-shot__frame::after{animation:er-spec 1.05s ease-out;}
@keyframes er-spec{0%{opacity:.8}100%{opacity:0}}

/* ---------- Narrow ---------- */
@media (max-width:860px){
.er-shot--drift{grid-template-columns:1fr;gap:clamp(20px,5vw,30px);}
.er-shot--drift figure:nth-child(2){margin-top:0;}
.er-shot--drift .er-shot__frame{transform:none;}
.er-shot--fan .er-shot__pair{display:grid;grid-template-columns:1fr;gap:18px;}
.er-shot--fan figure{grid-area:auto;}
.as-anim .er-shot--fan figure{opacity:0;transform:translateY(30px);}
.as-anim .er-shot--fan.as-in figure,
.er-shot--fan figure{transform:none;}
.as-anim .er-shot--fan.as-in figure{opacity:1;}
.er-shot--fan figcaption{position:static;opacity:1;transform:none;}
.er-shot--fan .er-shot__note{display:none;}
.as-anim .er-shot--deal figure{transform:translateY(30px);}
.as-anim .er-shot--deal.as-in figure{transform:none;}
.as-anim .er-shot--slide figure,
.as-anim .er-shot--slide--right figure{transform:translateY(34px) rotate(0);}
.as-anim .er-shot--slide.as-in figure{transform:none;}
.as-anim .er-shot--flip figure{transform:translateY(34px);}
.as-anim .er-shot--flip.as-in figure{transform:none;}
.er-shot figcaption{font-size:12.5px;}
}

@media (prefers-reduced-motion:reduce){
.as-anim .er-shot figure,
.as-anim .er-shot.as-in figure,
.as-anim .er-shot img,
.as-anim .er-shot.as-in img{opacity:1;transform:none;transition:none;}
.er-shot--fan figure{transform:none;}
.as-anim .er-shot--wipe .er-shot__frame,
.as-anim .er-shot--wipe.as-in .er-shot__frame{clip-path:none;transition:none;}
.er-shot--wipe .er-shot__frame::after,
.er-shot--slide .er-shot__frame::after,
.er-shot--flip .er-shot__frame::after{display:none;}
.as-anim .er-shot--wipe figcaption{opacity:1;transform:none;}
.er-shot--drift .er-shot__frame{transform:none;}
.er-shot--fan figcaption{position:static;opacity:1;}
}

/* The shots arrive from off-frame, so the bands clip sideways. */
.er-sec{overflow-x:clip;}