/* Confidante · shared sub-page components. Loaded after site.css on every page; tokens only (tokens.css), sharp corners,
   no shadows, the flat crest navy ground. One block per component; markup, attributes, variants and motion for each are in
   clients/confidante/docs/pages/COMPONENTS.md, and site/_components.html shows every one with real brief copy.
   Page-scoped styles go in css/pages/<slug>.css, every selector starting with the page's body class (.page-<slug>). */

/* ───────────── scaffold: sections, section heads, labels ───────────── */
/* every sub-page section sits on the crest navy with the same generous air (after pacaso.com); two sections in a row
   share one gap instead of stacking two */
.section { position: relative; padding-block: var(--section); background-color: var(--page); color: var(--text-2); }
.section + .section { padding-top: 0; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section + .section--tight { padding-top: 0; }

/* the brief's section name as a title, an optional Zodiak lede and an optional plain paragraph */
.section-head { display: grid; gap: var(--space-head); margin-bottom: var(--space-open); }
.section-head__title { max-width: 22ch; font-size: var(--fs-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; color: var(--text-1); }
.section-head__lede { max-width: 40ch; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.5; color: var(--text-2); }
.section-head__text { max-width: 52ch; color: var(--text-3); }
.section-head--center { justify-items: center; text-align: center; }
.section-head--center > * { margin-inline: auto; }
@media (min-width: 992px) {
  .section-head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .section-head--split .section-head__title { grid-column: 1 / span 6; }
  .section-head--split .section-head__lede, .section-head--split .section-head__text { grid-column: 8 / -1; }
  /* with a lede and a paragraph the title spans both rows from the top, instead of sitting level with the lede's last line */
  .section-head--split:has(> .section-head__lede):has(> .section-head__text) { align-items: start; }
  .section-head--split:has(> .section-head__lede):has(> .section-head__text) .section-head__title { grid-row: 1 / span 2; }
}
/* a small capital label where it carries information (a status, a category); never one over every heading */
.label { 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); }
/* the homepage's divider: a hairline between two small diamonds */
.divider { display: flex; align-items: center; gap: 10px; }
.divider span:nth-child(odd) { flex: none; width: 6px; height: 6px; border: 1px solid var(--line-3); transform: rotate(45deg); }
.divider span:nth-child(2) { flex: 1; height: 1px; background: var(--line-2); }

/* quiet reveals (pages.js): the children of a [data-reveal-list] rise in a short stagger, a [data-reveal-media] frame
   opens from a clip once. Hidden only once pages.js has run, so nothing hides without it */
.pages-js [data-reveal-list] > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-4) var(--ease-out) calc(var(--i, 0) * 50ms), transform var(--dur-4) var(--ease-out) calc(var(--i, 0) * 50ms); }
.pages-js [data-reveal-list].is-in > * { opacity: 1; transform: none; }
.pages-js [data-reveal-media] { clip-path: inset(8% 6% 8% 6%); transition: clip-path 1200ms var(--ease-out); }
.pages-js [data-reveal-media] img { transform: scale(1.08); transition: transform 1400ms var(--ease-out); }
.pages-js [data-reveal-media].is-in { clip-path: inset(0 0 0 0); }
.pages-js [data-reveal-media].is-in img { transform: none; }

/* ───────────── page hero · after pacaso.com's inner pages (Josh, 2026-10-13): the words first, centred on the white page
   with room around them, then the photograph (or muted film) as a wide band under them. The bar is solid over it from
   the start (initNavState). Every hero is centred now, so .page-hero--center and .page-hero--short add nothing ───────────── */
.page-hero { position: relative; display: flex; flex-direction: column; background-color: var(--page); color: var(--text-2); }
.page-hero__inner { order: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-head); text-align: center;
  padding-block: calc(var(--nav-h) + clamp(3.5rem, 2rem + 5vw, 7.5rem)) clamp(3rem, 2rem + 3.5vw, 5.5rem); }
