/* AMIN APAC - hero-street.css
   index.html's hero since 2026-10-29: "Round the corner", promoted from
   hero-banner-options/herobanner-v1.32 (prefix kept: hb132-). Pairs with
   js/hero-street.js, which needs js/data.js and js/map-geo.js before it.
   Tokens are scoped to .hb132, not :root: base.css already defines --line and
   --surface for the light page, with other values. */
.hb132{
  --purple:#904FFF;
  --purple-deep:#7A00DF;
  --plum:#3A2364;
  --lavender:#D3B9FF;
  --pale:#F4EDFF;
  --white:#FFFFFF;
  --sea:#0D0A16;             /* the ground the glyphs sit on */
  --surface:rgb(13 10 22 / .82);   /* pills and the pin, over the glyphs */
  --line:rgb(211 185 255 / .10);   /* the floating header's border (css/immersive-hero.css) */
  --font:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  color:var(--pale);font-family:var(--font)
}
.hb132 *,.hb132 *::before,.hb132 *::after{box-sizing:border-box}

/* the track is the timeline (the dive, then one stretch per member city);
   the stage sticks while it scrolls past */
.hb132{position:relative;height:1100vh;background:var(--sea)}   /* v1.3: 800vh; the hops between stops take the rest */
.hb132-stage{position:sticky;top:0;height:max(640px,100svh);overflow:clip;isolation:isolate;display:grid;align-items:center;
  background:radial-gradient(80% 60% at 66% 55%,#1E1534 0%,var(--sea) 72%)}
.hb132-world{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
/* the loading mark (css/hero-style.css) until the first frame; until then the controls that need the
   script and the scroll cue wait too. The style switch and "Send one brief" never wait */
.hb132-ready .hb132-load{opacity:0;visibility:hidden;transition:none}   /* at once, as Miniature's and Aerial's */
.hb132-stage:not(.hb132-ready) :is(.hb132-cue,.hb132-pause,.hb132-skip,.hb132-dest,.hb132-alt){opacity:0;visibility:hidden}

/* one heading slot: the three states share a grid cell and cross-fade; JS sets data-mode */
.hb132-copy{position:relative;z-index:1;justify-self:start;display:grid;align-items:center;width:min(640px,46vw);
  padding:120px 0 40px clamp(24px,6vw,104px);pointer-events:none}   /* JS lines the left edge up with the logo */
.hb132-copy>*{grid-area:1/1;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),visibility 0s .45s}
.hb132-copy a{pointer-events:auto}
.hb132-h,.hb132-stop-city,.hb132-end-h{margin:0;font-weight:700;font-size:clamp(40px,min(4.6vw,8.4vh),76px);line-height:1.02;letter-spacing:-.025em;color:var(--white)}
/* the H1 takes the shared headline spec (--hs-h-*, css/hero-style.css); its width is its own,
   wider than the copy box, so the box keeps its size for the stop and the close */
.hb132-h{width:var(--hs-h-measure);max-width:none;font-size:var(--hs-h-size);line-height:var(--hs-h-lh);letter-spacing:var(--hs-h-track);text-wrap:balance}
.hb132-stop p{margin:0}
/* the stop card: the shared template (--hs-k/-stop/-d/-go-*, css/hero-style.css) */
.hb132-stop-n{font:var(--hs-k-font);letter-spacing:var(--hs-k-track);text-transform:uppercase;color:var(--hs-k-color);margin-bottom:var(--hs-k-gap)!important}
/* one heading scale for the whole slot: the city matches the H1 (never outranks it), and
   the agency, the member this stop is about, is the second level, not a grey caption */
.hb132-stop-city{width:max-content;max-width:min(var(--hs-stop-measure),100%);overflow-wrap:break-word;font-size:var(--hs-h-size);line-height:var(--hs-h-lh);letter-spacing:var(--hs-h-track);text-wrap:balance}
/* the close in two lines, the stop's rhythm: the count as a lead-in, "One brief." at the city's size */
.hb132-end-h{max-width:none}
.hb132-end-k,.hb132-end-b{display:block}
.hb132-end-k{font-size:clamp(26px,min(2.6vw,4.8vh),44px);line-height:1.15;letter-spacing:-.015em;white-space:nowrap;color:var(--pale)}
.hb132-end-b{font-size:clamp(56px,min(7.2vw,12vh),120px);line-height:.95;margin-top:.1em}
.hb132-stop-go{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--hs-go-gap)!important}
.hb132-stop-go:empty{display:none}
/* the stop's button: a line pill, so the solid "Send one brief" stays the one primary */
.hb132-copy .hb132-cta-line{min-height:var(--hs-go-h);padding:0 22px;font-size:15px;border-width:1px;border-color:var(--hs-go-line);background:var(--hs-go-fill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);gap:10px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hb132-copy .hb132-cta-line::after{content:"\2192";transition:transform .2s var(--ease-out)}
.hb132-copy .hb132-cta-line:hover{background:var(--purple-deep);border-color:var(--purple-deep)}
.hb132-copy .hb132-cta-line:hover::after{transform:translateX(3px)}
.hb132-end .hb132-cta{margin-top:32px}
/* who is showing: the others are faded out and out of the tab order */
.hb132-copy[data-mode="intro"] :is(.hb132-stop,.hb132-end),
.hb132-copy[data-mode="stop"] :is(.hb132-h,.hb132-end),
.hb132-copy[data-mode="end"] :is(.hb132-h,.hb132-stop){opacity:0;visibility:hidden;transform:translateY(-10px)}
.hb132-copy[data-mode="intro"] .hb132-h,
.hb132-copy[data-mode="stop"] .hb132-stop,
.hb132-copy[data-mode="end"] .hb132-end{transition-delay:.12s,.12s,0s}
/* (2026-11-06, accessibility) the H1 fades out over the tour but stays in the accessibility tree: hidden by
   visibility the page had no level-one heading for a screen reader once the tour began. Faded, not hidden */
.hb132-copy:not([data-mode="intro"]) .hb132-h{visibility:visible}
.hb132-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:var(--r-pill);
  border:1.5px solid var(--purple-deep);background:var(--purple-deep);color:var(--white);   /* 6.9:1 with white; --purple is only 3.9:1 */
  font:600 15px/1 var(--font);text-decoration:none;transition:background .2s var(--ease-out),border-color .2s var(--ease-out)}
.hb132-cta:hover{background:var(--purple);border-color:var(--purple)}
.hb132-cta:focus-visible,.hb132-pause:focus-visible,.hb132-dest-btn:focus-visible{outline:2px solid var(--lavender);outline-offset:3px}

/* the pin: the first stop on the map, then each agency's tower at street level (JS moves it) */
.hb132-pin{position:absolute;left:0;top:0;z-index:2;margin:0;display:flex;flex-direction:column;gap:2px;
  padding:8px 12px;border-radius:var(--r-ctl);background:var(--surface);border:1px solid var(--line);
  pointer-events:none;white-space:nowrap;will-change:transform}
.hb132-pin b{font:700 14px/1.2 var(--font);color:var(--white)}
.hb132-pin span{font:500 12px/1.2 var(--font);color:var(--lavender)}
.hb132-pin span:empty{display:none}

/* controls row: which city, where we are, pause */
.hb132-bar{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,32px);z-index:2;display:flex;align-items:center;gap:8px}
.hb132-dest-btn,.hb132-alt,.hb132-pause{min-height:36px;margin:0;padding:0 14px;border-radius:var(--r-pill);border:1px solid transparent;
  background:rgb(40 33 60 / .88);color:var(--lavender);font:600 12px/1 var(--font);letter-spacing:.02em;display:inline-flex;align-items:center}
