/* ==========================================================================
   Elevate 360 — Service page template (SERVICE-TEMPLATE.md, 10/7)
   First instance: Executive Coaching. Classes are .svc-* so this file can
   become css/service.css unchanged once the Home chat promotes it.
   Hero graded into navy → one left-aligned reading column (parts, hairline
   lists, photographs between parts) → the shared warm close.
   Reads from tokens.css. No JS beyond the shared reveal.
   ========================================================================== */

.page-service { --bleed: calc((100vw - min(100vw - 2 * var(--gutter), var(--container))) / -2); }

/* --- Hero: the page's one navy set piece ---------------------------------- */

.svc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Same size as the Case Studies head (.ph): 420px on phones, then held to
     464px + 8.65vw at desktop (≈553px at 1024, ≈589px at 1440). */
  min-height: 420px;
  padding-block: var(--space-3xl) var(--section-y);
  background: var(--navy);
  overflow: hidden;
}
.svc-hero__media { position: absolute; inset: 0; margin: 0; z-index: 0; }
.svc-hero__media picture, .svc-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
/* The grade: the same two gradients as Home's hero, so the type reads and the photograph still breathes. */
.svc-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 41, 66, 0.30) 0%, rgba(15, 41, 66, 0) 30%, rgba(15, 41, 66, 0.60) 100%),
    linear-gradient(90deg, rgba(15, 41, 66, 0.74) 0%, rgba(15, 41, 66, 0.28) 55%, rgba(15, 41, 66, 0) 100%);
}
.svc-hero__inner { position: relative; z-index: 1; width: 100%; }
.svc-hero__title {
  margin: var(--space-sm) 0 var(--space-lg);
  max-width: 16ch;
  font-size: var(--step-5);
  font-weight: var(--weight-regular);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-inverse);
}
.svc-hero__title em { font-style: italic; }
/* One line under the title: Bill's first sentence, set as a line, not a paragraph. */
.svc-hero__lede { margin: 0; max-width: 24ch; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.012em; color: var(--text-inverse); }

/* --- The reading column --------------------------------------------------- */

/* The column is split by the full-bleed photographs; each segment is a .svc-col. */
.svc-col { padding-block: var(--section-y-tight); background: var(--paper); }
.svc-hero + .svc-col { padding-top: var(--space-3xl); }
.svc-col > * + * { margin-top: var(--section-y-tight); }


/* A part opens with the shared divider: a hairline across the whole
   container with the label set in it. Then heading left, body right. */
.svc-part .divider { margin-bottom: var(--space-xl); }
.svc-part__side { display: grid; gap: var(--space-xl); align-content: start; }
/* A photograph under the heading, in the heading's column: 3:2, no frame. */
.svc-part__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-warm); }
.svc-part__media picture, .svc-part__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-part__grid { display: grid; gap: var(--space-xl) var(--gutter); }

