/* ============================================================
   Morley Management Group — Homepage
   Section layouts, the imagery treatment (duotone + grain), the
   motion layer, and every media query.
   ============================================================ */

/* ------------------------------------------------------------
   MOTION
   Design system spec: 140-380ms on cubic-bezier(0.22,0.61,0.36,1).
   Elements start hidden only once JS confirms it can observe them,
   so the page is fully readable with JS disabled.
   ------------------------------------------------------------ */
/* The reveal runs as an ANIMATION, not a transition, and that is
   deliberate. A `transition` shorthand here outranks the one on any
   component it lands on (.card and .path both transition box-shadow
   and border-color for their hover state), so it silently replaced
   them and every card hover snapped instead of easing. An animation
   occupies a different property and cannot collide.

   The keyframe declares only `from`, so it animates toward whatever
   the element's own rules say, and `backwards` holds the start state
   through the stagger delay. */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-visible {
  opacity: 1;
  animation: reveal var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms) backwards;
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
}

.js .rule {
  transform: scaleX(0);
  transition: transform var(--duration-slow) var(--ease-standard);
}
.js .rule.is-visible { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal].is-visible,
  .js .rule,
  .js .rule.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  /* Hero: land everything in its finished state, no travel */
  .js .hero__eyebrow,
  .js .hero__rotator,
  .js .hero__cta,
  .js .hero__credit { opacity: 1; transform: none; }
  .js .hero__title .ln > span { transform: none; }
  .hero__video { display: none; }
  /* Show only the first item instead of cycling */
  .hero__rotator .rot { height: auto; }
  .hero__rotator b:not(:first-child) { display: none; }
  .hero__marquee-track { animation: none; }
}

/* ------------------------------------------------------------
   TEXTURE
   Inline SVG grain. Breaks up the flat navy panels so large dark
   areas read as a surface rather than a fill.
   ------------------------------------------------------------ */
.hero::after,
.section--navy::after,
.section--navy-deep::after,
.belief::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--navy, .section--navy-deep { position: relative; overflow: hidden; }
.section--navy > .shell, .section--navy-deep > .shell { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   IMAGERY — duotone grade
   Navy in the shadows, warm cream in the highlights. Applied in
   CSS rather than baked into the files, so any photo swapped in
   later picks up the same grade with no re-editing.
   ------------------------------------------------------------ */
.duotone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--navy-900);
}
.duotone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A little original colour survives, so this grades rather than
     flattens. Full grayscale looks like a filter; this looks shot. */
  filter: grayscale(0.88) contrast(1.06);
}
.duotone::before,
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Multiply a warm cream: maps the whites to sand, keeps blacks black */
.duotone::before {
  background: var(--sand-100);
  mix-blend-mode: multiply;
}
/* Lighten with deep navy: maps the blacks to navy, keeps highlights */
.duotone::after {
  background: var(--navy-900);
  mix-blend-mode: lighten;
  opacity: 0.92;
}

/* Warm copper wash and inner hairline, layered above the duotone */
.duotone > .duotone__wash,
.duotone::marker { display: none; }
.duotone {
  box-shadow: inset 0 0 0 1px rgba(177, 83, 38, 0.55);
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  /* Transparent at rest. The hero is pulled up underneath it (see
     the negative margin below), so the header sits ON the hero and
     there is no seam to match. A flat colour could never match it
     anyway: the hero's top edge runs from #0A1C36 on the left to
     about #0C3355 on the right where the radial gradient peaks. */
  background: transparent;
  /* The hairline is a pseudo-element, not a border, so the header's
     flow height stays exactly --header-h and the negative margin
     below lines the hero up to the very top of the viewport. */
  border-bottom: 0;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: transparent;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled::after { background: rgba(241, 157, 106, 0.28); }
/* Once scrolled it is over ordinary content, so it becomes a real
   bar: near-solid navy, blurred, with the copper hairline */
.site-header.is-scrolled {
  background: rgba(10, 28, 54, 0.985);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(241, 157, 106, 0.28);
  box-shadow: 0 8px 28px rgba(8, 20, 40, 0.32);
}

/* Every page's first section rises behind the transparent header and
   pads its own content back down, so the dark field is continuous
   from the very top of the viewport. */
.hero,
.page-hero,
.legal-hero {
  margin-top: calc(-1 * var(--header-h));
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  transition: height var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled .site-header__inner { height: var(--header-h-scrolled); }

.site-header__logo { display: flex; align-items: center; }
/* One size, every scroll position, every breakpoint. The bar still
   contracts on scroll; the mark deliberately does not go with it, so
   the brand never reads as smaller than it started. */
.site-header__logo img {
  height: 52px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav > a:not(.btn) {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  position: relative;
  padding-block: 4px;
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--copper-300);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-standard);
}
.nav > a:not(.btn):hover { color: var(--copper-300); }
.nav > a:not(.btn):hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.8px;
  background: #fff;
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* ------------------------------------------------------------
   HERO
   Full-bleed film behind one column of type. The video is
   decorative, so the scrim is heavy enough that the copy stays
   legible no matter which frame is on screen, and the hero still
   works when the video never loads.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* The hero now spans the header too, so it fills the whole viewport
     and the marquee still lands on the fold. */
  min-height: min(100svh, calc(860px + var(--header-h)));
  color: #fff;
  background:
    radial-gradient(120% 90% at 78% -12%, var(--navy-800) 0%, var(--navy-900) 52%, var(--navy-950) 100%);
}