/* the stop picker: a pill that opens the route as a list above it, each stop in its map colour */
.hb132-dest{position:relative}
.hb132-dest-btn{gap:8px;padding-right:12px;cursor:pointer;transition:background .2s var(--ease-out)}
.hb132-dest-btn:hover,.hb132-dest-btn[aria-expanded="true"]{background:rgb(60 48 92 / .95)}
.hb132-dest-dot{width:8px;height:8px;border-radius:50%;background:var(--hb132-stop,var(--lavender));box-shadow:0 0 0 3px rgb(255 255 255 / .06)}
.hb132-dest-v{color:var(--white);font-weight:700}
.hb132-dest-chev{width:12px;height:12px;transition:transform .2s var(--ease-out)}
.hb132-dest-btn[aria-expanded="false"] .hb132-dest-chev{transform:rotate(180deg)}
.hb132-dest-pop{position:absolute;left:0;bottom:calc(100% + 10px);width:360px;padding:8px;border-radius:18px;border:1px solid var(--line);
  background:rgb(13 10 22 / .94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 48px rgb(0 0 0 / .5);
  transform-origin:24px 100%;animation:hb132Pop .18s var(--ease-out)}
.hb132-dest-pop[hidden]{display:none}
@keyframes hb132Pop{from{opacity:0;transform:translateY(6px) scale(.98)}}
.hb132-dest-h{margin:0;padding:8px 12px 10px;font:600 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:rgb(211 185 255 / .7)}
.hb132-dest-list{list-style:none;margin:0;padding:0;max-height:min(440px,62svh);overflow-y:auto;outline:0;scrollbar-width:thin}
.hb132-dest-list li{position:relative;display:grid;grid-template-columns:28px auto minmax(0,1fr);align-items:baseline;gap:10px;
  padding:9px 12px;border-radius:10px;cursor:pointer;color:rgb(244 237 255 / .62);font:500 12px/1.3 var(--font)}
.hb132-dest-list .n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--c)}
.hb132-dest-list .c{font:700 14px/1.2 var(--font);color:var(--white)}
.hb132-dest-list .w{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}
.hb132-dest-list li.is-active{background:rgb(211 185 255 / .09)}
.hb132-dest-list li[aria-selected="true"]{background:rgb(211 185 255 / .14)}
/* no left bar on the selected stop (client, 2026-11-10: "remove this border left thing"):
   the fill above carries it */
