/* ==========================================================================
   JBT — About: "Experience behind every move."
   Default = normal document flow (phones, small tablets, reduced motion,
   no WebGL). html.story-pinned = the desktop scene: the About stage sits on
   top of the hero inside one pinned "story", and the cube section is docked
   underneath its final frame (see about.js).
   ========================================================================== */

/* ── The layered avatar (tools/hero_avatar_rig.py) ── */
.av { position: relative; width: 100%; height: 100%; perspective: 1400px; }
.av__layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.av__head { position: absolute; inset: 0; transform-origin: 53.08% 55.99%; will-change: transform; }
.av__eyes { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.av__eyes .av__layer { will-change: transform; }
.av__blink { opacity: 0; }
.av [data-part="body"] { will-change: transform; }

/* ── Section (flow layout by default) ── */
.abx {
  position: relative;
  color: #111;
  font-family: "Instrument Sans", system-ui, sans-serif;
  background: linear-gradient(180deg, #1f2d5c 0%, #141b33 55%, #0b0b0b 100%);
  --gutter: clamp(16px, 5vw, 72px);
}
.abx__stage { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 56px 0 0; }
.abx__backdrop, .abx__night, .abx__canvas, .abx__labels { display: none; }

.abx__card {
  position: relative; z-index: 3; margin: 0 16px;
  background: #fbfaf6; border: 1.5px solid #111; border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.abx__eyebrow { padding: 20px 22px 0; display: flex; align-items: center; gap: 10px; font: 500 11px/1.2 "Instrument Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.abx__eyebrow i { width: 26px; height: 1px; background: currentColor; }
.abx__beats { display: grid; }
.abx__beat { padding: 14px 22px 22px; }
.abx__beat + .abx__beat { border-top: 1.5px dashed #111; }
.abx__beat h2, .abx__beat h3 { font: 400 clamp(34px, 9vw, 44px)/.98 "Instrument Serif", Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.abx__beat p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: #2e2e2c; max-width: 44ch; }
.abx__sig { font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; color: #55534e !important; }
.abx__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; list-style: none; padding: 0; }
.abx__chips li { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(17, 17, 17, .12); display: inline-flex; align-items: center; gap: 7px; }
.abx__chips li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }

.abx__avatar {
  position: relative; z-index: 2; align-self: flex-end;
  width: min(94vw, 560px); aspect-ratio: 1300 / 1193; margin-top: 28px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.abx__avatar:focus-visible { outline: 2px solid #fbfaf6; outline-offset: 3px; }

/* Flow reveals */
html.js [data-abx-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
html.js [data-abx-reveal].is-in { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .abx__stage { flex-direction: row; align-items: flex-end; justify-content: space-between; min-height: 100svh; padding: calc(var(--header-h, 76px) + 40px) 0 0 var(--gutter); }
  .abx__card { width: min(560px, 42vw); margin: 0 0 12vh; }
  .abx__beat h2, .abx__beat h3 { font-size: clamp(36px, 3.4vw, 60px); }
  .abx__avatar { width: auto; height: min(84svh, 860px); margin: 0; }
}

/* ── Desktop scene: pinned story (html.story-pinned is set by about.js) ── */
.story { position: relative; }
html.story-pinned .story { z-index: 5; }                 /* above the docked cube section */
html.story-pinned .hb { min-height: 600px; }            /* same frame as the cube section */
html.story-pinned .abx { position: absolute; inset: 0; z-index: 4; background: none; pointer-events: none; }
html.story-pinned .abx__stage { position: absolute; inset: 0; display: block; padding: 0; min-height: 0; }
/* The About section's own stage: deep navy with a soft light behind Jeremy (replaces the bay once the hero has gone) */
html.story-pinned .abx__backdrop {
  display: block; position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(38% 55% at 72% 46%, rgba(120, 150, 230, .28) 0%, rgba(120, 150, 230, 0) 70%),
    radial-gradient(120% 90% at 70% 40%, #1c2b5c 0%, #121b3b 55%, #0b1024 100%);
}
html.story-pinned .abx__night {
  display: block; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(90% 80% at 70% 50%, #1d1d1d 0%, #0b0b0b 64%); /* exactly the cube section's backdrop */
}
html.story-pinned .abx__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
html.story-pinned .abx__avatar {
  position: absolute; z-index: 2; right: 0; bottom: 0; margin: 0; pointer-events: auto;
  height: min(84%, 860px, calc((62vw - var(--gutter) - 24px) * 1193 / 1300)); width: auto;
  opacity: 0; transform-origin: 60% 100%; will-change: transform, opacity;
}
html.story-pinned .abx__card {
  position: absolute; left: var(--gutter); top: calc(50% + var(--header-h, 76px) / 2); translate: 0 18px; margin: 0;
  transform: translateY(-50%);
  width: clamp(340px, 38vw, 560px); opacity: 0; pointer-events: auto;
  background: none; border: 0; box-shadow: none; color: #fbfaf6;
}
html.story-pinned .abx__eyebrow { padding-left: 0; }
html.story-pinned .abx__beat { padding-left: 0; }
html.story-pinned .abx__beat p { color: rgba(251, 250, 246, .82); }
html.story-pinned .abx__sig { color: rgba(251, 250, 246, .6) !important; }
html.story-pinned .abx__beats { display: grid; }
html.story-pinned .abx__beat { grid-area: 1 / 1; border-top: 0 !important; padding-top: 12px; }
html.story-pinned .abx__beat:not(:first-child) { opacity: 0; }
html.story-pinned .abx__chips { display: none; }
html.story-pinned [data-abx-reveal] { opacity: 1; transition: none; }
html.story-pinned .abx__labels { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.abx__labels span {
  position: absolute; left: 0; top: 0; opacity: 0;
  font: 500 12px/1 "Instrument Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: #111; background: rgba(251, 250, 246, .92); padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(17, 17, 17, .12);
  display: inline-flex; align-items: center; gap: 7px;
}
.abx__labels span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }

/* The cube section waits (copy hidden, not interactive) until the scene hands over */
html.story-pinned .rbx { z-index: 1; }
html.story-pinned .rbx:not(.rbx--arrived) .rbx__copy,
html.story-pinned .rbx:not(.rbx--arrived) .rbx__hint { opacity: 0; }
html.story-pinned .rbx .rbx__copy, html.story-pinned .rbx .rbx__hint { transition: opacity .7s cubic-bezier(.22, 1, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-abx-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Shorter laptop screens: a more compact card so it clears the header and the bottom edge */
@media (min-width: 900px) and (max-height: 760px) {
  html.story-pinned .abx__card { width: clamp(340px, 36vw, 500px); }
  html.story-pinned .abx__beat h2, html.story-pinned .abx__beat h3 { font-size: clamp(32px, 3vw, 46px); }
  html.story-pinned .abx__beat p { font-size: 15px; margin-top: 10px; }
  html.story-pinned .abx__eyebrow { padding-top: 16px; }
  html.story-pinned .abx__beat { padding-bottom: 18px; }
}
/* Leave room for the chapter rail on large screens (as the Services section does) */
@media (min-width: 1240px) { html.story-pinned .abx__avatar { right: 72px; } }
/* Tablets in flow layout: a readable card width */
@media (min-width: 600px) and (max-width: 899px) { .abx__card { width: min(640px, calc(100% - 32px)); margin: 0 auto; } }

/* Phones: pinned, Jeremy on top, one card at a time below him (about.js → createMobile) */
@media (max-width: 899px) {
  .abx.abx--mpin { height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
  .abx--mpin .abx__stage { height: 100%; padding: calc(var(--header-h, 64px) + 14px) 0 16px; justify-content: center; }
  .abx--mpin .abx__avatar { order: -1; align-self: center; margin: 0; width: calc(100vw - 32px); height: auto; aspect-ratio: 1300 / 1193; max-width: none; flex: none; } /* same width as the card */
  .abx--mpin .abx__card { margin: -12px 16px 0; flex: none; }
  .abx--mpin .abx__beats { display: grid; }
  .abx--mpin .abx__beat { grid-area: 1 / 1; border-top: 0 !important; opacity: 0; transform: translateY(14px); visibility: hidden;
    transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1), visibility .5s; }
  .abx--mpin .abx__beat.is-on { opacity: 1; transform: none; visibility: visible; }
  .abx--mpin .abx__beat h2, .abx--mpin .abx__beat h3 { font-size: clamp(34px, 9.4vw, 46px); line-height: .96; }
  .abx--mpin .abx__beat p { font-size: clamp(15.5px, 4.2vw, 18px); line-height: 1.42; margin-top: 10px; }
  .abx--mpin .abx__sig { font-size: 12.5px !important; }
  .abx--mpin .abx__chips { display: none; } /* keeps all three cards the same size (the labels appear on desktop) */
  .abx--mpin .abx__beat { padding: 12px 22px 22px; }
}
@media (max-width: 899px) and (max-height: 780px) {
  /* shorter iPhone screens (Safari's bars showing): keep the full-width shoulders visible, tighten the card */
  .abx--mpin .abx__stage { padding: calc(var(--header-h, 64px) + 6px) 0 8px; }
  .abx--mpin .abx__card { margin-top: -6px; }
  .abx--mpin .abx__eyebrow { padding: 12px 18px 0; font-size: 10px; }
  .abx--mpin .abx__beat { padding: 6px 18px 14px; }
  .abx--mpin .abx__beat h2, .abx--mpin .abx__beat h3 { font-size: clamp(27px, 7.6vw, 34px); }
  .abx--mpin .abx__beat p { font-size: 14.5px; line-height: 1.36; margin-top: 7px; }
  .abx--mpin .abx__sig { font-size: 11px !important; }
}



.abx__beat p b { font-weight: 600; }
html.story-pinned .abx__beat p b { color: #fbfaf6; }