/* A part: label, Bill's heading, his prose. */
.svc-part__label {
  margin: 0 0 var(--space-md);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.svc-part__heading {
  margin: 0;
  max-width: 18ch;
  font-size: var(--step-3);
  font-weight: var(--weight-regular);
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.svc-part__heading em { font-style: italic; }
/* A long heading (a full sentence of Bill's) steps down and widens. */
#areas .svc-part__heading { max-width: 26ch; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.02em; }

.svc-prose { max-width: var(--measure); }
.svc-prose p { margin: 0 0 var(--space-lg); font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text); }
/* The way in: Bill's opening sentence, a size up. */
.svc-prose .svc-prose__lede { color: var(--ink); }
.svc-prose .svc-prose__lede strong { font-weight: var(--weight-medium); color: var(--navy); }
.svc-part__side .svc-prose { margin-top: var(--space-xs); }
.svc-part__body .svc-prose__lede { margin-bottom: 0; }
.svc-part__body > .svc-cases { margin-top: var(--space-xl); }

/* A plain hairline across the container, drawn in on arrival. */
.svc-rule { width: 100%; height: 1px; margin: var(--space-3xl) 0; border: 0; background: var(--rule); transform-origin: left center; }
.js .svc-rule[data-reveal] { transform: scaleX(0); }
.js .svc-rule[data-reveal].is-in { transform: scaleX(1); transition: opacity var(--dur-scroll) var(--ease-out), transform var(--dur-scroll) var(--ease-emph) 120ms; }

/* Services crumb in the hero eyebrow. */
.svc-hero__crumb { color: inherit; text-decoration: none; border-bottom: 1px solid var(--on-navy-line); }
.svc-hero__crumb:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* The approach part: the turn sits at the foot of the body, beside the heading. */
.svc-part__body--mid { align-self: end; }
.svc-band .svc-part + .svc-part { margin-top: 0; }

/* The payoff: Bill's 360° line, centred, lede size. */
/* The 360° line: continues the sentence above it after a pause, muted, with the italic in ink. */
.svc-prose .svc-prose__after { margin-top: var(--space-2xl); color: var(--text-muted); }
.svc-prose .svc-prose__after em { color: var(--ink); }
/* A medium pause between the four areas and the pillars. */
#areas + .svc-part { margin-top: calc(var(--section-y) + var(--space-2xl)); }
.svc-payoff__line { margin-inline: auto; max-width: 44ch; font-size: var(--step-1); font-weight: var(--weight-regular); line-height: var(--leading-snug); letter-spacing: -0.008em; color: var(--ink); }
.svc-payoff__line em { font-style: italic; }

/* --- The orbit: one quarter, then the full 360° ------------------------- */

.orbit { position: relative; margin: 0; width: 100%; text-align: left; }
.orbit__stage { position: relative; margin: 0 auto; width: min(72vw, 300px); aspect-ratio: 1; }
.orbit__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orbit__track { stroke: var(--rule); stroke-width: 1.25; stroke-dasharray: 2 5; }
.orbit__arc { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.orbit__centre { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.orbit__state { grid-area: 1 / 1; display: grid; justify-items: center; gap: var(--space-2xs); }
.orbit__deg { font-size: var(--step-4); font-weight: var(--weight-bold); font-stretch: var(--width-wide); letter-spacing: -0.04em; line-height: 1; color: var(--navy); }
.orbit__state--four .orbit__deg { color: var(--gold); }
.orbit__who { font-size: var(--step--1); font-weight: var(--weight-medium); font-stretch: var(--width-narrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

.orbit__areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.orbit__area {
  display: grid; gap: var(--space-2xs);
  font-size: var(--step-1); font-weight: var(--weight-regular); line-height: var(--leading-snug); letter-spacing: -0.01em;
  color: var(--navy); cursor: default;
  transform-origin: left center;
  transition: color var(--dur-base) var(--ease-out), font-weight var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-emph);
}
.orbit__n { transition: color var(--dur-base) var(--ease-out), font-size var(--dur-base) var(--ease-out); font-size: var(--step-0); font-weight: var(--weight-bold); font-stretch: var(--width-wide); letter-spacing: -0.02em; color: var(--text-meta); }

/* The timeline, once, when the figure arrives. Final state without JS. */
.js .orbit[data-reveal] .orbit__arc { stroke-dasharray: 100; stroke-dashoffset: 100; }
.js .orbit[data-reveal] .orbit__state--four, .js .orbit[data-reveal] .orbit__area { opacity: 0; }
/* "90° / One coach" only exists inside the animation; the resting state is 360°. */
.orbit__state--one { opacity: 0; }
.js .orbit.is-in .orbit__arc { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-dur, 0.55s) var(--ease-in-out) var(--t, 0s); }
/* Timeline: quarter one draws (0.3–1.3s) with "90° / One coach"; 01 appears
   (1.4s); the centre switches to "360° / Four coaches" (2.1–2.4s); then
   quarters two, three, four draw in turn, each followed by its label. */
.js .orbit.is-in .orbit__arc--1 { --t: 0.3s; --t-dur: 1s; }
.js .orbit.is-in .orbit__arc--2 { --t: 2.8s; }
.js .orbit.is-in .orbit__arc--3 { --t: 3.5s; }
.js .orbit.is-in .orbit__arc--4 { --t: 4.2s; }
.js .orbit.is-in .orbit__state--one { animation: orbit-one 2.1s var(--ease-out) 0.3s both; }
.js .orbit.is-in .orbit__state--four { opacity: 1; transition: opacity 0.5s var(--ease-out) 2.4s; }
.js .orbit.is-in .orbit__area { opacity: 1; transition: opacity 0.45s var(--ease-out) var(--a, 0s), color var(--dur-base) var(--ease-out), font-weight var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-emph); }
.js .orbit.is-in .orbit__area--1 { --a: 1.4s; }
.js .orbit.is-in .orbit__area--2 { --a: 3.4s; }
.js .orbit.is-in .orbit__area--3 { --a: 4.1s; }
.js .orbit.is-in .orbit__area--4 { --a: 4.8s; }
@keyframes orbit-one { 0% { opacity: 0; } 20% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }

/* Hover. One label: a touch bigger and a touch heavier, no gold. The circle
   itself: the ring goes gold, grows a little and thickens a little; the
   labels stay as they are. */
.orbit__arc { transition: stroke 0.4s var(--ease-out), stroke-width 0.4s var(--ease-out); }
.orbit__svg { transition: transform 0.4s var(--ease-emph); }
.orbit__area, .orbit__n { transition-property: color, font-weight, transform, font-size; transition-duration: var(--dur-base); transition-timing-function: var(--ease-out); }
@media (hover: hover) {
  .orbit__area:hover { font-weight: var(--weight-medium); transform: scale(1.04); }
  .orbit:has(.orbit__stage:hover) .orbit__arc { stroke: var(--gold); stroke-width: 4; }
  .orbit:has(.orbit__stage:hover) .orbit__svg { transform: scale(1.04); }
}

/* Wider screens: the four areas sit at the four quarters around the circle,
   01 top-left, then clockwise. */
@media (min-width: 1180px) {
  .orbit { height: 460px; }
  .orbit__stage { position: absolute; left: 50%; top: 50%; width: 290px; transform: translate(-50%, -50%); }
  .orbit__areas { display: block; margin: 0; }
  .orbit__area { position: absolute; width: calc(50% - 145px); }
  .orbit__area--1 { right: calc(50% + 135px); top: 2%; text-align: right; justify-items: end; transform-origin: right center; }
  .orbit__area--2 { left: calc(50% + 135px); top: 2%; }
  .orbit__area--3 { left: calc(50% + 135px); bottom: 2%; }
  .orbit__area--4 { right: calc(50% + 135px); bottom: 2%; text-align: right; justify-items: end; transform-origin: right center; }
}

/* Centred prose: the team, above the portraits. */
.svc-centre__label { margin-bottom: var(--space-md); }
.svc-centre__lead { font-size: var(--step-1) !important; line-height: var(--leading-snug) !important; color: var(--ink) !important; }
.svc-centre { display: grid; justify-items: center; text-align: center; }
.svc-centre .svc-prose { max-width: 44ch; }
.svc-centre .svc-prose p { margin-left: auto; margin-right: auto; }
.svc-centre .svc-prose .svc-turn { padding: 0; border-left: 0; }
/* The team part: the heading is the whole left column, sized to sit with the body beside it. */
.svc-part__grid--team .svc-part__heading { max-width: 16ch; }
.svc-prose p:last-child { margin-bottom: 0; }
.svc-prose strong { font-weight: var(--weight-medium); color: var(--navy); }
.svc-prose em { font-style: italic; color: var(--ink); }
.svc-prose__last { margin-top: var(--space-xl) !important; }
/* The turn: Bill's one-line bold paragraph, in the heading's voice but smaller, a gold rule on the left. */
.svc-prose .svc-turn {
  margin: var(--space-lg) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--gold);
  font-style: italic;
  color: var(--navy);
}

/* The hairline list: for anything Bill enumerates. The only component. */
.svc-list { margin: 0; padding: 0; list-style: none; }
.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-xs) var(--space-md);
  align-items: start;
  padding-block: var(--space-lg);
}
.svc-row::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--rule); }
.svc-row::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-emph); }
.svc-row:last-child { border-bottom: 1px solid var(--rule); }
.svc-row__n {
  padding-top: 0.1em;
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  font-stretch: var(--width-wide);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gold);
}
.svc-row__name { margin: 0; max-width: 30ch; font-size: var(--step-2); font-weight: var(--weight-regular); line-height: 1.15; letter-spacing: -0.02em; color: var(--navy); }
.svc-row__desc { grid-column: 2; margin: 0; max-width: 52ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text-muted); }
@media (hover: hover) { .svc-row:hover::after { transform: scaleX(1); } }