.page-hero__head, .page-hero__aside { display: flex; flex-direction: column; align-items: center; gap: var(--space-head); max-width: 100%; }
.page-hero__label { display: block; 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); }
.page-hero__title { margin: 1.1rem auto 0; max-width: 20ch; font-size: clamp(2.5rem, 1.75rem + 2.6vw, 4.25rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-hero__title { font-weight: 400; } }
.page-hero__lede { max-width: 52ch; margin-inline: auto; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-hero__action { align-self: center; margin-top: calc(var(--space-action) - var(--space-head)); }
/* the band: full width, about two fifths of the screen tall on desktops; it opens from a slight inset on arrival */
.page-hero__media { order: 2; position: relative; height: clamp(18rem, 9rem + 32vw, 42rem); overflow: hidden; background-color: var(--raised); }
.page-hero__img, .page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.page-hero__video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.page-hero__video.is-playing { opacity: 1; }
.page-hero .page-hero__veil { display: none; } /* the words no longer sit on the picture */
/* a page may set the phone crop apart from the desktop one: style="--focus: 60% 50%; --focus-phone: 70% 50%" */
@media (max-width: 767px) { .page-hero__img, .page-hero__video { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.page-hero--center .page-hero__title, .page-hero--center .page-hero__lede { margin-inline: auto; }
/* the arrival: the label, title, lede and action rise in turn while the band opens and its picture settles (CSS only, so
   it runs on the first paint with or without script); afterwards the picture drifts very slowly, paused off screen */
.page-hero__media { animation: page-hero-open 1600ms var(--ease-out) 300ms both; }
.page-hero__img, .page-hero__video { animation: page-hero-settle 2600ms var(--ease-out) both; }
.page-hero__img { animation: page-hero-settle 2600ms var(--ease-out) both, page-hero-drift 28s var(--ease-in-out) 2600ms infinite alternate; }
.page-hero.is-off .page-hero__img { animation-play-state: paused; }
.page-hero__label, .page-hero__title, .page-hero__lede, .page-hero__action { animation: page-hero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-hero__label { animation-delay: 100ms; }
.page-hero__title { animation-delay: 220ms; }
.page-hero__lede { animation-delay: 400ms; }
.page-hero__action { animation-delay: 540ms; }
@keyframes page-hero-open { from { clip-path: inset(7% 5% 0 5%); } to { clip-path: inset(0 0 0 0); } }
@keyframes page-hero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes page-hero-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes page-hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ───────────── intro / philosophy · the homepage's about story (crest, label, statement) with supporting columns ───────────── */
.intro__grid { display: grid; gap: var(--space-head); }
.intro__mark { display: flex; align-items: flex-start; gap: 16px; }
.intro__crest { flex: none; width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.intro__label { max-width: 18ch; font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.7; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
.intro__statement { max-width: 30ch; font-family: var(--font-display); font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.625rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-1); text-wrap: balance; }
.intro__cols { display: grid; gap: 1.25rem var(--col-gap); margin-top: var(--space-action); }
.intro__cols p { color: var(--text-3); }
.intro__action { margin-top: var(--space-action); }
@media (min-width: 768px) { .intro__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .intro__cols--one { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 992px) {
  .intro__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .intro__mark { grid-column: 1 / span 3; }
  .intro__body { grid-column: 5 / -1; }
  .intro__statement { font-weight: 300; }
}
.intro--center .intro__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.intro--center .intro__mark { flex-direction: column; align-items: center; grid-column: 1 / -1; }
.intro--center .intro__body { grid-column: 1 / -1; display: grid; justify-items: center; }
.intro--center .intro__statement { margin-inline: auto; max-width: 28ch; }
/* centred, the label is a single line (18ch broke two-word names such as "Confidante Wellness" over two centred lines) */
.intro--center .intro__label { max-width: none; text-wrap: balance; }
.intro--center .intro__cols { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.intro--center .intro__cols p { max-width: 54ch; margin-inline: auto; }

/* ───────────── index list · numbered or iconed items with hairlines, 2 to 4 columns, for the brief's lists of 6 to 16 ───────────── */
.index__list { --cols: 3; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--col-gap); counter-reset: index; }
.index__list[data-cols="2"] { --cols: 2; }
.index__list[data-cols="4"] { --cols: 4; }
.index__list[data-cols="5"] { --cols: 3; }
.index__list--labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .index__list { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } }
@media (min-width: 1200px) { .index__list[data-cols="5"] { --cols: 5; } }
/* one column at every width, for a list inside a split body or beside a form */
.index__list[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.index__item { counter-increment: index; display: grid; align-content: start; gap: 0.6rem; padding: 1.25rem 0 2.25rem; border-top: 1px solid var(--line-2); }
.index__item::before { content: counter(index, decimal-leading-zero); font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--text-3); }
.index__title { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--text-1); text-wrap: balance; }
.index__line { max-width: 36ch; font-size: var(--fs-small); line-height: 1.6; color: var(--text-3); }
/* plain: no numbers; icons: a gold line icon beside the title instead of the number (scripts/icon.mjs prints them) */
.index__list--plain .index__item::before, .index__list--icons .index__item::before { content: none; }
.index__list--icons .index__item { grid-template-columns: 28px minmax(0, 1fr); column-gap: 1rem; padding-top: 1.5rem; }
.index__list--icons .index__item > :not(.index__icon) { grid-column: 2; }
.index__icon { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--accent); }
/* a title-only item (icon and name, no line) keeps one row: the spanned second row only added an empty gap under it */
.index__list--icons .index__item:not(:has(> :nth-child(3))) .index__icon { grid-row: 1; }

/* ───────────── process · a horizontal timeline whose gold hairline follows the scroll; vertical below 992px ───────────── */
.process__track { position: relative; }
.process__steps { --n: 6; position: relative; display: grid; gap: 2.75rem; counter-reset: step; }
.process__rail { position: absolute; left: var(--rail-x, 4px); top: var(--rail-y, 0.6rem); width: var(--rail-w, 1px); height: var(--rail-h, calc(100% - 1.2rem)); background: var(--line-2); pointer-events: none; }
.process__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 0; }
.pages-js .process__fill { transform: scaleY(0); }
.process__step { counter-increment: step; position: relative; display: grid; align-content: start; gap: 0.5rem; padding-left: 2.5rem; }
.process__mark { position: absolute; left: 0; top: 0.35rem; z-index: 1; width: 9px; height: 9px; border: 1px solid var(--text-3); background-color: var(--page); transform: rotate(45deg); transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.process__step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--text-3); }
.process__title { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; color: var(--text-1); transition: color var(--dur-3) var(--ease-out); }
.process__line { max-width: 30ch; font-size: var(--fs-small); line-height: 1.6; color: var(--text-3); }
/* an optional gold line icon per step (the brief's "minimal gold icons" on a timeline), after the mark: gold, and grey
   only while the hairline has not reached its step, so without script or under reduced motion every icon reads gold */
.process__icon { display: block; width: 24px; height: 24px; margin-bottom: 0.35rem; color: var(--accent); transition: color var(--dur-3) var(--ease-out); }
.process__step[data-status="after"] .process__icon { color: var(--text-3); }
/* pages.js sets data-status before / active / after from the hairline's progress (Osmo Sticky Steps' states) */
.process__step[data-status="after"] .process__title { color: var(--text-3); }
.process__step[data-status="before"] .process__mark, .process__step[data-status="active"] .process__mark { background-color: var(--accent); border-color: var(--accent); }
@media (min-width: 992px) {
  .process__steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--col-gap); }
  .process__step { padding: 2.5rem 1rem 0 0; }
  .process__mark { top: 0; }
  .pages-js .process__fill { transform: scaleX(0); }
}
.pages-js .process.is-complete .process__fill { transform: none; }

