/* Marketing & Communications (marketing.html) · page-scoped extensions of the shared components in css/site.css and
   css/pages.css. Every selector starts with .page-marketing; tokens only, sharp corners, no shadows.
   Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5 "marketing.html", G3): hero C2 (the canonical .vhero block, §2), the chapter
   strip and two navy chapter bands (§3.5, §3.6), white and crest-navy sections alternating with clean edges, the featured
   capabilities as the homepage's core cards, the ten event types as the homepage's rail. The consolidation's rules for the
   kept sections (leader, impact, services, story, partner, host, closing line) stay as they were.
   Motion: two scrub stages, the hero's light parallax and Public Relations' story hairline (js/pages/marketing.js); everything
   rests in place under reduced motion. Decisions: lab/revamp/marketing-notes.md. */

/* ═════════════ HERO · the .vhero family, canonical block (REVAMP-PLAN.md §2), scoped to this page; treatment C2 ═════════════ */
.page-marketing .vhero { position: relative; isolation: isolate; overflow: clip; background-color: var(--deep); color: var(--text-1); }
.page-marketing .vhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: var(--deep); }
.page-marketing .vhero__img, .page-marketing .vhero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 767px) { .page-marketing .vhero__img, .page-marketing .vhero__film { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.page-marketing .vhero__film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.page-marketing .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-marketing .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-marketing .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-marketing .vhero__head, .page-marketing .vhero__aside { display: grid; gap: var(--space-head); justify-items: start; align-content: end; }
.page-marketing .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-marketing .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-marketing .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-marketing .vhero__title { font-weight: 400; } }
.page-marketing .vhero__lede { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-marketing .vhero__action { justify-self: start; margin-top: calc(var(--space-action) - var(--space-head)); }
@media (min-width: 992px) {
  .page-marketing .vhero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .page-marketing .vhero__head { grid-column: 1 / span 7; }
  .page-marketing .vhero__aside { grid-column: 9 / -1; }
}
/* C2: centred words over a pooled veil */
.page-marketing .vhero--c2 .vhero__inner { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; text-align: center; }
.page-marketing .vhero--c2 .vhero__head, .page-marketing .vhero--c2 .vhero__aside { grid-column: 1 / -1; justify-items: center; }
.page-marketing .vhero--c2 .vhero__action { justify-self: center; }
.page-marketing .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-marketing .vhero--short .vhero__inner { min-height: max(32rem, 76svh); }
/* the arrival */
.page-marketing .vhero__img { animation: vhero-settle 2600ms var(--ease-out) both; }
.page-marketing .vhero__crest, .page-marketing .vhero__label, .page-marketing .vhero__title, .page-marketing .vhero__lede, .page-marketing .vhero__action { animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-marketing .vhero__crest { animation-delay: 60ms; } .page-marketing .vhero__label { animation-delay: 160ms; } .page-marketing .vhero__title { animation-delay: 280ms; }
.page-marketing .vhero__lede { animation-delay: 460ms; } .page-marketing .vhero__action { animation-delay: 600ms; }
/* this page's photograph: the sunset sky is bright right under the bar's "Investor access" and behind the label, so the
   band under the bar is deeper (0.78 at the top, gone by 28%) and the pool sits a little higher and deeper than the
   canonical C2 veil (verify 2026-10-14: 2.78:1 and 4.27:1 with the canonical values); phones, where the stacked words
   reach the brightest sky of the portrait crop, take a wider, deeper pool. The bottom edge stays clean */
.page-marketing .vhero--c2 .vhero__veil { background: radial-gradient(ellipse 34% 26% at 92% 0%, rgb(var(--veil) / 0.5), rgb(var(--veil) / 0)),
  linear-gradient(to bottom, rgb(var(--veil) / 0.66), rgb(var(--veil) / 0) 24%),
  radial-gradient(ellipse 54% 48% at 50% 52%, rgb(var(--veil) / 0.8), rgb(var(--veil) / 0.44) 70%, rgb(var(--veil) / 0.12)); }
@media (max-width: 767px) {
  .page-marketing .vhero--c2 .vhero__veil { background: linear-gradient(to bottom, rgb(var(--veil) / 0.7), rgb(var(--veil) / 0) 22%),
    radial-gradient(ellipse 100% 56% at 50% 50%, rgb(var(--veil) / 0.86), rgb(var(--veil) / 0.55) 70%, rgb(var(--veil) / 0.3)); }
}
@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-marketing .vhero__img, .page-marketing .vhero__crest, .page-marketing .vhero__label, .page-marketing .vhero__title, .page-marketing .vhero__lede, .page-marketing .vhero__action { animation: none; }
  .page-marketing .vhero__film { display: none; }
}
/* ═════════════ RHYTHM · white and crest navy alternate with clean edges (REVAMP-PLAN.md §3.2) ═════════════ */
/* the padding fix until the shared rule exists (§8.2): pages.css collapses the top of a section that follows another */
.page-marketing .section[data-tone="dark"], .page-marketing .section + .section[data-tone="dark"], .page-marketing .section[data-tone="dark"] + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }

/* ───────────── chapter strip (§3.6): the three companies as anchors under the hero, then the crest rule ───────────── */
.page-marketing .chapters { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); background-color: var(--page); }
.page-marketing .chapters__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem clamp(1.75rem, 1rem + 3vw, 4.5rem); }
.page-marketing .chapters__rule { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.page-marketing .chapters + .section { padding-top: var(--space-open); }
/* phones: one name a line, centred, the hairline after each */
@media (max-width: 479px) { .page-marketing .chapters__list { flex-direction: column; align-items: center; } }

/* ───────────── chapter bands (§3.5): the company openers on the crest navy, centred ───────────── */
.page-marketing .chapter__inner { display: grid; justify-items: center; gap: var(--space-head); text-align: center; }
.page-marketing .chapter__crest { margin-bottom: 0; }
.page-marketing .chapter__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-marketing .chapter__title { max-width: 20ch; font-family: var(--font-display); font-size: var(--fs-display); font-weight: 300; line-height: 1.06; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-marketing .chapter__title { font-weight: 400; } }
.page-marketing .chapter__text { max-width: 52ch; color: var(--text-2); }
.page-marketing .chapter__action { margin-top: calc(var(--space-action) - var(--space-head)); }

/* ───────────── crest rule between two white sections (impact, then the capabilities): the same air above and below it,
   as between the homepage's about and core offerings ───────────── */
.page-marketing main .section.impact[data-section] { padding-bottom: var(--space-open); }
.page-marketing .capabilities__rule { margin-bottom: var(--space-open); }

/* ═════════════ GLOBAL SALES & MARKETING ═════════════ */

/* ───────────── our expertise · a split: the one photograph held beside the title, the paragraph and the six disciplines ───────────── */
.page-marketing .expertise__grid { align-items: start; }
.page-marketing .expertise__text { margin-top: var(--space-head); max-width: 52ch; color: var(--text-3); }
.page-marketing .expertise__list { margin-top: var(--space-action); }
.page-marketing .expertise__list .index__item { padding: 1.25rem 0 1.75rem; }
.page-marketing .expertise__list .index__line { max-width: 44ch; }
@media (min-width: 992px) {
  .page-marketing .expertise__media { position: sticky; top: calc(var(--nav-h) + 2rem); width: min(100%, (100svh - var(--nav-h) - 4rem) * 0.8); }
  .page-marketing .expertise__body { padding-top: 1rem; }
}

/* ───────────── leadership (on navy) · the Wellness page's advisor feature: one large gold-ring portrait beside the name,
   title and the biography's Confidante paragraph ("Exactly like Wellness", brief p84) ───────────── */
.page-marketing .leader { display: grid; gap: var(--space-head) var(--col-gap); align-items: center; }
.page-marketing .leader__portrait { justify-self: start; width: min(15rem, 66%); height: auto; aspect-ratio: 1; object-fit: contain; }
.page-marketing .leader__name { font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); }
.page-marketing .leader__role { margin-top: 0.75rem; 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-2); }
.page-marketing .leader__bio { margin-top: var(--space-head); max-width: 56ch; color: var(--text-3); }
.page-marketing .leader__more { margin-top: calc(var(--space-action) - 0.75rem); }
@media (min-width: 768px) {
  .page-marketing .leader { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 6rem); }
  .page-marketing .leader__portrait { justify-self: center; width: min(22rem, 100%); }
}
@media (min-width: 992px) {
  .page-marketing .leader { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .page-marketing .leader__portrait { grid-column: 2 / span 4; }
  .page-marketing .leader__body { grid-column: 7 / span 5; }
  .page-marketing .leader__name { font-weight: 300; }
}

/* ───────────── how we create impact · the brief's "two-column layout" of fifteen names with gold line icons; the title
   holds still beside the two columns from 1200px ───────────── */
.page-marketing .impact__list .index__item { padding: 1.1rem 0 1.35rem; }
@media (min-width: 1200px) {
  .page-marketing .impact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .page-marketing .impact__head { grid-column: 1 / span 3; margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 2rem); }
  .page-marketing .impact__list { grid-column: 5 / -1; }
}

