/* Affiliate Partnerships · page-scoped styles (loaded after pages.css). Every selector starts with
   .page-affiliate-partnerships. Tokens only, sharp corners, no shadows. Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5): hero C2
   on the rooftop conversation, who should join on the crest navy, the chain drawn once, a scroll film for
   Partnership opportunities (2026-10-15, in place of the zoom), the three categories as doors, the benefits on the crest navy, the success split and the closing band. */

/* ───────────── hero · the .vhero family (REVAMP-PLAN §2, canonical block, scoped to this page) ───────────── */
.page-affiliate-partnerships .vhero { position: relative; isolation: isolate; overflow: clip; background-color: var(--deep); color: var(--text-1); }
.page-affiliate-partnerships .vhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: var(--deep); }
.page-affiliate-partnerships .vhero__img, .page-affiliate-partnerships .vhero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 767px) { .page-affiliate-partnerships .vhero__img, .page-affiliate-partnerships .vhero__film { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.page-affiliate-partnerships .vhero__film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.page-affiliate-partnerships .vhero__film.is-playing { opacity: 1; }
/* a band under the clear bar and a deep foot under the words; the bottom edge stays clean */
.page-affiliate-partnerships .vhero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--veil) / 0.55), rgb(var(--veil) / 0) 24%),
              linear-gradient(to top, rgb(var(--veil) / 0.9), rgb(var(--veil) / 0.55) 34%, rgb(var(--veil) / 0) 64%); }
.page-affiliate-partnerships .vhero__inner { display: grid; align-content: end; gap: var(--space-head); min-height: max(38rem, 100svh);
  padding: calc(var(--nav-h) + 4rem) var(--edge) clamp(3rem, 2rem + 4vw, 6rem); }
.page-affiliate-partnerships .vhero__head, .page-affiliate-partnerships .vhero__aside { display: grid; gap: var(--space-head); justify-items: start; align-content: end; }
.page-affiliate-partnerships .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-affiliate-partnerships .vhero__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); }
.page-affiliate-partnerships .vhero__title { max-width: 18ch; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-affiliate-partnerships .vhero__title { font-weight: 400; } }
.page-affiliate-partnerships .vhero__lede { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-affiliate-partnerships .vhero__action { justify-self: start; margin-top: calc(var(--space-action) - var(--space-head)); }
@media (min-width: 992px) {
  .page-affiliate-partnerships .vhero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .page-affiliate-partnerships .vhero__head { grid-column: 1 / span 7; }
  .page-affiliate-partnerships .vhero__aside { grid-column: 9 / -1; }
}
/* C2: centred words over a pooled veil */
.page-affiliate-partnerships .vhero--c2 .vhero__inner { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; text-align: center; }
.page-affiliate-partnerships .vhero--c2 .vhero__head, .page-affiliate-partnerships .vhero--c2 .vhero__aside { grid-column: 1 / -1; justify-items: center; }
.page-affiliate-partnerships .vhero--c2 .vhero__action { justify-self: center; }
.page-affiliate-partnerships .vhero--c2 .vhero__veil { background: linear-gradient(to bottom, rgb(var(--veil) / 0.55), rgb(var(--veil) / 0) 24%),
  radial-gradient(ellipse 70% 60% at 50% 55%, rgb(var(--veil) / 0.72), rgb(var(--veil) / 0.35) 70%, rgb(var(--veil) / 0.2)); }
.page-affiliate-partnerships .vhero--short .vhero__inner { min-height: max(32rem, 76svh); }
/* the arrival */
.page-affiliate-partnerships .vhero__img { animation: vhero-settle 2600ms var(--ease-out) both; }
.page-affiliate-partnerships .vhero__crest, .page-affiliate-partnerships .vhero__label, .page-affiliate-partnerships .vhero__title, .page-affiliate-partnerships .vhero__lede, .page-affiliate-partnerships .vhero__action { animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-affiliate-partnerships .vhero__crest { animation-delay: 60ms; } .page-affiliate-partnerships .vhero__label { animation-delay: 160ms; } .page-affiliate-partnerships .vhero__title { animation-delay: 280ms; }
.page-affiliate-partnerships .vhero__lede { animation-delay: 460ms; } .page-affiliate-partnerships .vhero__action { animation-delay: 600ms; }
@keyframes vhero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes vhero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .page-affiliate-partnerships .vhero__img, .page-affiliate-partnerships .vhero__crest, .page-affiliate-partnerships .vhero__label, .page-affiliate-partnerships .vhero__title, .page-affiliate-partnerships .vhero__lede, .page-affiliate-partnerships .vhero__action { animation: none; }
  .page-affiliate-partnerships .vhero__film { display: none; }
}
/* C2 on this page: a sunlit rooftop in daylight, so the pool under the centred words is deeper than the family's and
   reaches the label and the crest above the title; phones take the portrait crop, the two people above the words */
.page-affiliate-partnerships .vhero--c2 .vhero__veil { background:
  linear-gradient(to bottom, rgb(var(--veil) / 0.6), rgb(var(--veil) / 0) 26%),
  radial-gradient(ellipse 72% 66% at 50% 52%, rgb(var(--veil) / 0.8), rgb(var(--veil) / 0.5) 68%, rgb(var(--veil) / 0.32)); }
.page-affiliate-partnerships [data-slot="affiliate-partnerships/hero"] { --focus: 50% 40%; }
@media (max-width: 767px) {
  .page-affiliate-partnerships .vhero--c2 .vhero__inner { align-content: end; }
  .page-affiliate-partnerships .vhero--c2 .vhero__veil { background:
    linear-gradient(to bottom, rgb(var(--veil) / 0.62), rgb(var(--veil) / 0) 22%),
    linear-gradient(to top, rgb(var(--veil) / 0.94), rgb(var(--veil) / 0.86) 44%, rgb(var(--veil) / 0.5) 68%, rgb(var(--veil) / 0.2)); }
}
.page-affiliate-partnerships .vhero.is-parallax .vhero__media, .page-affiliate-partnerships .vhero.is-parallax .vhero__inner { will-change: transform; }

/* ───────────── navy sections · clean hard edges, their own air (REVAMP-PLAN §3.2, until the shared rule exists) ───────────── */
.page-affiliate-partnerships .section[data-tone="dark"], .page-affiliate-partnerships .section + .section[data-tone="dark"], .page-affiliate-partnerships .section[data-tone="dark"] + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }

