/* Our team page (/our-team). Every class starts with otm; build.py links this file only on pages that use it.
   The page uses the site's hero, sections, cards, steps and type. otm covers only what is unique: the
   photo studio (lineup frames, the leadership stage, figures, camera push-in), the team photo and the photo rows.
   The studio backdrop is the flat grey of the portraits (#acb7bd), so each photo blends into it and only
   the person shows; one light layer (--otm-light) sits above the photos so the falloff matches. The stage
   is a feature-style card: copy on the panel (site type, both themes), studio on the right. team.js adds
   .otm-live (motion only) to pin it and step each person forward; without it the four cards stack. */

#leadership {
  --otm-studio: #acb7bd;
  --otm-light:
    radial-gradient(120% 90% at 50% 30%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 46%, rgba(22, 28, 34, 0.22) 100%),
    linear-gradient(0deg, rgba(22, 28, 34, 0.12), rgba(22, 28, 34, 0) 20%);
  --otm-top: var(--head-h);
  --otm-h: calc(100vh - var(--otm-top) - 32px);
}
@supports (height: 100svh) { #leadership { --otm-h: calc(100svh - var(--otm-top) - 32px); } }

/* ---------- Lineup: four site cards, each with a studio frame */
.otm-lineup { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0 0 clamp(16px, 2vw, 24px); padding: 0; }
.otm-lineup .otm-card { height: 100%; padding: 0; gap: 0; color: inherit; text-decoration: none; }
.otm-card .card__body { gap: 4px; }
.otm-frame { position: relative; isolation: isolate; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--otm-studio); }
.otm-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--otm-light); pointer-events: none; }
.otm-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; }
html.motion .otm-frame img { transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
html.motion .otm-card:hover .otm-frame img { transform: scale(1.04); }

/* ---------- Stage: one feature-style card per person (stacked), or one pinned card (.otm-live) */
.otm-stage { display: grid; gap: clamp(16px, 2vw, 24px); }
.otm-person { display: grid; grid-template-columns: 46% 54%; overflow: hidden; border-radius: var(--radius-card); background: var(--panel); scroll-margin-top: calc(var(--head-h) + 16px); }
:root[data-theme="light"] .otm-person, :root[data-theme="light"] .otm-live .otm-stage { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.otm-p__copy .lead { max-width: 30ch; }
.otm-p__copy .body-2 { max-width: 36ch; }
.otm-p__studio { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(460px, 52vw, 660px); background: var(--otm-studio); }
.otm-p__studio::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--otm-light); pointer-events: none; }
.otm-p__fig { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 94%; aspect-ratio: 3 / 4; margin: 0 auto; transform-origin: 50% 100%; }
.otm-p__fig img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
/* Camera push-in for full-body photos (team.js adds .otm-person--full to any person whose photo is tall).
   The origin sits on the eye line (--otm-eyes, from the top of the photo; set it on the article if a new
   photo frames the face higher or lower). A full-body photo's box is the photo itself, with feathered edges. team.js scales from the full figure towards head and shoulders
   as the person takes the stage; without .otm-live (reduced motion, or a short screen) the photo simply
   shows that closer framing, still. */
