/* Confidante Global Development · page-scoped styles. Every selector starts with .page-development; tokens only; sharp
   corners, no shadows. Revamp (2026-10-14, REVAMP-PLAN.md): the canonical .vhero block (§2, verbatim, prefixed), hero
   treatment A (the Porto Cervo film scrubbed on a sticky stage), the chapter strip and the chapter band (§3), the navy
   section padding (§3.2), then the page's own extensions. The .vhero and .chapter rules are written to be lifted into
   pages.css in one pass (§8). Decisions: clients/confidante/lab/revamp/development-notes.md. */

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

/* ───────────── hero A · the scrubbed film (REVAMP-PLAN.md §2, treatment A) ─────────────
   Reduced motion and no script: the stage is the hero, 100svh, the still with every word stacked at the foot.
   With motion allowed, at every width (phones too since the mobile parity pass, 2026-10-15), the hero is a 240svh track
   and the stage is held on screen for its whole length (sticky, nothing pinned); the height and the beats' shared cell
   live here, not in the script, so the page never shifts. Portrait phones scrub their own 540x960 film, a pan from the
   sun to the yacht that opens on the portrait still. The head (crest, label, tagline) holds for the first 45% of the track, then lifts away as the lede and the
   action rise in its place (js/pages/development.js). The film shares the still's
   arrival, so the two never disagree in scale when the film fades in over it. */
.page-development .vhero--a { --focus: 40% 50%; }
.page-development .vhero__stage { position: relative; }
.page-development .vhero__film { animation: vhero-settle 2600ms var(--ease-out) both; }
.page-development .vhero__film.is-ready { opacity: 1; }
/* the long action label ("Begin your development project", about 356px) may wrap on narrow phones */
.page-development .vhero__action { max-width: 100%; }
/* the film carries a white yacht across the frame: on phones the words fill the lower half, so the deep foot reaches
   higher there (the old hero measured 3.25:1 under the label at 360px with the shared veil). The band under the bar is
   0.62 (was 0.5) since the scrub runs on phones: the Menu label measured 4.38:1 over the sun-lit sky at 390 */
@media (max-width: 767px) {
  .page-development .vhero__veil { background:
    linear-gradient(to bottom, rgb(var(--veil) / 0.62) 0%, rgb(var(--veil) / 0) 22%),
    linear-gradient(to top, rgb(var(--veil) / 0.92) 0%, rgb(var(--veil) / 0.78) 34%, rgb(var(--veil) / 0.46) 54%, rgb(var(--veil) / 0) 74%); }
}
/* from 768px the first frame has the yacht's white hull behind the crest and the label: the foot reaches a little higher */
@media (min-width: 768px) {
  .page-development .vhero--a .vhero__veil { 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.62) 36%, rgb(var(--veil) / 0.28) 56%, rgb(var(--veil) / 0) 74%); }
}
@media (prefers-reduced-motion: no-preference) {
  .page-development .vhero--a { height: 240svh; }
  .page-development .vhero--a .vhero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .page-development .vhero--a .vhero__inner { min-height: 0; height: 100svh; }
  /* the two beats share one cell from the first paint (set here, not by the script, so nothing moves when it runs); the
     second beat waits hidden. Without GSAP the script sets no-scrub, without script the noscript style in the head
     undoes this, and both fall back to the stacked words */
  .page-development .vhero--a:not(.no-scrub) .vhero__inner { grid-template-columns: minmax(0, 1fr); }
  .page-development .vhero--a:not(.no-scrub) .vhero__head, .page-development .vhero--a:not(.no-scrub) .vhero__aside { grid-row: 1; grid-column: 1 / -1; align-self: end; }
  .page-development .vhero--a:not(.no-scrub) .vhero__aside { pointer-events: none; }
  .page-development .vhero--a:not(.no-scrub) .vhero__lede, .page-development .vhero--a:not(.no-scrub) .vhero__action { opacity: 0; transform: translateY(24px); animation: none; }
  .page-development .vhero--a.is-swapped .vhero__aside { pointer-events: auto; }
  /* the second beat carries the lede alone on the held film, so it takes the lede size of the page (Zodiak) */
  .page-development .vhero--a:not(.no-scrub) .vhero__lede { max-width: 38ch; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-1); }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .page-development .vhero--a:not(.no-scrub) .vhero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-development .vhero--a:not(.no-scrub) .vhero__head, .page-development .vhero--a:not(.no-scrub) .vhero__aside { grid-column: 1 / span 7; }
}
/* from 992px to 1279px the static words keep the action's label on one line: 7 + 5 columns, not 8 + 4 */
@media (min-width: 992px) and (max-width: 1279px) { .page-development .vhero--a .vhero__aside { grid-column: 8 / -1; } }
/* a quiet cue at the foot of the held film while the first beat holds: a hairline that runs down, then fades with the head */
.page-development .vhero__cue { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .page-development .vhero--a:not(.no-scrub) .vhero__cue { position: absolute; z-index: 1; right: var(--edge); bottom: clamp(3rem, 2rem + 4vw, 6rem); display: flex; align-items: center; gap: 12px; 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-2); }
  .page-development .vhero__cue-line { position: relative; width: 1px; height: 40px; overflow: hidden; background: rgb(244 239 230 / 0.24); }
  .page-development .vhero__cue-line::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: translateY(-100%); animation: vhero-cue 2400ms var(--ease-in-out) 1600ms infinite; }
}
@keyframes vhero-cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ───────────── chapter strip · the page's companies as anchors under the hero, then the crest rule (§3.6) ───────────── */
.page-development .chapters { background-color: var(--page); padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.page-development .chapters__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem clamp(2rem, 1rem + 3vw, 4rem); }
.page-development .chapters__rule { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
/* the philosophy after it: the rule is the pause, so the opening gap is the shorter one */
.page-development .chapters + .section { padding-top: var(--space-open); }

/* ───────────── navy sections · the white and crest navy alternation with clean edges (§3.2), until the shared rule exists ───────────── */
.page-development .section[data-tone="dark"], .page-development .section + .section[data-tone="dark"], .page-development .section[data-tone="dark"] + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }
.page-development .panorama + .section[data-tone="dark"] { padding-top: clamp(5rem, 3rem + 6vw, 9rem); }