/* 2 · why become an affiliate partner: the heading and the existing page's two sentences on the left; the six benefits
   from the brief as an index of gold line icons on the right from 992px, one per row (two columns from 640 to 991px,
   where the list runs the full width under the words). Audit: two columns in the right half broke four of the six
   names onto a second line at 1024, two at 1340 and one at 1440, and left the half empty under three short rows; one
   column reads as a clean list and ends level with the words beside it */
.page-affiliate-partnerships .ap-why__grid { display: grid; }
.page-affiliate-partnerships .ap-why__list .index__item { padding: 1.4rem 0 1.6rem; }
/* title-only items (this list and the benefits): the icon sits level with the title instead of spanning two rows */
.page-affiliate-partnerships .ap-icons .index__item { align-items: center; }
.page-affiliate-partnerships .ap-icons .index__icon { grid-row: 1; }
@media (min-width: 992px) {
  .page-affiliate-partnerships .ap-why__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .page-affiliate-partnerships .ap-why__head { grid-column: 1 / span 5; margin-bottom: 0; }
  .page-affiliate-partnerships .ap-why__list { grid-column: 7 / -1; grid-template-columns: minmax(0, 1fr); }
}

/* 3 · who should join, on the crest navy: the notice plate (navy night, hairline) as the brief's "premium icon cards":
   the gold icon at the top, the profession at the foot. Two columns up to 991px, five from 992px (two even rows of five) */
