/* The membership page (/xx/membership/), alternative A, approved on 28 October 2026 (review/redesign/pages/).
   After the membership page of the Association for Project Management (apm.org.uk/membership):
   a title band with a photograph bleeding to the right edge, a strip of links to the parts of the page, the benefits,
   one panel with who can join and the fee (APM's grade card with its annual subscription), and the action.
   Header, footer, phone survey bar and reveal safety: web/site.css and web/site.js. Colours only from tokens.css. */
:root { --edge: max(0px, calc((100% - var(--cap-container)) / 2)); }

/* Shared: the survey button with its arrow (approved) */
.cta { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 18px 32px; font: 600 17px/20px var(--cap-font-sans); text-decoration: none; color: var(--cap-white); }
.cta:hover, .cta:focus-visible { color: var(--cap-white); }
.cta svg { flex: none; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cta:hover svg { transform: translateX(3px); } }
.cap-dark a.cap-button { color: var(--cap-ink); text-decoration: none; }
.cap-dark .cap-button:focus-visible { outline: 2px solid var(--cap-gold); outline-offset: 2px; }
.label { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.kicker { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-gold); }
.kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-gold); }
/* In-page targets land below nothing fixed, with a little air */
[id] { scroll-margin-top: var(--cap-space-5); }

/* ---------- 1. Title band: light ground, the Almaty photograph to the right edge (APM's coloured band with a member's portrait) ---------- */
.mh { position: relative; background: var(--cap-light); overflow: hidden; }
.mh .cap-container { position: relative; z-index: 1; min-height: 440px; display: flex; align-items: center; }
.mh-text { width: min(560px, 100%); padding: var(--cap-space-8) 0; }
.mh h1 { font: var(--cap-text-display); color: var(--cap-ink); }
.mh-value { margin-top: var(--cap-space-4); font: 600 20px/30px var(--cap-font-sans); color: var(--cap-ink); text-wrap: pretty; }
.mh .cta { margin-top: var(--cap-space-6); }
/* The photograph: 2 image pixels or more per CSS pixel at 1440 px; the one 45 degree cut of the band, top right */
.mh-photo { position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--edge) + 552px); margin: 0; --cap-cut: 24px; }
.mh-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 60%; }

/* ---------- 2. On this page: APM's strip of section links under the band ---------- */
.toc { border-bottom: 1px solid var(--cap-ink-20); background: var(--cap-white); }
.toc ul { display: flex; flex-wrap: wrap; gap: 0 var(--cap-space-5); list-style: none; margin: 0 0 0 -12px; padding: var(--cap-space-2) 0; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 600 15px/20px var(--cap-font-sans); color: var(--cap-turquoise-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.toc a:hover, .toc a:focus-visible { text-decoration-thickness: 2px; }

/* ---------- 3. What membership will offer: six benefits with their full descriptions ---------- */
.sec { padding: var(--cap-space-8) 0; }
.ben-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--cap-space-7); align-items: end; }
.ben-head h2 { font: var(--cap-text-h1); color: var(--cap-ink); text-wrap: balance; }
.ben-lede { font: var(--cap-text-body); color: var(--cap-slate); max-width: 34em; padding-bottom: 4px; }
.ben { list-style: none; margin: var(--cap-space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cap-space-7) var(--cap-space-6); }
.ben li { position: relative; padding-top: 20px; border-top: 1px solid var(--cap-ink-20); }
.ben li::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; background: var(--cap-turquoise); transform-origin: 0 50%; }
.ben-num { position: absolute; right: 0; top: 22px; font: var(--cap-text-caption); letter-spacing: 0.08em; color: var(--cap-slate); font-variant-numeric: tabular-nums; }
.ben h3 { font: var(--cap-text-h3); color: var(--cap-ink); padding-right: 40px; text-wrap: balance; }
.ben p { margin-top: var(--cap-space-3); font: var(--cap-text-small); color: var(--cap-slate); text-wrap: pretty; }

