/* ==========================================================================
   AFTER HOURS: homepage-only styles (index.html). Loads after theme.css.
   Everything shared (bands, edges, ticket, tags, ledger, wall, frame, lamp,
   booking band, closing band, footer) lives in theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO: brick wall after close, the logo in neon, the flashlight
   -------------------------------------------------------------------------- */
.ah-hero {
  position: relative; isolation: isolate;
  min-height: min(800px, calc(100svh - var(--header-h) - 44px));
  padding: clamp(28px, 4.5vw, 64px) 0 clamp(92px, 9vw, 128px);
  display: flex; align-items: center;
  background-color: #090c17;
  background-image:
    radial-gradient(120% 95% at 72% 46%, rgba(3, 6, 13, 0) 30%, rgba(3, 6, 13, 0.62) 78%, rgba(3, 6, 13, 0.85) 100%),
    linear-gradient(180deg, rgba(3, 6, 13, 0.7), rgba(3, 6, 13, 0) 22%),
    var(--ah-grain),
    var(--ah-brick-dim);
  background-size: auto, auto, 160px 160px, 120px 44px;
}
.ah-hero__wall { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ah-hero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@media (min-width: 1000px) {
  .ah-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 2.6vw, 48px); }
}
.ah-hero__copy { max-width: 690px; }
/* props on the wall: dim at rest, revealed by the flashlight */
.ah-props { position: absolute; inset: 0; }
.ah-prop { position: absolute; display: block; overflow: visible; }
.ah-prop--guitar { left: max(6px, calc((100% - 1200px) / 2 - 150px)); top: 14%; width: clamp(84px, 7.2vw, 118px); height: auto; aspect-ratio: 120 / 360; rotate: -6deg; }
.ah-prop--clock { left: 46%; top: 4%; width: clamp(54px, 4.6vw, 76px); height: auto; aspect-ratio: 1; }
.ah-props--dim {
  --p-ink: #05080f; --p-wood: #141826; --p-wood2: #121624; --p-body: #161a2a; --p-shine: #1b2033; --p-hole: #06090f;
  --p-str: #20263a; --p-metal: #1e2436; --p-tag: #1d2132;
  --p-rim: #141826; --p-face: #1a1e2e; --p-hand: #2a2f44;
}
.ah-props--lit {
  --p-ink: #0b1424; --p-wood: #6b3a1c; --p-wood2: #8a4f25; --p-body: #d99a4e; --p-shine: #f4c27c; --p-hole: #24130a;
  --p-str: #efe7d4; --p-metal: #c9cfd8; --p-tag: #f6efdd;
  --p-rim: #20283b; --p-face: #f6efdd; --p-hand: #ff3f86;
}
@media (max-width: 1429px) { .ah-prop--guitar { display: none; } }
@media (max-width: 999px) { .ah-prop--guitar, .ah-prop--clock { display: none; } }

/* headline (the accent line is .ah-h1__accent; its colors live in theme.css) */
.ah-h1 { margin-bottom: 26px; color: var(--ah-paper); text-shadow: 0.035em 0.035em 0 var(--ah-950); }
.ah-h1__line { display: block; text-wrap: balance; }
.ah-h1__accent { display: block; margin-top: 0.12em; }