.page-affiliate-partnerships .ap-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .page-affiliate-partnerships .ap-cards { gap: var(--col-gap); } }
@media (min-width: 992px) { .page-affiliate-partnerships .ap-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.page-affiliate-partnerships .ap-card { justify-content: space-between; gap: 1.75rem; min-height: 9.5rem; padding: 1.25rem; }
@media (min-width: 768px) { .page-affiliate-partnerships .ap-card { min-height: 10.5rem; padding: clamp(1.25rem, 1.8vw, 2rem); } }
@media (min-width: 992px) { .page-affiliate-partnerships .ap-card { min-height: 12.5rem; } }
.page-affiliate-partnerships .ap-card__icon { flex: none; width: 32px; height: 32px; color: var(--accent); }
.page-affiliate-partnerships .ap-card__title { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.25; color: var(--text-1); text-wrap: balance; }
/* five across between 992 and 1199px leaves a card about 170px wide: the body size keeps "professionals" inside it */
@media (min-width: 992px) and (max-width: 1199px) { .page-affiliate-partnerships .ap-card__title { font-size: var(--fs-body); } }

/* 4 · how the partnership works (the signature moment): the shared chain becomes the brief's "clean horizontal process
   infographic" from 992px: five steps on one gold hairline, each a diamond, its number and its name. On arrival the
   hairline draws from Introduce to Build long-term relationships one link at a time, and each diamond fills as the line
   reaches it (pages.js initDiagram sets --i on every step, adds is-ready, then is-drawn once it is in view). Below 992px
   the shared vertical chain, centred, with the same marks. Without script or under reduced motion: drawn at rest */
.page-affiliate-partnerships .ap-chain { --ap-step: 560ms; max-width: 36rem; counter-reset: ap-step; }
.page-affiliate-partnerships .ap-chain .diagram__node { counter-increment: ap-step; flex-direction: column; gap: 0.7rem; min-height: 0; padding: 0; text-align: center; }
.page-affiliate-partnerships .ap-chain .diagram__node::before { content: counter(ap-step, decimal-leading-zero); order: 1; flex: none; width: auto; height: auto; background: none; transform: none; font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--text-3); }
.page-affiliate-partnerships .ap-chain__mark { position: relative; z-index: 1; flex: none; width: 11px; height: 11px; margin: 2px 0; border: 1px solid var(--accent); background-color: var(--accent); transform: rotate(45deg); }
.page-affiliate-partnerships .ap-chain__name { order: 2; max-width: 16ch; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--text-1); text-wrap: balance; }
.page-affiliate-partnerships .ap-chain__keep { white-space: nowrap; }
.page-affiliate-partnerships .ap-chain .diagram__node + .diagram__node { margin-top: 3.25rem; }
.page-affiliate-partnerships .ap-chain .diagram__node + .diagram__node::after { height: 3.25rem; }
/* the draw: link n runs while the line travels from step n to step n+1, then that step's diamond fills */
.pages-js .page-affiliate-partnerships .ap-chain.is-ready .diagram__node + .diagram__node::after { transform: scaleY(0); transition: transform var(--ap-step) var(--ease-in-out) calc((var(--i, 1) - 1) * var(--ap-step)); }
.pages-js .page-affiliate-partnerships .ap-chain.is-ready .ap-chain__mark { border-color: var(--text-3); background-color: var(--page); transition: background-color var(--dur-3) var(--ease-out) calc(var(--i, 0) * var(--ap-step)), border-color var(--dur-3) var(--ease-out) calc(var(--i, 0) * var(--ap-step)); }
.pages-js .page-affiliate-partnerships .ap-chain.is-drawn .diagram__node + .diagram__node::after { transform: none; }
.pages-js .page-affiliate-partnerships .ap-chain.is-drawn .ap-chain__mark { border-color: var(--accent); background-color: var(--accent); }
@media (min-width: 992px) {
  .page-affiliate-partnerships .ap-chain { max-width: none; }
  .page-affiliate-partnerships .ap-chain .diagram__nodes { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; justify-items: stretch; }
  .page-affiliate-partnerships .ap-chain .diagram__node { gap: 1rem; }
  .page-affiliate-partnerships .ap-chain .diagram__node + .diagram__node { margin-top: 0; }
  /* one link per step, from the diamond before it to its own, on the diamonds' centre line */
  .page-affiliate-partnerships .ap-chain .diagram__node + .diagram__node::after { left: auto; right: 50%; top: 7px; bottom: auto; width: calc(100% + var(--col-gap)); height: 1px; transform-origin: 0 50%; }
  .pages-js .page-affiliate-partnerships .ap-chain.is-ready .diagram__node + .diagram__node::after { transform: scaleX(0); }
  .pages-js .page-affiliate-partnerships .ap-chain.is-drawn .diagram__node + .diagram__node::after { transform: none; }
}