/* ---------- 4. Supplier qualification: the wide ink panel, each sentence of the plan on its own line ---------- */
.sec--qual { padding-top: 0; }
.qual { --cap-cut: 24px; padding: var(--cap-space-7) var(--cap-space-7) var(--cap-space-7); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--cap-space-7); }
.qual h2 { margin-top: var(--cap-space-4); font: var(--cap-text-h2); color: var(--cap-white); text-wrap: balance; }
.qual-list { margin: 0; padding: 0; }
.qual-list li { padding: var(--cap-space-3) 0 var(--cap-space-3) calc(0.4em + 12px); border-top: 1px solid var(--cap-ink-80); color: var(--cap-ink-10); text-wrap: pretty; }
.qual-list li:first-child { border-top: 0; padding-top: 0; }
.cap-dark .qual-list li::before { top: calc(var(--cap-space-3) + 0.55em); }
.cap-dark .qual-list li:first-child::before { top: 0.55em; }

/* ---------- 5. Who can join and the expected fee: one panel, as APM's grade card with its annual subscription ---------- */
.sec--join { background: var(--cap-light); }
.join { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--cap-white); border: 1px solid var(--cap-ink-20); }
.join > div { padding: var(--cap-space-7); }
.join-fee { border-left: 1px solid var(--cap-ink-20); }
.join h2 { font: var(--cap-text-h2); color: var(--cap-ink); }
.join-text { margin-top: var(--cap-space-4); max-width: 26em; font: 600 20px/32px var(--cap-font-sans); color: var(--cap-ink); text-wrap: pretty; }
.fee-figure { margin-top: var(--cap-space-4); font: var(--cap-text-display); color: var(--cap-ink); font-variant-numeric: lining-nums; white-space: nowrap; }
.fee-unit { margin-top: var(--cap-space-1); font: 600 15px/24px var(--cap-font-sans); color: var(--cap-ink); }
.join-partners { margin-top: var(--cap-space-4); padding-top: var(--cap-space-4); border-top: 1px solid var(--cap-ink-20); max-width: 30em; font: var(--cap-text-small); color: var(--cap-slate); text-wrap: pretty; }
.fee-open { position: relative; margin-top: var(--cap-space-4); padding-left: 22px; max-width: 26em; font: 600 15px/24px var(--cap-font-sans); color: var(--cap-ink); text-wrap: pretty; }
.fee-open::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; background: var(--cap-turquoise-deep); }
.fee-text { margin-top: var(--cap-space-4); padding-top: var(--cap-space-4); border-top: 1px solid var(--cap-ink-20); font: var(--cap-text-small); color: var(--cap-slate); max-width: 26em; }

/* ---------- 6. When membership opens, and the survey (the closing band of the home page, shorter) ---------- */
.closing { background: var(--cap-turquoise-12); padding: 96px 0; }
.stage { --cap-cut: 24px; padding: 72px 64px 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: end; }
.stage h2 { margin-top: 20px; font: var(--cap-text-h1); color: var(--cap-white); text-wrap: balance; }
.stage-lede { margin-top: var(--cap-space-4); color: var(--cap-ink-10); max-width: 32em; }
.stage .cta { display: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 80px; margin: 0; padding: 24px 32px; font: 600 20px/24px var(--cap-font-sans); }
.stage .cta svg { width: 22px; height: 22px; }
.stage-act { padding-bottom: 4px; }

