/* Lifted verbatim from the landing page engine, scroll archetype.
 * Source: c:/Development/demos/managed-agents/supabase/functions/managed-agents-proxy/landing-page-engine.mjs
 * Do not hand edit. Change the brief in src/system.mjs and rebuild. */
:root{--bg:#0B0B0C;--bg2:#191919;--ink:#DBD6CB;--mut:#DBD6CB9e;--mut2:#DBD6CB6b;--line:#DBD6CB1f;
--acc:#F59E0B;--accB:#F59E0B;--accD:#8A5305;--gold:#FFB84D;
--ease:cubic-bezier(.16,1,.3,1);--disp:"Bricolage Grotesque",serif;--sans:"Manrope",system-ui,sans-serif;--dw:600;--rv:40px;--rd:1s}
:root{--accB:color-mix(in srgb,#F59E0B 52%,white);--accD:color-mix(in srgb,#F59E0B 55%,black)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
html{overflow-x:hidden;overflow-x:clip}
::selection{background:var(--acc);color:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accB);outline-offset:3px;border-radius:2px}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:var(--dw);line-height:1;letter-spacing:-.02em}

/* ---------- aura: the only room on the page ---------- */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ab{position:absolute;left:0;top:0;border-radius:50%}
.b1{width:66vw;height:66vw;background:radial-gradient(closest-side,#F59E0B4d,transparent 72%);transform:translate3d(47vw,-21vw,0) scale(1.15);opacity:.9}
.b2{width:54vw;height:54vw;background:radial-gradient(closest-side,#FFB84D2b,transparent 72%);transform:translate3d(-19vw,59vh,0) scale(.95);opacity:.55}
.b3{width:60vw;height:60vw;background:radial-gradient(closest-side,#8A530557,transparent 74%);transform:translate3d(22vw,76vh,0) scale(1.05);opacity:.5}
.nophoto .ab{opacity:.98}
.shaft{position:absolute;left:0;top:0;width:100%;height:130vh;transform-origin:50% -12%;opacity:.6;
background:conic-gradient(from 0deg at 50% -12%,transparent 46%,#DBD6CB0d 50%,transparent 54%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the spotlight: a soft light that trails the pointer down the whole page */
.spot{position:fixed;left:0;top:0;width:76vw;height:76vw;z-index:40;pointer-events:none;border-radius:50%;
background:radial-gradient(closest-side,rgba(255,247,238,.075),rgba(255,247,238,.03) 42%,transparent 70%);
mix-blend-mode:screen;transform:translate3d(46vw,-22vw,0)}
@supports not (mix-blend-mode:screen){.spot{opacity:.5}}
.content{position:relative;z-index:2}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}

/* ---------- shared micro-typography ---------- */
.eyebrow,.skl,.aslug{font-size:.7rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--accB)}
.hey{text-shadow:0 1px 14px rgba(0,0,0,.5)}
.aslug{display:block;margin-bottom:28px}
.odo,.ht,.knum,.cphone,.st b{font-variant-numeric:tabular-nums}
.gimg{position:relative;overflow:hidden;background:var(--bg2)}
.gimg img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.06) brightness(.94)}
.gimg::after{content:"";position:absolute;inset:0;background:var(--accD);mix-blend-mode:color;opacity:.22;pointer-events:none}
.gimg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(168deg,transparent 42%,#0B0B0C8c);pointer-events:none}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.92rem;
padding:.9em 1.8em;border-radius:999px;letter-spacing:.01em;white-space:nowrap}
.btn-acc{background:var(--acc);color:#DBD6CB;overflow:hidden;box-shadow:0 10px 40px -14px var(--acc)}
.btn-ghost{border:1px solid #DBD6CB47}
@media(hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--ink);background:#DBD6CB0f}}
.btn:active,.ix:active,.cphone:active{transform:scale(.97)}
.btn-shine::after{content:"";position:absolute;inset:0;transform:translateX(-140%) skewX(-18deg);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);animation:shine 7s ease-in-out 3s infinite}
@keyframes shine{0%,86%{transform:translateX(-140%) skewX(-18deg)}96%,100%{transform:translateX(140%) skewX(-18deg)}}
[data-mag] .mg-in{display:inline-block}
.ul-link{position:relative;font-size:.9rem;font-weight:600;letter-spacing:.04em;padding:.3em 0}
.ul-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accB);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
@media(hover:hover) and (pointer:fine){.ul-link:hover::after{transform:scaleX(1);transform-origin:left}}

/* ---------- five-act rail (desktop) ---------- */
.rail{position:fixed;left:28px;top:0;bottom:0;z-index:50;display:none}
.rline{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.rdot{position:absolute;left:-2.5px;top:0;width:6px;height:6px;border-radius:50%;background:var(--accB);box-shadow:0 0 12px var(--accB)}
.rlab{position:absolute;left:-7.5px;writing-mode:vertical-rl;font-size:.62rem;font-weight:600;letter-spacing:.26em;
text-transform:uppercase;color:var(--mut2);transition:color .4s;padding:6px 0;background:var(--bg)}
.rlab b{color:var(--accB);font-weight:600;margin-bottom:.7em;opacity:.85}
.rlab.on{color:var(--ink)}
@media(min-width:1100px){.rail{display:block}}

/* ---------- mobile: segmented top bar + act chip ---------- */
.tbar{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;gap:3px;padding:0 3px}
.tseg{flex:1;height:2px;background:#DBD6CB24;overflow:hidden}
.tseg b{display:block;height:100%;background:var(--accB);transform:scaleX(0);transform-origin:left}
.chip{position:fixed;left:14px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:55;pointer-events:none;
font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);
background:#0B0B0Cb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-left:3px solid var(--accB);border-radius:10px;padding:7px 14px}
.chip.nobar{bottom:16px}
.chip .sw{display:inline-block}
html.js .chip .sw{animation:chipin .45s var(--ease) both}
@keyframes chipin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(min-width:1100px){.tbar,.chip{display:none}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:20px 0;transition:background .4s var(--ease),padding .4s var(--ease)}
.nav.stuck{background:#0B0B0C99;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:12px 0;border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:.01em;line-height:1.2;max-width:62%}
.brand span{color:var(--accB)}
.nav .btn{padding:.62em 1.3em;font-size:.82rem}

/* ---------- hero: aperture + frame-up exit ---------- */
.hwrap{position:relative;height:180vh;height:180svh}
.hpin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;transform:translateZ(0)}
.hmedia{position:absolute;inset:0;will-change:transform,clip-path}
.hmedia img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hmedia.gimg::before{background:linear-gradient(180deg,#0B0B0C40,transparent 30%,transparent 55%,#0B0B0C99 85%,var(--bg))}
.hmedia{animation:apt .95s cubic-bezier(.16,1,.3,1) .08s both}
@keyframes apt{from{clip-path:inset(44% 40% round 50%)}to{clip-path:inset(0% 0% round 0px)}}
.hmono{background:radial-gradient(90vw 90vw at 60% 30%,var(--bg2),var(--bg) 70%)}
.mono{position:absolute;left:50%;top:50%;transform:translate(-52%,-54%);font-family:var(--disp);font-weight:var(--dw);
font-size:42vw;line-height:1;color:var(--ink);opacity:.06;user-select:none}
.hscrim{position:absolute;inset:0;z-index:1;background:
linear-gradient(100deg,#0B0B0Ce6 0%,#0B0B0C9e 34%,#0B0B0C29 62%,#0B0B0C0f 100%),
linear-gradient(180deg,transparent 52%,#0B0B0C8c 80%,var(--bg) 100%)}
.hveil{position:absolute;inset:0;z-index:2;background:var(--bg);opacity:0;pointer-events:none}
.hcopy{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;padding-bottom:9vh;padding-bottom:9svh}
.hgrid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;width:100%}
.hey{margin-bottom:26px}
html.js .hey{opacity:0;letter-spacing:.5em;transition:opacity 1s var(--ease) .25s,letter-spacing 1.4s var(--ease) .25s}
html.js.rdy .hey{opacity:1;letter-spacing:.34em}
.hh{font-size:clamp(3.2rem,9.5vw,7.5rem);line-height:.96;letter-spacing:-.025em}
.hl{display:block;overflow:hidden;padding:.04em .06em .06em 0;margin:-.02em 0}
.hl:nth-child(even){margin-left:.6em}
.hl.hang{margin-bottom:-.12em}
.hl-in{display:inline-block}
html.js .hl-in{transform:translateY(115%);transition:transform 1s var(--ease) calc(.18s + var(--i)*.11s)}
html.js.rdy .hl-in{transform:none}
.hcta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:38px}
html.js .rv-h{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease) calc(.3s + var(--i)*.12s),transform .9s var(--ease) calc(.3s + var(--i)*.12s)}
html.js.rdy .rv-h{opacity:1;transform:none}
html.js.rdy .hcta .btn-acc{animation:bloom 1.6s var(--ease) 1.2s}
@keyframes bloom{30%{box-shadow:0 0 70px -6px var(--acc)}}
.hstats{display:flex;flex-direction:column;gap:26px;text-align:right;padding-bottom:6px}
.st b{display:block;font-family:var(--disp);font-weight:var(--dw);font-size:clamp(2.1rem,3.4vw,2.9rem);line-height:1;color:var(--ink);margin-bottom:6px}
.st > span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.cue{position:absolute;left:50%;bottom:20px;z-index:4;width:1px;height:58px;transform:translateX(-50%);transition:opacity .4s}
.cue::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--accB),transparent);transform:scaleY(0);transform-origin:top}
html.js.rdy .cue::before{animation:cued 2.6s var(--ease) 1.7s both}
@keyframes cued{0%{transform:scaleY(0);opacity:1}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:.3}}
.cue.off{opacity:0}

/* ---------- odometer ---------- */
.odo{display:inline-flex;line-height:1}
.od{display:inline-block;height:1em;overflow:hidden;line-height:1;width:1ch;text-align:center}
.odr{display:block}
.odr i{display:block;height:1em;line-height:1;font-style:normal}
.odr{transform:translateY(calc((10 + var(--d))*-1em))}
html.js .odo:not(.on) .odr{transform:translateY(0)}
html.js .odo .odr{transition:transform 1.6s cubic-bezier(.18,.9,.22,1) var(--dl,0s)}
.ods{display:inline-block;white-space:pre}

/* ---------- ghost act numerals + boundary hairlines ---------- */
[data-actsec],.galsec,.stage{position:relative}
.gn{position:absolute;top:-.12em;z-index:0;font-family:var(--disp);font-weight:var(--dw);
font-size:18vw;line-height:1;color:var(--ink);opacity:.045;pointer-events:none;user-select:none;letter-spacing:-.04em}
.gnl{left:2vw}.gnr{right:-5vw}
.aline{position:absolute;top:0;left:0;width:min(38vw,440px);height:1px;background:#DBD6CB33;transform-origin:left}
html.js .aline:not(.in){transform:scaleX(0)}
.aline{transition:transform 1.2s var(--ease) .15s}

/* ---------- spine thread ---------- */
.thread{position:absolute;width:3px;z-index:0;pointer-events:none;display:none}
.thread svg{display:block;width:3px;height:100%;overflow:visible}
.thread line{stroke:var(--accB);stroke-width:1.5;opacity:.55}
.tdot{position:absolute;left:50%;bottom:-3px;width:9px;height:9px;border-radius:50%;background:var(--accB);
box-shadow:0 0 16px var(--accB);transform:translateX(-50%) scale(0);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.thread.done .tdot{transform:translateX(-50%) scale(1)}
@media(min-width:1100px){.thread{display:block}}
.tend{display:block;position:relative;height:1px}

/* ---------- service ribbon ---------- */
.ribbon{position:relative;overflow:hidden;padding:74px 0 10px;white-space:nowrap}
.rin{display:inline-flex;align-items:center}
.ri{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(1.5rem,3.4vw,2.6rem);color:var(--mut);padding:0 .1em}
.rsep{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accB);margin:0 1.4em;opacity:.8}
@media(max-width:860px){html.js .rin{animation:rmarq 22s linear infinite}}
@keyframes rmarq{to{transform:translateX(-25%)}}

/* ---------- stage: typographic index (pinned) ---------- */
.stage{height:360vh}
.spin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sphotos{position:absolute;inset:0;z-index:1}
.spanel{position:absolute;inset:0}
html.js .spanel:not(:first-child){clip-path:inset(100% 0 0 0)}
.sdim{position:absolute;inset:0;z-index:2;background:var(--bg);opacity:0}
.stag{position:absolute;left:18px;bottom:16px;z-index:3;display:none;font-family:var(--disp);font-size:.98rem;
background:#0B0B0C99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:999px;border:1px solid var(--line)}
.stag small{color:var(--accB);margin-right:9px;font-size:.85em}
.sscrim{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(92deg,#0B0B0Cf2 0%,#0B0B0Ccc 30%,#0B0B0C3d 58%,transparent 78%),
linear-gradient(0deg,#0B0B0C80,transparent 22%)}
.sindex{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:34px;
padding-left:max(48px,calc((100vw - 1180px)/2 + 32px));padding-right:44%;pointer-events:none}
.sindex>*{pointer-events:auto}
.skick{display:flex;align-items:baseline;gap:22px}
.knum{font-family:var(--disp);font-size:1.05rem;color:var(--mut);letter-spacing:.08em}
.kd{display:inline-block;height:1em;overflow:hidden;vertical-align:-.14em}
.kdr{display:block;transform:translateY(calc(var(--i,0)*-1em));transition:transform .55s var(--ease)}
.kdr i{display:block;height:1em;line-height:1;font-style:normal}
.ksep{margin:0 .35em;opacity:.5}
.ixs{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ix{position:relative;display:flex;align-items:baseline;gap:18px;text-align:left;padding:6px 0;
transition:transform .5s var(--ease)}
.ixn{font-size:.68rem;font-weight:600;letter-spacing:.22em;color:var(--mut2);transition:color .4s;min-width:2.2em}
.ixt{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.14;letter-spacing:-.015em;
color:transparent;-webkit-text-stroke:1px #DBD6CB73;transition:color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease)}
@supports not (-webkit-text-stroke:1px #000){.ixt{color:#DBD6CB80;-webkit-text-stroke:0}}
.ix.on{transform:translateX(14px)}
.ix.on .ixn{color:var(--accB)}
.ix.on .ixt{color:var(--ink);-webkit-text-stroke-color:transparent}
@media(hover:hover) and (pointer:fine){.ix:not(.on):hover .ixt{-webkit-text-stroke-color:#DBD6CBbf}}
.wx{display:inline-block;white-space:nowrap}.c{display:inline-block}
.ix.rollgo .c{animation:croll .5s var(--ease) both;animation-delay:calc(var(--j)*18ms)}
@keyframes croll{0%{transform:translateY(.45em);opacity:0}100%{transform:none;opacity:1}}
.sbar{display:flex;gap:6px;width:min(300px,80%)}
.sseg{flex:1;height:2px;background:#DBD6CB29;overflow:hidden}
.sseg b{display:block;height:100%;background:var(--accB);transform:scaleX(0);transform-origin:left}
.sticks{display:none}

/* ---------- stage: manifesto fallback (pinned typographic) ---------- */
.stage-man{height:200vh}
.spin.man{display:flex;align-items:center}
.spin.man .wrap{width:100%}
.spin.man .skick{margin-bottom:44px}
.mrows{display:flex;flex-direction:column;gap:18px}
.mrow{display:flex;align-items:baseline;gap:26px}
.mn{font-size:.68rem;font-weight:600;letter-spacing:.22em;color:var(--mut2);min-width:2.4em}
.mt{position:relative;font-family:var(--disp);font-weight:var(--dw);font-size:clamp(2rem,5.8vw,4.2rem);line-height:1.06;letter-spacing:-.02em}
.mt-o{color:transparent;-webkit-text-stroke:1px #DBD6CB66}
@supports not (-webkit-text-stroke:1px #000){.mt-o{color:#DBD6CB6b;-webkit-text-stroke:0}}
/* the fill mirrors the outline's box + font so it wraps IDENTICALLY — the
   horizontal clip then fills wrapped lines together (nowrap misaligned them) */
.mt-f{position:absolute;inset:0;color:var(--ink)}
html.js .mt-f{clip-path:inset(-5% 100% -8% 0)}
.mabout{margin-top:52px;max-width:52ch;color:var(--mut);font-size:1.02rem}

/* ---------- act 03: the word ---------- */
.word{padding:140px 0 90px}
@media(min-width:861px){.word.wo{margin-top:-32vh}}
.lead{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(1.9rem,4.1vw,3.4rem);line-height:1.16;letter-spacing:-.018em;
max-width:26ch;margin-left:8.333%}
.lw{color:var(--mut2);transition:color .35s linear}
.lw.on{color:var(--ink)}
.quote{position:relative;margin-top:120px;padding:40px 0;text-align:center}
.qmark{position:absolute;left:50%;top:-14vw;transform:translateX(-50%);z-index:0;font-family:var(--disp);
font-size:28vw;line-height:1;color:var(--ink);opacity:.05;pointer-events:none;user-select:none}
.qs{position:relative;color:var(--gold);font-size:1.05rem;letter-spacing:6px;margin-bottom:26px}
.qs i{display:inline-block;font-style:normal}
.qs .dim{opacity:.25}
html.js .quote:not(.in) .qs i{transform:scale(0)}
.quote.in .qs i{animation:starpop .5s cubic-bezier(.34,1.8,.64,1) both;animation-delay:calc(var(--i)*60ms + .25s)}
@keyframes starpop{0%{transform:scale(0)}100%{transform:scale(1)}}
.qbig{position:relative;font-family:var(--disp);font-weight:var(--dw);font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.22;
letter-spacing:-.01em;max-width:24ch;margin:0 auto;text-indent:-.38em}
.qbig::before{content:"“"}.qbig::after{content:"”"}
.qw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;text-indent:0}
.qwi{display:inline-block}
html.js .quote:not(.in) .qwi{transform:translateY(112%)}
.quote.in .qwi{transition:transform .85s var(--ease);transition-delay:calc(var(--i)*22ms + .1s)}
.quote.in .qwi{transform:none}
.qby{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px;font-size:.92rem;color:var(--mut)}
.qrule{width:44px;height:1px;background:var(--accB);transform-origin:left;display:inline-block}
html.js .quote:not(.in) .qrule{transform:scaleX(0)}
.quote.in .qrule{transition:transform .8s var(--ease) .9s;transform:scaleX(1)}
.qamong{color:var(--mut2)}

/* ---------- gallery appendix ---------- */
.galsec{padding:90px 0}
.gslug{color:var(--mut);letter-spacing:.3em}
.gcols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);align-items:start}
.gcols.grow{grid-template-columns:repeat(3,1fr)}
.gcol{display:flex;flex-direction:column;gap:clamp(14px,2vw,24px);margin-top:var(--gs,0)}
.gcols.grow .gcol{margin-top:0}
.tile{position:relative}
.timg{aspect-ratio:4/5;border-radius:14px}
.gcols.grow .timg{aspect-ratio:3/4}
.timg img{transition:transform .9s var(--ease)}
@media(hover:hover) and (pointer:fine){.tile:hover .timg img{transform:scale(1.05)}
.tile:hover .gcap{opacity:1;transform:none}}
.gcov{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,var(--bg2),var(--accD));transform-origin:top;transition:transform .9s var(--ease) var(--dl,0s)}
html.js .tile:not(.in) .gcov{transform:scaleY(1)}
.tile .gcov{transform:scaleY(0)}
html.js .tile:not(.in) .gcov{transform:scaleY(1)}
.gdot{position:absolute;left:0;top:0;z-index:3;width:6px;height:6px;border-radius:50%;background:var(--accB);opacity:0;pointer-events:none}
.gcap{position:absolute;left:12px;bottom:12px;z-index:3;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
background:#0B0B0Ca6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:6px 12px;
max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}

/* ---------- act 04: the place ---------- */
.place{padding:140px 0}
.visit{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,72px);align-items:start}
.addr{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.2;letter-spacing:-.015em;max-width:18ch;margin-bottom:40px}
.tt{margin-bottom:40px}
/* --- Week at a Glance (rare element): 7 days on a shared 24h track --- */
.wk{margin-bottom:44px;max-width:560px}
.wk-hd,.wk-row{display:grid;grid-template-columns:7.5em 1fr;gap:0 18px;align-items:center}
.wk-hd{margin-bottom:4px}
.wk-scale{position:relative;display:block;height:14px}
.wk-scale i{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-size:.56rem;font-weight:600;letter-spacing:.14em;color:var(--mut2);text-transform:uppercase}
.wk-row{padding:8px 0}
.wk-d{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-row.today .wk-d{color:var(--ink)}
.wk-row.today .wk-d::before{content:"";position:absolute;left:-14px;top:.32em;width:6px;height:6px;border-radius:50%;background:var(--accB);box-shadow:0 0 10px var(--accB)}
.wk-t{position:relative;height:20px;background-image:linear-gradient(#DBD6CB17,#DBD6CB17),linear-gradient(#DBD6CB17,#DBD6CB17),linear-gradient(#DBD6CB17,#DBD6CB17);
background-repeat:no-repeat;background-size:1px 100%,1px 100%,1px 100%;background-position:25% 0,50% 0,75% 0}
.wk-t::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#DBD6CB21}
.wk-bar{position:absolute;top:50%;height:6px;border-radius:99px;transform:translateY(-50%);transform-origin:left center;
background:linear-gradient(90deg,#8A5305cc,#F59E0Bcc);transition:transform .9s var(--ease) var(--dl,0s)}
html.js .wk-row:not(.in) .wk-bar{transform:translateY(-50%) scaleX(0)}
.wk-row.today .wk-bar{height:10px;background:linear-gradient(90deg,var(--acc),var(--accB));box-shadow:0 0 16px #F59E0B80}
.wk-time{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--disp);font-weight:var(--dw);font-style:normal;
font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--accB);white-space:nowrap;display:none}
.wk-to{right:calc(100% + 10px)}.wk-tc{left:calc(100% + 10px)}
.wk-row.today .wk-time{display:block}
.wk-row.today.in .wk-time{animation:wkt .5s var(--ease) .8s both}
@keyframes wkt{from{opacity:0}to{opacity:1}}
.wk-dash{position:absolute;left:0;top:50%;width:16px;height:2px;transform:translateY(-50%);border-radius:2px;background:#DBD6CB4d}
.wk-cl{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mut2)}
.wk-now{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--gold);box-shadow:0 0 9px var(--gold);border-radius:2px}
.hrow{display:flex;align-items:baseline;gap:18px;padding:12px 0}
.hd{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);min-width:7.5em;position:relative}
.hrow.today .hd{color:var(--ink)}
.hrow.today .hd::before{content:"";position:absolute;left:-14px;top:.35em;width:6px;height:6px;border-radius:50%;background:var(--accB);box-shadow:0 0 10px var(--accB)}
.hline{flex:1;height:1px;background:var(--line);transform-origin:left;transition:transform 1s var(--ease) var(--dl,0s)}
html.js .hrow:not(.in) .hline{transform:scaleX(0)}
.ht{font-family:var(--disp);font-size:1.02rem;letter-spacing:.01em}
.ht.hcl{color:var(--mut2)}
.hrow.today .ht{color:var(--accB)}
.vcta{display:flex;align-items:center;gap:26px;margin-top:6px}
.mapw{perspective:1100px}
.map{border-radius:16px;overflow:hidden;border:1px solid var(--line);height:min(430px,52vh);
transition:transform 1.2s var(--ease),opacity 1.2s var(--ease)}
html.js .mapw:not(.in) .map{transform:rotateX(4deg) translateY(30px);opacity:0}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) invert(.9) hue-rotate(180deg) contrast(.92)}
.faqhead{margin:86px 0 10px}
.faqhead .skl{color:var(--mut)}
.faq{max-width:820px}
.fq{border-bottom:1px solid var(--line)}
.fq:first-of-type{border-top:1px solid var(--line)}
.fqb{display:flex;align-items:baseline;gap:20px;width:100%;text-align:left;padding:20px 0}
.fx{display:inline-block;height:1em;overflow:hidden;flex:0 0 auto;font-size:.72rem;font-weight:600;letter-spacing:.18em;color:var(--accB);line-height:1}
.fxr{display:block;transition:transform .4s var(--ease)}
.fxr i{display:block;height:1em;line-height:1;font-style:normal}
@media(hover:hover) and (pointer:fine){.fqb:hover .fxr{transform:translateY(-1em)}}
.fqq{flex:1;font-weight:600;font-size:1.02rem;line-height:1.4}
.fqi{position:relative;flex:0 0 14px;height:14px;align-self:center}
.fqi::before,.fqi::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--accB);transition:transform .45s var(--ease)}
.fqi::after{transform:rotate(90deg)}
.fq.open .fqi::after{transform:rotate(0deg)}
.fq.open .fqi::before{transform:rotate(180deg)}
.fqa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
html:not(.js) .fqa{grid-template-rows:1fr}
.fq.open .fqa{grid-template-rows:1fr}
.fqa-in{overflow:hidden;min-height:0}
.fqa-in p{padding:0 34px 22px 0;margin-left:calc(.72rem * .18 + 2.6em);color:var(--mut);max-width:58ch}

/* ---------- act 05: the call ---------- */
.call{padding:170px 0 110px}
.clede{color:var(--mut);max-width:34ch;margin-bottom:30px}
.cphone{position:relative;display:inline-block;font-family:var(--disp);font-weight:var(--dw);
font-size:clamp(2.6rem,9vw,7rem);line-height:1.04;letter-spacing:-.03em;color:var(--ink)}
.cnolink{font-size:clamp(1.9rem,5.5vw,4rem);max-width:16ch}
.ul{position:absolute;left:0;right:.04em;bottom:-.06em;height:.045em;min-height:3px;background:var(--accB);
transform-origin:left;transition:transform 1.1s var(--ease) .35s}
html.js .ul:not(.in){transform:scaleX(0)}
.cbtns{display:flex;align-items:center;gap:22px;margin-top:44px}
footer{border-top:1px solid var(--line);padding:34px 0 max(30px,env(safe-area-inset-bottom));margin-top:40px}
.fline{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;font-size:.82rem;color:var(--mut)}
.fbrand{font-family:var(--disp);font-weight:var(--dw);font-size:1rem;color:var(--ink)}
.fcredit{margin-left:auto;color:var(--mut2)}
a.fmeta{position:relative}
@media(hover:hover) and (pointer:fine){a.fmeta:hover{color:var(--ink)}}

/* ---------- shared reveals ---------- */
[data-rv]{transition:opacity 1s var(--ease) var(--dl,0s),transform 1s var(--ease) var(--dl,0s)}
html.js [data-rv]:not(.in):not(.aline):not(.ul):not(.hrow){opacity:0;transform:translateY(var(--rv))}
html.js .hrow:not(.in){opacity:0}

/* ---------- sticky mobile call bar ---------- */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:95;padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:none}
.cbar a{display:flex;align-items:center;justify-content:center;gap:.6em;background:var(--acc);color:#DBD6CB;
font-weight:600;font-size:.95rem;padding:1em;border-radius:999px;box-shadow:0 12px 40px -10px rgba(0,0,0,.6)}
html.js .cbar{transform:translateY(120%);transition:transform .55s cubic-bezier(.34,1.3,.64,1)}
html.js .cbar.on{transform:none}

/* ---------- accent variants ---------- */
.hl.alt .hl-in{-webkit-text-stroke:1.5px var(--accB);color:transparent}
@supports not (-webkit-text-stroke:1px #000){.hl.alt .hl-in{color:var(--accB)}}
.lw.acc.on{color:var(--accB)!important}

/* ================= mobile (390 primary) ================= */
@media(max-width:860px){
  .cbar{display:block}
  .hcopy{padding-bottom:12vh;padding-bottom:12svh}
  .hgrid{grid-template-columns:1fr;gap:26px}
  .hstats{flex-direction:row;gap:30px;text-align:left;padding-bottom:0}
  .hl:nth-child(even){margin-left:.35em}
  .hcta .btn{flex:1 1 auto;justify-content:center}
  .gn{font-size:28vw}
  .ribbon{padding:56px 0 6px}
  /* stage → numbered list + snap strip */
  .stage{height:auto}
  .spin{position:relative;height:auto;padding:84px 0 30px;display:flex;flex-direction:column;gap:30px;overflow:visible}
  .sscrim{display:none}
  .sindex{position:relative;inset:auto;padding:0 20px;gap:22px}
  .sbar{display:none}
  .ix.on{transform:translateX(8px)}
  .ixt{font-size:1.35rem;-webkit-text-stroke-width:.8px}
  .sphotos{position:relative;inset:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 20px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sphotos::-webkit-scrollbar{display:none}
  .spanel{position:relative;inset:auto;flex:0 0 78vw;aspect-ratio:4/5;border-radius:14px;scroll-snap-align:center;
  clip-path:none!important;transform:none!important}
  .spanel img{transform:none!important}
  .sdim{opacity:0!important}
  .stag{display:inline-flex;align-items:baseline}
  .sticks{display:flex;gap:7px;justify-content:center}
  .stick{width:16px;height:2px;background:#DBD6CB2e;transition:background .3s}
  .stick.on{background:var(--accB)}
  /* manifesto keeps its pin, tighter */
  .stage-man{height:190vh}
  .spin.man{position:sticky;top:0;height:100vh;height:100svh;padding:0;display:flex;flex-direction:row;align-items:center}
  .mrow{gap:14px}
  .mt{font-size:clamp(1.7rem,8.4vw,2.6rem)}
  .lead{margin-left:0;max-width:none}
  .word{padding:88px 0 24px}
  .quote{margin-top:56px;padding:24px 0}
  .qmark{top:-20vw;font-size:44vw}
  .galsec{padding:44px 0}
  .gcols,.gcols.grow{grid-template-columns:1fr 1fr}
  .gcol{margin-top:0!important;transform:none!important}
  .timg,.gcols.grow .timg{aspect-ratio:1/1}
  .gcap{opacity:1;transform:none}
  .place{padding:96px 0}
  .visit{grid-template-columns:1fr}
  .wk{max-width:none}
  .wk-hd{display:none}
  .wk-row{grid-template-columns:1fr;gap:5px;padding:8px 0 22px}
  .wk-row.today .wk-d::before{display:none}
  .wk-time{font-size:.74rem}
  .wk-to{right:auto;left:0;top:calc(100% + 3px);transform:none}
  .wk-tc{left:auto;right:0;top:calc(100% + 3px);transform:none}
  .call{padding:120px 0 150px}
  .fline{flex-direction:column;gap:10px}
  .fcredit{margin-left:0}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media(max-width:1099px){.word,.place,.call,.galsec{scroll-margin-top:20px}}

/* ================= reduced motion: fully static, pins collapsed ================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .word.wo{margin-top:0}
  html.js [data-rv]:not(.in):not(.aline):not(.ul):not(.hrow),html.js .hrow:not(.in){opacity:1;transform:none}
  html.js .aline:not(.in){transform:none}
  html.js .ul:not(.in){transform:none}
  html.js .hl-in,html.js .hey,html.js .rv-h{opacity:1;transform:none;letter-spacing:.34em}
  .hh .hl-in{letter-spacing:inherit}
  html.js .odo:not(.on) .odr{transform:translateY(calc((10 + var(--d))*-1em))}
  .hwrap{height:auto}
  .hpin{position:relative;height:100vh;height:100svh}
  .hmedia{animation:none;clip-path:none;opacity:1}
  .cue{display:none}
  .stage{height:auto}
  .spin{position:relative;height:auto;padding:84px 0;display:flex;flex-direction:column;gap:34px;overflow:visible}
  .sscrim{display:none}
  .sindex{position:relative;inset:auto;padding:0 clamp(20px,4vw,32px);max-width:1180px;margin:0 auto;width:100%}
  .sbar{display:none}
  .sphotos{position:relative;inset:auto;display:grid;grid-template-columns:1fr;gap:16px;max-width:1180px;margin:0 auto;width:100%;padding:0 clamp(20px,4vw,32px)}
  html.js .spanel,.spanel{position:relative;inset:auto;clip-path:none!important;transform:none!important;aspect-ratio:16/9;border-radius:14px}
  .spanel img{transform:none!important}
  .sdim{opacity:0!important}
  .stag{display:inline-flex}
  .ixt{color:var(--ink);-webkit-text-stroke-color:transparent}
  .ixn{color:var(--accB)}
  .stage-man{height:auto}
  .spin.man{position:relative;height:auto}
  html.js .mt-f,.mt-f{clip-path:none!important}
  .lw{color:var(--ink)}
  .lw.acc{color:var(--accB)}
  html.js .quote:not(.in) .qwi{transform:none}
  html.js .quote:not(.in) .qs i{transform:none}
  html.js .quote:not(.in) .qrule{transform:none}
  .gcov{transform:scaleY(0)!important}
  html.js .hrow:not(.in) .hline{transform:none}
  html.js .wk-row:not(.in) .wk-bar{transform:translateY(-50%) scaleX(1)}
  .spot{transform:translate3d(12vw,-30vw,0)!important}
  html.js .mapw:not(.in) .map{transform:none;opacity:1}
  html.js .rin{animation:none}
  html.js .cbar{transition:none}
  .ab,.shaft{transform:none!important}
  .b1{transform:translate3d(47vw,-21vw,0) scale(1.15)!important}
  .b2{transform:translate3d(-19vw,59vh,0) scale(.95)!important}
  .b3{transform:translate3d(22vw,76vh,0) scale(1.05)!important}
  .thread line{stroke-dashoffset:0!important}
  .thread .tdot{transform:translateX(-50%) scale(1)}
}

/* ============== no-JS: pins collapse, stage photos stack (mirrors RM) ============== */
html:not(.js) .hwrap{height:auto}
html:not(.js) .hpin{position:relative;height:100vh;height:100svh}
html:not(.js) .hmedia{animation:none;clip-path:none;opacity:1}
html:not(.js) .cue{display:none}
html:not(.js) .stage{height:auto}
html:not(.js) .spin{position:relative;height:auto;padding:84px 0;display:flex;flex-direction:column;gap:34px;overflow:visible}
html:not(.js) .sscrim,html:not(.js) .sbar{display:none}
html:not(.js) .sindex{position:relative;inset:auto;padding:0 clamp(20px,4vw,32px);max-width:1180px;margin:0 auto;width:100%}
html:not(.js) .sphotos{position:relative;inset:auto;display:grid;grid-template-columns:1fr;gap:16px;max-width:1180px;margin:0 auto;width:100%;padding:0 clamp(20px,4vw,32px)}
html:not(.js) .spanel{position:relative;inset:auto;clip-path:none!important;transform:none!important;aspect-ratio:16/9;border-radius:14px}
html:not(.js) .spanel img{transform:none!important}
html:not(.js) .sdim{opacity:0!important}
html:not(.js) .stag{display:inline-flex}
html:not(.js) .ixt{color:var(--ink);-webkit-text-stroke-color:transparent}
html:not(.js) .stage-man{height:auto}
html:not(.js) .spin.man{position:relative;height:auto}
html:not(.js) .mt-f{clip-path:none!important}
html:not(.js) .lw{color:var(--ink)}
html:not(.js) .lw.acc{color:var(--accB)}
html:not(.js) .thread,html:not(.js) .rail,html:not(.js) .tbar,html:not(.js) .chip,html:not(.js) .spot{display:none}

/* ==== multi-page layer: nav, footer, prose, form, page header ==== */

/* ===========================================================================
 * ⚠️ ENGINE DEFECT OVERRIDE — the only rule in this file that overrides the
 * engine rather than adding to it. Report upstream before deleting.
 *
 * The engine emits:
 *     body{ ... overflow-x:hidden}
 *     html{overflow-x:hidden;overflow-x:clip}
 *
 * The html rule is correct: overflow-x:clip suppresses sideways scroll WITHOUT
 * creating a scroll container. The body rule is the older fix left behind, and
 * overflow-x:hidden on body forces its computed overflow-y to auto, which
 * makes body a scrolling box. Every position:sticky descendant then resolves
 * against body's scrollport instead of the viewport — and because body itself
 * never scrolls, they never stick at all.
 *
 * Effect on the scroll archetype: the hero's 180vh pin, the 360vh pinned
 * typographic index and the 200vh pinned manifesto ALL collapse to ordinary
 * scrolling sections. Measured here on Chromium: .spin resolved to
 * viewport-top -1090px at a scroll position where it should have been pinned
 * at 0. This is the archetype's headline technique and it is switched off.
 *
 * The fix is to move the clipping off body and onto main, because overflow
 * CLIP suppresses the overflow without becoming a scroll container, which is
 * the whole distinction the body rule missed. main is what the bleeding
 * elements live in (.gnr ghost numerals sit at right:-5vw and were adding 96px
 * of sideways scroll once body stopped hiding them).
 *
 * Browsers without overflow:clip keep the old body rule, so they get a
 * horizontal-scroll-free page with the pins still broken, rather than a page
 * with pins and a stray scrollbar. Fix belongs in the engine.
 * ======================================================================== */
@supports (overflow:clip){
  body{overflow-x:visible}
  main.content{overflow-x:clip}
}

/* ---------- contrast, forced by the palette remap ----------
   The engine sets solid-accent buttons to cream text, which was right against
   a dark burnt orange and is unreadable against hi-vis amber (1.9:1). Night
   text on amber is 9.4:1, and it is also what a hi-vis label actually looks
   like. Colour value only — nothing else about the button changes. */
.btn-acc,.cbar a{color:var(--bg)}

/* While a resize is in flight the archetype's cached geometry is stale, so its
   scrub values are wrong. Neutralising the hero pin for the duration is much
   less alarming than showing it frozen mid-exit. See the resize guard script. */
html.is-resizing .hpin{clip-path:none!important;transform:none!important}
html.is-resizing .hcopy{opacity:1!important;transform:none!important}
html.is-resizing .hveil{opacity:0!important}

/* ---------- the ME unpack ----------
   M and E hold at hero size; "onfett" and "lectric" grow out of them. The
   growth is an inline-grid column going 0fr → 1fr, which is the one way to
   animate to an element's intrinsic width without hard-coding it. */
.me-x{display:inline-flex;align-items:baseline}
.me-cap{display:inline-block}
/* max-width, not the grid 0fr->1fr trick. The grid version is the elegant way
   to animate to an intrinsic width, but in THIS nesting — inline-grid inside a
   shrink-to-fit inline-flex — the 1fr resolved to 0px and nothing moved. A ch
   cap is dull and it works everywhere. 9ch comfortably clears "onfett " and
   "lectric" at 0.42em, and because both are close to the cap the easing still
   reads as growing to fit. */
.me-g{display:inline-block;overflow:hidden;max-width:0;
transition:max-width .62s var(--ease)}
.me-gi{white-space:nowrap;display:block;
font-size:.42em;letter-spacing:-.01em;opacity:0;transition:opacity .4s var(--ease) .06s}
.me-x.on .me-g{max-width:9ch}
.me-x.on .me-gi{opacity:1}
/* The full stop follows the grown type down. Left at hero size after 0.42em
   text it reads as an oversized dot rather than punctuation. Last cap only —
   the M and the E must not move. */
.me-cap:last-child{transition:font-size .5s var(--ease)}
.me-x.on .me-cap:last-child{font-size:.42em}
@media(hover:hover) and (pointer:fine){
  .me-x:hover .me-g{max-width:9ch}
  .me-x:hover .me-gi{opacity:1}
  .me-x:hover .me-cap:last-child{font-size:.42em}
  .me-x{cursor:default}
}
.me-x:focus-visible{outline:2px solid var(--accB);outline-offset:6px;border-radius:4px}
/* Reduced motion: no growth animation. The name is still in the DOM and still
   read aloud; it simply does not move. */
@media(prefers-reduced-motion:reduce){
  .me-g{transition:none}
  .me-gi{transition:none}
}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--acc);color:var(--bg);
padding:.8em 1.4em;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- nav: the engine's bar, carrying a real menu ---------- */
.nav-in{gap:24px}
.brand{display:flex;align-items:center;gap:12px;max-width:none}
.brand .bmark{flex:0 0 auto;width:32px;display:block}
.brand .bname{display:flex;flex-direction:column;line-height:1.05}
.brand .bname i{font-family:var(--sans);font-style:normal;font-size:.58rem;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(--mut2);margin-top:4px}
.menu{display:none;align-items:center;gap:26px;margin-left:auto}
.menu a{position:relative;font-size:.86rem;font-weight:500;color:var(--mut);padding:.3em 0;transition:color .35s var(--ease)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accB);
transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.menu a[aria-current]{color:var(--ink)}
.menu a[aria-current]::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){.menu a:hover{color:var(--ink)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}}
.navtog{display:inline-flex;align-items:center;gap:.5em;margin-left:auto;font-size:.8rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);
border-radius:999px;padding:.6em 1.1em}
.drawer{display:none;flex-direction:column;gap:2px;padding:14px 0 6px}
.drawer.open{display:flex}
.drawer a{font-family:var(--disp);font-weight:var(--dw);font-size:1.35rem;letter-spacing:-.015em;padding:9px 0;
border-bottom:1px solid var(--line)}
@media(min-width:1000px){.menu{display:flex}.navtog,.drawer{display:none!important}}
@media(max-width:999px){.nav .btn{display:none}.brand .bname b{font-size:1.05rem}}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:96px 0 0;
font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mut2)}
.crumbs a{color:var(--mut)}
.crumbs i{font-style:normal;opacity:.4}
@media(hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--accB)}}

/* ---------- page header: the hero's type, without the pin ---------- */
.phead{position:relative;padding:44px 0 clamp(52px,8vw,92px)}
/* the ghost numeral is the hero's 18vw; on a page header it swallows the H1 */
.phead .gn{font-size:11vw;top:-.04em;opacity:.038}
.phead .ph-h{line-height:1;letter-spacing:-.028em}
/* short headings keep the hero's one-word-per-line cut */
.phead .ph-split{display:block;font-size:clamp(2.4rem,6.4vw,5rem);max-width:16ch}
.phead .ph-split .hl{display:block;overflow:hidden;padding:.04em .06em .06em 0;margin:-.02em 0}
.phead .ph-split .hl-in{display:inline-block}
html.js .phead .ph-split .hl-in{transform:translateY(115%);transition:transform 1s var(--ease) calc(.1s + var(--i)*.09s)}
html.js.rdy .phead .ph-split .hl-in{transform:none}
/* long headings wrap like a heading should */
.phead .ph-wrap{display:block;font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.04;max-width:19ch}
.phead .lead{margin-left:0;margin-top:34px;max-width:32ch;font-size:clamp(1.3rem,2.5vw,2rem)}
.phead .pcta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:40px}

/* ---------- long form prose ---------- */
.prose{max-width:64ch}
.prose h2{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.14;margin:64px 0 18px;max-width:22ch}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--disp);font-size:1.15rem;margin:38px 0 12px}
.prose p{color:var(--mut);margin-bottom:18px;font-size:1.02rem}
.prose ul{list-style:none;margin:22px 0 26px}
.prose li{position:relative;color:var(--mut);padding:9px 0 9px 30px;border-bottom:1px solid var(--line)}
.prose li:first-child{border-top:1px solid var(--line)}
.prose li::before{content:"";position:absolute;left:4px;top:1.05em;width:9px;height:1px;background:var(--accB)}
.prose a{color:var(--accB);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- the answer block: what an answer engine lifts ---------- */
.answer{position:relative;border-left:2px solid var(--acc);padding:4px 0 4px 26px;margin-bottom:44px}
.answer p{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(1.15rem,2.1vw,1.5rem);
line-height:1.32;letter-spacing:-.012em;color:var(--ink);margin:0}

/* ---------- typographic index used as links, outside the pinned stage ------
   Same .ix component the engine pins in act 02. Off the stage nothing drives
   its .on state, so this variant resolves it to the settled look. */
.ixs.ix-list{gap:2px}
.ixs.ix-list .ix{width:100%;padding:15px 0;border-bottom:1px solid var(--line);
justify-content:flex-start;gap:22px;align-items:baseline}
.ixs.ix-list .ix:first-child{border-top:1px solid var(--line)}
.ixs.ix-list .ixt{color:var(--ink);-webkit-text-stroke-color:transparent;font-size:clamp(1.15rem,2.3vw,1.75rem)}
.ixs.ix-list .ixn{color:var(--accB)}
.ixs.ix-list .ixm{margin-left:auto;padding-left:22px;font-size:.78rem;color:var(--mut2);text-align:right;
letter-spacing:.04em;flex:0 0 auto}
@media(hover:hover) and (pointer:fine){
.ixs.ix-list .ix:hover{transform:translateX(12px)}
.ixs.ix-list .ix:hover .ixt{color:var(--accB)}}
@media(max-width:600px){.ixs.ix-list .ixm{display:none}}

/* ---------- a fact table (contact, license, hours) ---------- */
.ftab{width:100%;border-collapse:collapse;max-width:560px}
.ftab th{width:8.5em;text-align:left;vertical-align:top;padding:14px 20px 14px 0;border-bottom:1px solid var(--line);
font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mut2)}
.ftab td{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:.98rem}
.ftab tr:last-child th,.ftab tr:last-child td{border-bottom:0}

/* ---------- the one form ----------
   KEPT ON PURPOSE with nothing currently rendering it. The contact form was
   dropped 1 Aug 2026 (static host, no endpoint) behind the FORM_LIVE switch in
   build.mjs, and that switch is only half a switch if flipping it produces an
   unstyled form. ~600 bytes to keep the other half ready. Delete both together
   or neither. */
.form{display:grid;gap:20px;max-width:540px}
.field{display:grid;gap:8px}
.field label{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.98rem;color:var(--ink);
background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:12px;padding:.85em 1em;
transition:border-color .35s var(--ease),background .35s var(--ease)}
.field textarea{resize:vertical;min-height:8em}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accB);background:rgba(0,0,0,.34)}
.form .btn{justify-content:center}
.fnote{font-size:.84rem;color:var(--mut2);margin:0}

