/* ============================================================
   LEEWAY SPACE — the Impact experience

   Page-scoped stylesheet, loaded only on /leeway-space/ and
   namespaced `lws-`. Colours come from the tokens in
   variables.css, so the light theme swaps with the rest of the
   site and nothing here needs a second palette.

   Nothing on this page is gated behind a control. Before and
   After are laid out together and the comparison is the whole
   point — a visitor should understand the difference from the
   shapes alone, without clicking or reading.

   The bars and dials animate purely in CSS: each carries its
   value as an inline --v, and the site's existing .reveal /
   .in-view observer flips them from zero to that value when the
   section is scrolled to. JavaScript only counts the numbers.
   ============================================================ */

.lws-main {
  position: relative;
  background-color: var(--charcoal);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
}

:root[data-theme="light"] .lws-main {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

.lws-shell {
  width: min(100%, var(--max-width));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ------------------------------------------------------------
   Section rhythm

   .lws-section deliberately declares no padding. These are real
   <section> elements, so base.css's own `section { padding: 110px 0 }`
   already applies — together with its 768px → 72px and 480px → 60px
   steps. Inheriting it is what keeps this page on the same rhythm as
   the rest of the site.

   The previous clamp(72px, 11vh, 132px) keyed off viewport *height*
   while the site keys off width, so the two drifted apart: 132px on a
   tall monitor, and 89px on a 375x812 phone where every other page
   was using 60px. Anything needing a different step below states it
   against the same three numbers.
------------------------------------------------------------ */
.lws-section--tight { padding: 72px 0; }

.lws-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--purple-soft);
  margin-bottom: 18px;
}

.lws-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.65rem, 3.9vw, 2.85rem);
  line-height: 1.16;
  color: var(--ink);
  max-width: 20ch;
}

.lws-lede {
  color: var(--ink-muted);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  max-width: 58ch;
  margin-top: 16px;
}

.lws-note {
  margin-top: 24px;
  color: var(--ink-faint);
  font-size: 0.78rem;
  line-height: 1.55;
  max-width: 62ch;
}

/* ------------------------------------------------------------
   Scroll reveal — reuses the observer in animations.js
------------------------------------------------------------ */
.has-js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.has-js .reveal.in-view { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Hero
------------------------------------------------------------ */
.lws-hero {
  padding: 132px 0 56px;
  text-align: center;
  position: relative;
  /* The glow is inset past the section on both sides. Clipped here
     rather than with overflow-x on .lws-main, because a single
     hidden axis computes the other to auto — which would quietly
     turn the whole main element into a scroll container. */
  overflow: hidden;
}

.lws-hero-glow {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 76%;
  background:
    radial-gradient(circle at 30% 20%, rgba(136, 93, 206, 0.28), transparent 60%),
    radial-gradient(circle at 75% 10%, rgba(253, 233, 98, 0.16), transparent 55%);
  filter: blur(14px);
  pointer-events: none;
  animation: lws-drift 14s ease-in-out infinite;
}

@keyframes lws-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-3%, 3%) scale(1.06); }
}

.lws-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--purple-soft);
  margin-bottom: clamp(20px, 3vh, 30px);
}

.lws-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  animation: lws-dot-pulse 2s ease-in-out infinite;
}

/* Local rather than borrowed: this used to reuse the nav pill's
   keyframe, and the pill has been replaced by the Impact switch. */
@keyframes lws-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 233, 98, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(253, 233, 98, 0); }
}

.lws-hero h1 {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.05rem, 5.6vw, 3.7rem);
  line-height: 1.12;
  color: var(--ink);
  max-width: 17ch;
  margin: 0 auto 20px;
}

.lws-hero p {
  position: relative;
  z-index: 1;
  color: var(--ink-muted);
  font-size: clamp(0.98rem, 1.5vw, 1.06rem);
  line-height: 1.65;
  max-width: 56ch;
  margin: 0 auto;
}

/* ============================================================
   SPLIT — Before and After, side by side, always visible
   ============================================================ */
.lws-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--charcoal-line);
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lws-side {
  background: var(--charcoal);
  padding: clamp(24px, 3.4vw, 40px);
}

/* The After column carries a faint warm ground, so the two sides
   read as different places before a single word is read. */