.otm-person--full .otm-p__fig img {
  position: absolute; left: 50%; bottom: 0; width: auto; height: 100%; max-width: none; object-fit: fill;
  translate: -50% 0; transform-origin: 50% var(--otm-eyes, 18.5%);
  /* The photo's edges fade into the studio, so a backdrop a shade off #acb7bd leaves no seam. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 4%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 4%);
  mask-composite: intersect;
}
.otm-cast:not(.otm-live) .otm-person--full .otm-p__fig img { transform: translate3d(0, 7%, 0) scale(1.6); }
.otm-quote { margin: 0; padding-left: 16px; max-width: 34ch; border-left: 2px solid var(--gold-line); }
.otm-quote p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; letter-spacing: -0.012em; color: var(--ink); }
.otm-quote footer { margin-top: 10px; }
.otm-quote a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.otm-index { display: none; }

/* Pinned (team.js, motion only): the card stays on screen; people are layers inside it. */
.otm-live { height: calc(100vh * 4); height: calc(100svh * 4); }
.otm-live .otm-cast__pin { position: sticky; top: calc(var(--otm-top) + 16px); height: var(--otm-h); }
.otm-live .otm-stage { position: relative; isolation: isolate; display: block; height: 100%; overflow: hidden; border-radius: var(--radius-card); background: var(--panel); }
.otm-live .otm-stage::before, .otm-live .otm-stage::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 46%; pointer-events: none; }
.otm-live .otm-stage::before { z-index: 0; background: var(--otm-studio); }
.otm-live .otm-stage::after { z-index: 2; background: var(--otm-light); }
:root .otm-live .otm-person { position: absolute; inset: 0; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
.otm-live .otm-p__copy { position: relative; z-index: 3; padding-bottom: 112px; }
.otm-live .otm-p__studio { z-index: 1; min-height: 0; background: none; isolation: auto; }
.otm-live .otm-p__studio::after { display: none; }
.otm-live .otm-p__fig, .otm-live .otm-p__copy { opacity: 0; will-change: transform, opacity; }

.otm-live .otm-index { display: flex; position: absolute; z-index: 4; left: 0; bottom: 0; width: 46%; gap: 4px; padding: 0 clamp(22px, 3.6vw, 48px) clamp(20px, 3vw, 36px); opacity: 0; }
.otm-index button { appearance: none; display: grid; flex: 1 1 0; justify-items: start; gap: 9px; min-width: 0; min-height: 44px; padding: 12px 8px 8px; border: 0; border-radius: var(--radius-field); background: none; color: var(--ink-2); font: 600 13px/1.2 var(--font-body); text-align: left; cursor: pointer; }
.otm-index button:hover { background: var(--chip); }
.otm-index button:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 1px; }
.otm-index button[aria-current="true"] { color: var(--ink); }
.otm-index button span { color: var(--accent-text); }
.otm-index em { font-style: normal; }
.otm-index i { display: block; width: 100%; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line-2); }
.otm-index i b { display: block; height: 100%; background: var(--gold-grad); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Wider team */
.otm-photo { display: grid; gap: 12px; margin: 0; }
.otm-photo__frame { overflow: hidden; aspect-ratio: 21 / 9; border-radius: var(--radius-card); background: var(--chip); transform-origin: 50% 0; }
.otm-photo__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
html.motion .otm-photo__frame img { height: 114%; margin-top: -7%; will-change: transform; }
.otm-specs { margin-top: clamp(16px, 2vw, 24px); }
.otm-specs .psg-figure { font-size: clamp(44px, 4.6vw, 60px); letter-spacing: -0.04em; color: var(--accent-text); }

/* ---------- Culture photos: two rows inside the content width; still and wrapped, or drifting with motion */
.otm-reel { display: grid; gap: clamp(10px, 1.4vw, 16px); overflow: hidden; border-radius: var(--radius-card); }
.otm-reel__row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.4vw, 16px); }
.otm-shot { position: relative; flex: 0 0 auto; height: clamp(150px, 18vw, 250px); margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--chip); }
.otm-shot img { width: auto; height: 100%; max-width: none; object-fit: cover; }
.otm-shot figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 11px; border-radius: var(--radius-pill); background: rgba(12, 14, 17, 0.74); color: #fff; font: 600 12.5px/1 var(--font-body); }
.otm-reel--live .otm-reel__row { flex-wrap: nowrap; justify-content: flex-start; width: max-content; will-change: transform; }

/* ---------- How we work */
.otm-way { margin-top: clamp(16px, 2vw, 24px); align-items: center; }
.otm-way__actions { justify-content: flex-end; gap: 12px 16px; }

/* ---------- Tablets and phones */
@media (max-width: 960px) {
  .otm-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .otm-lineup { gap: 12px; }
  .otm-lineup .otm-card .card__body { padding: 14px 14px 16px; }
  .otm-card .h-card { font-size: 17px; }
  .otm-person { grid-template-columns: minmax(0, 1fr); }
  .otm-p__studio { order: -1; min-height: 0; aspect-ratio: 4 / 5; }
  .otm-p__copy .h-page { font-size: 34px; }
  .otm-p__copy .lead { font-size: 17px; }
  .otm-quote p { font-size: 17px; }
  .otm-way__actions { justify-content: flex-start; }
  .otm-cast:not(.otm-live) .otm-person--full .otm-p__fig img { transform: translate3d(0, 4%, 0) scale(1.3); }

  /* Pinned on phones: studio on top, copy below, the index between them. */
  #leadership { --otm-split: 52%; }
  .otm-live .otm-stage::before, .otm-live .otm-stage::after { left: 0; bottom: calc(100% - var(--otm-split)); }
  :root .otm-live .otm-person { display: block; }
  .otm-live .otm-p__studio { position: absolute; left: 0; right: 0; top: 0; height: var(--otm-split); aspect-ratio: auto; }
  .otm-live .otm-p__copy { position: absolute; left: 0; right: 0; top: var(--otm-split); bottom: 0; justify-content: flex-start; gap: 10px; padding: 58px 20px 18px; }
  .otm-live .otm-p__copy .h-page { font-size: 30px; }
  .otm-live .otm-p__copy .lead { font-size: 16px; }
  .otm-live .otm-quote p { font-size: 16px; }
  .otm-live .otm-index { top: var(--otm-split); bottom: auto; width: auto; right: 0; padding: 4px 12px 0; }
  .otm-index button { padding: 10px 6px 6px; font-size: 11.5px; }
  .otm-index em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .otm-photo__frame { aspect-ratio: 4 / 3; }
  .otm-shot { border-radius: var(--radius-ticket); }
}