/* 5 · partnership opportunities: a scroll film chapter (.sfilm, css/scroll-film.css) in place of the homepage zoom, navy
   between the white chain and the white doors. The team sits around the low table right of centre, so the words keep the
   foot on the left over the sofas and the chairs */
.page-affiliate-partnerships .ap-film { --focus: 50% 50%; }

/* 6 · partnership categories: three doors, not linked, under a centred head; the name, then the existing line */
.page-affiliate-partnerships .ap-doors__head { display: grid; justify-items: center; text-align: center; }
.page-affiliate-partnerships .ap-door__title { margin-top: 0; }
.page-affiliate-partnerships .ap-door__line { max-width: 36ch; margin-top: 0.9rem; font-size: var(--fs-body); line-height: 1.65; color: var(--text-2); }
.page-affiliate-partnerships [data-slot="affiliate-partnerships/category-resort"] { --focus: 40% 50%; }
.page-affiliate-partnerships .ap-doors .door__img { object-position: var(--focus, 50% 50%); }

/* 7 · who we connect: a crest rule opens it (the pause between two white sections, the same air either side) */
.page-affiliate-partnerships .ap-rule { margin-bottom: var(--section); }
/* 7 · who we connect: the brief's "elegant icon tiles" in one hairline grid (the names component's cells): a hairline
   above and below the grid, and between the tiles (each tile draws its left and bottom edge; the first of each row
   none on the left); five across from 768px, two on phones; icon above the name, centred */
.page-affiliate-partnerships .ap-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
@media (min-width: 768px) { .page-affiliate-partnerships .ap-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* the icons sit on one line across a row whether a name takes one line or two */
.page-affiliate-partnerships .ap-tile { display: grid; justify-items: center; align-content: start; gap: 1.25rem; min-height: clamp(9rem, 12.5vw, 11rem); padding: clamp(2rem, 3.6vw, 3.25rem) 0.75rem 2rem; border-bottom: 1px solid var(--line-2); border-left: 1px solid var(--line-2); text-align: center; }
@media (max-width: 767px) { .page-affiliate-partnerships .ap-tile:nth-child(2n + 1) { border-left: 0; } }
@media (min-width: 768px) { .page-affiliate-partnerships .ap-tile:nth-child(5n + 1) { border-left: 0; } }
.page-affiliate-partnerships .ap-tile__icon { width: 32px; height: 32px; color: var(--accent); }
.page-affiliate-partnerships .ap-tile__name { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-1); text-wrap: balance; }

/* 8 · partnership benefits, on the crest navy: the brief's "elegant icon grid": from 640px the shared index list with the gold icon set
   above each benefit instead of beside it, two across, four from 992px; phones keep the icon beside the words */
.page-affiliate-partnerships .ap-benefits__list .index__item { padding: 1.4rem 0 1.6rem; }
@media (min-width: 640px) {
  .page-affiliate-partnerships .ap-benefits__list .index__item { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 1.1rem; padding: 1.75rem 0 2.25rem; }
  .page-affiliate-partnerships .ap-benefits__list .index__item > :not(.index__icon) { grid-column: 1; grid-row: 2; }
  .page-affiliate-partnerships .ap-benefits__list .index__icon { width: 32px; height: 32px; }
}

/* 9 · success through relationships: between 640 and 991px the photograph runs the full width, so it is cut to 3:2
   instead of standing a full screen tall (4:5 on phones, beside the words from 992px) */
@media (min-width: 640px) and (max-width: 991px) { .page-affiliate-partnerships .ap-success .split__media { aspect-ratio: 3 / 2; } }
.page-affiliate-partnerships [data-slot="affiliate-partnerships/relationships"] { --focus: 62% 50%; }

/* 10 · closing band: the manor and its cypresses stay in the frame at 4:3 and 3:2 */
.page-affiliate-partnerships [data-slot="affiliate-partnerships/closing"] { --focus: 50% 50%; }

/* reduced motion: the chain is drawn at rest, every diamond filled */
@media (prefers-reduced-motion: reduce) {
  .pages-js .page-affiliate-partnerships .ap-chain.is-ready .diagram__node + .diagram__node::after { transform: none; transition: none; }
  .pages-js .page-affiliate-partnerships .ap-chain.is-ready .ap-chain__mark { border-color: var(--accent); background-color: var(--accent); transition: none; }
}