/* Confidante · Our Services (services.html). Page-scoped styles: every selector starts with .page-services, tokens only,
   sharp corners, no shadows. Revamp (2026-10-14, REVAMP-PLAN.md): the canonical .vhero block (§2, verbatim, prefixed),
   hero treatment W (the photograph opening from a window to the full screen), the navy section padding (§3.2), the pillar
   cards, then the page’s own extensions (the platform orbit, the ruled industries grid, the partner list, the Confidante difference film).
   The script (js/pages/services.js) opens the window and adds the orbit to the platform diagram. Decisions:
   clients/confidante/lab/revamp/services-notes.md; the earlier rules' reasons: clients/confidante/docs/pages/services.md. */

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

/* ───────────── hero W · the window opens (REVAMP-PLAN.md §2, treatment W) ─────────────
   The words centred on the white page (pacaso.com's inner hero), then the photograph on a sticky stage: a window inset
   12% each side and 62% of the screen tall (6% each side on phones) that opens to the full bleed and the full screen as
   the page scrolls (--wp, 0 to 1, scrubbed by js/pages/services.js), its picture settling from 1.12 to 1. The stage starts
   so that the window sits 3rem under the action; it opens only once the stage is held, so its top edge never climbs onto
   the words. The bar is solid from the top (no data-nav-clear). Reduced motion: a full-width band under the words. */
.page-services .vhero--w { background-color: var(--page); color: var(--text-1); }
.page-services .vhero--w .vhero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-head); min-height: 0; text-align: center;
  padding: calc(var(--nav-h) + clamp(3.5rem, 2rem + 5vw, 7.5rem)) var(--margin) 0; }
.page-services .vhero--w .vhero__head, .page-services .vhero--w .vhero__aside { justify-items: center; align-content: start; }
.page-services .vhero--w .vhero__lede { max-width: 52ch; }
.page-services .vhero--w .vhero__action { justify-self: center; }
.page-services .vhero__track { --wy: 19%; position: relative; height: 200svh; margin-top: calc(3rem - 19svh); }
.page-services .vhero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; pointer-events: none; }
.page-services .vhero__window { --wp: 0; --wx: 12%; position: absolute; inset: 0; overflow: hidden; background-color: var(--deep);
  clip-path: inset(calc(var(--wy) * (1 - var(--wp))) calc(var(--wx) * (1 - var(--wp)))); }
@media (max-width: 767px) { .page-services .vhero__window { --wx: 6%; } }
.page-services .vhero--w .vhero__media { z-index: 0; transform: scale(1.12); will-change: transform; }
.page-services .vhero--w .vhero__img { object-position: var(--focus, 50% 50%); }
/* the film (2026-10-15, every width when motion is allowed; js/pages/services.js): it starts on its own first frame, the
   still under it, and keeps the photograph's settle so the two stay in register while it fades in */
.page-services .vhero--w .vhero__film { animation: vhero-settle 2600ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .page-services .vhero__track { height: auto; margin-top: var(--space-open); }
  .page-services .vhero__stage { position: relative; height: clamp(18rem, 9rem + 32vw, 42rem); }
  .page-services .vhero__window { clip-path: none; }
  .page-services .vhero--w .vhero__media { transform: none; }
}

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

/* ───────────── our integrated services · the four pillars as the homepage's core cards. The pillar's name is the card's
   covering link (the card shows the focus ring); the companies sit above it and open their own blocks. Two columns from
   640 to 1199px ("Marketing & Communications" broke onto three lines at four columns between 992 and 1199px) ───────────── */
.page-services .svc-services .core__head { max-width: 48rem; }
.page-services .svc-services .core__lede { max-width: 44ch; }
.page-services .svc-services__text { max-width: 54ch; color: var(--text-3); }
.page-services .svc-card__frame { position: relative; }
.page-services .svc-card__link { color: inherit; }
.page-services .svc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.page-services .svc-card__link:focus-visible { outline: none; }
.page-services .svc-card:has(.svc-card__link:focus-visible) .core__link { outline: 2px solid var(--accent); outline-offset: 6px; }
.page-services .svc-card .core__line + .core__line { margin-top: -2px; }
.page-services .svc-card__companies { position: relative; z-index: 2; display: grid; justify-items: start; margin-top: 2px; }
.page-services .svc-card__companies .link { text-wrap: balance; }
.page-services .svc-card .core__more { margin-top: auto; }
/* touch screens (the mobile pass): the desktop hover state while a card is wholly on screen (js/pages/services.js) */
@media (hover: none) {
  .page-services .svc-card.is-near .core__link { border-color: var(--line-2); }
  .page-services .svc-card.is-near .core__media img { transform: scale(1.04); }
  .page-services .svc-card.is-near .core__more::after { transform: scaleX(1); }
}
@media (min-width: 992px) and (max-width: 1199px) { .page-services .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-open); } }