/* --- The pillars: two rows that open on hover, tap or focus ------------- */

.pillars { margin: 0; padding: 0; list-style: none; }
.pillar { position: relative; border-top: 1px solid var(--rule); }
.pillar:last-child { border-bottom: 1px solid var(--rule); }
.pillar::after { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-emph); }
.pillar__head {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) 28px; gap: var(--space-xs) var(--space-md); align-items: start;
  width: 100%; margin: 0; padding: var(--space-lg) 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.pillar__n { padding-top: 0.1em; font-size: var(--step-2); font-weight: var(--weight-bold); font-stretch: var(--width-wide); letter-spacing: -0.04em; line-height: 1; color: var(--gold); }
.pillar__text { display: grid; gap: var(--space-2xs); }
.pillar__name { font-size: var(--step-2); font-weight: var(--weight-regular); line-height: 1.15; letter-spacing: -0.02em; color: var(--navy); transition: color var(--dur-base) var(--ease-out); }
.pillar__dek { font-size: var(--step-0); line-height: var(--leading-snug); color: var(--text-muted); }
/* The mark: a plus that turns into a minus. */
.pillar__mark { position: relative; width: 28px; height: 28px; margin-top: 0.3em; }
.pillar__mark::before, .pillar__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--navy); transform: translate(-50%, -50%); transition: transform var(--dur-base) var(--ease-emph), background var(--dur-base) var(--ease-out); }
.pillar__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
/* The drop-down: animates height with the 0fr → 1fr grid trick. */
.pillar__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-emph); }
.pillar__body { overflow: hidden; }
.pillar__body > * { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.pillar__body p { margin: 0 0 var(--space-md) 4.75rem; max-width: 52ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text); }
.pillar__points { margin: 0 0 var(--space-lg) 4.75rem; padding: 0; list-style: none; max-width: 52ch; }
.pillar__points li { position: relative; padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); font-size: var(--step--1); line-height: var(--leading-snug); color: var(--text-muted); }
.pillar__points li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-xs) + 0.6em); width: 10px; height: 1px; background: var(--gold); }
.pillar__points a { color: var(--navy); font-weight: var(--weight-medium); text-decoration: none; border-bottom: 1px solid var(--gold); }
.pillar__points a:hover { color: var(--gold); }
/* Open state: click/tap toggles .is-open (JS) and it stays until clicked
   again; several may be open. Hover only hints (gold title and hairline). */