/* ---------- footer: the utility trademark disclaimer ----------
   Deliberately quiet and deliberately present. Smaller than .fline and in the
   dimmest ink the palette has, because it is a legal line and not a selling
   line, but not so faint it fails contrast — --mut2 is the same token .fnote
   and .fcredit already use, so it sits at the level readers expect a
   disclaimer to sit at rather than being hidden. */
.flegal{max-width:92ch;margin:18px 0 0;font-size:.72rem;line-height:1.6;color:var(--mut2)}

/* ---------- a two column split, used by contact and about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,84px);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- utility / rebate pill (the site's best differentiator) ---------- */
.upill{display:inline-flex;align-items:center;gap:.6em;font-size:.66rem;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:.6em 1.1em;color:var(--mut)}
.upill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mut2)}
.upill.yes{color:var(--ink);border-color:var(--accB)}
.upill.yes::before{background:var(--accB);box-shadow:0 0 10px var(--accB)}

/* ---------- sitemap footer, above the engine's own footer line ---------- */
.fmap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(22px,3vw,44px);
padding:0 0 44px;border-bottom:1px solid var(--line);margin-bottom:30px}
.fmap h4{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--accB);margin-bottom:16px}
.fmap ul{list-style:none}
.fmap li{margin-bottom:9px}
.fmap a,.fmap p{font-size:.88rem;color:var(--mut)}
.fmap p{max-width:32ch;margin-bottom:20px}
.fmap .fmark{width:42px;margin-bottom:18px;display:block}
@media(hover:hover) and (pointer:fine){.fmap a:hover{color:var(--ink)}}
@media(max-width:860px){.fmap{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.fmap{grid-template-columns:1fr}}

/* ---------- builder credit: Electric Software ----------
   Readable at a glance, but it is not the client's brand and must never read
   like it. Bone rather than amber, its own rule above it, and set apart from
   the ME mark — the two companies both have "Electric" in the name and the
   visitor must never have to work out which is which. */
.fbuilt{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
display:flex;justify-content:flex-end}
.fbuilt-in{display:inline-flex;align-items:center;gap:14px;padding:10px 16px;border-radius:12px;
border:1px solid transparent;transition:border-color .35s var(--ease),background .35s var(--ease)}
.fbuilt-bolt{flex:0 0 auto;width:19px;height:19px;color:var(--ink);opacity:.5;transition:opacity .35s,color .35s}
.fbuilt-bolt svg{display:block;width:100%;height:100%;fill:currentColor}
.fbuilt-txt{display:flex;flex-direction:column;line-height:1.15}
.fbuilt-lab{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mut2)}
.fbuilt-name{font-family:var(--disp);font-weight:var(--dw);font-size:1.06rem;letter-spacing:-.01em;
color:var(--ink);margin-top:3px}
.fbuilt-url{font-size:.78rem;color:var(--mut);padding-left:14px;border-left:1px solid var(--line);
align-self:stretch;display:flex;align-items:center}
@media(hover:hover) and (pointer:fine){
  .fbuilt-in:hover{border-color:var(--line);background:rgba(255,255,255,.03)}
  .fbuilt-in:hover .fbuilt-bolt{opacity:1;color:var(--gold)}
  .fbuilt-in:hover .fbuilt-url{color:var(--ink)}
}
@media(max-width:600px){
  .fbuilt{justify-content:flex-start}
  .fbuilt-in{padding-left:0}
  .fbuilt-url{display:none}
}
@media print{.fbuilt-url::after{content:""}}