/* ── how the platform works (the page's signature moment): the shared radial diagram with the crest over "Confidante"
      at its centre. Each spoke draws out from the centre a little more slowly than the shared stagger, then the orbit
      (js/pages/services.js) runs clockwise from Development through the nine points: each service works on its own
      (its spoke) or with the others (the orbit), the brief's purpose for this graphic. Drawn once ── */
.page-services .svc-platform .section-head__text { max-width: 60ch; }
.page-services .svc-platform__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); margin-bottom: 0.75rem; color: var(--gold); }
.page-services .svc-platform .diagram__centre-label { font-size: var(--fs-subtitle); letter-spacing: -0.005em; }
@media (min-width: 992px) { .page-services .svc-platform .diagram__centre-label { font-weight: 300; } }
/* tablets draw the centre ring at about 83px, so the crest and the name step down to sit clear of it */
@media (min-width: 768px) and (max-width: 991px) {
  .page-services .svc-platform__crest { width: 1.75rem; height: calc(1.75rem * 1210 / 1092); margin-bottom: 0.4rem; }
  .page-services .svc-platform .diagram__centre-label { font-size: var(--fs-lede); }
}
.page-services .svc-orbit { stroke: var(--accent); stroke-opacity: 0.34; }
/* the slower stagger belongs to the drawing (768px up). Below 768px the diagram is a list with no spokes, and with the
   shared timing its last name is in by 1.5s instead of 2s (audit) */
@media (min-width: 768px) {
  .pages-js .page-services .svc-platform__diagram.is-ready .diagram__spoke { transition-delay: calc(var(--i, 0) * 90ms + 150ms); }
  /* each point and its name arrive as their spoke reaches them */
  .pages-js .page-services .svc-platform__diagram.is-ready .diagram__dot,
  .pages-js .page-services .svc-platform__diagram.is-ready .diagram__node { transition-delay: calc(var(--i, 0) * 90ms + 700ms); }
}
.pages-js .page-services .svc-platform__diagram.is-ready .svc-orbit { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms var(--ease-in-out) 1500ms; }
.pages-js .page-services .svc-platform__diagram.is-drawn .svc-orbit { stroke-dashoffset: 0; }
.pages-js .page-services .svc-platform__diagram.is-ready .svc-platform__crest { opacity: 0; transition: opacity var(--dur-4) var(--ease-out) 150ms; }
.pages-js .page-services .svc-platform__diagram.is-drawn .svc-platform__crest { opacity: 1; }
/* phones (the mobile pass): the shared diagram is a list below 768px with nothing drawn; here each row's rule draws in gold
   from the left as its name arrives, in the same stagger, so the section keeps its drawn-line motion */
@media (max-width: 767px) {
  .page-services .svc-platform__diagram .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 .page-services .svc-platform__diagram.is-ready .diagram__node::after { transform: scaleX(0); transition: transform 900ms var(--ease-out) calc(var(--i, 0) * 110ms + 150ms); }
  .pages-js .page-services .svc-platform__diagram.is-drawn .diagram__node::after { transform: none; }
}

/* ── built around collaboration: below 992px the photograph stacks above the words; from 640 to 991px it turns landscape
      (3:2), keeping the three faces and the papers between them ── */
@media (min-width: 640px) and (max-width: 991px) {
  .page-services .svc-collab .split__media { aspect-ratio: 3 / 2; }
  .page-services .svc-collab .split__media img { object-position: 50% 44%; }
}

/* ── industries we serve: a ruled grid, the gold line icon above each industry's name (the brief's "premium icon grid",
      names beneath the icons). The crest holds the first cell, so the eleven close on full rows at two, three and four
      columns. Rules run between the cells only; the first column sits on the page edge, as in a ruled table ── */
.page-services .svc-industries__grid { --tile-pad: clamp(1.25rem, 0.7rem + 1.6vw, 2.25rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line-2); }
.page-services .svc-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; min-height: clamp(9.5rem, 5.5rem + 8vw, 13.5rem); padding: var(--tile-pad); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.page-services .svc-tile:nth-child(2n+1) { padding-left: 0; border-left-color: transparent; }
@media (min-width: 768px) {
  .page-services .svc-industries__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-services .svc-tile:nth-child(2n+1) { padding-left: var(--tile-pad); border-left-color: var(--line-2); }
  .page-services .svc-tile:nth-child(3n+1) { padding-left: 0; border-left-color: transparent; }
}
@media (min-width: 1200px) {
  .page-services .svc-industries__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-services .svc-tile:nth-child(3n+1) { padding-left: var(--tile-pad); border-left-color: var(--line-2); }
  .page-services .svc-tile:nth-child(4n+1) { padding-left: 0; border-left-color: transparent; }
}
.page-services .svc-tile__icon { width: 32px; height: 32px; color: var(--accent); }
.page-services .svc-tile__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-services .svc-tile__name { max-width: 16ch; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; color: var(--text-1); text-wrap: balance; }
.page-services .svc-tile__key { color: var(--text-2); }