.pillar.is-open::after { transform: scaleX(1); }
.pillar.is-open .pillar__name { color: var(--gold); }
.pillar.is-open .pillar__more { grid-template-rows: 1fr; }
.pillar.is-open .pillar__body > * { opacity: 1; transition-delay: 120ms; }
.pillar.is-open .pillar__mark::after { transform: translate(-50%, -50%) rotate(0deg); }
.pillar.is-open .pillar__mark::before, .pillar.is-open .pillar__mark::after { background: var(--gold); }
@media (hover: hover) {
  .pillar:hover::after { transform: scaleX(1); }
  .pillar:hover .pillar__name { color: var(--gold); }
  .pillar:hover .pillar__mark::before, .pillar:hover .pillar__mark::after { background: var(--gold); }
}
.pillar__head:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 639px) {
  .pillar__head { grid-template-columns: 3rem minmax(0, 1fr) 24px; }
  .pillar__body p, .pillar__points { margin-left: 0; }
}

/* The case-study pointer. */
.svc-cases { margin-top: var(--space-2xl); }
.svc-cases p { margin: 0 0 var(--space-md); max-width: 46ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text); }
.svc-cases__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.svc-cases__links .arrow-link { font-size: var(--step-0); }

/* Photographs between parts: full-bleed, edge to edge, no frame. */
.svc-bleed { margin: 0; width: 100%; aspect-ratio: 3 / 2; object-position: 50% 50%; overflow: hidden; background: var(--paper-warm); }
.svc-bleed picture, .svc-bleed img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.svc-col:has(+ .svc-bleed), .svc-col:has(+ .svc-photoband) { padding-bottom: var(--section-y); }
.svc-bleed + .svc-col, .svc-photoband + .svc-col { padding-top: var(--section-y); }

