/* =============================================================
   Page-wide rhythm.
   About stacks six sections, so the shared paddings compound: two
   110px pads met at every seam (220px of dead space), under 96px
   beneath every heading. Everything below is scoped to this page so
   Home and Our Work keep their own, roomier rhythm.
   ============================================================= */
.sec--tight { padding: clamp(48px, 5.4vw, 76px) 0; }

/* headings sit closer to the content they introduce */
.sec--tight .section-head { margin-bottom: clamp(32px, 4vw, 56px); }

/* the banner is a strip, not a stage — it needs to clear the fixed
   nav and little else */
.subhero--small { padding: clamp(104px, 14vh, 132px) 0 clamp(28px, 3.4vw, 40px); }

/* =============================================================
   Vision & Mission — two photography-led rows that alternate
   text / image, so each statement gets a full stage instead of
   sharing one flat divided band.
   ============================================================= */
.mv__rows {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  margin-top: clamp(24px, 3vw, 40px);
}
.mv__body { max-width: 46ch; }

/* =============================================================
   Premium, image-free treatment (client asked to drop the photography
   from this section and present Vision/Mission as an editorial
   typographic split instead) — an echo of the hairline-ledger language
   used elsewhere on the site (Track Record, Book a Meeting channels).
   ============================================================= */
.mv__rows--premium {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 80px);
  margin-top: clamp(24px, 3vw, 40px);
}
.mv__rows--premium .mv__row {
  border-left: 1px solid rgba(31, 27, 46, 0.16);
  padding-left: clamp(26px, 3vw, 40px);
}
.mv__rows--premium .mv__row--vision {
  border-left: 0;
  padding-left: 0;
}
.mv__rows--premium .mv__body { max-width: none; }
.mv__rows--premium .mv__row--vision .mv__text {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.3;
}

/* ---- Values & Approach, merged into this section: a simple horizontal
   ledger — title + description per value, no orbit, no icons. ---- */
.mv__values {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid rgba(31, 27, 46, 0.16);
}
.mv__values-head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.mv__values-head .display { font-size: clamp(28px, 3vw, 40px); }
.vlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}
.vlist__item {
  padding-top: 16px;
  border-top: 2px solid var(--plum);
}
.vlist__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 23px);
  color: var(--ink);
  margin: 0 0 8px;
}
.vlist__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--soft-charcoal);
  margin: 0;
}
@media (max-width: 700px) {
  .mv__rows--premium { grid-template-columns: 1fr; gap: 34px; }
  .mv__rows--premium .mv__row {
    border-left: 0;
    padding-left: 0;
    padding-top: clamp(22px, 4vw, 30px);
    border-top: 1px solid rgba(31, 27, 46, 0.16);
  }
  .mv__rows--premium .mv__row--vision { border-top: 0; padding-top: 0; }
  .vlist { grid-template-columns: 1fr; gap: 26px; }
}

/* Section title reads as solid black — the shared .display em gradient is
   overridden here, including the -webkit-text-fill-color that would
   otherwise keep the italic half transparent. */
.mv .display,
.mv .display em {
  color: #000;
  background: none;
  -webkit-text-fill-color: #000;
  filter: none;
}

.mv__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--soft-charcoal);
  margin-bottom: 18px;
}
.mv__row--vision .mv__label { color: var(--plum); }
/* Vision and Mission read as one pair — identical family, size, weight
   and colour, so neither statement outranks the other. */
.mv__text {
  font-family: var(--font-serif);
  font-size: clamp(25px, 2.4vw, 33px);
  line-height: 1.38;
  color: #000;
  margin: 0 0 20px;
}
.mv__row .mv__text:last-child { margin-bottom: 0; }
.mv__beats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.mv__beats li {
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--soft-charcoal);
}
.mv__beats li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 1px;
  background: var(--gradient-signature);
}
@media (max-width: 760px) {
  .mv__body { max-width: none; }
}

/* =============================================================
   About page — Our Journey, centred alternating timeline
   A golden signature thread runs down the centre; chapters sit to
   its left or right in turn, each igniting its node as it's reached.
   ============================================================= */

/* ---- Track: thread + chapters ---- */
.jny__track { position: relative; margin-top: clamp(18px, 2.4vw, 34px); overflow: clip; }

/* ---- Decorative brand mark, one per chapter, living INSIDE the chapter
   so it centres against that chapter's card rather than being placed by
   hand-tuned percentages of the whole track. It fills the empty half
   opposite the card and centres on both axes. Desktop only. ---- */
.jny__mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: clamp(150px, 17vw, 280px);
  height: auto;
  opacity: 0.5;
  filter: brightness(0) invert(1);
  z-index: 0;
  pointer-events: none;
}
/* card on the left → mark centred in the right half, and vice versa */
.jny__chapter--left  .jny__mark { left: 75%; }
.jny__chapter--right .jny__mark { left: 25%; }
@media (max-width: 780px) {
  .jny__mark { display: none; }
}