/* ───────────── chapter band · a sister company's opener on the crest navy (§3.5) ───────────── */
.page-development .chapter__inner { display: grid; justify-items: center; gap: var(--space-head); text-align: center; }
.page-development .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-development .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; }
.page-development .chapter__text { max-width: 52ch; color: var(--text-2); }
@media (max-width: 767px) { .page-development .chapter__title { font-weight: 400; } }
.page-development .chapter__crest { margin-bottom: 0; }
.page-development .chapter__text { display: grid; gap: 1.1rem; margin-top: calc(var(--space-head) * 0.25); }
.page-development .chapter__action { margin-top: calc(var(--space-action) - var(--space-head)); }

/* ───────────── what we deliver · the homepage's core cards, non-linked: number and name only ───────────── */
.page-development .dev-deliver { padding-bottom: var(--space-open); } /* the crest rule above the partners sits with equal air either side */
.page-development .dev-deliver .core__lede { max-width: 44ch; }
.page-development .dev-deliver .core__body { gap: 8px; padding-bottom: clamp(1.5rem, 1.8vw, 2rem); }
/* four in a row only from 1200px: between 992 and 1199px the names wrap to two cramped lines */
@media (min-width: 992px) and (max-width: 1199px) { .page-development .dev-deliver .core__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* each card opens a dialog (Josh, 2026-10-15): the homepage's company dialog, its process step as the lead line in the
   display face, Kelly's paragraph, then the related expertise as hairline tags */
.page-development .dev-co .co__body .dev-co__lede { margin-top: var(--space-head); font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.45; color: var(--text-1); }
.page-development .dev-co .co__body .dev-co__tags-label { margin-top: var(--space-open); 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-development .dev-co__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.75rem; }
.page-development .dev-co__tags li { padding: 6px 12px; border: 1px solid var(--line-2); font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); }
/* a phone scrolls the panel: the close holds to its top right (as the bio dialog's), the photograph and words placed
   explicitly so the close may share their cells */
.page-development .dev-co .co__media { grid-row: 1; grid-column: 1; }
.page-development .dev-co .co__body { grid-row: 2; grid-column: 1; }
.page-development .dev-co .co__close { position: sticky; top: 0.75rem; z-index: 2; grid-column: 1 / -1; grid-row: 1 / span 2; justify-self: end; align-self: start; margin: 0.75rem 0.75rem 0 0; }
@media (min-width: 768px) {
  .page-development .dev-co .co__body { grid-row: 1; grid-column: 2; }
  .page-development .dev-co .co__close { grid-row: 1; }
}