.hb132-dest-list li[aria-selected="true"] .w{color:var(--pale)}
.hb132-pause{cursor:pointer;width:36px;padding:0;justify-content:center;flex-shrink:0}   /* an icon button; its name is aria-label */
.hb132-pause svg{width:14px;height:14px;fill:currentColor}
.hb132-pause[aria-pressed="true"] .hb132-i-pause,.hb132-pause:not([aria-pressed="true"]) .hb132-i-play{display:none}
.hb132-hs{display:flex}
.hb132-hs:empty{display:none}   /* below 901px the switch sits at the stage's top, so the slot is empty */
/* the tour's progress, along the stage's foot */
.hb132-prog{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:rgb(211 185 255 / .12);pointer-events:none}
.hb132-prog i{display:block;height:100%;background:var(--purple);transform:scaleX(0);transform-origin:0 50%}
.hb132-pause{transition:background .2s var(--ease-out)}
.hb132-pause:hover{background:rgb(60 48 92 / .95)}
/* the bar's way out: the CTA, small and solid (the page's one primary), and a quiet skip */
.hb132-bar .hb132-bar-cta{min-height:36px;padding:0 16px;font-size:13px}
.hb132-skip{min-height:36px;display:inline-flex;align-items:center;padding:0 6px;color:rgb(244 237 255 / .72);
  font:600 12px/1 var(--font);letter-spacing:.02em;text-decoration:none;transition:color .2s var(--ease-out)}   /* no underline (her call, 2026-10-29): it lifts to white on hover */
.hb132-skip:hover{color:var(--white)}
/* a plain link, so no pill behind it: a soft dark halo keeps it legible over the busiest streets */
.hb132-skip{text-shadow:0 0 6px var(--sea),0 0 12px var(--sea),0 1px 2px rgb(0 0 0 / .8)}
.hb132-skip:focus-visible{outline:2px solid var(--lavender);outline-offset:3px;border-radius:var(--r-sm)}
.hb132-bar-cta,.hb132-skip{transition:opacity .3s var(--ease-out),visibility 0s 0s}
.hb132-copy[data-mode="end"]~.hb132-bar :is(.hb132-bar-cta,.hb132-skip){display:none}   /* gone, not faded: faded, they kept their row */
.hb132-bar .hb132-bar-cta{white-space:nowrap}

.hb132-hint{position:absolute;bottom:44px;left:clamp(24px,6vw,104px);z-index:1;margin:0;
  font:500 13px/1.3 var(--font);color:rgb(244 237 255 / .6);pointer-events:none;transition:opacity .6s var(--ease-out)}
.hb132-hint.is-done{opacity:0}
.hb132-hint .on-touch{display:none}
@media (hover:none){ .hb132-hint .on-mouse{display:none} .hb132-hint .on-touch{display:inline} }
.hb132-stage.is-picking{cursor:pointer}

/* scroll cue: its look is .hs-cue in css/hero-style.css; js/hero-street.js sets .is-done once the walk starts */
/* +80 (was +52): the arrow tip clears the bar by ~36px (client, 2026-11-10: "too near at the bottom part") */
.hb132-cue{position:absolute;left:50%;bottom:calc(clamp(16px,3vw,32px) + 80px);z-index:1;transform:translateX(-50%);
  transition:opacity .6s var(--ease-out)}
.hb132-cue.is-done{opacity:0}
@media (max-width:860px) and (orientation:portrait),(orientation:landscape) and (max-height:540px),(prefers-reduced-motion:reduce){ .hb132-cue.hs-cue{display:none} }   /* .hs-cue: css/hero-style.css loads after this sheet */

