/* ===========================================================
   refine.css — the last word on rhythm, alignment and surface

   Loaded after journey.css. Everything here corrects a specific
   defect rather than restating the system; where it overrides,
   the comment says what it is overriding and why.
   =========================================================== */

/* -----------------------------------------------------------
   1. SECTIONS THAT PAINT THEIR OWN SURFACE

   journey.css collapses the top padding of every consecutive
   section so two gaps never stack. That is right for two sections
   on the same ground and wrong the moment a section paints its
   own: the tint then starts hard against the content, with a full
   gap below it, and the block reads top-heavy. A painted section
   is padded evenly on both sides, and the section after it gets
   its own top padding back because the tint has already closed.
   ----------------------------------------------------------- */
.section[style*="background"] { padding-block: var(--section-y) !important; }
.section[style*="background"] + .section { padding-top: var(--section-y); }
.section[style*="background"] + .section[style*="background"] { margin-top: var(--s3); }

/* A painted section is an inset panel, so it needs side breathing
   room from the viewport edge as well as air above and below. */
.section[style*="border-radius"] {
  width: min(100% - (var(--pad-x) * .6), 1560px);
  margin-inline: auto;
}

/* -----------------------------------------------------------
   2. FOOTER SOCIALS

   --coral resolves to navy, so the hover fill matched the footer
   and the ring vanished under the cursor. On a dark ground the
   hover inverts to cream instead.
   ----------------------------------------------------------- */
.socials a:hover,
.socials a:focus-visible {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--navy);
  transform: translateY(-3px);
}

/* -----------------------------------------------------------
   3. THE SIGN-OFF

   The scanned-script look was doing the site no favours. Emma's
   name is now set: display serif, a hairline above it, her role
   underneath in the same mono the rest of the site labels with.
   ----------------------------------------------------------- */
.signature { display: none !important; }

.sign-off {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--cream-line);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-width: 22rem;
}
.sign-off .name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--navy);
}
.sign-off .role {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
}
.sign-off + .link-arrow { display: inline-flex; margin-top: var(--s3); }

/* -----------------------------------------------------------
   4. THE DETAIL LIST

   Replaces the icon-tile contact rows. Grey rounded squares with
   stock line icons in them read like a template; a ruled list
   with a mono label and the value set plainly reads like the rest
   of this site, which labels everything in mono already.
   ----------------------------------------------------------- */
.detail-list {
  margin-top: var(--s5);
  border-top: 1px solid var(--cream-line);
}
.detail-list .detail {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding-block: .95rem;
  border-bottom: 1px solid var(--cream-line);
}
.detail-list dt {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
}
.detail-list dd {
  margin: 0;
  font-size: .96rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.detail-list dd a {
  color: var(--navy);
  border-bottom: 1px solid var(--cream-line);
  transition: border-color .25s var(--ease);
}
.detail-list dd a:hover { border-color: var(--navy); }
@media (max-width: 560px) {
  .detail-list .detail { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}

/* -----------------------------------------------------------
   5. THE HERO PANEL FITS THE SCREEN, AND NEVER CLIPS

   The panel capped itself at 86vh and let the copy column scroll
   inside, so the homepage hero — which carries a form — was cut
   off mid-field with a scrollbar nobody would find. Height is now
   driven the other way round: the card is at least a screenful, so
   the short heroes fill the viewport, and it grows past that when
   the copy genuinely needs the room.
   ----------------------------------------------------------- */
.frame-card {
  max-height: none;
  min-height: min(760px, calc(100svh - clamp(80px, 8vw, 104px)));
}
.frame-copy { overflow: visible; }
/* The photograph must not decide how tall the hero is. A portrait
   image in a column with no fixed height reports its natural height
   and the grid row grows to match — which is how a hero with four
   lines of copy ended up 860px tall. Taking the image out of flow
   lets the copy set the height and the photograph crop to it. */
.frame-media { min-height: 0; position: relative; }
.frame-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The copy column sets its own measure so the fields never run to the
   full half-width and leave the heading looking narrow beside them. */
.frame-copy > * { max-width: 34rem; }
.frame-copy .hero-form { max-width: 34rem; width: 100%; }

@media (max-width: 900px) {
  .frame-card { min-height: 0; }
}

/* -----------------------------------------------------------
   6. THE SELECT, BUILT RATHER THAN BORROWED

   The native control opened an operating-system menu — on macOS a
   dark translucent panel in the system font. forms.js swaps in a
   listbox and keeps the real <select> for the value; this dresses
   it in the site's own type. Without JS the native control is still
   there and still styled, so nothing is lost.
   ----------------------------------------------------------- */
.sel { position: relative; }
.sel .sel-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  inset: 0;
}
.sel-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: .8em .9em;
  border: 1px solid var(--cream-line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.sel-btn:hover { border-color: color-mix(in srgb, var(--navy) 34%, transparent); }
.sel.is-open .sel-btn,
.sel-btn:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 10%, transparent);
}
.sel.is-placeholder .sel-value { color: var(--stone); }
.sel-caret {
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--navy);
  border-bottom: 1.6px solid var(--navy);
  transform: rotate(45deg) translate(-2px, -2px);
  flex: none;
  transition: transform .25s var(--ease);
}
.sel.is-open .sel-caret { transform: rotate(-135deg) translate(-3px, -3px); }

.sel-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + .4rem);
  left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--cream-line);
  border-radius: var(--r-sm);
  box-shadow: 0 24px 60px -28px rgba(20, 35, 42, .5);
  padding: .35rem;
  max-height: 17rem;
  overflow-y: auto;
}
.sel-opt {
  padding: .62em .7em;
  border-radius: 8px;
  cursor: pointer;
  font-size: .96rem;
  line-height: 1.35;
  transition: background .15s var(--ease);
}
.sel-opt:hover { background: color-mix(in srgb, var(--navy) 6%, transparent); }
.sel-opt.is-on {
  background: var(--navy);
  color: var(--cream);
}
.sel-opt[aria-disabled="true"] { color: var(--stone); cursor: default; }
.sel-opt[aria-disabled="true"]:hover { background: transparent; }

