/* Elevate 360 — Irreplaceable page (irreplaceable.css). A copy of service.css (10/20) plus the page block at the end. Keep the template part in step with service.css. */
   Elevate 360 — css/service.css: the service page template (SERVICE-TEMPLATE.md)
   Owned by the service-pages chat. Executive Coaching still reads its own copy
   (css/executive-coaching.css); keep the two in step until it switches over.
   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-2xl); 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;
  transition: border-color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
  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__text { display: grid; gap: var(--space-2xs); }
.svc-row__desc { margin: 0; max-width: 52ch; font-size: var(--step-0); line-height: var(--leading-snug); 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); }
/* Who it's for, on the photograph: label, heading, three short rows. */
.svc-photoband--who { min-height: 480px; }
.svc-photoband__label { color: var(--on-navy); opacity: 0.8; }
.svc-photoband__label::after { background: var(--on-navy-line); }
.svc-photoband__title { margin: var(--space-md) 0 var(--space-xl); max-width: 14ch; font-size: var(--step-4); font-weight: var(--weight-regular); line-height: 1.04; letter-spacing: -0.024em; color: var(--text-inverse); }
.svc-photoband__title em { font-style: italic; }
.svc-who { display: grid; margin: 0; padding: 0; list-style: none; max-width: 46ch; }
.svc-who__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: baseline; padding: var(--space-md) 0; border-top: 1px solid var(--on-navy-line); }
.svc-who__n { font-size: var(--step--1); font-weight: var(--weight-bold); font-stretch: var(--width-wide); letter-spacing: -0.02em; color: var(--gold-light); }
.svc-who__text { display: grid; gap: var(--space-2xs); }
.svc-who__name { font-size: var(--step-1); line-height: 1.15; letter-spacing: -0.014em; color: var(--text-inverse); }
.svc-who__dek { font-size: var(--step--1); line-height: var(--leading-snug); color: var(--on-navy); opacity: 0.82; }
@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; }
}

/* --- Keynotes: the featured talk ------------------------------------------
   The print is Home's, verbatim (markup from index.html, generated by
   scripts/print-gen.py; this CSS copied from home.css with .irr__mark →
   .svc-mark; the enrolment observer is in service.js). Keep in step with Home. */
.svc-mark { margin: 0; width: min(64vw, 300px); }
.svc-mark .print { display: block; width: 100%; height: auto; overflow: visible; }

/* Enrolment. The whole print is there from the first frame as a faint
   ghost; each press inks a region over it; the gold ridges are the seventh
   and last press. Only under .js so no-JS gets the finished print. */
/* The ghost is a <use> of the same ridges. The clone picks up the same CSS,
   so the hidden state and the animation are driven by custom properties
   that the ghost overrides on itself and that inherit into the clone. */
.print__ghost {
  opacity: 0;
  --ink-o: 1;
  --ink-d: 0;
  --ink-anim: none;
}
.js .print__ghost { opacity: 0.16; transition: opacity var(--dur-slow) var(--ease-out); }
.js .svc-mark.is-in .print__ghost { opacity: 0.10; transition-delay: calc(var(--press-gap) * 7); }

.js .print__ridges path {
  stroke-dasharray: 1;
  stroke-dashoffset: var(--ink-d, 1);
  stroke-width: var(--ink-w, var(--sw, 2.2));
  opacity: var(--ink-o, 0);
}

/* The ghost is hairline; inked ridges start hairline and thicken as they
   draw, so the print builds pressure rather than appearing. */
.print__ghost { --ink-w: 0.75; }

.js .svc-mark.is-in .print__ridges path {
  animation-name: var(--ink-anim, print-ink);
  animation-duration: 620ms;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  animation-delay: calc(var(--press-gap) * var(--g, 0) + var(--o, 0) * 22ms + 240ms);
}

.print__press {
  opacity: 0;
  transform-origin: 120px 124px;
  transform-box: view-box;
}