/* narrow desktop: the hint would run under the controls row */
@media (max-width:1180px){ .hb132-hint{display:none} }
/* phones and narrow tablets: the world fills the top, the copy sits under it on a fade */
/* phones and tablets held upright (the JS reads the same query, PHONE) */
@media (max-width:860px) and (orientation:portrait){
  .hb132{height:950vh}
  .hb132-stage{align-items:end;background:radial-gradient(90% 50% at 50% 28%,#1E1534 0%,var(--sea) 72%)}
  .hb132-copy{width:auto;max-width:100%;min-width:0;padding:0 16px 164px;align-items:end}   /* the bar is two rows here */
  .hb132-h{width:auto;max-width:var(--hs-h-measure);font-size:var(--hs-h-size-m)}
  .hb132-end-k{font-size:clamp(17px,5vw,22px)}
  .hb132-end-b{font-size:clamp(48px,15vw,72px)}
  /* the stop kept short, so the street gets the height */
  .hb132-stop-n{margin-bottom:6px!important}
  .hb132-stop-city{width:auto;font-size:var(--hs-h-size-m)}   /* auto, not max-content: max-content made the copy as wide as the longest agency name and pushed it off the screen */
  .hb132-stop-go{margin-top:12px!important;gap:8px}
  .hb132-stop-go .hb132-cta{min-height:44px;padding:0 18px;font-size:14px}   /* the phone stop button, as Miniature's and Aerial's */
  .hb132-end .hb132-cta{margin-top:20px;min-height:44px}
  /* two fixed rows, whatever the city's name: picker | pause, then the CTA | skip
     (a wrapping flex row put the CTA wherever the picker's width left room, down to 81px) */
  .hb132-bar{left:16px;right:16px;bottom:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center}   /* 40px: clears the tag */
  .hb132-dest{grid-area:1/1;min-width:0;justify-self:start;max-width:100%}
  .hb132-dest-btn{max-width:100%}
  .hb132-dest-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .hb132-pause{grid-area:1/2;justify-self:end}
  .hb132-bar .hb132-bar-cta{grid-area:2/1;justify-content:center;min-height:44px;font-size:14px}
  .hb132-skip{grid-area:2/2;justify-self:center;min-height:44px;padding:0 8px;white-space:nowrap}
  /* the close: the bar is one row there, so the close drops by that row (44px + 8px gap).
     Hidden it sits 10px above where it shows, as every heading does: the JS veil allows for that */
  .hb132-copy .hb132-end{transform:translateY(52px)}
  .hb132-copy:not([data-mode="end"]) .hb132-end{transform:translateY(42px)}
  .hb132-dest-btn,.hb132-pause{min-height:44px;white-space:nowrap}
  .hb132-pause{width:44px}
  .hb132-dest{position:static}
  .hb132-dest-pop{left:0;right:0;width:auto}
  .hb132-dest-list li{padding:12px}
  .hb132-alt{display:none}
  .hb132-hint{display:none}
}
/* reduced motion: no pin, one still frame of the map */
@media (prefers-reduced-motion:reduce){
  .hb132{height:auto}
  .hb132-stage{position:relative}
  .hb132-pause,.hb132-hint,.hb132-alt,.hb132-dest,.hb132-skip,.hb132-bar-cta,.hb132-prog{display:none}   /* the picker jumps the scroll, and there is no scroll; the still has its own CTA */
  .hb132-cta,.hb132-copy>*{transition:none}
  /* the still: the H1 and the one CTA under it */
  .hb132-copy[data-mode="still"]{display:flex;flex-direction:column;align-items:flex-start}
  .hb132-copy[data-mode="still"] :is(.hb132-stop,.hb132-end-h){display:none}
}
/* small phones: the city alone fits the pill, so the lead-in goes */
@media (max-width:380px){ .hb132-dest-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }   /* still read out */
/* phone, reduced motion: no bar, so the still's copy comes down */
@media (max-width:860px) and (orientation:portrait) and (prefers-reduced-motion:reduce){ .hb132-copy{padding-bottom:88px} }

/* ---------- every screen size ----------
   Short screens (phones on their side, small laptops, an iPhone SE): the stage is the screen,
   not 640px at least, or the bar and the heading fall below the fold */
@media (max-height:640px){ .hb132-stage{height:100svh;min-height:300px} }
/* tablets held upright: the phone layout, with tablet-sized type */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  /* (600-679px: the picker drops its lead-in so the bar holds one row) */
  .hb132-copy{padding:0 32px 148px}
  .hb132-h{font-size:var(--hs-h-size-t)}
  .hb132-stop-city{font-size:var(--hs-h-size-t)}
  .hb132-end-k{font-size:clamp(22px,3.4vw,28px)}
  .hb132-end-b{font-size:clamp(64px,11vw,90px)}
  .hb132-bar{left:32px;right:32px;bottom:40px;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:8px}   /* one row: picker + pause left, skip + CTA right */
  .hb132-dest{order:1;max-width:none} .hb132-pause{order:2}
  .hb132-skip{order:3;margin-left:auto;white-space:nowrap}
  .hb132-bar>*{flex-shrink:0}
  .hb132-bar .hb132-bar-cta{order:4;flex:0 0 auto;min-height:44px}
}
/* phones on their side: the desktop layout (copy left, world right), packed into the height */
@media (orientation:landscape) and (max-height:520px){
  .hb132-copy{width:min(46vw,440px);padding:16px 0 64px 20px}
  .hb132-h{width:auto;max-width:var(--hs-h-measure);font-size:var(--hs-h-size-l)}
  .hb132-stop-n{font-size:11px;margin-bottom:6px!important}
  .hb132-stop-city{font-size:var(--hs-h-size-l)}
  .hb132-stop-go{margin-top:12px!important}
  .hb132-stop-go .hb132-cta{min-height:40px;padding:0 16px;font-size:13px}   /* the short-window stop button, as Miniature's and Aerial's */
  .hb132-end-k{font-size:clamp(15px,5vh,22px)}
  .hb132-end-b{font-size:clamp(36px,13vh,60px)}
  .hb132-end .hb132-cta{margin-top:16px;min-height:40px}
  .hb132-bar{right:12px;bottom:12px;gap:6px}
  .hb132-alt,.hb132-hint{display:none}
  .hb132-dest-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hb132-dest-pop{left:auto;right:0;width:min(360px,calc(100vw - 24px))}
  .hb132-dest-list{max-height:calc(100svh - 90px)}
}
/* big screens: the heading and the bar grow with the room (v1.32 stopped at 76px at 1650px) */
@media (min-width:1920px){
  .hb132-copy{width:min(860px,44vw)}
  .hb132-end-h{font-size:clamp(76px,min(4.4vw,8.4vh),112px)}
  .hb132-end-k{font-size:clamp(44px,2.4vw,60px)}
  .hb132-end-b{font-size:clamp(120px,6.6vw,170px)}
  .hb132-cta{min-height:56px;padding:0 30px;font-size:17px}
  .hb132-dest-btn,.hb132-alt,.hb132-skip{min-height:44px;font-size:14px;padding:0 18px}
  .hb132-pause{min-height:44px;width:44px}
  .hb132-pause svg{width:16px;height:16px}
  .hb132-bar .hb132-bar-cta{min-height:44px;font-size:15px;padding:0 20px}
}
/* ...wider than 900px on its side (a Pro Max), the header still floats over the hero: clear it */
@media (orientation:landscape) and (max-height:520px) and (min-width:901px){ .hb132-copy{padding-top:100px;padding-bottom:56px} }
/* index.html (2026-10-29): on desktop the bar is the whole foot, from the logo's edge
   (--hb132-left, set by the JS) to the right gutter: style switch + pause on the left,
   skip, jump-to and the CTA on the right */
@media (min-width:901px) and (min-height:521px){
  .hb132-bar{left:var(--hb132-left,clamp(24px,6vw,104px));right:var(--hb132-right,clamp(16px,3vw,40px))}   /* right: the header's inner edge (JS) */
  /* Pixel gives the end items 8px of side margin for their stairs, so the row runs 8px wider each side to keep the boxes on the logo and the header button */
  html[data-ui="pixel"] .hb132-bar{left:calc(var(--hb132-left,clamp(24px,6vw,104px)) - 8px);right:calc(var(--hb132-right,clamp(16px,3vw,40px)) - 8px)}
  .hb132-pause{margin-right:auto}
  .hb132-hint{bottom:calc(clamp(16px,3vw,32px) + 52px)}   /* a row above the bar, which starts at the same left edge */
}
/* index.html (2026-10-29): on desktop the heading slot sits high, a fifth of the way
   down under the header, not in the middle; all three states share its top edge */
@media (min-width:861px) and (min-height:521px){
  .hb132-copy{align-self:start;align-items:start;padding-top:var(--hs-h-top)}
}
@media (min-width:600px) and (max-width:679px) and (orientation:portrait){ .hb132-dest-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }

/* --px-c registered as a colour so the stairs (box-shadows reading it) fade with the face */
@property --px-c{syntax:'<color>';inherits:true;initial-value:transparent}

/* 2026-11-05: pixel buttons, as the closer's (css/closer-binary.css) - the page
   opens and closes on the same button. Square face, stepped corners drawn by
   box-shadow on a 4px grid (two stairs: the row/col 4px out at full length, the
   next 4px further in by 4px), --mono caps. Hover snaps to lavender with plum ink,
   no ease. Only the solid primary gets the blinking cursor; the stop buttons keep
   their arrow. The stop buttons were a translucent line pill: pixels are flat, and
   overlapping stair shadows would double a translucent fill, so they take a solid
   dim plum that reads the same over the dark map. hb132 is the Binary hero only,
   so Miniature and Aerial keep their pills.
   Pixel look only since 2026-11-06 (html[data-ui="pixel"], js/hero-look.js): 3D has its
   lit keys (css/pixel-ui.css), Binary its terminal buttons (below). */
html[data-ui="pixel"] .hb132-copy .hb132-cta,html[data-ui="pixel"] .hb132-bar .hb132-cta{
  --px-c:var(--purple-deep);
  border:0;border-radius:0;margin-inline:8px;padding-inline:18px;
  font-family:var(--mono);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--px-c);color:var(--white);
  box-shadow:
    0 -4px 0 0 var(--px-c), 0 4px 0 0 var(--px-c), -4px 0 0 0 var(--px-c), 4px 0 0 0 var(--px-c),
    0 -12px 0 -4px var(--px-c), 0 12px 0 -4px var(--px-c), -12px 0 0 -4px var(--px-c), 12px 0 0 -4px var(--px-c);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:transform 260ms cubic-bezier(.22,.61,.36,1),background-color 260ms cubic-bezier(.22,.61,.36,1),color 260ms cubic-bezier(.22,.61,.36,1),--px-c 260ms cubic-bezier(.22,.61,.36,1),opacity .3s var(--ease-out),visibility 0s 0s}   /* smooth hover (her note), was steps */
