/* ==========================================================================
   Train With Maia — main stylesheet
   --------------------------------------------------------------------------
   Contents
     1.  Fonts
     2.  Design tokens (colours, type, spacing, motion)
     3.  Base / reset
     4.  Utilities
     5.  Shared components (eyebrow, headings, buttons, links, carousel dots)
     6.  Header + mobile menu
     7.  Hero
     8.  Recognition ("Why PT")
     9.  Approach
     10. Sessions (primary offer + other offers)
     11. Client stories
     12. About
     13. Runners
     14. Location
     15. FAQ
     16. Enquiry form
     17. Footer
     18. Simple pages (privacy, 404, thanks)
     18b. Cookie banner and consent
     19. Mobile carousels
     20. Scroll animations (only active when JS adds .js-motion to <html>)
     21. Reduced motion

   Breakpoint: the layout switches to its mobile version at 900px.
   ========================================================================== */


/* 1. Fonts
   ========================================================================== */

/* Outfit (variable weight), self-hosted. Licence: SIL Open Font License. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Design tokens
   ========================================================================== */

:root {
  /* Core palette */
  --ink: #14100E;            /* near-black: dark sections, text */
  --ink-raised: #211C19;     /* highlighted row on dark */
  --ink-menu: #1C1714;       /* dark panels */
  --paper: #F4F1EC;          /* main light background */
  --sky: #AECCE4;            /* accent blue */
  --sky-deep: #6E92AC;       /* accent blue on light backgrounds */

  /* Warm neutrals, light to dark */
  --stone-50: #EDE8E1;       /* offer card */
  --stone-100: #E9E4DC;      /* client stories background */
  --stone-150: #E6E0D7;      /* offer card hover */
  --line: #D8D1C7;           /* rules and borders on light */
  --stone-300: #C8C1B7;
  --stone-400: #B5AEA5;
  --stone-450: #9A9289;
  --stone-500: #8A837B;
  --stone-600: #6B645C;      /* eyebrow labels */
  --stone-700: #5C554E;      /* body copy, muted */
  --stone-800: #4A443E;
  --stone-850: #3A342F;
  --stone-900: #241F1B;

  /* Text on dark backgrounds */
  --on-dark: var(--paper);
  --on-dark-soft: #DCD6CD;
  --on-dark-muted: #A39B92;
  --on-dark-fine: #9E968C;
  --line-dark: rgba(244, 241, 236, 0.16);

  /* Typography */
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(33px, 5.6vw, 88px);   /* main section headings */
  --fs-display-sm: clamp(28px, 4vw, 60px);  /* secondary section headings */
  --fs-eyebrow: clamp(11px, 0.9vw, 13px);
  --fs-body-lg: clamp(16px, 1.4vw, 20px);
  --fs-body: clamp(15px, 1.25vw, 18px);

  /* Layout */
  --gutter: clamp(24px, 8vw, 132px);        /* page side padding */
  --section-y: clamp(72px, 12vh, 150px);    /* section top/bottom padding */
  --header-offset: 46px;                    /* anchor-link landing offset */

  /* Motion */
  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}


/* 3. Base / reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

/* Animated items start slightly off-screen; stop them widening the page */
main {
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

[hidden] {
  display: none !important;
}

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

img,
video {
  height: auto;
}

a {
  color: var(--ink);
}

a:hover {
  color: var(--stone-500);
}

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

::selection {
  background: var(--sky);
  color: var(--ink);
}

:focus-visible {
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
}

/* On dark sections the default outline would be invisible */
.theme-dark :focus-visible {
  outline-color: var(--sky);
}

::placeholder {
  color: rgba(244, 241, 236, 0.5);
}

[id] {
  scroll-margin-top: var(--header-offset);
}

#location {
  scroll-margin-top: 110px;
}


/* 4. Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.theme-dark {
  background: var(--ink);
  color: var(--on-dark);
}

.gutter {
  padding-inline: var(--gutter);
}

/* Film-grain texture used on the dark sections */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("../assets/img/grain.svg");
}

.photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.nudge {
  display: inline-block;
  margin-left: 0.4em;
  animation: nudge 1.4s ease-in-out infinite;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes price-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

@keyframes nudge {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(5px); }
}


/* 5. Shared components
   ========================================================================== */