.js .svc-mark.is-in .print__press {
  animation: print-press var(--press-gap) var(--ease-out) 7;
  animation-delay: 160ms;
}

.svc-mark { --press-gap: 540ms; }

@keyframes print-ink {
  0%   { stroke-dashoffset: 1; opacity: 0; stroke-width: 0.6; }
  15%  { opacity: 1; }
  60%  { stroke-width: 1.2; }
  100% { stroke-dashoffset: 0; opacity: 1; stroke-width: var(--sw, 2.2); }
}

@keyframes print-press {
  0%   { opacity: 0;   transform: scale(0.74); }
  22%  { opacity: 1; }
  100% { opacity: 0;   transform: scale(1.06); }
}

/* After the enrolment, hover brightens the gold and gilds the marked
   ridges (data-gilt, ~a third of the navy ones), each on its own beat. */
.print__ridges path { transition: stroke var(--dur-slow) var(--ease-out), stroke-width var(--dur-slow) var(--ease-out); }
.print__ridges path[data-gilt] { transition-delay: calc(var(--h, 0) * 45ms); }
/* Only once the enrolment has finished (is-done, set by home.js): a cursor
   resting on the print while it draws in would otherwise gild ridges early
   and un-gild them when it moved, which reads as gold flickering about. */
.svc-mark.is-done:hover .print__ridges path[data-gilt] { stroke: var(--gold); }
.svc-mark.is-done:hover .print__ridges path[data-gold] { stroke: var(--gold-light); --sw: 2.9; }
.svc-mark.is-done .print__ridges path[data-gold] { --sw: 2.6; }


.svc-mark .print { display: block; width: 100%; height: auto; overflow: visible; }
.svc-prose .svc-tag { margin: 0 0 var(--space-md); font-size: var(--step-1); line-height: 1.3; color: var(--navy); }
.svc-list--after { margin-top: var(--space-xl); }
.svc-meta { margin: var(--space-lg) 0 0; font-size: var(--step--1); line-height: var(--leading-snug); color: var(--text-muted); }

/* --- Motion and hover, both pages ------------------------------------------
   Photographs settle in (the picture draws up from the bottom while the image
   eases from 1.1 to 1), then breathe on hover. The hero drifts once on load.
   Rows nudge and go gold under the pointer. Nothing loops. */
@keyframes svc-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.svc-hero__media img { animation: svc-drift 7s var(--ease-out) both; transform-origin: 60% 50%; }
.js .svc-part__media[data-reveal] picture { clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease-emph) calc(var(--d, 0) * 80ms); }
.js .svc-part__media[data-reveal].is-in picture { clip-path: inset(0 0 0 0); }
.js .svc-part__media[data-reveal] img { transform: scale(1.1); transition: transform 1.4s var(--ease-out) calc(var(--d, 0) * 80ms); }
.js .svc-part__media[data-reveal].is-in img { transform: scale(1); }
.js .svc-photoband__media[data-reveal], .js .svc-photoband__media[data-reveal].is-in { transform: none; }
.js .svc-photoband__media[data-reveal] img { transform: scale(1.08); transition: transform 2.2s var(--ease-out); }
.js .svc-photoband__media[data-reveal].is-in img { transform: scale(1); }
.svc-who__item { transition: transform var(--dur-base) var(--ease-emph), border-color var(--dur-base) var(--ease-out); }
.svc-who__n { transition: color var(--dur-base) var(--ease-out); }
.svc-four__name, .svc-four__n, .svc-row__n, .svc-row__name, .svc-step__name { transition: transform var(--dur-base) var(--ease-emph), color var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .svc-part__media.is-in:hover img, .svc-part__media:not([data-reveal]):hover img { transform: scale(1.04); transition-duration: 1.2s; transition-delay: 0s; }
  .svc-who__item:hover { transform: translateX(8px); border-top-color: var(--gold-light); }
  .svc-who__item:hover .svc-who__n { color: var(--gold); }
  .svc-four__item:hover .svc-four__name { transform: translateY(-2px); }
  .svc-four__item:hover .svc-four__n { color: var(--gold-dark, var(--navy)); }
  .svc-row:hover .svc-row__n { transform: translateX(4px); }
  .svc-step:hover .svc-step__name { transform: translateX(3px); }
  .svc-prose .svc-turn:hover { border-color: var(--navy); padding-left: calc(var(--space-md) + 4px); }
}

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