/* the dark panels carry the same control, inverted */
.panel-dark .sel-btn, .frame--dark .sel-btn {
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  border-color: color-mix(in srgb, var(--cream) 22%, transparent);
  color: var(--cream);
}
.panel-dark .sel-caret { border-color: var(--cream); }

/* -----------------------------------------------------------
   7. THE BOOKING CALENDAR

   "Book a free call" asked for a message and left the visitor to
   propose a time. It now offers Emma's actual availability: a
   month, the days she takes calls, and the ten-minute slots inside
   her stated hours.
   ----------------------------------------------------------- */
.booking {
  border: 1px solid var(--cream-line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
.booking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--cream-line);
}
.booking-head strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.booking-nav { display: flex; gap: .4rem; }
.booking-nav button {
  width: 32px; height: 32px;
  border: 1px solid var(--cream-line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--navy);
  transition: background .2s var(--ease), opacity .2s var(--ease);
}
.booking-nav button:hover:not(:disabled) { background: color-mix(in srgb, var(--navy) 7%, transparent); }
.booking-nav button:disabled { opacity: .3; cursor: default; }
.booking-nav button::before {
  content: "";
  width: 7px; height: 7px;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
}
.booking-nav button[data-booking-next]::before { transform: rotate(-135deg) translate(1px, -1px); }