.ah-hero__lead { max-width: 30em; margin-bottom: 32px; color: #c9d5e4; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem); }

/* ---- the orbit: Trimble's port of Jeff's logo orbit, rebuilt as neon ---- */
.ah-orbit { position: relative; }
.ah-orbit__stage {
  position: relative; width: min(100%, 600px); aspect-ratio: 1; margin-inline: auto;
  container-type: inline-size;
  translate: var(--lean-x, 0) var(--lean-y, 0); transition: translate 0.3s ease-out;
  --d: clamp(54px, 15.5cqi, 92px);
  --r-in: 30.5cqi; --r-out: 41cqi;
}
/* the light the sign throws on the bricks, printed as dots (no blob) */
.ah-orbit__spot {
  position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(47, 155, 255, 0.62) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}
.ah-orbit__halo { position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none; }
.ah-orbit__halo--out { background: radial-gradient(circle closest-side, transparent calc(82% - 5cqi), rgba(47, 155, 255, 0.2) 82%, transparent calc(82% + 5cqi)); }
.ah-orbit__halo--in { background: radial-gradient(circle closest-side, transparent calc(61% - 4cqi), rgba(255, 191, 58, 0.16) 61%, transparent calc(61% + 4cqi)); }

.ah-ring { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ah-ring__tube { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ah-ring__tube circle { fill: none; stroke-linecap: round; }
.ah-ring .t-glow { stroke-width: 2.8; opacity: 0.3; }
.ah-ring .t-tube { stroke-width: 1.15; }
.ah-ring .t-core { stroke-width: 0.42; }
.ah-ring--out .t-glow, .ah-ring--out .t-tube { stroke: var(--ah-neon-blue); }
.ah-ring--out .t-core { stroke: var(--ah-neon-blue-core); }
.ah-ring--in .t-glow, .ah-ring--in .t-tube { stroke: var(--ah-neon-gold); }
.ah-ring--in .t-core { stroke: var(--ah-neon-gold-core); }
.ah-ring .t-hw rect { fill: #131a29; stroke: var(--ah-950); stroke-width: 0.35; }
.ah-ring .t-hw circle { fill: none; stroke: rgba(238, 244, 251, 0.55); stroke-width: 0.3; }
.ah-ring__list { margin: 0; padding: 0; list-style: none; }

.ah-sat { --h: var(--d); position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r-out)) rotate(calc(var(--a) * -1)); }
.ah-sat__up, .ah-sat__pop { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ah-sat__disc {
  position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d);
  display: grid; place-items: center;
  border: 2px solid var(--ah-950); border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fffdf6 0 36%, #f4e9cd 70%, #e2d0a6 100%);
  box-shadow: inset 0 0 0 3px #fbf5e6, inset 0 0 0 5.5px var(--sat-tube, var(--ah-neon-sky)), 3px 3px 0 var(--ah-blue), 0 0 22px rgba(47, 155, 255, 0.45);
  pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity 0.45s var(--ease-out), filter 0.45s var(--ease-out), scale 0.25s var(--ease-back);
}
.ah-sat[data-sat="1"] .ah-sat__disc { --sat-tube: #ffc96a; box-shadow: inset 0 0 0 3px #fbf5e6, inset 0 0 0 5.5px #ffc96a, 3px 3px 0 var(--ah-blue), 0 0 22px rgba(255, 191, 58, 0.4); }
.ah-sat__disc img { width: 70%; height: 70%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.ah-sat__disc.is-squish { animation: ah-squish 0.6s var(--ease-back); }
@keyframes ah-squish { 30% { scale: 1.16 0.86; } 60% { scale: 0.94 1.07; } }
.ah-sat__tag {
  position: absolute; left: 0; top: calc(var(--h) / 2 + 7px); translate: -50% 0;
  display: grid; justify-items: center; gap: 3px;
  padding: 5px 9px 4px; border: 1.5px solid var(--ah-950); border-radius: 5px;
  background: var(--ah-cream); color: var(--ah-ink); text-align: center; white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ah-950);
  transition: opacity 0.45s var(--ease-out);
}
.ah-sat__tag b { font: 800 clamp(0.66rem, 2.3cqi, 0.82rem)/1 var(--ah-body); letter-spacing: 0.14em; text-transform: uppercase; }
.ah-sat__tag span { font: 700 clamp(0.74rem, 2.5cqi, 0.92rem)/1 var(--ah-body); color: var(--ah-blue-ink); }
/* the two jobs drawn as service objects: the ad on a phone, the Google review card */
.ah-sat--phone { --h: calc(var(--d) * 1.3); --w: calc(var(--d) * 0.894); }
.ah-sat--card { --w: calc(var(--d) * 1.46); --h: calc(var(--d) * 1.076); }
.ah-sat__obj {
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h); max-width: none;
  display: block; overflow: visible; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(3px 3px 0 var(--ah-blue)) drop-shadow(0 0 12px rgba(47, 155, 255, 0.45));
  transition: opacity 0.45s var(--ease-out), filter 0.45s var(--ease-out), scale 0.25s var(--ease-back);
}
.ah-sat--card .ah-sat__obj { rotate: -4deg; }
.ah-sat__obj.is-squish { animation: ah-squish 0.6s var(--ease-back); }
.ah-sat__spark { position: absolute; left: calc(var(--d) * 0.22); top: calc(var(--d) * -0.95); width: calc(var(--d) * 0.42); height: calc(var(--d) * 0.42); fill: var(--ah-gold); pointer-events: none; scale: 0; }
.ah-orbit:is([data-light="ready"], [data-light="running"]) .ah-sat:not(.is-on) :is(.ah-sat__disc, .ah-sat__obj) { opacity: 0.38; filter: grayscale(1) brightness(0.55); }
.ah-orbit:is([data-light="ready"], [data-light="running"]) .ah-sat:not(.is-on) .ah-sat__tag { opacity: 0.55; }

.ah-hub { position: absolute; z-index: 3; left: 50%; top: 50%; width: 57cqi; translate: -50% -50%; }
.ah-sign { display: block; width: 100%; height: auto; overflow: visible; transition: scale 0.3s var(--ease-back); }
.ah-hub:has(.ah-hub__btn:hover) .ah-sign { scale: 1.03; }
.ah-hub:has(.ah-hub__btn:active) .ah-sign { scale: 0.97; }
.ah-hub__btn { position: absolute; inset: 6% 8%; padding: 0; border: 0; border-radius: 40%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ah-hub__btn:focus-visible { outline-offset: 6px; }
.ah-hub__pulse { position: absolute; left: 50%; top: 50%; width: 112%; aspect-ratio: 1; border: 2px solid var(--ah-neon-sky); border-radius: 50%; translate: -50% -50%; scale: 0; opacity: 0; pointer-events: none; }
.ah-orbit.is-pulse .ah-hub__pulse { animation: ah-pulse 0.85s ease-out; }
@keyframes ah-pulse { 0% { scale: 0.6; opacity: 1; } 100% { scale: 1.5; opacity: 0; } }

/* the sign itself */
.sg-shadow { fill: rgba(0, 0, 0, 0.6); stroke: rgba(0, 0, 0, 0.6); stroke-width: 30; stroke-linejoin: round; }
.sg-rim { fill: rgba(173, 229, 255, 0.28); stroke: rgba(173, 229, 255, 0.28); stroke-width: 33.5; stroke-linejoin: round; }
.sg-plate { fill: #060a14; stroke: #060a14; stroke-width: 30; stroke-linejoin: round; }
.sg-sheen { fill: url(#ahSheen); stroke: url(#ahSheen); stroke-width: 30; stroke-linejoin: round; }
.sg-bolts circle { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 1.6; }
.sg-bolts .b-in { fill: var(--ah-brass-lo); stroke: none; }
.sg-glass { fill: none; stroke: rgba(226, 238, 255, 0.16); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.sg-glass circle { fill: rgba(255, 255, 255, 0.1); stroke: none; }
.sg-lit use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sg-lit--l .sg-halo { stroke: var(--ah-blue); stroke-width: 16; opacity: 0.85; }
.sg-lit--l .sg-tube { stroke: var(--ah-neon-blue); stroke-width: 6.6; }
.sg-lit--l .sg-core { stroke: var(--ah-neon-blue-core); stroke-width: 2.4; }
.sg-lit--r .sg-halo { stroke: #5cc3ff; stroke-width: 16; opacity: 0.7; }
.sg-lit--r .sg-tube { stroke: var(--ah-neon-sky); stroke-width: 6.6; }
.sg-lit--r .sg-core { stroke: #ffffff; stroke-width: 2.4; }
.sg-dot .d-halo { fill: #d8efff; opacity: 0.85; }
.sg-dot .d-core { fill: #ffffff; }
.sg-hw > circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 1.6; }
.sg-clip circle { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; }

@media (prefers-reduced-motion: no-preference) {
  .sg-lit--l { animation: ah-ignite 1.15s 0.2s both; }
  .sg-lit--r { animation: ah-ignite 1.15s 0.42s both; }
  .sg-dot { animation: ah-dot 0.45s both; animation-delay: calc(1.1s + var(--i) * 0.12s); transform-box: fill-box; transform-origin: center; }
  .ah-ring .t-lit { animation: ah-ignite2 1s 0.6s both; }
  .ah-ring--out .t-lit { animation-delay: 0.78s; }
  .ah-orbit.is-relight .sg-lit--l, .ah-orbit.is-relight .sg-lit--r { animation-name: ah-relight; }
  .ah-orbit.is-relight .sg-dot { animation-name: ah-dot-b; }
  .ah-orbit.is-relight .ah-ring .t-lit { animation-name: ah-relight; }
  /* the only loop on the page; it needs the pause button, so it runs only with JS */
  html.js .ah-ring { animation: ah-spin 80s linear infinite; }
  html.js .ah-ring--out { animation-duration: 120s; animation-direction: reverse; }
  html.js .ah-ring--out .ah-sat__up { animation: ah-spin 120s linear infinite; }
  /* must outrank the "html.js .ah-ring--out .ah-sat__up" shorthand above (0,3,1), or the stickers keep
     counter-spinning while the rings are paused (off screen or the pause button) and end up upside down */
  html.js .ah-orbit[data-spin="off"] .ah-ring, html.js .ah-orbit[data-spin="off"] .ah-sat__up { animation-play-state: paused; }
  .ah-orbit[data-light="running"] .ah-sat.is-on .ah-sat__pop { animation: ah-sat-pop 0.62s var(--ease-back); }
  .ah-orbit[data-light="running"] .ah-sat.is-on .ah-sat__spark { animation: ah-sat-spark 0.8s ease-out; }
}
.ah-orbit.is-off .sg-lit, .ah-orbit.is-off .sg-dots, .ah-orbit.is-off .ah-ring .t-lit { opacity: 0.06; }
@keyframes ah-spin { to { transform: rotate(360deg); } }
@keyframes ah-ignite { 0% { opacity: 0; } 9% { opacity: 0.9; } 12% { opacity: 0.08; } 20% { opacity: 1; } 23% { opacity: 0.25; } 31% { opacity: 1; } 58% { opacity: 0.82; } 62%, 100% { opacity: 1; } }
@keyframes ah-ignite2 { 0% { opacity: 0; } 14% { opacity: 1; } 18% { opacity: 0.12; } 28% { opacity: 1; } 32% { opacity: 0.35; } 40%, 100% { opacity: 1; } }
@keyframes ah-relight { 0% { opacity: 1; } 8% { opacity: 0.05; } 30% { opacity: 0.05; } 38% { opacity: 1; } 42% { opacity: 0.2; } 52%, 100% { opacity: 1; } }
@keyframes ah-dot { from { opacity: 0; transform: translateY(6px) scale(0.4); } }
@keyframes ah-dot-b { from { opacity: 0; transform: translateY(6px) scale(0.4); } }
@keyframes ah-sat-pop { 0% { scale: 0.7; } 55% { scale: 1.18; } 100% { scale: 1; } }
@keyframes ah-sat-spark { 0% { scale: 0.2; rotate: 0deg; } 30% { scale: 1.15; rotate: 30deg; } 100% { scale: 0; rotate: 90deg; } }

/* the LED that counts the lit jobs, hung under the sign on two chains */
.ah-orbit__meter {
  position: absolute; z-index: 4; left: 50%; top: 70.5%; translate: -50% 0; margin: 0;
  display: flex; align-items: center; gap: 7px; padding: 4px 4px 4px 9px;
  border: 2px solid var(--ah-950); border-radius: 6px; background: #11151d;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6), inset 0 -2px 0 rgba(255, 255, 255, 0.07);
  white-space: nowrap; pointer-events: none;
}
.ah-orbit__meter::before, .ah-orbit__meter::after { content: ""; position: absolute; bottom: calc(100% + 2px); width: 2px; height: 3.4cqi; background: repeating-linear-gradient(180deg, #9aa7b8 0 2px, transparent 2px 4px); }
.ah-orbit__meter::before { left: 14px; }
.ah-orbit__meter::after { right: 14px; }
.ah-orbit__meter-t { font: 700 0.68rem/1 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #e8edf3; }
.ah-orbit__meter .ah-led { min-width: 1.7ch; padding: 3px 7px 2px; font-size: 1.15rem; }
/* the line under the orbit: what the four jobs add up to */
.ah-orbit__line { max-width: 22em; margin: clamp(34px, 4vw, 46px) auto 0; text-align: center; font: 900 clamp(1.3rem, 1rem + 1vw, 1.7rem)/1.1 var(--ah-display); letter-spacing: 0.02em; color: var(--ah-paper); text-shadow: 0.05em 0.05em 0 var(--ah-950); text-wrap: balance; }
.ah-orbit__line span { color: var(--ah-sky); }

/* three balls in gold neon, hung from an iron bracket in the stage's free corner. They hang behind the rings, so a job
   passing the corner (the Google review card climbs toward it as the ring turns) rides in front instead of under them. */
.ah-balls { position: absolute; z-index: 1; right: 0; top: -2%; width: 22cqi; height: auto; overflow: visible; pointer-events: none; }
.ah-balls path, .ah-balls circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ah-balls .bl-iron path { stroke: #46526e; stroke-width: 4.2; filter: drop-shadow(1.5px 0 0 var(--ah-950)) drop-shadow(-1.5px 0 0 var(--ah-950)) drop-shadow(0 1.5px 0 var(--ah-950)) drop-shadow(0 -1.5px 0 var(--ah-950)); }
.ah-balls .bl-plate { fill: #2d3647; stroke: var(--ah-950); stroke-width: 2; }
.ah-balls .bl-glass circle { fill: rgba(255, 191, 58, 0.06); stroke: rgba(255, 238, 200, 0.18); stroke-width: 5; }
.ah-balls .bl-glow circle { stroke: var(--ah-neon-gold); stroke-width: 9; opacity: 0.26; }
.ah-balls .bl-tube circle { fill: url(#ahBallFill); stroke: var(--ah-neon-gold); stroke-width: 4.4; }
.ah-balls .bl-core circle { stroke: var(--ah-neon-gold-core); stroke-width: 1.6; }
.ah-balls .bl-shine path { stroke: #fffaf0; stroke-width: 2.2; opacity: 0.85; }
.ah-balls .bl-hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .ah-balls .bl-lit { animation: ah-ignite2 1s 1s both; }
  .ah-orbit.is-relight .ah-balls .bl-lit { animation-name: ah-relight; animation-delay: 0.2s; }
}
.ah-orbit.is-off .ah-balls .bl-lit { opacity: 0.08; }

.ah-orbit__note { position: absolute; z-index: 5; left: 1%; top: 3%; }
/* the arrow bends down toward the sign, not across to the ad phone that rests beside the note */
.ah-orbit__note .ah-hand__arrow { margin-top: 12px; transform-origin: 4px 6px; rotate: 38deg; }
/* on a phone the ad phone sits closer, so the arrow drops nearly straight down to the sign */
@media (max-width: 479px) {
  .ah-orbit__note .ah-hand__arrow { rotate: 66deg; }
  /* the ad phone rests a little right of top on a phone, so "tap the sign" never lands on it */
  .ah-sat--phone { --a: -80deg !important; }
}
.ah-orbit__pause { position: absolute; z-index: 5; left: 1%; bottom: 3%; }

/* the results ticker opens on "300+ shops" (each copy of the list gets the same lead-in, so the loop never jumps) */
@media (prefers-reduced-motion: no-preference) {
  html.js #ahTicker .ah-ticker__group { padding-left: 64px; }
  html.js #ahTicker .ah-ticker__track { animation-delay: 2s; }
}

/* --------------------------------------------------------------------------
   3. THE STIGMA: the sidewalk out front
   -------------------------------------------------------------------------- */
.ah-stigma { --deco-at: 0 100%; --deco-size: 40% 60%; background-color: var(--ah-800); padding-top: calc(var(--pad-y) + 30px); padding-bottom: calc(var(--pad-y) + 30px); }
.ah-stigma__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 980px) { .ah-stigma__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 72px); } }
.ah-stigma__copy .ah-h2 { margin-bottom: 24px; }
.ah-count { color: var(--ah-blue); text-shadow: 0.05em 0.05em 0 var(--ah-950); font-variant-numeric: tabular-nums; }
.ah-stigma__copy p { max-width: 32em; color: var(--ah-fog); font-size: 1.125rem; }
.ah-stigma__copy p + p { margin-top: 14px; }
.ah-stigma__lead { color: var(--ah-paper) !important; font-weight: 700; font-size: 1.3rem !important; }
.ah-quote { quotes: "\201C" "\201D"; color: var(--ah-paper); font-weight: 600; }
.ah-street { position: relative; margin: 0; }
.ah-street__art { position: relative; }
.ah-street__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ah-street__cap { margin-top: 18px; color: var(--ah-paper); font-weight: 700; font-size: 1.08rem; }
@media (max-width: 640px) { .ah-street__art { margin-inline: calc(var(--gut) * -1); } .ah-street__note { display: none; } }
.ah-street__note { position: absolute; left: 47%; top: 31%; }
.ah-street__note .ah-hand__arrow { margin-top: 14px; }
.pp path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pp-rim path { stroke: rgba(173, 229, 255, 0.55); }
.pp-rim circle { fill: rgba(173, 229, 255, 0.55); }
.pp-body path { stroke: #0c1327; }
.pp-body circle { fill: #0c1327; }
.pp-acc .pa { fill: #0c1327; stroke: rgba(173, 229, 255, 0.55); stroke-width: 1.7; stroke-linejoin: round; }
.pp-acc .pd { fill: none; stroke: rgba(173, 229, 255, 0.55); stroke-width: 1.4; }
.pp--lit .pp-rim path { stroke: var(--ah-950); }
.pp--lit .pp-rim circle { fill: var(--ah-950); }
.pp--lit .pp-body path:nth-child(1) { stroke: #2a4374; }
.pp--lit .pp-body path:nth-child(2), .pp--lit .pp-body path:nth-child(3) { stroke: var(--ah-blue); }
.pp--lit .pp-body circle { fill: var(--ah-cream); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-street:not(.is-play) .ah-street__lit { opacity: 0.18; }
  html.motion .ah-street:not(.is-play) .ah-street__spill { opacity: 0; }
  .ah-street.is-play .ah-street__lit { animation: ah-ignite 1.1s 0.35s both; }
  .ah-street.is-play .ah-street__spill { animation: ah-ignite2 1.1s 0.2s both; }
}

/* --------------------------------------------------------------------------
   4. THREE WAYS: a pawn ticket taped to the case glass
   -------------------------------------------------------------------------- */
.ah-three { background-color: var(--ah-900); padding-bottom: calc(var(--pad-y) + 28px); }
.ah-three__h { max-width: 14em; margin: 0 auto clamp(30px, 4vw, 52px); text-align: center; }

/* --------------------------------------------------------------------------
   5. THE MACHINE: the gearbox
   -------------------------------------------------------------------------- */
.ah-machine { --deco-at: 100% 0; background-color: var(--ah-850); }
.ah-machine__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 980px) { .ah-machine__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); } }
.ah-machine__copy .ah-h2 { margin-bottom: 20px; }
.ah-machine__copy .ah-lead + .ah-lead { margin-top: 10px; }
.ah-gearbox { position: relative; margin: 0; }
.ah-gearbox__art { position: relative; width: min(100%, 600px); margin-inline: auto; container-type: inline-size; }
.ah-gearbox__svg { display: block; width: 100%; height: auto; overflow: visible; }
.gb-bolt circle { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 3; }
.gb-bolt-x path { stroke: var(--ah-brass-lo); stroke-width: 3; stroke-linecap: round; }
.g-shadow { fill: rgba(0, 0, 0, 0.55); }
.g-ringgear { fill: #7d8a9d; stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.gb-window { stroke: #b9c3d0; }
.g-planet { fill: #c4ceda; stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.g-web { fill: #9aa7b8; stroke: var(--ah-950); stroke-width: 2.4; }
.g-web2 { fill: #5d6a7d; stroke: var(--ah-950); stroke-width: 2; }
.g-sungear { fill: var(--ah-blue); stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.g-sunweb { fill: var(--ah-blue-deep); stroke: var(--ah-950); stroke-width: 2.6; }
.g-spoke { stroke: rgba(3, 6, 13, 0.4); stroke-width: 6; }
.g-spin, .g-crank { transform-box: fill-box; transform-origin: center; }
.ah-gearbox__hub {
  position: absolute; left: 49.33%; top: 50%; translate: -50% -50%; width: 17.6cqi; height: 17.6cqi; padding: 0 1.4cqi;
  display: grid; place-content: center; text-align: center;
  border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); color: var(--ah-ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.ah-gearbox__hub b { display: block; font: 900 clamp(0.9rem, 3.5cqi, 1.4rem)/0.92 var(--ah-display); text-transform: uppercase; letter-spacing: 0.02em; }
.ah-gearbox__hub span { display: block; margin-top: 3px; font: 800 clamp(0.52rem, 1.75cqi, 0.7rem)/1.05 var(--ah-body); letter-spacing: 0.02em; color: var(--ah-ink-2); text-transform: uppercase; }
/* each step on its own gear: a small object on the axle cap, the step's words under it (from 600px up).
   On phones the gears keep only the objects and the steel-plate legend reads the steps, objects instead of numbers. */
.ah-gl-set { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ah-gl { --cap: 12cqi; position: absolute; left: var(--x); top: var(--y); translate: -50% calc(var(--cap) / -2); display: grid; justify-items: center; width: 21cqi; }
.ah-gl__cap { display: grid; place-items: center; width: var(--cap); aspect-ratio: 1; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px #fffaf0; transition: background-color 0.3s, box-shadow 0.3s; }
.ah-gl__cap svg { width: 76%; height: 76%; overflow: visible; }
.ah-gl__t { display: none; }
.ah-gl.is-at .ah-gl__cap { background: var(--ah-sky); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55), 0 0 0 3px var(--ah-neon-sky); }
.ah-loop__obj { background: var(--ah-cream); }
.ah-loop__obj svg { width: 28px; height: 28px; overflow: visible; }
@media (min-width: 600px) {
  .ah-gl { --cap: 10cqi; }
  .ah-gl__t {
    display: block; margin-top: -0.7cqi; padding: 0.55cqi 1.1cqi 0.45cqi;
    border: 1.5px solid var(--ah-950); border-radius: 3px; background: #11151d; color: #e8edf3;
    font: 800 clamp(11.5px, 2.15cqi, 13.5px)/1.04 var(--ah-display); letter-spacing: 0.05em; text-transform: uppercase; text-align: center; text-wrap: balance;
    box-shadow: 2px 2px 0 var(--ah-blue); transition: background-color 0.3s, color 0.3s;
  }
  .ah-gl.is-at .ah-gl__t { background: var(--ah-sky); color: var(--ah-ink); }
  /* the words now sit on the gears: the legend stays for screen readers only */
  .ah-machine .ah-loopwrap { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* the lit customer from the street scene, standing on the ring above "Ads bring new faces". The crank walks them
   around the rim (feet on the ring, head out, like a little planet), so they never cover a gear's words. */
.ah-ride { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform-origin: 49.33% 50%; }
.ah-ride__who { position: absolute; left: 49.33%; top: 18.4%; width: 4.2cqi; height: 12.6cqi; translate: -50% -100%; transform-origin: 50% 100%; }
.ah-ride__who svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ah-crank { position: absolute; right: -3.2cqi; top: 50%; width: 15cqi; height: 15cqi; min-width: 48px; min-height: 48px; translate: 0 -50%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ah-crank::before { content: ""; position: absolute; left: 4%; top: 36%; width: 30%; height: 30%; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 55%, #5d6a7d); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); z-index: 2; }
.ah-crank__arm { position: absolute; left: 18%; top: 45%; width: 62%; height: 12%; border: 2px solid var(--ah-950); border-radius: 6px; background: linear-gradient(180deg, #cfd7e1, #7d8a9d); transform-origin: 3% 50%; rotate: -58deg; transition: rotate 0.3s var(--ease-back); z-index: 1; }
.ah-crank__arm::after { content: ""; position: absolute; right: -10%; top: 50%; width: 46%; aspect-ratio: 1; translate: 0 -50%; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8bb5, var(--ah-neon-pink) 60%, #c21f5f); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.ah-crank__knob { display: none; }
.ah-crank:hover .ah-crank__arm { rotate: -72deg; }
.ah-crank:focus-visible { outline-offset: 2px; border-radius: 50%; }
.ah-gearbox__note { position: absolute; right: -2cqi; top: 26%; rotate: 6deg; flex-direction: row-reverse; text-align: right; }
.ah-gearbox__note .ah-hand__arrow { transform: scaleX(-1) rotate(-10deg); margin-top: 18px; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ah-gearbox { view-timeline: --ah-gears block; }
    .g-sun { animation: ah-gsun linear both; animation-timeline: --ah-gears; animation-range: cover 0% cover 100%; }
    .g-pl { animation: ah-gpl linear both; animation-timeline: --ah-gears; animation-range: cover 0% cover 100%; }
    .g-ring { animation: ah-gring linear both; animation-timeline: --ah-gears; animation-range: cover 0% cover 100%; }
  }
  @supports not (animation-timeline: view()) {
    .ah-gearbox.is-play .g-sun { animation: ah-gsun 2.8s var(--ease-out) both; }
    .ah-gearbox.is-play .g-pl { animation: ah-gpl 2.8s var(--ease-out) both; }
    .ah-gearbox.is-play .g-ring { animation: ah-gring 2.8s var(--ease-out) both; }
  }
  .ah-gearbox.is-crank .g-sun-c { animation: ah-gsun 4.6s var(--ease-out); }
  .ah-gearbox.is-crank .g-pl-c { animation: ah-gpl 4.6s var(--ease-out); }
  .ah-gearbox.is-crank .g-ring-c { animation: ah-gring 4.6s var(--ease-out); }
  .ah-gearbox.is-crank .ah-crank__arm { animation: ah-crankarm 4.6s var(--ease-out); }
  .ah-gearbox.is-ride .ah-ride { animation: ah-ride 4.6s ease-in-out both; }
}
@keyframes ah-gsun { from { transform: rotate(0deg); } to { transform: rotate(240deg); } }
@keyframes ah-gpl { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes ah-gring { from { transform: rotate(0deg); } to { transform: rotate(-102.857deg); } }
@keyframes ah-crankarm { from { rotate: -58deg; } to { rotate: 1022deg; } }
@keyframes ah-ride { 0% { rotate: 0deg; } 15%, 20% { rotate: 72deg; } 35%, 40% { rotate: 144deg; } 55%, 60% { rotate: 216deg; } 75%, 80% { rotate: 288deg; } 100% { rotate: 360deg; } }
@media (max-width: 520px) { .ah-gearbox__note { display: none; } }

/* --------------------------------------------------------------------------
   6. EVERY GEAR: the lit display case + the case inventory
   -------------------------------------------------------------------------- */
.ah-services { background-color: var(--ah-900); padding-bottom: calc(var(--pad-y) + 34px); }
.ah-services::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px; pointer-events: none; background-color: var(--ah-900); background-image: var(--ah-grain); -webkit-mask: var(--ah-zigzag) 0 0 / 24px 12px repeat-x; mask: var(--ah-zigzag) 0 0 / 24px 12px repeat-x; }
.ah-services__h { max-width: 15em; margin-bottom: clamp(32px, 4vw, 56px); }
.ah-svc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.ah-svc__case { position: relative; }
@media (min-width: 1000px) {
  .ah-svc { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 4vw, 64px); }
}
/* the case rides along beside the inventory, but only when the whole case fits under the header
   (without JS: from 960px tall; with JS, home.js measures it and sets --case-top, or .is-tall when it can't fit) */
@media (min-width: 1000px) and (min-height: 960px) {
  .ah-svc__case { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 1000px) {
  html.js .ah-svc__case[style*="--case-top"] { position: sticky; top: var(--case-top); }
  html.js .ah-svc__case.is-tall { position: relative; top: auto; }
}
.ah-case {
  position: relative; margin: 0; padding: 14px 14px 0;
  border: 2px solid var(--ah-950); border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, #cfd7e1, #8a97aa 40%, #b9c3d0);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}
.ah-case__light { position: relative; height: 30px; margin: 0 0 0; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #20283a, #121a2b); }
.ah-case__tube { position: absolute; left: 7%; right: 7%; top: 9px; height: 10px; border: 1.5px solid var(--ah-950); border-radius: 6px; background: linear-gradient(180deg, #ffffff, #e6f4ff 50%, #b9dfff); box-shadow: 0 0 14px 2px rgba(200, 232, 255, 0.75); }
.ah-case__shelf {
  position: relative; padding: 26px 16px 30px; border-inline: 2px solid var(--ah-950);
  background:
    radial-gradient(circle, rgba(220, 240, 255, 0.4) 1.2px, transparent 1.6px) 0 0 / 8px 8px,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #22386a, #172a52 60%, #10203f);
  background-blend-mode: normal;
}
.ah-case__shelf::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3, 6, 13, 0) 0, rgba(3, 6, 13, 0.55) 100%); }
.ah-case__shelf--1 { background-size: 8px 8px, auto, auto; }
.ah-case__shelf + .ah-case__shelf { border-top: 0; }
.ah-case__shelf::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 14px;
  border: 2px solid var(--ah-950);
  background: linear-gradient(180deg, rgba(220, 240, 255, 0.75), rgba(173, 229, 255, 0.35) 40%, rgba(120, 170, 220, 0.5));
}
.ah-case__shelf .ah-case__shelf-dots { display: none; }
.ah-case__items { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; align-items: end; }
.ah-case__shelf--1 .ah-case__items { padding-bottom: 2px; background: linear-gradient(rgba(220, 240, 255, 0.5), rgba(120, 170, 220, 0.4)) 0 calc(50% + 2px) / 100% 6px no-repeat; }
.ah-case__shelf--3 .ah-case__items { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 66%; margin-inline: auto; }
.ah-case__plate {
  position: absolute; z-index: 2; left: 14px; bottom: -6px; padding: 3px 9px 2px;
  border: 1.5px solid var(--ah-950); border-radius: 3px;
  background: linear-gradient(180deg, #ffe7a8, #d9a637); color: var(--ah-ink);
  font: 900 0.8rem/1 var(--ah-display); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.ah-item { position: relative; display: grid; justify-items: center; align-content: end; gap: 11px; }
.ah-item__art { width: 100%; max-width: 92px; height: auto; aspect-ratio: 80 / 64; overflow: visible; filter: drop-shadow(3px 3px 0 rgba(3, 6, 13, 0.75)); transition: translate 0.3s var(--ease-back); }
/* the shelf tag: cream stock, punched hole, string up to the item, the service's name in ink */
.ah-item__tag {
  --tag-tilt: 1deg;
  position: relative; z-index: 3; display: grid; justify-items: center; align-content: center; gap: 3px;
  width: 100%; max-width: 136px; min-height: 48px; padding: 11px 6px 6px;
  border: 1.5px solid var(--ah-950); border-radius: 4px; background: var(--ah-cream); color: var(--ah-ink);
  text-align: center; text-decoration: none; box-shadow: 2px 2px 0 var(--ah-950);
  rotate: var(--tag-tilt); transform-origin: 50% 0;
  transition: rotate 0.45s var(--ease-back), box-shadow 0.2s, background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ah-item__tag::before { content: ""; position: absolute; left: 50%; top: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ah-950); box-shadow: 0 0 0 1.5px #d8ccae; }
.ah-item__tag::after { content: ""; position: absolute; left: 50%; bottom: calc(100% - 6px); width: 1.5px; height: 14px; margin-left: -0.75px; background: #e9e1cc; }
.ah-item__no { font: 700 0.66rem/1 var(--ah-mono); letter-spacing: 0.12em; color: var(--ah-blue-ink); }
.ah-item__name { font: 900 0.92rem/1.02 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; text-wrap: balance; }
.ah-item:nth-child(even) .ah-item__tag { --tag-tilt: -1deg; }
.ah-item__tag:hover, .ah-item__tag:focus-visible, .ah-item.is-hot .ah-item__tag { rotate: 0deg; background: #fffaf0; box-shadow: 2px 2px 0 var(--ah-950), 0 0 0 3px var(--ah-neon-sky); }
.ah-item.is-hot .ah-item__art, .ah-item:hover .ah-item__art { translate: 0 -4px; }
.ah-item__tag:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 4px; }
.ah-case::after { content: ""; position: absolute; z-index: 4; left: 16px; right: 16px; top: 46px; bottom: 44px; pointer-events: none; background: linear-gradient(115deg, transparent 0 22%, rgba(220, 240, 255, 0.09) 22% 30%, transparent 30% 33%, rgba(220, 240, 255, 0.06) 33% 35%, transparent 35% 72%, rgba(220, 240, 255, 0.05) 72% 80%, transparent 80%); }
.ah-case__base { position: relative; height: 42px; margin: 0 -14px; border-top: 2px solid var(--ah-950); border-radius: 0 0 6px 6px; background: repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 9px), linear-gradient(180deg, #5a3b22, #3b2414); }
.ah-case__lock { position: absolute; left: 50%; top: 9px; width: 22px; height: 22px; margin-left: -11px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 50% 42%, var(--ah-950) 0 2.6px, transparent 3px), linear-gradient(var(--ah-950), var(--ah-950)) 50% 64% / 2px 6px no-repeat, radial-gradient(circle at 35% 35%, #ffe7a8, var(--ah-brass) 60%, var(--ah-brass-lo)); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-case:not(.is-play) .ah-case__tube { opacity: 0.25; box-shadow: none; }
  .ah-case.is-play .ah-case__tube { animation: ah-ignite2 0.9s 0.2s both; }
  html.motion .ah-case:not(.is-play) .ah-item__tag { rotate: 16deg; }
  .ah-case .ah-item__tag { transition: rotate 0.7s var(--ease-back), box-shadow 0.2s, background-color 0.2s; transition-delay: calc(var(--td, 0) * 60ms + 0.45s), 0s, 0s; }
  .ah-case .ah-item:nth-child(2) .ah-item__tag { --td: 1; } .ah-case .ah-item:nth-child(3) .ah-item__tag { --td: 2; } .ah-case .ah-item:nth-child(4) .ah-item__tag { --td: 3; } .ah-case .ah-item:nth-child(5) .ah-item__tag { --td: 4; } .ah-case .ah-item:nth-child(6) .ah-item__tag { --td: 5; }
  .ah-item__tag:hover, .ah-item__tag:focus-visible, .ah-item.is-hot .ah-item__tag { transition-delay: 0s !important; }
}

/* a laptop screen (under 960px tall): the case packs its shelves tighter so it still fits under the header and rides along */
@media (min-width: 1000px) and (max-height: 959px) {
  .ah-case__shelf { padding-block: 16px 24px; }
  .ah-case__items { row-gap: 14px; }
  .ah-item { gap: 8px; }
  .ah-item__art { max-width: 76px; }
}
.ah-svc__ledgers { display: grid; gap: 30px; }
.ah-close { max-width: 24em; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; color: var(--ah-paper); font: 900 clamp(1.7rem, 1.1rem + 1.9vw, 2.7rem)/1.08 var(--ah-display); letter-spacing: 0.01em; text-wrap: balance; }
.ah-close__stamp {
  display: table; margin: 0.42em auto 0; padding: 0.1em 0.42em 0.06em;
  border: 4px solid var(--ah-sky); border-radius: 10px; color: var(--ah-sky);
  box-shadow: inset 0 0 0 3px var(--ah-900), inset 0 0 0 5px var(--ah-sky);
  rotate: -4deg; font-size: 1.35em; text-transform: uppercase; letter-spacing: 0.04em;
  -webkit-mask: var(--ah-speckle) 0 0 / 110px 110px; mask: var(--ah-speckle) 0 0 / 110px 110px;
}
.ah-entry__obj { display: none; }
@media (max-width: 999px) {
  .ah-svc__case { display: none; }
  #services .ah-entry { grid-template-columns: 64px minmax(0, 1fr); }
  #services .ah-entry__n { display: none; }
  #services .ah-entry__obj { display: block; width: 64px; height: auto; aspect-ratio: 80 / 64; margin-top: 2px; overflow: visible; filter: drop-shadow(2px 2px 0 rgba(11, 20, 36, 0.28)); }
}
@media (max-width: 520px) {
  #services .ah-entry__obj { position: absolute; left: -2px; top: 15px; width: 54px; margin: 0; }
  #services .ah-entry__name { padding-left: 62px; }
}

/* --------------------------------------------------------------------------
   7. MULTI-STORE: the key ring
   -------------------------------------------------------------------------- */
.ah-multi { background-color: var(--ah-800); }
.ah-multi__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@media (min-width: 980px) { .ah-multi__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(36px, 5vw, 72px); } }
.ah-multi__copy .ah-h2 { margin-bottom: 22px; font-size: clamp(2.2rem, 1.05rem + 2.45vw, 3.5rem); }
.ah-multi__copy p { max-width: 34em; color: var(--ah-fog); font-size: 1.1rem; }
.ah-multi__copy p + p { margin-top: 12px; }
.ah-multi__copy .btn { margin-top: 28px; }
.ah-keys { margin: 0; }
.ah-keys__art { position: relative; width: min(100%, 520px); margin-inline: auto; container-type: inline-size; }
.ah-keys__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ah-keys__swing { position: absolute; inset: 0; transform-origin: 51.15% 18.5%; }
.ah-keys__fig { position: absolute; display: grid; place-content: center; text-align: center; color: var(--ah-ink); pointer-events: none; }
.ah-keys__fig b { display: block; font: 900 clamp(2rem, 9.6cqi, 3.2rem)/0.9 var(--ah-display); letter-spacing: 0.01em; color: var(--ah-ink); text-shadow: 0.05em 0.05em 0 var(--ah-sky); }
.ah-keys__fig span { display: block; max-width: 8.6em; margin: 5px auto 0; font: 700 clamp(0.72rem, 2.55cqi, 0.9rem)/1.15 var(--ah-body); color: var(--ah-ink-2); }
.ah-keys__fig--1 { left: 9.4%; top: 47.9%; width: 26.5%; height: 26.5%; rotate: -6deg; }
.ah-keys__fig--2 { left: 64.4%; top: 51.3%; width: 28.1%; height: 28.1%; rotate: 5deg; }
.ah-keys.is-jingle .ah-keys__swing { animation: ah-jingle 1.1s var(--ease-out); }
@media (max-width: 560px) { .ah-keys__fig b { font-size: 10cqi; } .ah-keys__fig span { max-width: 6.6em; font-size: 0.72rem; line-height: 1.1; } }
@keyframes ah-jingle { 18% { rotate: 6deg; } 40% { rotate: -4deg; } 62% { rotate: 2deg; } 82% { rotate: -1deg; } }

/* --------------------------------------------------------------------------
   8. CASE STUDIES: price tags on a brass rod
   -------------------------------------------------------------------------- */
.ah-proof { --deco-at: 0 0; --deco-size: 40% 50%; background-color: var(--ah-900); }
.ah-proof::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px; pointer-events: none; background-color: var(--ah-900); background-image: var(--ah-grain); -webkit-mask: var(--ah-torn) 0 0 / 48px 12px repeat-x; mask: var(--ah-torn) 0 0 / 48px 12px repeat-x; }
.ah-proof__head { text-align: center; margin-bottom: clamp(30px, 4vw, 44px); }

/* --------------------------------------------------------------------------
   11. TEAM: behind the curtain
   -------------------------------------------------------------------------- */
.ah-team { background-color: #0b1226; padding-top: calc(var(--pad-y) + 40px); }
.ah-team::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 10%; width: min(1100px, 120vw); height: 80%; translate: -50% 0; pointer-events: none; background: radial-gradient(circle, rgba(173, 229, 255, 0.22) 1.4px, transparent 1.9px) 0 0 / 10px 10px; -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); }
.ah-valance {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 46px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 0, #1b3266 0 34px, transparent 35px) 0 0 / 70px 46px repeat-x,
    linear-gradient(#1b3266, #1b3266) 0 0 / 100% 12px no-repeat;
  filter: drop-shadow(0 2px 0 var(--ah-950)) drop-shadow(0 6px 0 var(--ah-gold)) drop-shadow(0 2px 0 var(--ah-950)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.45));
}
.ah-curtain {
  position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(18px, calc((100vw - 1200px) / 2 + 6px), 150px); pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 40%, rgba(0, 0, 0, 0.3)),
    repeating-linear-gradient(90deg, #0c1a3c 0, #1f3a78 9px, #2a4a92 13px, #142a5c 20px, #08142f 26px);
  border-inline: 2px solid var(--ah-950);
  transition: transform 1.4s var(--ease-out);
}
.ah-curtain--l { left: 0; transform-origin: 0 50%; clip-path: polygon(0 0, 100% 0, 100% 46%, 52% 64%, 100% 100%, 0 100%); }
.ah-curtain--r { right: 0; transform-origin: 100% 50%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 48% 64%, 0 46%); }
.ah-curtain::after { content: ""; position: absolute; top: 60%; width: 100%; height: 14px; border-radius: 8px; background: linear-gradient(180deg, #ffe7a8, #c9962e); box-shadow: 0 0 0 2px var(--ah-950); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-team:not(.is-play) .ah-curtain { transform: scaleX(3.2); }
}
@media (max-width: 760px) { .ah-curtain { width: 14px; } .ah-curtain::after { display: none; } }
.ah-team .ah-wrap { position: relative; z-index: 1; }
.ah-team__h { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }


/* --------------------------------------------------------------------------
   10. MISSION: the gem on the bench under the jeweler's lamp, on the night
   brick wall (the lamp and the frame are kit pieces in theme.css)
   -------------------------------------------------------------------------- */
.ah-mission { --vig-at: 74% 50%; padding-top: calc(var(--pad-y) + 24px); }
.ah-mission .ah-wrap { position: relative; z-index: 1; }
.ah-mission__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 980px) { .ah-mission__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 72px); } }
.ah-mission__line { max-width: 13.5em; font: 900 clamp(2.15rem, 0.9rem + 3vw, 3.75rem)/0.98 var(--ah-display); letter-spacing: 0.004em; color: var(--ah-paper); text-shadow: 0.035em 0.035em 0 var(--ah-950); text-wrap: balance; }
/* beside the frame on desktop the line is held to three lines (it ran to five at 1440) */
@media (min-width: 980px) { .ah-mission__line { max-width: none; font-size: clamp(2rem, 0.6rem + 2.4vw, 2.85rem); } }
.ah-mission__line strong { color: var(--ah-sky); text-shadow: 0.04em 0.04em 0 var(--ah-blue-deep), 0.075em 0.075em 0 var(--ah-950); font-weight: 900; }

/* --------------------------------------------------------------------------
   Reduced motion, print, small phones (homepage pieces)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ah-ring, .ah-sat__up { animation: none !important; }
  .ah-orbit__pause { display: none !important; }
}
@media print { .ah-orbit__pause { display: none !important; } }
@media (max-width: 640px) { .ah-orbit__stage { width: calc(100% + 16px); margin-inline: -8px; } }