.svc-band { padding-block: var(--section-y-tight); background: var(--paper-warm); }
.svc-band--part { padding-block: var(--section-y-tight) var(--section-y); }
.svc-band--part .svc-part__heading { max-width: 16ch; }
.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; }
.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; }
}

/* --- Four columns: a short list set across the page, Home's drivers shape --- */

.svc-four { display: grid; gap: var(--space-xl) var(--space-2xl); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.svc-four__item { position: relative; display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-md); }
.svc-four__item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--rule); }
.svc-four__item::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-four__n { font-size: var(--step-0); font-weight: var(--weight-bold); font-stretch: var(--width-wide); letter-spacing: -0.04em; line-height: 1; color: var(--gold); }
.svc-four__name { margin: 0; font-size: var(--step-2); font-weight: var(--weight-medium); line-height: 1.1; letter-spacing: -0.018em; color: var(--navy); }
.svc-four__desc { margin: 0; max-width: 30ch; font-size: var(--step--1); line-height: var(--leading-loose); color: var(--text-muted); }
@media (hover: hover) { .svc-four__item:hover::after { transform: scaleX(1); } }
@media (min-width: 640px) { .svc-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); } .svc-four__item { padding-top: var(--space-lg); } .svc-four__name { max-width: 11ch; } }

/* --- Steps: a process set along one line, numerals as nodes ------------- */