.booking-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.booking-cal { padding: 1rem; border-right: 1px solid var(--cream-line); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--stone);
  text-align: center;
  padding-bottom: .4rem;
}
.cal-day {
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--navy);
  cursor: pointer;
  transition: background .15s var(--ease);
}
.cal-day:hover:not(:disabled) { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.cal-day:disabled { color: color-mix(in srgb, var(--stone) 45%, transparent); cursor: default; }
.cal-day.is-on { background: var(--navy); color: var(--cream); }

.booking-slots { padding: 1rem; display: flex; flex-direction: column; }
.booking-slot-head {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: .7rem;
  line-height: 1.5;
}
.slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.slot {
  padding: .5em .2em;
  border: 1px solid var(--cream-line);
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--navy);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.slot:hover { border-color: var(--navy); }
.slot.is-on { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.booking-warn {
  font-size: .8rem;
  color: #9B3B2F;
  margin-top: .6rem;
}
@media (max-width: 620px) {
  .booking-body { grid-template-columns: minmax(0, 1fr); }
  .booking-cal { border-right: 0; border-bottom: 1px solid var(--cream-line); }
  .slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------
   8. THE TAILORED ENQUIRY SECTIONS

   One shared contact form asked a woman ordering a blood panel the
   same questions as a woman asking about coaching. Each page now
   ends on the form its own subject needs.
   ----------------------------------------------------------- */
.enquiry { scroll-margin-top: 110px; }
.enquiry-card {
  background: var(--paper);
  border: 1px solid var(--cream-line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.enquiry-card > .enquiry-intro h2 { margin: 0 0 var(--s3); }
.enquiry-intro .lede { margin: 0; }
.enquiry-points {
  margin-top: var(--s4);
  border-top: 1px solid var(--cream-line);
}
.enquiry-points li {
  padding-block: .8rem;
  border-bottom: 1px solid var(--cream-line);
  font-size: .93rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: .4rem;
}
.enquiry-points li::before {
  content: counter(pt, decimal-leading-zero);
  counter-increment: pt;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--stone);
  padding-top: .28em;
}
.enquiry-points { counter-reset: pt; }

.form-stack { display: grid; gap: 1.1rem; }
.form-stack .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.form-stack .btn { width: 100%; justify-content: center; margin-top: .4rem; }
.form-stack .form-note { font-size: .78rem; line-height: 1.5; color: var(--stone); }
.form-success:empty { display: none; }
.form-success.show {
  display: block;
  background: color-mix(in srgb, var(--navy) 6%, transparent);
  border-left: 2px solid var(--navy);
  padding: .8rem 1rem;
  font-size: .92rem;
  border-radius: 0 8px 8px 0;
}

/* a set of choices, as chips rather than a wall of checkboxes */
.choice-set { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: block;
  padding: .5em .95em;
  border: 1px solid var(--cream-line);
  border-radius: var(--r-pill);
  font-size: .86rem;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.choice input:hover + span { border-color: color-mix(in srgb, var(--navy) 40%, transparent); }
.choice input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 12%, transparent); }

@media (max-width: 900px) {
  .enquiry-card { grid-template-columns: minmax(0, 1fr); }
  .form-stack .two { grid-template-columns: minmax(0, 1fr); }
}

/* -----------------------------------------------------------
   9. THE BMI DIALOG AND WHAT FOLLOWS THE NUMBER

   The homepage sent people to another page for a two-field sum
   and lost them there. The same calculator now opens in place,
   and once it has a figure it asks the obvious next question
   rather than leaving a number sitting on its own.
   ----------------------------------------------------------- */
.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(560px, calc(100vw - 2rem));
  width: 100%;
  max-height: calc(100dvh - 2rem);
  overflow: visible;
  color: var(--ink);
}
.modal::backdrop { background: color-mix(in srgb, var(--navy) 62%, transparent); backdrop-filter: blur(3px); }
.modal-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: 0 50px 110px -40px rgba(20, 35, 42, .6);
  position: relative;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
.modal-title { font-size: clamp(1.7rem, 3.2vw, 2.2rem); margin: var(--s2) 0 var(--s2); }
.modal-sub { color: var(--stone); font-size: .95rem; margin-bottom: var(--s4); max-width: 44ch; }
.modal-card .tool-card { border: 0; background: transparent; padding: 0; box-shadow: none; }
.modal-close {
  position: absolute;
  top: .9rem; right: .9rem;
  width: 34px; height: 34px;
  border: 1px solid var(--cream-line);
  border-radius: 50%;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  transition: background .2s var(--ease);
}
.modal-close:hover { background: color-mix(in srgb, var(--navy) 8%, transparent); }

.bmi-next {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--cream-line);
}
.bmi-next-head {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.15;
  margin-bottom: .5rem;
}
.bmi-next-copy {
  color: var(--stone);
  font-size: .93rem;
  line-height: 1.55;
  margin-bottom: var(--s3);
}

/* the unit switch reads as one control, not two buttons */
.seg button { transition: background .2s var(--ease), color .2s var(--ease); }

/* -----------------------------------------------------------
   10. HERO POINTS

   A hero with a short standfirst and two buttons left a column of
   empty cream and still made the panel taller than the screen.
   Where there is room, the hero says what actually happens.
   ----------------------------------------------------------- */
.hero-points {
  margin-top: var(--s4);
  border-top: 1px solid var(--cream-line);
}
.hero-points li {
  padding-block: .72rem;
  border-bottom: 1px solid var(--cream-line);
  display: grid;
  gap: .12rem;
}
.hero-points b { font-size: .95rem; font-weight: 600; }
.hero-points span {
  font-size: .87rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

/* -----------------------------------------------------------
   11. THE DARK TRUST PANEL, BALANCED

   Copy filled the left half and the right half was empty navy.
   The argument and the numbers now sit side by side.
   ----------------------------------------------------------- */
.panel-dark--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.panel-dark--split .readout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 0;
}
@media (max-width: 900px) {
  .panel-dark--split { grid-template-columns: minmax(0, 1fr); }
}

/* -----------------------------------------------------------
   12. THE SPLIT, ACTUALLY ALIGNED

   .split centres its two columns, which is right for copy beside a
   photograph and wrong for copy beside a card: the card floated in
   the middle of the row with air above and below it and nothing
   lining up. Where a split holds a card, the columns align at the
   top and the card fills the height.
   ----------------------------------------------------------- */
.split:has(> div > .card--stretch) { align-items: stretch; }
.split > div:has(> .card--stretch) { display: flex; }
.card--stretch { width: 100%; display: flex; flex-direction: column; }
.card--stretch .rule { margin-top: auto !important; }

.mini-list {
  margin-top: 1.2rem;
  border-top: 1px solid var(--cream-line);
}
.mini-list li {
  padding-block: .7rem;
  border-bottom: 1px solid var(--cream-line);
  display: grid;
  gap: .1rem;
}
.mini-list b { font-size: .92rem; font-weight: 600; }
.mini-list span {
  font-size: .86rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}

/* -----------------------------------------------------------
   13. CARDS SIT CLOSER TO EACH OTHER THAN COPY DOES TO A PHOTO

   .split's gap is tuned for a column of text beside an image, where
   a wide gutter reads as generosity. Between two cards the same gap
   reads as a mistake — they stop looking like a pair.
   ----------------------------------------------------------- */
.split:has(> .card) { gap: clamp(1rem, 1.8vw, 1.6rem); }

/* -----------------------------------------------------------
   14. A HERO THAT CARRIES A FORM STILL FITS THE SCREEN

   Asking for the enquiry in the hero is right; letting it push the
   panel past the fold is not, because the visitor then meets a form
   with its submit button below the horizon. Where the copy column
   holds a form, the type and the gaps tighten so the whole card —
   headline, argument, fields and button — lands on one screen.
   ----------------------------------------------------------- */
.frame-copy:has(.hero-form) { padding-block: clamp(1.6rem, 2.6vw, 2.4rem); }
.frame-copy:has(.hero-form) h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.frame-copy:has(.hero-form) .lede { font-size: clamp(1rem, 1.05vw, 1.08rem); max-width: 46ch; }
.frame-copy .hero-form { margin-top: var(--s3); gap: .7rem; }
.frame-copy .hero-form-row { gap: .7rem; }
.frame-copy .hero-form .field label { margin-bottom: 0; }
.frame-copy .hero-form input,
.frame-copy .hero-form .sel-btn { padding: .68em .85em; }
.frame-copy .hero-form .btn { margin-top: .5rem; padding: .95em 1.6em; }
.frame-copy .hero-form .form-note { margin-top: .1rem; font-size: .74rem; }
.frame-copy .chip { margin-bottom: .8rem; }

@media (max-width: 900px) {
  .frame-copy:has(.hero-form) { padding-block: clamp(1.8rem, 6vw, 2.6rem); }
}

/* .frame-actions was built to hold two buttons and pushes itself to the
   bottom of the column with 2.4rem of clearance above. A form standing
   in that slot does not want either. */
.frame-actions:has(.hero-form) { margin-top: 0; padding-top: 0; display: block; }
.frame { margin-top: clamp(58px, 5.4vw, 74px); }

/* the last of the height, taken out of the gaps rather than the type */
.frame-copy:has(.hero-form) .frame-crumb { margin-bottom: .8rem; }
.frame-copy:has(.hero-form) .chip { margin-bottom: .6rem; }
.frame-copy:has(.hero-form) .lede { margin-top: .8rem; }
.frame-copy:has(.hero-form) h1 { font-size: clamp(2.1rem, 4vw, 3.3rem); }

/* The intro beside a long form left a column of white below it. Made
   sticky, it stays with the reader as they work down the fields. */
@media (min-width: 901px) {
  .enquiry-intro { position: sticky; top: 108px; }
}

/* A short heading beside a long list of questions left half the row
   empty. It travels with the reader instead. */
@media (min-width: 901px) {
  .split:has(> .faq) > div:first-child { position: sticky; top: 108px; align-self: start; }
}

/* -----------------------------------------------------------
   15. THE JOURNAL ROW LOOPS

   journey.js clones the card set and wraps the scroll position by
   exactly one set, so the row never dead-ends. Mandatory scroll
   snapping fought that: after a wrap it re-snapped to the nearest
   card and shifted the row under the reader. The arrows already
   step by a whole card, so the snap was only ever doing harm here.
   ----------------------------------------------------------- */
.hscroll-track { scroll-snap-type: none; }
.hscroll-track > * { scroll-snap-align: none; }

/* -----------------------------------------------------------
   16. THE DIAGRAMS

   The journal charts plot measurements; these describe how the
   business is arranged. They share the chart shell so the two
   read as one family, and they earn a diagram rather than a list
   because what they show is containment: each ring genuinely
   holds the one inside it. Colour is a sequential ramp, and every
   ring and segment is labelled, so nothing depends on hue alone.
   ----------------------------------------------------------- */
.chart--diagram { margin-top: 0; }
.chart--diagram svg { max-width: 100%; }

.chart .ring-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
}
.chart .ring-t {
  font-family: var(--font-display);
  font-size: 19px;
  fill: var(--navy);
  letter-spacing: -.01em;
}
.chart .ring-p {
  font-family: var(--font-body);
  font-size: 13px;
  fill: color-mix(in srgb, var(--navy) 64%, transparent);
}
.chart .leader {
  stroke: color-mix(in srgb, var(--navy) 30%, transparent);
  stroke-width: 1;
}
.chart .donut-n {
  font-family: var(--font-display);
  font-size: 40px;
  fill: var(--navy);
  letter-spacing: -.02em;
}
.chart .donut-l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  fill: var(--stone);
}
.chart .lg-t { font-family: var(--font-body); font-size: 14px; fill: var(--navy); }
.chart .lg-v {
  font-family: var(--font-mono);
  font-size: 14px;
  fill: var(--navy);
  font-variant-numeric: tabular-nums;
}
.chart .lg-rule { stroke: var(--cream-line); stroke-width: 1; }