.jny__thread {
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 1px;
  transform: translateX(-50%);
  background: var(--hairline);
}
.jny__thread-fill {
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 0%;
  background: var(--gradient-signature);
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(242, 211, 157, 0.35);
}
/* the comet tip that leads the thread down the page */
.jny__thread-fill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--peach);
  box-shadow: 0 0 16px 4px rgba(242, 211, 157, 0.45);
}

.jny__chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(44px, 6vh, 76px);
}

.jny__chapter {
  position: relative;
  display: flex;
  opacity: 0.32;
  transition: opacity 0.6s var(--ease-out);
}
.jny__chapter--left { justify-content: flex-start; }
.jny__chapter--right { justify-content: flex-end; }
.jny__chapter.is-active { opacity: 1; }
.jny__card { width: calc(50% - 40px); }

/* ---- Mobile: single column, thread and cards both on the left ---- */
@media (max-width: 780px) {
  .jny__thread { left: 6px; transform: none; }
  .jny__chapter,
  .jny__chapter--left,
  .jny__chapter--right { justify-content: flex-start; padding-left: clamp(36px, 8vw, 52px); }
  .jny__card { width: 100%; }
}

/* entrance: label, title, copy rise in sequence the first time seen */
.jny__label,
.jny__title,
.jny__copy {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}
.jny__title { transition-delay: 0.09s; }
.jny__copy { transition-delay: 0.18s; }
.jny__chapter.is-seen .jny__label,
.jny__chapter.is-seen .jny__title,
.jny__chapter.is-seen .jny__copy {
  opacity: 1;
  transform: translateY(0);
}

/* the diamond node that ignites when its chapter is reached — always
   dead-centre on the thread, regardless of which side the card sits */
.jny__node {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg) scale(1);
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  transition:
    background-color 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.jny__chapter.is-active .jny__node {
  background: var(--peach);
  border-color: var(--peach);
  box-shadow: 0 0 18px 3px rgba(242, 211, 157, 0.5);
  transform: translateX(-50%) rotate(45deg) scale(1.2);
}
@media (max-width: 780px) {
  .jny__node { left: 1px; transform: rotate(45deg) scale(1); }
  .jny__chapter.is-active .jny__node { transform: rotate(45deg) scale(1.2); }
}

.jny__label {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--peach);
}
.jny__title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(25px, 2.5vw, 33px);
  line-height: 1.18;
  color: var(--text-primary);
  max-width: 26ch;
}
.jny__copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 56ch;
}

/* gentle hover: reading candlelight on the node */
.jny__chapter:hover .jny__node {
  border-color: var(--peach);
  box-shadow: 0 0 12px 2px rgba(242, 211, 157, 0.35);
}

/* ---- Chapter photograph: rises last, strung on the same thread ---- */
.jny__media {
  margin: clamp(22px, 3vw, 30px) 0 0;
  max-width: 560px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 70px -45px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: 0.27s;
}
.jny__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) brightness(0.9);
}
.jny__chapter.is-seen .jny__media {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Reduced motion: everything legible, nothing moves ---- */
@media (prefers-reduced-motion: reduce) {
  .jny__label,
  .jny__title,
  .jny__copy,
  .jny__media,
  .jny__node,
  .jny__chapter { transition: none; }
  .jny__label,
  .jny__title,
  .jny__copy,
  .jny__media {
    opacity: 1;
    transform: none;
  }
  .jny__chapter { opacity: 1; }
  .jny__thread-fill { height: 100% !important; }
  .jny__thread-fill::after { display: none; }
}

/* =============================================================
   Built To Inspire — the brand film, full width and uncropped.
   The clip is 1920×1080 on the same deep plum as this section, so
   it is shown at its native 16:9 and bled into the background
   rather than punched into a circle (which cropped it hard and
   cost a lot of detail).
   ============================================================= */
.brandfilm {
  position: relative;
  margin: clamp(22px, 2.8vw, 36px) auto clamp(20px, 2.6vw, 32px);
  width: 100%;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  /* the clip's own backdrop — so the cross-fade lands on the same
     plum instead of flashing through to the page */
  background: var(--bg-deep);
}
.brandfilm__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* fades across the loop seam so the reset is never a hard cut */
  opacity: 1;
  transition: opacity 0.55s var(--ease-out);
}
.brandfilm.is-cycling .brandfilm__video { opacity: 0; }
/* .lede has a max-width but no auto margins, so on its own it sits flush
   left inside this centered section — text-align:center only centers the
   lines within that off-center box, not the box itself. */
.brandfilm__caption { margin-inline: auto; }
/* feather the panel into the section — the clip's own background is
   the same plum, so the edges should not read as a hard box */
.brandfilm::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 70px 34px var(--bg-deep);
}
@media (max-width: 620px) {
  .brandfilm { border-radius: calc(var(--radius) * 0.7); }
  .brandfilm::after { box-shadow: inset 0 0 40px 20px var(--bg-deep); }
}