/* ───────────── editorial cards · image, title, text, optional link; 2, 3 or 4 up; a sideways row on phones ───────────── */
.cards__list { --cols: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-open) var(--col-gap); padding-inline: var(--edge); }
.cards__list[data-cols="2"] { --cols: 2; }
.cards__list[data-cols="4"] { --cols: 4; }
@media (min-width: 992px) { .cards__list { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } }
.card { position: relative; display: grid; align-content: start; gap: 0.85rem; }
.card__media { position: relative; margin: 0 0 0.4rem; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--raised); }
.cards__list[data-ratio="3x2"] .card__media { aspect-ratio: 3 / 2; }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: saturate(0.9); transition: transform var(--dur-lux) var(--ease-lux); }
.card__title { font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); text-wrap: balance; }
@media (min-width: 992px) { .card__title { font-weight: 300; } }
.card__text { max-width: 40ch; color: var(--text-3); }
.card__more { margin-top: 0.25rem; }
/* a linked card: the title's link covers the whole card */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .card:has(.card__link):hover .card__media img { transform: scale(1.04); }
  .card:has(.card__link):hover .card__more::after { transform: scaleX(1); }
}
/* touch screens: the card crossing the middle of the screen takes the hover state (initTouchCards in site.js sets .is-near) */
@media (hover: none), (pointer: coarse) {
  .card.is-near .card__media img { transform: scale(1.04); }
  .card.is-near .card__more::after { transform: scaleX(1); }
}
/* phones: one row that scrolls sideways, the next card peeking in */
@media (max-width: 639px) {
  .cards__list { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: var(--margin); scroll-padding-inline: var(--margin); scrollbar-width: none; }
  .cards__list::-webkit-scrollbar { display: none; }
  .cards__list > * { flex: 0 0 min(80%, 20rem); scroll-snap-align: start; }
}

/* ───────────── split · a photograph beside the text; --flip mirrors it ───────────── */
.split__grid { display: grid; gap: var(--space-open) var(--col-gap); align-items: center; }
.split__media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--raised); }
.split__media--landscape { aspect-ratio: 3 / 2; }
/* stacked on tablets the 4:5 frame ran the full width and taller than the screen (about 880px at 768): 3:2 there */
@media (min-width: 640px) and (max-width: 991px) { .split__media { aspect-ratio: 3 / 2; } }
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.split__caption { margin-top: 0.85rem; font-size: var(--fs-small); color: var(--text-3); }
.split__title { max-width: 18ch; font-size: var(--fs-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; color: var(--text-1); }
.split__lede { margin-top: var(--space-head); max-width: 36ch; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); }
.split__body > p:not(.split__lede) { margin-top: 1.1rem; color: var(--text-3); }
.split__body > .split__title + p:not(.split__lede) { margin-top: var(--space-head); }
.split__body > .btn, .split__body > .action { margin-top: var(--space-action); }
@media (min-width: 992px) {
  .split__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .split__media { grid-column: 1 / span 6; grid-row: 1; }
  .split__body { grid-column: 8 / -1; grid-row: 1; }
  .split--flip .split__media { grid-column: 7 / -1; }
  .split--flip .split__body { grid-column: 1 / span 5; }
}