/* ---------- the ME mark ----------
   Brand amber (--gold), not the accent tint. --accB is the engine's washed
   accent for outline type; on a mark it reads salmon. --lg-box-bg has to be
   the canvas colour because the junction box knocks the spine out behind it. */
/* EVERY place the mark appears has to be on this line. The jacket is stroked
   with currentColor, so a mark location left off it does not fall back to a
   safe default — it inherits the page's text colour, which is --ink. A bone
   white tube with the pale #FFE0A8 core highlight down the middle stops reading
   as yellow cable and starts reading as lit glass, i.e. a neon tube. .pmark was
   added to the page headers and left off here, and that is exactly what it did.
   --lg-copper goes with it or the stripped conductor tips go off-brand too. */
   .mark-fig was the About page's explainer figure and came off this line with
   the explainer itself (1 Aug 2026); nothing renders it now. */
.bmark,.fmark,.hmark,.pmark{color:var(--gold);--lg-box-bg:var(--bg);--lg-copper:#E39A5C}
/* The reveal wrapper and the mark are SEPARATE elements on purpose. The
   engine's html.js.rdy .rv-h{opacity:1} rule out-specifies anything selector
   -based we could write on .hmark, so putting both on one element meant every
   responsive opacity change here was silently ignored. */
.hmark-cell{justify-self:end;align-self:center}

/* ---------- the same mark, in the page header's empty right half ----------
   .pgrid is emitted whether or not there is a mark, so it defaults to the
   single column the header had before and only splits under .phead--mark.
   minmax(0,1fr) on the copy column, not 1fr: a bare 1fr is min-content-floored
   and the long town headlines ("Electrician in East Longmeadow, MA") would push
   the mark off the grid instead of wrapping.

   Smaller than .hmark on purpose — 330 against the hero's 430. This is a
   secondary page and the mark is furniture here, not the entrance. */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr)}