/* ---- Background film ---- */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity 1200ms var(--ease-out),
    transform 2000ms var(--ease-out);
}
.hero.has-video .hero__video video { opacity: 1; transform: scale(1); }

/* Holds the copy legible over any frame, and heavier on the left
   where the type sits */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 28, 54, 0.95) 0%, rgba(10, 28, 54, 0.88) 30%, rgba(10, 28, 54, 0.58) 62%, rgba(10, 28, 54, 0.42) 100%),
    linear-gradient(0deg, rgba(10, 28, 54, 0.88) 0%, rgba(10, 28, 54, 0.2) 40%, transparent 62%);
}

/* Faint blueprint grid, fading out toward the bottom. Pulled right
   back once the film is running so the two do not fight. */
.hero__grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity var(--duration-slow) var(--ease-standard);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
}
.hero.has-video .hero__grid-lines { opacity: 0.18; }

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  /* extra top padding clears the header the hero now sits under */
  padding-block: calc(clamp(2.5rem, 1.8rem + 3vw, 4rem) + var(--header-h))
                 clamp(2.5rem, 1.8rem + 3vw, 4rem);
}
.hero__copy { width: 100%; max-width: 760px; }

/* ---- Copy ---- */
.hero__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--copper-300);
  margin: 0 0 var(--space-5);
}

.hero__title {
  font-size: var(--step-6);
  font-weight: var(--weight-extra);
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: #fff;
  margin: 0 0 var(--space-5);
}
/* Each line gets its own mask so it can rise from behind the one above */
.hero__title .ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.06em;
}
.hero__title .ln > span { display: block; }

.hero__rotator {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--space-5);
}
.hero__rotator .rot {
  display: inline-block;
  overflow: hidden;
  height: 1.35em;
  vertical-align: bottom;
}
.hero__rotator .rot__list { display: block; }
.hero__rotator b {
  display: block;
  height: 1.35em;
  line-height: 1.35em;
  font-weight: var(--weight-bold);
  color: var(--copper-300);
  white-space: nowrap;
}

/* One quiet line of authorship, instead of the card of text that
   used to sit over the photo */
.hero__credit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: var(--space-8) 0 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}
.hero__credit b {
  color: #fff;
  font-weight: var(--weight-bold);
}
.hero__credit i {
  display: inline-block;
  width: 5px; height: 5px;
  flex: none;
  transform: rotate(45deg);
  background: var(--copper-400);
}

