/* Ambassador Network · page-scoped styles (loaded after pages.css). Every selector starts with .page-ambassador-network.
   Tokens only, sharp corners, no shadows. Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5): hero C1, the crest-navy map band and
   profile cards with clean edges, the experiences rail and the Collaborate doors above the closing band. */

/* ───────────── hero · the .vhero family (REVAMP-PLAN §2, canonical block, scoped to this page) ───────────── */
.page-ambassador-network .vhero { position: relative; isolation: isolate; overflow: clip; background-color: var(--deep); color: var(--text-1); }
.page-ambassador-network .vhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: var(--deep); }
.page-ambassador-network .vhero__img, .page-ambassador-network .vhero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 767px) { .page-ambassador-network .vhero__img, .page-ambassador-network .vhero__film { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.page-ambassador-network .vhero__film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.page-ambassador-network .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-ambassador-network .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-ambassador-network .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-ambassador-network .vhero__head, .page-ambassador-network .vhero__aside { display: grid; gap: var(--space-head); justify-items: start; align-content: end; }
.page-ambassador-network .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-ambassador-network .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-ambassador-network .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-ambassador-network .vhero__title { font-weight: 400; } }
.page-ambassador-network .vhero__lede { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-ambassador-network .vhero__action { justify-self: start; margin-top: calc(var(--space-action) - var(--space-head)); }
@media (min-width: 992px) {
  .page-ambassador-network .vhero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .page-ambassador-network .vhero__head { grid-column: 1 / span 7; }
  .page-ambassador-network .vhero__aside { grid-column: 9 / -1; }
}
/* C2: centred words over a pooled veil */
.page-ambassador-network .vhero--c2 .vhero__inner { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; text-align: center; }
.page-ambassador-network .vhero--c2 .vhero__head, .page-ambassador-network .vhero--c2 .vhero__aside { grid-column: 1 / -1; justify-items: center; }
.page-ambassador-network .vhero--c2 .vhero__action { justify-self: center; }
.page-ambassador-network .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-ambassador-network .vhero--short .vhero__inner { min-height: max(32rem, 76svh); }
/* the arrival */
.page-ambassador-network .vhero__img { animation: vhero-settle 2600ms var(--ease-out) both; }
.page-ambassador-network .vhero__crest, .page-ambassador-network .vhero__label, .page-ambassador-network .vhero__title, .page-ambassador-network .vhero__lede, .page-ambassador-network .vhero__action { animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-ambassador-network .vhero__crest { animation-delay: 60ms; } .page-ambassador-network .vhero__label { animation-delay: 160ms; } .page-ambassador-network .vhero__title { animation-delay: 280ms; }
.page-ambassador-network .vhero__lede { animation-delay: 460ms; } .page-ambassador-network .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-ambassador-network .vhero__img, .page-ambassador-network .vhero__crest, .page-ambassador-network .vhero__label, .page-ambassador-network .vhero__title, .page-ambassador-network .vhero__lede, .page-ambassador-network .vhero__action { animation: none; }
  .page-ambassador-network .vhero__film { display: none; }
}
/* C1 on this page: the Lustica quay is bright under the words, so below 992px (words stacked at the foot) the deep foot
   reaches higher and every line keeps 4.5:1; the portrait crop keeps the village above them on phones */
.page-ambassador-network .vhero [data-slot="ambassador-network/hero"] { --focus: 52% 50%; }
/* the village is busy and bright behind the four-line title: the deep foot reaches higher than the family's and a soft
   pool on the left holds the crest and the label (verify: every line 4.5:1 or more at 1024 and 1440) */
.page-ambassador-network .vhero__veil { background:
  linear-gradient(to bottom, rgb(var(--veil) / 0.6), rgb(var(--veil) / 0) 22%),
  linear-gradient(to top, rgb(var(--veil) / 0.92), rgb(var(--veil) / 0.74) 36%, rgb(var(--veil) / 0.4) 60%, rgb(var(--veil) / 0) 82%),
  linear-gradient(to right, rgb(var(--veil) / 0.42), rgb(var(--veil) / 0) 58%); }
@media (max-width: 991px) {
  .page-ambassador-network .vhero__veil { background:
    linear-gradient(to bottom, rgb(var(--veil) / 0.66), rgb(var(--veil) / 0) 22%),
    linear-gradient(to top, rgb(var(--veil) / 0.94), rgb(var(--veil) / 0.86) 40%, rgb(var(--veil) / 0.5) 66%, rgb(var(--veil) / 0) 88%); }
}
/* phones: the five-line title fills the screen, so the top air is trimmed to the bar plus 1.5rem and the foot to 2rem; the
   whole hero (crest to "Apply now") then sits in the first 390 x 664 screen, as it does at 1440 (2026-10-15) */
@media (max-width: 767px) {
  .page-ambassador-network .vhero__inner { padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 2rem; }
  /* the words now start a little higher, so the deep foot reaches a little higher with them */
  .page-ambassador-network .vhero__veil { background:
    linear-gradient(to bottom, rgb(var(--veil) / 0.66), rgb(var(--veil) / 0) 22%),
    linear-gradient(to top, rgb(var(--veil) / 0.94), rgb(var(--veil) / 0.86) 42%, rgb(var(--veil) / 0.56) 70%, rgb(var(--veil) / 0) 92%); }
}
/* the light parallax moves the media and the words (js/pages/ambassador-network.js); never the picture itself */
.page-ambassador-network .vhero.is-parallax .vhero__media, .page-ambassador-network .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-ambassador-network .section[data-tone="dark"], .page-ambassador-network .section + .section[data-tone="dark"], .page-ambassador-network .section[data-tone="dark"] + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }
/* the doors' panels are navy too: a white section after the navy profiles keeps its own top air, its foot is the gap */
.page-ambassador-network .an-doors { padding-bottom: var(--section); }

/* 2 · what is a Global Ambassador: the hero's clean edge, then the split with the full section air */

/* 3 · global network: the map on the crest navy (the homepage destinations palette via data-tone) */
.page-ambassador-network .an-map .section-head { margin-bottom: var(--space-head); }

/* 4 · responsibilities: four across from 992px, the icon above the name from 640px */
@media (min-width: 640px) {
  .page-ambassador-network .an-duties__list .index__item { grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; padding: 1.75rem 1rem 2.25rem 0; }
  .page-ambassador-network .an-duties__list .index__item > :not(.index__icon) { grid-column: 1; }
  .page-ambassador-network .an-duties__list .index__icon { grid-row: auto; width: 32px; height: 32px; }
}

/* 5 · benefits: the crest rule as the pause between the two white sections, then the plain index list beside the photograph */
.page-ambassador-network .an-rule { margin-bottom: clamp(5rem, 3rem + 6vw, 9rem); } /* the same air as above it (the navy rule's) */
.page-ambassador-network .an-benefits__list { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-head); }
.page-ambassador-network .an-benefits__list .index__item { padding: 1.1rem 0 1.25rem; }
.page-ambassador-network .an-benefits__list .index__item:last-child { border-bottom: 1px solid var(--line-2); }