/* Below the fold of a phone the leader lines run out of room, so the
   diagram scrolls rather than shrinking its labels to nothing. */
@media (max-width: 720px) {
  .chart--diagram { overflow-x: auto; }
  .chart--diagram svg { min-width: 620px; }
}

/* base.css zeroes the margin on every element, which includes the
   `margin: auto` the user agent uses to centre a <dialog>. The modal was
   landing hard against the top-left corner. */
.modal { margin: auto; }

/* -----------------------------------------------------------
   17. THE NUMERAL IN THE STEP CIRCLE

   The display serif sets figures old-style, so 1, 2 and 4 sit with
   descenders below the baseline and the number looked low in its
   ring. Lining figures and a centred line box put it in the middle.
   ----------------------------------------------------------- */
.step .step-no {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  line-height: 1;
  padding-top: .04em;
}

/* -----------------------------------------------------------
   18. THE PRICE CARDS, ON ONE GRID

   Three cards whose copy ran to different lengths settled at three
   different heights, and the buttons landed wherever the text left
   them. The cards now share a column height and the action sits on
   a common baseline at the foot of each.
   ----------------------------------------------------------- */
.price-grid { align-items: stretch; }
.price {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.price .price-sub { min-height: 4.6em; }
.price .price-feat { margin-bottom: var(--s4); }
.price > .btn { margin-top: auto; }
@media (max-width: 900px) {
  .price .price-sub { min-height: 0; }
}

/* the enquiry dialog is wider than the calculator's, because a form
   with paired fields needs the room */
.modal--wide { max-width: min(880px, calc(100vw - 2rem)); }
.modal--wide .enquiry { padding: 0; }
.modal--wide .enquiry .wrap { padding-inline: 0; max-width: none; }
.modal--wide .enquiry-card { border: 0; background: transparent; padding: 0; }
.modal--wide .enquiry-intro { position: static; }
@media (max-width: 900px) {
  .modal--wide .enquiry-card { gap: var(--s4); }
}

/* -----------------------------------------------------------
   19. THE RINGS, IN THE BRAND'S GREEN, AND DRAWN RATHER THAN
       SIMPLY PRESENT

   The first pass used a neutral ramp, which read as grey card
   rather than as this site. The ramp is now the brand green,
   stepped light to dark and still monotonic in lightness, so the
   nesting reads before anyone reads a word. journey.js puts `.in`
   on the figure when it enters, and the rings open outward from
   the centre while the leader lines draw after them.
   ----------------------------------------------------------- */
.chart--diagram .ring {
  transform-origin: 208px 224px;
  transform: scale(.6);
  opacity: 0;
  transition: transform .85s cubic-bezier(.22, 1, .36, 1) calc(var(--r, 0) * 110ms),
              opacity .55s ease calc(var(--r, 0) * 110ms);
}
.chart--diagram.in .ring { transform: none; opacity: 1; }

.chart--diagram .ring-n,
.chart--diagram circle:not(.ring) {
  opacity: 0;
  transition: opacity .5s ease 620ms;
}
.chart--diagram.in .ring-n,
.chart--diagram.in circle:not(.ring) { opacity: 1; }

.chart--diagram .leader {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1) calc(560ms + var(--r, 0) * 130ms);
}
.chart--diagram.in .leader { stroke-dashoffset: 0; }

.chart--diagram .ring-t,
.chart--diagram .ring-p {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .6s ease calc(760ms + var(--r, 0) * 130ms),
              transform .6s var(--ease) calc(760ms + var(--r, 0) * 130ms);
}
.chart--diagram.in .ring-t,
.chart--diagram.in .ring-p { opacity: 1; transform: none; }