/* ---- Marquee ---- */
.hero__marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 28, 54, 0.55);
  padding-block: var(--space-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero__marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
}
.hero__marquee-track span {
  display: flex;
  align-items: center;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.hero__marquee-track i {
  display: inline-block;
  width: 6px; height: 6px;
  flex: none;
  margin: 0 22px;
  transform: rotate(45deg);
  background: var(--copper-400);
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---- Entrance + loops (scripted only, so no-JS renders finished) ---- */
.js .hero__eyebrow,
.js .hero__rotator,
.js .hero__cta,
.js .hero__credit {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.js .hero__title .ln > span {
  transform: translateY(112%);
  transition: transform 900ms var(--ease-out);
}

.js .hero.is-loaded .hero__title .ln > span { transform: none; }
.js .hero.is-loaded .hero__title .ln:nth-child(1) > span { transition-delay: 120ms; }
.js .hero.is-loaded .hero__title .ln:nth-child(2) > span { transition-delay: 230ms; }

.js .hero.is-loaded .hero__eyebrow,
.js .hero.is-loaded .hero__rotator,
.js .hero.is-loaded .hero__cta,
.js .hero.is-loaded .hero__credit { opacity: 1; transform: none; }
.js .hero.is-loaded .hero__eyebrow { transition-delay: 60ms; }
.js .hero.is-loaded .hero__rotator { transition-delay: 460ms; }
.js .hero.is-loaded .hero__cta     { transition-delay: 560ms; }
.js .hero.is-loaded .hero__credit  { transition-delay: 680ms; }

.hero.is-loaded .rot__list { animation: rotate 13s var(--ease-standard) infinite; }
@keyframes rotate {
  0%,   17%  { transform: translateY(0); }
  25%,  42%  { transform: translateY(-1.35em); }
  50%,  67%  { transform: translateY(-2.7em); }
  75%,  92%  { transform: translateY(-4.05em); }
  100%       { transform: translateY(-5.4em); }
}

/* ------------------------------------------------------------
   2. SIGNALS
   ------------------------------------------------------------ */
.signals { margin: 0 0 var(--space-8); }
.signals li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
}
.signals li p { margin: 0; font-size: var(--step-0); color: var(--navy-900); }

.signals__close {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
  padding-top: var(--space-6);
  border-top: 2px solid var(--copper-500);
}
.signals__close p {
  margin: 0;
  flex: 1 1 380px;
  font-size: var(--step-1);
  color: var(--navy-900);
  font-weight: var(--weight-medium);
}

/* ------------------------------------------------------------
   3. TWO WAYS TO START
   ------------------------------------------------------------ */
.start-card { padding: var(--space-8); }
.start-card > p:not(.card__kicker) { flex: 0 0 auto; }
.start-card__meta {
  margin: var(--space-5) 0 var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: var(--space-4);
}
.start-card__meta dt {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.start-card__meta dd {
  margin: 0;
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  color: var(--navy-900);
}
.start-card .link-arrow { margin-top: auto; }

.start-note {
  margin: var(--space-7) 0 0;
  font-size: var(--step-0);
  color: var(--text-muted);
  max-width: 64ch;
}

/* ------------------------------------------------------------
   BELIEF BANDS
   ------------------------------------------------------------ */
.belief {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 3.4vw, 4.75rem);
  text-align: center;
}
.belief .shell { position: relative; z-index: 1; }
.belief .divider-diamond { margin: 0 auto var(--space-5); }
.belief .divider-diamond::before,
.belief .divider-diamond::after { background: rgba(255, 255, 255, 0.22); }
.belief .divider-diamond i { background: var(--copper-300); }
.belief__line {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--weight-extra);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
}
.belief__line em { font-style: normal; color: var(--copper-300); }

.belief__line--inline {
  font-size: var(--step-2);
  letter-spacing: 0.03em;
  color: var(--navy-800);
  margin: 0 0 var(--space-5);
  text-align: left;
}
.belief__line--inline em { color: var(--copper-600); }

/* ------------------------------------------------------------
   4. PILLARS
   ------------------------------------------------------------ */
.pillars-figure {
  margin: 0 0 var(--space-8);
  border: 1px solid var(--copper-600);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand-50);
  box-shadow: var(--shadow-md);
}
.pillars-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* Each band is a full copy of the drawing, clipped to one third.
   Bands overlap by a quarter percent so no hairline of background can
   show between them. The overlap is invisible because both sides of
   the boundary are the same pixels of the same file. */
.pillars-band {
  position: absolute;
  inset: 0;
  transition:
    transform var(--duration-base) var(--ease-standard),
    filter var(--duration-base) var(--ease-standard);
}
.pillars-band--1 { clip-path: inset(0 66.5% 0 0); }
.pillars-band--2 { clip-path: inset(0 33.25% 0 33.25%); }
.pillars-band--3 { clip-path: inset(0 0 0 66.5%); }

/* contain, not cover: the drawing has labels top, sides and bottom,
   so it must never be cropped even if the file is swapped later */
.pillars-band img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* clip-path also clips hit testing, so each band is hoverable only
   over its own column */
.pillars-band:hover {
  transform: translateY(-7px);
  filter: drop-shadow(0 14px 22px rgba(177, 83, 38, 0.26)) saturate(1.08) contrast(1.03);
  z-index: 2;
}

/* ---- Entrance ------------------------------------------------
   Run as an animation, not a transition, so the stagger delay does
   not also apply to the hover transform above. */