/* ───────────── strategic partners · the crest rule above the centred head (the core cards' padding is the air above it) ───────────── */
.page-development .dev-partners { padding-top: 0; }
.page-development .dev-partners__rule { margin-bottom: var(--space-open); }
/* the partners' logos (Josh, 2026-10-15) in the crest navy, over each name: one box height keeps the names level, and each
   mark is sized by eye so the four carry the same weight (the wide Consortio wordmark lowest, the square IDEURBAN mark tallest) */
.page-development .dev-partners__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(4rem, 3rem + 2vw, 5rem); margin-bottom: 0.5rem; }
.page-development .dev-partners__logo img { width: auto; max-width: min(100%, 15rem); height: var(--lh); object-fit: contain; }
.page-development .dev-partners__logo--allen-shariff { --lh: 2.4rem; }
.page-development .dev-partners__logo--ideurban { --lh: 4.2rem; }
.page-development .dev-partners__logo--consortio { --lh: 1.45rem; }
.page-development .dev-partners__logo--payne-holdings { --lh: 2.9rem; }
/* Kelly's Featured Projects paragraph (three sentences) is the lede: a wider measure from 992px (about six lines) */
@media (min-width: 992px) { .page-development .dev-partners .section-head__lede { max-width: 52ch; } }

/* ───────────── global collaboration · the head and the photograph as one section, held still ───────────── */
.page-development .dev-collab .section-head { margin-bottom: var(--space-open); }
.page-development .dev-collab .panorama__img { top: 0; height: 100%; }

/* "Our expertise" is the brief's icon grid: two columns on phones as well, the gold icon above its title */
@media (max-width: 639px) {
  .page-development [data-section="expertise"] .index__list--icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-development [data-section="expertise"] .index__list--icons .index__item { grid-template-columns: minmax(0, 1fr); row-gap: 0.85rem; padding: 1.25rem 0 1.75rem; }
  .page-development [data-section="expertise"] .index__list--icons .index__item > * { grid-column: 1; }
  .page-development [data-section="expertise"] .index__icon { grid-row: auto; }
}

/* seven steps in one row: from 992px to 1199px a column is about 120px, narrower than "Development" at the lede size,
   so the step titles drop to 18px there and no longer run into the next step */
@media (min-width: 992px) and (max-width: 1199px) { .page-development .process__title { font-size: 1.125rem; } }

/* ───────────── Confidante Global Consulting (folded in 2026-10-13) · how we engage, who we serve ───────────── */
/* an index list inside the split's text column */
.page-development .split__body > .index__list { margin-top: var(--space-open); }
.page-development .split__body > .split__lede + .index__list { margin-top: var(--space-action); }
.page-development .split .index__line { max-width: 44ch; }
/* how we engage: from 992px the photograph holds still (sticky, no script) while the six run past it, never taller than
   the screen below the bar */
@media (min-width: 992px) {
  .page-development .engage .split__grid { align-items: start; }
  .page-development .engage .split__media { position: sticky; top: calc(var(--nav-h) + 2rem); justify-self: stretch; max-height: calc(100svh - var(--nav-h) - 4rem); }
  .page-development .engage__list { grid-template-columns: minmax(0, 1fr); }
}
/* who we serve: the photograph takes seven columns, the eleven names a quiet directory of hairline rows */
.page-development .serve__list { grid-template-columns: minmax(0, 1fr); }
.page-development .serve__list .index__item { padding: 1rem 0 1.15rem; }
/* the photograph at 4:3 at every width, so the three people at the table all stay in the frame (Josh's pick, 2026-10-15) */
.page-development .serve .split__media { aspect-ratio: 4 / 3; }
@media (min-width: 640px) and (max-width: 991px) { .page-development .serve__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .page-development .serve .split__media { grid-column: 6 / -1; }
  .page-development .serve .split__body { grid-column: 1 / span 4; }
  .page-development .serve__list { grid-template-columns: minmax(0, 1fr); }
}

/* the closing line in two rows */
.page-development .cta-band__title { max-width: 14ch; }