/* The photo band: the window photograph graded into navy on the left, the
   case-study invitation on it. Shorter than a hero. */
.svc-photoband { position: relative; display: flex; align-items: center; min-height: 380px; padding-block: var(--space-3xl); background: var(--navy); overflow: hidden; }
.svc-photoband__media { position: absolute; inset: 0; margin: 0; z-index: 0; }
.svc-photoband__media picture, .svc-photoband__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.svc-photoband__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 41, 66, 0.92) 0%, rgba(15, 41, 66, 0.78) 34%, rgba(15, 41, 66, 0.25) 62%, rgba(15, 41, 66, 0.05) 100%),
    linear-gradient(180deg, rgba(15, 41, 66, 0.15) 0%, rgba(15, 41, 66, 0.35) 100%);
}
.svc-photoband__inner { position: relative; z-index: 1; width: 100%; }
.svc-photoband__text { margin: 0 0 var(--space-lg); max-width: 26ch; font-size: var(--step-2); font-weight: var(--weight-regular); line-height: 1.2; letter-spacing: -0.016em; color: var(--text-inverse); }
.svc-photoband .svc-cases__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.svc-photoband .arrow-link { font-size: var(--step-0); color: var(--on-navy); border-bottom-color: var(--on-navy-line); }
.svc-photoband .arrow-link:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }
@media (max-width: 767px) {
  .svc-photoband { min-height: 440px; align-items: flex-end; }
  .svc-photoband__media img { object-position: 62% 50%; }
  .svc-photoband__media::after { background: linear-gradient(180deg, rgba(15, 41, 66, 0.25) 0%, rgba(15, 41, 66, 0.88) 62%, rgba(15, 41, 66, 0.95) 100%); }
}
@media (min-width: 1024px) {
  .svc-photoband { min-height: 420px; }
}

/* --- The team band: warm, with the gallery -------------------------------- */

.svc-band { padding-block: var(--section-y-tight); background: var(--paper-warm); }
.svc-band .svc-part .divider::after { background: var(--rule); }

/* The gallery: a strip of portraits wider than the page. On a pointer device
   it glides with the pointer (executive-coaching.js sets --pan); on touch it
   scrolls. Navy duotone at rest, colour under the pointer, as on Home. */
