/* ───────────────────────────────────────────────────────────
   andrewwolhuter.com — site system
   Editorial-bold. Monochrome page, single yellow punch.
   Aviation spine: runway lines, launch actions, ascent transitions.
   ─────────────────────────────────────────────────────────── */

/* ╭─ Reduce-motion: respect the OS prefers-reduced-motion setting ─╮ */
[data-reduce="on"] *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important;
  transition-duration:0.06s !important; scroll-behavior:auto !important; }

/* ── Layout shell ─────────────────────────────────────────── */
.wrap{ width:min(1280px, 100% - 96px); margin-inline:auto; }
.wrap--wide{ width:min(1480px, 100% - 64px); }
section{ position:relative; }
.section-pad{ padding-block:clamp(72px,10vw,160px); }
.eyebrow-dot{ display:inline-flex; align-items:center; gap:10px; }
.eyebrow-dot::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--accent); flex:none; }

/* reveal-on-scroll primitive */
.rise{ opacity:0; transform:translateY(calc(14px * var(--motion))); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rise.in{ opacity:1; transform:none; }
.rise.d1{ transition-delay:.08s } .rise.d2{ transition-delay:.16s } .rise.d3{ transition-delay:.24s } .rise.d4{ transition-delay:.32s }

/* ── The runway motif — converging floor lines ────────────── */
.runway-floor{ position:absolute; inset:auto 0 0 0; height:46%; pointer-events:none; overflow:hidden;
  perspective:340px; perspective-origin:50% 0%; opacity:.5; z-index:0; }
.runway-floor::before{ content:""; position:absolute; left:-25%; right:-25%; top:0; bottom:-40%;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(11.11% - 1px), color-mix(in srgb,var(--fg-1) 26%, transparent) calc(11.11% - 1px) 11.11%),
    repeating-linear-gradient(0deg, transparent 0 78px, color-mix(in srgb,var(--fg-1) 16%, transparent) 78px 79px);
  transform:rotateX(72deg); transform-origin:50% 0%; }
.runway-floor.on-dark::before{ background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(11.11% - 1px), rgba(255,255,255,.16) calc(11.11% - 1px) 11.11%),
    repeating-linear-gradient(0deg, transparent 0 78px, rgba(255,255,255,.10) 78px 79px); }
.runway-centerline{ position:absolute; left:50%; bottom:0; width:3px; height:46%; transform:translateX(-50%);
  background:linear-gradient(to top, var(--accent), transparent); opacity:.7; pointer-events:none; z-index:0; }

/* ── Buttons / launch actions ─────────────────────────────── */
.btn{ font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:12px; cursor:pointer; border:none;
  padding:15px 22px; border-radius:var(--radius-md); text-decoration:none; text-align:left;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.btn--launch{ background:var(--aw-black); color:var(--fg-on-dark); padding-right:18px; }
.btn--launch .ico{ display:inline-flex; }
.btn--launch:hover{ box-shadow:var(--shadow-yellow); }
.btn--launch:hover .arrow{ transform:translate(3px,-3px) rotate(-45deg); }
.btn--launch .arrow{ transition:transform var(--dur-base) var(--ease-snap); }

.btn--yellow{ background:var(--accent); color:var(--fg-on-yellow); }
.btn--yellow:hover{ background:var(--aw-black); color:var(--fg-on-dark); }
.btn--ghost{ background:transparent; color:var(--fg-1); box-shadow:inset 0 0 0 1.5px var(--border); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--aw-black); }
.btn--ghost.on-dark{ color:var(--fg-on-dark); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3); }
.btn--ghost.on-dark:hover{ box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent); }
.btn--lg{ padding:19px 28px; font-size:15px; }

/* a launch action with a tiny runway underline that extends on hover */
.btn--launch .runlite{ position:relative; }
.btn .arrow{ font-family:var(--font-display); font-weight:700; }

/* ── Top navigation ───────────────────────────────────────── */
.nav{ position:fixed; top:0; left:0; right:0; z-index:1200; padding:14px 0;
  transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base), padding var(--dur-base); }
