/* v2-about.css — the About page's touch-ups from the 2026-10-04 Claude Design handoff. Linked on /about/ only, after
   v2-chrome.css (v2pages.PAGE_SHEETS). Markup and the Montréal chip's script: ABOUT_EDITS in tools/v2pages.py.
   The hero photo strip and the "Started in Montréal" block are gone; the globe stands alone, centred, with Montréal's
   pin carrying a blue chip that opens into a small card with the team photo. */

#ycHero .a3-loc.a3-loc-orb{max-width:1440px;display:flex;flex-direction:column;align-items:center;padding-bottom:clamp(28px,3.5vw,48px)}
#ycHero .a3-loc.a3-loc-orb .a3-orb{position:relative;width:100%;display:flex;justify-content:center}
#ycHero .a3-loc.a3-loc-orb .a3-orb .a3-globe{position:relative;width:min(56%,660px);max-width:none}
@media (max-width:820px){
  #ycHero .a3-loc.a3-loc-orb .a3-orb .a3-globe{width:min(100%,520px)}
}

/* the chip on the Montréal pin (positioned every frame by the page script) */
#ycHero .a3-mtl-pop{position:absolute;z-index:8;left:0;top:0;padding:6px;border-radius:12px;display:flex;flex-direction:column;align-items:flex-start;background:transparent;outline:none;transition:background .3s,box-shadow .3s,opacity .3s}
#ycHero .a3-mtl-pop.flip{align-items:flex-end}
/* the card is white, not the design's #FFFDF8 cream (house rule: no new cream components) */
#ycHero .a3-mtl-pop.is-open{background:#fff;box-shadow:0 30px 60px -24px rgba(26,24,21,.45),0 2px 8px rgba(26,24,21,.12)}
#ycHero .a3-mtl-pop:focus-visible .a3-mtl-chip{outline:2px solid #2F55FF;outline-offset:2px}
#ycHero .a3-mtl-chip{display:flex;align-items:center;gap:8px;padding:4px 5px 4px 9px;border-radius:4px;background:#2F55FF;color:#FAF9F5;font-size:12.5px;font-weight:500;letter-spacing:.02em;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 4px 8px rgba(20,18,15,.25)}
#ycHero .a3-mtl-thumbs{display:flex}
#ycHero .a3-mtl-thumbs img{display:block;width:20px;height:20px;border-radius:50%;object-fit:cover;border:1.5px solid #FAF9F5}

/* the card grows out of the chip */
#ycHero .a3-mtl-body{display:grid;grid-template-rows:0fr;width:0;opacity:0;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .25s}
#ycHero .a3-mtl-pop.is-open .a3-mtl-body{grid-template-rows:1fr;width:var(--mtlw,280px);opacity:1}
#ycHero .a3-mtl-bodyin{min-height:0;overflow:hidden;display:flex}
#ycHero .a3-mtl-pop.flip .a3-mtl-bodyin{justify-content:flex-end}
#ycHero .a3-mtl-wrap{flex:none;width:var(--mtlw,280px);padding:10px 4px 4px;box-sizing:border-box}
#ycHero .a3-mtl-head{display:grid;margin:0 2px 8px}
#ycHero .a3-mtl-head strong{font-size:14px;font-weight:600;color:#1A1815}
#ycHero .a3-mtl-photos{position:relative;display:block;width:100%;aspect-ratio:4/3}
#ycHero .a3-mtl-photos .a3-orb-ph{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;border-radius:8px;overflow:hidden;background:#E9E5DC}
#ycHero .a3-mtl-photos .a3-orb-ph img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
@media (prefers-reduced-motion:reduce){#ycHero .a3-mtl-pop,#ycHero .a3-mtl-body{transition:none}}