/* Confidante · About (about.html). Page-scoped extensions of the shared components (site.css, pages.css): every selector
   starts with .page-about, tokens only, sharp corners, no shadows. Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5, hero B): the
   homepage's .zoom opens the page, then white and crest navy in turn with clean edges. Scrubbed components: the hero zoom,
   the destinations track and, at Josh's request (2026-10-15), the Our approach film (.sfilm); the map draws once. A reduced-motion block closes the file. Decisions: lab/revamp/about-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-about .section[data-tone="dark"], .page-about .section + .section[data-tone="dark"], .page-about .section[data-tone="dark"] + .section,
.page-about .about-dest + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }

/* the brief's section names where they carry one (The Confidante difference, Our ecosystem): tracked capitals, as the
   homepage's core label; at most three on the page with the hero's */
.page-about .about-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-3); }

/* ── 1 hero · treatment B: the homepage's zoom as the first section, full-bleed (data-bg-zoom-full, Josh 2026-10-15: no
      window, no zoom). The words first on the white page under the solid bar (crest, label, h1, lede, one action), the
      promenade under them across the whole page; as it reaches the top its tint fades in (initBgZoom) and the two
      "Our story" sentences rise over it, each with its crest ── */
.page-about .about-hero { padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 4vw, 6rem)); }
.page-about .zoom__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-about .zoom__h { max-width: 18ch; margin-top: 1rem; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
@media (max-width: 767px) { .page-about .zoom__h { font-weight: 400; } }
.page-about .zoom__lede { max-width: 46ch; margin-top: var(--space-head); font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
/* the promenade: the low sun and the palms stay in view wherever the frame crops the 3:2 still */
.page-about .about-hero .zoom__img { object-position: 28% 55%; }
/* the picture starts under the words across the page: no inset window (the frame's clip is off) and no scale. The tint
   is full by the time the picture reaches the top (initBgZoom), so the first sentence rises a fifth of a screen later */
.page-about .about-hero .zoom__track { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.page-about .about-hero .zoom__frame { clip-path: none; }
.page-about .about-hero .zoom__text { padding-top: 120dvh; }
/* the arrival (the family's MotionSites entrance, CSS so it runs on the first paint): the words rise in turn, then the
   picture rises in under them. initBgZoom moves only the tint, never .zoom__img or the stage */
.page-about .about-hero .mark-crest, .page-about .zoom__label, .page-about .zoom__h, .page-about .zoom__lede, .page-about .about-hero .zoom__actions { animation: about-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-about .about-hero .mark-crest { animation-delay: 60ms; }
.page-about .zoom__label { animation-delay: 160ms; }
.page-about .zoom__h { animation-delay: 280ms; }
.page-about .zoom__lede { animation-delay: 460ms; }
.page-about .about-hero .zoom__actions { animation-delay: 600ms; }
.page-about .about-hero .zoom__stage { animation: about-window 1200ms var(--ease-out) 700ms both; }
@keyframes about-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes about-window { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* reduced motion: the static composition is set by CSS from the first paint (initBgZoom adds is-static only on load, which
   shifted the hero by most of a screen: CLS 0.79 at 1440). The photograph sits whole under the words across the page, the
   sentences follow it on the page in the crest navy, with the page margin on phones */
@media (prefers-reduced-motion: reduce) {
  .page-about .about-hero { padding-bottom: var(--section); }
  .page-about .about-hero .zoom__track { margin-top: 3rem; padding: 0; }
  .page-about .about-hero .zoom__stage { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .page-about .about-hero .zoom__frame { clip-path: none; }
  .page-about .about-hero .zoom__text { margin-top: 0; padding: var(--section) var(--margin) 0; }
  .page-about .about-hero .zoom__statement { color: var(--brand); }
  .page-about .about-hero .zoom__statement.is--gap { margin-top: 3rem; }
  .page-about .about-hero .zoom__img { object-position: 30% 50%; }
}

/* ── 2 the Confidante difference · navy split: the label over Kelly's headline ── */
.page-about .about-difference .split__body > .about-label { margin-top: 0; }
.page-about .about-difference .split__title { margin-top: 1.1rem; }
.page-about .about-difference .split__media img { object-position: 52% 50%; }
@media (min-width: 992px) {
  /* the photograph's foot meets the button's (Josh, 2026-10-15): the words sit at the bottom of the row, and the photograph
     grows past 4:5 whenever the words run taller than it */
  .page-about .about-difference .split__grid { align-items: stretch; }
  .page-about .about-difference .split__media { aspect-ratio: auto; }
  .page-about .about-difference .split__body { align-self: end; }
  .page-about .about-difference .split__media { grid-column: 1 / span 5; }
  .page-about .about-difference .split__body { grid-column: 7 / -1; }
}

/* ── 3 our ecosystem · centred head, the ten companies as an index with gold line icons whose rows open each company's
      page: the title's link covers the row (one tab stop), a gold hairline after the name lengthens on hover like every
      secondary action, the row shows the focus ring. The crest rule closes the section; the Our approach film follows it
      (Core areas moved below the film, 2026-10-15), so the section keeps its full foot ── */
.page-about .about-eco .section-head { justify-items: center; }
.page-about .about-eco .section-head__lede { max-width: 44ch; }
.page-about .about-eco .section-head__text { max-width: 58ch; }
.page-about .about-eco .index__item { position: relative; }
.page-about .about-eco__link { color: inherit; }
.page-about .about-eco__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.page-about .about-eco__link:focus-visible { outline: none; }
.page-about .about-eco .index__item:has(.about-eco__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }
.page-about .about-eco .index__title::after { content: ""; display: inline-block; vertical-align: middle; width: 48px; height: 1px; margin-left: 16px; background-color: var(--accent); transform: scaleX(0.5); transform-origin: 0 50%; transition: transform var(--dur-lux) var(--ease-lux); }
.page-about .about-eco .index__line { max-width: 44ch; transition: color var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .page-about .about-eco .index__item:hover .index__title::after { transform: scaleX(1); }
  .page-about .about-eco .index__item:hover .index__line { color: var(--text-2); }
}
/* touch screens (mobile parity pass, 2026-10-15): nothing hovers, so each row takes the hover state while it crosses the
   middle of the screen (js/pages/about.js marks it .is-near; never under reduced motion, where the rows rest) */
@media (hover: none), (pointer: coarse) {
  .page-about .about-eco .index__item.is-near .index__title::after { transform: scaleX(1); }
  .page-about .about-eco .index__item.is-near .index__line { color: var(--text-2); }
}
@media (min-width: 992px) {
  .page-about .about-eco__list { column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .page-about .about-eco .index__item { padding-bottom: 2.75rem; }
}
.page-about .about-eco__rule { margin-top: var(--space-open); }

/* ── 4 our approach · a scroll film chapter (css/scroll-film.css, Josh's pick 2026-10-15): the harbour glide under the
      shared veil, the words at the foot on the left. Page-scoped: where the picture sits on screens of other shapes ── */
.page-about .ab-film { --focus: 46% 50%; }
/* after the swap the head has already faded out on its container (js/scroll-film.js); its children follow so the head's
   words report their real opacity and are not judged as visible text over the lede (no visual change; still in the
   accessibility tree). Component request filed: fade the children in the script */
.page-about .ab-film.is-swapped .sfilm__head > * { opacity: 0 !important; }
/* phones: the lede and the network line stack taller, so the lede's first lines reach up over the brightest rooftops; the
   veil holds darker further up the screen than the shared one (3.6:1 under the lede before, 4.5:1 and up after) */
@media (max-width: 767px) {
  .page-about .ab-film .sfilm__veil { background: linear-gradient(to top, rgb(var(--veil) / 0.94) 0%, rgb(var(--veil) / 0.86) 36%, rgb(var(--veil) / 0.64) 58%, rgb(var(--veil) / 0.2) 76%, rgb(var(--veil) / 0) 88%); }
}

/* ── 5 core areas · the homepage's sideways row in the core offerings' card grammar: white cards with a hairline edge, a
      4:3 photograph, the gold number, the name, Kelly's line and the Explore row. The row runs a little wider than three
      cards so the fourth shows; every card keeps the row's height. Since 2026-10-15 it sits on the white page between the
      Our approach film and the Global destinations band (Josh: no two image backgrounds in a row), with the full section
      padding above and below ── */
.page-about .about-core .rail__card { align-content: stretch; }
.page-about .about-core .core__link { height: 100%; }
.page-about .about-core .core__line { max-width: none; }
@media (min-width: 992px) { .page-about .about-core .core__name { font-size: clamp(1.5rem, 1.1rem + 0.6vw, 1.875rem); } }
/* 992 to 1279px: three and a bit cards left each about 250px wide and the names ran to three lines; two and a half here */
@media (min-width: 992px) and (max-width: 1279px) { .page-about .about-core .rail { grid-auto-columns: calc((100% - 2 * var(--rail-gap)) / 2.6); } }

/* ── 6 global destinations · on the crest navy: the photograph behind the heading (p20), the words on its darker side,
      then the homepage's destinations under it (Josh, 2026-10-15): the map with its arcs from Panama, then the markets
      travel past on the sticky track. The track ends the section, as on the homepage ── */
.page-about .about-dest { position: relative; background-color: var(--page); color: var(--text-2); }
.page-about .about-dest__band { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: max(36rem, 92svh); overflow: hidden; }
.page-about .about-dest__media { position: absolute; inset: 0; z-index: -2; }
.page-about .about-dest__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
@media (max-width: 767px) { .page-about .about-dest__media img { object-position: 50% 50%; } }
/* the veil: the words sit on the photograph's darker side; the foot meets the navy with a clean edge */
.page-about .about-dest__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(to top, rgb(var(--veil) / 0.9) 0%, rgb(var(--veil) / 0.74) 26%, rgb(var(--veil) / 0.42) 54%, rgb(var(--veil) / 0) 86%),
  rgb(var(--veil) / 0.14); }
.page-about .about-dest__inner { display: grid; gap: var(--space-head); padding-block: var(--space-open) clamp(1.5rem, 4vh, 3rem); }
.page-about .about-dest__title { max-width: 16ch; font-size: var(--fs-title); font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; color: var(--text-1); }
.page-about .about-dest__text { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
/* the map alone on the first panel: as wide as the screen's height allows, the first market already showing at the right */
.page-about .about-dest__intro .map { width: min(100%, calc((100svh - var(--nav-h) - 9rem) * 1369 / 748)); }
@media (min-width: 768px) {
  .page-about .about-dest__intro { width: 76vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-right: 5vw; }
}
/* phones (mobile parity pass, 2026-10-15): the map runs wider than the screen, with its names (the shared phone map hides
   them), so the track's first stretch travels across it, the Americas and then Spain and the Middle East, before the
   markets come in; never taller than the screen allows */
@media (max-width: 767px) {
  .page-about .about-dest__intro { --map-w: min(190vw, calc((100svh - var(--nav-h) - 8rem) * 1369 / 748)); width: calc(var(--map-w) + 2 * var(--margin)); }
  .page-about .about-dest__intro .map { width: var(--map-w); margin: 0; }
  .page-about .about-dest__intro .map__labels { display: block; }
  /* reduced motion stacks the track: the map back to the screen's width (it widened the page to 757px) */
  .page-about .about-dest__scroll.is-static .about-dest__intro { width: 100%; }
  .page-about .about-dest__scroll.is-static .about-dest__intro .map { width: 100%; }
}
@media (min-width: 768px) {
  .page-about .about-dest__band { align-items: center; }
  .page-about .about-dest__veil { background:
    linear-gradient(to right, rgb(var(--veil) / 0.9) 0%, rgb(var(--veil) / 0.74) 34%, rgb(var(--veil) / 0.2) 64%, rgb(var(--veil) / 0) 86%),
    rgb(var(--veil) / 0.1); }
  .page-about .about-dest__inner { padding-block: var(--section); }
}
@media (min-width: 768px) and (max-width: 991px) {
  .page-about .about-dest__media img { object-position: 45% 50%; }
  .page-about .about-dest__text { max-width: 38ch; }
}
@media (min-width: 992px) {
  .page-about .about-dest__title { font-weight: 300; }
  .page-about .about-dest__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .page-about .about-dest__inner > * { grid-column: 1 / span 6; }
}

/* ── 7 leadership · the brief's five groups. From 992px each group is a row: its name holds the left three columns (and
      stays in view while its portraits pass), the portraits run three across on the right. A place line in small capitals
      where the brief gives one (USA, Canada, Panama) ── */
.page-about #leadership { scroll-margin-top: calc(var(--nav-h) - 1px); }
.page-about .about-team .people__group { padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.page-about .about-team .people__group-title { padding-bottom: 0; border-bottom: 0; }
.page-about .person__place { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.page-about .person__role { text-wrap: balance; }
.page-about .person__role + .person__place { margin-top: 0.2rem; }
@media (min-width: 992px) {
  .page-about .about-team .people__group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-top: 2rem; }
  .page-about .about-team .people__group-title { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 2rem); margin-bottom: 0; }
  .page-about .about-team .people__grid { grid-column: 4 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phones and tablets (mobile parity pass, 2026-10-15): as on desktop, a group's name stays in view while its portraits
   pass, here as a band under the bar across the page (sticky, no script; it lets go at the group's end) */
@media (max-width: 991px) {
  .page-about .about-team .people__group-title { position: sticky; top: var(--nav-h); z-index: 2; margin-inline: calc(-1 * var(--margin)); padding: 0.85rem var(--margin); background-color: var(--page); }
}
@media (max-width: 767px) {
  .page-about .about-team .people__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--col-gap) / 2); }
}

/* ── reduced motion: no arrival, the hover hairline and colour change at once ── */
@media (prefers-reduced-motion: reduce) {
  .page-about .about-hero .mark-crest, .page-about .zoom__label, .page-about .zoom__h, .page-about .zoom__lede, .page-about .about-hero .zoom__actions,
  .page-about .about-hero .zoom__stage { animation: none; }
  .page-about .about-eco .index__title::after, .page-about .about-eco .index__line { transition: none; }
}