.svc-steps { position: relative; display: grid; gap: var(--space-xl); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.svc-part__body > .svc-steps { margin-top: 0; }
.svc-part > .svc-part__heading + .svc-four, .svc-part > .svc-part__heading + .svc-steps { margin-top: var(--space-xl); }
.svc-step { position: relative; display: grid; gap: var(--space-xs); padding-left: calc(var(--space-lg) + 12px); }
/* The line and the node. On phones the line runs down the left; at desktop it runs along the top. */
.svc-step::before { content: ""; position: absolute; left: 5px; top: 0; bottom: calc(-1 * var(--space-xl)); width: 1px; background: var(--rule); }
.svc-step:last-child::before { bottom: 0; }
.svc-step__node { position: absolute; left: 0; top: 0.35em; width: 11px; height: 11px; border-radius: 50%; background: var(--paper-warm); border: 1.5px solid var(--navy); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-emph); }
.svc-step__n { font-size: var(--step-0); font-weight: var(--weight-bold); font-stretch: var(--width-wide); letter-spacing: -0.04em; line-height: 1; color: var(--text-meta); }
.svc-step__name { margin: 0; font-size: var(--step-2); font-weight: var(--weight-regular); line-height: 1.12; letter-spacing: -0.02em; color: var(--navy); }
.svc-step__desc { margin: 0; max-width: 30ch; font-size: var(--step-0); line-height: var(--leading-snug); color: var(--text-muted); }
/* The line draws in on arrival; the nodes fill in turn. */
.js .svc-steps[data-reveal] .svc-step::before { transform: scaleY(0); transform-origin: top; }
.js .svc-steps[data-reveal].is-in .svc-step::before { transform: scaleY(1); transition: transform 0.6s var(--ease-emph) calc(var(--s, 0) * 0.3s + 0.2s); }
.js .svc-steps[data-reveal] .svc-step__node { transform: scale(0); }
.js .svc-steps[data-reveal].is-in .svc-step__node { transform: scale(1); transition: transform 0.4s var(--ease-emph) calc(var(--s, 0) * 0.3s + 0.25s); }
@media (hover: hover) {
  .svc-step:hover .svc-step__node { background: var(--gold); border-color: var(--gold); transform: scale(1.3); }
  .svc-step:hover .svc-step__n { color: var(--gold); }
}
@media (min-width: 900px) {
  .svc-steps { grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: var(--space-xl); padding-top: var(--space-lg); }
  .svc-step { padding-left: 0; padding-right: var(--space-lg); padding-top: var(--space-md); grid-template-rows: auto auto 1fr; }
  .svc-step__name { min-height: 2.3em; }
  .svc-step::before { left: 0; right: calc(-1 * var(--space-xl)); top: -1px; bottom: auto; width: auto; height: 1px; }
  .svc-step:last-child::before { right: 0; }
  .svc-step__node { top: -6px; left: 0; }
  .js .svc-steps[data-reveal] .svc-step::before { transform: scaleX(0); transform-origin: left; }
  .js .svc-steps[data-reveal].is-in .svc-step::before { transform: scaleX(1); }
  /* Vertical steps beside a photograph: the phone layout kept at every width. */
  .svc-steps--vertical { grid-template-columns: none; gap: var(--space-xl); padding-top: 0; }
  .svc-steps--vertical .svc-step { padding: 0 0 0 calc(var(--space-lg) + 12px); grid-template-rows: auto; }
  .svc-steps--vertical .svc-step__name { min-height: 0; }
  .svc-steps--vertical .svc-step::before { left: 5px; right: auto; top: 0; bottom: calc(-1 * var(--space-xl)); width: 1px; height: auto; }
  .svc-steps--vertical .svc-step:last-child::before { bottom: 0; }
  .svc-steps--vertical .svc-step__node { top: 0.35em; left: 0; }
  .js .svc-steps--vertical[data-reveal] .svc-step::before { transform: scaleY(0); transform-origin: top; }
  .js .svc-steps--vertical[data-reveal].is-in .svc-step::before { transform: scaleY(1); }
}

/* --- 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-2xl); }
  .svc-part__side > .svc-part__heading + .svc-part__media { margin-top: var(--space-md); }
  .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; }
  .svc-hero__media img { animation: none; }
  .js .svc-part__media[data-reveal] picture { clip-path: none; }
  .js .print__ridges path { stroke-dashoffset: 0; opacity: 1; animation: none; }
  .js .svc-mark.is-in .print__ridges path { animation-name: none; }
  .js .svc-mark.is-in .print__press { animation: none; }
  .js .print__ghost { opacity: 0; }
  .js .svc-part__media[data-reveal] img, .js .svc-photoband__media[data-reveal] img { transform: none; }
  .svc-part__media picture, .svc-part__media img, .svc-photoband__media img, .svc-who__item, .svc-who__n, .svc-four__name, .svc-four__n, .svc-row__n, .svc-row__name, .svc-step__name, .svc-prose .svc-turn,
  .svc-four__item::after, .svc-step::before, .svc-step__node, .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; }
}

/* ==========================================================================
   IRREPLACEABLE page block (v6, 10/22). Everything below is this page's own.
   ========================================================================== */

/* Hero: title and lede only (v6: no button). The page's one button, in the close, inverts to navy with white text on hover. */
.page-irr .svc-hero__lede { max-width: 30ch; }
.page-irr .btn--primary { transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.page-irr .btn--primary:hover, .page-irr .btn--primary:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; }

/* The framework: the print under the heading, the tagline under the print, the four ways as pillars. */
.page-irr .svc-band .svc-mark { width: min(56vw, 272px); }
.irr-tag { margin: calc(var(--space-lg) * -1) 0 0; font-size: var(--step-1); line-height: 1.3; color: var(--navy); }
.irr-tag em { font-style: italic; }
.irr-ways .pillar__body p { margin-left: 4.75rem; max-width: 48ch; }
@media (max-width: 639px) { .irr-ways .pillar__body p, .irr-ways .pillar__lead { margin-left: 0; } }