/* the leader lines pick up the green so they belong to the rings */
.chart--diagram .leader { stroke: color-mix(in srgb, #1F3A2C 42%, transparent); }
.chart--diagram circle:not(.ring) { fill: #1F3A2C; }

@media (prefers-reduced-motion: reduce) {
  .chart--diagram .ring,
  .chart--diagram .leader,
  .chart--diagram .ring-t,
  .chart--diagram .ring-p,
  .chart--diagram .ring-n,
  .chart--diagram circle:not(.ring) {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* -----------------------------------------------------------
   20. THE SCROLLBAR, BUILT RATHER THAN INHERITED

   The dialog was showing the operating system's own bar — a grey
   slab with nothing to do with this site — right down the middle
   of the page. Drawn here instead: a hairline track and a thumb
   in the site's ink, thin enough to read as a rule.
   ----------------------------------------------------------- */
.modal-card,
.sel-list,
.table-scroll,
.chart--diagram {
  scrollbar-width: thin;                                  /* Firefox */
  scrollbar-color: color-mix(in srgb, var(--navy) 28%, transparent) transparent;
}
.modal-card::-webkit-scrollbar,
.sel-list::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.chart--diagram::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.modal-card::-webkit-scrollbar-track,
.sel-list::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.chart--diagram::-webkit-scrollbar-track {
  background: transparent;
}
.modal-card::-webkit-scrollbar-thumb,
.sel-list::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.chart--diagram::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--navy) 24%, transparent);
  border: 3px solid transparent;      /* insets the thumb to a hairline */
  background-clip: content-box;
  border-radius: 99px;
}
.modal-card::-webkit-scrollbar-thumb:hover,
.sel-list::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.chart--diagram::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--navy) 48%, transparent);
  background-clip: content-box;
}

/* -----------------------------------------------------------
   21. THE DONUT: ALIGNED, DRAWN, AND LIT UNDER THE CURSOR

   The long first label ran into its own percentage, and the chart
   sat inert. The legend is now a three-column grid — swatch, label,
   figure — with the figure right-aligned to a common edge, and both
   the ring and the legend answer the pointer: hovering either one
   lifts the segment out of the ring and lights its row.
   ----------------------------------------------------------- */
.chart--donut .seg {
  transform-origin: 172px 178px;
  transform: scale(.82);
  opacity: 0;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1) calc(var(--r, 0) * 110ms),
              opacity .5s ease calc(var(--r, 0) * 110ms),
              filter .3s var(--ease);
  cursor: pointer;
}
.chart--donut.in .seg { transform: none; opacity: 1; }

/* Lit rather than lifted: an even glow in the segment's own green, with
   no offset, so nothing looks like it has come away from the page. */
.chart--donut.in .seg:hover,
.chart--donut.in .seg.is-lit {
  transform: translate(calc(var(--ox) * .55), calc(var(--oy) * .55));
  filter: brightness(1.07) saturate(1.12);
}
/* the rest of the ring recedes, which is what makes one segment read as lit */
.chart--donut.in:has(.seg:hover) .seg:not(:hover),
.chart--donut.in:has(.lg:hover) .seg:not(.is-lit) { opacity: .45; }
.chart--donut .seg { transition: transform .4s var(--ease), filter .3s var(--ease), opacity .3s var(--ease); }