.nav__inner{ width:min(1280px, 100% - 96px); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; }
.nav.is-solid{ background:color-mix(in srgb,var(--aw-stone) 90%, transparent); backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:0 1px 0 var(--divider); padding-block:10px; }
.nav.is-solid.on-dark{ background:color-mix(in srgb,#161616 90%, transparent); box-shadow:0 1px 0 rgba(255,255,255,.08); }
.nav__logo{ height:24px; width:auto; }
.nav.on-dark .nav__logo.light{ display:block } .nav.on-dark .nav__logo.dark{ display:none }
.nav .nav__logo.light{ display:none } .nav .nav__logo.dark{ display:block }
.nav__links{ display:flex; align-items:center; gap:2px; }
.nav__link{ position:relative; font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--fg-1);
  text-decoration:none; padding:9px 13px; border-radius:var(--radius-sm); white-space:nowrap; transition:color var(--dur-base), background var(--dur-base); }
.nav.on-dark .nav__link{ color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.55); }
.nav__link::after{ content:""; position:absolute; left:13px; right:13px; bottom:5px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link:hover{ color:var(--fg-1); }
.nav.on-dark .nav__link:hover{ color:#fff }
.nav__link.is-cta{ background:var(--accent); color:var(--aw-black); font-weight:600; }
.nav__link.is-cta:hover{ background:var(--aw-black); color:#fff; }
/* Experience dropdown: matches the nav on light and dark pages, opens on hover/click/focus (driven by site.js). */
.nav__group{ position:relative; display:inline-flex; align-items:center; }
.nav__trigger{ background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.nav__caret{ font-size:9px; line-height:1; transition:transform var(--dur-base) var(--ease-out); }
.nav__trigger[aria-expanded="true"] .nav__caret{ transform:rotate(180deg); }
.nav__menu{ position:absolute; top:calc(100% + 6px); left:0; min-width:190px; z-index:1300;
  display:flex; flex-direction:column; gap:2px; padding:8px;
  background:var(--bg-panel); border-radius:12px; box-shadow:var(--shadow-3); }
.nav__menu[hidden]{ display:none; }
.nav.on-dark .nav__menu{ background:#1A1A1A; box-shadow:0 14px 40px rgba(0,0,0,.5); }
.nav__menu .nav__link{ width:100%; }
/* Hover bridge: the menu sits 6px below the trigger; this invisible strip spans that gap so moving
   the cursor onto the menu never fires the group's mouseleave, which would otherwise close the menu
   before a click can land. Desktop dropdown only; the mobile accordion is unaffected. */
.nav:not(.menu-open) .nav__menu::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.nav__burger{ display:none; }
/* Collapse to the burger/pill menu below 1200px so the row never wraps, overflows, or
   shifts on narrower laptops. Same burger->pill morph as the existing 860px behaviour;
   the 860px block below is now a redundant subset. */
@media (max-width:1200px){
  .nav__links{ display:none; }
  .nav__pill{ display:inline-flex; }   /* one consistent hamburger (the pill) on every page at mobile widths */
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{ min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero--dark{ background:var(--aw-black); color:var(--fg-on-dark); }
/* top scrim keeps nav legible over the bleeding asterisk */
.hero--dark::before{ content:""; position:absolute; top:0; left:0; right:0; height:180px; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,0)); }
.hero--stone{ background:var(--aw-stone); }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,64px); align-items:center; width:100%; position:relative; z-index:2; }
.hero__eyebrow{ color:var(--accent); }
.hero--stone .hero__eyebrow{ color:var(--fg-2); }
.hero__headline{ font-size:clamp(60px,9.4vw,150px); line-height:.84; margin:18px 0 0; letter-spacing:-0.03em; }
.hero__headline em{ font-style:italic; color:var(--accent); }
.hero__subhead{ font-family:var(--font-display); font-weight:500; text-transform:none; font-size:clamp(22px,2.6vw,42px);
  line-height:1.04; letter-spacing:0; margin-top:10px; color:#fff; }
.hero--stone .hero__subhead{ color:var(--fg-1); }
.hero__sub{ font-size:clamp(14px,1.05vw,17px); line-height:1.55; max-width:42ch; margin:22px 0 0; color:var(--fg-2); font-weight:300; }
.hero--dark .hero__sub{ color:rgba(255,255,255,.74); }
.hero__cta{ display:inline-flex; flex-direction:column; gap:14px; margin-top:38px; align-items:stretch; }
.hero__cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__cta .btn--collective{ width:100%; justify-content:center; }
.hero__portrait{ position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; }
.hero__portrait img{ width:auto; max-width:132%; max-height:99svh; border-radius:0; box-shadow:none; object-fit:contain; transform:translateX(-7%); }

/* interactive hero asterisk → asterisk game */
.hero-ast{ position:absolute; top:-5%; right:-2%; width:min(32vw,430px); z-index:3; cursor:pointer; background:none; border:none; padding:0; display:block; }
.hero-ast img{ width:100%; display:block; transition:transform var(--dur-slow) var(--ease-snap), filter var(--dur-base); }
.hero-ast:hover img{ transform:rotate(48deg) scale(1.05); filter:drop-shadow(0 8px 30px rgba(254,212,3,.4)); }
.hero-ast:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:8px; }
.hero-ast__cue{ position:absolute; left:50%; top:50%; translate:-50% -50%; display:inline-flex; align-items:center; gap:8px;
  background:var(--aw-black); color:#fff; font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.04em;
  padding:9px 15px; border-radius:999px; white-space:nowrap; opacity:0; scale:.85; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-snap); box-shadow:var(--shadow-3); }
.hero-ast:hover .hero-ast__cue, .hero-ast:focus-visible .hero-ast__cue{ opacity:1; scale:1; }
.hero-ast__cue .pin{ width:7px; height:7px; border-radius:999px; background:var(--accent); }
.hero__ast{ position:absolute; pointer-events:none; }
.hero__scrollcue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.hero--dark .hero__scrollcue{ color:rgba(255,255,255,.6) }
.hero__scrollcue .line{ width:1px; height:34px; background:currentColor; opacity:.5; animation:scrollpulse 2.4s var(--ease-out) infinite; }
@keyframes scrollpulse{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.25 } 50%{ transform:scaleY(1); opacity:.7 } }

/* a big asterisk that bleeds off an edge */
.ast-bleed{ position:absolute; pointer-events:none; opacity:.9; z-index:1; }

/* ── PERSPECTIVE-SHIFT REVEAL (the signature) ─────────────── */
.shift{ position:fixed; inset:0; z-index:9000; display:none; pointer-events:none; }
.shift.is-on{ display:block; }
.shift__blade{ position:absolute; inset:-12%; transform-origin:50% 50%; will-change:transform; }
.shift__core{ position:absolute; top:50%; left:50%; width:46vmin; height:46vmin; translate:-50% -50%;
  background:url("assets/asterisk-black.png") center/contain no-repeat; opacity:0; will-change:transform,opacity; }
.shift__label{ position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:2; text-align:center;
  font-family:var(--font-display); font-weight:900; text-transform:uppercase; color:var(--aw-black);
  font-size:clamp(22px,3vw,40px); letter-spacing:.02em; opacity:0; }
@keyframes bladeIn{ from{ transform:rotate(var(--rot)) scale(0); } to{ transform:rotate(var(--rot)) scale(1.7); } }
@keyframes bladeOut{ from{ transform:rotate(var(--rot)) scale(1.7); } to{ transform:rotate(calc(var(--rot) + 22deg)) scale(0); } }
@keyframes coreSpin{ 0%{ opacity:0; transform:rotate(-60deg) scale(.4) } 40%{ opacity:1 } 100%{ opacity:0; transform:rotate(80deg) scale(1.1) } }

/* editorial-snap fallback (reduce-motion / tweak) */
.shift--snap .shift__blade{ display:none; }
.shift--snap .shift__sheet{ position:absolute; inset:0; background:var(--aw-yellow); }

/* ── Cards / panels ───────────────────────────────────────── */
.panel{ background:var(--bg-panel); border-radius:var(--radius-md); padding:var(--space-6); }
.panel--bare{ background:transparent; }
.tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-weight:600;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px;
  background:color-mix(in srgb,var(--fg-1) 7%, transparent); color:var(--fg-2); }
.tag--yellow{ background:var(--accent); color:var(--aw-black); }

/* ── Block A — "What brought you here" question chips ─────── */
.qchip{ display:block; width:100%; text-align:left; cursor:pointer; border:none; background:var(--bg-panel);
  border-radius:var(--radius-md); padding:22px 24px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(18px,1.6vw,24px); text-transform:uppercase; letter-spacing:.01em; color:var(--fg-1);
  box-shadow:var(--shadow-1); display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), background var(--dur-base), color var(--dur-base); }