/* ───────────── panorama · one huge editorial photograph with a gentle parallax and a caption underneath ───────────── */
.panorama { position: relative; background-color: var(--page); }
.panorama__figure { margin: 0; }
.panorama__frame { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background-color: var(--raised); }
.panorama--inset .panorama__frame { width: min(100% - 2 * var(--margin), var(--frame)); margin-inline: auto; }
.panorama__img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: var(--focus, 50% 50%); will-change: transform; }
.panorama__caption { width: min(100% - 2 * var(--margin), var(--frame)); margin: 1rem auto 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
@media (max-width: 991px) { .panorama__frame { aspect-ratio: 16 / 10; } }
@media (max-width: 639px) { .panorama__frame { aspect-ratio: 4 / 5; } }
@media (max-width: 767px) { .panorama__img { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
/* the heading in the tight section before it sits with its photograph (the head's own margin is the gap) */
.section--tight:has(+ .panorama) { padding-bottom: 0; }

/* ───────────── map band · the homepage's line-art world map with configurable markets (pages.js draws the pins) ───────────── */
.mapband__map { max-width: 76rem; margin-inline: auto; }
.mapband .map__label { left: var(--x); top: var(--y); pointer-events: auto; transition: color var(--dur-3) var(--ease-out); }
.mapband .map__label.is-lit { color: var(--text-1); }
.mapband .map__dot { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-3) var(--ease-out); }
.mapband .map__pin.is-lit .map__dot { transform: scale(1.6); }
/* the markets as text: under the map on phones (where the map's own labels are hidden), for screen readers above that */
.mapband__markets { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 40px; margin-top: var(--space-head); }
.mapband__markets li { font-size: var(--fs-small); line-height: 1.4; color: var(--text-1); }
@media (min-width: 768px) { .mapband__markets { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* phones read the markets from that list, so the map band's own labels stay hidden there (the homepage map in the sideways
   track shows its labels on phones since 2026-10-15; this band keeps its list) */
@media (max-width: 767px) { .mapband .map__labels { display: none; } }

/* ───────────── people · the client's gold-ring portraits, name and title; a bio opens in the homepage's dialog ───────────── */
.people__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-open) var(--col-gap); }
@media (min-width: 768px) { .people__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .people__grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } .people__grid[data-cols="3"] { --cols: 3; } }
.person { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 100%; min-height: 44px; color: inherit; text-align: center; }
.person__portrait { width: min(13rem, 100%); height: auto; aspect-ratio: 1; margin-bottom: 1rem; object-fit: contain; transition: transform var(--dur-lux) var(--ease-lux); }
.person__name { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; color: var(--text-1); }
.person__role { max-width: 26ch; font-size: var(--fs-small); line-height: 1.55; color: var(--text-3); }
.person__more { min-height: 0; margin-top: auto; }
/* every "Read bio" in a row on one line, whatever the length of the titles above it; an odd last portrait centred on phones */
.people__grid > li { display: flex; }
.person__role { margin-bottom: 0.6rem; text-wrap: balance; }
@media (max-width: 767px) { .people__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--col-gap) / 2); } }
@media (hover: hover) and (pointer: fine) {
  button.person:hover .person__portrait { transform: scale(1.03); }
  button.person:hover .person__more::after { transform: scaleX(1); }
}
@media (hover: none), (pointer: coarse) {
  button.person.is-near .person__portrait { transform: scale(1.03); }
  button.person.is-near .person__more::after { transform: scaleX(1); }
}
.people__group + .people__group { margin-top: var(--space-open); }
.people__group-title { margin-bottom: var(--space-open); padding-bottom: 1rem; border-bottom: 1px solid var(--line); 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); }
/* the bio dialog: the homepage's company dialog with the portrait on a navy plate */
.co--bio .co__media { display: grid; place-items: center; min-height: 15rem; padding: 2rem; background-color: var(--navy); }
.co--bio .co__media img { position: static; width: min(76%, 17rem); height: auto; aspect-ratio: 1; object-fit: contain; }
.co--bio .co__body { align-content: start; }
@media (min-width: 768px) { .co--bio .co__panel { grid-template-columns: 4fr 7fr; } }
@media (max-width: 767px) { .co--bio .co__media { aspect-ratio: auto; min-height: 0; } .co--bio .co__media img { width: min(60%, 13rem); } }
/* a long biography makes the panel scroll: the close holds to the panel's top right instead of scrolling away with the
   text (a phone has no Escape key), and from 768px the portrait waits at the top of its plate instead of centring on the
   whole column (folded in from the Sales & Marketing and Wellness pages, 2026-10-12). The portrait and the text are
   placed explicitly, so the close may share their cells */
.co--bio .co__media { grid-row: 1; grid-column: 1; }
.co--bio .co__body { grid-row: 2; grid-column: 1; }
.co--bio .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) {
  .co--bio .co__body { grid-row: 1; grid-column: 2; }
  .co--bio .co__close { grid-row: 1; }
  .co--bio .co__media { place-items: start center; padding-top: clamp(2.5rem, 5vw, 3.5rem); }
  .co--bio .co__media img { position: sticky; top: clamp(2.5rem, 5vw, 3.5rem); }
}

/* ───────────── names · partners as type until their logos are approved; no logos, no "logos to follow" ───────────── */
.names__list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--col-gap); border-bottom: 1px solid var(--line-2); }
@media (min-width: 640px) { .names__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .names__list { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } .names__list[data-cols="2"] { --cols: 2; } .names__list[data-cols="3"] { --cols: 3; } }
.names__item { display: grid; align-content: center; justify-items: center; gap: 0.75rem; min-height: clamp(9rem, 14vw, 12.5rem); padding: 2rem 1rem; border-top: 1px solid var(--line-2); text-align: center; }
.names__name { font-family: var(--font-display); font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); text-wrap: balance; }
@media (min-width: 992px) { .names__name { font-weight: 300; } }
a.names__name { display: inline-flex; align-items: center; min-height: 44px; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.names__name:hover { text-decoration-color: var(--line-3); } }
.names__field { 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); }
/* two lines' room, so the names in a row stay level when one field wraps ("Project & Development Management") */
@media (min-width: 640px) { .names__field { min-height: calc(2 * 1.4em); } }