/* Small uppercase label above a heading */
.eyebrow {
  color: var(--stone-600);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.theme-dark .eyebrow {
  color: var(--sky);
  font-weight: 600;
}

/* Big uppercase section headings */
.display {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.display--sm {
  font-size: var(--fs-display-sm);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 20px);
}

/* Numbered label, e.g. "01" */
.index-label {
  color: var(--stone-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Buttons
   The hover effect "wipes" a second colour up from the bottom using a
   half-and-half gradient that is twice the button's height. */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-border: var(--ink);
  --btn-wipe: var(--paper);
  --btn-fg-hover: var(--ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 19px 32px;
  border: 1.5px solid var(--btn-border);
  background-color: var(--btn-bg);
  background-image: linear-gradient(to bottom, transparent 50.6%, var(--btn-wipe) 50.6%);
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: 0 0;
  color: var(--btn-fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-position 0.5s var(--ease-out),
    color 0.35s ease,
    border-color 0.35s ease;
}

.btn:hover,
.btn:focus-visible {
  background-position: 0 100%;
  color: var(--btn-fg-hover);
}

.btn--sm {
  padding: 15px 26px;
  font-size: 12px;
}

/* Light button, used on dark backgrounds */
.btn--light {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-border: var(--paper);
  --btn-wipe: var(--ink);
  --btn-fg-hover: var(--paper);
}

/* Dark button with a light outline (footer) */
.btn--dark-outline {
  --btn-border: var(--paper);
  padding: 16px 28px;
}

/* Contact buttons in the location section */
.btn--contact {
  padding: 15px 24px;
  letter-spacing: 0.14em;
}

/* Text link with an underline that grows on hover */
.link-grow {
  color: var(--sky);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 0.4s var(--ease-out), color 0.3s ease;
}

.link-grow:hover,
.link-grow:focus-visible {
  background-size: 100% 1.5px;
  color: var(--paper);
}

/* Bold uppercase link with arrow, e.g. "Get directions →" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.link-arrow:hover {
  color: var(--stone-500);
}

/* Carousel pagination dots + "Swipe" hint (mobile only) */
.carousel-hint {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.carousel-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--stone-300);
  transition: width 0.35s var(--ease-out), background 0.35s ease;
}

.carousel-dots span.is-active {
  width: 22px;
  background: var(--ink);
}

.theme-dark .carousel-dots span {
  background: rgba(244, 241, 236, 0.28);
}

.theme-dark .carousel-dots span.is-active {
  background: var(--sky);
}

.swipe-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--stone-600);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.theme-dark .swipe-label {
  color: var(--stone-500);
}

.swipe-label .nudge {
  margin-left: 0;
}

/* Two-column grid used across most sections; collapses automatically */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 80px);
}

/* 6. Header + mobile menu
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition:
    background 0.4s ease,
    backdrop-filter 0.4s ease,
    border-color 0.4s ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(244, 241, 236, 0.12);
  background: rgba(20, 16, 14, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-header__row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(14px, 2vw, 22px) var(--gutter);
  transition: padding 0.35s ease;
}

.is-scrolled .site-header__row {
  padding-block: 10px;
}

.site-nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 78%;
  background-size: 0% 1.5px;
  transition: background-size 0.4s var(--ease-out), color 0.3s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background-size: 100% 1.5px;
  color: var(--sky);
}

/* Logo: full wordmark at the top of the page, compact mark once scrolled */
.site-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.site-logo__full {
  width: auto;
  height: clamp(38px, 4.4vw, 68px);
  transition: height 0.35s ease;
}

.site-logo__mark {
  display: none;
  width: auto;
  height: clamp(30px, 3.2vw, 44px);
}

.is-scrolled .site-logo__full {
  display: none;
}

.is-scrolled .site-logo__mark {
  display: block;
}

.site-header__cta {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}

.btn--header {
  --btn-bg: transparent;
  --btn-border: rgba(244, 241, 236, 0.55);
  padding: 13px 20px;
  font-size: 12px;
}

.is-scrolled .btn--header {
  --btn-border: var(--paper);
}

/* Hamburger button (mobile only) */
.menu-toggle {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--paper);
  transform-origin: center;
  transition: transform 0.42s var(--ease-out), opacity 0.24s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.3);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Full-screen mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 79;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding-top: 16vh;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease,
    clip-path 0.62s var(--ease-out);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0% 0);
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--gutter);
}

.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  color: var(--paper);
  font-size: clamp(22px, 6.4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s ease,
    transform 0.6s var(--ease-out);
}