.lws-side--after {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(253, 233, 98, 0.07), transparent 62%),
    var(--charcoal);
}

.lws-side-head {
  display: flex;
  align-items: center;
  /* The dot and the heading share a line; the description has
     width:100% and wraps onto its own. Without wrapping enabled it
     competes with the heading for the row and folds "Before Leeway"
     onto two lines. */
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: clamp(18px, 2.6vh, 26px);
  border-bottom: 1px solid var(--charcoal-line);
}

.lws-side-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--ink-faint);
}
.lws-side--after .lws-side-dot {
  background: var(--yellow);
  box-shadow: 0 0 10px 1px rgba(253, 233, 98, 0.65);
}

.lws-side-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  color: var(--ink);
}

.lws-side-head p {
  width: 100%;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.lws-side-items { display: grid; gap: clamp(14px, 2vh, 20px); }

.lws-item {
  position: relative;
  padding-left: 42px;
  min-height: 30px;
}

.has-js .lws-item {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.has-js .lws-split.in-view .lws-item { opacity: 1; transform: none; }

.lws-item-icon {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface-sunken);
  color: var(--ink-faint);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.lws-item-icon svg { width: 15px; height: 15px; }
.lws-side--after .lws-item-icon { color: var(--yellow); }

.lws-item h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 4px;
  padding-top: 5px;
}

.lws-item p {
  color: var(--ink-muted);
  font-size: 0.87rem;
  line-height: 1.55;
}

/* ============================================================
   COMPARISON BAR CHART

   The centrepiece. Two bars per metric — before and after —
   so the gap between them is the message, readable at a glance
   with the labels ignored entirely.
   ============================================================ */
.lws-chart {
  margin-top: 40px;
  display: grid;
  gap: clamp(26px, 3.6vh, 38px);
}

.lws-group { display: grid; gap: 10px; }

.lws-group-name {
  font-family: var(--font-body);
  font-size: clamp(0.86rem, 1.5vw, 0.95rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.lws-bar {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
}

.lws-bar-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lws-bar-track {
  position: relative;
  height: 12px;
  border-radius: 0;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

/* scaleX rather than width — a compositor property, so ten bars
   animating together cost no layout. --v (0..1) is inline on the
   row; the bar rests at zero until .in-view arrives. */
.lws-bar-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: inherit;
  transition: transform 1.15s cubic-bezier(.22, .9, .3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.has-js .lws-chart.in-view .lws-bar-fill { transform: scaleX(var(--v, 0)); }

/* Without JS the observer never runs, so show the finished chart. */
html:not(.has-js) .lws-bar-fill { transform: scaleX(var(--v, 0)); }

.lws-bar--before .lws-bar-fill {
  background: linear-gradient(90deg, #4a4a4a, var(--ink-faint));
}
:root[data-theme="light"] .lws-bar--before .lws-bar-fill {
  background: linear-gradient(90deg, #C9C9C9, #9E9E9E);
}

.lws-bar--after .lws-bar-fill {
  background: linear-gradient(90deg, var(--purple), var(--yellow));
  box-shadow: 0 0 18px -3px rgba(253, 233, 98, 0.65);
}

.lws-bar-value {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.lws-bar--after .lws-bar-value { color: var(--yellow); }

/* The gain, printed at the end of the pair. */
.lws-group-delta {
  justify-self: end;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--purple-soft);
}

.lws-group-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* ============================================================
   PAIRED DIALS — the headline score, before beside after
   ============================================================ */
.lws-dials {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 4vw, 44px);
  margin-top: 40px;
}

.lws-dial {
  position: relative;
  width: min(100%, 220px);
  margin: 0 auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.lws-dial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* 12 o'clock start */
  overflow: visible;
}

.lws-dial-track { fill: none; stroke: var(--charcoal-line); stroke-width: 7; }

/* pathLength="100" turns the dash maths into plain percentages —
   no circumference arithmetic that breaks if the radius changes. */
.lws-dial-arc {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;              /* empty until revealed */
  transition: stroke-dashoffset 1.3s cubic-bezier(.22, .9, .3, 1);
}
.has-js .lws-dials.in-view .lws-dial-arc {
  stroke-dashoffset: calc(100 - var(--v, 0));
}
html:not(.has-js) .lws-dial-arc { stroke-dashoffset: calc(100 - var(--v, 0)); }

.lws-dial--before .lws-dial-arc { stroke: var(--ink-faint); }
.lws-dial--after .lws-dial-arc {
  stroke: url(#lwsDialGradient);
  filter: drop-shadow(0 0 8px rgba(253, 233, 98, 0.55));
  transition-delay: 0.25s;
}

.lws-dial-readout { text-align: center; }

.lws-dial-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 3.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.lws-dial--after .lws-dial-num { color: var(--yellow); }

.lws-dial-state {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lws-dials-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-soft);
}
.lws-dials-arrow svg { width: 30px; height: 30px; }

.lws-score-stop-1 { stop-color: var(--purple); }
.lws-score-stop-2 { stop-color: var(--yellow); }

/* ============================================================
   THE DIFFERENCE — comparison rows
   ============================================================ */
.lws-diff-list {
  margin-top: 40px;
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lws-diff-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  padding: clamp(16px, 2.4vw, 22px) clamp(16px, 2.6vw, 30px);
  border-bottom: 1px solid var(--charcoal-line);
  transition: background 0.4s var(--ease);
}

.lws-diff-row:last-child { border-bottom: 0; }
.lws-diff-row:hover { background: rgba(255, 255, 255, 0.022); }
:root[data-theme="light"] .lws-diff-row:hover { background: rgba(0, 0, 0, 0.022); }

.has-js .lws-diff-row {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
              background 0.4s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.has-js .lws-diff-list.in-view .lws-diff-row { opacity: 1; transform: none; }

.lws-diff-side {
  font-family: var(--font-body);
  font-size: clamp(0.86rem, 1.5vw, 0.96rem);
  line-height: 1.45;
}

.lws-diff-before { color: var(--ink-faint); }
.lws-diff-after { color: var(--yellow); font-weight: 600; }

.lws-diff-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-soft);
}
.lws-diff-arrow svg { width: 17px; height: 17px; }

/* The medium step sits ABOVE the captions, not below them. With the
   gap on .lws-diff-list instead, the "Before / After" headers ended up
   flush against the lede paragraph (0px) and floating 40px clear of
   the rows they label — reading as part of the prose rather than as
   the table's own header. */
.lws-diff-heads {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: clamp(10px, 2vw, 24px);
  padding: 0 clamp(16px, 2.6vw, 30px) 10px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lws-diff-heads span:nth-child(2) { visibility: hidden; }

/* Already spaced by the captions above it. */
.lws-diff-heads + .lws-diff-list { margin-top: 0; }

/* ============================================================
   WHAT WE CHANGE — six cards
   ============================================================ */
.lws-change-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 1px;
  background: var(--charcoal-line);
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lws-change {
  position: relative;
  background: var(--charcoal);
  padding: clamp(26px, 3.6vw, 36px);
  overflow: hidden;
  transition: background 0.45s var(--ease);
}

.has-js .lws-change {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
              background 0.45s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.has-js .lws-change-grid.in-view .lws-change { opacity: 1; transform: none; }

.lws-change::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  background: radial-gradient(closest-side,
              rgba(136, 93, 206, 0.16), transparent);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  animation: lws-wash 18s ease-in-out infinite;
  pointer-events: none;
}
.lws-change:hover::before { opacity: 1; }

@keyframes lws-wash {
  0%, 100% { transform: translate3d(-8%, -6%, 0) scale(1); }
  50%      { transform: translate3d(8%, 6%, 0) scale(1.12); }
}

.lws-change-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.lws-change-num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  transition: color 0.45s var(--ease);
}
.lws-change:hover .lws-change-num { color: var(--purple-soft); }

.lws-change-icon {
  display: inline-flex;
  color: var(--purple-soft);
  transition: transform 0.5s var(--ease), color 0.45s var(--ease);
}
.lws-change-icon svg { width: 21px; height: 21px; }
.lws-change:hover .lws-change-icon {
  transform: translateY(-3px) rotate(-4deg);
  color: var(--yellow);
}

.lws-change h3 {
  font-family: var(--font-display);
  font-size: 1.14rem;
  color: var(--ink);
  margin-bottom: 10px;
}

.lws-change-from {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.lws-change-from b { color: var(--ink); font-weight: 600; }
.lws-change-from i { font-style: normal; color: var(--ink-faint); }

/* ============================================================
   STATEMENT
   ============================================================ */
.lws-statement {
  position: relative;
  text-align: center;
  /* The one section allowed to breathe wider than the 110px standard —
     it is a single sentence carrying the whole page's argument. Still
     a fixed step, so it scales with the same breakpoints as the rest. */
  padding: 140px 0;
  overflow: hidden;
}

.lws-statement-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 60% at 50% 46%, rgba(136, 93, 206, 0.24), transparent 68%),
    radial-gradient(38% 46% at 50% 92%, rgba(253, 233, 98, 0.12), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  animation: lws-drift 18s ease-in-out infinite;
}

.lws-statement h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6.4vw, 4.15rem);
  line-height: 1.08;
  color: var(--ink);
  max-width: 15ch;
  margin: 0 auto;
  letter-spacing: -0.015em;
}

.lws-statement p {
  position: relative;
  margin: clamp(22px, 3.4vh, 32px) auto 0;
  max-width: 54ch;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.62;
}

.lws-statement-sign {
  position: relative;
  display: inline-block;
  /* Same 40px medium step as every other description -> content gap. */
  margin-top: 40px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yellow);
}

/* ============================================================
   FINAL CTA
   ============================================================ */
/* No padding of its own — inherits the site's section scale. */
.lws-cta { text-align: center; }
.lws-cta h2 { margin: 0 auto; max-width: 18ch; }
.lws-cta .lws-lede { margin-left: auto; margin-right: auto; }

.lws-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
}

.lws-cta-actions .btn { gap: 9px; }
.lws-cta-actions .btn span {
  display: inline-block;
  transition: transform 0.32s var(--ease);
}
.lws-cta-actions .btn:hover span { transform: translateX(4px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* Before above After, in that order — the story only works read
     in sequence, and side-by-side columns this narrow would put
     two words on every line. */
  .lws-split { grid-template-columns: 1fr; }
}

/* The two sections that sit off the 110px standard step down on the
   same breakpoints base.css uses, so the whole page compresses in
   time with every other page rather than on its own schedule. */
@media (max-width: 768px) {
  .lws-hero { padding: 104px 0 40px; }
  .lws-section--tight { padding: 48px 0; }
  .lws-statement { padding: 96px 0; }
}

@media (max-width: 480px) {
  .lws-hero { padding: 92px 0 32px; }
  .lws-section--tight { padding: 40px 0; }
  .lws-statement { padding: 76px 0; }
}

@media (max-width: 640px) {
  .lws-dials {
    grid-template-columns: 1fr;
    gap: clamp(18px, 3vh, 28px);
  }
  /* The arrow turns to point down the stack rather than across it. */
  .lws-dials-arrow svg { transform: rotate(90deg); }
  .lws-dial { width: min(74%, 200px); }

  .lws-bar {
    grid-template-columns: 48px minmax(0, 1fr) 38px;
    gap: 9px;
  }
  .lws-bar-label { font-size: 0.6rem; letter-spacing: 0.1em; }

  .lws-diff-heads { display: none; }
  .lws-diff-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px clamp(16px, 4vw, 22px);
  }
  .lws-diff-arrow { justify-content: flex-start; }
  .lws-diff-arrow svg { transform: rotate(90deg); }

  .lws-statement h2 { max-width: 18ch; }
  .lws-cta-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   REDUCED MOTION

   The decoration goes; the data does not. Bars and dials jump
   straight to their values so the comparison is still there to
   be read — it simply doesn't travel to get there.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lws-hero-glow,
  .lws-statement-glow,
  .lws-eyebrow-dot,
  .lws-change::before { animation: none; }

  .has-js .reveal,
  .has-js .lws-item,
  .has-js .lws-diff-row,
  .has-js .lws-change {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lws-bar-fill,
  .lws-dial-arc { transition: none; transition-delay: 0ms; }

  /* Still needs the end state, since .in-view is what applies it. */
  .lws-bar-fill { transform: scaleX(var(--v, 0)); }
  .lws-dial-arc { stroke-dashoffset: calc(100 - var(--v, 0)); }
}