.svc-gallery { margin-top: var(--space-2xl); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; }
.svc-gallery::-webkit-scrollbar { display: none; }
.svc-gallery__track { display: flex; gap: var(--space-lg); width: max-content; margin: 0; padding: 0 0 var(--space-xs); list-style: none; transform: translate3d(calc(var(--pan, 0) * -1px), 0, 0); transition: transform 900ms var(--ease-out); will-change: transform; }
.svc-person { flex: 0 0 auto; width: min(70vw, 300px); scroll-snap-align: start; }
/* Each portrait opens that person's bio (10/27): the name is the link, stretched over the card. */
.svc-person { position: relative; }
.svc-person__link { text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.svc-person__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.svc-person__link:hover, .svc-person__link:focus-visible { color: var(--gold); }
.svc-person__link:focus-visible { outline: none; }
.svc-person:focus-within .svc-person__photo { outline: 2px solid var(--gold); outline-offset: 3px; }
.svc-person__photo { position: relative; margin: 0 0 var(--space-sm); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); background: var(--navy); }
.svc-person__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  filter: grayscale(1) contrast(1.18) brightness(1.02);
  mix-blend-mode: screen;
  transform: scale(1.001);
  transition: filter var(--dur-slow) var(--ease-out), transform 900ms var(--ease-emph);
}
.svc-person__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(135deg, rgba(210, 163, 67, 0.28), rgba(210, 163, 67, 0.04) 50%, rgba(15, 41, 66, 0)); mix-blend-mode: overlay; transition: opacity var(--dur-slow) var(--ease-out); }
.svc-person__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-emph); }
.svc-person__cap { display: grid; gap: var(--space-2xs); }
.svc-person__name { font-size: var(--step-0); font-weight: var(--weight-medium); color: var(--navy); }
.svc-person__role { font-size: var(--step--1); line-height: var(--leading-snug); color: var(--text-muted); }
@media (hover: hover) {
  .js .svc-gallery { overflow-x: hidden; }
  .svc-person:hover .svc-person__photo img { filter: none; mix-blend-mode: normal; transform: scale(1.035); }
  .svc-person:hover .svc-person__photo::before { opacity: 0; }
  .svc-person:hover .svc-person__photo::after { transform: scaleX(1); }
}
@media (hover: none) {
  .svc-gallery.is-in .svc-person__photo img { filter: none; mix-blend-mode: normal; transition-delay: 300ms; }
  .svc-gallery.is-in .svc-person__photo::before { opacity: 0; transition-delay: 300ms; }
}

/* --- Related services: hairline rows of links --------------------------- */

.svc-related .divider { margin-bottom: 0; }
.svc-related__list { margin: 0; padding: 0; list-style: none; }
.svc-related__list li { border-bottom: 1px solid var(--rule); }
.svc-related__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-md);
  font-size: var(--step-1); font-weight: var(--weight-regular); letter-spacing: -0.012em;
  color: var(--navy); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.svc-related__list svg { width: 20px; flex: none; transition: transform var(--dur-base) var(--ease-emph); }
.svc-related__list a:hover { color: var(--gold); }
.svc-related__list a:hover svg { transform: translateX(4px); }

/* --- The close: the Snapshot band, on warm (copied from cases.css; shared) --- */