/* ───────────── featured capabilities · the homepage's core cards without links: no Explore row, no hover affordance ───────────── */
.page-marketing .capabilities .core__title { color: var(--text-1); }
.page-marketing .capabilities .core__head { margin-bottom: var(--space-open); }
.page-marketing div.core__link { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .page-marketing div.core__link:hover { border-color: var(--line); }
  .page-marketing div.core__link:hover .core__media img { transform: none; }
}
/* the capabilities each photograph stands for, one line of names with a middle dot between them; the dot ends a line,
   never starts one */
.page-marketing .capability__tags { display: flex; flex-wrap: wrap; row-gap: 0.15rem; max-width: 36ch; font-size: var(--fs-small); line-height: 1.6; color: var(--text-3); }
.page-marketing .capability__tags li { white-space: nowrap; }
.page-marketing .capability__tags li:not(:last-child)::after { content: "·"; margin-inline: 0.5rem; }

/* ───────────── call to action (the pillar's one closing band) · Kelly's closing line between the paragraph and the action ───────────── */
.page-marketing .closing__sign { max-width: 32ch; margin-inline: 0; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.4; color: var(--text-1); }

/* ═════════════ CONFIDANTE PUBLIC RELATIONS ═════════════ */

/* ───────────── the film after the chapter (Josh, 2026-10-15) · full bleed, no words, clean edges against the navy above
   and the white below: 80% of the screen tall on desktops (never taller than 56vw, so tablets keep a wide frame), 4:5 on
   phones. The still is the film's first frame; the film fades in over it once it plays. Reduced motion: the still ───────────── */