.qchip:hover{ transform:translateX(6px); box-shadow:var(--shadow-yellow); }
.qchip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.qchip .qmark{ font-family:var(--font-display); font-weight:900; color:var(--accent); font-size:1.4em; line-height:1; transition:transform var(--dur-base) var(--ease-snap); }
.qchip:hover .qmark{ transform:translateX(4px); }
.qchip.is-active{ background:var(--aw-black); color:#fff; }

.aresult{ background:var(--aw-black); color:#fff; border-radius:var(--radius-lg); padding:clamp(28px,3vw,48px); position:relative; overflow:hidden; min-height:340px; }
.aresult__ast{ position:absolute; top:-30px; right:-30px; width:200px; opacity:.1; }

/* ── Proof — testimonials, clients, reaction wall ─────────── */
.clientrow{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(28px,5vw,72px); }
.clientrow .client{ font-family:var(--font-display); font-weight:800; font-size:clamp(20px,2vw,30px); letter-spacing:.02em; color:var(--fg-1); opacity:.62; }
.quote{ font-family:var(--font-display); font-weight:700; text-transform:none; font-size:clamp(22px,2.2vw,34px);
  line-height:1.18; letter-spacing:0; }
.quote .accent{ color:var(--accent); }
/* rotating testimonial: stack quotes in one grid cell so the tile height is
   stable (sized to the longest) and the layout below never jumps */
.rt{ display:grid; }
.rt-item{ grid-area:1 / 1; margin:0; opacity:0; transition:opacity .8s ease; pointer-events:none; }
.rt-item.is-active{ opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){ .rt-item{ transition:none; } }
.statnum{ font-family:var(--font-display); font-weight:900; font-size:clamp(56px,7vw,120px); line-height:.86; letter-spacing:-0.03em; }
.statnum .unit{ font-size:.4em; vertical-align:super; }

/* reaction-wall (live ReactiON feed) */
.rxwall{ background:#0F0F0F; border-radius:var(--radius-lg); padding:clamp(20px,2.4vw,34px); color:#fff; }
.rxwall__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.rxwall__live{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.rxwall__live .dot{ width:8px; height:8px; border-radius:999px; background:var(--accent); animation:livepulse 1.6s infinite; }
@keyframes livepulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.rxwall__grid{ columns:2; column-gap:14px; }
.rxcard{ break-inside:avoid; background:#1A1A1A; border-radius:12px; padding:16px 18px; margin-bottom:14px; }
.rxcard .who{ font-size:12px; color:#8A8A8A; margin-top:10px; }
.rxcard .react{ display:inline-block; background:rgba(254,212,3,.16); color:var(--accent); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; }

/* ── Explore hub launch buttons (Block C) ─────────────────── */
.hubgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.hubcard{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:36px;
  background:var(--bg-panel); border-radius:var(--radius-md); padding:26px; min-height:188px; text-decoration:none;
  color:var(--fg-1); overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), background var(--dur-base), color var(--dur-base); }
.hubcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); }
.hubcard.is-dark{ background:var(--aw-black); color:#fff; }
.hubcard.is-yellow{ background:var(--accent); color:var(--aw-black); }
.hubcard__k{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.hubcard__t{ font-family:var(--font-display); font-weight:800; font-size:clamp(22px,2vw,30px); text-transform:uppercase; line-height:1; }
.hubcard__go{ position:absolute; top:24px; right:24px; font-family:var(--font-display); font-weight:700; transition:transform var(--dur-base) var(--ease-snap); }
.hubcard:hover .hubcard__go{ transform:translate(3px,-3px) rotate(-45deg); }

/* The Secret Life of Rejection tile: black with a warm amber ambient glow that
   intensifies on hover (the shared .hubcard:hover lift and transition still apply). */
.hubcard.is-slor{ background:var(--aw-black); color:#fff;
  box-shadow:var(--shadow-1), 0 0 34px rgba(240,169,60,.22); }
.hubcard.is-slor:hover{ box-shadow:var(--shadow-3), 0 0 60px rgba(240,169,60,.46); }
/* Self-contained chromatic-static glitch on the title, full amplitude, looping.
   Mirrors the SLOR page effect (those keyframes are scoped to that page). */
.hubcard.is-slor .hubcard__t{ animation:slor-tile-glitch 4.5s linear infinite; will-change:clip-path; }
@keyframes slor-tile-glitch{
  0%,82%,100%{ clip-path:inset(0 0 0 0); text-shadow:none; }
  83%{ text-shadow:-2px 0 rgba(240,169,60,.6), 2px 0 rgba(120,200,220,.45); }
  84.5%{ clip-path:inset(16% 0 54% 0); text-shadow:2px 0 rgba(240,169,60,.6), -2px 0 rgba(120,200,220,.45); }
  86%{ clip-path:inset(0 0 0 0); text-shadow:none; }
  88%{ clip-path:inset(58% 0 14% 0); text-shadow:-1px 0 rgba(240,169,60,.55); }
  89.5%{ clip-path:inset(0 0 0 0); text-shadow:none; }
  91%{ clip-path:inset(38% 0 40% 0); text-shadow:1px 0 rgba(120,200,220,.4); }
  92.5%{ clip-path:inset(0 0 0 0); text-shadow:none; } }
@media (prefers-reduced-motion: reduce){
  .hubcard.is-slor .hubcard__t{ animation:none; clip-path:none; text-shadow:none; }
}

/* ── Persistent "Don't leave empty-handed" ───────────────── */
.takeaway-fab{ position:fixed; right:22px; bottom:22px; z-index:1500; display:inline-flex; align-items:center; gap:12px;
  background:var(--accent); color:var(--aw-black); border:none; cursor:pointer; padding:15px 20px; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:14px; box-shadow:var(--shadow-3);
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:transform var(--dur-base) var(--ease-snap), opacity var(--dur-base) var(--ease-out); }
.takeaway-fab.show{ opacity:1; transform:none; pointer-events:auto; }
.takeaway-fab.show:hover{ transform:translateY(-3px); }
.takeaway-fab .pin{ width:9px; height:9px; border-radius:999px; background:var(--aw-black); }

/* ── Perspective Shift - signature floating control ──────────
   Surfaces bottom-left after the first scroll, then retires into the footer
   after one use. Sits above the nav/content but below the drawer + modals. ── */
.pshift-pill{ position:fixed; left:22px; bottom:22px; z-index:1500; display:inline-flex; align-items:center; gap:11px;
  background:var(--aw-black); color:#fff; border:none; cursor:pointer; padding:11px 18px 11px 11px; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:14px; box-shadow:var(--shadow-3);
  opacity:0; transform:translateY(20px) scale(.96); pointer-events:none;
  transition:transform var(--dur-base) var(--ease-snap), opacity var(--dur-base) var(--ease-out), bottom var(--dur-base) var(--ease-out); }
.pshift-pill.show{ opacity:1; transform:none; pointer-events:auto; }
.pshift-pill.show:hover{ transform:translateY(-3px); }
.pshift-pill__label{ white-space:nowrap; }
/* lift clear of the cookie bar while it is on screen (both live at the bottom edge) */
body.aw-cookiebar-on .pshift-pill{ bottom:calc(var(--cookiebar-h, 64px) + 22px); }
.pshift-kaleido{ width:22px; height:22px; border-radius:999px; flex:none;
  background:conic-gradient(from 0deg, #FED403, #202020, #F9F7F6, #FED403, #202020, #F9F7F6, #FED403);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.2); animation:pshiftSpin 7s linear infinite; }
@keyframes pshiftSpin{ to{ transform:rotate(360deg); } }

/* footer "look again" - the control's quiet retirement */
.pshift-foot{ display:inline-flex; align-items:center; gap:10px; margin-top:20px; background:none; border:none; cursor:pointer;
  padding:0; font-family:var(--font-body); font-weight:600; font-size:13px; color:rgba(255,255,255,.72); text-align:left; }
.pshift-foot:hover{ color:var(--accent); }
.pshift-foot .pshift-kaleido{ width:18px; height:18px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }

@media (prefers-reduced-motion: reduce){
  .pshift-kaleido{ animation:none; }
  .pshift-pill{ transition:opacity var(--dur-base) var(--ease-out); }
}
.drawer-scrim{ position:fixed; inset:0; z-index:1600; background:rgba(32,32,32,.5); opacity:0; pointer-events:none; transition:opacity var(--dur-base); }
.drawer-scrim.is-open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:1700; width:min(460px,92vw); background:var(--aw-stone);
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out); display:flex; flex-direction:column; }
.drawer.is-open{ transform:none; }
.drawer__head{ padding:28px 28px 18px; border-bottom:1px solid var(--divider); }
.drawer__body{ padding:8px 18px 28px; overflow-y:auto; }
.advice{ background:var(--bg-panel); border-radius:var(--radius-md); padding:20px 22px; margin:12px 10px; box-shadow:var(--shadow-1); }
.advice__meta{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.advice__take{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:var(--fg-1); cursor:pointer; background:none; border:none; }
.iconbtn{ background:none; border:none; cursor:pointer; color:var(--fg-1); padding:6px; border-radius:8px; }
.iconbtn:hover{ background:color-mix(in srgb,var(--fg-1) 8%, transparent); }

/* ── Footer ───────────────────────────────────────────────── */
.footer{ background:var(--aw-black); color:#fff; }
.footer a{ color:rgba(255,255,255,.72); text-decoration:none; }
.footer a:hover{ color:var(--accent); }
/* primary contact line — deliberately prominent, brand-yellow on the dark footer */
.footer a.hello-email{ color:var(--accent); font-weight:800; font-size:1.16em; letter-spacing:.005em; }
.footer a.hello-email:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }

/* ── Opening sequence overlay ─────────────────────────────── */
body.locked{ overflow:hidden; }
#opening{ position:fixed; inset:0; z-index:8000; background:var(--aw-black); color:#fff; overflow:hidden; }
.op-skip{ position:absolute; top:22px; right:24px; z-index:6; background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.6); font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; gap:8px; align-items:center; }
.op-skip:hover{ color:#fff; }
.op-stage{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease-out); padding:24px; }
.op-stage.is-on{ opacity:1; pointer-events:auto; }
.op-kaleido{ position:absolute; width:64vmin; height:64vmin; left:50%; top:42%; translate:-50% -50%;
  background:url("assets/asterisk-yellow.png") center/contain no-repeat; opacity:.16; animation:opspin 22s linear infinite; }
@keyframes opspin{ to{ transform:rotate(360deg) } }
.op-line{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(30px,5vw,72px);
  line-height:.95; letter-spacing:-0.01em; max-width:16ch; position:relative; z-index:2; }
.op-line em{ font-style:italic; color:var(--accent); }
.op-eyebrow{ font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; position:relative; z-index:2; }
.op-count{ position:relative; z-index:2; height:34vmin; display:flex; align-items:center; justify-content:center; }
.op-count .count, .op-count .count-go{ position:absolute; font-family:var(--font-display); font-weight:900;
  font-size:34vmin; line-height:1; opacity:0; transform:scale(.6); color:#fff; }
.op-count .count.is-on{ animation:countpop .85s var(--ease-out) forwards; }
.op-count .count-go{ font-size:18vmin; color:var(--accent); }
.op-count .count-go.is-on{ animation:countpop .9s var(--ease-snap) forwards; }
@keyframes countpop{ 0%{opacity:0;transform:scale(.5)} 20%{opacity:1;transform:scale(1)} 80%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.25)} }
.op-welcome{ display:grid; grid-template-columns:1fr 1fr; gap:0; inset:0; padding:0; text-align:left; }
.op-welcome .vid{ position:relative; background:#111 center/cover; }
.op-welcome .vid::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(32,32,32,.4)); }
.op-play{ position:absolute; top:50%; left:50%; translate:-50% -50%; width:84px; height:84px; border-radius:999px;
  background:rgba(254,212,3,.95); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2;
  box-shadow:0 10px 40px rgba(0,0,0,.4); transition:transform var(--dur-base) var(--ease-snap); }
.op-play:hover{ transform:translate(-50%,-50%) scale(1.07); }
.op-play svg{ margin-left:5px; }
.op-welcome .copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,6vw,96px); gap:8px; }
.op-welcome .copy .cta-row{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
@media (max-width:760px){
  .op-welcome{ grid-template-columns:1fr; grid-template-rows:38% 62%; }
  .op-line{ font-size:clamp(28px,9vw,52px); }
}

/* ── Skip link / a11y ─────────────────────────────────────── */
.skip{ position:fixed; left:50%; top:-60px; transform:translateX(-50%); z-index:3000; background:var(--aw-black); color:#fff;
  padding:12px 20px; border-radius:0 0 10px 10px; text-decoration:none; font-weight:600; font-size:13px; transition:top var(--dur-base); }
.skip:focus{ top:0; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* richer aggregator: write-up, top-takes, newsletter nudge */
.aggr__top{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,3vw,40px); align-items:center; position:relative; z-index:2; }
.aggr__topic-eyebrow{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.aggr__topic-name{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(40px,5vw,76px); line-height:.9; letter-spacing:-0.02em; margin:8px 0 18px; }
.aggr__blurb{ color:rgba(255,255,255,.78); font-size:15px; line-height:1.6; max-width:46ch; }
.aggr__blurb p{ margin:0 0 12px; color:rgba(255,255,255,.78); }
.aggr__photo{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:#111 center/cover; }
.aggr__share{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; background:transparent; border:1.5px solid rgba(255,255,255,.3); color:#fff; cursor:pointer;
  padding:10px 18px; border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; transition:border-color var(--dur-base), background var(--dur-base); }
.aggr__share:hover{ border-color:var(--accent); background:rgba(254,212,3,.08); }
.aggr__label{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:30px 0 14px; position:relative; z-index:2; display:flex; align-items:center; gap:10px; }
.aggr__label::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.12); }
.takes{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; position:relative; z-index:2; }
.take{ background:#1A1A1A; border-radius:var(--radius-md); padding:18px 20px; display:flex; gap:14px; align-items:flex-start; }
.take .badge{ width:40px; height:40px; border-radius:999px; background:rgba(111,61,255,.18); color:#B9A0FF; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; }
.take .who{ font-weight:600; font-size:14px; }
.take .what{ font-size:12.5px; color:#9A9A9A; margin-top:3px; }
.nudge{ position:relative; z-index:2; margin-top:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.nudge h4{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(18px,1.8vw,26px); line-height:1.05; margin:0; max-width:20ch; }
.nudge h4 .u{ position:relative; }
.nudge h4 .u::after{ content:""; position:absolute; left:0; right:-4px; bottom:-4px; height:6px; border-radius:999px; background:var(--accent); opacity:.85; }

/* ── AndrewON podcast (sub-brand: dark + electric violet) ─── */
.andrewon{ background:#161616; color:#fff; overflow:hidden; position:relative; }
.andrewon::before{ content:""; position:absolute; left:-10%; top:-20%; width:60%; height:140%;
  background:radial-gradient(closest-side, rgba(111,61,255,.22), transparent 70%); pointer-events:none; }
.ao-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center; position:relative; z-index:2; }
.ao-wm{ display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:900; font-size:clamp(42px,5.2vw,84px); letter-spacing:-0.01em; line-height:1; }
.ao-wm .andrew{ color:#fff; }
.ao-wm .on{ background:var(--aw-yellow); color:#202020; font-family:var(--font-body); font-weight:500; font-style:italic; padding:0 .16em .06em; margin-left:.06em; border-radius:3px; }
.ao-wm .ast{ width:.46em; height:.46em; margin-left:.14em; background:url("assets/asterisk-yellow.png") center/contain no-repeat; align-self:flex-end; margin-bottom:.1em; }
.ao-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#B9A0FF; }
.ao-eyebrow .wave{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.ao-eyebrow .wave i{ width:2px; background:var(--andrewon-violet); border-radius:2px; animation:aowave 1.1s ease-in-out infinite; }
@keyframes aowave{ 0%,100%{ height:4px } 50%{ height:14px } }
.ao-title{ font-family:var(--font-display); font-weight:900; text-transform:none; font-size:clamp(34px,4.4vw,68px); line-height:.96; letter-spacing:-0.01em; margin:18px 0 0; }
.ao-desc{ color:rgba(255,255,255,.74); font-size:15px; line-height:1.6; max-width:46ch; margin:20px 0 0; }
.ao-kicker{ font-family:var(--font-display); font-weight:700; font-style:italic; font-size:clamp(16px,1.5vw,20px); color:#fff; margin:18px 0 0; }
.btn--violet{ background:var(--andrewon-violet); color:#fff; }
.btn--violet:hover{ background:#fff; color:var(--andrewon-violet); }
.btn--violet-ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(185,160,255,.5); }
.btn--violet-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--andrewon-violet); color:#B9A0FF; }
.ao-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.ao-who{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.ao-who .c{ font-size:12px; font-weight:500; color:rgba(255,255,255,.8); border:1px solid rgba(185,160,255,.3); border-radius:999px; padding:6px 13px; }
.ao-ep{ background:#1E1B2A; border:1px solid rgba(111,61,255,.3); border-radius:var(--radius-lg); padding:24px; }
.ao-ep__row{ display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid rgba(255,255,255,.08); }
.ao-ep__row:first-of-type{ border-top:none; }
.ao-ep__play{ width:42px; height:42px; border-radius:999px; background:var(--andrewon-violet); flex:none; display:flex; align-items:center; justify-content:center; }
.ao-ep__t{ font-weight:600; font-size:14px; } .ao-ep__m{ font-size:12px; color:#8A8A8A; margin-top:2px; }
.ao-feature{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.ao-feature img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:grayscale(.2); }

@media (max-width:860px){
  .aggr__top{ grid-template-columns:1fr; }
  .aggr__photo{ aspect-ratio:16/10; }
  .takes{ grid-template-columns:1fr; }
  .ao-grid{ grid-template-columns:1fr; }
}

/* ── About: floating timeline + JUMP framework ───────────── */
.tl{ position:relative; max-width:1000px; margin:56px auto 0; }
.tl::before{ content:""; position:absolute; left:50%; top:6px; bottom:6px; width:2px; background:var(--border); transform:translateX(-50%); }
.tl__node{ position:relative; width:50%; padding:0 48px 36px; }
.tl__node:nth-child(odd){ left:0; }
.tl__node:nth-child(even){ left:50%; }
.tl__dot{ position:absolute; top:8px; width:18px; height:18px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 5px var(--bg-page); z-index:2; }
.tl__node:nth-child(odd) .tl__dot{ right:-9px; }
.tl__node:nth-child(even) .tl__dot{ left:-9px; }
.tl__card{ background:var(--bg-panel); border-radius:var(--radius-lg); padding:24px 26px; box-shadow:var(--shadow-2);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.tl__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); }
.tl__node:nth-child(odd) .tl__card{ text-align:right; }
.tl__era{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; color:var(--accent); font-size:13px; letter-spacing:.06em; }
.tl__t{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:21px; line-height:1.08; margin:6px 0 10px; }
.tl__b{ font-size:14.5px; line-height:1.6; color:var(--fg-2); }
@media (max-width:760px){
  .tl::before{ left:9px; }
  .tl__node, .tl__node:nth-child(even){ width:100%; left:0; padding:0 0 28px 40px; }
  .tl__node:nth-child(odd) .tl__card, .tl__node .tl__card{ text-align:left; }
  .tl__node:nth-child(odd) .tl__dot, .tl__node:nth-child(even) .tl__dot{ left:1px; right:auto; }
}

.jump{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.jump__card{ background:var(--bg-panel); border-radius:var(--radius-lg); padding:30px 24px 26px; box-shadow:var(--shadow-1); position:relative; overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.jump__card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-yellow); }
.jump__letter{ font-family:var(--font-display); font-weight:900; font-size:clamp(64px,7vw,104px); line-height:1; color:var(--accent); }
.jump__phrase{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:15px; letter-spacing:.04em; margin-top:14px; }
.jump__sub{ font-size:13px; color:var(--fg-2); line-height:1.5; margin-top:8px; }
.iii{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.iii .pill{ display:inline-flex; align-items:center; gap:10px; background:var(--aw-black); color:#fff; border-radius:999px; padding:12px 22px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:14px; letter-spacing:.03em; }
.iii .pill .n{ color:var(--accent); }
@media (max-width:760px){ .jump{ grid-template-columns:repeat(2,1fr); } }

/* generic page placeholder ribbon (Claude Code: swap before publish) */
.ph-ribbon{ display:inline-flex; align-items:center; gap:10px; background:repeating-linear-gradient(45deg,#FED403,#FED403 12px,#202020 12px,#202020 24px);
  color:#fff; font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:0; border-radius:999px; }
.ph-ribbon span{ background:var(--aw-black); padding:7px 16px; border-radius:999px; margin:3px; }
.ph-note{ border:1px dashed var(--aw-ink-300); border-radius:var(--radius-md); padding:14px 18px; color:var(--fg-3); font-size:13px; background:rgba(254,212,3,.05); }
.lorem{ color:var(--fg-2); }

/* image placeholder window — Claude Code / Andrew fills these */
.imgslot{ position:relative; overflow:hidden; border-radius:var(--radius-md); border:1.5px dashed var(--aw-ink-300);
  background:repeating-linear-gradient(45deg, rgba(32,32,32,.035) 0 10px, transparent 10px 20px), var(--aw-ink-100);
  display:flex; align-items:center; justify-content:center; text-align:center; color:var(--fg-3); min-height:200px; }
.imgslot .lbl{ font-size:12px; font-weight:600; letter-spacing:.04em; padding:10px 16px; max-width:26ch; line-height:1.4; }
.imgslot .lbl::before{ content:"⛰"; display:block; font-size:22px; margin-bottom:6px; opacity:.5; }
.imgslot.on-dark{ border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.5);
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px), #1A1A1A; }
.imgslot.is-violet{ border-color:rgba(111,61,255,.4); color:#B9A0FF;
  background:repeating-linear-gradient(45deg, rgba(111,61,255,.06) 0 10px, transparent 10px 20px), #1E1B2A; }

/* offering cards (coaching) */
.offer{ background:var(--bg-panel); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2); display:flex; flex-direction:column; }
.offer__top{ padding:30px 30px 24px; color:#fff; position:relative; overflow:hidden; }
.offer__top.is-black{ background:var(--aw-black); } .offer__top.is-yellow{ background:var(--accent); color:var(--aw-black); }
.offer__top .ast{ position:absolute; top:-30px; right:-30px; width:130px; opacity:.14; }
.offer__name{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(26px,3vw,40px); line-height:.95; position:relative; z-index:2; }
.offer__tag{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; position:relative; z-index:2; margin-bottom:8px; }
.offer__body{ padding:26px 30px 30px; display:flex; flex-direction:column; gap:18px; }
.tier{ border-top:1px solid var(--divider); padding-top:16px; }
.tier:first-child{ border-top:none; padding-top:0; }
.tier__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.tier__n{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:16px; }
.tier__meta{ font-size:12px; color:var(--fg-3); font-weight:600; white-space:nowrap; }
.tier__b{ font-size:13.5px; color:var(--fg-2); line-height:1.55; margin-top:6px; }
.tier__pop{ display:inline-block; background:var(--accent); color:var(--aw-black); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-left:6px; vertical-align:middle; }

/* story circle — interactive client stories */
.circle{ position:relative; width:min(620px,92vw); aspect-ratio:1; margin:48px auto 0; }
.circle__ring{ position:absolute; inset:8%; border:1px dashed var(--border); border-radius:999px; }
.circle__node{ position:absolute; width:76px; height:76px; border-radius:999px; border:none; cursor:pointer; transform:translate(-50%,-50%); padding:0;
  background:var(--bg-panel); box-shadow:var(--shadow-2); display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:transform var(--dur-base) var(--ease-snap), box-shadow var(--dur-base), outline-color var(--dur-base); outline:3px solid transparent; outline-offset:2px; }
.circle__node:hover{ transform:translate(-50%,-50%) scale(1.08); box-shadow:var(--shadow-3); }
.circle__node.is-active{ outline-color:var(--accent); transform:translate(-50%,-50%) scale(1.12); }
.circle__node .imgslot{ width:100%; height:100%; min-height:0; border:none; border-radius:0; }
.circle__node .imgslot .lbl{ font-size:8px; padding:3px; } .circle__node .imgslot .lbl::before{ font-size:13px; margin-bottom:1px; }
.circle__center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:55%; aspect-ratio:1; border-radius:999px;
  background:var(--aw-black); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:9%; }
.circle__center .q{ font-family:var(--font-display); font-weight:700; font-size:clamp(14px,1.5vw,20px); line-height:1.25; }
.circle__center .w{ font-size:12px; color:var(--accent); margin-top:14px; font-weight:600; letter-spacing:.04em; }
.circle__hint{ text-align:center; font-size:13px; color:var(--fg-3); margin-top:22px; }
@media (max-width:760px){ .circle__node{ width:54px; height:54px; } }

#topics{ overflow:hidden; }
.topics-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.07; z-index:0; pointer-events:none;
  filter:grayscale(.25) contrast(1.05);
  -webkit-mask-image:radial-gradient(120% 100% at 70% 40%, #000 45%, transparent 88%); mask-image:radial-gradient(120% 100% at 70% 40%, #000 45%, transparent 88%); }
#topics .wrap{ position:relative; z-index:1; }
@media (max-width:980px){ .topics-bg{ opacity:.05; } }

/* warmer kaleidoscope page-transition (logo → home) */
.kaleido-tx{ position:fixed; inset:0; z-index:9500; display:none; pointer-events:none; }
.kaleido-tx.on{ display:block; }
.kaleido-tx .b{ position:absolute; inset:-12%; transform-origin:50% 50%; clip-path:polygon(50% 50%, 26% -90%, 74% -90%); will-change:transform; }

/* ── Get to know Andrew — identity pillars ────────────────── */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.pillar{ background:var(--bg-panel); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.pillar img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.pillar .body{ padding:22px 24px 26px; }
.pillar .k{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.pillar .t{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:19px; line-height:1.1; margin-top:8px; }

/* ── Discover the topics → content aggregator ─────────────── */
.topicgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.topicchip{ position:relative; cursor:pointer; border:none; background:var(--bg-panel); border-radius:var(--radius-md);
  padding:24px 20px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; box-shadow:0 10px 30px rgba(32,32,32,.06); overflow:visible;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:17px; letter-spacing:.01em; color:var(--fg-1); text-align:left;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), background var(--dur-base), color var(--dur-base); }
.topicchip:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(32,32,32,.16); }
.topicchip .spin{ position:absolute; top:-16px; right:-16px; width:50px; height:50px; opacity:0; pointer-events:none;
  background:url("assets/asterisk-yellow.png") center/contain no-repeat; transition:opacity var(--dur-base) var(--ease-out); }
.topicchip:hover .spin{ opacity:1; animation:topicspin 3.4s linear infinite; }
@keyframes topicspin{ to{ transform:rotate(360deg) } }
.topicchip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.topicchip.is-active{ background:var(--aw-black); color:#fff; }
.topicchip .ico{ width:26px; height:26px; color:var(--accent); }
.topicchip .ct{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:none; color:var(--fg-3); }
.topicchip.is-active .ct{ color:rgba(255,255,255,.55); }

.aggr{ background:var(--aw-black); color:#fff; border-radius:var(--radius-lg); padding:clamp(28px,3vw,44px); position:relative; overflow:hidden; }
.aggr__ast{ position:absolute; top:-40px; right:-40px; width:220px; opacity:.10; }
.aggr__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; position:relative; z-index:2; }
.aggr__feed{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; position:relative; z-index:2; }
.cfeed{ background:#1A1A1A; border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:#fff; display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-out), background var(--dur-base); }
.cfeed:hover{ transform:translateY(-3px); background:#222; }
.cfeed .thumb{ position:relative; aspect-ratio:16/10; background:#000 center/cover; }
.cfeed .thumb .kind{ position:absolute; top:10px; left:10px; background:var(--accent); color:#202020; font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; }
.cfeed .thumb .play{ position:absolute; inset:0; margin:auto; width:48px; height:48px; border-radius:999px; background:rgba(254,212,3,.95); display:flex; align-items:center; justify-content:center; }
.cfeed .meta{ padding:14px 16px; }
.cfeed .meta .src{ font-size:11px; letter-spacing:.04em; color:#8A8A8A; }
.cfeed .meta .ti{ font-weight:500; font-size:14px; margin-top:6px; line-height:1.3; }

/* ── Big-statement brand moment (the anchor, reverent) ────── */
.statement{ background:var(--aw-yellow); color:var(--aw-black); text-align:center; overflow:hidden; }
.statement--black{ background:var(--aw-black); color:#fff; }
.statement .ast-bleed{ opacity:.12; }
.statement__line{ font-family:var(--font-display); font-weight:900; font-style:italic; text-transform:uppercase;
  font-size:clamp(40px,7vw,104px); line-height:.92; letter-spacing:-0.01em; position:relative; z-index:2; max-width:18ch; margin-inline:auto; }
.statement__sub{ font-family:var(--font-body); font-weight:500; font-size:clamp(15px,1.4vw,19px); margin-top:24px; position:relative; z-index:2; opacity:.8; }

/* ── Reels / shorts strip ─────────────────────────────────── */
.reelrow{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); gap:14px; overflow-x:auto; padding-bottom:8px; }
.reel{ position:relative; aspect-ratio:9/16; border-radius:var(--radius-md); overflow:hidden; background:#111 center/cover; text-decoration:none; flex:none; }
.reel::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.7), transparent 55%); }
.reel .play{ position:absolute; top:50%; left:50%; translate:-50% -50%; width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; z-index:2; }
.reel .cap{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; color:#fff; font-weight:600; font-size:12px; line-height:1.25; }

@media (max-width:860px){
  .pillars{ grid-template-columns:1fr; }
  .topicgrid{ grid-template-columns:repeat(2,1fr); }
  .aggr__feed{ grid-template-columns:1fr; }
}

/* ── Responsive — deliberately distinct mobile, not a resize ─ */
@media (max-width:860px){
  .wrap{ width:calc(100% - 40px); }
  .nav__links{ display:none; }
  .nav__pill{ display:inline-flex; }   /* one consistent hamburger (the pill) on every page at mobile widths */
  .hero__grid{ grid-template-columns:1fr; }
  .hero__portrait{ display:none; }
  .hero{ min-height:92svh; }
  .hubgrid{ grid-template-columns:1fr; }
  .rxwall__grid{ columns:1; }
  .section-pad{ padding-block:64px; }
}

/* ═══ GLOBAL UX LAYER (injected by site.js on every page) ═══ */

/* nav: load-in stagger (resting state is VISIBLE so links never get stuck hidden) */
.nav__links .nav__link{ animation:navIn .5s var(--ease-out) forwards; }
@keyframes navIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.nav__links .nav__link:nth-child(1){ animation-delay:.05s } .nav__links .nav__link:nth-child(2){ animation-delay:.10s }
.nav__links .nav__link:nth-child(3){ animation-delay:.15s } .nav__links .nav__link:nth-child(4){ animation-delay:.20s }
.nav__links .nav__link:nth-child(5){ animation-delay:.25s } .nav__links .nav__link:nth-child(6){ animation-delay:.30s }
.nav__links .nav__link:nth-child(7){ animation-delay:.35s } .nav__links .nav__link:nth-child(8){ animation-delay:.40s }
.nav__links .nav__link:nth-child(9){ animation-delay:.45s }
@keyframes navIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.nav__links{ transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.nav.is-collapsed:not(.menu-open) .nav__links{ opacity:0; transform:translateX(24px); pointer-events:none; }
.nav__pill{ display:none; align-items:center; justify-content:center; gap:9px; background:var(--aw-black); color:#fff; border:none; cursor:pointer;
  min-height:48px; padding:10px 16px; border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.02em; }
.nav.on-dark .nav__pill{ background:#fff; color:var(--aw-black); }
.nav__pill .bars{ display:inline-flex; flex-direction:column; gap:3px; } .nav__pill .bars i{ width:16px; height:2px; background:currentColor; border-radius:2px; }
.nav.is-collapsed .nav__pill{ display:inline-flex; position:absolute; right:0; top:50%; transform:translateY(-50%); }
.nav.menu-open .nav__links{ display:flex !important; opacity:1; transform:none; pointer-events:auto;
  position:absolute; top:calc(100% + 8px); right:clamp(20px,4vw,48px); flex-direction:column; align-items:flex-end;
  background:var(--bg-panel); padding:14px 16px; border-radius:14px; box-shadow:var(--shadow-3); min-width:200px; gap:4px; }
.nav.menu-open.on-dark .nav__links{ background:#1A1A1A; }
.nav.menu-open .nav__links .nav__link{ animation:none; opacity:1; transform:none; width:100%; }
.nav.menu-open .nav__links{ animation:menuSlide .32s var(--ease-out); }
@keyframes menuSlide{ from{ opacity:0; transform:translateY(-10px) scale(.95); } to{ opacity:1; transform:none; } }
/* In the open menu, Experience is an inline accordion: its submenu shows only when its trigger is
   expanded, so it keeps respecting the [hidden] attribute (toggled by tap in site.js) instead of being
   force-shown. The caret shows the open/closed state. Every row is at least a 48px tap target. */
.nav.menu-open .nav__group{ flex-direction:column; align-items:stretch; width:100%; }
.nav.menu-open .nav__link{ min-height:48px; display:flex; align-items:center; }
.nav.menu-open .nav__trigger{ width:100%; justify-content:space-between; }
.nav.menu-open .nav__menu{ position:static; width:100%; min-width:0; gap:2px;
  padding:2px 0 6px; background:transparent; box-shadow:none; }
.nav.menu-open .nav__menu .nav__link{ padding-left:26px; opacity:.92; }
/* keep the open menu within the viewport and scrollable, so it can never trap the page */
.nav.menu-open .nav__links{ max-height:calc(100dvh - 84px); overflow-y:auto; }
/* lock body scroll only while the mobile menu is open */
body.nav-open{ overflow:hidden; }

/* cookie bar */
.cookiebar{ position:fixed; left:0; right:0; bottom:0; z-index:1800; background:var(--aw-black); color:#fff;
  display:flex; align-items:center; gap:20px; justify-content:center; flex-wrap:wrap; padding:16px clamp(20px,4vw,40px);
  transform:translateY(110%); transition:transform var(--dur-slow) var(--ease-out); }
.cookiebar.show{ transform:none; }
.cookiebar p{ margin:0; font-size:13px; color:rgba(255,255,255,.82); max-width:62ch; }
.cookiebar a{ color:var(--accent); text-decoration:underline; }
.cookiebar .row{ display:flex; gap:10px; }

/* modal shell (lead capture + idle) */
.modal-scrim{ position:fixed; inset:0; z-index:2100; background:rgba(20,18,16,.62); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity var(--dur-base); }
.modal-scrim.show{ opacity:1; pointer-events:auto; }
.modal{ background:var(--bg-panel); border-radius:var(--radius-lg); width:min(520px,100%); padding:clamp(28px,4vw,44px); position:relative;
  transform:translateY(16px) scale(.98); transition:transform var(--dur-base) var(--ease-snap); box-shadow:var(--shadow-3); max-height:90vh; overflow:auto; }
.modal-scrim.show .modal{ transform:none; }
.modal__close{ position:absolute; top:16px; right:18px; background:none; border:none; cursor:pointer; font-size:18px; color:var(--fg-3); }
.modal__close:hover{ color:var(--fg-1); }
.modal .field{ margin-top:14px; } .modal .field input{ width:100%; font-family:var(--font-body); font-size:15px; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius-md); }
.modal .field input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--aw-black); }
.modal__note{ font-size:12px; color:var(--fg-3); margin-top:14px; }

/* idle kaleidoscope modal */
.idle .modal{ background:var(--aw-black); color:#fff; text-align:center; overflow:hidden; }
.idle__ast{ width:120px; height:120px; margin:0 auto 18px; background:url("assets/asterisk-yellow.png") center/contain no-repeat; animation:topicspin 14s linear infinite; }
body[data-reduce="on"] .idle__ast{ animation:none; }
.idle .modal__close{ color:rgba(255,255,255,.6); }

/* glow button */
.btn--glow{ position:relative; box-shadow:0 0 0 0 rgba(254,212,3,.55); animation:glowpulse 2.4s ease-in-out infinite; }
@keyframes glowpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(254,212,3,.0), 0 0 18px 2px rgba(254,212,3,.35); } 50%{ box-shadow:0 0 0 0 rgba(254,212,3,.0), 0 0 30px 6px rgba(254,212,3,.6); } }

/* legal footer line (injected) */
.legal-line{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
.legal-line a{ color:rgba(255,255,255,.6); font-size:12px; text-decoration:none; } .legal-line a:hover{ color:var(--accent); }

/* ══════════════════════════════════════════════════════════════
   FULL-SITE BUILD — shared components (Trusted By marquee, forms,
   coming-soon tiles). Tokens only; reduce-motion honoured.
   ══════════════════════════════════════════════════════════════ */

/* ── Trusted By — continuous logo marquee ─────────────────────── */
.marquee{ overflow:hidden; position:relative; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee__track{ display:flex; width:max-content; align-items:center; gap:clamp(40px,6vw,88px);
  animation:marqueeMove 42s linear infinite; will-change:transform; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
.marquee__logo{ flex:none; height:clamp(28px,4.2vw,46px); width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.58; transition:filter .3s ease, opacity .3s ease; }
.marquee__logo:hover{ filter:grayscale(0); opacity:1; }
@keyframes marqueeMove{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Seen at runs the opposite way, to signal it is a different set */
.marquee--reverse .marquee__track{ animation-direction:reverse; }
/* centred proof labels: quiet, non-interactive pill chips (replace the large Trusted by / Seen at headings) */
.proof__head{ text-align:center; }
.proof__chip{ display:inline-block; border:1px solid var(--border); color:var(--fg-3);
  border-radius:999px; padding:10px 22px; font-family:var(--font-body); font-weight:600;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  white-space:nowrap; cursor:default; user-select:none; }
[data-reduce="on"] .marquee__track{ animation:none; flex-wrap:wrap; width:100%;
  justify-content:center; gap:30px 48px; }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; flex-wrap:wrap; width:100%;
  justify-content:center; gap:30px 48px; } }

/* ── Shared form system (Contact, Be-a-guest, waitlists) ──────── */
.awform{ display:flex; flex-direction:column; gap:18px; max-width:580px; }
.awform .f{ display:flex; flex-direction:column; }
.awform input, .awform select, .awform textarea{ width:100%; font-family:var(--font-body); font-size:15.5px;
  color:var(--fg-1); background:var(--aw-white); padding:16px 18px; border:1.5px solid var(--border);
  border-radius:var(--radius-md); -webkit-appearance:none; appearance:none; transition:border-color .18s ease; }
.awform textarea{ min-height:132px; resize:vertical; line-height:1.55; }
.awform input::placeholder, .awform textarea::placeholder{ color:var(--fg-3); }
.awform input:focus, .awform select:focus, .awform textarea:focus{ outline:2px solid var(--accent);
  outline-offset:1px; border-color:var(--aw-black); }
.awform select{ cursor:pointer; padding-right:46px; color:var(--fg-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; }
.awform select:invalid{ color:var(--fg-3); }            /* default disabled option shows muted */
.awform .check{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--fg-2);
  line-height:1.5; cursor:pointer; }
.awform .check input{ appearance:none; -webkit-appearance:none; width:20px; height:20px; flex:none; margin-top:1px;
  border:1.5px solid var(--border); border-radius:5px; background:transparent; cursor:pointer;
  transition:background .15s ease, border-color .15s ease; }
.awform .check input:checked{ border-color:#202020; background:#202020 url("assets/asterisk-yellow.png") center/12px no-repeat; }
.awform .check input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.awform__submit{ display:inline-flex; align-items:center; justify-content:center; gap:11px; width:100%;
  background:var(--aw-black); color:#fff; border:none; border-radius:var(--radius-md); cursor:pointer;
  font-family:var(--font-display); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  font-size:15px; padding:19px 24px; transition:transform .15s ease, box-shadow .2s ease; }
.awform__submit .ast{ display:inline-block; width:16px; height:16px; background:url("assets/asterisk-yellow.png") center/contain no-repeat; }
.awform__submit:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); }
.awform__note{ font-size:12px; color:var(--fg-3); }
.awform__ok{ display:none; background:var(--aw-black); color:#fff; border-radius:var(--radius-lg);
  padding:34px 30px; text-align:center; }
.awform__ok .tick{ width:60px; height:60px; border-radius:999px; background:var(--accent); color:#202020;
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; margin:0 auto 16px; }
.awform.sent{ gap:0; }
.awform.sent > *{ display:none; }
.awform.sent .awform__ok{ display:block; }

/* ── Coming-soon tiles (Facilitation, Memberships) ────────────── */
.cs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.cs-tile{ position:relative; display:flex; flex-direction:column; gap:14px; min-height:158px;
  background:var(--bg-panel); border:1px solid var(--divider); border-radius:var(--radius-lg);
  padding:24px 22px; box-shadow:var(--shadow-1); }
.cs-tile__name{ font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(17px,1.9vw,21px); line-height:1.06; }
.cs-tile__sub{ font-size:13px; color:var(--fg-2); line-height:1.5; }
.cs-tile .ph-ribbon{ margin-top:auto; align-self:flex-start; font-size:10px; }

/* ── Trusted-by logo strip (home proof) — responsive wrap, greyscale → colour on hover ── */
.logostrip{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3.4vw,48px); }
.logostrip img{ height:clamp(24px,3.4vw,40px); width:auto; max-width:150px; object-fit:contain;
  filter:grayscale(1); opacity:.6; transition:filter .3s ease, opacity .3s ease; }
.logostrip img:hover{ filter:grayscale(0); opacity:1; }
@media (prefers-reduced-motion: reduce){ .logostrip img{ transition:none; } }

/* ── Ambient showreel band (home + keynotes): silent, looping moving imagery, never a player ── */
.showreel{ position:relative; width:100%; height:clamp(380px,58vh,770px); overflow:hidden; line-height:0; background:var(--aw-black); }
.showreel__video{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; pointer-events:none; }
/* faint dark blend on the top + bottom edges only, so the band settles into the page */
.showreel::before, .showreel::after{ content:""; position:absolute; left:0; right:0; height:clamp(40px,8vh,90px); pointer-events:none; z-index:1; }
.showreel::before{ top:0; background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.showreel::after{ bottom:0; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); }
@media (max-width:699px){ .showreel{ max-height:62vh; } }

/* ── Build-your-own-path bar (home selector section): slim yellow CTA in the hubcard's typographic language ── */
.pathbar{ display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,28px);
  width:100%; box-sizing:border-box; min-height:68px; margin-top:clamp(24px,4vw,40px);
  padding:12px clamp(20px,3vw,32px); background:var(--accent); color:var(--aw-black);
  border-radius:var(--radius-md); text-decoration:none; position:relative; overflow:hidden;
  transition:transform var(--dur-base) var(--ease-snap), box-shadow var(--dur-base) var(--ease-snap); }
.pathbar__txt{ min-width:0; }
.pathbar__k{ display:block; font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.62; }
.pathbar__t{ display:block; margin-top:5px; font-family:var(--font-display); font-weight:800; font-size:clamp(18px,2vw,26px); text-transform:uppercase; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pathbar__go{ flex:none; font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,26px); line-height:1;
  transition:transform var(--dur-base) var(--ease-snap); }
.pathbar:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(32,32,32,.20); }
.pathbar:hover .pathbar__go{ transform:translateX(6px); }
.pathbar:focus-visible{ outline:3px solid var(--aw-black); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .pathbar{ transition:background-color .2s ease, color .2s ease; }
  .pathbar__go{ transition:none; }
  .pathbar:hover{ transform:none; box-shadow:none; background:var(--aw-black); color:var(--aw-yellow); }
  .pathbar:hover .pathbar__go{ transform:none; }
}

/* ══ First-visit intro tour ══════════════════════════════════════════════
   JS-built (see site.js, the "intro tour" IIFE). The scrim sits above the
   floating Perspective Shift pill (z 1500), the takeaway FAB and the nav, and
   tears itself down on close or on any error so the page can never be left
   dimmed. Brand-native: stone/white card, yellow accent on the primary action. */
.tour{ position:fixed; inset:0; z-index:2000; font-family:var(--font-body); }
.tour__spot{ position:absolute; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(14,14,16,.9);
  transition:top .35s var(--ease-out), left .35s var(--ease-out), width .35s var(--ease-out), height .35s var(--ease-out); }
.tour__arrow{ position:absolute; width:0; height:0; pointer-events:none; border:10px solid transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28)); transition:top .35s var(--ease-out), left .35s var(--ease-out); }
.tour__card{ position:absolute; width:min(360px, calc(100vw - 32px)); box-sizing:border-box;
  background:var(--bg-panel); color:var(--fg-1); border-radius:var(--radius-md);
  box-shadow:0 0 0 1.5px rgba(254,212,3,.55), 0 10px 34px rgba(254,212,3,.22), 0 20px 50px rgba(0,0,0,.5);
  padding:20px 22px; pointer-events:auto; transition:top .35s var(--ease-out), left .35s var(--ease-out); }
/* quick, subtle entrance, replayed on each step for the card and its arrow together */
@keyframes tourCardIn{ from{ opacity:0; scale:.96; translate:0 6px; } to{ opacity:1; scale:1; translate:0 0; } }
.tour__card, .tour__arrow{ animation:tourCardIn .2s var(--ease-out) both; }
.tour__eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); font-weight:600; }
.tour__h{ font-family:var(--font-display); font-weight:800; font-size:22px; line-height:1.15; margin:7px 0 0; color:var(--fg-1); }
.tour__b{ font-size:14.5px; line-height:1.55; color:var(--fg-2); margin:9px 0 0; }
.tour__dots{ display:flex; gap:6px; margin-top:16px; }
.tour__dot{ width:7px; height:7px; border-radius:999px; background:var(--divider); transition:background var(--dur-base); }
.tour__dot.is-on{ background:var(--accent); }
.tour__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.tour__actions{ display:flex; gap:8px; }
.tour__skip{ background:none; border:0; cursor:pointer; font:inherit; font-size:13px; color:var(--fg-2);
  text-decoration:underline; text-underline-offset:2px; padding:8px 4px; min-height:40px; }
.tour__skip:hover{ color:var(--fg-1); }
.tour__btn{ font:inherit; font-weight:600; font-size:14px; border-radius:999px; padding:10px 17px; cursor:pointer;
  border:1.5px solid var(--divider); background:transparent; color:var(--fg-1); min-height:40px;
  transition:background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.tour__btn:hover{ border-color:var(--fg-1); }
.tour__btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--aw-black); }
.tour__btn--primary:hover{ background:var(--aw-black); border-color:var(--aw-black); color:#fff; }
/* hide the floating controls while the tour runs, restore them on close */
body.tour-open .pshift-pill, body.tour-open .takeaway-fab{ display:none !important; }
@media (max-width:760px){
  /* card docks to the bottom of the viewport, spotlight above it; larger tap targets */
  .tour__card{ left:12px !important; right:12px; top:auto !important; bottom:12px !important; width:auto; }
  .tour__arrow{ display:none !important; }
  .tour__btn, .tour__skip{ min-height:48px; }
}
@media (prefers-reduced-motion: reduce){
  .tour__spot, .tour__card, .tour__arrow, .tour__dot{ transition:none !important; }
  .tour__card, .tour__arrow{ animation:none !important; }
}