.snapc {
  padding-block: var(--section-y);
  overflow: hidden;   /* the blades extend past the mark's box */
  background: var(--paper-warm);
}
.snapc__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.snapc__title {
  max-width: 16ch;
  margin: 0 0 var(--space-lg);
  font-size: var(--step-4);
  font-weight: var(--weight-regular);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.snapc__title em { font-style: italic; }
.snapc__body { max-width: 50ch; margin: 0 0 var(--space-xl); color: var(--text-muted); }
/* The button sets the width; the line beneath centres on it. */
.snapc__actions { display: grid; justify-items: center; gap: var(--space-md); width: fit-content; max-width: 100%; }
.snapc__actions .btn { white-space: normal; text-align: center; }
.snapc__alt { margin: 0; font-size: var(--step--1); text-align: center; color: var(--text-muted); }
.snapc__alt a { color: var(--navy); font-weight: var(--weight-medium); text-decoration: none; border-bottom: 1px solid var(--gold); }
.snapc__alt a:hover { color: var(--gold); }

.snapc__mark {
  margin: 0;
  justify-self: center;
  width: min(60vw, 260px);
  filter: drop-shadow(0 18px 36px rgba(15, 41, 66, 0.22));
  transition: transform var(--dur-slow) var(--ease-emph);
}
.snapc__mark .aperture { display: block; width: 100%; height: auto; overflow: visible; }
/* The blades turn with the page (about a third of a turn across the
   section) and a little further on hover; the buildings stay upright and
   come closer on hover. */
.aperture__blades {
  transform-origin: 120px 120px;
  transform-box: view-box;
  transform: rotate(calc((var(--sp, 0.5) - 0.5) * 70deg));
  transition: transform var(--dur-slow) var(--ease-emph);
  will-change: transform;
}
.aperture__centre { transform-box: view-box; transform-origin: 120px 120px; transition: transform var(--dur-slow) var(--ease-emph); }
.snapc__mark:hover, .snapc:has(.snapc__actions .btn:hover) .snapc__mark { transform: scale(1.035); }
.snapc__mark:hover .aperture__blades, .snapc:has(.snapc__actions .btn:hover) .aperture__blades { transform: rotate(calc((var(--sp, 0.5) - 0.5) * 70deg + 24deg)); }
.snapc__mark:hover .aperture__centre, .snapc:has(.snapc__actions .btn:hover) .aperture__centre { transform: scale(1.14); }

@media (max-width: 767px) {
  .snapc__actions { width: 100%; }
  .snapc__actions .btn { width: 100%; }
  .snapc__mark { order: -1; }
}
@media (min-width: 768px) {
  .snapc__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
  .snapc__mark { width: min(100%, 320px); justify-self: end; }
}
@media (min-width: 1024px) {
  .snapc__mark { width: min(100%, 380px); }
}
@media (prefers-reduced-motion: reduce) {
  .snapc__mark, .snapc__mark:hover, .aperture__blades, .aperture__centre { transform: none; transition: none; }
}

/* --- Breakpoints ----------------------------------------------------------- */

@media (min-width: 1024px) {
  .svc-hero { min-height: calc(464px + 8.65vw); padding-block: var(--space-4xl) var(--space-5xl); align-items: center; }
}
@media (max-width: 639px) {
  .svc-hero__media img { object-position: 62% 50%; }
  .svc-hero__title { font-size: var(--step-4); max-width: 14ch; }
  .svc-hero__lede { font-size: var(--step-0); }
}
@media (min-width: 768px) {
  .svc-bleed { aspect-ratio: 21 / 9; }
}
@media (min-width: 1024px) {
  /* Heading on columns 1–5, the body from column 7. */
  .svc-part__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .svc-part__grid > .svc-part__heading, .svc-part__side { grid-column: 1 / span 5; }
  .svc-part__body { grid-column: 7 / -1; }
  /* When the body opens with a list, the heading drops to the first row's text line. */
  .svc-part__grid:has(> .svc-part__body > .svc-list:first-child) .svc-part__heading { padding-top: var(--space-lg); }
  .svc-part__side { gap: var(--space-xl); }
  .svc-person { width: 360px; }
  .svc-related__list { margin-left: calc(50% + var(--gutter) / 2); }

}
@media (prefers-reduced-motion: reduce) {
  .js .orbit[data-reveal] .orbit__arc { stroke-dashoffset: 0; }
  .js .orbit[data-reveal] .orbit__state--four, .js .orbit[data-reveal] .orbit__area { opacity: 1; }
  .js .orbit.is-in .orbit__state--one { animation: none; opacity: 0; }
  .orbit__centre, .orbit__who, .pillar::after, .pillar__more, .pillar__body > *, .pillar__mark::before, .pillar__mark::after, .orbit__arc, .orbit__area, .orbit__n, .orbit__state--four, .svc-row::after, .svc-rule, .svc-related__list svg, .svc-gallery__track, .svc-person__photo img, .svc-person__photo::before, .svc-person__photo::after { transition: none; }
}