.phead--mark .pgrid{grid-template-columns:minmax(0,1fr) minmax(0,auto);
align-items:center;gap:clamp(28px,5vw,80px)}
.pmark-cell{justify-self:end;align-self:center}
.pmark{width:min(26vw,330px);pointer-events:none}
/* Breaks a step earlier than the hero (1000 vs 860). The header's headline runs
   to 16ch on two or three lines where the hero's is one word per line, so the
   copy column starves sooner. Above the headline in flow, matching the hero's
   phone treatment — overlaying it on the copy put the artwork through the
   eyebrow. */
@media(max-width:1000px){
  .phead--mark .pgrid{grid-template-columns:1fr}
  .pmark-cell{order:-1;justify-self:start;margin-bottom:6px}
  .pmark{width:120px}
}
/* Sized to anchor the right half. At 300px it left a 400px dead band between
   the copy and the mark, because the archetype expects a hero photograph to be
   filling that space and there isn't one. */
.hmark{width:min(32vw,430px);pointer-events:none}
@media(max-width:860px){
  /* Above the headline, in flow. Overlaying it on the copy at low opacity put
     the mark straight through the eyebrow line on a 390px screen. */
  .hgrid .hmark-cell{order:-1;justify-self:start;margin-bottom:4px}
  .hgrid .hmark{width:132px}
}