/* ---------- Entry motion: once, CSS only. The title band on load (done by 1.3 s); each later section when it enters (done within 1.2 s) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes photo-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .mh-photo img { animation: photo-in 1200ms var(--ease-out) 100ms both; }
  .mh-text > * { animation: rise 500ms var(--ease-out) both; }
  .mh-text > :nth-child(1) { animation-delay: 200ms; }
  .mh-text > :nth-child(2) { animation-delay: 270ms; }
  .mh-text > :nth-child(3) { animation-delay: 340ms; }
  .toc li { animation: rise 420ms var(--ease-out) both; animation-delay: calc(480ms + var(--i, 0) * 50ms); }

  /* Later sections: held until the script has armed them, then played once by .is-in */
  .js-reveal [data-block]:not(.is-in) .rv { opacity: 0; }
  .js-reveal [data-block]:not(.is-in) .ben li::before { transform: scaleX(0); }
  [data-block].is-in .rv { animation: rise 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
  [data-block].is-in .ben li::before { animation: draw 700ms var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 60ms); }
  [data-block].is-in .stage.rv { animation-duration: 560ms; }
}

/* ---------- Under 1200 px: photograph narrower, footer columns as approved ---------- */
@media (max-width: 1199px) {
  .mh-photo { width: 42%; }
  .mh-text { width: min(520px, 54%); }
  .ben { gap: var(--cap-space-6) var(--cap-space-5); }
}
@media (max-width: 1023px) {
  .mh .cap-container { min-height: 0; display: block; }
  .mh-photo { position: relative; width: 100%; height: 280px; }
  .mh-text { width: auto; max-width: 640px; padding: var(--cap-space-6) 0 var(--cap-space-7); }
  .ben-head { display: block; max-width: 680px; }
  .ben-lede { margin-top: var(--cap-space-4); }
  .ben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qual { display: block; padding: var(--cap-space-6); }
  .qual-list { margin-top: var(--cap-space-5); }
  .join { grid-template-columns: minmax(0, 1fr); }
  .join > div { padding: var(--cap-space-6); }
  .join-fee { border-left: 0; border-top: 1px solid var(--cap-ink-20); }
  .stage { padding: 56px 40px 48px; grid-template-columns: 1fr; align-items: start; gap: 32px; }
  .stage-act { max-width: 440px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .mh-photo { height: 168px; --cap-cut: 16px; }
  .mh-text { padding: var(--cap-space-5) 0 var(--cap-space-6); }
  .mh-value { font-size: 18px; line-height: 28px; margin-top: var(--cap-space-3); }
  .mh .cta { display: flex; width: 100%; justify-content: center; margin-top: var(--cap-space-5); padding: 18px 16px; }

  .toc ul { display: block; margin: 0 -12px; padding: var(--cap-space-2) 0; }
  .toc a { padding: 0 12px; font-size: 14px; }
  .join-text { font-size: 18px; line-height: 28px; }

  .sec { padding: var(--cap-space-7) 0; }
  .sec--qual { padding-top: 0; }
  .ben { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--cap-space-5); }
  .ben li { padding: 16px 0 20px; }
  .ben li:last-child { border-bottom: 1px solid var(--cap-ink-20); }
  .ben-num { top: 19px; }
  .ben p { margin-top: var(--cap-space-2); }

  .qual { --cap-cut: 16px; margin: 0 -16px; padding: var(--cap-space-6) var(--cap-space-4); }
  .join { margin: 0 -1px; }
  .join > div { padding: var(--cap-space-5) var(--cap-space-4) var(--cap-space-6); }
  .fee-figure { font: var(--cap-text-display); }

  .closing { padding: 32px 0 48px; }
  .stage { --cap-cut: 16px; margin: 0 -16px; padding: 40px 16px 32px; gap: 28px; }
  .stage h2 { margin-top: var(--cap-space-3); }
  .stage-act { max-width: none; }
  .stage .cta { min-height: 64px; padding: 20px 20px; font-size: 18px; }
}

/* Reduced motion: nothing moves, no animations and no transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cap-button:active, a:hover svg, a:focus-visible svg { transform: none !important; }
}
/* Print: every part shows */
@media print {
  *, *::before, *::after { opacity: 1 !important; animation: none !important; transition: none !important; }
  .sticky-bar { display: none !important; }
}