/* afterglow — art-direction layer over the existing slot site.
   Scoped to html.ag so it sits above earlier passes without editing them. */
html.ag{--ag-violet:#e094fc;--ag-deep:#874c9e;--ag-ink:#24202c;--ag-night:#080d1c;--ag-ease:cubic-bezier(.2,.8,.2,1);--ag-spring:cubic-bezier(.2,1.45,.35,1)}

/* ───────── header: one tidy row on phones ───────── */
@media(max-width:750px){
 html.ag body header{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:12px 10px;padding-bottom:4px}
 html.ag body header .wordmark img{width:108px;height:auto}
 html.ag body header .logo-tagline{font-size:11px;margin-top:4px}
 html.ag body header nav{grid-column:1/-1;order:3;padding:6px 8px;gap:4px;min-height:0}
 html.ag body header nav>*{font-size:12px;padding:8px 10px}
 html.ag body header .nav-search-icon{width:18px;height:18px}
 html.ag body #themeToggle{justify-self:end;align-self:start;margin:0;padding:6px 8px;gap:6px;transform:scale(.92);transform-origin:right top}
}

/* ───────── hero ───────── */
html.ag .abc-intro{position:relative;isolation:isolate}
html.ag .abc-letters{position:relative;z-index:2;will-change:translate}
/* Night uses the same glossy balloons as day, lit by moonlight instead of a flat neon. */
html.ag body[data-theme=night] .abc-letters>button{width:calc(var(--glyph-height)*1.24);height:calc(var(--glyph-height)*1.24)}
html.ag body[data-theme=night] .abc-letters>button+button{margin-left:-32px}
html.ag body[data-theme=night] .abc-letters{gap:0}
html.ag body[data-theme=night] .abc-letters>button>img{visibility:hidden;width:100%;height:100%;filter:none!important;animation:none!important}
html.ag body[data-theme=night] .abc-letters .bubble-letter{display:block;position:absolute;inset:0;background-image:url('assets/abc-bubble-sprite.png');background-size:300% 100%;background-repeat:no-repeat;transform:translate(var(--hover-x,0px),var(--hover-y,0px)) rotate(var(--hover-tilt,0deg));transition:transform .7s var(--ag-spring),scale .7s var(--ag-spring),filter .5s;animation:balloon-drift 6s ease-in-out infinite;animation-delay:var(--float-delay);filter:brightness(.86) saturate(1.12) drop-shadow(0 0 1px #fff8) drop-shadow(0 0 22px #e094fc70) drop-shadow(0 18px 40px #02051299)}
html.ag body[data-theme=night] .abc-letters>button[aria-pressed=true] .bubble-letter{filter:brightness(1) saturate(1.15) drop-shadow(0 0 1px #fff) drop-shadow(0 0 28px #e7a8ffaa) drop-shadow(0 0 80px #b56ce966) drop-shadow(0 18px 40px #020512aa)}
html.ag body[data-theme=night] .abc-letters>button:hover .bubble-letter{scale:1.055 .965}
html.ag body[data-theme=night] .abc-letters>button:before,html.ag body[data-theme=night] .abc-letters>button:after{display:none!important}
html.ag body[data-theme=day] .abc-letters .bubble-letter{filter:drop-shadow(0 16px 14px #536d8a26)}
@media(max-width:750px){
 html.ag .abc-intro{--glyph-height:clamp(84px,25.5vw,160px)!important}
 html.ag body .abc-letters>button{width:calc(var(--glyph-height)*1.13)!important;height:calc(var(--glyph-height)*1.13)!important}
 html.ag body .abc-letters>button+button{margin-left:-9px!important}
 html.ag body .abc-letters{margin-top:64px!important;margin-bottom:18px!important}
}
/* Balloons let go on load. */
html.ag.ag-motion.ag-arrive .abc-letters>button{animation:ag-inflate 1.25s var(--ag-spring) backwards}
html.ag.ag-motion.ag-arrive .abc-letters>button:nth-child(2){animation-delay:.12s}
html.ag.ag-motion.ag-arrive .abc-letters>button:nth-child(3){animation-delay:.24s}
@keyframes ag-inflate{0%{opacity:0;scale:.5 .42;translate:0 110px}55%{opacity:1}100%{scale:1;translate:0 0}}
/* Soft cloud floor replaces the hard rule under the letters. */
html.ag .ag-cloud-floor{display:block;position:relative;z-index:1;width:min(920px,86%);height:70px;margin:-58px auto -6px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#fff 0 30%,#ffffffb0 48%,#fff0 72%);filter:blur(8px);pointer-events:none;transition:opacity .3s}
html.ag .ag-cloud-floor:after{content:'';position:absolute;left:18%;right:18%;top:14px;height:22px;border-radius:50%;background:radial-gradient(ellipse,#7a5a9d2e,#7a5a9d00 70%);filter:blur(4px)}
html.ag body[data-theme=night] .ag-cloud-floor{background:radial-gradient(ellipse at 50% 40%,#e094fc2a 0 26%,#e094fc10 50%,#e094fc00 72%)}
html.ag body[data-theme=night] .ag-cloud-floor:after{background:radial-gradient(ellipse,#00000055,#0000 70%)}
/* The caption: a frosted capsule, her glyph breaking its edge. */
html.ag body .abc-detail{position:relative;z-index:3;max-width:1080px;margin:0 auto;border:0!important;padding:26px 34px 26px 150px;border-radius:32px;background:linear-gradient(135deg,#ffffffc7,#f1f7ffa8);box-shadow:inset 0 1px #fff,0 0 0 1px #ffffffa0,0 28px 60px -30px #5d4a8a55;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);grid-template-columns:1fr auto!important;align-items:center!important;gap:28px!important}
html.ag body[data-theme=night] .abc-detail{background:linear-gradient(135deg,#1b1f3cd0,#13182ec0);box-shadow:inset 0 1px #ffffff1c,0 0 0 1px #ffffff14,0 28px 60px -28px #000c}
html.ag body #abcDetailLetter{position:absolute;left:22px;top:50%;width:112px;height:128px;margin:0;translate:0 -58%;font-size:0!important;color:transparent!important;-webkit-text-stroke:0!important;text-shadow:none!important;background:center/contain no-repeat;filter:drop-shadow(0 12px 14px #6e329640);rotate:-6deg}
html.ag body #abcDetailLetter[data-glyph=a]{background-image:url('assets/abc-glyph-a.png')}
html.ag body #abcDetailLetter[data-glyph=b]{background-image:url('assets/abc-glyph-b.png');rotate:4deg}
html.ag body #abcDetailLetter[data-glyph=c]{background-image:url('assets/abc-glyph-c.png')}
html.ag body[data-theme=night] #abcDetailLetter{filter:drop-shadow(0 0 16px #e094fc88)}
html.ag body .abc-detail-copy h2{font-size:clamp(38px,4.3vw,62px)!important;letter-spacing:-.045em!important;margin:4px 0 8px!important}
html.ag body .abc-detail-copy>span{font-size:16px;opacity:.8}
html.ag body .abc-detail-copy p{font-size:clamp(14px,1.2vw,17px)!important;white-space:normal!important;max-width:46ch}
html.ag body .abc-detail-controls{display:grid;justify-items:end;gap:10px;padding-top:0!important}
html.ag .ag-letter-timer{display:block;width:118px;height:2px;border-radius:2px;background:#8a70a322;overflow:hidden;position:relative}
html.ag .ag-letter-timer:after{content:'';position:absolute;inset:0;background:var(--ag-violet);transform-origin:left;scale:0 1}
html.ag .ag-letter-timer.run:after{animation:ag-timer 2.4s linear forwards}
html.ag .ag-letter-timer.done{opacity:0}
@keyframes ag-timer{to{scale:1 1}}
@media(max-width:750px){
 html.ag body .abc-detail{grid-template-columns:1fr!important;padding:22px 20px 20px 96px;border-radius:24px;gap:14px!important;min-height:150px}
 html.ag body #abcDetailLetter{left:12px;top:24px;width:70px;height:82px;translate:0 0}
 html.ag body .abc-detail-copy h2{font-size:32px!important}
 html.ag body .abc-detail-controls{grid-column:1/-1!important;justify-items:start;margin-left:-76px}
 html.ag body .abc-detail-controls .abc-tabs{display:flex;gap:6px}
}

/* ───────── slot machine ───────── */
html.ag body .machine-bottom #result.machine-project{display:flex!important;position:static!important;transform:none!important;flex:1;justify-content:center;z-index:4;min-width:0}
html.ag body .machine-bottom #result.machine-project.pending{opacity:0}
html.ag body .machine-bottom .machine-counters{order:1}html.ag body .machine-bottom #result{order:2}html.ag body .machine-bottom #spin{order:3}
html.ag .closer-look{display:inline-flex;align-items:center;gap:10px;padding:10px 17px;border:1px solid #ffffff40;border-radius:999px;background:#36203f;color:#fcf3ff;font:500 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;box-shadow:0 8px 18px -8px #36203f99,inset 0 1px #ffffff22;cursor:pointer;transition:background .2s,translate .3s var(--ag-spring)}
html.ag .closer-look span{font-weight:700;font-size:13px;color:#f3c9ff}
html.ag .closer-look:hover{background:#562f68;translate:0 -2px}
html.ag .closer-look:focus-visible{outline:2px solid var(--ag-violet);outline-offset:3px}
@media(max-width:750px){
 html.ag body .machine-bottom{flex-wrap:wrap}
 html.ag body .machine-bottom #result.machine-project{order:4;flex-basis:100%}
 html.ag .closer-look{font-size:11px;padding:9px 14px}
}
/* Bulbs chase while the reels run, then flash on the landing. */
html.ag.ag-motion .arcade.spinning .marquee-light{animation:ag-chase .55s linear infinite!important;animation-delay:calc(var(--n,0)*-42ms)!important}
html.ag.ag-motion .arcade.ag-landed .marquee-light{animation:ag-flash .28s ease-in-out 3!important}
@keyframes ag-chase{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ag-flash{50%{opacity:.35;filter:none}}
html.ag .arcade.ag-landed .payline{filter:drop-shadow(0 0 6px #e094fc) drop-shadow(0 0 16px #e094fc)}
html.ag .ag-burst{position:absolute;left:50%;top:50%;z-index:6;width:0;height:0;pointer-events:none}
html.ag .ag-burst i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:radial-gradient(circle at 35% 30%,#fff,#f5cfff 40%,#e094fc 75%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:ag-star 1.1s cubic-bezier(.15,.7,.25,1) forwards}
@keyframes ag-star{0%{transform:rotate(var(--a)) translateX(0) scale(0);opacity:1}70%{opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) scale(var(--s)) rotate(180deg);opacity:0}}

/* ───────── gallery: a glass observation deck ───────── */
html.ag body .work-window{border:0!important;border-radius:36px;background:linear-gradient(180deg,#ffffffd9,#f4f9ffc4)!important;box-shadow:inset 0 1px #fff,0 0 0 1px #ffffffb0,0 40px 90px -40px #4f3f7a55!important;backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15)}
html.ag body[data-theme=night] .work-window{background:linear-gradient(180deg,#191d3adb,#11162bd0)!important;box-shadow:inset 0 1px #ffffff1a,0 0 0 1px #ffffff12,0 40px 90px -40px #000!important}
html.ag body .explore-search{background:transparent!important;border:0!important;border-bottom:1.5px solid #cdb6e0!important;border-radius:0!important;padding:8px 2px 14px!important}
html.ag body .explore-search input{font-size:clamp(18px,1.9vw,26px)!important;letter-spacing:-.03em}
html.ag body[data-theme=night] .explore-search{border-bottom-color:#5b4e7a!important}
html.ag body .color-row [data-color]{position:relative;transition:transform .35s var(--ag-spring)}
html.ag body .color-row [data-color]:after{content:'';position:absolute;left:-7px;right:-7px;top:40%;height:26%;border:1.5px solid #8a6aa3;border-radius:50%;rotate:-18deg;opacity:0;scale:.6;transition:opacity .25s,scale .35s var(--ag-spring);pointer-events:none;clip-path:polygon(0 45%,100% 45%,100% 100%,0 100%)}
html.ag body .color-row [data-color]:is(:hover,[aria-pressed=true]):after{opacity:1;scale:1}
html.ag body .color-row [aria-pressed=true]{outline:0!important;transform:scale(1.12)}
html.ag body[data-theme=night] .color-row [data-color]:after{border-color:#e7c5ff}
html.ag #projectList .shortlist-card{transition:translate .45s var(--ag-spring),box-shadow .35s}
html.ag #projectList .shortlist-card:hover{translate:0 -5px;box-shadow:0 22px 40px -22px color-mix(in srgb,var(--asset-color) 55%,#2e1f45)}
html.ag.ag-motion #projectList .shortlist-card{animation:ag-card .55s var(--ag-ease) backwards;animation-delay:calc(min(var(--n,0),12)*38ms)}
@keyframes ag-card{from{opacity:0;translate:0 18px}}
html.ag .experiment-note{flex-basis:100%;font:italic 300 11px 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8a78a0}
@media(max-width:750px){
 html.ag body .filter-row,html.ag body .color-row{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-right:-18px;padding:4px 18px 8px 2px}
 html.ag body .filter-row::-webkit-scrollbar,html.ag body .color-row::-webkit-scrollbar{display:none}
 html.ag body .filter-row button,html.ag body .color-row>*{flex:none}
 html.ag body .explore-search{flex-wrap:nowrap}
 html.ag body .color-row>span{width:auto!important;flex:none;margin-right:4px}
 html.ag body .explore-search input{font-size:17px!important}
 html.ag body .symbol.question{font-size:clamp(15px,4.6vw,20px)!important;padding:8px 6px!important;letter-spacing:-.03em}
 html.ag body .explore-search button{font-size:10px;padding:8px 10px}
}

/* ───────── numbers: one pocket of night sky, each star a client ───────── */
html.ag .ag-sky-stats{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-areas:"sky reading" "steps steps";gap:22px clamp(28px,4vw,64px);align-items:center}
html.ag .ag-sky-window{grid-area:sky;position:relative;margin:0;border-radius:36px;overflow:hidden;aspect-ratio:600/440;background:radial-gradient(ellipse 70% 60% at 30% 25%,#3b2d6d 0%,#1a1d44 55%,#0b1023 100%);box-shadow:inset 0 1px #ffffff30,inset 0 0 0 1px #ffffff14,0 40px 80px -36px #2b1f5a99,0 0 0 8px #ffffff55}
html.ag .ag-sky-window:before{content:'';position:absolute;inset:0;background:radial-gradient(1px 1px at 12% 18%,#fff9,#0000),radial-gradient(1px 1px at 71% 12%,#fff8,#0000),radial-gradient(1.5px 1.5px at 88% 68%,#fff7,#0000),radial-gradient(1px 1px at 22% 82%,#fff6,#0000),radial-gradient(1px 1px at 50% 94%,#fff5,#0000),radial-gradient(1px 1px at 94% 30%,#fff6,#0000),radial-gradient(ellipse 60% 40% at 80% 110%,#e094fc33,#0000);pointer-events:none}
html.ag body[data-theme=night] .ag-sky-window{box-shadow:inset 0 1px #ffffff30,inset 0 0 0 1px #e094fc40,0 0 70px -10px #e094fc40,0 40px 80px -30px #000}
html.ag .ag-starfield{position:relative;display:block;width:100%;height:100%;overflow:visible}
html.ag .ag-links path{fill:none;stroke:#f1d4ff;stroke-width:1.1;stroke-linecap:round;opacity:.7;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease-out,opacity .4s;transition-delay:calc(var(--k)*28ms)}
html.ag .ag-st-body{transform:scale(var(--s));transition:opacity .45s,transform .6s var(--ag-spring);filter:drop-shadow(0 0 4px #f5d0ff99)}
html.ag .ag-ring{fill:none;stroke:#f3d6ff;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .7s ease-out,opacity .3s;transition-delay:calc(var(--i)*14ms)}
html.ag .ag-plus text{fill:#f7dcff;font:700 22px 'Helvetica Neue',Helvetica,Arial,sans-serif}
html.ag .ag-plus{transition:opacity .4s}
/* entrance: stars light up once, from the first client outward */
html.ag.ag-motion .ag-sky-stats:not(.is-lit) .ag-st-body{opacity:0;transform:scale(0)}
html.ag.ag-motion .ag-sky-stats.is-lit .ag-st-body{transition-delay:calc(var(--i)*22ms)}
html.ag.ag-motion .ag-plus{animation:ag-twinkle 2.4s ease-in-out infinite}
@keyframes ag-twinkle{50%{opacity:.45}}
/* 02 · referrals: the constellation draws itself; the four direct clients stay unlinked and soft */
html.ag .ag-sky-stats[data-step="1"] .ag-links path{stroke-dashoffset:0}
html.ag .ag-sky-stats[data-step="1"] .ag-st.direct .ag-st-body{opacity:.35}
/* 03 · recurring: rings on 24 of 40, the rest recede */
html.ag .ag-sky-stats[data-step="2"] .ag-st:not(.recurring) .ag-st-body{opacity:.28}
html.ag .ag-sky-stats[data-step="2"] .ag-st.recurring .ag-ring{opacity:.9;stroke-dashoffset:0}
html.ag .ag-sky-stats:not([data-step="0"]) .ag-plus{opacity:.25;animation:none}
html.ag .ag-sky-stats:not([data-step="1"]) .ag-links path{transition-delay:0s}
html.ag .ag-sky-legend{position:absolute;left:22px;bottom:18px;margin:0;padding:7px 13px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff22;color:#f3e9fb;font:500 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;backdrop-filter:blur(6px)}
html.ag .ag-sky-legend i{font-style:normal;color:#e9b4ff}
/* the reading */
html.ag .ag-sky-reading{grid-area:reading;min-width:0}
html.ag .ag-stat-index{font:12px 'Helvetica Neue',Helvetica,Arial,sans-serif;opacity:.7}
html.ag .ag-stat-metric{display:flex;align-items:flex-end;gap:16px;margin:6px 0 18px;padding-bottom:18px;border-bottom:1px solid #8a70a340}
html.ag #agStatValue{font:700 clamp(96px,10vw,164px)/.82 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.075em;font-variant-numeric:tabular-nums}
html.ag #agStatValue span{color:var(--ag-violet);font-size:.42em;letter-spacing:0;margin-left:4px}
html.ag #agStatLabel{font:400 15px/1.25 'Helvetica Neue',Helvetica,Arial,sans-serif;padding-bottom:10px;opacity:.85}
html.ag #agStatTitle{font:600 clamp(24px,2.3vw,34px)/1.08 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.035em;margin:0 0 12px}
html.ag #agStatCopy{font:400 15px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;margin:0 0 18px;max-width:42ch;opacity:.85}
html.ag #agStatLink{font:600 13px 'Helvetica Neue',Helvetica,Arial,sans-serif;color:inherit;text-decoration:none;border-bottom:1.5px solid var(--ag-violet);padding-bottom:4px}
html.ag body[data-theme=night] .ag-sky-reading{color:#f5ecfb}
/* the three steps */
html.ag .ag-stat-steps{grid-area:steps;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
html.ag body .ag-stat-steps button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;padding:16px 20px;border-radius:22px;border:1px solid #ffffffb0;background:#ffffff8c;color:var(--ag-ink);box-shadow:0 12px 30px -20px #4f3f7a55;cursor:pointer;transition:background .25s,translate .35s var(--ag-spring),box-shadow .25s;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
html.ag body .ag-stat-steps button:hover{translate:0 -2px}
html.ag body .ag-stat-steps button[aria-pressed=true]{background:var(--ag-violet);border-color:var(--ag-violet);box-shadow:0 16px 30px -16px #a55fce99}
html.ag .ag-step-no{grid-row:1/3;font:700 26px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.05em;opacity:.35}
html.ag .ag-step-name{font-size:16px;font-weight:600;letter-spacing:-.02em}
html.ag .ag-stat-steps small{font-size:12px;opacity:.7}
html.ag body[data-theme=night] .ag-stat-steps button{background:#ffffff0d;border-color:#ffffff1f;color:#f5ecfb}
html.ag body[data-theme=night] .ag-stat-steps button[aria-pressed=true]{background:var(--ag-violet);color:#24202c}
@media(max-width:900px){
 html.ag .ag-sky-stats{grid-template-columns:1fr;grid-template-areas:"sky" "steps" "reading";gap:16px}
 html.ag .ag-sky-window{border-radius:26px;box-shadow:inset 0 1px #ffffff30,0 30px 60px -30px #2b1f5a99,0 0 0 5px #ffffff55}
 html.ag .ag-stat-steps{gap:6px}
 html.ag body .ag-stat-steps button{grid-template-columns:1fr;padding:11px 10px;border-radius:16px;row-gap:3px}
 html.ag .ag-step-no{grid-row:auto;font-size:15px}
 html.ag .ag-step-name{font-size:13px;line-height:1.1}
 html.ag .ag-stat-steps small{font-size:10px;line-height:1.2}
 html.ag .ag-sky-legend{left:12px;bottom:10px;font-size:11px;padding:6px 10px}
 html.ag .ag-sky-reading{padding-top:8px}
}
@media(prefers-reduced-motion:reduce){html.ag .ag-links path,html.ag .ag-ring,html.ag .ag-st-body{transition:none!important}html.ag .ag-plus{animation:none}}

/* ───────── testimonials: a touch more depth on the window ───────── */
html.ag body .quote-note{box-shadow:0 1px 0 #fff inset,0 36px 70px -34px #4c3a7a66!important;transition:translate .5s var(--ag-spring)}
html.ag body[data-theme=night] .quote-note{box-shadow:0 36px 80px -30px #000,0 0 60px -20px #e094fc44!important}

/* ───────── finale: balloons tied to the invitation ───────── */
html.ag body .contact-section{align-items:end}
html.ag body .contact-copy h2{font-size:clamp(56px,7.2vw,112px)!important;line-height:.9!important;letter-spacing:-.055em}
html.ag .ag-balloons{position:relative;width:min(320px,78%);height:240px;margin:0 0 6px -8px;pointer-events:none}
html.ag .ag-strings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
html.ag .ag-strings path{fill:none;stroke:#9a79b6;stroke-width:1.2;opacity:.65;vector-effect:non-scaling-stroke}
html.ag body[data-theme=night] .ag-strings path{stroke:#cdb4e8;opacity:.4}
html.ag .ag-balloon{position:absolute;width:37%;aspect-ratio:1;background:url('assets/abc-bubble-sprite.png') 0 50%/300% 100% no-repeat;filter:drop-shadow(0 14px 14px #536d8a30)}
html.ag .ag-balloon[data-l=a]{left:0;top:18%;background-position:0 50%;rotate:-9deg}
html.ag .ag-balloon[data-l=b]{left:32%;top:0;background-position:50% 50%;width:40%}
html.ag .ag-balloon[data-l=c]{left:63%;top:20%;background-position:100% 50%;rotate:8deg}
html.ag body[data-theme=night] .ag-balloon{filter:brightness(.9) drop-shadow(0 0 18px #e094fc77) drop-shadow(0 14px 22px #0009)}
html.ag.ag-motion .ag-balloon{animation:ag-bob 5.5s ease-in-out infinite}
html.ag.ag-motion .ag-balloon[data-l=b]{animation-delay:-1.8s;animation-duration:6.2s}
html.ag.ag-motion .ag-balloon[data-l=c]{animation-delay:-3.1s}
@keyframes ag-bob{50%{translate:0 -9px}}
html.ag body .inquiry-form{border:0!important;border-radius:32px;background:linear-gradient(160deg,#ffffffe0,#f3f9ffcc)!important;box-shadow:inset 0 1px #fff,0 0 0 1px #ffffffb0,0 40px 80px -40px #4f3f7a66!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html.ag body[data-theme=night] .inquiry-form{background:linear-gradient(160deg,#1b1f3ce0,#12172dd6)!important;box-shadow:inset 0 1px #ffffff1a,0 0 0 1px #ffffff12,0 40px 80px -40px #000!important}
@media(max-width:750px){
 html.ag .ag-balloons{height:170px;width:230px}
 html.ag body .contact-copy h2{font-size:clamp(50px,15vw,68px)!important}
 html.ag body .contact-section{align-items:stretch}
 html.ag .ag-balloons{margin-left:-6px}
}

/* ───────── connective tissue ───────── */
/* Sections rise out of the sky, once. */
html.ag.ag-motion [data-ag-reveal]{transition:opacity .55s var(--ag-ease),translate .7s var(--ag-ease)}
html.ag.ag-motion [data-ag-reveal]:not(.ag-in){opacity:0;translate:0 26px}
/* Flight path: the page's trajectory, on the right edge. */
html.ag body .ag-flight{position:fixed;right:22px;top:50%;z-index:40;height:min(58vh,520px);width:14px;translate:0 -50%;display:none;padding:0!important;margin:0;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;backdrop-filter:none}
@media(min-width:1180px){html.ag body .ag-flight{display:block}}
html.ag .ag-flight-track{position:absolute;left:6px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(#8a70a355 0 2px,#0000 2px 7px)}
html.ag .ag-flight-fill{position:absolute;left:0;top:0;width:2px;height:calc(var(--p,0)*100%);background:linear-gradient(#e094fc00,#e094fc);border-radius:2px}
html.ag .ag-flight-star{position:absolute;left:-5px;top:calc(var(--p,0)*100%);width:24px;height:24px;translate:0 -50%;rotate:calc(var(--p,0)*720deg);filter:drop-shadow(0 0 6px #fff) drop-shadow(0 2px 3px #613b8c55)}
html.ag .ag-flight-star svg{display:block;width:100%;height:100%}
html.ag body .ag-flight button{position:absolute;left:3px;top:calc(var(--t)*100%);width:8px;height:8px;padding:0;margin:0;border-radius:50%;border:1.5px solid #8a70a3;background:#f3f8ff;translate:0 -50%;cursor:pointer;transition:background .3s,scale .3s var(--ag-spring)}
html.ag body .ag-flight button.passed{background:var(--ag-violet);border-color:var(--ag-violet)}
html.ag body .ag-flight button[aria-current]{scale:1.35}
html.ag body .ag-flight button span{position:absolute;right:20px;top:50%;translate:6px -50%;white-space:nowrap;padding:6px 11px;border-radius:999px;background:#24202c;color:#fbf2ff;font:500 11px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,translate .3s var(--ag-ease)}
html.ag body .ag-flight button:is(:hover,:focus-visible) span{opacity:1;translate:0 -50%}
html.ag body .ag-flight button:focus-visible{outline:2px solid var(--ag-violet);outline-offset:3px}
html.ag body[data-theme=night] .ag-flight-track{background:repeating-linear-gradient(#cdb4e855 0 2px,#0000 2px 7px)}
html.ag body[data-theme=night] .ag-flight button{background:#141933;border-color:#b69bd2}
html.ag body[data-theme=night] .ag-flight button.passed{background:var(--ag-violet);border-color:var(--ag-violet)}
html.ag body[data-theme=night] .ag-flight button span{background:#f5ecfb;color:#1a1530}
/* Day ↔ night: a brief dusk/dawn wash rather than a hard cut. */
html.ag .ag-wash{position:fixed;inset:0;z-index:999;pointer-events:none;animation:ag-wash .9s ease-out forwards}
html.ag .ag-wash.night{background:radial-gradient(circle at 92% 4%,#3a2b63,#0b1023 70%)}
html.ag .ag-wash.day{background:radial-gradient(circle at 92% 4%,#fff,#e4f2fd 70%)}
@keyframes ag-wash{0%{opacity:.7}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
 html.ag .abc-letters{translate:none!important}
 html.ag .ag-balloon,html.ag #projectList .shortlist-card,html.ag .ag-letter-timer:after{animation:none!important}
 html.ag .ag-flight-star{rotate:0deg}
}

/* ═════════ round 3 ═════════ */
/* Star highlights: no little white dot in the upper left of the glossy stars. */
html.ag svg circle[cx="20"][cy="18"]{display:none}

/* Numbers: no frame — the stars sit straight on the page's own sky.
   Day = lavender stars with dark ink lines; night = glowing stars with light lines. */
html.ag body .ag-sky-window{background:none!important;box-shadow:none!important;border-radius:0;overflow:visible}
html.ag body .ag-sky-window:before{display:none}
html.ag body[data-theme=day] #agStarGloss stop:nth-child(1){stop-color:#fbf0ff}
html.ag body[data-theme=day] #agStarGloss stop:nth-child(2){stop-color:#ecc2ff}
html.ag body[data-theme=day] #agStarGloss stop:nth-child(3){stop-color:#c77ee8}
html.ag body[data-theme=day] #agStarGloss stop:nth-child(4){stop-color:#7d45a8}
html.ag body[data-theme=day] .ag-st-body{filter:drop-shadow(0 2px 3px #5b3a8a40)}
html.ag body[data-theme=day] .ag-links path{stroke:#4b3a68;stroke-width:1.5;opacity:.75}
html.ag body[data-theme=day] .ag-ring{stroke:#6e46a0;stroke-width:1.7}
html.ag body[data-theme=day] .ag-plus text{fill:#7d45a8}
html.ag body[data-theme=night] .ag-links path{stroke:#f3dcff;stroke-width:1.5;opacity:.85}
html.ag body[data-theme=night] .ag-ring{stroke:#f5ddff;stroke-width:1.6}
html.ag body[data-theme=day] .ag-sky-stats[data-step="1"] .ag-st.direct .ag-st-body,
html.ag body[data-theme=day] .ag-sky-stats[data-step="2"] .ag-st:not(.recurring) .ag-st-body{opacity:.3}
html.ag body .ag-sky-legend{left:0;bottom:-6px}
html.ag body[data-theme=day] .ag-sky-legend{background:#ffffffc0;border-color:#ffffff;color:#3d3150;box-shadow:0 6px 16px -10px #4f3f7a66}
html.ag body[data-theme=day] .ag-sky-legend i{color:#9c5cc8}

/* Testimonial orbit: legible in both skies. */
html.ag body[data-theme=day] .constellation-lines,html.ag body[data-theme=day] .constellation-lines path{stroke:#5d4c7c!important;stroke-width:1.9!important;stroke-dasharray:1 7!important;opacity:.7!important}
html.ag body[data-theme=night] .constellation-lines,html.ag body[data-theme=night] .constellation-lines path{stroke:#ecd8ff!important;stroke-width:1.9!important;stroke-dasharray:1 7!important;opacity:.8!important}

/* Gallery: cards crop to each image's real content (see shortlist.js), so mats stay thin. */
html.ag #projectList .shortlist-card{overflow:hidden}
html.ag #projectList .shortlist-art{padding:6px}
html.ag #projectList .shortlist-art.is-trimmed{padding:0!important;position:relative;overflow:hidden}
html.ag #projectList .shortlist-art.is-trimmed>img{position:absolute;max-width:none!important;width:calc(100% / var(--tw))!important;height:calc(100% / var(--th))!important;left:calc(var(--tx) / var(--tw) * -100%);top:calc(var(--ty) / var(--th) * -100%);object-fit:fill!important;border-radius:0;filter:none}

/* Night slot machine: the same cabinet, after dark. */
html.ag body[data-theme=night] .machine-marquee{background:linear-gradient(#3b2f68,#231e47)!important;border-color:#9d88cf}
html.ag body[data-theme=night] .marquee-copy h2{color:#fff7fc}
html.ag body[data-theme=night] .machine-cabinet{background:linear-gradient(180deg,#2b2c56 0%,#211f45 50%,#1b1839 100%)!important;border-color:#8f7bc4;box-shadow:0 18px 40px #02051299,inset 0 1px #ffffff22}
html.ag body[data-theme=night] .machine-cabinet:before,html.ag body[data-theme=night] .machine-cabinet:after{background:linear-gradient(90deg,#5d3f8c,#b79be3 70%,#5d3f8c)}
html.ag body[data-theme=night] .machine:after{background:linear-gradient(#2a2450,#1e1a3e);border-color:#8f7bc4}
html.ag body[data-theme=night] .reel-labels .reel-the,html.ag body[data-theme=night] .reel-labels .reel-word,html.ag body[data-theme=night] .reel-labels>span{color:#f3e9fb}
html.ag body[data-theme=night] .reel{filter:brightness(.93)}
html.ag body[data-theme=night] .machine-bottom .machine-counters>span{background:#16142f!important;border-color:#6f5aa0;color:#cdb8e6;box-shadow:inset 0 0 10px #e094fc22,0 0 14px #e094fc33}

/* Night: the big white type carries a quiet lavender gradient. */
html.ag body[data-theme=night] :is(.section-heading h2,.numbers-heading h2,.contact-copy h2,.manifesto-center h2,.abc-detail-copy h2,.marquee-copy h2,#agStatValue,#agStatTitle){background:linear-gradient(170deg,#ffffff 0%,#fbefff 45%,#dcb4f7 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:#fff7fc}
html.ag body[data-theme=night] :is(.section-heading h2,.numbers-heading h2,.contact-copy h2,.manifesto-center h2,.marquee-copy h2) em{-webkit-text-fill-color:transparent!important;background:none!important}
html.ag body[data-theme=night] #agStatValue span{-webkit-text-fill-color:var(--ag-violet)!important}

/* Night: shooting stars. */
html.ag .ag-meteor{position:absolute;width:var(--len,140px);height:2px;border-radius:2px;background:linear-gradient(90deg,#fff0,#f3dcff 70%,#fff);rotate:-32deg;transform-origin:right center;filter:drop-shadow(0 0 4px #f0d0ff);animation:ag-meteor 1.3s cubic-bezier(.3,.1,.4,1) forwards;pointer-events:none}
@keyframes ag-meteor{0%{opacity:0;translate:0 0;scale:.3 1}15%{opacity:1}100%{opacity:0;translate:-260px 165px;scale:1 1}}

/* Night form fields: light and clear, not dark purple. */
html.ag body[data-theme=night] .inquiry-form :is(input:not([type=checkbox]),select,textarea){background:#eef1fb!important;color:#24202c!important;border-color:#c7b2e6!important}
html.ag body[data-theme=night] .inquiry-form :is(input,textarea)::placeholder{color:#7d7392}
html.ag body[data-theme=night] .inquiry-form select option{color:#24202c;background:#fff}
/* The thick gallery mats came from inherited image padding (25px × 20px); remove it. */
html.ag body #projectList .shortlist-art>img,html.ag body #projectList .shortlist-art>video{padding:0!important}
html.ag body[data-theme=night] .machine-bottom .machine-counters b{color:#f3c9ff!important;text-shadow:0 0 12px #e094fc88}
html.ag body[data-theme=night] .machine-bottom .machine-counters>span:nth-child(2) b{color:#bfeeff!important;text-shadow:0 0 12px #6fe7ff66}
html.ag body[data-theme=night] .reel-frame{border-color:#b9a6dc!important;box-shadow:0 0 0 1px #ffffff22,0 0 24px #e094fc33}
/* Give gradient-filled headings room for descenders and italic overhang. */
html.ag body[data-theme=night] :is(.section-heading h2,.numbers-heading h2,.contact-copy h2,.manifesto-center h2,.abc-detail-copy h2,.marquee-copy h2){padding-bottom:.14em!important;margin-bottom:-.14em!important;padding-right:.08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
html.ag body[data-theme=night] .contact-copy h2{margin-bottom:0!important}

/* ═════════ round 4 ═════════ */
/* Gallery: one mat ratio for every card (Popeyes), set per card from its artwork. */
html.ag body #projectList .shortlist-art.is-framed{padding:var(--pad)!important;background:var(--mat,transparent);overflow:hidden}
html.ag body #projectList .art-crop{position:relative;display:block;width:100%;height:100%;overflow:hidden}
html.ag body #projectList .art-crop>img,html.ag body #projectList .art-crop>video{display:block;width:100%;height:100%;max-width:none;object-fit:contain;padding:0!important;border-radius:0;filter:none}
html.ag body #projectList .is-trimmed .art-crop>img{position:absolute;width:calc(100% / var(--tw))!important;height:calc(100% / var(--th))!important;left:calc(var(--tx) / var(--tw) * -100%);top:calc(var(--ty) / var(--th) * -100%);object-fit:fill!important}

/* No little plus-sign stars in the background. */
html.ag .night-sky i:before,html.ag .night-sky i:after,html.ag .star-field i:before,html.ag .star-field i:after{display:none!important;content:none!important}
/* Numbers: a chart grid behind the stars. */
html.ag .ag-grid path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
html.ag body[data-theme=day] .ag-grid path{stroke:#5d4c7c;opacity:.13}
html.ag body[data-theme=night] .ag-grid path{stroke:#e9dcff;opacity:.1}
html.ag body .ag-grid .ag-grid-axis{opacity:.26;stroke-dasharray:2 5}
html.ag .ag-sky-label{position:absolute;left:0;top:-4px;z-index:2;font:italic 400 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.01em;padding:6px 12px;border-radius:999px;border:1px solid currentColor;opacity:.72}
html.ag body[data-theme=day] .ag-sky-label{color:#4b3a68;background:#ffffff99}
html.ag body[data-theme=night] .ag-sky-label{color:#eadcff;background:#ffffff0a}
/* Day stars: a touch larger, with a fine ink edge so they read against the pale sky. */
html.ag body[data-theme=day] .ag-st-body path{stroke:#6a3a93;stroke-width:.9;stroke-opacity:.55}
html.ag body[data-theme=day] .ag-st-body{transform:scale(calc(var(--s) * 1.28))}
html.ag.ag-motion body[data-theme=day] .ag-sky-stats:not(.is-lit) .ag-st-body{transform:scale(0)}
html.ag body[data-theme=day] .ag-st-body{filter:drop-shadow(0 2px 4px #5b3a8a66) drop-shadow(0 0 6px #ffffffcc)}
@media(max-width:900px){html.ag .ag-sky-label{font-size:11px;top:-10px}}
/* Hero description stays on one line on laptop and up. */
@media(min-width:900px){html.ag body .abc-detail-copy p{white-space:nowrap!important;max-width:none}}