/* ===========================================================================
 * HERO FIT — the headline must never reach the nav
 *
 * The archetype sizes the hero headline off viewport WIDTH only
 * (clamp(3.2rem,9.5vw,7.5rem)) and bottom-aligns the copy in a 100vh pin. That
 * is safe for the 2-3 word tagline it was designed around. "It's time to call
 * ME." is five words, and the archetype puts one word per line, so at 7.5rem
 * the block is ~580px before the eyebrow and buttons. On a laptop viewport the
 * column overflows its own container and — because a flex item overflowing an
 * align-items:flex-end parent spills out of the TOP — it ran straight up
 * underneath the fixed nav.
 *
 * The fix caps the same clamp by the height actually available. 300px is the
 * measured fixed chrome — nav 84, eyebrow 43, buttons 86, bottom inset — and
 * what is left divides across the five lines at 0.96 line-height. A flat vh
 * cap was tried first and left only 5px of nav clearance at 1366x640; this
 * holds at every window size because it subtracts before it divides.
 * ======================================================================== */
.hh{font-size:min(clamp(3.2rem,9.5vw,7.5rem),max(2.1rem,calc((100vh - 300px) / 5.2)))}
.hcopy{padding-top:96px;padding-bottom:7vh;padding-bottom:7svh}

/* ---------- hero ghost: the mark, not a bare letter ----------
   The archetype falls back to a 42vw display capital when there is no hero
   photograph. The actual mark is line art and holds at any size, so it is a
   better watermark than the letter M and it is on brand instead of generic. */