/* the crest rule between the two white sections (§3.4), with the open gap under it */
.page-services .svc-industries__rule { margin-bottom: var(--space-open); }

/* ── who we partner with: the title and its line beside an understated list in type, each category after a small gold
      diamond (the diagram's list marker); one column on phones, two from 640px, beside the title from 1200px (between
      992 and 1199px the two columns beside the title wrapped the longer names onto three lines) ── */
.page-services .svc-partners__list { grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line-2); }
@media (min-width: 640px) { .page-services .svc-partners__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-services .svc-partners__list .index__item { grid-template-columns: 7px minmax(0, 1fr); align-items: start; column-gap: 18px; padding: 1.15rem 0 1.25rem; }
/* the diamond sits on the name's first line (centred on its 1.3 line box), also when a long name wraps */
.page-services .svc-partners__list .index__item::before { content: ""; width: 7px; height: 7px; margin-top: calc(var(--fs-lede) * 0.65 - 3.5px); background-color: var(--accent); transform: rotate(45deg); }
@media (min-width: 1200px) {
  .page-services .svc-partners__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .page-services .svc-partners__head { grid-column: 1 / span 5; margin-bottom: 0; }
  .page-services .svc-partners__list { grid-column: 7 / -1; }
}

/* ── why Confidante: eight names, each beside its gold line icon; the 28px icon shares the name's first line (a 1.3
      line box of the lede size), so a name that wraps keeps its icon at the top like its neighbours. Four columns only
      from 1200px: between 992 and 1199px the four columns are about 220px wide and "Multidisciplinary", one word, ran
      past its column into the next one's icon (audit), so the list stays in two columns there ── */
.page-services .svc-why__list .index__item { align-items: start; padding: 1.4rem 0 1.6rem; }
.page-services .svc-why__list .index__icon { grid-row: auto; margin-top: calc(var(--fs-lede) * 0.65 - 14px); }
@media (min-width: 992px) and (max-width: 1199px) {
  .page-services .svc-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── the Confidante difference (2026-10-15, Josh's pick from lab/revamp/scroll-film-picker.html): a scroll film chapter
      (css/scroll-film.css) on the master-plan model, then Kelly's other two paragraphs on the white page.
      The film: the window opens out of the crest navy of Who we partner with above it, so the surround takes that navy
      rather than the film's deep bed and the two sections meet without a seam; the model's white base and the plans run
      under the words in the first frames, so the foot of the veil holds darker for longer than the shared one ── */
.page-services .svc-dfilm { background-color: var(--brand); }
/* 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-services .svc-dfilm.is-swapped .sfilm__head > * { opacity: 0 !important; }
.page-services .svc-dfilm .sfilm__veil { background: linear-gradient(to top, rgb(var(--veil) / 0.94) 0%, rgb(var(--veil) / 0.84) 30%, rgb(var(--veil) / 0.5) 54%, rgb(var(--veil) / 0) 78%); }
/* reduced motion: the label, the headline and the paragraph stack in one beat and reach up over the plans, so the veil
   climbs with them (the label read 3.1:1 on the white plans under the shared one) */
@media (prefers-reduced-motion: reduce) {
  .page-services .svc-dfilm .sfilm__veil { background: linear-gradient(to top, rgb(var(--veil) / 0.94) 0%, rgb(var(--veil) / 0.88) 42%, rgb(var(--veil) / 0.66) 64%, rgb(var(--veil) / 0) 86%); }
}
/* the two paragraphs, each under a hairline and the small crest: two columns from 992px, one centred column below */
.page-services .svc-diff__list { display: grid; gap: var(--space-open) var(--col-gap); max-width: 40rem; margin: 0 auto; }
.page-services .svc-diff__item { display: grid; align-content: start; gap: 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line-2); }
.page-services .svc-diff__crest { width: 1.5rem; height: calc(1.5rem * 1210 / 1092); color: var(--gold); }
.page-services .svc-diff__text { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
@media (min-width: 992px) {
  .page-services .svc-diff__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 3.5vw, 4rem); max-width: none; }
}

/* ── connect: the closing line in three rows rather than four ── */
.page-services .svc-cta .cta-band__title { max-width: 19ch; }

/* ── reduced motion: the orbit drawn and the crest in place ── */
@media (prefers-reduced-motion: reduce) {
  .pages-js .page-services .svc-platform__diagram.is-ready .svc-orbit { stroke-dashoffset: 0; transition: none; }
  .pages-js .page-services .svc-platform__diagram.is-ready .svc-platform__crest { opacity: 1; transition: none; }
  .pages-js .page-services .svc-platform__diagram.is-ready .diagram__node::after { transform: none; transition: none; }
  .page-services .svc-card.is-near .core__media img { transform: none; }
}