.page-marketing .prfilm { position: relative; overflow: hidden; height: max(22rem, min(80svh, 56vw)); background-color: var(--deep); }
@media (max-width: 639px) { .page-marketing .prfilm { height: auto; aspect-ratio: 4 / 5; } }
.page-marketing .prfilm__media { position: absolute; inset: 0; }
.page-marketing .prfilm__img, .page-marketing .prfilm__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.page-marketing .prfilm__film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.page-marketing .prfilm__film.is-playing { opacity: 1; }
/* the white section after it opens as it does after the navy chapter */
.page-marketing .prfilm + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }

/* ───────────── our services · the brief's four-column icon grid; two columns on phones, the gold icon above its title.
   Below 390px two columns leave "communications" too little room, so small phones keep the shared single column ───────────── */
@media (min-width: 390px) and (max-width: 639px) {
  .page-marketing .services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-marketing .services__list .index__item { grid-template-columns: minmax(0, 1fr); row-gap: 0.85rem; padding: 1.25rem 0 1.75rem; }
  .page-marketing .services__list .index__item > * { grid-column: 1; }
  .page-marketing .services__list .index__icon { grid-row: auto; }
}
/* four columns from 992px: up to 1199px a column is too narrow for the icon and "communications" side by side, so there
   the icon sits above its title, as on phones */
@media (min-width: 992px) and (max-width: 1199px) {
  .page-marketing .services__list .index__item { grid-template-columns: minmax(0, 1fr); row-gap: 0.85rem; }
  .page-marketing .services__list .index__item > * { grid-column: 1; }
  .page-marketing .services__list .index__icon { grid-row: auto; }
}

/* ───────────── how we tell your story (on navy; the page's signature moment) · "two-column layout, image beside the
   content": the five steps run down the column beside the photograph at every width, and the photograph holds still (CSS
   sticky) while they pass. js/pages/marketing.js scrubs the hairline top to bottom; the shared status states light each
   step ───────────── */