.js .pillars-band { opacity: 0; }
.js .pillars-figure.is-visible .pillars-band {
  opacity: 1;
  animation: pillarRise 900ms var(--ease-out) backwards;
}
.js .pillars-figure.is-visible .pillars-band--1 { animation-delay: 140ms; }
.js .pillars-figure.is-visible .pillars-band--2 { animation-delay: 320ms; }
.js .pillars-figure.is-visible .pillars-band--3 { animation-delay: 500ms; }
@keyframes pillarRise {
  from { opacity: 0; transform: translateY(30px); }
}

/* ---- Copper sweep, once, after the pillars land --------------- */
.pillars-sweep {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 24%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-130%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(241, 157, 106, 0.14) 42%,
    rgba(247, 207, 174, 0.34) 50%,
    rgba(241, 157, 106, 0.14) 58%,
    transparent
  );
}
.pillars-figure.is-visible .pillars-sweep {
  animation: pillarSweep 2200ms var(--ease-out) 1150ms 1 both;
}
@keyframes pillarSweep {
  0%        { transform: translateX(-130%); opacity: 0; }
  18%       { opacity: 1; }
  82%       { opacity: 1; }
  100%      { transform: translateX(440%); opacity: 0; }
}

/* ---- Corner brackets, drawn last ------------------------------ */
.pillars-brackets {
  position: absolute;
  inset: 10px;
  z-index: 4;
  width: auto;
  height: auto;
  pointer-events: none;
  fill: none;
  stroke: var(--copper-500);
  stroke-width: 1.6;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}
.js .pillars-brackets path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.js .pillars-figure.is-visible .pillars-brackets path {
  animation: bracketDraw 700ms var(--ease-standard) 1500ms both;
}
@keyframes bracketDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .pillars-band { opacity: 1; animation: none; }
  .pillars-band:hover { transform: none; filter: none; }
  .pillars-sweep { display: none; }
  .js .pillars-brackets path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

.ticks { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding-top: var(--space-5); }
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: var(--navy-900);
  line-height: 1.5;
}
.card--on-dark .ticks li { color: rgba(255, 255, 255, 0.82); }


/* ------------------------------------------------------------
   6. APPROACH
   ------------------------------------------------------------ */
.approach__inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 0.9rem + 4.4vw, 4rem);
  align-items: start;
}
.approach__photo {
  aspect-ratio: 16 / 10;
  margin-top: var(--space-7);
}

.steps { display: flex; flex-direction: column; margin: 0; padding: 0; counter-reset: none; }
.steps > li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
}
.steps > li:first-child { border-top: 0; padding-top: 0; }
.steps__n {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--copper-400);
}
.steps h3 { font-size: var(--step-1); margin: 0 0 var(--space-2); }
.steps p { font-size: var(--step-0); margin: 0; }

/* Must out-specify `.steps > li`, which sets the 62px/1fr step grid.
   As a single class it lost, and the blockquote rendered inside the
   62px number column, one word per line. */
.steps > .steps__quote {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-6);
}
.steps__quote blockquote { margin: 0; }
.steps__quote p {
  font-size: var(--step-2);
  line-height: 1.5;
  font-style: italic;
  color: var(--navy-900);
  margin: 0 0 var(--space-3);
  max-width: 52ch;
}
.steps__quote cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--copper-600);
}
.steps__quote cite::before { content: "\2014\00a0"; }

/* ------------------------------------------------------------
   7. CASE STUDY
   ------------------------------------------------------------ */
.case__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.case__step {
  border-top: 3px solid var(--copper-500);
  padding-top: var(--space-5);
}
.case__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-600);
  margin: 0 0 var(--space-3);
}
.case__step p:not(.case__label) { font-size: var(--step-0); color: var(--navy-900); margin: 0; }
.case__close {
  margin: var(--space-8) 0 0;
  font-size: var(--step-2);
  font-style: italic;
  color: var(--navy-800);
  max-width: 60ch;
}

/* ------------------------------------------------------------
   8. STORIES
   ------------------------------------------------------------ */