.hmono .ghostmark{position:absolute;left:56%;top:50%;width:min(58vw,880px);
transform:translate(-50%,-52%);color:var(--ink);opacity:.085;pointer-events:none;user-select:none}
@media(max-width:860px){.hmono .ghostmark{left:50%;width:96vw;opacity:.05}}

/* ---------- hero: less air above the copy ----------
   The archetype bottom-aligns hero copy in a 100vh pin, which on a phone
   leaves a dead band under the nav and pushes the call button under the fold.
   Centring it on small screens and trimming the bottom inset closes the gap
   without touching the desktop composition. */
@media(max-width:860px){
  .hcopy{align-items:center;padding-top:64px;padding-bottom:11vh;padding-bottom:11svh}
  .hh{font-size:clamp(2.7rem,12vw,4.2rem)}
  .hey{margin-bottom:18px}
  .hcta{margin-top:26px}
}
/* Interior pages: the fixed nav is ~66px, the crumbs carry the offset, so the
   page header only needs its own rhythm on top of that. */
@media(max-width:860px){
  .crumbs{padding-top:82px}
  .phead{padding:26px 0 clamp(40px,8vw,64px)}
  .phead .lead{margin-top:24px}
  .phead .pcta{margin-top:28px}
}

/* ===========================================================================
 * HARDWARE AS PAGE FURNITURE
 *
 * The archetype already runs a conductor down the page (engine:2524) — a line
 * that fills as you scroll with a dot that lands at the bottom. On its own it
 * reads as a hairline. Splice a junction box into it at every act boundary and
 * it reads as what it is: a wire run, with the page's sections tapped off it.
 *
 * --rail-x mirrors in CSS the arithmetic the engine's script uses to place the
 * thread, so the boxes sit on the conductor without a line of extra JavaScript.
 * Desktop only, exactly like the thread.
 * ======================================================================== */