/* 6 · global community: a scroll film chapter (.sfilm, css/scroll-film.css), navy between the two white sections. The
   diners sit in silhouette at the window table, so the words at the foot on the left fall on the dark of the room */
.page-ambassador-network .an-film { --focus: 50% 50%; }

/* 7 · experiences: the homepage rail; the names under the photographs at the lede size, not the steps' subtitle */
.page-ambassador-network .an-experiences .rail__name { margin-top: 8px; font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; }

/* 8 · who we're looking for: navy-night plates on the crest navy, the gold icon and the profile. Phones: rows, the icon
   beside the words; from 640px two columns of cards, icon at the top and the title at the foot; four from 1200px */
.page-ambassador-network .an-profile { flex-direction: row; align-items: center; gap: 1.25rem; min-height: 0; padding: 1.25rem; }
.page-ambassador-network .an-profile__icon { flex: none; width: 28px; height: 28px; color: var(--accent); }
.page-ambassador-network .an-profile__title { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; letter-spacing: 0; }
@media (min-width: 640px) {
  .page-ambassador-network .an-profiles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-ambassador-network .an-profile { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2.5rem; min-height: 12rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); }
  .page-ambassador-network .an-profile__title { max-width: 16ch; }
}
@media (min-width: 1200px) { .page-ambassador-network .an-profiles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 9 · collaborate: two doors, centred head; the notice line at the lede size (a sentence, not a headline) */
.page-ambassador-network .an-doors .doors__head { display: grid; justify-items: center; text-align: center; }
.page-ambassador-network .an-doors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .page-ambassador-network .an-doors__list { grid-template-columns: minmax(0, 1fr); } }
.page-ambassador-network .an-door__line { max-width: 40ch; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.45; letter-spacing: 0; }

/* 10 · closing band: the glasses and the candle stay in the frame at 4:3 and 3:2 */
.page-ambassador-network [data-slot="ambassador-network/closing"] { --focus: 50% 40%; }

/* the application: the existing page's three steps as a numbered list in the intro column, one column at every width */
.page-ambassador-network .an-apply__steps { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-head); }
.page-ambassador-network .an-apply__steps .index__item { padding: 1.1rem 0 1.5rem; }
.page-ambassador-network .an-apply__steps .index__line { max-width: 40ch; }
/* the intro column holds still beside the form (pages.css): a shorter gap above the email keeps all of it on a 900px
   screen while it is held */
.page-ambassador-network .an-apply .form-block__facts { margin-top: var(--space-action); }
/* two fields side by side keep their inputs level when only one of them has a hint underneath */
.page-ambassador-network .an-apply .field { align-content: start; }
/* between 992 and 1199px the card is too narrow for two fields a row: one per row, so labels never wrap out of line */
@media (min-width: 992px) and (max-width: 1199px) { .page-ambassador-network .an-apply .form__row { grid-template-columns: minmax(0, 1fr); } }
/* the three event answers sit on one line where they fit */
.page-ambassador-network .an-apply .choices__list { display: flex; flex-wrap: wrap; column-gap: 2.25rem; }
/* the affirmation is a long sentence: the box sits level with its first line */
.page-ambassador-network .an-apply__affirm { align-items: flex-start; padding-block: 0.6rem; }
.page-ambassador-network .an-apply__affirm .choice__box { margin-top: 0.05rem; }
/* the thank-you covers a long form: its words sit at the foot, where the submit button was, not in the middle */
.page-ambassador-network .an-apply .form__done-in { align-content: end; padding: 2rem 1.5rem clamp(3rem, 8vw, 6rem); }