/* ───────────── diagram · Confidante at the centre with labelled spokes (radial), or a chain of disciplines ───────────── */
.diagram { position: relative; width: 100%; max-width: 72rem; margin: 0 auto; }
.diagram__svg { display: none; }
.diagram__centre { display: grid; place-items: center; width: min(100%, 22rem); margin: 0 auto var(--space-open); padding: 1.75rem 1.5rem; border: 1px solid var(--accent-line); background-color: var(--card); text-align: center; }
.diagram__centre-label { max-width: 16ch; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; color: var(--text-1); }
.diagram__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--col-gap); }
.diagram__node { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0.5rem 0; border-top: 1px solid var(--line); font-family: var(--font-text); font-size: var(--fs-small); line-height: 1.4; color: var(--text-1); }
.diagram__node::before { content: ""; flex: none; width: 7px; height: 7px; background-color: var(--accent); transform: rotate(45deg); }
.diagram__node--outer { color: var(--text-2); }
@media (min-width: 768px) {
  .diagram--radial { height: clamp(30rem, 62vw, 44rem); }
  .diagram--radial .diagram__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
  .diagram--radial .diagram__centre { position: absolute; left: 50%; top: 50%; z-index: 1; width: auto; margin: 0; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); }
  .diagram--radial .diagram__centre-label { max-width: 12ch; font-size: var(--fs-lede); }
  .diagram--radial .diagram__nodes { position: absolute; inset: 0; display: block; }
  .diagram--radial .diagram__node { position: absolute; left: var(--x, 50%); top: var(--y, 50%); min-height: 0; padding: 0; border: 0; gap: 0; white-space: nowrap; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transform: translate(14px, -50%); }
  .diagram--radial .diagram__node::before { content: none; }
  .diagram--radial .diagram__node[data-side="l"] { transform: translate(calc(-100% - 14px), -50%); }
  .diagram--radial .diagram__node[data-side="t"] { transform: translate(-50%, calc(-100% - 14px)); }
  .diagram--radial .diagram__node[data-side="b"] { transform: translate(-50%, 14px); }
  .diagram--radial .diagram__node--outer { font-weight: 400; color: var(--text-2); }
}
.diagram__ring { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.diagram__orbit { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.diagram__spoke { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.55; }
.diagram__dot { fill: var(--accent); }
.diagram__dot--outer { fill: var(--page); stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* drawn once on arrival (pages.js adds is-ready, then is-drawn): the ring, then each spoke, its dot and its label */
.pages-js .diagram--radial.is-ready .diagram__ring, .pages-js .diagram--radial.is-ready .diagram__spoke { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-out) calc(var(--i, 0) * 55ms + 150ms); }
.pages-js .diagram--radial.is-ready .diagram__ring { transition-delay: 0ms; }
.pages-js .diagram--radial.is-ready .diagram__dot, .pages-js .diagram--radial.is-ready .diagram__node, .pages-js .diagram--radial.is-ready .diagram__centre-label { opacity: 0; transition: opacity var(--dur-4) var(--ease-out) calc(var(--i, 0) * 55ms + 450ms); }
.pages-js .diagram--radial.is-ready .diagram__centre-label { transition-delay: 200ms; }
.pages-js .diagram--radial.is-drawn .diagram__ring, .pages-js .diagram--radial.is-drawn .diagram__spoke { stroke-dashoffset: 0; }
.pages-js .diagram--radial.is-drawn .diagram__dot, .pages-js .diagram--radial.is-drawn .diagram__node, .pages-js .diagram--radial.is-drawn .diagram__centre-label { opacity: 1; }
/* phones (the mobile pass, 2026-10-15): below 768px the figure is the centre box and a list, so nothing was drawn; each name's
   rule now draws in gold from the left as the name arrives, in the spokes' stagger, so the figure keeps its drawn-line motion
   (folded in from the Services page, which did the same) */
@media (max-width: 767px) {
  .diagram--radial .diagram__node::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background-color: var(--accent); opacity: 0.55; transform-origin: 0 50%; }
  .pages-js .diagram--radial.is-ready .diagram__node::after { transform: scaleX(0); transition: transform 900ms var(--ease-out) calc(var(--i, 0) * 110ms + 150ms); }
  .pages-js .diagram--radial.is-drawn .diagram__node::after { transform: none; }
}
/* chain: a vertical sequence joined by gold hairlines that draw one after another */
.diagram--chain { max-width: 34rem; }
.diagram--chain .diagram__nodes { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.diagram--chain .diagram__node { justify-content: center; min-height: 44px; padding: 0.75rem 0; border-top: 0; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.diagram--chain .diagram__node::before { content: none; }
.diagram--chain .diagram__node + .diagram__node { margin-top: 3rem; }
.diagram--chain .diagram__node + .diagram__node::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 3rem; background-color: var(--accent); transform-origin: 50% 0; }
.pages-js .diagram--chain.is-ready .diagram__node + .diagram__node::after { transform: scaleY(0); transition: transform var(--dur-4) var(--ease-out) calc(var(--i, 0) * 160ms); }
.pages-js .diagram--chain.is-drawn .diagram__node + .diagram__node::after { transform: none; }

/* ───────────── FAQ · native details/summary, one open at a time, the height animated by pages.js ───────────── */
.faq__grid { display: grid; gap: var(--space-open) var(--col-gap); }
@media (min-width: 992px) {
  .faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .faq__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 2rem); }
  .faq__list { grid-column: 6 / -1; }
}
.faq__head .section-head { margin-bottom: 0; }
.faq__item { border-top: 1px solid var(--line-2); }
.faq__item:last-child { border-bottom: 1px solid var(--line-2); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 44px; padding: 1.75rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.35; color: var(--text-1); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q-text { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .faq__q:hover .faq__q-text { text-decoration-color: var(--line-3); } }
.faq__icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: var(--accent); transition: transform var(--dur-3) var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open]:not(.is-closing) .faq__icon::after { transform: rotate(90deg) scaleX(0); }
.faq__a { overflow: hidden; }
.faq__a > :last-child { padding-bottom: 2rem; }
.faq__a p { max-width: 58ch; color: var(--text-3); }
.faq__a p + p { margin-top: 1rem; }