:root{--rail-x:max(calc((100vw - 1180px)/2 - 22px), 10px)}
.actbox{display:none}
@media(min-width:1100px){
  .actbox{display:block;position:absolute;top:34px;left:var(--rail-x);width:26px;height:26px;
  transform:translateX(-11.5px);z-index:1;pointer-events:none}
  .actbox svg{display:block;width:100%;height:100%;overflow:visible}
  .ab-body{fill:#5F6A78}
  .ab-lip{fill:none;stroke:#39414C;stroke-width:1.4}
  .ab-screw{fill:#39414C}
}
/* the conductor itself: warm it up so it reads as a live run, not a rule */
.thread line{stroke:var(--gold);opacity:.5}
.thread{filter:drop-shadow(0 0 6px rgba(255,184,77,.32))}
.tdot{background:var(--gold);box-shadow:0 0 18px var(--gold)}

/* breaker pole marker beside each circuit number in the panel schedule */
.ixn{display:inline-flex;align-items:center;gap:8px}
.pole{width:3px;height:11px;border-radius:1px;background:var(--accB);opacity:.75;flex:0 0 auto}
.ix-list .ix:hover .pole{opacity:1}

/* the panel-schedule header the circuit directory sits under */
.sched{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.sched b{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.sched span{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mut2);
font-variant-numeric:tabular-nums}

/* ---------- print ---------- */
@media print{
.nav,.rail,.tbar,.chip,.cbar,.thread,.aura,.grain,.spot,.drawer,.navtog,.skip{display:none!important}
body{background:#fff;color:#111}
.prose p,.prose li,.fmap a{color:#333}
a[href^="tel:"]::after{content:" " attr(href)}
}


/* ==== ME monogram component ==== */

.lg { width: 100%; height: auto; overflow: visible; color: currentColor; }
/* --- the cable ------------------------------------------------------------
   A logo is line art. A wire is a cylinder. The difference is one highlight
   running down the middle, so that is exactly what this does: a wide jacket
   stroke plus a narrow bright core stroke on the same path. Direction
   independent, unlike a gradient. */
.lg-p { fill: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; }
.lg-jacket { stroke: currentColor; stroke-width: 24; }
.lg-core   { stroke: #FFE0A8; stroke-width: 7; opacity: 0.55; }

/* flat mode (header, favicon): one stroke, no highlight, no fittings.
   Mitred joins, because that is the sign. */
.lg:not(.lg--wire) .lg-jacket { stroke-width: 22; }

/* --- wire mode: ROUND caps and joins ---------------------------------------
   This one property is what separates "cable" from "extruded bar", and it is
   what was wrong with every earlier pass. A mitred 24-unit stroke is a girder.
   The same stroke with round caps and joins, a specular core and a soft warm
   bloom is a wire. */
.lg--wire .lg-p { stroke-linecap: round; stroke-linejoin: round; }
/* The three E arms end in a CUT, and a cut is flat. Their other end is a join
   into the spine, which the spine's own round cap covers, so butt caps here
   only affect the face we want square. */
.lg--wire .lg-p2, .lg--wire .lg-p3 { stroke-linecap: butt; }
.lg--wire .lg-wires { filter: drop-shadow(0 0 9px rgba(255, 184, 77, 0.32)); }

/* Every run is the cable's yellow sheath. One colour, plus the specular line
   that turns the flat stroke into a cylinder. The colour coding is INSIDE the
   cable and only shows where the sheath is cut back. */
/* 12/2 NM-B is YELLOW jacketed, and the wire build is supposed to be a real cable.
   The base rule above is currentColor so the FLAT mark inherits amber in the header;
   that inheritance is correct there and wrong here — the hero sits on bone-coloured
   text, so the jacket was rendering cream and the cable read as anything but Romex.
   Override only in the wire variant. Token so a rebrand can move it. */
.lg--wire .lg-jacket { stroke: var(--lg-jacket, #EFC63C); }
.lg--wire .lg-core   { stroke: #FFE9C4; opacity: .48; stroke-width: 6.5; }

/* --- hardware --------------------------------------------------------------
   Solid metal, not outlines. The pass that drew every fitting as a thin
   currentColor outline was unreadable — JR could not tell the junction box was
   a box. Filled graphite with a lighter face and a visible screw reads as a
   part at a glance, which is the only thing that matters here. */
.lg-jbox-body, .lg-plate, .lg-lamp-base { fill: #5F6A78; }
.lg-jbox-face, .lg-sw-slot              { fill: #78838F; }
.lg-jbox-screw, .lg-plate-screw         { fill: #39414C; }
.lg-lamp-thread, .lg-lamp-neck { fill: none; stroke: #414A56; stroke-width: 2.4; stroke-linecap: round; }
.lg-sw-slot   { fill: #39414C; }
.lg-sw-lever  { fill: #E4E0D6; stroke: #39414C; stroke-width: 1.4; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  transition: transform .26s cubic-bezier(.34,1.5,.64,1); }

/* --- the switch actually works ---------------------------------------------
   A light switch drawn on a logo that you cannot flip is a missed trick. With
   the interactive flag on it becomes a real button: click or hit Enter/Space
   and the lever throws, the lamp goes out, the run stops glowing. It is the
   only piece of interaction on the mark and it costs about ten lines.

   OFF BY DEFAULT. Everything below is scoped to .lg--off or .lg-sw--live,
   neither of which exists unless the flag is passed, so the settled mark
   renders byte-for-byte as before. */
/* pointer-events:auto is NOT optional here. The hero wraps the mark in
   .hmark{pointer-events:none} so the artwork never eats a click meant for the
   page — which also meant the switch could not be clicked at all. These two
   rules opt the switch, and only the switch, back in. */
.lg-sw-hit    { fill: transparent; pointer-events: auto; }
.lg-sw--live  { cursor: pointer; pointer-events: auto; }
.lg-sw--live:focus-visible { outline: 2px solid var(--gold, #FFB84D); outline-offset: 3px; border-radius: 6px; }

.lg--off .lg-sw-lever  { transform: rotate(180deg); }
.lg--off .lg-glass     { fill: rgba(200,210,225,.07) !important; stroke: #5A636E !important; animation: none !important; }
.lg--off .lg-filament  { stroke: #4A4438 !important; animation: none !important; }
/* opacity:1 is load-bearing. The lamp is revealed by lg-fade with
   animation-fill-mode:forwards from a base of opacity:0, so cancelling the
   animation here made the whole lamp disappear instead of going dark. */
.lg--off .lg-lamp      { filter: none !important; animation: none !important; opacity: 1 !important; }
.lg--off .lg-wires     { filter: none; opacity: .62; }
.lg-wires { transition: opacity .3s ease, filter .3s ease; }

/* --- the cut end ----------------------------------------------------------
   This is 12/2 NM-B, drawn the way it actually looks when you cut the sheath
   back: yellow jacket, then three conductors of a much smaller gauge fanning
   out of it — black hot, white neutral, bare copper ground — with the two
   stripped to copper at their tips.

   The conductors run BACK under the sheath cut (x=-8) and the cut is painted
   over them last, so they emerge from inside the cable instead of being stuck
   on the outside of it. That is the difference between this and the two
   earlier passes JR rejected: those fanned strands off the surface of the
   jacket, which is not a thing that exists. */
/* the cut face: the dark inside of the sheath, and the bore behind it */
.lg-bore    { fill: #2A1D08; }
.lg-bore-in { fill: #140E04; }
.lg-cond { fill: none; stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.lg-cd-blk { stroke: #23282F; }
.lg-cd-wht { stroke: #E8E4DA; }
.lg-cd-cu  { stroke: var(--lg-copper, #C87F4A); }
.lg-tipdot { fill: var(--lg-copper, #C87F4A); }
.lg-bare   { fill: none; stroke: var(--lg-copper, #C87F4A); stroke-width: 6.4; stroke-linecap: round; }
/* No separate "sheath lip" element. One was tried at 25 wide with a round cap
   and it protruded past the jacket as a tan knob on the end of every arm. The
   jacket's own round cap already IS the cut edge; the conductors start just
   inside it and are drawn under it. */

/* --- the lamp: the only thing on the mark that glows -----------------------
   One destination for the eye. In the energise sequence it is dark until the
   current has crossed the M, then it comes on and stays on. */
.lg-glass    { fill: rgba(255,232,190,.13); stroke: #8C97A5; stroke-width: 2.4; }
.lg-filament { fill: none; stroke: #6E5A3A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lg-lamp.on .lg-glass,
.lg--wire:not(.lg--live) .lg-glass { fill: rgba(255,205,110,.34); stroke: #FFD98A; }
.lg-lamp.on .lg-filament,
.lg--wire:not(.lg--live) .lg-filament { stroke: #FFE9B8; }
.lg--wire:not(.lg--live) .lg-lamp { filter: drop-shadow(0 0 14px rgba(255,184,77,.6)); }

/* ===========================================================================
 * THE ENERGISE SEQUENCE
 *
 * The story the mark tells, in order: the switch is there, current crosses the
 * M from switch to lamp, THE LAMP COMES ON, then the E's conductors fill, the
 * splice box lands, and the stripped ends appear. The payoff is the lamp, at
 * 1.05s, which is also the tagline.
 *
 * Gated on html.js — the class the engine's own archetype stamps in <head> —
 * so a visitor with JavaScript off gets the finished, lit mark and never a
 * half drawn one. (This was gated on html.pf-motion, a class from the fx
 * library that this site no longer ships; the sequence would simply never
 * have run.)
 * ======================================================================== */
.lg-fx { fill: var(--amber, #FFB84D); }
.lg-charge { opacity: 0; }

html.js .lg--live .lg-p {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: lg-draw 0.42s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
/* --len is the measured length of each path above. If a path changes, these
   change with it, which is why the CSS lives beside the geometry. */
.lg--live .lg-p1 { --len: 718; animation-delay: .15s; animation-duration: .9s; }  /* the M */
.lg--live .lg-p2 { --len: 421; animation-delay: 1.05s; animation-duration: .7s; }  /* E, wire one */
.lg--live .lg-p3 { --len: 114; animation-delay: 1.55s; }                           /* E, wire two */
@keyframes lg-draw { to { stroke-dashoffset: 0; } }

/* the charge riding the leading edge of each conductor */
html.js .lg--live .lg-charge {
  offset-rotate: 0deg;
  animation: lg-ride .42s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  filter: drop-shadow(0 0 7px var(--amber, #FFB84D));
}
.lg--live .lg-charge1 { offset-path: path('M30,242 L30,14 L140,82 L250,14 L250,246'); animation-delay: .15s; animation-duration: .9s; }
.lg--live .lg-charge2 { offset-path: path('M186,99.3 L140,130 L70,82 L70,216 L138,270 L186,235'); animation-delay: 1.05s; animation-duration: .7s; }
.lg--live .lg-charge3 { offset-path: path('M96,163 L140,200 L186,168.1'); animation-delay: 1.55s; }
@keyframes lg-ride {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* hardware arrives after the conductor it sits on has landed. The switch is
   the exception: it is the source, so it is there before the current is. */
html.js .lg--live .lg-end,
html.js .lg--live .lg-jbox,
html.js .lg--live .lg-lamp { opacity: 0; animation: lg-fade .38s ease-out forwards; }
.lg--live .lg-lamp  { animation-delay: .80s; }
.lg--live .lg-jbox  { animation-delay: 1.45s; }
.lg--live .lg-end1  { animation-delay: 1.72s; }
.lg--live .lg-end3  { animation-delay: 1.78s; }
.lg--live .lg-end2  { animation-delay: 1.98s; }
@keyframes lg-fade { to { opacity: 1; } }

/* THE PAYOFF: the lamp comes on the instant the current reaches it, flares,
   and settles warm. Two quick beats, because a filament does not come up
   clean from cold. */
html.js .lg--live .lg-glass    { animation: lg-lit 1.1s ease-out 1.05s forwards; }
html.js .lg--live .lg-filament { animation: lg-fil 1.1s ease-out 1.05s forwards; }
html.js .lg--live .lg-lamp     { animation: lg-fade .38s ease-out .80s forwards, lg-bloom 1.4s ease-out 1.05s forwards; }
@keyframes lg-lit {
  0%   { fill: rgba(255,232,190,.13); stroke: #8C97A5; }
  22%  { fill: rgba(255,214,130,.55); stroke: #FFE9B8; }
  40%  { fill: rgba(255,205,110,.24); stroke: #C9B489; }
  100% { fill: rgba(255,205,110,.34); stroke: #FFD98A; }
}
@keyframes lg-fil {
  0%   { stroke: #6E5A3A; } 22% { stroke: #FFF6DE; } 100% { stroke: #FFE9B8; }
}
@keyframes lg-bloom {
  0%   { filter: none; }
  22%  { filter: drop-shadow(0 0 26px rgba(255,184,77,.95)); }
  100% { filter: drop-shadow(0 0 14px rgba(255,184,77,.6)); }
}

/* the whole run warms up once the circuit is complete */
html.js .lg--live .lg-wires { animation: lg-settle 1.4s ease-out 1.9s forwards; }
@keyframes lg-settle {
  0%   { filter: drop-shadow(0 0 9px rgba(255,184,77,.32)); }
  35%  { filter: drop-shadow(0 0 18px rgba(255,184,77,.7)); }
  100% { filter: drop-shadow(0 0 9px rgba(255,184,77,.32)); }
}

/* --- reduced motion: the finished, lit mark, no sequence ------------------ */
@media (prefers-reduced-motion: reduce) {
  .lg-p { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .lg-charge { animation: none !important; opacity: 0 !important; }
  .lg-end, .lg-jbox, .lg-lamp { animation: none !important; opacity: 1 !important; }
  .lg-wires { animation: none !important; }
  .lg-glass    { fill: rgba(255,205,110,.34) !important; stroke: #FFD98A !important; animation: none !important; }
  .lg-filament { stroke: #FFE9B8 !important; animation: none !important; }
  .lg-lamp { filter: drop-shadow(0 0 14px rgba(255,184,77,.6)) !important; }
}

/* offset-path is well supported but not universal; without it the charge would
   sit at the origin, so hide it and keep the draw. */
@supports not (offset-path: path('M0,0 L1,1')) {
  .lg-charge { display: none; }
}