/* ==========================================================================
   Conflict Coach — site stylesheet
   Brand tokens taken directly from the July '26 brand deck.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Core palette */
  --ink:        #2d2926;
  --ink-deep:   #1a1817;
  --red:        #fe4338;
  --red-deep:   #c9241b;
  --paper:      #ffffff;
  --paper-warm: #f6f3f0;
  --paper-line: #e4ded9;

  /* Territory colours */
  --coaching:   #f37021;
  --culture:    #4e83d8;
  --seminars:   #f4c44e;
  --direction:  #7f2fdd;

  /* Text */
  --on-dark:      #ffffff;
  --on-dark-mute: rgba(255, 255, 255, 0.62);
  --on-light:      var(--ink);
  --on-light-mute: #6b625c;

  /* Type */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 56px);
  --shelf:  clamp(72px, 10vw, 144px);
  --radius: 16px;
  --radius-sm: 10px;

  /* Sticky masthead height, used by anything that pins below it */
  --head: 75px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head) + 12px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-light);
  font-family: var(--font);
  font-size: clamp(16px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  padding: 12px 20px;
  background: var(--red); color: #fff;
  font-weight: 700; text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- 3. Type scale ------------------------------------------------------- */

.display,
.h1, .h2, .h3 {
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.display { font-size: clamp(2.9rem, 6.2vw, 5.4rem); }
.h1      { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
.h2      { font-size: clamp(2rem, 3.9vw, 3.1rem); line-height: 1.02; }
.h3      { font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.688rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: currentColor; opacity: 0.5;
}
.eyebrow--bare::before { display: none; }

.lede {
  font-size: clamp(1.06rem, 1.45vw, 1.28rem);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.measure    { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

.mute       { color: var(--on-light-mute); }
.on-dark .mute,
.mute-dark  { color: var(--on-dark-mute); }

.red { color: var(--red); }

/* --- 4. Layout ----------------------------------------------------------- */

.wrap {
  width: 100%; max-width: 1340px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 900px; }

.shelf { padding-block: var(--shelf); }
.shelf--tight { padding-block: clamp(52px, 6vw, 88px); }

.on-dark  { background: var(--ink); color: var(--on-dark); }
.on-deep  { background: var(--ink-deep); color: var(--on-dark); }
.on-warm  { background: var(--paper-warm); }

.rule { height: 1px; background: var(--paper-line); border: 0; }
.on-dark .rule, .on-deep .rule { background: rgba(255,255,255,0.14); }

/* Section head: label left, content right — used across every page. */
.sechead {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  padding-top: 28px;
  border-top: 1px solid var(--paper-line);
}
.on-dark .sechead, .on-deep .sechead { border-top-color: rgba(255,255,255,0.16); }
.sechead__label { color: var(--red); padding-top: 6px; }
.sechead__body > * + * { margin-top: 20px; }

@media (max-width: 720px) {
  .sechead { grid-template-columns: 1fr; gap: 18px; }
}

/* --- 5. Buttons ---------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-bd: currentColor;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), transform 0.28s var(--ease);
}
.btn__arrow { transition: transform 0.32s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--solid { --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: var(--red); }
.btn--solid:hover { --btn-bg: var(--red-deep); --btn-bd: var(--red-deep); }

.btn--ghost:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.on-dark .btn--ghost:hover, .on-deep .btn--ghost:hover { color: var(--ink); background: #fff; border-color: #fff; }

.btn--wa { --btn-bg: #25d366; --btn-fg: #0a2a1c; --btn-bd: #25d366; }
.btn--wa:hover { --btn-bg: #1fbb59; --btn-bd: #1fbb59; }
.btn__wa { flex: none; }

.reply-note {
  margin-top: 14px;
  max-width: 42ch;
  font-size: 0.92rem; font-weight: 500; line-height: 1.5;
  letter-spacing: -0.005em; text-transform: none;
  opacity: 0.72;
}
.reply-note a { color: inherit; }

.textlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1.5px solid currentColor;
  transition: gap 0.28s var(--ease), color 0.28s var(--ease);
}
.textlink:hover { gap: 15px; color: var(--red); }

/* --- 6. Header ----------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  color: var(--on-dark);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  /* Own layer. Without it iOS Safari repaints the sticky bar into the tiles
     underneath it and leaves stale copy behind on a fast scroll. */
  transform: translateZ(0);
}
.masthead__inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  min-height: 74px;
}

.brand { display: block; flex: none; margin-right: auto; }
.brand svg, .brand img { width: clamp(132px, 12vw, 168px); height: auto; color: #fff; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.nav a {
  position: relative;
  padding: 8px 0;
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--on-dark-mute);
  transition: color 0.22s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.utils { display: flex; align-items: center; gap: 10px; flex: none; }

.search { position: relative; }
.search__field {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
}
.search__field:focus-within { border-color: var(--red); }
.search input {
  width: clamp(90px, 12vw, 150px);
  border: 0; background: none; outline: none;
  font-size: 0.82rem; color: #fff;
}
.search input::placeholder { color: rgba(255,255,255,0.45); }
.search__icon { flex: none; opacity: 0.6; }

.search__results {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(340px, 78vw);
  background: #fff; color: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
  padding: 8px;
  display: none;
}
.search__results[data-open="true"] { display: block; }
.search__results a, .search__results p {
  display: block; padding: 10px 12px;
  font-size: 0.86rem; text-decoration: none;
  border-radius: 7px;
}
.search__results a strong { display: block; font-weight: 700; }
.search__results a span { color: var(--on-light-mute); font-size: 0.8rem; }
.search__results a:hover { background: var(--paper-warm); }
.search__results p { color: var(--on-light-mute); }

.burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer;
}
.burger span {
  display: block; width: 16px; height: 1.5px; background: #fff;
  position: relative;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 16px; height: 1.5px; background: #fff;
  transition: transform 0.28s var(--ease);
}
.burger span::before { top: -5px; }
.burger span::after  { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: flex; }
  /* Above the drawer, so the logo and the close control stay usable while it
     is open -- the nav is positioned and would otherwise paint over them. */
  .burger, .brand { position: relative; z-index: 95; }

  /* A drawer off the right edge, not a panel under the header. It sits below
     the masthead's z-index so the logo and the close control stay on top of
     it, and the links run to the right edge -- the side the thumb is already
     on when it has just tapped the burger. */
  /* inset: 0 would only cover the header. .masthead carries a translateZ(0)
     for an iOS repaint bug, and a transformed ancestor becomes the containing
     block for fixed children -- so this is measured from the masthead's own
     box instead. It sits at the top of the viewport whenever it is stuck, so
     a full-height box from its top edge covers the page. */
  .nav {
    position: fixed; z-index: 90;
    top: 0; left: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0;
    background: var(--ink);
    padding: calc(var(--head) + 20px) var(--gutter) 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    /* display:none, not visibility:hidden. Parked off-canvas it still counts
       towards the scrollable area -- the masthead's transform makes it a
       containing block, so the drawer widened every page to 780px and gave
       the whole site a sideways scroll. allow-discrete keeps the slide.
       Where that is unsupported the drawer opens without animating, which is
       the right thing to lose. */
    display: none;
    transition: transform 0.34s var(--ease), display 0.34s allow-discrete;
  }
  .nav[data-open="true"] { display: flex; transform: none; }
  .nav a {
    padding: 16px 0;
    font-size: 1.15rem;
    text-align: right;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav a::after { display: none; }
  .search { display: none; }

  /* The page must not scroll behind an open drawer. */
  body[data-nav-open="true"] { overflow: hidden; }

  @starting-style {
    .nav[data-open="true"] { transform: translateX(100%); }
  }
}

/* --- 7. Hero ------------------------------------------------------------- */

.hero { background: var(--ink); color: var(--on-dark); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 92px);
}
.hero__copy > * + * { margin-top: clamp(20px, 2.4vw, 30px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Three short section links that belong on one line at every width: they read
   as a set, and wrapping one onto its own row breaks that. nowrap alone only
   moves the problem -- below about 340px the row stops wrapping and overflows
   sideways instead, which is worse. So the three share the row equally and
   shrink together: flex-basis 0 with min-width 0 lets them go narrower than
   their text, and the padding and tracking give way before the label does. */
.hero__actions--row { flex-wrap: nowrap; }
.hero__actions--row .btn { white-space: nowrap; }

/* Only where the row actually runs out of room. Above this the three stay
   content-sized, as every other button row on the site is. */
@media (max-width: 620px) {
  .hero__actions--row { gap: 8px; }
  .hero__actions--row .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: clamp(6px, 3vw, 26px);
    font-size: clamp(0.58rem, 2.5vw, 0.75rem);
    letter-spacing: 0.06em;
    padding-block: 13px;
  }
}

/* Rolling statements — brand lines cycle as the hero headline. */
.roller { margin: 0; }
.roller__stage {
  display: grid;
  overflow: hidden;
}
.roller__line {
  grid-area: 1 / 1;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(0.55em);
  transition: transform 0.62s var(--ease), opacity 0.62s var(--ease);
}
/* First line is visible before (and without) JS; the script takes over after. */
.roller__line:first-child        { opacity: 1; transform: translateY(0); }
.roller__line[data-state="wait"] { opacity: 0; transform: translateY(0.55em); }
.roller__line[data-state="in"]   { opacity: 1; transform: translateY(0); }
.roller__line[data-state="out"]  { opacity: 0; transform: translateY(-0.55em); }
.roller__bar {
  height: 2px; background: rgba(255,255,255,0.16);
  max-width: 300px;
}
.roller__bar i {
  display: block; height: 100%; width: 0; background: var(--red);
  transition: width 0.2s linear;
}

.hero__media { position: relative; display: grid; isolation: isolate; }
.hero__media .duo { grid-area: 1 / 1; border-radius: var(--radius); }
.hero__media .duo::after { opacity: 0.42; }
.hero__media .duo::before {
  background: linear-gradient(102deg, rgba(20,18,17,0.55) 0%, rgba(20,18,17,0.06) 46%, transparent 72%);
}
.hero__media img,
.hero__media video {
  width: 100%;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
  display: block;
}

/* Flipbook video: hard cuts between aligned close-ups — prism + eye hold still. */
.hero__video {
  aspect-ratio: 4 / 3.1;
}
.hero__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.hero__caption {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  z-index: 1;
  width: min(76%, 340px);
  margin: clamp(14px, 2vw, 24px);
  padding: clamp(16px, 2vw, 24px);
  display: grid;
  gap: 10px;
  color: white;
  background: linear-gradient(145deg, rgba(63,54,50,.78), rgba(26,24,23,.9));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.08);
  font-size: .82rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.hero__caption::before {
  content: "";
  position: absolute;
  top: -9px; right: -9px;
  width: 64px; height: 72px;
  border-top: 8px solid rgba(254,67,56,.8);
  border-right: 8px solid rgba(254,67,56,.8);
  border-radius: 0 25px 0 0;
  pointer-events: none;
}
.hero__caption strong { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.hero__caption > span { color: rgba(255,255,255,.8); }
/* Leave the coach's face visible in the right half of the portrait. */
.hero__media--portrait .hero__caption { justify-self: start; width: min(62%, 290px); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero__media img, .hero__media video, .hero__video { aspect-ratio: 1 / 1.1; }
  .hero__video video { aspect-ratio: auto; }
  .hero__caption, .hero__media--portrait .hero__caption { width: auto; justify-self: stretch; }
}

/* Keep the booking button within the opening mobile screen, including when
   browser controls are visible. The roller still reserves its longest line's
   height so the copy and buttons stay steady as the statements change. */
@media (max-width: 620px) {
  .hero--home .hero__grid { padding-top: 28px; gap: 28px; }
  .hero--home .display { font-size: clamp(32px, 9.2vw, 42px); line-height: 1.04; }
  .hero--home .roller__stage { padding-block: 2px 6px; }
  .hero--home .hero__copy > * + * { margin-top: 16px; }
  .hero--home .lede { font-size: 16px; line-height: 1.5; }
  .hero--home .hero__actions { gap: 10px; }
  .hero--home .hero__actions .btn { min-height: 48px; padding: 12px 22px; font-size: 11px; letter-spacing: .12em; }
}
@media (max-width: 620px) and (max-height: 680px) {
  .hero--home .hero__grid { padding-top: 20px; }
  .hero--home .display { font-size: clamp(30px, 8.6vw, 38px); }
  .hero--home .hero__copy > * + * { margin-top: 14px; }
}

/* --- 8. Duotone media treatment ----------------------------------------- */

.duo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-deep);
}
.duo img,
.duo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo::before, .duo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.duo::after {
  background: linear-gradient(108deg, transparent 0%, var(--cat, var(--red)) 68%);
  opacity: 0.88;
  mix-blend-mode: color;
}
.duo::before {
  background: linear-gradient(108deg, rgba(20,18,17,0.78) 0%, rgba(20,18,17,0.14) 46%, transparent 72%);
  z-index: 2;
}
/* Portrait cards read better with the wash falling from the top corner. */
.duo--tilt::after { background: linear-gradient(138deg, transparent 4%, var(--cat, var(--red)) 74%); }
.duo--tilt::before {
  background: linear-gradient(180deg, rgba(20,18,17,0.62) 0%, rgba(20,18,17,0.05) 34%, transparent 60%);
}
.duo--soft::after { opacity: 0.5; }
/* Artwork that is already on-brand needs no wash at all. */
.duo--none::after, .duo--none::before { display: none; }
/* Photography that already carries its own colour keeps it — only a soft
   neutral scrim so a white title stays readable. */
.duo--asis::after { display: none; }
.duo--asis::before {
  background: linear-gradient(180deg, rgba(20,18,17,0.5) 0%, rgba(20,18,17,0.06) 32%, transparent 56%);
}
.duo--conflict  { --cat: var(--red); }
.duo--coaching  { --cat: var(--coaching); }
.duo--culture   { --cat: var(--culture); }
.duo--seminars  { --cat: var(--seminars); }
.duo--direction { --cat: var(--direction); }

/* --- 9. Step cards (the brand's notched silhouette) ---------------------- */

/* Horizontal: copy panel left, media right and dropping lower. */
.step-h {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  color: var(--on-dark);
  text-decoration: none;
}
.step-h__body {
  align-self: start;
  padding: clamp(22px, 2.2vw, 32px);
  border-radius: var(--radius) 0 0 var(--radius);
  background: linear-gradient(118deg, var(--cat, var(--red)) 0%, var(--ink-deep) 108%);
  display: flex; flex-direction: column; gap: 12px;
}
.step-h__body .h3 { text-wrap: balance; }
.step-h__meta {
  margin-top: auto;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px;
}
.step-h__media {
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  aspect-ratio: 6 / 5;
}
.step-h__media img { transition: transform 0.7s var(--ease); }
a.step-h:hover .step-h__media img { transform: scale(1.04); }

.step-h--coaching  { --cat: var(--coaching); }
.step-h--culture   { --cat: var(--culture); }
.step-h--seminars  { --cat: var(--seminars); }
.step-h--direction { --cat: var(--direction); }

@media (max-width: 700px) {
  .step-h { grid-template-columns: 1fr; }
  .step-h__body { border-radius: var(--radius) var(--radius) 0 0; }
  .step-h__media { border-radius: 0 0 var(--radius) var(--radius); aspect-ratio: 16 / 11; }

  /* Stacked on a phone, the card assembles as you scroll: the copy panel
     unfolds downwards, then the picture beneath it. --p comes from JS, and
     the scrub stands in for the one-shot .reveal fade. */
  .step-h[data-scrub] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .step-h[data-scrub] .step-h__body {
    --b: clamp(0, calc(var(--p, 0) * 2), 1);
    clip-path: inset(0 0 calc((1 - var(--b)) * 100%) 0);
  }
  .step-h[data-scrub] .step-h__body > * {
    --w: clamp(0, calc((var(--p, 0) - var(--in, 0)) * 6), 1);
    opacity: var(--w);
    transform: translateY(calc(10px * (1 - var(--w))));
  }
  /* Three children now the number has gone, spread over the same travel. */
  .step-h[data-scrub] .step-h__body > :nth-child(1) { --in: 0.06; }
  .step-h[data-scrub] .step-h__body > :nth-child(2) { --in: 0.18; }
  .step-h[data-scrub] .step-h__body > :nth-child(3) { --in: 0.30; }
  .step-h[data-scrub] .step-h__media {
    --m: clamp(0, calc((var(--p, 0) - 0.42) * 1.9), 1);
    clip-path: inset(0 0 calc((1 - var(--m)) * 100%) 0);
  }
  .step-h[data-scrub] .step-h__media img {
    transition: none;
    transform: scale(calc(1.08 - 0.08 * var(--m, 0)));
  }

}

/* Homepage pillars: full artwork with an inset glass statement. */
.pillars .step-h {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 360px;
  padding: 28px;
  overflow: hidden;
  border-radius: 24px;
  background: #201b1b;
}
.pillars .step-h__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
}
/* Keep the clasped hands visible beside the inset copy. */
.pillars .pillar--connection .step-h__media img { width: 140%; max-width: none; }
.pillars .step-h::before, .pillars .step-h::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.pillars .step-h::before {
  width: 60%;
  aspect-ratio: 1;
  top: -20%;
  left: -18%;
  border: 42px solid rgba(240, 83, 70, .24);
}
.pillars .step-h::after {
  width: 100%;
  height: 100%;
  left: -46%;
  bottom: -30%;
  border: 1px solid rgba(245, 141, 126, .4);
  transform: rotate(-28deg);
}
.pillars .step-h__body {
  align-self: center;
  justify-content: center;
  width: 62%;
  min-height: 268px;
  padding: clamp(22px, 2.2vw, 32px);
  gap: 14px;
  border: 1px solid rgba(255, 241, 234, .24);
  border-radius: 20px;
  color: #fff8f1;
  background: linear-gradient(145deg, rgba(62, 39, 40, .72), rgba(32, 29, 29, .68));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 36px rgba(12, 9, 9, .16);
}
.pillars .step-h__body .h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -.035em; }
.pillars .step-h__body p { color: #e4d9d3; font-size: 1rem; line-height: 1.45; }
.pillars .step-h__meta { order: -1; margin-top: 0; color: #ffb0a2; font-size: .625rem; letter-spacing: .14em; }
.pillars .step-h__meta::before { content: ""; width: 22px; height: 1px; background: currentColor; }
@media (max-width: 1000px) and (min-width: 701px) {
  .pillars .step-h { padding: 18px; }
  .pillars .step-h__body { width: 76%; padding: 22px; }
}
@media (max-width: 700px) {
  .pillars { padding-block: 48px; }
  .pillars .pillars__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .pillars .step-h { min-height: 196px; padding: 12px; border-radius: 18px; opacity: 1; transform: none; transition: none; }
  /* The statement is half its former size on a phone, so the artwork carries
     the card. The words shrink with it, but not below what stays readable. */
  .pillars .step-h__body { width: 38%; min-height: 0; padding: 10px 12px; gap: 4px; border-radius: 10px; }
  .pillars .step-h__body .h3 { font-size: .8125rem; line-height: 1.15; letter-spacing: -.02em; }
  .pillars .step-h__body p { font-size: .6875rem; line-height: 1.3; }
  .pillars .step-h__meta { font-size: .5rem; letter-spacing: .1em; gap: 6px; }
  .pillars .step-h__meta::before { width: 10px; }
}

/* Vertical: media on top, label block hanging from the bottom-left. */
.step-v { display: block; text-decoration: none; color: inherit; }
.step-v__media {
  border-radius: var(--radius) var(--radius) var(--radius) 0;
  aspect-ratio: 3 / 3.5;
}
.step-v__media img { transition: transform 0.7s var(--ease); }
a.step-v:hover .step-v__media img { transform: scale(1.045); }
.step-v__title {
  position: absolute; top: 20px; left: 22px; right: 22px;
  z-index: 3;
  color: #fff;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 700; letter-spacing: -0.028em;
}
.step-v__label {
  width: 78%;
  padding: 18px 20px 20px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 132px;
}
.step-v__label p { font-size: 0.9rem; line-height: 1.45; color: var(--on-dark-mute); }
.step-v__label .textlink { margin-top: auto; font-size: 0.688rem; align-self: flex-start; }

@media (max-width: 620px) {
  .step-v__label { width: 88%; }
}

/* On phones the label unfolds downwards from under the image as you scroll.
   JS sets --p; the box keeps its space, so nothing shifts around it. */
@media (max-width: 700px) {
  .step-v__label[data-scrub] {
    clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0);
  }
  .step-v__label[data-scrub] > * {
    --w: clamp(0, calc((var(--p, 0) - var(--in, 0)) * 5), 1);
    opacity: var(--w);
    transform: translateY(calc(10px * (1 - var(--w))));
  }
  .step-v__label[data-scrub] > :nth-child(1) { --in: 0.25; }
  .step-v__label[data-scrub] > :nth-child(2) { --in: 0.55; }
}

/* --- 10. Grids ----------------------------------------------------------- */

.grid { display: grid; gap: clamp(18px, 2vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--top { align-items: start; }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Connected, angled panels follow the selected desktop and mobile concept. */
.pathways {
  --seam: clamp(44px, 6vw, 86px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(250px, auto));
  gap: 14px;
}
.pathway {
  position: relative;
  display: flex;
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ink);
  color: white;
  text-decoration: none;
}
.pathway__image {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 65% center;
  transition: transform .7s var(--ease);
}
.pathway::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,rgba(30,27,25,.92),rgba(30,27,25,.62) 48%,rgba(30,27,25,.1));
}
.pathway:hover .pathway__image { transform: scale(1.035); }
.pathway:focus-visible { outline: 0; }
.pathway:focus-visible::after { box-shadow: inset 0 0 0 4px var(--red); }
.pathway__copy {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; width: 100%; padding: 30px 28px 30px calc(var(--seam) + 24px);
}
.pathway__copy > p:not(.eyebrow) { max-width: 29ch; font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,.94); }
.pathway__title { font-size: clamp(2rem,3.2vw,3.25rem); line-height: 1.08; letter-spacing: -.04em; }
.pathway__copy .textlink { margin-top: auto; padding-top: 10px; font-size: .75rem; letter-spacing: .055em; }
.pathway--conflict {
  grid-row: 1 / 3;
  width: calc(100% + var(--seam));
  clip-path: polygon(0 0,calc(100% - var(--seam)) 0,100% 50%,calc(100% - var(--seam)) 100%,0 100%);
}
.pathway--conflict .pathway__copy { width: calc(100% - var(--seam)); padding: 40px 34px; gap: 20px; }
.pathway--conflict .pathway__copy > p:not(.eyebrow) { max-width: 23ch; }
.pathway--conflict .pathway__title { font-size: clamp(2.5rem,4vw,4rem); }
.pathway--conflict .pathway__image { left: 0; width: 150%; max-width: none; object-position: center; }
.pathway--conflict .eyebrow { font-size: .7rem; letter-spacing: .12em; }
.pathway--culture { clip-path: polygon(0 0,100% 0,100% 100%,var(--seam) calc(100% - 12px)); }
.pathway--culture::after { background: linear-gradient(90deg,rgba(23,55,80,.95),rgba(23,55,80,.78) 50%,rgba(23,55,80,.2)); }
.pathway--coaching { clip-path: polygon(var(--seam) 0,100% 12px,100% 100%,0 100%); }
.pathway--coaching::after { background: linear-gradient(90deg,rgba(92,31,25,.95),rgba(92,31,25,.72) 50%,rgba(92,31,25,.18)); }
.pathways__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; }
.pathways__foot p { color: var(--on-light-mute); font-size: .92rem; }
.pathways__foot p a { color: var(--ink); text-underline-offset: 4px; }
@media (max-width: 680px) {
  .pathways { grid-template-columns: 1fr; grid-template-rows: auto; gap: 12px; }
  .pathway { min-height: 210px; }
  .pathway__copy { padding: 34px 22px; gap: 10px; }
  .pathway__copy > p:not(.eyebrow) { max-width: 25ch; font-size: .9375rem; line-height: 1.4; }
  .pathway__title { font-size: 1.875rem; }
  .pathway__copy .textlink { font-size: .6875rem; padding-top: 4px; }
  .pathway--conflict { grid-row: auto; width: 100%; min-height: 274px; clip-path: polygon(0 0,100% 0,100% calc(100% - 32px),0 100%); }
  .pathway--conflict .pathway__copy { width: 100%; padding: 24px 22px 48px; gap: 10px; }
  .pathway--conflict .pathway__title { font-size: 2rem; }
  .pathway--conflict .pathway__copy > p:not(.eyebrow) { max-width: 23ch; }
  .pathway--conflict .pathway__image { object-position: center; }
  .pathway--culture { margin-top: -32px; clip-path: polygon(0 32px,100% 0,100% 100%,0 calc(100% - 32px)); }
  .pathway--culture .pathway__copy { padding-block: 48px; }
  .pathway--coaching { margin-top: -32px; clip-path: polygon(0 0,100% 32px,100% 100%,0 100%); }
  .pathway--coaching .pathway__copy { padding-top: 40px; }
  .pathways__foot { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .pathway__image { transition: none; } .pathway:hover .pathway__image { transform: none; } }

/* Keep the explanation attached to each step, including on small screens. */
.approach { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.approach__steps { position: relative; display: grid; gap: 22px; }
.approach__steps::before { content: ""; position: absolute; top: 25px; bottom: 40px; left: 21px; width: 1px; background: rgba(255,255,255,.25); }
.approach__steps li { position: relative; display: flex; align-items: flex-start; gap: 22px; }
.approach__number { position: relative; flex: 0 0 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--red); border-radius: 50%; background: var(--ink); color: var(--red); font-size: .75rem; font-weight: 700; }
.approach__steps li > div { flex: 1; min-width: 0; padding: 8px 0 24px; border-bottom: 1px solid rgba(255,255,255,.16); }
.approach__steps p { color: var(--on-dark-mute); margin-top: 12px; max-width: 39ch; }
.approach__steps li:last-child > div { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 900px) { .approach { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pathway__image { transition: none; } .pathway:hover .pathway__image { transform: none; } }

.story {
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 18px;
}
.pathways > .story, .grid > .story { height: 100%; }
.stack-lg > .story { height: auto; }
.on-dark .story, .on-deep .story { border-color: rgba(255,255,255,0.16); }
.story .textlink { margin-top: auto; align-self: flex-start; }

/* The story headline sits directly over a full-width room photograph. */
.my-story-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px,48vw,690px);
  overflow: hidden;
  border-radius: var(--radius);
  background: #e7e4df;
}
.my-story-hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.my-story-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.76) 29%,rgba(255,255,255,.12) 57%,transparent 73%); }
.my-story-hero__content { padding: clamp(28px,4.5vw,64px); }
.my-story-hero__title { max-width: min(19ch,55%); margin-top: 22px; color: var(--ink); font-size: clamp(2.25rem,4.4vw,3.75rem); font-weight: 700; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.my-story-hero .eyebrow { font-size: .8125rem; letter-spacing: .16em; }
@media (max-width: 640px) {
  .my-story-hero { min-height: 660px; }
  .my-story-hero__content { position: absolute; inset: auto 0 0; padding: 28px 24px; }
  .my-story-hero__title { font-size: clamp(1.875rem,8vw,2.5rem); max-width: 21ch; margin-top: 20px; }
  .my-story-hero::after { background: linear-gradient(0deg,rgba(255,255,255,.98),rgba(255,255,255,.86) 29%,rgba(255,255,255,.12) 57%,transparent 72%); }
}

/* --- 11. A pinned, photographic sequence -------------------------------- */
.territory { background: #171717; color: #fff; }
.territory__pane { padding: 32px var(--gutter); overflow: clip; }
.territory__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1500px; width: 100%; margin: 0 auto; }
.territory__top .eyebrow { color: #ddd5ce; font-size: .75rem; line-height: 1.4; letter-spacing: .13em; font-weight: 500; }
.territory__top .eyebrow::before { background: var(--red); opacity: 1; }
.territory__skip { flex: none; color: #bfbab5; font-size: .875rem; text-decoration: none; padding-block: 10px; }
.territory__skip:hover { color: white; }
.territory__stage { position: relative; isolation: isolate; max-width: 1500px; width: 100%; margin: 20px auto; }
.territory__scene { position: relative; min-height: 560px; isolation: isolate; overflow: hidden; border-radius: 12px; margin-block: 24px; background: #171717; }
.territory__visual { position: absolute; z-index: -1; inset: 0 0 0 27%; overflow: hidden; }
.territory__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.territory__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #171717 0%, rgba(23,23,23,.75) 14%, transparent 55%), linear-gradient(0deg, rgba(23,23,23,.45), transparent 45%); }
.territory__copy { position: relative; width: 55%; padding: clamp(30px, 5vw, 72px) 0; }
.territory__title { margin: 22px 0; font-size: clamp(3.25rem, 7.8vw, 8rem); font-weight: 500; line-height: 1.03; letter-spacing: -.055em; }
.territory__line { font-size: clamp(1.3rem, 2vw, 1.875rem); line-height: 1.3; max-width: 26ch; font-weight: 500; letter-spacing: -.025em; }
.territory__description { color: #bbb4ae; font-size: 1rem; line-height: 1.65; max-width: 34ch; margin-top: 16px; }
.territory__link { display: inline-flex; align-items: center; gap: 40px; margin-top: 28px; padding-bottom: 9px; font-size: .875rem; border-bottom: 1px solid rgba(255,255,255,.4); text-decoration: none; }
.territory__link > span { color: var(--tint); font-size: 1.4rem; line-height: 1; transition: transform .25s; }
.territory__link:hover > span { transform: translate(3px,-3px); }
.territory__chapters { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 28px; max-width: 1500px; width: 100%; margin: 0 auto; }
.territory__chapter { position: relative; display: flex; align-items: baseline; gap: 14px; padding-block: 16px 22px; font-size: .9375rem; color: #bdb7b2; text-decoration: none; }
.territory__chapter-no { color: #88817c; font-size: .75rem; }
.territory__chapter::after, .territory__chapter > i { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 2px; background: #423e3a; }
.territory__chapter > i { background: var(--tint); z-index: 1; transform: scaleX(var(--chapter-progress, 0)); transform-origin: left; }
.territory__chapter[aria-current="step"], .territory__chapter:hover { color: #fff; }
.territory__chapter[aria-current="step"] .territory__chapter-no { color: var(--tint); }
.territory__controls { display: none; align-items: center; justify-content: center; gap: 20px; margin-top: 12px; }
.territory__hint { text-align: center; color: #bdb7b2; font-size: .75rem; letter-spacing: .04em; }
.territory__arrow { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #726b65; border-radius: 50%; background: rgba(255,255,255,.04); color: white; font-size: 1.25rem; cursor: pointer; transition: background .2s, border-color .2s; }
.territory__arrow:hover:not(:disabled) { background: rgba(255,255,255,.13); border-color: #ded2c8; }
.territory__arrow:focus-visible { outline: 2px solid #ffb0a2; outline-offset: 4px; }
.territory__arrow:disabled { opacity: .3; cursor: default; }
.territory__reel { display: none; }

/* The pane always fits. Scroll distance belongs to the track, never to wheel handling. */
.territory[data-enhanced] .territory__track { height: calc(var(--pane-height) + var(--travel)); }
.territory[data-enhanced] .territory__pane { position: sticky; top: var(--pin-top); height: var(--pane-height); display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; padding-block: 18px 20px; }
.territory[data-enhanced] .territory__pane { touch-action: pan-y pinch-zoom; }
.territory__pane[data-swiping] { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.territory[data-enhanced] .territory__stage { min-height: 0; margin-block: 14px 0; }
.territory[data-enhanced] .territory__scene { position: absolute; inset: 0; min-height: 0; margin: 0; background: transparent; isolation: auto; overflow: visible; display: none; }
.territory[data-enhanced] .territory__scene[data-visible] { display: block; }
.territory[data-enhanced] .territory__copy { z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: 16px; transform: translateY(var(--copy-shift,0px)); opacity: var(--copy-opacity,1); filter: blur(var(--copy-blur,0px)); }
.territory[data-enhanced] .territory__visual { z-index: 0; border-radius: 12px; opacity: var(--scene-opacity,0); transform: translateX(var(--image-shift,0px)) scale(var(--image-scale,1)); transform-origin: 80% center; }
.territory[data-enhanced] .territory__controls { display: flex; }
/* Images, reel, and copy share the stage's stacking context in that order. */
.territory[data-enhanced] .territory__reel { display: block; position: absolute; width: min(60vw,750px); left: -25%; bottom: -35%; z-index: 1; opacity: .18; pointer-events: none; transform: rotate(-18deg); }
.reel { width: 100%; height: auto; }
.reel__card { fill: #e9e1d3; }
.reel__grain { display: none; }
.reel__ring { fill: none; stroke: #171717; stroke-width: 1.2; opacity: .4; }
.reel__hole { fill: #171717; }
.reel__mount { fill: #171717; stroke: #171717; stroke-width: 1; }
.reel__wash { fill: var(--tint); opacity: .2; }
.reel__icon { opacity: .8; }
.reel__no { fill: #171717; font-size: 8px; font-family: var(--font); text-anchor: middle; }
.reel__disc { transform-origin: 192px 120px; transform: rotate(var(--reel-turn,0deg)); }

@media (max-width: 800px) {
  .territory__pane { padding-inline: 24px; }
  .territory__top .eyebrow { max-width: 230px; font-size: .75rem; }
  .territory__top .eyebrow::before { display: none; }
  .territory__skip { font-size: .75rem; }
  .territory__scene { min-height: 640px; }
  .territory__visual { inset: 0; }
  .territory__visual img { object-position: 82% center; }
  .territory__visual::after { background: linear-gradient(0deg,#171717 0%,rgba(23,23,23,.96) 10%,rgba(23,23,23,.6) 45%,rgba(23,23,23,.08) 80%), linear-gradient(90deg,rgba(23,23,23,.15),transparent); }
  .territory[data-enhanced] .territory__visual { bottom: auto; height: 54%; }
  .territory[data-enhanced] .territory__visual::after { background: linear-gradient(0deg,#171717 0%,rgba(23,23,23,.7) 12%,transparent 42%); }
  .territory__copy { width: 100%; padding: 250px 0 30px; }
  .territory[data-enhanced] .territory__copy { justify-content: flex-end; padding-bottom: 24px; }
  .territory__title { font-size: clamp(3rem,11vw,5.5rem); margin-block: 12px; }
  .territory__line { font-size: clamp(1.15rem,3.3vw,1.5rem); max-width: 28ch; }
  .territory__description { font-size: .9375rem; line-height: 1.5; margin-top: 10px; max-width: 33ch; }
  .territory__link { margin-top: 18px; padding-bottom: 7px; }
  .territory__chapters { gap: 10px; }
  .territory__chapter { display: grid; gap: 4px; padding-block: 12px 14px; font-size: .75rem; }
  .territory__chapter-no { font-size: .75rem; }
  .territory__controls { gap: 14px; margin-top: 10px; }
  .territory[data-enhanced] .territory__reel {
    width: min(140vw,620px);
    left: 8%;
    bottom: -25%;
    transform: translateX(-50%) rotate(-18deg);
  }
}
@media (max-width: 380px) { .territory__pane { padding-inline: 18px; } .territory__chapters { gap: 6px; } .territory__chapter { font-size: .72rem; } }
@media (max-height: 660px) and (min-width: 801px) {
  .territory__title { font-size: clamp(3rem,6vw,5rem); margin-block: 12px; }
  .territory__description { margin-top: 10px; }
  .territory__link { margin-top: 16px; }
}
@media (max-height: 570px) {
  .territory[data-enhanced] .territory__pane { padding-block: 8px; }
  .territory__controls, .territory[data-enhanced] .territory__controls { display: none; }
  .territory[data-enhanced] .territory__copy { justify-content: center; padding-block: 6px; }
  .territory__description { display: none; }
  .territory__title { font-size: 3rem; margin-block: 8px; }
  .territory__line { font-size: 1rem; }
  .territory__link { margin-top: 12px; }
}

/* --- Story previews and the portrait player ----------------------------- */
.stories { background: #f6f3f0; }
.stories__heading { display: flex; justify-content: space-between; gap: 64px; align-items: flex-end; margin-bottom: 48px; }
.stories__heading h2 { max-width: 14ch; font-size: clamp(2.5rem,4.5vw,4rem); font-weight: 600; }
.stories__intro { max-width: 38ch; font-size: 1rem; color: var(--on-light-mute); }
.stories__disclosure { font-size: .8125rem; line-height: 1.5; margin-top: 16px; }
/* A rail at every width: seven stories do not divide into a grid, and the
   part-visible last card says there is more to scroll to. */
.story-cards { display: flex; overflow-x: auto; gap: 24px; scroll-snap-type: x mandatory; padding: 3px 0 18px; overscroll-behavior-x: contain; }
.story-cards > .story-card { flex: 0 0 calc((100% - 72px) / 3.4); scroll-snap-align: start; }
.story-card { position: relative; aspect-ratio: 3/4.6; display: block; overflow: hidden; isolation: isolate; border-radius: 16px; background: #282522; color: white; text-decoration: none; }
.story-card__portrait { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: -2; transition: transform .7s var(--ease); }
.story-card::after { position: absolute; content: ""; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(0,0,0,.5),transparent 30%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.9) 100%); }
.story-card__top, .story-card__bottom { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.story-card:hover .story-card__portrait { transform: scale(1.035); }
.story-card__top { display: flex; align-items: center; gap: 12px; padding: 22px; }
.story-card__avatar { flex: 0 0 54px; height: 54px; border-radius: 50%; padding: 3px; background: linear-gradient(35deg,#ffbd62,#f84356,#8f46b7); box-shadow: 0 0 0 2px rgba(0,0,0,.2); }
.story-card__avatar img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; object-position: 50% 27%; border: 2px solid #24211e; }
.story-card__top strong { display: block; font-size: 1rem; line-height: 1.3; }
.story-card__top small { display: block; color: rgba(255,255,255,.8); font-size: .8125rem; }
.story-card__example { margin-left: auto; font-size: .75rem; border: 1px solid rgba(255,255,255,.4); border-radius: 30px; padding: 3px 9px; }
.story-card__bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; }
.story-card__bottom > p { font-size: clamp(1.25rem,2vw,1.75rem); line-height: 1.3; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
.story-card__open { display: flex; align-items: center; gap: 12px; font-size: .875rem; margin-top: 24px; }
.story-card__play { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-size: .7rem; padding-left: 2px; transition: background .3s; }
.story-card:hover .story-card__play { background: rgba(255,255,255,.18); }
.stories__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; font-size: .875rem; color: var(--on-light-mute); }
.stories__foot .textlink { color: var(--ink); font-size: .75rem; }
body[data-story-open] { overflow: hidden; }
.story-viewer { border: 0; padding: 0; margin: auto; color: white; background: #181716; width: min(440px,calc(100vw - 24px)); max-width: none; max-height: calc(100svh - 24px); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.story-viewer::backdrop { background: rgba(10,10,10,.88); backdrop-filter: blur(14px); }
.story-viewer[open] { animation: story-open .28s var(--ease); }
@keyframes story-open { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.story-viewer__frame { position: relative; height: min(780px,calc(100svh - 24px)); isolation: isolate; }
.story-viewer__poster, .story-viewer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.story-viewer__video { z-index: 1; object-fit: contain; background: #111; }
.story-viewer__video[hidden] { display: none; }
.story-viewer__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(0,0,0,.65),transparent 25%,transparent 30%,rgba(0,0,0,.88)); }
.story-viewer__header { position: absolute; z-index: 3; inset: 0 0 auto; padding: 16px 20px; }
.story-viewer__progress { display: flex; gap: 5px; }
.story-viewer__progress > span { position: relative; overflow: hidden; height: 3px; flex: 1; border-radius: 8px; background: rgba(255,255,255,.35); }
.story-viewer__progress i { display: block; height: 100%; background: white; transform: scaleX(var(--fill,0)); transform-origin: left; }
.story-viewer__identity { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; }
.story-viewer__identity h2 { font-size: 1rem; font-weight: 600; }
.story-viewer__category { font-size: .8125rem; opacity: .8; }
.story-viewer__close, .story-viewer__controls button { border: 1px solid rgba(255,255,255,.5); color: white; background: rgba(20,20,20,.3); border-radius: 50%; width: 44px; height: 44px; font-size: 1.4rem; cursor: pointer; }
.story-viewer__close:hover, .story-viewer__controls button:hover { background: rgba(255,255,255,.2); }
.story-viewer__copy { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 90px; }
.story-viewer__label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #ffc3a0; }
.story-viewer__copy blockquote { font-size: clamp(1.5rem,4vw,2rem); line-height: 1.28; letter-spacing: -.025em; margin-top: 14px; font-weight: 500; }
.story-viewer__notice { margin-top: 18px; font-size: .8125rem; line-height: 1.5; color: rgba(255,255,255,.72); }
.story-viewer__controls { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.story-viewer__count { font-size: .8125rem; }
.story-viewer__controls button:disabled { opacity: .25; cursor: default; }
.story-viewer[data-video] .story-viewer__copy { display: none; }
/* Over a playing video the shade moves in front of it — top edge only, and
   never in the way of the native controls along the bottom. */
.story-viewer[data-video] .story-viewer__shade { z-index: 2; pointer-events: none; background: linear-gradient(180deg,rgba(0,0,0,.6),transparent 24%); }
.story-viewer__identity, .story-viewer__count { text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.story-viewer[data-video] .story-viewer__count { background: rgba(0,0,0,.5); padding: 4px 10px; border-radius: 20px; }
/* Captions: the testimonial standard's one subtitle system, phrase by phrase,
   two lines at most, with the strongest statement in each video emphasised. */
.story-viewer__video::cue { font-family: Manrope, system-ui, sans-serif; font-weight: 600; line-height: 1.3; color: #fff; background: rgba(0, 0, 0, .55); }
.story-viewer__video::cue(.em) { color: #ff6b5e; font-weight: 700; }
.story-viewer[data-video] .story-viewer__controls { bottom: 58px; }
@media (max-width: 800px) {
  .stories__heading { display: block; margin-bottom: 28px; }
  .stories__intro { margin-top: 24px; max-width: 44ch; }
  .story-cards { display: flex; overflow-x: auto; gap: 16px; scroll-snap-type: x mandatory; padding: 3px 0 18px; }
  .story-cards > .story-card { flex: 0 0 min(78vw,340px); }
  .story-card__bottom > p { font-size: 1.5rem; }
  .story-card__top { padding: 18px; }
  .stories__foot { flex-direction: column; align-items: flex-start; }
}
@media (max-height: 580px) { .story-viewer__copy { bottom: 76px; } .story-viewer__copy blockquote { font-size: 1.2rem; } .story-viewer__notice { margin-top: 8px; font-size: .75rem; } }
@media (prefers-reduced-motion: reduce) {
  .story-viewer[open] { animation: none; }
  .story-card__portrait { transition: none; }
  .story-card:hover .story-card__portrait { transform: none; }
}

/* --- 12. Drawn line graphics (the signature) ----------------------------- */

/* A four-second guide: the path and both phase labels share one clock. */
.breathing { position: relative; width: 100%; }
.breathing__words { display: flex; justify-content: center; gap: 48px; font-size: 1.75rem; font-weight: 700; letter-spacing: .16em; }
.breathing__words span { opacity: .4; }
.breathing__wave { display: block; width: 100%; height: auto; overflow: visible; }
.breathing__line { fill: none; stroke: var(--culture); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.breathing__toggle { display: block; margin-inline: auto; min-height: 44px; padding: 10px 14px; border: 1px solid var(--paper-line); border-radius: 999px; background: white; font-size: .75rem; cursor: pointer; }
.breathing__toggle[hidden] { display: none; }
.breathing__toggle:hover { border-color: var(--on-light-mute); }

.drawing { width: 100%; height: auto; overflow: visible; }
.drawing .stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 1200px);
  stroke-dashoffset: var(--len, 1200px);
  transition: stroke-dashoffset 1.9s var(--ease);
}
.drawing .word {
  fill: currentColor;
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.drawing[data-drawn="true"] .stroke { stroke-dashoffset: 0; }
.drawing[data-drawn="true"] .word   { opacity: 1; transform: translateY(0); }
.drawing .word:nth-of-type(1) { transition-delay: 0.15s; }
.drawing .word:nth-of-type(2) { transition-delay: 0.55s; }
.drawing .word:nth-of-type(3) { transition-delay: 0.95s; }
.drawing .word:nth-of-type(4) { transition-delay: 1.35s; }

/* Scroll-scrubbed variant: JS sets --p (0 -> 1) from the scroll position, so
   the line draws and the words land in step with the reader, both ways. */
.drawing[data-scrub="true"] .stroke {
  transition: none;
  stroke-dashoffset: calc(var(--len, 1200px) * (1 - var(--p, 0)));
}
.drawing[data-scrub="true"] .word {
  /* --in is where this word starts; it fades in over the next 14% of travel. */
  --w: clamp(0, calc((var(--p, 0) - var(--in, 0)) * 7), 1);
  transition: none;
  transition-delay: 0s;
  opacity: var(--w);
  transform: translateY(calc(9px * (1 - var(--w))));
}
.drawing[data-scrub="true"] .word:nth-of-type(1) { --in: 0.04; }
.drawing[data-scrub="true"] .word:nth-of-type(2) { --in: 0.28; }
.drawing[data-scrub="true"] .word:nth-of-type(3) { --in: 0.52; }
.drawing[data-scrub="true"] .word:nth-of-type(4) { --in: 0.74; }

.journey {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
}
@media (max-width: 900px) { .journey { grid-template-columns: 1fr; } }

/* --- 14. Detail lists / service blocks ---------------------------------- */

.service-sections { padding-block: 24px; }
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(36px, 4vw, 60px);
  border-top: 1px solid var(--paper-line);
  scroll-margin-top: 12px;
}
.service:first-of-type { border-top: 0; }
.service__body > * + * { margin-top: 16px; }
.service__body .h2 { max-width: 19ch; font-size: clamp(1.75rem,3vw,2.75rem); line-height: 1.1; }
.service__intro, .service__scope { color: var(--on-light-mute); font-size: .9375rem; line-height: 1.5; }
.service__scope { font-size: .875rem; }
.service__tag {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--cat, var(--red)) 10%, white);
  color: color-mix(in srgb, var(--cat, var(--red)) 60%, #000);
  font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.service__steps { display: grid; }
.service__steps li { display: flex; gap: 14px; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--paper-line); }
.service__steps li:last-child { border: 0; }
.service__steps svg { flex: none; width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: color-mix(in srgb,var(--cat) 9%,white); color: color-mix(in srgb,var(--cat) 72%,#000); }
.service__steps h3 { font-size: .875rem; font-weight: 700; line-height: 1.3; }
.service__steps p { font-size: .875rem; line-height: 1.4; color: var(--on-light-mute); margin-top: 3px; }
.service__cta { background: var(--cat); color: var(--ink-deep); border-color: transparent; font-size: .625rem; padding: 14px 20px; gap: 20px; }
.service__cta:hover { background: color-mix(in srgb,var(--cat) 85%,white); }
.service__media { border-radius: 18px; align-self: stretch; min-height: 440px; max-height: 690px; }
.service__media img { object-position: 60% center; }
@media (max-width: 760px) {
  .service { position: relative; isolation: isolate; display: block; padding: 28px 0; }
  .service__body { position: relative; z-index: 1; }
  .service__body > * + * { margin-top: 12px; }
  .service__body .h2 { font-size: 1.75rem; max-width: 21ch; }
  .service__intro { font-size: .875rem; line-height: 1.4; }
  .service__scope { font-size: .8125rem; line-height: 1.45; }
  .service__steps li { padding-block: 8px; gap: 10px; }
  .service__steps svg { width: 32px; height: 32px; padding: 6px; }
  .service__steps h3 { font-size: .8125rem; }
  .service__steps p { font-size: .8125rem; line-height: 1.35; }
  .service__media { position: absolute; z-index: -1; inset: 28px 0 auto 28%; height: 270px; min-height: 0; margin: 0; opacity: .18; }
  .service__media::after { display: block; opacity: 1; mix-blend-mode: normal; background: linear-gradient(90deg,white,rgba(255,255,255,.5) 70%),linear-gradient(0deg,white,transparent 75%); }
  .service__media::before { display: none; }
  .service__cta { min-height: 44px; }
}

.ticks li {
  position: relative;
  padding-left: 30px;
  padding-block: 11px;
  border-bottom: 1px solid var(--paper-line);
  font-size: 0.98rem;
}
.on-dark .ticks li, .on-deep .ticks li { border-bottom-color: rgba(255,255,255,0.16); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 15px; height: 2px; background: var(--cat, var(--red));
}

@media (max-width: 620px) {
  #formats { padding-block: 24px; }
  #formats .sechead { gap: 12px; padding-top: 12px; }
  #formats .sechead__body > * + * { margin-top: 12px; }
  #formats .sechead .h2 { font-size: 28px; line-height: 1.1; }
  #formats .sechead .lede { font-size: 15px; line-height: 1.45; }
  #formats .formats__cards { margin-top: 16px; gap: 10px; }
  #formats .story { padding: 12px 16px; gap: 6px; border-radius: 12px; }
  #formats .ticks li { padding-block: 3px; padding-left: 22px; font-size: 14px; line-height: 1.4; }
  #formats .ticks li:last-child { border-bottom: 0; padding-bottom: 0; }
  #formats .ticks li::before { width: 12px; top: 12px; }
}

.facts { display: grid; gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; }
.facts div { background: #fff; padding: 22px 24px; }
.facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-light-mute); }
.facts dd { margin-top: 8px; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(3, 1fr); } }

/* --- 15. Steps / process ------------------------------------------------- */

.process { counter-reset: step; }
.process li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding-block: 28px;
  border-top: 1px solid var(--paper-line);
}
.on-dark .process li, .on-deep .process li { border-top-color: rgba(255,255,255,0.16); }
.process li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--red);
  padding-top: 5px;
}
.process h3 { margin-bottom: 8px; }

/* --- 16. Forms ----------------------------------------------------------- */

.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-light-mute);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.98rem;
  transition: border-color 0.22s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red);
}
.field__hint { font-size: 0.8rem; color: var(--on-light-mute); }
.field--pair { display: grid; gap: 20px; }
@media (min-width: 640px) { .field--pair { grid-template-columns: 1fr 1fr; } }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; line-height: 1.45; }
.consent input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--red); }

.form__note {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
  font-size: 0.86rem; line-height: 1.5;
}
.form__status { font-size: 0.9rem; font-weight: 600; }
.form__status[data-tone="ok"]  { color: var(--red); }

/* --- 17. Closing CTA ----------------------------------------------------- */

.cta { position: relative; overflow: hidden; }
.cta__inner {
  display: grid; gap: clamp(26px, 3vw, 44px);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
}
@media (max-width: 860px) { .cta__inner { grid-template-columns: 1fr; align-items: start; } }
.cta__mark {
  width: clamp(90px, 12vw, 150px);
  color: var(--red);
  opacity: 0.9;
  justify-self: end;
}
/* Stacked, the mark just hangs under the buttons — drop it on small screens. */
@media (max-width: 860px) { .cta__mark { display: none; } }

/* --- 18. Footer ---------------------------------------------------------- */

.footer { background: var(--ink-deep); color: var(--on-dark); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(48px, 6vw, 80px);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: repeat(2, 1fr); } }
/* Two columns rather than one. Stacked, the three link groups ran the footer
   to 940px on a phone -- a whole screen of nothing but links to get past. */
@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    padding-block: 36px;
  }
  .footer__brand { grid-column: auto; }
  .footer__brand svg, .footer__brand img { width: 148px; margin-bottom: 14px; }
  .footer h2 { margin-bottom: 10px; }
  .footer li + li { margin-top: 9px; }
  .footer a { font-size: 0.86rem; }
}

.footer h2 {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: 16px;
}
.footer li + li { margin-top: 11px; }
.footer a {
  text-decoration: none; font-size: 0.92rem; color: rgba(255,255,255,0.82);
  /* The address is one long unbreakable token; in a narrow column it ran past
     the column and gave the page a sideways scroll below 320px. */
  overflow-wrap: break-word;
}
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__brand svg, .footer__brand img { width: 172px; color: #fff; margin-bottom: 20px; }

.footer__base {
  display: flex; flex-wrap: wrap; gap: 16px 28px;
  justify-content: space-between; align-items: center;
  padding-block: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.8rem;
  color: var(--on-dark-mute);
}

/* --- 19. Reveal on scroll ------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}
/* Hand the element back to the normal paint order once it has arrived, so
   nothing stays promoted for the rest of the page's life. */
.reveal[data-shown="true"] { opacity: 1; transform: none; will-change: auto; }
.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .drawing .stroke { stroke-dashoffset: 0; }
  .drawing .word { opacity: 1; transform: none; }
  .roller__line[data-state="in"] { opacity: 1; transform: none; }
}

/* --- 20. Utilities ------------------------------------------------------- */

.stack > * + *   { margin-top: 20px; }
.stack-sm > * + *{ margin-top: 12px; }
/* Body-copy lists; the reset strips markers, so this puts a small red one back. */
.bullets li { position: relative; padding-left: 18px; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.stack-lg {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  min-width: 0;
}
.mt-lg { margin-top: clamp(32px, 4vw, 56px); }
.mt-md { margin-top: clamp(20px, 2.4vw, 32px); }
.center { text-align: center; }
.flexrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }