/* Global Partners · page-scoped extensions of the shared components (site.css, pages.css). Tokens only, sharp corners,
   every selector under .page-global-partners. Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5), hero redrawn 2026-10-15
   ("the gathering", Josh: a different style from the zoom): four photographs assemble around the words on the white page,
   then crest navy and white in turn with clean edges. Scrubbed components: none (the hero runs once on arrival, the
   diagram draws once). Markup and reasons: site/global-partners.html, docs/pages/global-partners.md,
   lab/revamp/global-partners-notes.md. */

/* ── navy sections: the plan's padding until the shared rule exists (REVAMP-PLAN.md §3, §8); two white sections in a row
      still share one gap, as pages.css does ── */
.page-global-partners .section[data-tone="dark"], .page-global-partners .section + .section[data-tone="dark"], .page-global-partners .section[data-tone="dark"] + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }

/* ── 1 hero · the gathering. The family's words (crest, label, h1, lede, the one action) centred on the white page under
      the solid bar; four photographs of the partners' world around them. Phones and tablets: a twelve-column grid, two
      photographs above the words and two below, offset as the desktop corners are. From 1024px the words hold the centre
      of a full screen and the four sit in its corners, clear of the words' column at every width ── */
.page-global-partners .gp-hero { --glide: 1rem; position: relative; overflow: clip; background-color: var(--page); color: var(--text-1); }
.page-global-partners .gp-hero__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding: calc(var(--nav-h) + clamp(1.25rem, 0.75rem + 2vw, 2.5rem)) var(--margin) var(--space-open); }
.page-global-partners .gp-hero__words { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: center; margin-block: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); text-align: center; }
.page-global-partners .gp-hero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); margin-bottom: 1.25rem; color: var(--gold); }
.page-global-partners .gp-hero__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
/* the title set larger than the family's 5rem: it is the one thing the four photographs gather around */
.page-global-partners .gp-hero__title { margin-top: 1rem; font-family: var(--font-display); font-size: clamp(2.75rem, 1.4rem + 4.6vw, 6.75rem); font-weight: 300; line-height: 1; letter-spacing: -0.025em; color: var(--text-1); }
@media (max-width: 767px) { .page-global-partners .gp-hero__title { font-weight: 400; } }
/* each line sits in its own mask (Osmo "Masked Text Reveal", in CSS); the padding keeps the ascenders and the g's tail
   inside the mask, the negative margin keeps the line spacing */
.page-global-partners .gp-hero__line { display: block; overflow: clip; padding: 0.06em 0.08em 0.16em; margin: -0.06em -0.08em -0.16em; }
.page-global-partners .gp-hero__line-in { display: block; }
.page-global-partners .gp-hero__lede { max-width: 40ch; margin-top: var(--space-head); font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.page-global-partners .gp-hero__action { margin-top: var(--space-action); }

.page-global-partners .gp-hero__tile { margin: 0; }
.page-global-partners .gp-hero__frame { overflow: hidden; background-color: var(--raised); }
.page-global-partners .gp-hero__img { display: block; width: 100%; height: auto; }
/* phones: the conversation and the village above the words, the model and the lanterns below */
.page-global-partners .gp-hero__tile--talk { grid-column: 1 / span 5; grid-row: 1; align-self: end; }
.page-global-partners .gp-hero__tile--village { grid-column: 7 / -1; grid-row: 1; align-self: start; }
.page-global-partners .gp-hero__tile--model { grid-column: 1 / span 7; grid-row: 3; align-self: start; }
.page-global-partners .gp-hero__tile--lanterns { grid-column: 9 / -1; grid-row: 3; align-self: start; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 768px) {
  .page-global-partners .gp-hero__tile--talk { grid-column: 2 / span 3; }
  .page-global-partners .gp-hero__tile--village { grid-column: 8 / span 4; }
  .page-global-partners .gp-hero__tile--model { grid-column: 2 / span 4; }
  .page-global-partners .gp-hero__tile--lanterns { grid-column: 9 / span 3; }
}
@media (min-width: 1024px) {
  .page-global-partners .gp-hero { --glide: 2rem; }
  .page-global-partners .gp-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: max(44rem, 100svh); padding: calc(var(--nav-h) + 3rem) var(--edge) 3rem; }
  .page-global-partners .gp-hero__words { grid-column: 1; grid-row: 1; max-width: 36rem; margin: 0; }
  /* grid-area auto: an absolute child keeps the whole hero (its padding box) as its frame, not a grid cell */
  .page-global-partners .gp-hero__tile { position: absolute; grid-area: auto; margin: 0; }
  .page-global-partners .gp-hero__tile--talk { left: var(--edge); top: calc(var(--nav-h) + max(3.5rem, 6%)); width: clamp(11rem, 16.5vw, 20rem); }
  .page-global-partners .gp-hero__tile--village { right: calc(var(--edge) + 2.5vw); top: calc(var(--nav-h) + max(2rem, 3.5%)); width: clamp(13rem, 20vw, 24rem); }
  .page-global-partners .gp-hero__tile--model { left: calc(var(--edge) + 3.5vw); bottom: 7%; width: clamp(13rem, 19vw, 23rem); }
  .page-global-partners .gp-hero__tile--lanterns { right: var(--edge); bottom: 5%; width: clamp(10rem, 14.5vw, 18rem); }
}