.story { padding: var(--space-8); }
.story blockquote { margin: 0 0 var(--space-6); flex: 1; }
.story blockquote p {
  font-size: var(--step-0);
  line-height: 1.6;
  font-style: italic;
  color: var(--navy-900);
  margin: 0 0 var(--space-4);
}
.story blockquote p:first-child {
  font-size: var(--step-1);
  font-style: normal;
  font-weight: var(--weight-semibold);
}
.story blockquote p:last-child { margin-bottom: 0; }
.story figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
}
.story figcaption img {
  width: 52px; height: 52px;
  flex: none;
  object-fit: contain;
  border-radius: var(--radius-pill);
  background: #fff;
  padding: 4px;
  border: 1px solid var(--border-subtle);
}
.story figcaption span {
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  color: var(--navy-900);
}

/* ------------------------------------------------------------
   9. COST OF WAITING
   ------------------------------------------------------------ */
.waiting-card {
  border-left: 2px solid var(--copper-500);
  padding-left: var(--space-5);
}
.waiting-card h3 {
  font-size: var(--step-1);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-3);
}
.waiting-card p { font-size: var(--step--1); color: rgba(255, 255, 255, 0.76); margin: 0; }

.waiting__close {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
}
.waiting__close p {
  margin: 0;
  flex: 1 1 420px;
  font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.88);
}

/* ------------------------------------------------------------
   10. MEMBERSHIP
   ------------------------------------------------------------ */
.tier__price {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--navy-900);
  margin: 0 0 var(--space-2);
}
.tier__price small {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.membership__cta { margin-top: var(--space-7); }

/* ------------------------------------------------------------
   11. CONTACT
   ------------------------------------------------------------ */
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 0.9rem + 4.4vw, 4rem);
  align-items: start;
}
.contact__details { display: flex; flex-direction: column; gap: var(--space-3); }
.contact__details li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--step-0);
  color: var(--navy-900);
}
.contact__details a { color: var(--navy-900); border-bottom: 1px solid var(--copper-400); }
.contact__details a:hover { color: var(--copper-700); border-bottom-color: var(--copper-700); }

.contact__form-wrap {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--copper-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 0.9rem + 2.4vw, 2.5rem);
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--navy-800);
}
.field input,
.field textarea {
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--navy-900);
  background: var(--sand-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.field textarea { resize: vertical; min-height: 108px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--gray-400); }
.field input:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field textarea:focus {
  background: #fff;
  border-color: var(--copper-500);
  outline: none;
  box-shadow: 0 0 0 3px rgba(177, 83, 38, 0.14);
}
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--danger-600); background: var(--danger-100); }
.field__error {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--danger-600);
  min-height: 0;
}
.contact-form__note { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin: 0; }

.contact-sent { text-align: center; padding: var(--space-8) var(--space-2); }
.contact-sent__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--success-100);
  color: var(--success-600);
}
.contact-sent h3 { font-size: var(--step-2); margin: 0 0 var(--space-2); }
.contact-sent p { font-size: var(--step-0); max-width: 38ch; margin: 0 auto; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.78);
  padding-top: var(--space-10);
}
/* Copper hairline across the very top, brightest in the middle */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241, 157, 106, 0.55) 22%, rgba(241, 157, 106, 0.55) 78%, transparent);
}
.site-footer__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 90%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 46% at 18% 8%, rgba(177, 83, 38, 0.20) 0%, transparent 70%),
    radial-gradient(30% 40% at 82% 0%, rgba(13, 67, 107, 0.55) 0%, transparent 72%);
  animation: footerGlow 26s ease-in-out infinite alternate;
}
@keyframes footerGlow {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.09); }
}
.site-footer__inner { position: relative; z-index: 1; }

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: start;
}

.site-footer__brand { max-width: 360px; }
.site-footer__mark { height: 46px; width: auto; margin-bottom: var(--space-5); }
.site-footer__blurb {
  font-size: var(--step-0);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 var(--space-6);
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}
.footer-meta li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.66);
}
.footer-meta .tick { margin-top: 0; background: var(--copper-400); }

.socials { display: flex; gap: var(--space-3); }
.socials a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  transition:
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
/* Copper wipes up from the bottom rather than just switching colour */
.socials a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-copper);
  transform: translateY(101%);
  transition: transform var(--duration-base) var(--ease-standard);
}
.socials a svg { position: relative; z-index: 1; }
.socials a:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px);
}
.socials a:hover::before { transform: translateY(0); }

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 0.5rem + 2.6vw, 3rem);
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.site-footer__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-300);
  margin: 0 0 var(--space-4);
}
.site-footer__label i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.32);
}