/* Button-style links at the bottom of the menu */
.mobile-menu a.mobile-menu__btn {
  justify-content: center;
  padding: 16px 24px;
  border: 1px solid var(--paper);
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.16em;
}

.mobile-menu a.mobile-menu__btn--outline {
  margin-top: 26px;
  background: transparent;
  color: var(--paper);
}

.mobile-menu.is-open a {
  opacity: 1;
  transform: none;
}

/* Stagger the links as the menu opens */
.mobile-menu.is-open a:nth-child(1) { transition-delay: 120ms; }
.mobile-menu.is-open a:nth-child(2) { transition-delay: 190ms; }
.mobile-menu.is-open a:nth-child(3) { transition-delay: 260ms; }
.mobile-menu.is-open a:nth-child(4) { transition-delay: 330ms; }
.mobile-menu.is-open a:nth-child(5) { transition-delay: 400ms; }
.mobile-menu.is-open a:nth-child(6) { transition-delay: 470ms; }

@media (max-width: 900px) {
  /* Three equal-edged columns keep the logo exactly centred:
     [empty spacer] [logo] [menu button] */
  .site-header__row {
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    gap: 10px;
    padding: 22px 20px 10px;
  }

  .is-scrolled .site-header__row {
    padding: 10px 16px 8px;
  }

  /* Desktop nav and "Choose a session" button move into the menu */
  .site-nav,
  .site-header__cta {
    display: none;
  }

  .site-logo {
    grid-column: 2;
    justify-content: center;
    min-width: 0;
  }

  .site-logo__full {
    height: 55px;
  }

  .site-logo__mark {
    height: 38px;
  }

  .menu-toggle {
    grid-column: 3;
    justify-self: end;
  }

  .menu-toggle,
  .mobile-menu {
    display: flex;
  }
}


/* 7. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  animation: fade-in 1.6s ease both;
}

/* Portrait tablets and narrow windows still get the landscape video:
   shift it right so the face stays in view. (Phones get their own cut.) */
@media (max-aspect-ratio: 1/1) and (min-aspect-ratio: 201/300) {
  .hero__video {
    object-position: 66% 50%;
  }
}

.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(175deg, rgba(20, 16, 14, 0.8) 0%, rgba(20, 16, 14, 0.5) 40%, rgba(20, 16, 14, 0.94) 100%);
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 44px);
  padding: 0 var(--gutter) clamp(36px, 7vh, 84px);
}

.hero__heading {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 44px);
  font-weight: 700;
}

/* The keyword line: styled as the small blue label */
.hero__kicker {
  color: var(--sky);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1.4;
  text-transform: uppercase;
  animation: rise 0.9s 0.15s ease both;
}