.chart--donut .lg {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .5s ease calc(360ms + var(--r, 0) * 110ms),
              transform .5s var(--ease) calc(360ms + var(--r, 0) * 110ms);
  cursor: pointer;
}
.chart--donut.in .lg { opacity: 1; transform: none; }
.chart--donut .lg-hit { transition: fill .25s var(--ease); }
.chart--donut.in .lg:hover .lg-hit,
.chart--donut.in .lg.is-lit .lg-hit { fill: color-mix(in srgb, #1F3A2C 7%, transparent); }
.chart--donut .lg-sw { transition: opacity .25s var(--ease); }
.chart--donut.in .lg:not(:hover):not(.is-lit) .lg-sw { opacity: .55; }
.chart--donut.in:not(:has(.lg:hover)):not(:has(.seg:hover)) .lg-sw { opacity: 1; }

.chart--donut .donut-n,
.chart--donut .donut-l {
  opacity: 0;
  transition: opacity .6s ease 520ms;
}
.chart--donut.in .donut-n,
.chart--donut.in .donut-l { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .chart--donut .seg, .chart--donut .lg,
  .chart--donut .donut-n, .chart--donut .donut-l {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* -----------------------------------------------------------
   22. THE SELECT CHEVRON

   A bare rotated border reads as a browser default. The control now
   carries the same arrow the links and buttons use, sitting in its
   own hairline circle, vertically centred on the value it belongs to.
   ----------------------------------------------------------- */
.sel-btn { padding-right: .6em; }
.sel-caret {
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--cream-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: none;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
  position: relative;
}
.sel-caret::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
  transform: rotate(45deg) translate(-1.5px, -1.5px);
}
.sel-btn:hover .sel-caret { border-color: color-mix(in srgb, var(--navy) 40%, transparent); }
.sel.is-open .sel-caret {
  transform: rotate(180deg);
  background: var(--navy);
  border-color: var(--navy);
}
.sel.is-open .sel-caret::before { border-color: var(--cream); }

/* -----------------------------------------------------------
   23. THE BASKET

   Every product now carries a way to buy it. Prices are not set, so
   the control gathers an order and hands it to Emma rather than
   pretending to take a payment.
   ----------------------------------------------------------- */
.product .pairs { display: block; margin-top: var(--s2); }
.product-body > .pairs { margin-bottom: var(--s3); }
.product-buy {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--cream-line);
  /* The price and the action were fighting for one narrow row, which
     wrapped "Add to basket" onto two lines. Stacked, the button gets the
     full width of the card and its label gets one line. */
  display: grid;
  gap: .7rem;
}
.product-buy .btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
.product-price {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  white-space: nowrap;
}
.btn--sm {
  padding: .6em 1.1em;
  font-size: .84rem;
}
.product-body { display: flex; flex-direction: column; flex: 1; }
.product .by {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
  margin-top: .3rem;
}
.product .by b { color: var(--navy); font-weight: 500; letter-spacing: .16em; }

/* the journal row is paged by its arrows, so its own bar is noise */
.hscroll-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hscroll-track::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* the basket bar, only present once something is in it */
.basket-bar {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem .7rem .7rem 1.2rem;
  background: var(--navy);
  color: var(--cream);
  border-radius: 14px;
  box-shadow: 0 24px 60px -22px rgba(20, 35, 42, .7);
  max-width: calc(100vw - 2rem);
}
.basket-bar[hidden] { display: none; }
.basket-count {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.basket-names {
  font-size: .84rem;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 38ch;
}
.basket-bar .btn {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--cream);
  white-space: nowrap;
}
[data-add].is-in {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}
@media (max-width: 620px) { .basket-names { display: none; } }

/* the FAQ panel is wrapped so its padding collapses with it */
.faq-box { overflow: hidden; }
.faq-item .faq-a { padding-bottom: 1.6rem; }

/* -----------------------------------------------------------
   24. THE STATEMENT'S BUTTON SITS WITH ITS COPY

   An earlier pass gave the block after the two columns a fixed
   top margin, and because the two columns are different lengths
   that margin measured from the taller one — leaving the button
   marooned a long way under the shorter column it actually
   follows. It now sits a normal step below the copy.
   ----------------------------------------------------------- */
.redact-section .split + div { margin-top: var(--s5) !important; }
.redact-section .split { margin-top: var(--s5) !important; }
.redact-section .split > * { margin: 0; }

/* -----------------------------------------------------------
   25. THE MARQUEE

   The band read as a thin strip cutting across the page: the type
   sat hard against the navy above and below it. The gap that needed
   opening was the vertical one, so the padding grows and the items
   keep the horizontal rhythm they already had.
   ----------------------------------------------------------- */
.marquee { padding-block: clamp(2rem, 3.6vw, 3rem); }
.marquee-track span { font-size: clamp(1rem, 1.6vw, 1.28rem); }
.marquee-track .sep {
  color: color-mix(in srgb, var(--clay) 70%, transparent);
  font-size: .9rem;
  position: relative;
  top: -.1em;
}


/* the journal row can be dragged as well as paged */
.hscroll-track { cursor: grab; }
.hscroll-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.hscroll-track.is-dragging * { cursor: grabbing; user-select: none; }
.hscroll-track img { -webkit-user-drag: none; user-select: none; }

/* -----------------------------------------------------------
   29. THE FIGURES STRIP HOLDS ITS COLUMNS

   A grid item's default min-width is auto, so a long unbreakable
   figure — "200—2000" set at 3.4rem — refused to shrink below its
   own width and pushed straight over the column beside it. The
   columns are given a real minimum, and the number is allowed to
   scale with the space it actually has rather than the viewport.
   ----------------------------------------------------------- */
.figures > div {
  min-width: 0;
  container-type: inline-size;   /* each figure sizes to its own column */
}
.figures b {
  font-size: clamp(1.9rem, 17cqi, 3.4rem);
  text-wrap: nowrap;
  max-width: 100%;
  letter-spacing: -.035em;
}

@supports not (font-size: 1cqi) {
  .figures b { font-size: clamp(1.9rem, 3vw, 3.4rem); }
}

/* -----------------------------------------------------------
   30. THE CLIMB

   First attempt ran a line through the row of captions, which
   crossed the text and read as a mistake. The argument and the
   evidence are separated now: a stepped chart carries the fuelling,
   in the same shell as every other chart on the site, and the four
   photographs sit underneath as what it produced. The steps are
   literal — each tread is a season, each riser is the change that
   made the next one possible.
   ----------------------------------------------------------- */
.chart--climb { margin-top: 0; margin-bottom: var(--s5); }
.chart--climb svg { overflow: visible; }
.chart--climb .ck-grid line { stroke: var(--cream-line); stroke-width: 1; }
.chart--climb .ck-axis { stroke: var(--cream-line); stroke-width: 1.5; }

/* the trend, and the weeks underneath it */
.chart--climb .ck-area {
  fill: color-mix(in srgb, var(--gold) 12%, transparent);
  opacity: 0;
  transition: opacity .9s ease .55s;
}
.chart--climb.in .ck-area { opacity: 1; }

.chart--climb .ck-pt {
  fill: #4F7A5C;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .45s cubic-bezier(.2, 1.3, .4, 1)
              calc(var(--i, 0) * 7ms + 260ms);
}
.chart--climb.in .ck-pt { transform: none; }

.chart--climb .ck-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2s cubic-bezier(.3, .7, .3, 1) .3s;
}
.chart--climb.in .ck-line { stroke-dashoffset: 0; }

/* the podiums, called out where they fall */
.chart--climb .ck-mark {
  opacity: 0;
  transition: opacity .6s ease calc(var(--i, 0) * 260ms + 1s);
}
.chart--climb.in .ck-mark { opacity: 1; }
.chart--climb .ck-stem { stroke: color-mix(in srgb, var(--navy) 30%, transparent); stroke-width: 1; }
/* each callout sits on its own plate so the scatter never runs through the
   words; without it the dots and the trend line crossed the labels */
.chart--climb .ck-plate {
  fill: color-mix(in srgb, var(--paper) 92%, transparent);
  stroke: var(--cream-line);
  stroke-width: 1;
}
.chart--climb .ck-node {
  fill: var(--gold);
  stroke: var(--paper);
  stroke-width: 2.5;
}
.chart--climb .ck-mark:last-of-type .ck-node { r: 8.5; }
.chart--climb .ck-name {
  font-family: var(--font-display);
  font-size: 19px;
  fill: var(--navy);
  letter-spacing: -.01em;
}
.chart--climb .ck-note {
  font-family: var(--font-body);
  font-size: 12px;
  fill: color-mix(in srgb, var(--navy) 66%, transparent);
}
.chart--climb .ck-yr,
.chart--climb .ck-ylab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  fill: var(--stone);
}