html[data-ui="pixel"] .hb132-copy .hb132-cta.hb132-cta-line{--px-c:rgb(58 44 92);color:var(--white)}
html[data-ui="pixel"] .hb132-copy .hb132-cta:hover,html[data-ui="pixel"] .hb132-bar .hb132-cta:hover,
html[data-ui="pixel"] .hb132-copy .hb132-cta:focus-visible,html[data-ui="pixel"] .hb132-bar .hb132-cta:focus-visible{--px-c:var(--lavender);background:var(--px-c);border-color:transparent;color:var(--plum);transform:translateY(-2px)}
html[data-ui="pixel"] .hb132-copy .hb132-cta:active,html[data-ui="pixel"] .hb132-bar .hb132-cta:active{transform:translateY(0)}
html[data-ui="pixel"] .hb132-copy .hb132-cta:focus-visible,html[data-ui="pixel"] .hb132-bar .hb132-cta:focus-visible{outline-offset:12px}
html[data-ui="pixel"] .hb132-copy .hb132-cta:not(.hb132-cta-line)::after{
  content:"";display:inline-block;width:.6em;height:1.05em;margin-left:.6em;
  background:currentColor;animation:hb132-caret 1.06s steps(2,jump-none) infinite}
@keyframes hb132-caret{from{opacity:1}to{opacity:0}}
html[data-ui="pixel"] .hb132-copy .hb132-cta-line::after{transition:none}
@media (prefers-reduced-motion:reduce){
  html[data-ui="pixel"] .hb132-copy .hb132-cta:not(.hb132-cta-line)::after{animation:none}
  html[data-ui="pixel"] .hb132-copy .hb132-cta:hover,html[data-ui="pixel"] .hb132-bar .hb132-cta:hover,
  html[data-ui="pixel"] .hb132-copy .hb132-cta:focus-visible,html[data-ui="pixel"] .hb132-bar .hb132-cta:focus-visible{transform:none}
}
/* the daylight looks (Pixel .is-px in css/hero-real.css, Diorama .is-dio in
   css/hero-dio.css) tint the stop button with 12% ink over cream. On a pixel
   button the stairs must be the same colour as the face, or they read as a
   border (her note, 2026-11-05): the tint flattened to solid, rgb(35 26 18 / .12)
   over rgb(236 229 211). Hover is lavender, so the ink goes plum, not their white */