/* What the audience leaves with: the heading, one line, then the four columns (svc-four). Hover: the gold line draws, the numeral steps right, the name turns gold. */
.irr-lede { margin: var(--space-lg) 0 0; max-width: 44ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text-muted); }
.irr-four { margin-top: var(--space-2xl); }
@media (min-width: 1024px) { .irr-four .svc-four__name { max-width: 13ch; } }
.irr-four .svc-four__n { display: inline-block; transition: transform var(--dur-base) var(--ease-emph); }
.irr-four .svc-four__name { transition: color var(--dur-base) var(--ease-out); }
@media (hover: hover) { .irr-four .svc-four__item:hover .svc-four__n { transform: translateX(4px); } .irr-four .svc-four__item:hover .svc-four__name { color: var(--gold); } }

/* The four ways: closed rows show only the number and the name; the line and the paragraph open together. */
.irr-ways .pillar__lead { margin: 0 0 var(--space-xs) 4.75rem; max-width: 48ch; font-size: var(--step-0); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--ink); }
.irr-ways .pillar__body > p:last-child { margin-bottom: var(--space-lg); }

/* The one question, on the photograph. The five questions arrive one at a time (--d steps of 2). */
.irr-ask { min-height: 0; padding-block: var(--section-y); }
.irr-ask .svc-photoband__media::after {
  background:
    linear-gradient(90deg, rgba(15, 41, 66, 0.94) 0%, rgba(15, 41, 66, 0.86) 45%, rgba(15, 41, 66, 0.45) 75%, rgba(15, 41, 66, 0.25) 100%),
    linear-gradient(180deg, rgba(15, 41, 66, 0.15) 0%, rgba(15, 41, 66, 0.45) 100%);
}
.irr-ask__title { max-width: 16ch; }
.irr-ask__lead { margin: 0 0 var(--space-xl); max-width: 44ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text-inverse-muted); }
.irr-ask__lead em { font-style: italic; color: var(--text-inverse); }
.irr-ask__list { margin: 0 0 var(--space-xl); padding: 0; list-style: none; max-width: 40rem; }
.irr-ask__list li { padding-block: var(--space-sm); border-top: 1px solid var(--rule-inverse); font-size: var(--step-2); font-style: italic; line-height: 1.2; letter-spacing: -0.012em; color: var(--text-inverse); transition: color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out); }
.irr-ask__list li:last-child { border-bottom: 1px solid var(--rule-inverse); }
.js .irr-ask__list li[data-reveal] { transition-duration: 1100ms; }
@media (hover: hover) { .irr-ask__list li:hover { color: var(--gold-light); padding-left: 4px; } }
.irr-ask__diff { margin: 0; max-width: 44ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text-inverse-muted); }
.irr-ask__diff em { font-style: italic; color: var(--text-inverse); transition: color var(--dur-base) var(--ease-out); }
@media (hover: hover) { .irr-ask__diff:hover em { color: var(--gold-light); } }

/* After the keynote: the drivers in one line under the heading; the services as linked rows. */
.irr-drivers { margin: 0; max-width: 40ch; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text-muted); }
.irr-drivers .arrow-link { display: inline-flex; margin-top: var(--space-md); }
.irr-next .svc-row { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-md); }
.irr-next .svc-row__name { font-size: var(--step-1); }
.irr-next .svc-row__name a { display: inline-flex; align-items: baseline; gap: 0.5em; color: inherit; text-decoration: none; }
.irr-next .svc-row__name svg { width: 20px; flex: none; transform: translateY(-0.1em); transition: transform var(--dur-base) var(--ease-emph); }
.irr-next .svc-row__desc { font-size: var(--step--1); }
@media (hover: hover) { .irr-next .svc-row__name a:hover { color: var(--gold); } .irr-next .svc-row__name a:hover svg { transform: translate(4px, -0.1em); } }