/* ───────────── gallery · a six-photograph editorial grid with deliberate offsets, and a three-panel variant ───────────── */
.gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.gallery__item { margin: 0; }
.gallery__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--raised); }
.gallery__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: saturate(0.9); }
.gallery__caption { margin-top: 0.75rem; font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
.gallery__grid--six .gallery__item:first-child { grid-column: 1 / -1; }
.gallery__grid--six .gallery__item:first-child .gallery__frame { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
  .gallery__grid--six { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-open); align-items: start; }
  .gallery__grid--six .gallery__item:nth-child(1) { grid-column: 1 / span 7; }
  .gallery__grid--six .gallery__item:nth-child(2) { grid-column: 9 / span 4; align-self: end; }
  .gallery__grid--six .gallery__item:nth-child(3) { grid-column: 2 / span 4; }
  .gallery__grid--six .gallery__item:nth-child(4) { grid-column: 7 / span 6; align-self: center; }
  .gallery__grid--six .gallery__item:nth-child(4) .gallery__frame { aspect-ratio: 3 / 2; }
  .gallery__grid--six .gallery__item:nth-child(5) { grid-column: 1 / span 6; }
  .gallery__grid--six .gallery__item:nth-child(5) .gallery__frame { aspect-ratio: 3 / 2; }
  .gallery__grid--six .gallery__item:nth-child(6) { grid-column: 8 / span 4; margin-top: var(--space-open); }
}
/* phones: the first photograph runs full width and the next four pair up, so the sixth runs full width too (3:2) instead
   of sitting alone beside an empty column */
@media (max-width: 767px) {
  .gallery__grid--six .gallery__item:nth-child(6):last-child { grid-column: 1 / -1; }
  .gallery__grid--six .gallery__item:nth-child(6):last-child .gallery__frame { aspect-ratio: 3 / 2; }
}
.gallery__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.gallery__grid--three .gallery__frame { aspect-ratio: 2 / 3; }
.gallery__grid--three .gallery__item:nth-child(2) { margin-top: var(--space-open); }
@media (max-width: 639px) {
  .gallery__grid--three { display: flex; gap: 12px; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); scrollbar-width: none; }
  .gallery__grid--three::-webkit-scrollbar { display: none; }
  .gallery__grid--three .gallery__item { flex: 0 0 min(76%, 18rem); scroll-snap-align: start; }
  .gallery__grid--three .gallery__item:nth-child(2) { margin-top: 0; }
}

/* ───────────── video panels · three muted films that play while in view, posters until they do (or until real film exists) ───────────── */
.panels__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); padding-inline: var(--edge); }
.panel { display: grid; gap: 1rem; margin: 0; }
.panel__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--raised); }
.panel__poster, .panel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__video { opacity: 0; transition: opacity 700ms var(--ease-out); }
.panel__video.is-playing { opacity: 1; }
/* the large play / pause control (the brief's "large play buttons"): square, a gold hairline on a veil */
.panel__toggle { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--gold-line); background-color: rgb(var(--veil) / 0.6); color: var(--accent); transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.panel__toggle[hidden] { display: none; }
.panel__toggle:active { transform: scale(0.96); }
.panel__toggle svg { width: 18px; height: 18px; }
.panel__toggle .panel__icon-play { display: none; }
.panel__toggle[aria-pressed="false"] .panel__icon-play { display: block; }
.panel__toggle[aria-pressed="false"] .panel__icon-pause { display: none; }
@media (hover: hover) and (pointer: fine) { .panel__toggle:hover { background-color: rgb(var(--veil) / 0.85); } }
.panel__title { display: block; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.3; color: var(--text-1); }
.panel__line { display: block; margin-top: 0.35rem; font-size: var(--fs-small); line-height: 1.55; color: var(--text-3); }
@media (max-width: 767px) {
  .panels__list { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: var(--margin); scroll-padding-inline: var(--margin); scrollbar-width: none; }
  .panels__list::-webkit-scrollbar { display: none; }
  .panels__list > * { flex: 0 0 min(78%, 19rem); scroll-snap-align: start; }
}