.hb132-stage.is-real.is-px .hb132-copy .hb132-cta.hb132-cta-line,
.hb132-stage.is-dio .hb132-copy .hb132-cta.hb132-cta-line{--px-c:rgb(212 205 188);background:var(--px-c);color:#231a12}
.hb132-stage.is-real.is-px .hb132-copy .hb132-cta.hb132-cta-line:is(:hover,:focus-visible),
.hb132-stage.is-dio .hb132-copy .hb132-cta.hb132-cta-line:is(:hover,:focus-visible){--px-c:var(--lavender);background:var(--px-c);color:var(--plum)}

/* 2026-11-05: the Pixel look's UI in pixels too (her go, after the buttons). The
   labels and controls take the buttons' voice: --mono caps. The headline and the
   agency names stay Libre Franklin - the brand speaking, crisp on the pixel world.
   The pills (style switch, Jump to, pause, scroll cue) go square with the same
   4px stairs as the buttons, on solid faces (stairs double a translucent fill).
   Pixel only: Binary and 3D keep their pills. */
.hb132-stage.is-real.is-px :is(.hb132-stop-n,.hb132-skip,.hb132-dest-btn,.hb132-dest-h,.hs-l,.hs-b,.hs-cue){
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.hb132-stage.is-real.is-px .hb132-stop-n{letter-spacing:.12em}
.hb132-stage.is-real.is-px :is(.hs,.hb132-dest-btn,.hb132-pause,.hs-cue>span){
  --px-c:rgb(40 33 60);
  border-radius:0;border-color:transparent;background:var(--px-c);margin-left:8px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:
    0 -4px 0 0 var(--px-c), 0 4px 0 0 var(--px-c), -4px 0 0 0 var(--px-c), 4px 0 0 0 var(--px-c),
    0 -12px 0 -4px var(--px-c), 0 12px 0 -4px var(--px-c), -12px 0 0 -4px var(--px-c), 12px 0 0 -4px var(--px-c);
  transition:--px-c 260ms cubic-bezier(.22,.61,.36,1),background-color 260ms cubic-bezier(.22,.61,.36,1),color 260ms cubic-bezier(.22,.61,.36,1)}
.hb132-stage.is-real.is-px .hs-cue>span{--px-c:rgb(13 10 22)}
/* clear of the next control on the right too; not the pause, whose margin-right:auto
   splits the desktop bar into its two groups */
.hb132-stage.is-real.is-px :is(.hs,.hb132-dest-btn,.hs-cue>span){margin-right:8px}
.hb132-stage.is-real.is-px :is(.hb132-dest-btn:hover,.hb132-dest-btn[aria-expanded="true"],.hb132-pause:hover){--px-c:rgb(60 48 92);background:var(--px-c)}
.hb132-stage.is-real.is-px .hs-ind{border-radius:0}   /* square; it still slides */
.hb132-stage.is-real.is-px .hb132-dest-dot{border-radius:0}
.hb132-stage.is-real.is-px .hb132-dest-pop{border-radius:0}
/* the skip was a bare ink link: over the dark street (Karachi's tower) it vanished.
   In Pixel it takes the stop button's stone face, so it reads on cream and on dark */
.hb132-stage.is-real.is-px .hb132-skip{
  --px-c:rgb(212 205 188);background:var(--px-c);color:#231a12;text-shadow:none;
  padding:0 12px;margin-inline:8px;min-height:44px;   /* 2026-11-09: the bar's own height (Jump to, Send one brief); 32px left it short at 1920+ and on phones */
  box-shadow:
    0 -4px 0 0 var(--px-c), 0 4px 0 0 var(--px-c), -4px 0 0 0 var(--px-c), 4px 0 0 0 var(--px-c),
    0 -12px 0 -4px var(--px-c), 0 12px 0 -4px var(--px-c), -12px 0 0 -4px var(--px-c), 12px 0 0 -4px var(--px-c)}
.hb132-stage.is-real.is-px .hb132-skip{transition:--px-c 260ms cubic-bezier(.22,.61,.36,1),color 260ms cubic-bezier(.22,.61,.36,1)}
.hb132-stage.is-real.is-px .hb132-skip:is(:hover,:focus-visible){--px-c:var(--lavender);color:var(--plum)}
@media (max-width:900px){ .hb132-stage.is-real.is-px .hb132-pause{margin-right:8px} .hb132-stage.is-real.is-px .hb132-bar{row-gap:20px} }   /* the stairs take 8px of each side of the gap */

/* ===== Binary's buttons (2026-11-06, "it looks like a pixel, align it more in binary") =====
   Binary is code, not pixels: a solid face with near-square corners, --mono caps, a
   ">" prompt and, on the primary, a blinking "_" cursor. Hover is the shared one (2px
   rise, lavender face, 200ms); Binary's own touch is the label decoding through 0s and
   1s (js/btn-decode.js). No attribute on html = Binary (the default look). */
html:not([data-ui="round"]):not([data-ui="pixel"]) :is(.hb132-copy,.hb132-bar) .hb132-cta{
  border:0;border-radius:2px;font-family:var(--mono);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background-color 260ms cubic-bezier(.22,.61,.36,1),color 260ms cubic-bezier(.22,.61,.36,1),transform 260ms cubic-bezier(.22,.61,.36,1),box-shadow 260ms cubic-bezier(.22,.61,.36,1)}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-copy .hb132-cta.hb132-cta-line{background:rgb(58 44 92);color:var(--white)}
html:not([data-ui="round"]):not([data-ui="pixel"]) :is(.hb132-copy,.hb132-bar) .hb132-cta::before{content:">";margin-right:.65em;opacity:.6}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-copy .hb132-cta:not(.hb132-cta-line)::after{content:"";width:.62em;height:2px;margin-left:.45em;align-self:flex-end;margin-bottom:.95em;
  background:currentColor;animation:hb132-caret 1.06s steps(2,jump-none) infinite}
html:not([data-ui="round"]):not([data-ui="pixel"]) :is(.hb132-copy,.hb132-bar) .hb132-cta:is(:hover,:focus-visible){background:var(--lavender);color:var(--plum);transform:translateY(-2px);
  box-shadow:0 0 0 1px rgb(211 185 255 / .5),0 0 28px rgb(211 185 255 / .35)}
html:not([data-ui="round"]):not([data-ui="pixel"]) :is(.hb132-copy,.hb132-bar) .hb132-cta:active{transform:translateY(0);transition-duration:80ms}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-copy .hb132-cta-line:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-copy .hb132-cta:not(.hb132-cta-line)::after{animation:none}
  html:not([data-ui="round"]):not([data-ui="pixel"]) :is(.hb132-copy,.hb132-bar) .hb132-cta:is(:hover,:focus-visible){transform:none}
}

/* ===== Binary's bar (2026-11-06, "should this be in binary theme?") ==================
   The controls take the buttons' terminal voice: near-square solid faces (no blur),
   --mono caps. The style switch's selection is square and framed by the buttons'
   corner brackets, which slide with it. Skip is a ">" prompt link. Same hover as
   every button: a 2px rise, a brighter face, 260ms. Binary only (no attribute = Binary). */
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage :is(.hs,.hb132-dest-btn,.hb132-pause){
  border-radius:2px;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(30 24 48);
  transition:transform 260ms cubic-bezier(.22,.61,.36,1),background-color 260ms cubic-bezier(.22,.61,.36,1),color 260ms cubic-bezier(.22,.61,.36,1)}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage :is(.hs-l,.hs-b,.hb132-dest-btn,.hb132-skip){font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage .hs-ind{border-radius:2px;background:rgb(211 185 255 / .2);overflow:visible;
  border-style:solid;border-width:0;border-image-source:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M.75 9V.75H9M21 .75h8.25V9M29.25 21v8.25H21M9 29.25H.75V21' fill='none' stroke='%23D3B9FF' stroke-width='1.5'/%3E%3C/svg%3E");border-image-slice:10;border-image-width:8px;border-image-outset:3px}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage .hs-b{border-radius:2px}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage .hb132-dest-dot{border-radius:0}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage .hb132-dest-pop{border-radius:2px}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage .hb132-skip::before{content:">";margin-right:.6em;opacity:.6}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage :is(.hb132-dest-btn,.hb132-pause):is(:hover,:focus-visible),html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage .hb132-dest-btn[aria-expanded="true"]{
  background:rgb(52 42 82);transform:translateY(-2px)}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage :is(.hb132-dest-btn,.hb132-pause):active{transform:translateY(0);transition-duration:90ms}
@media (prefers-reduced-motion:reduce){ html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage :is(.hb132-dest-btn,.hb132-pause):is(:hover,:focus-visible){transform:none} }

/* ===== One bar height in every look (2026-11-06, "why do we have different height?")
   The faces were all 36px, but each look adds its own outside: 3D a 4px edge, Pixel
   8px of stairs above and below. So the bar measured 36 / 40 / 52. Now every look is
   44 overall, the decoration counted: Binary 44 faces, 3D 40 + its 4px edge, Pixel
   28 + 2 x 8px of stairs. Desktop bar only (phones keep their 44px touch faces); the
   switch is its buttons + 3px padding + 1px border, so its buttons are face - 8. */
@media (min-width:901px) and (max-width:1919px){
  html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage :is(.hb132-pause,.hb132-dest-btn,.hb132-skip),html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-bar .hb132-cta{min-height:44px}
  html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage .hb132-pause{width:44px;justify-content:center}
  html:not([data-ui="round"]):not([data-ui="pixel"]) .hb132-stage .hs-b{height:36px}
  html[data-ui="round"] .hb132-stage :is(.hb132-pause,.hb132-dest-btn,.hb132-skip),html[data-ui="round"] .hb132-bar .hb132-cta{min-height:40px}
  html[data-ui="round"] .hb132-stage .hb132-pause{width:40px;justify-content:center}
  html[data-ui="round"] .hb132-stage .hs-b{height:32px}
  html[data-ui="pixel"] .hb132-stage :is(.hb132-pause,.hb132-dest-btn,.hb132-skip),html[data-ui="pixel"] .hb132-bar .hb132-cta{min-height:28px}
  html[data-ui="pixel"] .hb132-stage .hb132-pause{width:28px;justify-content:center;padding:0}
  html[data-ui="pixel"] .hb132-stage .hs-b{height:20px}
}

/* ===== Binary: the scroll cue (2026-11-06, "this should also be in binary") ===========
   The hint takes the bar's terminal voice: a ">" prompt in --mono caps on a near-square
   dark face inside the corner brackets, and the line becomes a dotted trail, like the
   streams of characters in the scene. Still not a control: no hover. */
html:not([data-ui="round"]):not([data-ui="pixel"]) .hs-cue>span{border-radius:2px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(30 24 48);
  font-family:var(--mono);letter-spacing:.1em;
  border-style:solid;border-width:0;border-image-source:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M.75 9V.75H9M21 .75h8.25V9M29.25 21v8.25H21M9 29.25H.75V21' fill='none' stroke='%23D3B9FF' stroke-width='1.5'/%3E%3C/svg%3E");border-image-slice:10;border-image-width:8px;border-image-outset:5px}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hs-cue>span::before{content:">";margin-right:.6em;opacity:.6}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hs-cue-a{margin-top:6px}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hs-cue-a>b{background:repeating-linear-gradient(180deg,rgb(211 185 255 / .55) 0 2px,transparent 2px 5px);border-radius:0}
html:not([data-ui="round"]):not([data-ui="pixel"]) .hs-cue-a>b::before{border-radius:0}
@media (min-width:901px) and (max-width:1919px){ html[data-ui="pixel"] .hb132-stage.is-real.is-px .hb132-skip{min-height:28px} }   /* the Pixel skip rule above sets 44px at higher specificity */

/* (2026-11-06, phone) Binary and Pixel set the stop picker in spaced mono capitals: at 360-400px "PHI PHI ISLAN..." truncated */
@media (max-width:400px){ html:not([data-ui="round"]) body .hb132 .hb132-stage .hb132-dest .hb132-dest-btn, html:not([data-ui="round"]) body .hb132 .hb132-stage .hb132-dest .hb132-dest-btn *{letter-spacing:.02em} html:not([data-ui="round"]) body .hb132 .hb132-stage .hb132-dest .hb132-dest-btn{padding-inline:12px} }
/* (2026-11-06, her "can we lessen or remove something?") a phone stop showed five controls in three rows. The bar's
   "Send one brief" goes during the tour (the header's Get in touch is always there and the close has its own big
   one); the bar is one row: picker | skip | pause; the copy comes down by the freed row (44px + 8px gap) */
@media (max-width:600px) and (orientation:portrait){
  .hb132-bar{grid-template-columns:minmax(0,1fr) auto auto}
  .hb132-bar .hb132-bar-cta{display:none}
  .hb132-skip{grid-area:1/2;padding:0 6px}
  .hb132-pause{grid-area:1/3}
  .hb132-copy{padding-bottom:112px}
  .hb132-copy .hb132-end{transform:none}
  .hb132-copy:not([data-mode="end"]) .hb132-end{transform:translateY(-10px)}
}
/* (2026-11-06) with skip in the picker's row, the lead-in squeezed the place to "SYDNEY…" up to 430px: the place gets the room (still read out) */
@media (max-width:430px) and (orientation:portrait){ .hb132-dest-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }
/* (2026-11-09, "light and doesn't lag") the CSS loops that ran forever: the loading mark's arms after it
   was hidden, the CTA caret's blink in a hidden heading slot, the scroll cue, all of them below the hero.
   Each blink is a style pass a frame; measured idle further down the page: 30% CPU, 0.1% with these */
.hb132-stage.hb132-ready:not(.hr-loading):not(.hb132-gpu-wait) .hs-load *{animation:none}
.hb132-stage.anim-off *,.hb132-stage.anim-off *::before,.hb132-stage.anim-off *::after,
.hb132-copy[data-mode="intro"] :is(.hb132-stop,.hb132-end) .hb132-cta::after,
.hb132-copy[data-mode="stop"] .hb132-end .hb132-cta::after,
.hb132-copy[data-mode="end"] .hb132-stop .hb132-cta::after{animation-play-state:paused!important}

/* ==========================================================================
   App-specific addition (amin-apac-web-ui, not in the reference): clearance
   for the "Chat with AMIN" launcher (src/ChatWidget), which the reference
   site doesn't have. It's a fixed pill at right:24px, full text at every
   width the bar also shows its own CTA/picker in one row (>=901px), so
   without this the bar's rightmost control sits flush against it. The bar is
   `position:absolute; right:...`, sized to its own content — padding would
   just widen it leftward without moving its right edge, so this shifts the
   anchor itself instead. The launcher has no fixed width (content-sized,
   ~190-210px with its icon and padding) — 220px clears it with a little
   breathing room besides. */
/* App-specific addition, MOVED (2026-11-12): the header bar's per-look fill/
   shape/CTA rules used to live in this sheet — but this sheet is <link>ed
   only while the street hero is mounted, so the header fell back to the
   plain Binary fill on every OTHER page (people, insights, tools,
   newsletter, …), even though it's the exact same header component there.
   Now in src/styles/header-look.css, imported globally from globals.css,
   so the look follows the visitor onto every page — see that file for the
   rules themselves and the fuller rationale. */

@media (min-width:901px){
  .hb132-bar{right:calc(var(--hb132-right,clamp(16px,3vw,40px)) + 220px)}
  /* Pixel's own rule (above, html[data-ui="pixel"] .hb132-bar) outranks the
     plain one above by specificity regardless of source order, so it needs
     its own matching override — same +220px, on top of Pixel's -8px. */
  html[data-ui="pixel"] .hb132-bar{right:calc(var(--hb132-right,clamp(16px,3vw,40px)) - 8px + 220px)}
}