/* The speaker: the portrait; bio and the one figure beside. Hover: the portrait eases in, the figure turns navy under a gold line. */
.irr-speaker__grid { display: grid; gap: var(--space-xl) var(--gutter); }
.irr-speaker__side { display: grid; gap: var(--space-xl); align-content: start; }
.irr-speaker__photo { margin: 0; width: min(70vw, 320px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); background: var(--navy); }
.irr-speaker__photo picture, .irr-speaker__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.irr-speaker__photo img { transition: transform 1200ms var(--ease-out); }
@media (hover: hover) { .irr-speaker__photo:hover img { transform: scale(1.04); } }
.irr-speaker__name { margin: 0; font-size: var(--step-4); font-weight: var(--weight-regular); line-height: 1.04; letter-spacing: -0.024em; color: var(--navy); }
.irr-speaker__role { margin: var(--space-xs) 0 var(--space-xl); font-size: var(--step--1); font-stretch: var(--width-narrow); font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.irr-stat { position: relative; display: grid; gap: var(--space-2xs); margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--rule); }
.irr-stat::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); }
.irr-stat__num { transition: color var(--dur-base) var(--ease-out); }
@media (hover: hover) { .irr-stat:hover::after { transform: scaleX(1); } .irr-stat:hover .irr-stat__num { color: var(--navy); } }
.irr-stat__num { font-size: var(--step-5); color: var(--gold); }
.irr-stat__what { margin: var(--space-xs) 0 0; font-size: var(--step-0); color: var(--ink); }
.irr-stat__src { margin: 0; font-size: var(--step--1); color: var(--text-meta); }

/* The close: a warm band, the print faint behind the words; centred title, one line, the rooms as one quiet line, one button. */
.irr-close-band { position: relative; overflow: hidden; padding-block: var(--section-y); }
.irr-close__print { position: absolute; left: 50%; top: 50%; width: min(150vw, 760px); height: auto; transform: translate(-50%, -50%); opacity: 0.065; pointer-events: none; }
.irr-close__ridges { --ink-o: 1; --ink-d: 0; --ink-anim: none; --ink-w: 1; }
.irr-close-band .container { position: relative; }
.irr-close { display: grid; justify-items: center; text-align: center; }
.irr-close__title { margin: 0 0 var(--space-lg); max-width: 18ch; font-size: var(--step-4); font-weight: var(--weight-regular); line-height: 1.04; letter-spacing: -0.024em; color: var(--navy); }
.irr-close__title em { font-style: italic; }
.irr-close__body { max-width: 44ch; }
.irr-close__body p { margin: 0; font-size: var(--step-0); line-height: var(--leading-normal); color: var(--text); }
.irr-close__meta { margin: var(--space-md) 0 var(--space-xl); max-width: 58ch; font-size: var(--step--1); line-height: var(--leading-normal); color: var(--text-muted); }
.irr-close__actions { display: grid; justify-items: center; }

@media (min-width: 768px) {
  .irr-speaker__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .irr-speaker__photo { width: 100%; max-width: 380px; }
}
@media (min-width: 1024px) {
  .irr-speaker__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .irr-speaker__side { grid-column: 1 / span 4; }
  .irr-speaker__body { grid-column: 7 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .irr-ask__list li, .irr-next .svc-row__name svg { transition: none; }
}

/* ==========================================================================
   Motion pass (10/20). Plays once on arrival; hover on hover devices only;
   everything renders finished with reduced motion or without JS.
   ========================================================================== */
/* Gold rule beside the turn line draws down. */
.js .svc-prose .svc-turn[data-reveal] { position: relative; border-left-color: transparent; }
.js .svc-prose .svc-turn[data-reveal]::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top center; transition: transform 700ms var(--ease-emph) 350ms, background var(--dur-base) var(--ease-out); }
.js .svc-prose .svc-turn[data-reveal].is-in::before { transform: scaleY(1); }
@media (hover: hover) { .js .svc-prose .svc-turn[data-reveal]:hover { border-left-color: transparent; } .js .svc-prose .svc-turn[data-reveal]:hover::before { background: var(--navy); } }