@media (max-width: 760px) {
  .chart--climb { overflow-x: auto; }
  .chart--climb svg { min-width: 780px; }
}

/* ---- the photographs underneath ---- */
.climb {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.climb-step {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease) calc(var(--i, 0) * 130ms),
              transform .7s var(--ease) calc(var(--i, 0) * 130ms);
}
.climb.in .climb-step { opacity: 1; transform: none; }

.climb-media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--navy);
  position: relative;
}
.climb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.climb-step:hover .climb-media img { transform: scale(1.04); }
.climb-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--navy) 48%, transparent), transparent 44%);
}

.climb-pos {
  position: absolute;
  left: .9rem;
  top: .9rem;
  z-index: 2;
  min-width: 34px;
  height: 34px;
  padding-inline: .62em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--cream);
  background: color-mix(in srgb, var(--navy) 74%, transparent);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
}
.climb-pos--gold {
  background: var(--forest, #1F3A2C);
  color: var(--cream);
  padding-inline: 0;
  width: 34px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.climb-step h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  margin-top: var(--s3);
}
.climb-step p {
  margin-top: .5rem;
  font-size: .9rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 64%, transparent);
  text-wrap: balance;
}

@media (max-width: 900px) {
  .climb { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
}
@media (max-width: 520px) {
  .climb { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .climb-step, .chart--climb .ck-dot, .chart--climb .ck-lab, .chart--climb .ck-area {
    opacity: 1 !important; transform: none !important;
  }
  .chart--climb .ck-line { stroke-dashoffset: 0 !important; }
}

/* -----------------------------------------------------------
   31. A SELECT DOES NOT WRAP

   "Not sure yet, help me choose" broke onto two lines, which made
   the field taller than the one beside it and knocked the row out
   of alignment. The value is held on one line and truncated if it
   must be; the full text is still there in the list when open.
   ----------------------------------------------------------- */
.sel-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sel-btn { align-items: center; }
.hero-form-row > .field { min-width: 0; }

/* -----------------------------------------------------------
   32. THE RECOMMENDED LIST OPENS

   It was four names and a chip each, which asserted a judgement
   without ever showing the reasoning. Each entry opens now onto why
   it is on the list — what is in it, what the evidence actually
   supports, and where it does nothing. It reuses the FAQ's markup
   so it inherits the same measured open and close rather than
   snapping, and so there is one accordion on this site, not two.
   ----------------------------------------------------------- */
.rec-list { margin-top: var(--s5); border-top: 1px solid var(--cream-line); }
.rec-item .faq-q {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding-block: 1.15rem;
}
.rec-n {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--stone);
}
.rec-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.rec-chip { justify-self: end; white-space: nowrap; }

.rec-body { max-width: 68ch; padding-left: 4rem; }
.rec-body .rec-lede {
  font-size: 1.02rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  margin-bottom: var(--s3);
}
.rec-body p + p { margin-top: var(--s2); }
.rec-body p { font-size: .95rem; line-height: 1.62; }
.rec-body b { color: var(--navy); font-weight: 600; }

@media (max-width: 760px) {
  .rec-item .faq-q { grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .7rem; }
  .rec-chip { display: none; }
  .rec-body { padding-left: 0; }
}

/* -----------------------------------------------------------
   33. THE BASKET AND ITS ORDER

   The bar was a row of items at different optical weights crammed
   against its own button. It is set on a baseline now, with the
   count, the contents and the action each given room, and the
   contents allowed to truncate rather than shove the button.
   ----------------------------------------------------------- */
.basket-bar {
  padding: .55rem .55rem .55rem 1.35rem;
  gap: 1.25rem;
  align-items: center;
}
.basket-count {
  font-size: .64rem;
  letter-spacing: .16em;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
  flex: none;
}
.basket-names {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .86rem;
  color: var(--cream);
  padding-right: .25rem;
}
.basket-bar .btn { flex: none; padding: .68em 1.15em; }

/* the order's line items */
.basket-lines {
  border: 1px solid var(--cream-line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--navy) 3%, transparent);
  padding: .35rem .9rem;
}
.basket-empty {
  font-size: .88rem;
  color: var(--stone);
  padding-block: .8rem;
  margin: 0;
}
.basket-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--cream-line);
}
.basket-line:last-child { border-bottom: 0; }
.basket-line-name { font-size: .92rem; }