.hero__title {
  display: block;
  margin-left: -0.058em;
  color: var(--paper);
  font-size: clamp(40px, 9.4vw, 148px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  animation: rise 1s 0.3s ease both;
}

.hero__intro {
  max-width: 46ch;
  color: var(--on-dark-soft);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  animation: rise 1s 0.5s ease both;
}


/* 8. Recognition ("Why PT")
   ========================================================================== */

.recognition {
  position: relative;
  padding: var(--section-y) 0 clamp(56px, 9vh, 120px);
}

.recognition__intro {
  align-items: stretch;
}

.recognition__lead {
  max-width: 40ch;
  padding-top: 24px;
  color: var(--stone-700);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
}

.recognition .display {
  max-width: 14ch;
}

.question-list {
  display: flex;
  flex-direction: column;
  margin-top: clamp(48px, 8vh, 96px);
}

.question-list li {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 34px);
  padding: clamp(14px, 2.2vh, 26px) 0;
  border-top: 1px solid var(--line);
  font-size: clamp(19px, 2.9vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  transition: color 240ms ease;
}

.question-list li:last-child {
  border-bottom: 1px solid var(--line);
}

/* Alternate rows are softer and stepped in */
.question-list li:nth-child(even) {
  color: var(--stone-500);
}

.question-list li:nth-child(2) { padding-left: clamp(0px, 6vw, 120px); }
.question-list li:nth-child(4) { padding-left: clamp(0px, 9vw, 180px); }
.question-list li:nth-child(6) { padding-left: clamp(0px, 4vw, 80px); }

.question-list li:nth-child(odd):hover  { color: var(--stone-500); }
.question-list li:nth-child(even):hover { color: var(--ink); }

.question-list__num {
  flex: 0 0 auto;
  color: var(--stone-450);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.recognition__statement {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(40px, 7vh, 88px);
}

.recognition__statement .scrub-text {
  padding-bottom: 0.24em;
  font-size: clamp(30px, 3.9vw, 58px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.recognition__video {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

/* Words inside a .scrub-text statement that never light up */
.scrub-quiet {
  color: var(--stone-500);
}


/* 9. Approach
   ========================================================================== */

.approach {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
}

.approach > *:not(.grain) {
  position: relative;
}

.steps {
  display: flex;
  flex-direction: column;
  margin-top: clamp(48px, 8vh, 104px);
}

.step {
  display: grid;
  grid-template-columns: minmax(80px, 0.45fr) minmax(180px, 0.85fr) minmax(240px, 1.7fr);
  gap: clamp(10px, 2.4vw, 48px);
  align-items: start;
  padding: clamp(38px, 6vh, 74px) var(--gutter);
  border-top: 1px solid var(--line-dark);
}

.step:last-child {
  border-bottom: 1px solid var(--line-dark);
}

.step__num {
  margin-top: -0.06em;
  color: var(--sky);
  font-size: clamp(48px, 7.4vw, 124px);
  font-weight: 700;
  line-height: 0.72;
  letter-spacing: -0.05em;
}

.step__title {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.step__text {
  max-width: 40ch;
  color: var(--stone-400);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
}

.approach .carousel-hint {
  padding: 18px 20px 0;
  margin-top: 0;
}

.approach__statement {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(40px, 7vh, 90px);
}

.approach__video {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.approach__statement .scrub-text {
  max-width: 22ch;
  color: var(--stone-500);
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.approach__statement .scrub-accent {
  color: var(--paper);
}

@media (max-width: 900px) {
  .step {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: start;
    min-height: 270px;
    padding: 26px 24px 30px;
    border: 1px solid rgba(244, 241, 236, 0.18);
  }

  .step:last-child {
    border-bottom: 1px solid rgba(244, 241, 236, 0.18);
  }
}


/* 10. Sessions
   ========================================================================== */

.sessions {
  padding: var(--section-y) var(--gutter);
}

.sessions__intro {
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}

.sessions__intro .display {
  line-height: 0.88;
}

.sessions__lead {
  max-width: 34ch;
  color: var(--stone-850);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
}

.primary-offer {
  align-items: start;
  margin-top: clamp(40px, 7vh, 88px);
}

.primary-offer__body {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
}

.primary-offer__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}

.primary-offer__title {
  flex: 1;
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.primary-offer__price {
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  transition: opacity 420ms ease, transform 520ms var(--ease-soft);
}

.primary-offer__price span {
  display: inline-block;
  transform-origin: left center;
  animation: price-pulse 2.2s ease-in-out infinite;
}

.feature-list li {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.4;
}

.feature-list li {
  align-items: flex-start;
}

/* Square bullet, matching the About section's credentials list */
.feature-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 0.55em;
  background: var(--ink);
}

.other-offers__head {
  margin-top: clamp(56px, 9vh, 110px);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: stretch;
  margin-top: clamp(24px, 4vh, 44px);
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1.5px solid var(--line);
  background: var(--stone-50);
  transition: border-color 0.35s ease, background-color 0.35s ease;
}

.offer-card:hover {
  border-color: var(--ink);
  background-color: var(--stone-150);
}

.offer-card__title {
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.offer-card__price {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.offer-card__price small {
  margin-left: 10px;
  color: var(--stone-700);
  font-size: 0.32em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.offer-card__text {
  color: var(--stone-850);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  text-wrap: pretty;
}

.offer-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Best-value card (dark) */
.offer-card--featured,
.offer-card--featured:hover {
  overflow: hidden;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.offer-card--featured .index-label {
  color: var(--sky);
}

.offer-card--featured .offer-card__price small {
  margin-left: 0;
  color: var(--sky);
  font-size: 0.42em;
  letter-spacing: 0.02em;
  text-transform: none;
}

.offer-card--featured .offer-card__text {
  color: #DDD6CC;
}

.offer-card__small-print {
  max-width: 34ch;
  margin-top: 6px;
  color: var(--on-dark-fine);
  font-size: 12px;
  line-height: 1.45;
}

/* Decorative logo mark in the corner of dark cards */
.card-mark {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: auto;
  height: 34px;
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 900px) {
  .primary-offer .btn {
    width: 100%;
  }

  .offer-grid {
    margin-top: 24px;
  }

  .offer-card {
    padding: 24px;
  }
}


/* 11. Client stories
   ========================================================================== */

.stories {
  padding: var(--section-y) var(--gutter);
  background: var(--stone-100);
}

.stories .display {
  max-width: 20ch;
}

.stories__feature {
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(36px, 6vh, 72px);
}

.stories__feature blockquote {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 28px);
}

.stories__feature blockquote p {
  color: var(--stone-900);
  font-size: clamp(24px, 2.9vw, 42px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.quote-mark {
  color: var(--stone-500);
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.16em;
}

.quote-by {
  color: var(--stone-700);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
  margin-top: clamp(32px, 5vh, 64px);
}

.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: 180px;
  padding: clamp(20px, 3vw, 32px);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.story-card p {
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.story-card .quote-mark {
  color: var(--sky);
}

.story-card .quote-by {
  color: var(--sky);
  font-size: 12px;
}

.stories__more {
  margin-top: clamp(26px, 4vh, 46px);
}

@media (max-width: 900px) {
  .story-grid {
    margin-top: 28px;
  }

  .story-card {
    min-height: 240px;
    padding: 24px;
  }
}


/* 12. About
   ========================================================================== */

.about {
  padding: var(--section-y) var(--gutter);
}

.about__grid {
  align-items: start;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 30px);
}

.about__text .display {
  font-size: clamp(30px, 4.6vw, 74px);
}

.about__lead {
  max-width: 46ch;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
}

.about__body {
  max-width: 46ch;
  color: var(--stone-700);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.about__pullquote {
  max-width: 34ch;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.35;
}

.credentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px clamp(20px, 3vw, 44px);
  padding-top: clamp(16px, 2.5vh, 24px);
  border-top: 1px solid var(--line);
}

.credentials li {
  display: flex;
  gap: 10px;
  color: var(--stone-700);
  font-size: 14px;
  line-height: 1.45;
}

.credentials li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 0.5em;
  background: var(--ink);
}

.about__media {
  position: relative;
  display: flex;
  flex-direction: column;
}

.photo-swap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
}

.photo-swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 850ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 1400ms var(--ease-soft);
}

/* Second photo is hidden until JS swaps it in */
.photo-swap picture + picture img {
  opacity: 0;
  transform: scale(1.06);
}

.photo-swap.is-swapped picture:first-child img {
  opacity: 0;
  transform: scale(1.06);
}

.photo-swap.is-swapped picture + picture img {
  opacity: 1;
  transform: scale(1);
}

.photo-caption {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px clamp(16px, 2vw, 26px);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.photo-caption img {
  flex: 0 0 auto;
  width: auto;
  height: 34px;
}


/* 13. Runners
   ========================================================================== */

.runners {
  padding: clamp(48px, 7vh, 90px) var(--gutter);
}

.runners__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
  padding: clamp(24px, 4vh, 44px) 0;
  border-block: 1px solid rgba(244, 241, 236, 0.2);
}

.runners h2 {
  max-width: 16ch;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.runners p {
  max-width: 42ch;
  color: var(--stone-400);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.runners .link-grow {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* 14. Location
   ========================================================================== */

.location {
  padding: clamp(56px, 9vh, 120px) var(--gutter) var(--section-y);
}

.location__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.location__text {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 30px);
}

.location .display {
  font-size: clamp(27px, 3.6vw, 54px);
  line-height: 0.92;
}

.location address {
  color: var(--stone-850);
  font-size: var(--fs-body);
  font-style: normal;
  line-height: 1.6;
}

.location__lead {
  max-width: 38ch;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
}

.location__areas {
  max-width: 44ch;
  color: var(--stone-700);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-list li {
  padding: 9px 16px;
  border: 1px solid var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {
  .contact-row .btn {
    flex: 1 1 140px;
  }
}


/* 15. FAQ
   ========================================================================== */

.faq {
  padding: 0 var(--gutter) var(--section-y);
}

.faq__grid {
  align-items: start;
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2.4vh, 24px) 0;
  font-size: clamp(17px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  transition: color 240ms ease;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--stone-500);
}

/* Plus sign that turns into a minus */
.faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 0.8;
  transition: transform 0.3s ease;
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__answer {
  max-width: 60ch;
  padding-bottom: clamp(18px, 3vh, 28px);
  color: var(--stone-700);
  font-size: var(--fs-body);
  line-height: 1.6;
}


/* 16. Enquiry form
   ========================================================================== */

.enquire {
  position: relative;
  padding: var(--section-y) var(--gutter);
  overflow: hidden;
}

.enquire__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}

.enquire__text {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
}

.enquire .display {
  font-size: clamp(32px, 5vw, 80px);
  line-height: 0.88;
}

.enquire__lead {
  max-width: 40ch;
  color: var(--on-dark-soft);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
}

.enquire__small {
  max-width: 40ch;
  color: var(--stone-400);
  font-size: 15px;
  line-height: 1.6;
}

.form {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 20px);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(14px, 2vh, 20px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--on-dark-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.field__optional {
  color: var(--stone-500);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1.5px solid rgba(244, 241, 236, 0.35);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.3s ease;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--sky);
  outline: none;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  box-shadow: 0 2px 0 0 var(--sky);
}

/* Session picker: a native <select> styled to match the design */
.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--sky);
  border-bottom: 2px solid var(--sky);
  pointer-events: none;
  transform: translateY(-80%) rotate(45deg);
}

.field select {
  width: 100%;
  padding: 12px 30px 22px 0;
  border: 0;
  border-bottom: 1.5px solid rgba(174, 204, 228, 0.6);
  border-radius: 0;
  background: transparent;
  color: var(--sky);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s ease;
}

.field select option {
  background: var(--ink-menu);
  color: var(--paper);
  text-transform: none;
}

/* Spam trap: hidden from people, visible to bots */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__privacy {
  color: var(--stone-500);
  font-size: 13px;
  line-height: 1.5;
}

.form__privacy a {
  color: var(--on-dark-soft);
}

.form .btn[type="submit"] {
  margin-top: 26px;
  padding: 20px 32px;
  border-width: 1px;
}

.form .btn[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.form__error {
  padding: 14px 16px;
  border-left: 3px solid #E4A3A3;
  background: rgba(228, 163, 163, 0.1);
  color: #F2D0D0;
  font-size: 15px;
  line-height: 1.5;
}

.form__error[hidden] {
  display: none;
}

.form-success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 280px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(244, 241, 236, 0.25);
}

.form-success[hidden] {
  display: none;
}

.form-success__title {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.form-success p:not(.form-success__title) {
  max-width: 38ch;
  color: var(--stone-400);
  font-size: 16px;
  line-height: 1.6;
}


/* 17. Footer
   ========================================================================== */

.site-footer {
  padding: clamp(28px, 4vh, 44px) var(--gutter);
  border-top: 1px solid rgba(244, 241, 236, 0.14);
  color: var(--on-dark-muted);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-footer__logo {
  width: auto;
  height: clamp(44px, 4.6vw, 66px);
  opacity: 0.9;
}

.site-footer__info {
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
}

.site-footer .link-grow {
  color: var(--on-dark-soft);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(244, 241, 236, 0.08);
  font-size: 12px;
}


/* 18. Simple pages (privacy, 404, thanks)
   ========================================================================== */

.page-header {
  padding: 20px var(--gutter);
  background: var(--ink);
}

.page-header img {
  width: auto;
  height: 48px;
}

.page {
  max-width: 72ch;
  padding: clamp(48px, 8vh, 96px) var(--gutter) var(--section-y);
}

.page h1 {
  margin-bottom: 24px;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.page h2 {
  margin: 36px 0 10px;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  text-transform: uppercase;
}

.page p,
.page li {
  color: var(--stone-850);
  font-size: var(--fs-body);
  line-height: 1.65;
}

.page p + p {
  margin-top: 12px;
}

.page ul {
  margin: 12px 0;
  padding-left: 1.2em;
  list-style: disc;
}

.page .btn {
  margin-top: 32px;
}


/* 18b. Cookie banner and consent
   ========================================================================== */

/* Shown by JS only when no choice has been stored yet */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: clamp(16px, 2.5vw, 22px) var(--gutter);
  border-top: 1px solid rgba(244, 241, 236, 0.18);
  background: var(--ink-menu);
  color: var(--on-dark-soft);
  animation: rise 0.5s var(--ease-out) both;
}

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px clamp(20px, 3vw, 44px);
  margin: 0 auto;
  max-width: 1100px;
}

.cookie-banner__text {
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.55;
}

.cookie-banner__title {
  margin-bottom: 4px;
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cookie-banner__text a {
  color: var(--sky);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-banner .btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-border: var(--paper);
  --btn-wipe: var(--sky);
  --btn-fg-hover: var(--ink);
}

/* Outlined variant, used for "Reject" */
.cookie-banner .btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-border: rgba(244, 241, 236, 0.5);
  --btn-wipe: var(--paper);
  --btn-fg-hover: var(--ink);
}

@media (max-width: 600px) {
  .cookie-banner__actions .btn {
    flex: 1 1 130px;
  }
}

/* A <button> that looks like a text link ("Cookie settings") */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.site-footer__legal--inline {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

/* reCAPTCHA
   The v3 badge is hidden, which Google allows as long as the notice next to
   the Send button credits reCAPTCHA (it does). v2 shows a tick-box instead. */
.grecaptcha-badge {
  visibility: hidden;
}

.form__recaptcha:not(:empty) {
  margin-top: 8px;
}

.form__privacy--fine {
  font-size: 12px;
  color: var(--stone-600);
}

.form__privacy--fine a {
  color: var(--stone-400);
}


/* 19. Mobile carousels
   --------------------------------------------------------------------------
   Kept after the section styles on purpose: below 900px these rules must
   override the grid / column layouts used on desktop.
   ========================================================================== */

@media (max-width: 900px) {
  .carousel-hint {
    display: flex;
  }

  /* Horizontal swipe carousel */
  .carousel {
    display: flex;
    flex-direction: row;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 4px;
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .carousel::-webkit-scrollbar {
    display: none;
  }

  .carousel > * {
    flex: 0 0 auto;
    width: 78vw;
    max-width: 340px;
    scroll-snap-align: center;
  }

  /* The approach steps sit in a full-width section, so use a fixed inset */
  .steps.carousel {
    margin: 36px 0 0;
    padding: 0 20px 4px;
    scroll-padding-inline: 20px;
  }
}


/* 20. Scroll animations
   --------------------------------------------------------------------------
   Everything below only applies once js/main.js has added .js-motion to
   <html>. Without JavaScript (and for most crawlers) all content is visible.
   ========================================================================== */

/* General fade-and-rise for text blocks, as each section scrolls in */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--ease-out) var(--reveal-delay, 0ms),
    transform 0.9s var(--ease-out) var(--reveal-delay, 0ms);
}

/* Images wipe open from the top */
.js-motion img.reveal {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: scale(1.05);
  transition:
    clip-path 1.1s var(--ease-out) var(--reveal-delay, 0ms),
    transform 1.5s var(--ease-out) var(--reveal-delay, 0ms);
}

.js-motion .reveal.is-in {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: none;
}

.js-motion .reveal.no-transition {
  transition: none;
}

/* "Why PT" question rows slide in from the right */
.js-motion .question-list li {
  opacity: 0;
  transform: translateX(160px);
}

.js-motion .question-list li.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s var(--ease-out),
    transform 1.15s var(--ease-out),
    color 240ms ease;
}

/* Approach steps arrive one row at a time (desktop) */
.js-motion .step > * {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 420ms var(--ease-out),
    transform 520ms var(--ease-out);
}

.js-motion .step.is-in > * {
  opacity: 1;
  transform: none;
}

.js-motion .step {
  transition: background-color 620ms ease;
}

.js-motion .step.is-lit {
  background-color: var(--ink-raised);
  transition-duration: 780ms;
}

/* Client story cards fade in one after another (desktop) */
.js-motion .story-card {
  opacity: 0;
  transition: opacity 620ms var(--ease-out) var(--reveal-delay, 0ms);
}

.js-motion .story-card.is-in {
  opacity: 1;
}

/* The £90 price appears once its heading has lit up */
.js-motion .primary-offer__price {
  opacity: 0;
  transform: translateY(14px);
}

.js-motion .primary-offer__price.is-in {
  opacity: 1;
  transform: none;
}

/* Word-by-word colour scrub (words are wrapped in spans by JS) */
.scrub-word {
  transition: color 260ms ease;
}

@media (max-width: 900px) {
  .js-motion .question-list li {
    transform: translateX(60px);
  }

  /* Mobile carousels are never hidden */
  .js-motion .step > *,
  .js-motion .story-card {
    opacity: 1;
    transform: none;
  }
}


/* 21. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}