/* ───────────── notices · quiet, honest cards for what is announced later (events, news, opportunities) ───────────── */
.notices__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--col-gap); }
@media (min-width: 768px) { .notices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .notices__list { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } .notices__list[data-cols="2"] { --cols: 2; } .notices__list[data-cols="4"] { --cols: 4; } }
/* exactly three cards: one row from 992px (two up to 1199px orphaned the third) */
@media (min-width: 992px) { .notices__list[data-cols="3"]:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notice { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); border: 1px solid var(--line); background-color: var(--card); container-type: inline-size; }
/* in a narrow card a wrapped action label kept the full width and pushed its hairline to the far edge */
@container (max-width: 16rem) { .notice__action { max-width: 14em; } }
@media (min-width: 768px) { .notice { min-height: 15rem; } }
.notice__status { 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.06em; text-transform: uppercase; color: var(--text-3); }
.notice__status::before { content: ""; flex: none; width: 24px; height: 1px; background-color: currentColor; }
.notice__title { font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); text-wrap: balance; }
@media (min-width: 992px) { .notice__title { font-weight: 300; } }
.notice__text { color: var(--text-3); }
.notice__meta { display: grid; gap: 0.6rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.notice__meta div { display: flex; justify-content: space-between; gap: 1rem; }
.notice__meta dt { 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); }
.notice__meta dd { font-size: var(--fs-small); line-height: 1.4; color: var(--text-1); text-align: right; }
.notice__action { margin-top: auto; }
.notice__meta + .notice__action { margin-top: 0.25rem; }

/* ───────────── form block · intro beside the form card; the homepage's .form and .field, plus choices and files ───────────── */
.form-block__grid { display: grid; gap: var(--space-open) var(--col-gap); }
/* a grid item never grows past its column (a long email address overflowed at 320px; folded in from Careers and Media, 2026-10-15) */
.form-block__grid > * { min-width: 0; }
@media (min-width: 992px) {
  .form-block__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .form-block__intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 2rem); }
  .form-block__card { grid-column: 7 / -1; }
}
.form-block__title { max-width: 18ch; font-size: var(--fs-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; color: var(--text-1); }
.form-block__lede { margin-top: var(--space-head); max-width: 36ch; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); }
.form-block__intro > p:not(.form-block__lede) { margin-top: 1.1rem; color: var(--text-3); }
.form-block__facts { display: grid; gap: var(--space-head); margin-top: var(--space-open); padding-top: var(--space-head); border-top: 1px solid var(--line); }
.form-block__facts dt { 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); }
.form-block__facts dd { margin-top: 0.5rem; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-1); }
.form-block__facts dd .link { font: inherit; letter-spacing: inherit; }
.form-block__facts dd { overflow-wrap: anywhere; }
@media (max-width: 359px) { .form-block__facts dd { font-size: var(--fs-body); } }
.form-block__card { padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--line); background-color: var(--card); }
/* from 992 to 1199px the card is about 430px wide: one field per row there */
@media (min-width: 992px) and (max-width: 1199px) { .form-block .form__row { grid-template-columns: minmax(0, 1fr); } }
/* after a closing band, whose foot already dissolves into the navy, the form opens at the section-opening gap */
.cta-band + .form-block { padding-top: var(--space-open); }
.field__hint { font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
.field input[type="file"] { padding: 0.65em 1em; cursor: pointer; }
.field input[type="file"]::file-selector-button { margin-right: 1em; padding: 0.55em 1.1em; border: 1px solid var(--action-line); border-radius: 0; background: transparent; color: var(--action); font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
/* choices: a fieldset of checkboxes or radios, sharp boxes drawn by .choice__box (the input itself stays out of sight) */
.choices { display: grid; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.choices__legend { padding: 0; font-size: var(--fs-small); line-height: 1.4; color: var(--text-3); }
.choices__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); column-gap: var(--col-gap); }
.choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: var(--fs-small); line-height: 1.4; color: var(--text-1); }
.choice__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice__box { flex: none; width: 20px; height: 20px; border: 1px solid var(--field-line); background-color: var(--field-bg); transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.choice__input[type="radio"] + .choice__box { border-radius: 50%; }
.choice__input:checked + .choice__box { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230B1726' stroke-width='1.6'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center / 16px no-repeat; }
.choice__input:focus-visible + .choice__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.choices[aria-invalid="true"] .choice__box, .choice__input[aria-invalid="true"] + .choice__box { border-color: var(--danger); }
@media (hover: hover) and (pointer: fine) { .choice:hover .choice__box { border-color: var(--field-line-hover); } }

/* ───────────── prose · an Insights article: title, meta, lead photograph, body with Zodiak subheads and figures ───────────── */
.post { padding-block: var(--section); background-color: var(--page); color: var(--text-2); }
/* an article page opens on the article itself, a step below the bar */
.post--page { padding-top: calc(var(--nav-h) + var(--space-open)); }
/* one column of reading width, figures may step out to the wide track */
.post__grid { display: grid; grid-template-columns: [full-start] minmax(var(--margin), 1fr) [wide-start] minmax(0, 13rem) [text-start] min(100% - 2 * var(--margin), 44rem) [text-end] minmax(0, 13rem) [wide-end] minmax(var(--margin), 1fr) [full-end]; }
.post__grid > * { grid-column: text; }
/* the body shares the article's tracks, so a wide figure inside it can step out of the reading column */
.post__grid > .post__body { grid-column: full; display: grid; grid-template-columns: subgrid; }
.post__body > * { grid-column: text; }
@supports not (grid-template-columns: subgrid) { .post__grid > .post__body { grid-column: text; display: block; } }
.post__head { display: grid; gap: var(--space-head); }
.post__back { justify-self: start; }
.post__title { 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) { .post__title { font-weight: 400; } }
.post__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; 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); }
.post__meta > * + *::before { content: "·"; margin-right: 0.75rem; }
.post__meta > :empty { display: none; }
.post__lead { grid-column: wide; margin: var(--space-open) 0; }
.post__lead img, .post__figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--focus, 50% 50%); background-color: var(--raised); }
.post__lead figcaption, .post__figure figcaption { margin-top: 0.85rem; font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
.post__body { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.8; }
.post__body > * + * { margin-top: 1.35em; }
.post__body p { max-width: 64ch; color: var(--text-2); }
.post__body .post__intro { font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-1); }
.post__body h2 { margin-top: 2.4em; font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); }
.post__body h3 { margin-top: 2em; font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; color: var(--text-1); }
.post__body h2 + *, .post__body h3 + * { margin-top: 0.9em; }
@media (min-width: 992px) { .post__body h2 { font-weight: 300; } }
.post__figure { margin-block: 2.2em; }
.post__body > .post__figure--wide { grid-column: wide; }
.post__pull { margin-block: 2em; padding-block: 1.5rem; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font-family: var(--font-display); font-size: var(--fs-statement); line-height: 1.3; color: var(--text-1); }
.post__pull p { color: inherit; }
.post__nav { margin-top: var(--section); padding-top: var(--space-head); border-top: 1px solid var(--line); }
.post__next { display: grid; gap: 0.5rem; justify-items: start; min-height: 44px; color: inherit; }
.post__next-title { font-family: var(--font-display); font-size: var(--fs-subtitle); font-weight: 300; line-height: 1.15; color: var(--text-1); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .post__next:hover .post__next-title { text-decoration-color: var(--line-3); } }