/* Hairlines draw left to right as their rows arrive: the four ways, the outcomes, the questions, the next steps, the rooms. */
.js .irr-ways .pillar[data-reveal] { border-top-color: transparent; }
.js .irr-ways .pillar[data-reveal]::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease-emph) 150ms; }
.js .irr-ways .pillar[data-reveal].is-in::before { transform: scaleX(1); }
.js .irr-ways .pillar[data-reveal]:last-child { border-bottom-color: transparent; }
.js .irr-ways .pillar[data-reveal]:last-child.is-in { border-bottom-color: var(--rule); transition: border-bottom-color 400ms var(--ease-out) 900ms; }

.js .irr-four .svc-four__item[data-reveal]::before { transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease-emph) 150ms; }
.js .irr-four .svc-four__item[data-reveal].is-in::before { transform: scaleX(1); }

.irr-ask__list li { position: relative; }
.js .irr-ask__list li[data-reveal] { border-top-color: transparent; }
.js .irr-ask__list li[data-reveal]::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--rule-inverse); transform: scaleX(0); transform-origin: left center; transition: transform 1100ms var(--ease-emph); }
.js .irr-ask__list li[data-reveal].is-in::before { transform: scaleX(1); }
.js .irr-ask__list li[data-reveal]:last-child { border-bottom-color: transparent; }
.js .irr-ask__list li[data-reveal]:last-child.is-in { border-bottom-color: var(--rule-inverse); transition: border-bottom-color 400ms var(--ease-out) 1100ms; }

.js .irr-next .svc-row[data-reveal]::before { transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease-emph) 150ms; }
.js .irr-next .svc-row[data-reveal].is-in::before { transform: scaleX(1); }

/* The portrait wipes up into its frame; the figure counts up (js/irreplaceable.js). */
.js .irr-speaker__photo[data-reveal] img { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-emph) 100ms; }
.js .irr-speaker__photo[data-reveal].is-in img { clip-path: inset(0 0 0 0); }
.js .irr-stat[data-reveal] { border-top-color: transparent; position: relative; }
.js .irr-stat[data-reveal]::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease-emph); }
.js .irr-stat[data-reveal].is-in::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .js .svc-prose .svc-turn[data-reveal] { border-left-color: var(--gold); } .js .svc-prose .svc-turn[data-reveal]::before { display: none; }
  .js .irr-ways .pillar[data-reveal], .js .irr-stat[data-reveal] { border-top-color: var(--rule); }
  .js .irr-ask__list li[data-reveal] { border-top-color: var(--rule-inverse); }
  .js .irr-ways .pillar[data-reveal]:last-child { border-bottom-color: var(--rule); }
  .js .irr-ask__list li[data-reveal]:last-child { border-bottom-color: var(--rule-inverse); }
  .js .irr-ways .pillar[data-reveal]::before, .js .irr-ask__list li[data-reveal]::before, .js .irr-stat[data-reveal]::before { display: none; }
  .js .irr-next .svc-row[data-reveal]::before, .js .irr-four .svc-four__item[data-reveal]::before { transform: none; }
  .js .irr-speaker__photo[data-reveal] img { clip-path: none; transition: none; }
  .irr-four .svc-four__n, .irr-four .svc-four__name, .irr-speaker__photo img, .irr-stat::after, .irr-stat__num, .page-irr .btn--primary, .irr-ask__diff em { transition: none; }
  .irr-speaker__photo:hover img { transform: none; }
}