.site-footer__nav a {
  position: relative;
  display: inline-block;
  padding: 7px 0 7px 0;
  font-size: var(--step-0);
  color: rgba(255, 255, 255, 0.74);
  transition:
    color var(--duration-fast) var(--ease-standard),
    padding-left var(--duration-base) var(--ease-standard);
}
/* Diamond slides in and the label steps aside to make room */
.site-footer__nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px; height: 5px;
  margin-top: -2px;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  background: var(--copper-400);
  transition: transform var(--duration-base) var(--ease-standard);
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: #fff;
  padding-left: 16px;
}
.site-footer__nav a:hover::before,
.site-footer__nav a:focus-visible::before { transform: rotate(45deg) scale(1); }

.site-footer__bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
/* Prototype used rgba(255,255,255,0.45) here, which fails contrast. */
.site-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
.site-footer__legal-link {
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--duration-fast) var(--ease-standard);
}
.site-footer__legal-link::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin: 0 12px 2px 0;
  transform: rotate(45deg);
  background: var(--copper-400);
}
.site-footer__legal-link::after {
  content: "";
  position: absolute;
  left: 16px; right: 0; bottom: -3px;
  height: 1px;
  background: var(--copper-400);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-standard);
}
.site-footer__legal-link:hover { color: var(--copper-300); }
.site-footer__legal-link:hover::after { transform: scaleX(1); }
.site-footer__legal-link[aria-current="page"] { color: var(--copper-300); }

.to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
.to-top:hover {
  background: var(--copper-500);
  border-color: var(--copper-500);
  color: #fff;
  transform: translateY(-3px);
}

/* Oversized wordmark cropped by the page edge */
.site-footer__watermark {
  position: relative;
  z-index: 0;
  margin-top: var(--space-8);
  overflow: hidden;
  height: clamp(52px, 9vw, 132px);
  pointer-events: none;
}
.site-footer__watermark img {
  width: 116%;
  max-width: none;
  margin-left: -8%;
  opacity: 0.13;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
}

/* ============================================================
   RESPONSIVE
   The prototype shipped with no media queries at all. Everything
   below is new.
   ============================================================ */

@media (max-width: 1080px) {
  .approach__inner { grid-template-columns: minmax(0, 1fr); }
  .approach__photo { max-width: 560px; }
  .case__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}

@media (max-width: 900px) {
  .hero { min-height: min(calc(100svh - var(--header-h)), 720px); }
  /* No film below this width (see initHeroVideo), so the scrim only
     has to sit over the gradient */
  .hero__scrim {
    background: linear-gradient(0deg, rgba(10, 28, 54, 0.8) 0%, transparent 55%);
  }
  .case__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__inner { grid-template-columns: minmax(0, 1fr); }
  .waiting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer__brand { max-width: none; }
}

/* Mobile navigation */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-950);
    border-bottom: 1px solid rgba(241, 157, 106, 0.28);
    padding: var(--space-4) var(--gutter-x) var(--space-7);
    box-shadow: 0 20px 40px rgba(8, 20, 40, 0.4);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--duration-base) var(--ease-standard),
      opacity var(--duration-base) var(--ease-standard),
      visibility 0s linear var(--duration-base);
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav > a:not(.btn) {
    font-size: var(--step-1);
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  .nav > a:not(.btn)::after { display: none; }
  .nav__cta { margin-top: var(--space-5); height: 48px; }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 640px) {
  .signals__close,
  .waiting__close { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  /* These paragraphs carry a flex-basis meant for a row (1 1 380px /
     1 1 420px). Once the container stacks, that basis applies to the
     HEIGHT and leaves a few hundred px of dead space under the text. */
  .signals__close p,
  .waiting__close p { flex: 0 1 auto; }
  .waiting-grid { grid-template-columns: minmax(0, 1fr); }
  .steps > li { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); }
  .story, .start-card { padding: var(--space-6); }
  .btn-row { width: 100%; }
  .btn-row .btn { flex: 1 1 100%; }
  .site-footer__top { gap: var(--space-7); }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .to-top { position: absolute; right: 0; bottom: 0; }
  .site-footer__bottom { position: relative; padding-right: 56px; }
  .hero__rotator { font-size: var(--step-1); }
  .hero__marquee-track i { margin: 0 14px; }
}


/* Print: strip the dark panels so it does not eat a toner cartridge */
@media print {
  .site-header, .nav-toggle, .hero__frame, .contact__form-wrap { display: none; }
  .hero, .section--navy, .section--navy-deep, .belief, .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .hero::after, .section--navy::after, .section--navy-deep::after, .belief::after { display: none; }
}