/* ───────────── post cards · the Insights index ───────────── */
.posts__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-open) var(--col-gap); }
@media (min-width: 768px) { .posts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-card { position: relative; display: grid; align-content: start; gap: 1rem; }
.post-card__media { margin: 0 0 0.4rem; aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--raised); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: saturate(0.9); transition: transform var(--dur-lux) var(--ease-lux); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; 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); }
.post-card__meta > * + *::before { content: "·"; margin-right: 0.75rem; }
.post-card__title { max-width: 24ch; font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); text-wrap: balance; }
@media (min-width: 992px) { .post-card__title { font-weight: 300; } }
.post-card__excerpt { max-width: 46ch; color: var(--text-3); }
.post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card__link:focus-visible { outline: none; }
.post-card:has(.post-card__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .post-card:hover .post-card__media img { transform: scale(1.04); }
  .post-card:hover .post-card__more::after { transform: scaleX(1); }
}
@media (hover: none), (pointer: coarse) {
  .post-card.is-near .post-card__media img { transform: scale(1.04); }
  .post-card.is-near .post-card__more::after { transform: scaleX(1); }
}
/* the first post across the row, the photograph beside the words */
@media (min-width: 992px) {
  .posts__item--feature { grid-column: 1 / -1; }
  .posts__item--feature .post-card { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .posts__item--feature .post-card__media { grid-column: 1 / span 7; grid-row: 1 / span 5; margin: 0; }
  .posts__item--feature .post-card > :not(.post-card__media) { grid-column: 9 / -1; }
}

/* ───────────── reduced motion: everything in place, no drift, no settle, no draws ───────────── */
@media (prefers-reduced-motion: reduce) {
  .page-hero__media, .page-hero__img, .page-hero__label, .page-hero__title, .page-hero__lede, .page-hero__action { animation: none; }
  .page-hero__video { display: none; }
  .pages-js [data-reveal-list] > *, .pages-js [data-reveal-media], .pages-js [data-reveal-media] img { opacity: 1; transform: none; clip-path: none; transition: none; }
  .pages-js .process__fill { transform: none; }
  .panorama__img { top: 0; height: 100%; transform: none; }
  .pages-js .diagram--radial.is-ready .diagram__ring, .pages-js .diagram--radial.is-ready .diagram__spoke { stroke-dashoffset: 0; transition: none; }
  .pages-js .diagram--radial.is-ready .diagram__dot, .pages-js .diagram--radial.is-ready .diagram__node, .pages-js .diagram--radial.is-ready .diagram__centre-label { opacity: 1; transition: none; }
  .pages-js .diagram--chain.is-ready .diagram__node + .diagram__node::after { transform: none; transition: none; }
  .pages-js .diagram--radial.is-ready .diagram__node::after { transform: none; transition: none; }
  .panel__video { display: none; }
}