.qty {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  border: 1px solid var(--cream-line);
  border-radius: var(--r-pill);
  background: var(--paper);
}
.qty-btn {
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  border-radius: 50%;
  font-size: .9rem;
  line-height: 1;
  transition: background .2s var(--ease);
}
.qty-btn:hover { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.qty-n {
  min-width: 1.4rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.basket-remove {
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  color: var(--stone);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.basket-remove:hover { color: var(--navy); background: color-mix(in srgb, var(--navy) 8%, transparent); }

/* the four captions are of a length, and reserve the same space, so the
   row reads as one block rather than four columns ending wherever they like */
.climb-step h3 { min-height: 1.2em; }
.climb-step p { min-height: 4.7em; }
@media (max-width: 900px) {
  .climb-step p { min-height: 0; }
}

/* -----------------------------------------------------------
   34. DESCENDERS ARE NOT CLIPPED

   The word-by-word heading reveal wraps each line in a box with
   overflow: hidden, which is what lets the words rise into view.
   That box was given .06em of slack below the baseline — enough
   for the body face, nowhere near enough for the display serif,
   so the tails of g, p, y and q were sliced off: "guess", "gaps".
   The box is given real room and the extra is pulled back out
   with a matching negative margin, so nothing below it moves.
   ----------------------------------------------------------- */
.mask-line {
  padding-bottom: .22em;
  margin-bottom: -.22em;
}
/* and once journey.js releases the clip, nothing can be cut off at all */
.mask-line[style*="visible"] { padding-bottom: 0; margin-bottom: 0; }

/* -----------------------------------------------------------
   35. FOOTER LINKS STAY VISIBLE ON HOVER

   The hover colour was --coral, which the palette rework pointed at
   the navy the footer is painted in — so a link vanished into the
   background exactly when the cursor reached it. On a dark ground
   the hover goes to full cream, which is brighter than the resting
   state rather than darker.
   ----------------------------------------------------------- */
.site-footer a:hover,
.footer-col a:hover,
.footer-bottom a:hover,
.footer-col a[href^="mailto"]:hover {
  color: var(--cream);
}
.footer-col a,
.footer-bottom a {
  transition: color .25s var(--ease);
}
/* the underline gives the hover something to say beyond brightness */
.footer-col a:hover,
.footer-bottom a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--cream) 45%, transparent);
}

/* -----------------------------------------------------------
   36. THE 40+ PERFORMANCE SYSTEM

   Four tiers that stack rather than compete: one base taken every
   day, and three that are added only on the days they earn their
   place. Each carries its own colour so the system is legible at a
   glance, drawn from the range's own packaging.
   ----------------------------------------------------------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}
.tier {
  background: var(--paper);
  border: 1px solid var(--cream-line);
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 2vw, 1.7rem);
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--tier);
  --tier: var(--stone);
}
.tier--foundation { --tier: #C98B4B; }
.tier--train      { --tier: #8FA37A; }
.tier--recover    { --tier: #1F3A2C; }
.tier--race       { --tier: #C4643C; }

.tier-head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--cream-line);
}
.tier-num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--tier);
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
}
.tier-head h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.1; }
.tier-when {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
  margin-top: .3rem;
}
.tier-strap {
  display: inline-block;
  margin-top: var(--s3);
  padding: .34em .8em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tier) 15%, transparent);
  color: color-mix(in srgb, var(--tier) 78%, var(--navy));
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tier-body {
  margin-top: var(--s2);
  font-size: .9rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  min-height: 7.8em;
}
.tier-list {
  margin-top: var(--s2);
  border-top: 1px solid var(--cream-line);
  min-height: 8.4em;
}
.tier-list li {
  padding-block: .42rem;
  font-size: .86rem;
  border-bottom: 1px solid var(--cream-line);
  display: grid;
  grid-template-columns: .8rem minmax(0, 1fr);
  gap: .3rem;
  align-items: baseline;
}
.tier-list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tier);
  transform: translateY(-2px);
}
.tier-format {
  margin-top: auto;
  padding-top: var(--s3);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--stone);
}
.tier-format b { display: block; color: var(--navy); font-weight: 600; margin-bottom: .2rem; }

/* ---- how the four combine ---- */
.system-logic {
  margin-top: var(--s6);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--r-lg);
}
.system-logic h3 { color: var(--cream); font-size: clamp(1.2rem, 2vw, 1.5rem); }
.logic-steps {
  margin-top: var(--s4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--cream) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
  border-radius: var(--r-md);
  overflow: hidden;
}
.logic-steps li {
  background: var(--navy);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .35rem;
}
.logic-k {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
}
.logic-v { font-size: .96rem; color: color-mix(in srgb, var(--cream) 88%, transparent); }
.logic-v b { color: var(--cream); font-weight: 600; }
.logic-note {
  margin-top: var(--s3);
  font-size: .88rem;
  color: color-mix(in srgb, var(--cream) 64%, transparent);
}

/* ---- the standing claims ---- */
.system-marks {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--cream-line);
  border: 1px solid var(--cream-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.system-marks li {
  background: var(--paper-2);
  padding: 1.05rem 1.2rem;
  display: grid;
  gap: .3rem;
}
.system-marks b { font-size: .92rem; }
.system-marks span {
  font-size: .84rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  text-wrap: pretty;
}

@media (max-width: 1040px) {
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-body, .tier-list { min-height: 0; }
  .logic-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tier-grid, .logic-steps, .system-marks { grid-template-columns: minmax(0, 1fr); }
}

/* -----------------------------------------------------------
   37. THE INTRO CUE IS A BUTTON

   "[ Scroll to enter ]" read as a caption, so people waited at the
   opening scene for something to happen. It is a real control now,
   with an arrow that moves in the direction it wants you to go, and
   after six seconds without a scroll it stops being subtle and says
   "Continue" in a bordered button — because by then the quiet
   version has already failed the person looking at it.
   ----------------------------------------------------------- */
.cinema-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: .7rem 1.4rem;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cinema-cue:hover { border-color: color-mix(in srgb, var(--cream) 40%, transparent); }
.cinema-cue:focus-visible {
  outline: none;
  border-color: var(--cream);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cream) 18%, transparent);
}

.cue-arrow {
  width: 16px; height: 16px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  animation: cue-fall 1.9s var(--ease) infinite;
}
@keyframes cue-fall {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .55; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* the louder version, once quiet has not worked */
.cinema-cue.is-nudging {
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  border-color: var(--cream);
  color: var(--navy);
  transform: translateY(-4px);
  letter-spacing: .16em;
  animation: cue-appear .5s var(--ease);
}
@keyframes cue-appear {
  from { opacity: .4; transform: translateY(6px); }
  to   { opacity: 1;  transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .cue-arrow { animation: none; opacity: .8; }
  .cinema-cue.is-nudging { animation: none; }
}