/* Connect (connect.html) · page-scoped additions to the shared components (css/site.css, css/pages.css). Every selector
   starts with .page-connect; tokens only, sharp corners, no shadows.
   Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5 "connect.html", G8): hero C2 short (the canonical .vhero block, §2) over the
   cliff village at night, the form card rising over its foot, the invitation and the details beside it. One scrub stage:
   the hero's light parallax (js/pages/connect.js). Page doc: clients/confidante/docs/pages/connect.md; decisions:
   lab/revamp/connect-notes.md */

/* ═════════════ HERO · the .vhero family, canonical block (REVAMP-PLAN.md §2), scoped to this page; treatment C2 short ═════════════ */
.page-connect .vhero { position: relative; isolation: isolate; overflow: clip; background-color: var(--deep); color: var(--text-1); }
.page-connect .vhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: var(--deep); }
.page-connect .vhero__img, .page-connect .vhero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 767px) { .page-connect .vhero__img, .page-connect .vhero__film { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.page-connect .vhero__film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.page-connect .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-connect .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-connect .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-connect .vhero__head, .page-connect .vhero__aside { display: grid; gap: var(--space-head); justify-items: start; align-content: end; }
.page-connect .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-connect .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-connect .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-connect .vhero__title { font-weight: 400; } }
.page-connect .vhero__lede { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-connect .vhero__action { justify-self: start; margin-top: calc(var(--space-action) - var(--space-head)); }
@media (min-width: 992px) {
  .page-connect .vhero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .page-connect .vhero__head { grid-column: 1 / span 7; }
  .page-connect .vhero__aside { grid-column: 9 / -1; }
}
/* C2: centred words over a pooled veil */
.page-connect .vhero--c2 .vhero__inner { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; text-align: center; }
.page-connect .vhero--c2 .vhero__head, .page-connect .vhero--c2 .vhero__aside { grid-column: 1 / -1; justify-items: center; }
.page-connect .vhero--c2 .vhero__action { justify-self: center; }
.page-connect .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-connect .vhero--short .vhero__inner { min-height: max(32rem, 76svh); }
/* the arrival */
.page-connect .vhero__img { animation: vhero-settle 2600ms var(--ease-out) both; }
.page-connect .vhero__crest, .page-connect .vhero__label, .page-connect .vhero__title, .page-connect .vhero__lede, .page-connect .vhero__action { animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-connect .vhero__crest { animation-delay: 60ms; } .page-connect .vhero__label { animation-delay: 160ms; } .page-connect .vhero__title { animation-delay: 280ms; }
.page-connect .vhero__lede { animation-delay: 460ms; } .page-connect .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-connect .vhero__img, .page-connect .vhero__crest, .page-connect .vhero__label, .page-connect .vhero__title, .page-connect .vhero__lede, .page-connect .vhero__action { animation: none; }
  .page-connect .vhero__film { display: none; }
}

/* ───────────── this page's hero ───────────── */
/* how far the form card rises over the hero's foot (REVAMP-PLAN §5: 6rem); phones keep more of the picture in view */
.page-connect { --cn-rise: 6rem; }
@media (max-width: 767px) { .page-connect { --cn-rise: 4rem; } }
/* the crop: the lit village a little above centre (the words sit over the cliff face and the houses' lower rows) */
.page-connect .vhero__img { --focus: 54% 46%; --focus-phone: 50% 50%; }
/* the veil, tuned to this photograph: the lit village fills the frame behind the words and the street lamps reach the
   top right under the bar's "Investor access" (canonical C2 values measured 3.31:1 there at 1440, the action 4.23:1 at
   1024, the lede 4.15:1 at 390). A small pool under the bar's action, a deeper band under the bar and a deeper, wider
   centre pool; the picture still reads as the village at night around it. The bottom edge stays clean */
.page-connect .vhero--c2 .vhero__veil { background: radial-gradient(ellipse 32% 24% at 90% 0%, rgb(var(--veil) / 0.6), rgb(var(--veil) / 0)),
  linear-gradient(to bottom, rgb(var(--veil) / 0.7), rgb(var(--veil) / 0) 26%),
  radial-gradient(ellipse 64% 58% at 50% 52%, rgb(var(--veil) / 0.8), rgb(var(--veil) / 0.52) 70%, rgb(var(--veil) / 0.34)); }
@media (max-width: 767px) {
  .page-connect .vhero--c2 .vhero__veil { background: linear-gradient(to bottom, rgb(var(--veil) / 0.7), rgb(var(--veil) / 0) 24%),
    radial-gradient(ellipse 110% 62% at 50% 50%, rgb(var(--veil) / 0.86), rgb(var(--veil) / 0.6) 70%, rgb(var(--veil) / 0.4)); }
}
/* the centred action stays clear of the card that rises under it */
.page-connect .vhero__inner { padding-bottom: calc(var(--cn-rise) + clamp(2.5rem, 2rem + 2vw, 4rem)); }
/* Kelly's one-sentence lede breaks evenly when centred ("Every remarkable partnership / begins with a conversation.") */
.page-connect .vhero__lede { text-wrap: balance; }

/* ═════════════ CONTACT · the card over the hero's foot, the invitation and the details beside it ═════════════ */
.page-connect .cn-contact { padding-top: var(--space-open); }
.page-connect .cn-contact__grid { display: grid; gap: var(--space-open) var(--col-gap); }
/* the card: the shared form card (white, hairline edge), raised over the picture; its own heading at its head */
.page-connect .cn-card { position: relative; z-index: 1; margin-top: calc(-1 * (var(--cn-rise) + var(--space-open)));
  animation: cn-card-rise 1000ms cubic-bezier(0, 0, 0.2, 1) 720ms both; }
.page-connect .cn-card__title { margin-bottom: var(--space-action); }
/* the invitation and the details: the crest, Kelly's paragraph in Zodiak, then the facts on their hairline */
.page-connect .cn-aside { display: grid; justify-items: start; align-content: start; }
.page-connect .cn-aside__crest { --cw: 2.25rem; }
.page-connect .cn-aside__lede { max-width: 34ch; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-1); }
.page-connect .cn-facts { width: 100%; margin-top: var(--space-action); }
/* Global presence: the tab's five markets, two to a row in the facts' Zodiak */
.page-connect .connect__markets { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.15rem 2.5rem; }
.page-connect .cn-facts > div:nth-child(2) dd { font-size: var(--fs-body); font-family: var(--font-text); line-height: 1.7; color: var(--text-1); }
/* "Start the conversation" in the hero lands on the card's top, under the bar */
.page-connect #contact { scroll-margin-top: calc(var(--nav-h) + 1.5rem + var(--cn-rise) + var(--space-open)); }
@media (min-width: 640px) and (max-width: 991px) {
  .page-connect .cn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .page-connect .cn-facts > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .page-connect .cn-contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .page-connect .cn-card { grid-column: 7 / -1; grid-row: 1; }
  .page-connect .cn-aside { grid-column: 1 / span 5; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 2rem); }
}
@keyframes cn-card-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-connect .cn-card { animation: none; } }