.page-marketing .story__grid { display: grid; gap: var(--space-open) var(--col-gap); }
.page-marketing .story__head { margin-bottom: var(--space-open); }
.page-marketing .story .process__line { max-width: 36ch; }
.page-marketing .story__media picture { display: block; width: 100%; height: 100%; }
@media (min-width: 640px) and (max-width: 991px) { .page-marketing .story__media { aspect-ratio: 3 / 2; } }
@media (min-width: 992px) {
  .page-marketing .story__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .page-marketing .story__media { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 2rem); width: min(100%, (100svh - var(--nav-h) - 4rem) * 0.8); }
  .page-marketing .story__body { grid-column: 7 / -1; }
  .page-marketing .story .process__steps { grid-auto-flow: row; grid-auto-columns: auto; row-gap: 2.75rem; }
  .page-marketing .story .process__step { padding: 0 0 0 2.5rem; }
  .page-marketing .story .process__mark { top: 0.35rem; }
  .pages-js .page-marketing .story .process__fill { transform: scaleY(0); }
}
/* reduced motion or no GSAP: the whole hairline drawn, every step reached */
.pages-js .page-marketing .story .process.is-complete .process__fill { transform: none; }

/* ───────────── our strategic partner · names as type (headshot and logo held), the two partner paragraphs beside it ───────────── */
.page-marketing .partner__grid { display: grid; gap: var(--space-open) var(--col-gap); }
.page-marketing .partner__mark { display: grid; align-content: start; gap: var(--space-head); padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
.page-marketing .partner__name { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
.page-marketing .partner__lead { display: grid; gap: 0.35rem; }
.page-marketing .partner__person { font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.3; color: var(--text-1); }
.page-marketing .partner__role { font-size: var(--fs-small); line-height: 1.55; color: var(--text-3); }
.page-marketing .partner__lede { max-width: 40ch; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); }
.page-marketing .partner__body > p + p { margin-top: 1.1rem; max-width: 52ch; color: var(--text-3); }
@media (min-width: 768px) { .page-marketing .partner__name { font-weight: 300; } }
@media (min-width: 992px) {
  .page-marketing .partner__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .page-marketing .partner__mark { grid-column: 1 / span 5; }
  .page-marketing .partner__body { grid-column: 7 / -1; padding-top: 1.5rem; }
}

/* ═════════════ CONFIDANTE GLOBAL EVENTS ═════════════ */

/* ───────────── our events · the homepage's rail: the section's paragraph under the title, the arrows beside it ───────────── */
.page-marketing .showcase.section { padding-inline: 0; }
.page-marketing .showcase__text { max-width: 52ch; color: var(--text-3); }
.page-marketing .ev-types .showcase__head { max-width: 46rem; }
/* the subtle hover the brief asks for (p103), on a real pointer; the cards link nowhere, so the cursor stays plain */
.page-marketing .ev-types .rail__img { transition: transform var(--dur-lux) var(--ease-lux); }
@media (hover: hover) and (pointer: fine) { .page-marketing .ev-types .rail__card:hover .rail__img { transform: scale(1.04); } }
/* touch screens (the mobile pass): the same zoom while a card is wholly in view (js/pages/marketing.js) */
@media (hover: none) { .page-marketing .ev-types .rail__card.is-near .rail__img { transform: scale(1.04); } }

/* ───────────── host a Confidante event · the split's photograph on tablets: a 4:3 frame keeps the avenue and the house in
   one view with the words close below ───────────── */
@media (min-width: 640px) and (max-width: 991px) {
  .page-marketing .ev-host .split__media { aspect-ratio: 4 / 3; }
}

/* ═════════════ reduced motion: the story hairline drawn and every step reached, no hover zoom ═════════════ */
@media (prefers-reduced-motion: reduce) {
  .pages-js .page-marketing .story .process__fill { transform: none; }
  .page-marketing .story .process__title { transition: none; }
  .page-marketing .ev-types .rail__img { transition: none; }
  .page-marketing .ev-types .rail__card:hover .rail__img { transform: none; }
  .page-marketing .ev-types .rail__card.is-near .rail__img { transform: none; }
  .page-marketing .prfilm__film { display: none; }
}

/* the PR scroll film (2026-10-15): the glass sits in the left third of the frame, the words on the right */
.page-marketing .mk-prfilm { --focus: 28% 50%; }