/* the arrival, CSS so it runs on the first paint: the words rise in turn (the family's MotionSites entrance) and the
   title's two lines rise out of their masks; then the four photographs assemble clockwise from the top left. Each opens
   from the edge that faces the words (Osmo's staggered clip reveal) as it glides a little way in toward them, and its
   picture settles from 1.14. The glide is 1rem on phones and tablets, 2rem from 1024px. Transform and clip-path only, so
   the layout never moves (CLS 0) */
.page-global-partners .gp-hero__tile--talk { --clip: inset(100% 0 0 0); --gx: calc(-1 * var(--glide)); --gy: calc(-0.5 * var(--glide)); --d: 300ms; }
.page-global-partners .gp-hero__tile--village { --clip: inset(100% 0 0 0); --gx: var(--glide); --gy: calc(-0.5 * var(--glide)); --d: 420ms; }
.page-global-partners .gp-hero__tile--lanterns { --clip: inset(0 0 100% 0); --gx: var(--glide); --gy: calc(0.5 * var(--glide)); --d: 540ms; }
.page-global-partners .gp-hero__tile--model { --clip: inset(0 0 100% 0); --gx: calc(-1 * var(--glide)); --gy: calc(0.5 * var(--glide)); --d: 660ms; }
.page-global-partners .gp-hero__crest, .page-global-partners .gp-hero__label, .page-global-partners .gp-hero__lede, .page-global-partners .gp-hero__action { animation: gp-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-global-partners .gp-hero__crest { animation-delay: 60ms; }
.page-global-partners .gp-hero__label { animation-delay: 160ms; }
.page-global-partners .gp-hero__line-in { animation: gp-line 1100ms var(--ease-out) 240ms both; }
.page-global-partners .gp-hero__line + .gp-hero__line .gp-hero__line-in { animation-delay: 360ms; }
.page-global-partners .gp-hero__lede { animation-delay: 520ms; }
.page-global-partners .gp-hero__action { animation-delay: 640ms; }
.page-global-partners .gp-hero__frame { animation: gp-gather 1600ms var(--ease-out) var(--d) both; }
.page-global-partners .gp-hero__img { animation: gp-settle 2600ms var(--ease-out) var(--d) both; }
@keyframes gp-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes gp-line { from { transform: translateY(110%); } to { transform: none; } }
@keyframes gp-gather { from { clip-path: var(--clip); transform: translate3d(var(--gx), var(--gy), 0); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes gp-settle { from { transform: scale(1.14); } to { transform: none; } }
/* phones and tablets (mobile parity pass, 2026-10-15): the two photographs under the words start below the first screen,
   so js/pages/global-partners.js holds any photograph that is off screen at load at the start of its gathering
   (.is-waiting: clipped, a little way out, the picture at 1.14) and starts the same gathering when a quarter of it is in
   view (.is-in), the model first and the lanterns 120 ms after, as the desktop four follow one another. The classes exist
   only while that script runs below 1024px without reduced motion */
@media (max-width: 1023px) {
  .page-global-partners .gp-hero.is-staged .gp-hero__tile.is-waiting .gp-hero__frame { animation: none; clip-path: var(--clip); transform: translate3d(var(--gx), var(--gy), 0); }
  .page-global-partners .gp-hero.is-staged .gp-hero__tile.is-waiting .gp-hero__img { animation: none; transform: scale(1.14); }
  .page-global-partners .gp-hero.is-staged .gp-hero__tile.is-waiting.is-in .gp-hero__frame { animation: gp-gather 1600ms var(--ease-out) var(--d-in, 0ms) both; }
  .page-global-partners .gp-hero.is-staged .gp-hero__tile.is-waiting.is-in .gp-hero__img { animation: gp-settle 2600ms var(--ease-out) var(--d-in, 0ms) both; }
  .page-global-partners .gp-hero__tile--lanterns { --d-in: 120ms; }
}

/* ── 2 the power of partnership on the crest navy: the brief's first sentence at statement size, the crest rule (the
      brief's "subtle gold divider"), then its second paragraph ── */
.page-global-partners .gp-power .intro__statement { max-width: 32ch; }
.page-global-partners .gp-power__rule { width: min(100%, 22rem); margin-top: var(--space-action); }

/* 3 and 6 · label-only icon rows need less air under them than rows with a line of text. In the shared two-column
   layout (640 to 991px) the 16px gutter let a title run up to the next column's icon, so these two lists take a wider
   gutter there and wrap instead */
.page-global-partners .gp-network .index__item,
.page-global-partners .gp-why .index__item { padding-bottom: 1.75rem; }
@media (min-width: 640px) and (max-width: 991px) {
  .page-global-partners .gp-network .index__list,
  .page-global-partners .gp-why__list { column-gap: clamp(2rem, 0.5rem + 3vw, 2.5rem); }
}

/* 4 · strategic partners on the navy: five names in equal cells, each on one line like the logos they stand in for. Two
   columns with the fifth across the row up to 1359px, one row of five from 1360px (the brief's "equal visual sizing") */
.page-global-partners .gp-partners__list { --cols: 2; }
@media (min-width: 640px) and (max-width: 1359px) {
  .page-global-partners .gp-partners__list > .names__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
  .page-global-partners .gp-partners__list .names__field { min-height: calc(2 * 1.4em); }
}
@media (min-width: 1360px) {
  .page-global-partners .gp-partners__list { --cols: 5; }
  .page-global-partners .gp-partners__list .names__item { padding-inline: 0.5rem; }
  .page-global-partners .gp-partners__list .names__name { font-size: clamp(1.625rem, 0.9rem + 1vw, 1.875rem); }
}

/* 5 · how we collaborate: the six principles as a hairline index beside the photograph (one column from 992px). On
   tablets the stacked photograph turns landscape, so it does not fill more than a screen */
.page-global-partners .gp-collab__list { margin-top: var(--space-open); }
.page-global-partners .gp-collab__list .index__item { padding-block: 1.25rem 1.6rem; }
@media (min-width: 640px) and (max-width: 991px) {
  .page-global-partners .gp-collab .split__media { aspect-ratio: 3 / 2; }
  .page-global-partners .gp-collab .split__media img { object-position: 50% 30%; }
}
@media (min-width: 992px) {
  .page-global-partners .gp-collab__list { grid-template-columns: minmax(0, 1fr); }
  .page-global-partners .gp-collab .split__grid { align-items: start; }
}

/* 6 · why partnership matters, on the navy: typography first, the brief's four-column grid from 1280px with two columns
   until then. In four columns the size follows the column width, so the longest reason ("Access to specialized
   expertise") keeps to two lines with air before the next column's icon */
@media (min-width: 992px) and (max-width: 1279px) {
  .page-global-partners .gp-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .page-global-partners .gp-why__list .index__title { font-size: clamp(1.25rem, 2.2vw - 0.45rem, 1.625rem); line-height: 1.2; letter-spacing: -0.005em; }
}

/* 7 · the disciplines diagram on the white page: the gold crest over "Confidante" at the centre, fading in with the label
   as the ring draws. Between 768 and 991px the figure is a little shorter, so the outer labels stay inside the margin */
.page-global-partners .gp-diagram__crest { display: block; width: 2.25rem; height: calc(2.25rem * 1210 / 1092); margin: 0 auto 0.75rem; color: var(--gold); }
@media (min-width: 768px) and (max-width: 991px) {
  .page-global-partners .gp-diagram.diagram--radial { height: clamp(26rem, 56vw, 32rem); }
  .page-global-partners .gp-diagram__crest { width: 1.75rem; height: calc(1.75rem * 1210 / 1092); margin-bottom: 0.5rem; }
}
.page-global-partners .diagram--radial.is-ready .gp-diagram__crest { opacity: 0; transition: opacity var(--dur-4) var(--ease-out) 200ms; }
.page-global-partners .diagram--radial.is-drawn .gp-diagram__crest { opacity: 1; }

/* 8 · the brief's long action, "Start a partnership conversation": on phones the buttons take a narrower side padding so
   the label keeps one line inside the page margin, and wrap to two centred lines where even that is too wide (the form
   card); the form's button runs the card's width */
@media (max-width: 479px) {
  .page-global-partners .gp-hero__action, .page-global-partners .gp-film .sfilm__action { max-width: 100%; padding-inline: 18px calc(18px - 0.2em); white-space: normal; text-align: center; line-height: 1.5; }
  .page-global-partners .gp-form .form__submit { width: 100%; padding: 14px calc(18px - 0.2em) 14px 18px; white-space: normal; text-align: center; line-height: 1.5; }
}

/* 8 · the closing band is a scroll film chapter (.sfilm, css/scroll-film.css): four colleagues walking the waterfront
   toward the lens, the group centred, the words at the foot on the left over the boardwalk. The form answers the band's
   action, so it follows the film closely */
.page-global-partners .gp-film { --focus: 50% 40%; }
/* portrait phones: the lede sits over the sunlit water between the two walking in the middle, so the veil holds deeper
   further up than the component's (measured 3.5:1 at the brightest pixels behind the lede before; 4.5:1 and up after) */
@media (max-width: 767px) {
  .page-global-partners .gp-film .sfilm__veil { background: linear-gradient(to top, rgb(var(--veil) / 0.94) 0%, rgb(var(--veil) / 0.86) 38%, rgb(var(--veil) / 0.5) 62%, rgb(var(--veil) / 0) 82%); }
}
.page-global-partners .gp-film + .gp-form { padding-top: var(--space-open); }

/* ── reduced motion: no arrival; the hero's words and photographs in place from the first paint, the diagram's crest in
      place ── */
@media (prefers-reduced-motion: reduce) {
  .page-global-partners .gp-hero__crest, .page-global-partners .gp-hero__label, .page-global-partners .gp-hero__line-in, .page-global-partners .gp-hero__lede,
  .page-global-partners .gp-hero__action, .page-global-partners .gp-hero__frame, .page-global-partners .gp-hero__img { animation: none; }
  .page-global-partners .diagram--radial.is-ready .gp-diagram__crest { opacity: 1; transition: none; }
}