/* ==========================================================================
   StudioEDT — Design System
   Flexbox only (no CSS grid) so every section maps to a Wix flex container.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (from the StudioEDT brand sheet) */
  --white:    #FFFFFF;
  --lav-50:   #F0F2FF;
  --lav-100:  #D2D9FF;
  --lav-300:  #AFACFB;
  --lav-500:  #9592ED;
  --ink:      #000000;

  /* Derived. #9592ED only hits 2.8:1 on white, so text-weight purple is darker. */
  --lav-700:  #4F4BB8;
  --lav-25:   #F8F9FF;
  --ink-80:   #2B2B33;
  --ink-60:   #5A5A66;
  --ink-40:   #8A8A96;
  --line:     #E6E8F5;
  --line-dark: rgba(255, 255, 255, 0.14);

  /* Type */
  --font-display: 'Syne', 'Arial Black', Arial, sans-serif;
  --font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --fs-display: clamp(2.9rem, 8.4vw, 7rem);
  --fs-h1:      clamp(2.3rem, 5.6vw, 4.4rem);
  --fs-h2:      clamp(1.65rem, 4vw, 3.1rem);
  --fs-h3:      clamp(1.3rem, 2vw, 1.65rem);
  --fs-h4:      clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-lg:      1.1875rem;
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* Spacing */
  --sp-1: 8px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px;

  --section-y: clamp(64px, 8.5vw, 128px);
  --gutter: clamp(20px, 4vw, 40px);
  --maxw: 1240px;

  /* Shape + depth */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(16, 16, 40, 0.05);
  --shadow-md: 0 12px 32px rgba(16, 16, 40, 0.08);
  --shadow-lg: 0 28px 64px rgba(16, 16, 40, 0.14);
  --shadow-lav: 0 20px 48px rgba(149, 146, 237, 0.32);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t: 240ms;
  --t-slow: 420ms;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
/* Balancing helps big display lines but makes short card titles break into
   three ragged lines, so smaller headings wrap normally. */
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.015em; text-wrap: pretty; }
h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

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

strong { font-weight: 700; }

::selection { background: var(--lav-500); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--lav-700);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible,
.section--lav :focus-visible { outline-color: var(--ink); }
.section--dark :focus-visible { outline-color: var(--lav-300); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--white);
  padding: 14px 22px;
  border-radius: 0 0 var(--r-sm) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives — flexbox only
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }
/* Wording that differs between a phone and everything wider. The phone copy
   is hidden by default and swapped in inside the 720px query. */
.only-phone { display: none; }
.container--wide { max-width: 1440px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--soft { background: var(--lav-25); }
.section--soft-2 { background: var(--lav-50); }

.section--dark {
  background: var(--ink);
  color: var(--white);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark .lede, .section--dark .muted { color: rgba(255, 255, 255, 0.66); }

/* Black text on lavender — white would fail contrast on these tints. */
.section--lav {
  background: linear-gradient(140deg, var(--lav-300) 0%, var(--lav-500) 100%);
  color: var(--ink);
}

/* --row-gap drives both the flex gap and the u-Nup basis maths, so a wider
   gap can never push the last column onto its own line. */
.row {
  --row-gap: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap);
}
.row--gap-lg { --row-gap: var(--sp-6); }
.row--gap-sm { --row-gap: var(--sp-2); }
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }
.row--middle { align-items: center; }
.row--stretch { align-items: stretch; }
.row--nowrap { flex-wrap: nowrap; }
.row--column { flex-direction: column; }

/* Equal-width children. calc() keeps the gap out of the basis. */
.u-2up > * { flex: 1 1 calc(50% - (var(--row-gap) / 2)); min-width: 0; }
.u-3up > * { flex: 1 1 calc(33.333% - (var(--row-gap) * 2 / 3)); min-width: 0; }
.u-4up > * { flex: 1 1 calc(25% - (var(--row-gap) * 3 / 4)); min-width: 0; }

.u-grow { flex: 1 1 0; min-width: 0; }
.u-shrink-0 { flex-shrink: 0; }

.stack { display: flex; flex-direction: column; }
.stack--1 { gap: var(--sp-1); }
.stack--2 { gap: var(--sp-2); }
.stack--3 { gap: var(--sp-3); }
.stack--4 { gap: var(--sp-4); }
.stack--5 { gap: var(--sp-5); }
.stack--6 { gap: var(--sp-6); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lav-700);
  margin-bottom: var(--sp-3);
}
.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex-shrink: 0;
}
/* the 0.16em tracking leaves a trailing gap after the last letter, so pull
   the closing dash back by that much to keep both gaps optically equal */
.eyebrow::after { margin-left: -0.16em; }
.section--dark .eyebrow { color: var(--lav-300); }
.section--lav .eyebrow { color: var(--ink); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.038em;
  margin: 0;
}

.lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 62ch;
}
.muted { color: var(--ink-60); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }

.accent { color: var(--lav-700); }
.section--dark .accent { color: var(--lav-300); }

.italic-accent {
  font-style: italic;
  font-weight: 600;
  color: var(--lav-700);
}
.section--dark .italic-accent { color: var(--lav-300); }

/* Outlined display text, used as a rhythm break in big headlines.
   The stroke colour must be set explicitly — currentColor would resolve to
   the transparent fill and render nothing. */
.outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}
.section--dark .outline-text { -webkit-text-stroke-color: var(--white); }
.section--lav .outline-text { -webkit-text-stroke-color: var(--ink); }

/* Fallback for engines without -webkit-text-stroke */
@supports not (-webkit-text-stroke: 1px black) {
  .outline-text { color: var(--lav-500); }
  .section--dark .outline-text { color: var(--lav-300); }
}

.highlight {
  background: linear-gradient(180deg, transparent 58%, var(--lav-300) 58%);
  padding-inline: 2px;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform var(--t) var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--primary:hover { background: var(--lav-500); border-color: var(--lav-500); color: var(--ink); box-shadow: var(--shadow-lav); }

.btn--lav { background: var(--lav-500); color: var(--ink); border-color: var(--lav-500); }
.btn--lav:hover { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: var(--shadow-md); }

.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--light:hover { background: var(--lav-300); border-color: var(--lav-300); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }

.section--dark .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.section--dark .btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn--sm { min-height: 44px; padding: 10px 20px; font-size: var(--fs-xs); }
.btn--lg { min-height: 60px; padding: 18px 36px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* Text link with an animated underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--lav-700);
  min-height: 44px;
  padding-block: 10px;
  position: relative;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t) var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--lav-300); }

/* --------------------------------------------------------------------------
   6. Header + navigation
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
}
.header__logo img { width: 152px; height: auto; transition: opacity var(--t) var(--ease); }
.header__logo:hover img { opacity: 0.72; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-80);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--lav-50); }
.nav__link.is-active { color: var(--ink); background: var(--lav-100); }

.header__cta { flex-shrink: 0; }

.burger {
  display: none;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  cursor: pointer;
  padding: 0;
  transition: background var(--t) var(--ease);
}
.burger:hover { background: var(--lav-50); }
.burger__box { position: relative; width: 20px; height: 14px; }
.burger__box span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6px; }
.burger__box span:nth-child(3) { top: 12px; }
.burger[aria-expanded='true'] .burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Over the open drawer the header sits on black, so invert it or the black
   wordmark and burger disappear. */
.header.is-nav-open {
  background: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header.is-nav-open .header__logo img { filter: brightness(0) invert(1); }
.header.is-nav-open .burger { border-color: rgba(255, 255, 255, 0.55); }
.header.is-nav-open .burger:hover { background: rgba(255, 255, 255, 0.1); }
.header.is-nav-open .burger__box span { background: var(--white); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  color: var(--white);
  padding: calc(var(--header-h) + 32px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }

.drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--white);
  opacity: 0;
  transform: translateY(18px);
  transition: color var(--t) var(--ease);
}
.drawer.is-open .drawer__link {
  animation: drawerIn 480ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.drawer__link:hover { color: var(--lav-300); }
.drawer__link.is-active { color: var(--lav-300); }
.drawer__link span {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--lav-500);
  font-weight: 700;
}
@keyframes drawerIn { to { opacity: 1; transform: translateY(0); } }

.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
}
.drawer__foot a.mail {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--lav-300);
  font-size: var(--fs-body);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(32px, 6vw, 72px));
  padding-bottom: clamp(48px, 7vw, 96px);
  overflow: hidden;
  background: linear-gradient(178deg, var(--lav-25) 0%, var(--white) 62%);
}
.hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  position: relative;
  z-index: 2;
}
.hero__copy { flex: 1 1 540px; min-width: 0; }
.hero__visual {
  flex: 0 1 420px;
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: center;
}

/* Sized to the copy column rather than the viewport, so long words never
   spill under the visual. */
.hero__title {
  margin-bottom: var(--sp-4);
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
}
.hero__title .line { display: block; }

/* Once fitHeadline() has run, each line is scaled to fill the column edge to
   edge, so the two sentences form a clean rectangle instead of a ragged stack.
   nowrap is only applied after fitting, so the headline still wraps safely if
   the script never runs. */
.hero__title.is-fitted { line-height: 0.94; }
.hero__title.is-fitted .line { white-space: nowrap; }
.hero__title.is-fitted .line + .line { margin-top: 0.04em; }

/* Each word carries its own mask, so a wrapped line still animates cleanly. */
.hero__title .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
.hero__title .word {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.hero.is-in .hero__title .word {
  transform: translateY(0);
  transition: transform 820ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.hero__lede { max-width: 50ch; margin-bottom: var(--sp-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.hero__meta-item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--ink-60); }
.hero__meta-item svg { width: 18px; height: 18px; color: var(--lav-700); flex-shrink: 0; }

/* Shared stage: the lavender orb + dashed ring sit behind whatever the
   hero or About page places on top (the content board, or the portrait). */
.stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.stage__blob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: linear-gradient(155deg, var(--lav-300) 0%, var(--lav-500) 55%, var(--lav-700) 120%);
  border-radius: 50%;
  z-index: 0;
}
.stage__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 109%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(0, 0, 0, 0.16);
  border-radius: 50%;
  z-index: 0;
  animation: spin 34s linear infinite;
}
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.portrait__img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  /* The drop shadow was rendering as a faint rectangular edge behind the
     cutout and softening the whole image. Removed for a cleaner, sharper
     portrait. */
  /* Clipped to the solid circle below its centre, and left uncropped above it
     so the head still breaks out over the top of both circles.
     Layer 1 is the circle itself, layer 2 keeps everything above the midline,
     and the two are added together. */
  -webkit-mask-image:
    radial-gradient(circle closest-side at 50% 50%, #000 99.5%, transparent 100%),
    linear-gradient(to bottom, #000 0 50%, transparent 50%);
  mask-image:
    radial-gradient(circle closest-side at 50% 50%, #000 99.5%, transparent 100%),
    linear-gradient(to bottom, #000 0 50%, transparent 50%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* --------------------------------------------------------------------------
   7b. Content plan board — the hero graphic
   A scheduling view showing a week of designed, scheduled posts. Built from
   flex rows so it maps to a Wix container; export as PNG for the rebuild.
   -------------------------------------------------------------------------- */
.workboard {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 336px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.5deg);
  transition: transform 600ms var(--ease);
}
.hero__visual:hover .workboard { transform: rotate(0deg) translateY(-4px); }

.workboard__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.workboard__title {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.workboard__title svg { width: 17px; height: 17px; color: var(--lav-700); }
.workboard__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--lav-100);
  color: var(--lav-700);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.workboard__chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2BB673;
  flex-shrink: 0;
}

/* Week strip */
.workboard__days {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 14px 0;
}
.workboard__day {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ink-40);
  letter-spacing: 0.04em;
}
.workboard__dot {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.workboard__day.is-on { color: var(--lav-700); }
.workboard__day.is-on .workboard__dot { background: var(--lav-500); }

/* Post thumbnails */
.workboard__posts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wb-post {
  position: relative;
  flex: 1 1 calc(33.333% - (8px * 2 / 3));
  max-width: calc(33.333% - (8px * 2 / 3));
  min-width: 0;
  margin: 0;
  border-radius: 11px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--lav-50);
}
.wb-post img { width: 100%; height: 100%; object-fit: cover; }

/* Abstract post artwork — drawn in CSS so the hero ships no extra images and
   the tiles stay on-palette. Each reads as a different content format. */
.wb-art {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9px 9px 11px;
  overflow: hidden;
}
.wb-art__shape {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wb-art__lines { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.wb-art__lines span { display: block; height: 5px; border-radius: 3px; }
.wb-art__lines span:nth-child(1) { width: 88%; }
.wb-art__lines span:nth-child(2) { width: 62%; }
.wb-art__lines span:nth-child(3) { width: 74%; }

/* 1 — image post: gradient with a floating badge */
.wb-art--1 { background: linear-gradient(150deg, var(--lav-300) 0%, var(--lav-500) 100%); }
.wb-art--1 .wb-art__shape { background: rgba(255, 255, 255, 0.85); align-self: flex-end; }
.wb-art--1 .wb-art__lines span { background: rgba(255, 255, 255, 0.9); }

/* 2 — text post: light card with a headline block */
.wb-art--2 { background: var(--lav-50); justify-content: flex-end; }
.wb-art--2 .wb-art__lines span { background: var(--lav-500); }
.wb-art--2 .wb-art__lines span:first-child { height: 9px; background: var(--lav-700); }

/* 3 — short-form video: play mark on a deep gradient */
.wb-art--3 {
  background: linear-gradient(160deg, var(--lav-500) 0%, var(--lav-700) 100%);
  align-items: center;
  justify-content: center;
}
.wb-art--3::before {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
  margin-left: 4px;
}

/* 4 — carousel: stacked card with page dots */
.wb-art--4 { background: var(--lav-100); align-items: center; justify-content: center; gap: 9px; }
.wb-art--4 .wb-art__card {
  width: 72%; height: 52%;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 10px rgba(30, 28, 70, 0.12);
}
.wb-art--4 .wb-art__dots { display: flex; gap: 4px; }
.wb-art--4 .wb-art__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--lav-700); opacity: 0.4; }
.wb-art--4 .wb-art__dots i:first-child { opacity: 1; }

/* 5 — story: dark tile with an accent mark */
.wb-art--5 { background: var(--ink); }
.wb-art--5 .wb-art__shape { background: var(--lav-500); align-self: flex-end; }
.wb-art--5 .wb-art__lines span { background: rgba(255, 255, 255, 0.42); }
.wb-art--5 .wb-art__lines span:first-child { background: var(--lav-300); }

.wb-post__time {
  position: absolute;
  left: 5px; top: 5px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--white);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 5px;
  line-height: 1.4;
}

/* Placeholder slot — the "next post" still to be filled */
.wb-post--empty {
  background: var(--lav-25);
  border: 1.5px dashed var(--lav-300);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lav-500);
}
.wb-post--empty svg { width: 18px; height: 18px; }

.workboard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  color: var(--ink-60);
}
.workboard__foot strong { color: var(--ink); font-family: var(--font-display); }
.workboard__avatars { display: flex; }
.workboard__avatars span {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -7px;
  background: linear-gradient(140deg, var(--lav-300), var(--lav-700));
}
.workboard__avatars span:first-child { margin-left: 0; }

/* Floating stat cards */
.float-card {
  position: absolute;
  z-index: 3;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
  will-change: transform;
}
.float-card__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lav-100);
  color: var(--lav-700);
  flex-shrink: 0;
}
.float-card__icon svg { width: 17px; height: 17px; }
/* Stacked, not inline — side by side the cards grew wide enough to run off
   the edge of a phone. */
.float-card__val {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.float-card__label { display: block; font-size: 0.72rem; color: var(--ink-60); line-height: 1.25; }

/* Positioned to overhang the board's edges, clear of its header row and
   inside the viewport at every width. */
.float-card--a { top: 20%;  left: -13%; animation: floatY 6s ease-in-out infinite; }
/* Sits clearly off the right edge of the purple circle. -11% is the limit
   at 1280px, where the container already reaches close to the viewport. */
.float-card--b { top: 51%;  right: -11%; animation: floatY 7.5s ease-in-out infinite 0.8s; }
.float-card--c { bottom: 13%; left: -11%; animation: floatY 6.8s ease-in-out infinite 0.4s; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* --------------------------------------------------------------------------
   8. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--ink-60);
  transition: color var(--t) var(--ease);
  flex-shrink: 0;
}
.marquee__item svg { width: 24px; height: 24px; }
.marquee__item:hover { color: var(--ink); }
.section--dark .marquee__item { color: rgba(255, 255, 255, 0.6); }
.section--dark .marquee__item:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--lav-300); }
.card--flat:hover { transform: none; box-shadow: none; }
.card--soft { background: var(--lav-25); }
.card--dark { background: #111118; border-color: var(--line-dark); color: var(--white); }
.card--lav { background: var(--lav-100); border-color: transparent; }

.icon-box {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--lav-100);
  color: var(--lav-700);
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.icon-box svg { width: 26px; height: 26px; }
.card:hover .icon-box { background: var(--lav-500); color: var(--ink); transform: rotate(-6deg) scale(1.05); }
.section--dark .icon-box { background: rgba(149, 146, 237, 0.16); color: var(--lav-300); }
.section--lav .icon-box { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.icon-box--sm { width: 44px; height: 44px; border-radius: 12px; margin-bottom: var(--sp-3); }
.icon-box--sm svg { width: 21px; height: 21px; }

/* Full-width section header: eyebrow, heading, supporting line stacked left */
.section-head { margin-bottom: var(--sp-6); max-width: 100%; }
.section-head__title {
  /* Both lines of the shortened heading fit the 1160px column at this size. */
  font-size: clamp(2.1rem, 5.9vw, 4.75rem);
  margin-bottom: var(--sp-4);
  max-width: 28ch;
}
@media (max-width: 720px) {
  /* Let the heading find its own breaks once the column is narrow. */
  .section-head__title br { display: none; }
}
.section-head__lede {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 66ch;
  margin: 0;
}
@media (max-width: 720px) {
  .section-head__lede br { display: none; }
}
/* The grey is tuned for light backgrounds; lift it on dark strips. */
.section--dark .section-head__lede { color: rgba(255, 255, 255, 0.7); }
.section--lav .section-head__lede { color: rgba(0, 0, 0, 0.68); }

/* Pillar card titles break at a fixed point so all four sit on the same two
   lines. Tighter gaps and padding buy back the width the longest word needs
   ("Management" is the constraint), and nowrap makes sure no token ever
   splits mid-word or at a hyphen. */
.cards--pillars { --row-gap: 16px; }
.cards--pillars .card { padding-inline: 22px; }
.pillar-title {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  hyphens: manual;
}
.pillar-title span {
  display: block;
  white-space: nowrap;
}

/* Headings broken where they read best rather than wherever the column runs
   out. Used on card and step titles that were falling to three or four lines. */
.stack-2 span { display: block; }

/* Below the 4-up breakpoint the cards are twice as wide, so the titles can
   go back to the normal card heading size. */
@media (max-width: 1180px) {
  .pillar-title { font-size: var(--fs-h3); }
}

/* Numbered process step */
.step { position: relative; display: flex; flex-direction: column; }
.step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--lav-500);
  margin-bottom: var(--sp-3);
  transition: color var(--t) var(--ease);
}
.step:hover .step__num { color: var(--lav-500); }
.section--dark .step__num { -webkit-text-stroke-color: var(--lav-300); }
.section--dark .step:hover .step__num { color: var(--lav-300); }
.step__rule {
  height: 2px;
  background: var(--line);
  margin-bottom: var(--sp-3);
  position: relative;
  overflow: hidden;
}
.step__rule::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--lav-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}
.step.is-visible .step__rule::after { transform: scaleX(1); }
.section--dark .step__rule { background: var(--line-dark); }

/* Feature list with ticks */
.ticks { display: flex; flex-direction: column; gap: 11px; }
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.ticks svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: var(--lav-700); }
.section--dark .ticks svg { color: var(--lav-300); }
.ticks--on-lav svg { color: var(--ink); }

/* --------------------------------------------------------------------------
   10. Stat band + counters
   -------------------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.stat__label { font-size: var(--fs-sm); line-height: 1.4; opacity: 0.8; max-width: 22ch; }
.stat + .stat { position: relative; }

/* --------------------------------------------------------------------------
   11. Pricing
   -------------------------------------------------------------------------- */
.toggle {
  display: inline-flex;
  align-items: center;
  padding: 5px;
  background: var(--lav-50);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  gap: 4px;
}
.section--dark .toggle { background: rgba(255, 255, 255, 0.07); border-color: var(--line-dark); }
.section--lav .toggle { background: rgba(255, 255, 255, 0.5); border-color: rgba(0, 0, 0, 0.1); }
.toggle__btn {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 10px 22px;
  min-height: 44px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
  opacity: 0.65;
}
.toggle__btn:hover { opacity: 1; }
.toggle__btn[aria-pressed='true'] {
  background: var(--ink);
  color: var(--white);
  opacity: 1;
}
.section--dark .toggle__btn[aria-pressed='true'] { background: var(--lav-500); color: var(--ink); }

.plans { align-items: stretch; }

.plan {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 36px);
  position: relative;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--lav-300); }

.plan--featured {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.plan--featured:hover { border-color: var(--lav-500); }
.plan--featured .plan__name { color: var(--white); }
.plan--featured .plan__note,
.plan--featured .plan__period { color: rgba(255, 255, 255, 0.62); }
.plan--featured .ticks svg { color: var(--lav-300); }
.plan--featured .plan__divider { background: var(--line-dark); }

.plan__badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--lav-500);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.plan__badge svg { width: 14px; height: 14px; }

.plan__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.plan__amount {
  font-family: var(--font-display);
  font-weight: 800;
  /* Sized so the widest amount still clears the card padding. The pound sign
     is wider than the dollar, so GBP sets the ceiling: at the old 3.4rem
     "£1,480" ran about 10px into the right padding. */
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
/* Always on its own line. It used to get there by overflowing, which
   meant the shortest price kept it alongside and the row of three did
   not line up. */
.plan__period { font-size: var(--fs-sm); color: var(--ink-60); flex: 0 0 100%; }
.plan__note { font-size: var(--fs-xs); color: var(--ink-60); }
.plan__divider { height: 1px; background: var(--line); margin-block: var(--sp-4); }
.plan__cta { margin-top: var(--sp-4); }
.plan__foot { margin-top: auto; padding-top: var(--sp-4); }
/* Cadence label above each run of ticks, so "per week" and "per month" are
   stated once instead of on every line. */
.plan__group {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.70rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lav-700);
  margin: 19px 0 11px;
}
.plan__group--first { margin-top: 0; }
.plan--featured .plan__group { color: var(--lav-300); }

/* Price value swap animation */
.price-val { display: inline-block; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.price-val.is-swapping { opacity: 0; transform: translateY(-8px); }

/* A light card sitting inside a dark section must not inherit the section's
   white text, or its copy disappears against the card. */
.section--dark .addon,
.section--dark .card:not(.card--dark),
.section--dark .plan:not(.plan--featured) { color: var(--ink); }

.section--dark .addon h1, .section--dark .addon h2,
.section--dark .addon h3, .section--dark .addon h4,
.section--dark .card:not(.card--dark) h1, .section--dark .card:not(.card--dark) h2,
.section--dark .card:not(.card--dark) h3, .section--dark .card:not(.card--dark) h4,
.section--dark .plan:not(.plan--featured) h1, .section--dark .plan:not(.plan--featured) h2,
.section--dark .plan:not(.plan--featured) h3, .section--dark .plan:not(.plan--featured) h4 {
  color: var(--ink);
}

.section--dark .addon .muted,
.section--dark .card:not(.card--dark) .muted,
.section--dark .plan:not(.plan--featured) .muted { color: var(--ink-60); }

.section--dark .addon .icon-box,
.section--dark .card:not(.card--dark) .icon-box {
  background: var(--lav-100);
  color: var(--lav-700);
}
.section--dark .addon .ticks svg,
.section--dark .card:not(.card--dark) .ticks svg { color: var(--lav-700); }

/* Add-on service card */
.addon {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 30px);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.addon:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--lav-300); }
.addon__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.addon__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--lav-700);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Prices in this list are once-off unless a card says otherwise, so the unit
   only appears where it differs. Explicit ink colour: the card is white inside
   a dark section, where .muted would resolve to white on white. The unit sits
   out of flow so a card carrying one keeps the same head height as the rest,
   and every card title stays on the same line. */
.addon__pricing { position: relative; }
.addon__unit {
  position: absolute;
  top: 100%;
  right: 0;
  font-size: var(--fs-xs);
  color: var(--ink-60);
  white-space: nowrap;
  line-height: 1.2;
}
.addon__best {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-60);
  border-top: 1px solid var(--line);
}

/* Comparison table (flex rows, not a grid) */
.compare { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.compare__row { display: flex; border-bottom: 1px solid var(--line); }
.compare__row:last-child { border-bottom: 0; }
.compare__row--head { background: var(--lav-50); }
/* Row highlight. lav-25 was so close to white it read as nothing, so the
   hovered row takes the lav-50 tint plus a lavender edge to mark it clearly.
   The edge is an inset shadow rather than a border so nothing shifts. */
.compare__row:not(.compare__row--head):not(.compare__row--group) {
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.compare__row:not(.compare__row--head):not(.compare__row--group):hover {
  background: var(--lav-50);
  box-shadow: inset 3px 0 0 var(--lav-500);
}
.compare__cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 15px 14px;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid var(--line);
}
.compare__cell:first-child { flex: 1.5 1 0; justify-content: flex-start; text-align: left; border-left: 0; font-weight: 700; }
.compare__row--head .compare__cell { font-family: var(--font-display); font-weight: 700; }
.compare__cell svg { width: 19px; height: 19px; color: var(--lav-700); }
.compare__cell .no { color: var(--ink-40); }
/* "Not included" dash, muted so the ticks stay the thing the eye lands on. */
.compare__no { color: var(--ink-40); font-weight: 700; }

/* Group heading spanning the whole table, matching the cards' cadence labels. */
.compare__row--group { background: var(--lav-25); }
.compare__row--group .compare__cell {
  flex: 1 1 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.70rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lav-700);
  padding: 11px 14px;
  border-left: 0;
}
.compare__row--group:hover { background: var(--lav-25); }
/* Footnote marker. Kept out of the flex flow so it cannot split the label. */
.compare__fn { color: var(--lav-700); font-weight: 700; font-size: 0.8em; }
.compare__foot {
  display: flex;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--ink-60);
  line-height: 1.6;
}
.compare__foot .compare__fn { flex: none; min-width: 15px; }
.compare__foot + .compare__foot { margin-top: 7px; }

/* --------------------------------------------------------------------------
   12. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.section--dark .accordion, .section--dark .accordion__item { border-color: var(--line-dark); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 22px 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
  transition: color var(--t) var(--ease);
}
.accordion__trigger:hover { color: var(--lav-700); }
.section--dark .accordion__trigger:hover { color: var(--lav-300); }
.accordion__icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.section--dark .accordion__icon { border-color: var(--line-dark); }
.accordion__icon::before, .accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.accordion__icon::before { width: 13px; height: 2px; }
.accordion__icon::after { width: 2px; height: 13px; }
.accordion__trigger[aria-expanded='true'] .accordion__icon {
  background: var(--lav-500);
  border-color: var(--lav-500);
  color: var(--ink);
  transform: rotate(180deg);
}
.accordion__trigger[aria-expanded='true'] .accordion__icon::after { transform: scaleY(0); opacity: 0; }

.accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height var(--t-slow) var(--ease);
}
.accordion__inner { padding: 0 0 26px; max-width: 74ch; color: var(--ink-60); font-size: var(--fs-sm); line-height: 1.7; }
.section--dark .accordion__inner { color: rgba(255, 255, 255, 0.66); }
.accordion__inner p + p { margin-top: 12px; }
.accordion__inner ul { display: flex; flex-direction: column; gap: 9px; margin: 12px 0; }
.accordion__inner ul li { display: flex; gap: 10px; }
.accordion__inner ul li::before { content: '—'; color: var(--lav-500); flex-shrink: 0; }
.accordion__inner a { color: var(--lav-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.section--dark .accordion__inner a { color: var(--lav-300); }

/* --------------------------------------------------------------------------
   13. Work gallery
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter {
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink-60);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.filter:hover { border-color: var(--lav-500); color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.gallery { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.gallery__item {
  flex: 1 1 calc(33.333% - (var(--sp-4) * 2 / 3));
  min-width: 0;
  max-width: calc(33.333% - (var(--sp-4) * 2 / 3));
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.gallery__item.is-hidden { display: none; }

.tile {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* The clickable image area. Sits inside .tile so the carousel arrows can be
   real buttons rather than nested inside another button. */
.tile__open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--lav-50);
  border-radius: inherit;
  overflow: hidden;
  cursor: pointer;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 620ms var(--ease);
}
.tile:hover img { transform: scale(1.05); }
.tile__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 20px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.9) 100%);
  color: var(--white);
  text-align: left;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.tile:hover .tile__overlay, .tile__open:focus-visible .tile__overlay { opacity: 1; transform: translateY(0); }
.tile__cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lav-300);
  display: block;
  margin-bottom: 4px;
}
.tile__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.tile__zoom {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.tile__zoom svg { width: 18px; height: 18px; }
.tile:hover .tile__zoom, .tile__open:focus-visible .tile__zoom { opacity: 1; transform: scale(1); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 14, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-height: 100%;
  transform: scale(0.96);
  transition: transform var(--t-slow) var(--ease-out);
}
.lightbox.is-open .lightbox__figure { transform: scale(1); }
.lightbox__img {
  max-height: 74vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.lightbox__caption { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-sm); text-align: center; }

/* slide position inside a carousel, shown next to the title */
.lightbox__step {
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
  white-space: nowrap;
}
.lightbox__caption strong { color: var(--white); font-family: var(--font-display); display: block; font-size: var(--fs-body); }
.lightbox__btn {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.lightbox__btn:hover { background: var(--lav-500); color: var(--ink); border-color: var(--lav-500); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.lightbox__prev { left: clamp(10px, 2.6vw, 32px); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(10px, 2.6vw, 32px); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.07); }

/* --------------------------------------------------------------------------
   14. Phone mockup (pure CSS — exports as an image for Wix)
   -------------------------------------------------------------------------- */
.phone {
  position: relative;
  width: 288px;
  flex-shrink: 0;
  border-radius: 42px;
  background: #0B0B12;
  padding: 11px;
  box-shadow: var(--shadow-lg), 0 0 0 1.5px rgba(255, 255, 255, 0.1) inset;
  transform: perspective(1200px) rotateY(-13deg) rotateX(4deg);
  transition: transform 700ms var(--ease);
}
.phone:hover { transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); }
.phone__notch {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 88px; height: 22px;
  background: #0B0B12;
  border-radius: var(--r-pill);
  z-index: 3;
}
.phone__screen {
  border-radius: 32px;
  overflow: hidden;
  background: var(--white);
  /* The mockup is a white screen inside a dark section — reset the text
     colour or the handle renders white-on-white. */
  color: var(--ink);
  aspect-ratio: 9 / 18.5;
  display: flex;
  flex-direction: column;
}
.phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.phone__handle { display: flex; align-items: center; gap: 8px; }
.phone__avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--lav-300), var(--lav-700));
  flex-shrink: 0;
}
.phone__name { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; }
.phone__feed { flex: 1; overflow: hidden; position: relative; }
.phone__scroll { display: flex; flex-direction: column; animation: feedScroll 30s linear infinite; }
@keyframes feedScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.phone__post { flex-shrink: 0; }
.phone__post img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.phone__actions {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 14px;
  color: var(--ink-60);
}
.phone__actions svg { width: 16px; height: 16px; }
.phone__actions .heart { color: #E0245E; }

/* --------------------------------------------------------------------------
   15. Split / feature rows
   -------------------------------------------------------------------------- */
.split { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 72px); }
.split__col { flex: 1 1 420px; min-width: 0; }
.split--reverse { flex-direction: row-reverse; }

.pain {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.pain:last-child { border-bottom: 0; }
.pain__mark {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFF0F2;
  color: #C7264C;
  margin-top: 2px;
}
.pain__mark svg { width: 15px; height: 15px; }
.pain--fix .pain__mark { background: var(--lav-100); color: var(--lav-700); }
.section--dark .pain { border-color: var(--line-dark); }
.section--dark .pain__mark { background: rgba(255, 255, 255, 0.08); color: var(--lav-300); }

/* Value / pillar item */
.pillar {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.pillar__body h4 { margin-bottom: 5px; }
.pillar__body p { font-size: var(--fs-sm); color: var(--ink-60); }
.section--lav .pillar__body p { color: rgba(0, 0, 0, 0.66); }
.section--dark .pillar__body p { color: rgba(255, 255, 255, 0.66); }

/* Timeline */
.timeline { display: flex; flex-direction: column; }
.timeline__item {
  display: flex;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  position: relative;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__marker { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.timeline__dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--lav-500);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--lav-500);
  margin-top: 6px;
}
.timeline__line { flex: 1; width: 2px; background: var(--line); margin-top: 8px; }
.timeline__item:last-child .timeline__line { display: none; }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 7px; flex: 1 1 240px; min-width: 0; }
.field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.field .req { color: var(--lav-700); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-60); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  min-height: 52px;
  width: 100%;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field textarea { resize: vertical; min-height: 132px; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5A66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--lav-500);
  box-shadow: 0 0 0 4px rgba(149, 146, 237, 0.2);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #C7264C; }
.field .error {
  display: none;
  font-size: var(--fs-xs);
  color: #C7264C;
  font-weight: 700;
}
.field.has-error .error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C7264C; }

.form__note { font-size: var(--fs-xs); color: var(--ink-60); }

/* Two sentences that are separate thoughts, so the second starts its own line
   rather than running on from the first. */
.form__note--stacked span { display: block; }
.form__note--stacked span + span { margin-top: 3px; }

/* Long forms were running every question straight into the next, which put a
   label nearer the field above it than the field it belongs to. Tighter to its
   own input, clearly apart from the neighbours. */
.field { row-gap: 5px; }
.form-group > .field + .field,
.form-group > .field + .row,
.form-group > .row + .field,
.form-group > .row + .row { margin-top: var(--sp-4); }

/* Onboarding: a platform the package does not stretch to. Still legible, but
   plainly not available until something else is unticked. */
.check.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--line);
  background: var(--lav-25);
}
.check.is-disabled:hover { border-color: var(--line); }
.check.is-disabled input { cursor: not-allowed; }

/* Onboarding: the welcome, and the practical note that follows it. */
.lede--welcome { color: var(--lav-700); font-weight: 700; }
.lede--welcome-note { color: var(--ink-60); }

/* Onboarding form: a long form split into numbered sections, plus tick lists
   for the multi-answer questions. Every target is at least 44px so the whole
   thing is workable with a thumb. */
.form-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-group + .form-group {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.form-group__legend {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  padding: 0;
}
.form-group__num { color: var(--lav-700); font-variant-numeric: tabular-nums; }
.form-group__intro { font-size: var(--fs-sm); color: var(--ink-60); margin-bottom: var(--sp-4); }
/* Sections without an intro line had their first label pressed against the
   heading, so they read tighter than the ones that have one. */
.form-group__legend + .field,
.form-group__legend + .row { margin-top: 18px; }

.checks { display: flex; flex-wrap: wrap; gap: 9px; }
.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.check:hover { border-color: var(--lav-300); }
.check input { width: 17px; height: 17px; accent-color: var(--lav-700); flex: none; cursor: pointer; }
.check:has(input:checked) { border-color: var(--lav-500); background: var(--lav-50); }

/* Stacked consent lines, where the label is a sentence rather than a chip. */
.consent { display: flex; align-items: flex-start; gap: 11px; font-size: var(--fs-sm); line-height: 1.55; cursor: pointer; }
.consent + .consent { margin-top: 14px; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lav-700); flex: none; cursor: pointer; }
.consent a { color: var(--lav-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: clamp(32px, 5vw, 56px);
  background: var(--lav-50);
  border: 1px solid var(--lav-100);
  border-radius: var(--r-lg);
}
.form-success.is-visible { display: flex; }
.form-success__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--lav-500);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.form-success__icon svg { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--white); padding-block: clamp(56px, 7vw, 88px) 32px; }
.footer__top { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); justify-content: space-between; }
.footer__brand { flex: 1 1 300px; max-width: 380px; }
.footer__brand img { width: 168px; margin-bottom: var(--sp-4); }
.footer__brand p { color: rgba(255, 255, 255, 0.62); font-size: var(--fs-sm); }
.footer__cols { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); }
.footer__col { flex: 0 1 auto; min-width: 140px; }
/* A label, not a heading — keeping it out of the outline avoids an h2→h4
   jump on pages whose last section heading is an h2. */
.footer__col-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lav-300);
  margin: 0 0 var(--sp-3);
}
.footer__col ul { display: flex; flex-direction: column; gap: 2px; }
.footer__col a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--t) var(--ease), padding-left var(--t) var(--ease);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.footer__col a:hover { color: var(--white); padding-left: 5px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}
.socials { display: flex; gap: 10px; }
.social {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.78);
  transition: all var(--t) var(--ease);
}
.social svg { width: 18px; height: 18px; }
.social:hover { background: var(--lav-500); color: var(--ink); border-color: var(--lav-500); transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__glow {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(149, 146, 237, 0.5), transparent 68%);
  filter: blur(46px);
  pointer-events: none;
}
.cta-band__glow--1 { top: -180px; left: -120px; }
.cta-band__glow--2 { bottom: -260px; right: -140px; background: radial-gradient(circle, rgba(175, 172, 251, 0.42), transparent 68%); }
.cta-band__inner { position: relative; z-index: 1; }

/* Badge / pill label */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--lav-100);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}
.section--dark .pill { background: rgba(149, 146, 237, 0.18); color: var(--lav-300); }
.pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2BB673;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(43, 182, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0); }
}

/* Page hero (inner pages) */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 76px));
  padding-bottom: clamp(40px, 5vw, 68px);
  background: linear-gradient(178deg, var(--lav-25), var(--white));
}
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: var(--fs-xs); color: var(--ink-60); margin-bottom: var(--sp-3); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; }
.breadcrumb a:hover { color: var(--lav-700); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal='left']  { transform: translateX(-30px); }
[data-reveal='right'] { transform: translateX(30px); }
[data-reveal='scale'] { transform: scale(0.95); }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .u-4up > * { flex-basis: calc(50% - (var(--row-gap) / 2)); }
  .gallery__item { flex-basis: calc(50% - (var(--sp-4) / 2)); max-width: calc(50% - (var(--sp-4) / 2)); }
}

@media (max-width: 960px) {
  :root { --header-h: 68px; }

  .nav, .header__cta { display: none; }
  .burger { display: flex; }

  .u-3up > * { flex-basis: calc(50% - (var(--row-gap) / 2)); }
  .split--reverse { flex-direction: row; }

  .hero__visual { flex-basis: 100%; order: -1; }
  .stage { max-width: 320px; }
  .workboard { max-width: 300px; padding: 16px; }
  /* Keep the bubbles over the thumbnails, never over the board's title row
     or its footer line. */
  .float-card { padding: 8px 11px; gap: 9px; }
  .float-card--a { left: -9%;  top: 25%; }
  .float-card--b { right: -12%; top: 53%; }
  .float-card--c { left: -7%;  bottom: 15%; }

  .compare { overflow-x: auto; }
  .compare__row { min-width: 640px; }
}

@media (max-width: 720px) {
  :root { --fs-body: 1rem; --fs-lg: 1.0625rem; }

  .u-2up > *, .u-3up > *, .u-4up > * { flex-basis: 100%; }
  .gallery__item { flex-basis: calc(50% - (var(--sp-4) / 2)); max-width: calc(50% - (var(--sp-4) / 2)); }

  .plan--featured { order: -1; }
  .float-card { padding: 9px 12px; }
  .float-card__val { font-size: 0.9rem; }
  .float-card__label { font-size: 0.66rem; }
  .float-card__icon { width: 28px; height: 28px; }
  .float-card__icon svg { width: 14px; height: 14px; }

  .btn { width: 100%; }
  .btn--inline { width: auto; }
  .hero__actions { flex-direction: column; align-items: stretch; }

  .footer__top { flex-direction: column; }
  .lightbox__img { max-height: 62vh; }
  .phone { width: 244px; }
}

@media (max-width: 460px) {
  .gallery__item { flex-basis: 100%; max-width: 100%; }

  .stage { max-width: 280px; }
  .workboard { max-width: 262px; padding: 14px; }
  .float-card { padding: 7px 10px; gap: 8px; }
  .float-card__val { font-size: 0.82rem; }
  .float-card__label { font-size: 0.62rem; }
  .float-card__icon { width: 26px; height: 26px; border-radius: 8px; }
  .float-card__icon svg { width: 13px; height: 13px; }
  .float-card--a { left: -8%;  top: 26%; }
  .float-card--b { right: -12%; top: 54%; }
  .float-card--c { left: -6%;  bottom: 15%; }
  .filters { gap: 8px; }
  .filter { padding: 9px 15px; font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   21. Motion preferences + print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__title .word { transform: none; }
  .marquee__track, .phone__scroll { animation: none; }
  .phone { transform: none; }
}

@media print {
  .header, .drawer, .lightbox, .cta-band, .footer { display: none; }
  body { color: #000; }
}


/* ==========================================================================
   Client revision pass
   ========================================================================== */

/* HOME — problem / solution columns.
   Both sides now share one title size and one supporting-copy size, so the
   two halves read as a matched pair. */
.compare-pair__title { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.compare-pair__lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 62ch;
  margin-bottom: var(--sp-5);
}

/* Narrow sidebar headings: "Everything" and "questions" are wide enough in
   Syne ExtraBold to overrun a 360px column at the full h2 size. */
.faq-split__aside h2,
.section--soft .split__col[style*="360px"] h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

/* HOME — FAQ.
   The panel used to be capped at 520px and pushed right with margin-left:auto,
   which meant the auto margin swallowed any change to `gap` and the visible
   space between the title and the accordion never moved. The panel now simply
   fills whatever the gap leaves, so this value is the real on-screen gap. */
.faq-split { gap: clamp(28px, 9.8vw, 126px); }
.faq-split .faq-split__aside { flex: 0 1 360px; }
/* A basis below the accordion's natural width keeps it on the same row as
   the title down to the real stacking breakpoint. */
.faq-split .faq-split__panel { flex: 1 1 380px; max-width: none; margin-left: 0; }

/* CTA band — lift the status pill away from the heading. */
.cta-band .pill { transform: translateY(-20%); margin-bottom: 6px; }

/* HOME hero — lift the "Now onboarding" pill away from the headline. */
.hero .pill { transform: translateY(-20%); margin-bottom: 6px; }

/* CTA band headings sit on two lines rather than three. */
.cta-band__title { font-size: clamp(2.1rem, 5vw, 3.6rem); max-width: 24ch; margin-inline: auto; }

/* ABOUT — timeline week headings in the lighter italic purple used elsewhere. */
.timeline__item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  color: var(--lav-700);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

/* SERVICES — standalone services header: bottom-align the supporting line
   with the last line of the heading. */
.head-row--baseline { align-items: flex-end; }

/* SERVICES — add-on cards: keep the divider rule level across every card and
   give it more clearance from the list above. */
.addon__best {
  margin-top: auto;
  padding-top: 20px;
  min-height: 84px;
  display: flex;
  align-items: center;
}
.addon .ticks { margin-bottom: 22px; }

/* SERVICES — custom scope card.
   Heading sits full width on its own line, with the copy and the button
   side by side beneath it and vertically centred on each other. */
.scope-card { padding: clamp(28px, 3.5vw, 42px); }
.scope-card__title { margin-bottom: var(--sp-4); }
.scope-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.scope-card__copy { flex: 1 1 460px; min-width: 0; }
.scope-card__copy p { margin-bottom: 6px; }
.scope-card__copy p + p { margin-top: 0; }
.scope-card__copy p:last-child { margin-bottom: 0; }
.scope-card__cta { flex: 0 0 auto; margin-right: clamp(0px, 5vw, 68px); }
.scope-card__cta:hover,
.scope-card__cta:focus-visible {
  background: var(--lav-700);
  border-color: var(--lav-700);
  color: var(--white);
}

/* The row wraps below about 880px, so the button goes full width from there
   rather than sitting as a short pill on its own line. */
@media (max-width: 880px) {
  .scope-card__cta { width: 100%; margin-right: 0; }
}

/* CONTACT — keep "Prefer email?" on a single line. */
.card--contact h3 { white-space: nowrap; font-size: clamp(1.15rem, 1.8vw, 1.5rem); }

/* CONTACT — numbered "what happens next" rows were overflowing their card. */
.steps-list .pillar { align-items: flex-start; gap: 14px; }
.steps-list .pillar__body { min-width: 0; flex: 1 1 auto; }
.steps-list .pillar__body h4 {
  margin-bottom: 4px;
  /* Syne is a display face and gets hard to read at small sizes, especially on
     a long word like "recommendation". These three sit in the body face
     instead, bolded so they still read as headings. */
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0;
  font-size: 1.02rem;
  line-height: 1.3;
}
.steps-list .pillar__body p { overflow-wrap: anywhere; }
.steps-list .icon-box--sm {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
}

@media (max-width: 960px) {
  .faq-split .faq-split__panel { flex-basis: 100%; }
  /* Once stacked the title would otherwise stick and drift down over the
     accordion. The !important overrides the inline position:sticky. */
  .faq-split .faq-split__aside { position: static !important; flex-basis: 100%; }
  .compare-pair__title { font-size: clamp(1.7rem, 4.4vw, 2.4rem); }
}

@media (max-width: 520px) {
  /* The card is narrower again on a phone, so trim the step headings once more. */
  .steps-list .pillar__body h4 { font-size: 0.98rem; }
}

/* Between 961px and 1240px the container reaches the viewport edge, so the
   bubble needs to tuck back in to stay fully visible. */
/* The container caps at 1240px, so between ~1240 and ~1277 the viewport is
   only just wider than the content and there is still no room for the full
   overhang. The tucked-in values run to 1279px for that reason. */
@media (min-width: 961px) and (max-width: 1279px) {
  /* No room to move the bubble further right here, so the circle comes in
     instead to give the same visual separation. */
  .stage__blob { width: 96%; }
  .float-card--b { right: -6%; }
}

@media (max-width: 360px) {
  /* Not enough room to clear the circle at this width, so tuck it back in. */
  .float-card--b { right: -2%; }
  /* Last resort on very small screens: let single long words such as
     "Straightforward" and "recommendation" hyphenate rather than overrun. */
  h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }
  .pillar-title span { white-space: normal; }
}


/* ==========================================================================
   Revision pass 2
   ========================================================================== */

/* SERVICES — reserve equal space for each add-on card's title and blurb, so
   the tick lists start on the same line right across a row. */
.addon h3 { min-height: 2.4em; }
/* 3 lines at the body line-height of 1.65 */
.addon > p.muted { min-height: 5em; }

/* HOME — the outlined step numerals were rendering with a thin, ragged edge,
   most visibly on the 4. A heavier stroke and a touch more tracking cleans
   the counters up. */
.step__num {
  /* Arial rather than Syne for these numerals. Syne's 4 carries an internal
     triangle and a separate right-hand box, which read as overlapping clutter
     once the glyph is outlined. Arial's figures outline cleanly. */
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  -webkit-text-stroke-width: 2px;
  letter-spacing: 0.01em;
  paint-order: stroke fill;
}
@media (max-width: 720px) {
  .step__num { -webkit-text-stroke-width: 1.6px; }
}

/* WORK — video showcase placeholders, ready for real files to drop in. */
.video-grid { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.video-card {
  /* flex-basis 0 lets the three cards share the row exactly. A percentage
     basis came to 1160px inside a 1160px container, and sub-pixel rounding
     tipped the third card onto its own line. */
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Explicit colour under the gradient so the tile still reads correctly if
     the gradient fails to paint. */
  background-color: var(--lav-100);
  background-image: linear-gradient(160deg, var(--lav-100) 0%, var(--lav-300) 100%);
  border: 1.5px dashed var(--lav-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: var(--sp-4);
}
.video-card video,
.video-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card__play {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--lav-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.video-card__play svg { width: 24px; height: 24px; margin-left: 3px; }
.video-card figcaption { display: flex; flex-direction: column; gap: 4px; }
.video-card__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.video-card__meta { display: block; font-size: var(--fs-xs); color: rgba(0, 0, 0, 0.62); }

/* A card holding a real video rather than a placeholder. The dashed border and
   the lavender gradient go, and the caption moves to the top over a scrim so it
   never collides with the browser's own control bar along the bottom. */
.video-card--filled {
  border-style: solid;
  border-color: var(--line-dark);
  background-image: none;
  background-color: #0B0B12;
  display: block;
  padding: 0;
}
/* No fullscreen on the reels. controlslist covers Chrome and Edge; this
   covers Safari, which ignores it. Firefox offers neither and keeps its
   own button. */
.video-card video::-webkit-media-controls-fullscreen-button { display: none; }

.video-card--filled figcaption {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  gap: 2px;
  padding: var(--sp-3) var(--sp-3) var(--sp-5);
  text-align: left;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.52) 45%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.video-card--filled .video-card__label { color: var(--white); }
.video-card--filled .video-card__meta { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 820px) {
  /* Below this three 9:16 cards get too narrow to read, so they stack. */
  .video-card { flex: 1 1 100%; max-width: 100%; }
}


/* Submission failure notice on the contact form */
.form-error {
  background: #FFF0F2;
  border: 1px solid #F3C6CF;
  color: #8E1B36;
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: var(--fs-sm);
  margin: 0;
}
.form-error a { color: #8E1B36; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form-error[hidden] { display: none; }

/* Keeps a hyphenated phrase from breaking across lines */
.nowrap { white-space: nowrap; }
@media (max-width: 620px) {
  /* At heading size "behind-the-scenes" is wider than a phone screen, so let
     it break rather than run off the edge. */
  .nowrap { white-space: normal; }
}

/* Legal links live in the existing bottom bar, so the footer gains no height */
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer__legal a {
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--t) var(--ease);
  position: relative;
}
.footer__legal a:hover { color: var(--white); }
.footer__legal a + a::before {
  content: '';
  position: absolute;
  left: -10px; top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%);
}
@media (max-width: 560px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
/* The summary box sits centred in the space between the page lede and the
   first heading. The hero's own bottom padding is all the room above it, so
   the same expression goes below, and it stays centred at any width. The
   margin needs the extra specificity to beat `.legal p`. */
.section--legal { padding-top: 0; }
.legal p.legal__note { margin-bottom: clamp(40px, 5vw, 68px); }

.legal { max-width: 74ch; }
.legal h2 {
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  margin: var(--sp-7) 0 var(--sp-3);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-size: var(--fs-h4);
  margin: var(--sp-5) 0 var(--sp-2);
}
.legal p { color: var(--ink-60); margin-bottom: var(--sp-3); }
.legal p strong { color: var(--ink); }
.legal ul { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--sp-4); }
.legal ul li {
  display: flex;
  gap: 12px;
  color: var(--ink-60);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.legal ul li::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lav-500);
  margin-top: 9px;
}
.legal a { color: var(--lav-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal__note {
  background: var(--lav-25);
  border: 1px solid var(--lav-100);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-60);
  margin-bottom: var(--sp-5);
}
.legal__updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--ink-60);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  margin-top: var(--sp-7);
  width: 100%;
}


/* --------------------------------------------------------------------------
   Carousel tiles: flip through slides without leaving the grid
   -------------------------------------------------------------------------- */
.tile__slides { position: absolute; inset: 0; display: block; }
.tile__slides img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.tile__slides img.is-active { opacity: 1; }

.tile__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 38px; height: 38px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t) var(--ease), background var(--t) var(--ease);
  box-shadow: var(--shadow-sm);
}
.tile__nav svg { width: 17px; height: 17px; }
.tile__nav--prev { left: 10px; }
.tile__nav--next { right: 10px; }
.tile__nav:hover { background: var(--lav-300); }
.tile:hover .tile__nav,
.tile__nav:focus-visible { opacity: 1; }

/* Arrows are always visible where there is no hover, such as a phone */
@media (hover: none) {
  .tile__nav { opacity: 1; }
}

.tile__count {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.66);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  pointer-events: none;
}
.tile__count svg { width: 13px; height: 13px; }

.tile__dots {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.tile__dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.tile__dots i.is-on { background: var(--white); transform: scale(1.35); }

/* The overlay caption would sit on top of the dots, so lift it slightly */
.tile--carousel .tile__overlay { padding-bottom: 30px; }

/* Where mask-composite is unavailable, fall back to a plain circular crop
   rather than leaving the portrait unmasked. */
@supports not (mask-composite: add) {
  .portrait__img {
    -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 99.5%, transparent 100%);
    mask-image: radial-gradient(circle closest-side at 50% 50%, #000 99.5%, transparent 100%);
  }
}


/* --------------------------------------------------------------------------
   Video tile in the work gallery
   -------------------------------------------------------------------------- */
.tile--video { margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--ink); }
.tile__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.tile--video:hover .tile__video { transform: none; }

.tile__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}
.tile__play-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--lav-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.tile__play-icon svg { width: 26px; height: 26px; }
.tile--video:hover .tile__play-icon { transform: scale(1.08); background: var(--lav-300); }
.tile--video.is-playing .tile__play { opacity: 0; pointer-events: none; }
.tile--video.is-playing .tile__overlay,
.tile--video.is-playing .tile__badge { opacity: 0; }

.tile__badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.66);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}

/* ==========================================================================
   PHONE LAYOUT
   Everything below is inside a 720px media query, so none of it can reach the
   desktop or landscape-tablet layouts. Above 720px the site is byte for byte
   what it was before this block existed.

   Two ideas, both taken from the reference designs:
     1. Rows of cards stay side by side and are swiped, rather than stacking
        into a very long page. The next card always peeks past the screen edge
        and dots sit underneath, because a clean edge reads as the end.
     2. Sections where text sits beside a visual stay side by side too, with
        the type stepped down to suit the narrower columns.
   ========================================================================== */
@media (max-width: 720px) {

  /* --- card rows, swiped ------------------------------------------------
     The class is added by initSwipeRows(), so if the script never runs the
     rows simply stack as they did before. */
  .swipe-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-3);
    /* Full bleed, so a card can sit flush to the screen edge and the one
       after it shows past the container padding. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 2px;
  }
  .swipe-row::-webkit-scrollbar { display: none; }
  .swipe-row > * {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: start;
  }
  /* Cards in a swipe row match heights, so the dots sit on a straight line. */
  .swipe-row > .card,
  .swipe-row > .addon,
  .swipe-row > .plan { height: auto; }

  .swipe-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-top: var(--sp-3);
  }
  /* The dot is small; the button around it is a 44px target, per WCAG. */
  .swipe-dot {
    width: 44px; height: 44px;
    padding: 0; border: 0; background: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .swipe-dot::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lav-100);
    transition: background var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .swipe-dot.is-on::before { background: var(--lav-700); transform: scale(1.3); }
  .section--dark .swipe-dot::before { background: rgba(255, 255, 255, 0.32); }
  .section--dark .swipe-dot.is-on::before { background: var(--white); }
  .section--lav .swipe-dot::before { background: rgba(0, 0, 0, 0.22); }
  .section--lav .swipe-dot.is-on::before { background: var(--ink); }

  /* The timeline's connector runs down the side of each item, which only
     makes sense in a column. Swiped, each item stands on its own. */
  .swipe-row .timeline__line { display: none; }

  /* --- the work gallery, three across --------------------------------- */
  .gallery { gap: 8px; }
  .gallery__item {
    flex-basis: calc((100% - 16px) / 3);
    max-width: calc((100% - 16px) / 3);
  }

  /* --- text beside its visual ------------------------------------------
     Kept side by side rather than stacked, which is what was asked for. The
     columns are narrow at this width, so the type steps down to match. */
  .split,
  .hero__inner {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .split__col { flex: 1 1 0; min-width: 0; }
  .split .lede,
  .split p,
  .split li,
  .split .ticks li { font-size: 0.8125rem; line-height: 1.5; }
  /* The column is about 167px here, so a heading has to be allowed to break
     inside a word rather than run out of the box. */
  .split h2 {
    font-size: clamp(1.05rem, 4.6vw, 1.5rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .split .eyebrow { font-size: 0.6rem; letter-spacing: 0.06em; }
  /* A button is a flex row, so in a 167px column its label shrinks to the
     longest word, stacks, and the pill radius turns the whole thing into a
     circle. Size it to its content and keep the label on one line. */
  .split .btn {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 12px 16px;
    min-height: 44px;
    gap: 7px;
  }
  .split .btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
  /* Tick lists lose most of their width to the icon and its gap at this size. */
  .split .ticks { gap: 8px; }
  .split .ticks li { gap: 7px; }
  .split .ticks svg { width: 14px; height: 14px; margin-top: 3px; }

  .hero__copy { flex: 1 1 62%; min-width: 0; }
  /* A wider breakpoint sends the visual to the top of a stacked hero. Side by
     side it belongs back on the right. */
  .hero__visual { flex: 1 1 38%; min-width: 0; order: 0; }
  /* The floating stat cards are sized to overhang a full-width stage. In a
     38% column they land on top of the copy, so on a phone the workboard
     stands on its own. */
  .hero__visual .float-card,
  .hero__visual .stage__blob,
  .hero__visual .stage__ring { display: none; }
  .hero__visual .stage { max-width: 100%; }
  .hero__visual .workboard { max-width: 100%; padding: 10px; }
  .hero__title {
    font-size: clamp(1rem, 5.4vw, 1.45rem);
    overflow-wrap: break-word;
  }
  .hero__lede { font-size: 0.8125rem; line-height: 1.5; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__actions .btn { width: 100%; font-size: 0.8125rem; padding-inline: 12px; }
  .hero__meta { flex-direction: column; gap: 8px; }
  .hero__meta-item { font-size: 0.7rem; }

  /* Nothing inside a side-by-side section may push past its own column.
     These are all things sized for a full-width phone layout: a fixed-width
     mockup, a decorative ring drawn wider than its box, an accordion icon
     that will not shrink. */
  .split *,
  .hero__inner * { min-width: 0; }
  .split :is(img, svg, video, canvas) { max-width: 100%; height: auto; }
  .split .phone,
  .split .stage,
  .split .workboard { max-width: 100%; width: 100%; }
  .split .stage__ring,
  .split .stage__blob { display: none; }
  .split .phone__scroll { width: 100%; }
  .split .phone__post img { width: 100%; height: auto; }

  /* The accordion trigger is a flex row; the label was taking the whole width
     and shouldering the icon out of the panel. */
  .accordion__trigger { gap: 10px; align-items: flex-start; }
  .accordion__icon { flex: 0 0 auto; }

  /* Some split columns carry an inline flex basis for the desktop layout
     (the FAQ aside is pinned to 360px, for one). Inline styles outrank a
     class, so this has to shout to get the columns sharing the row evenly. */
  .split > [style*="flex"] { flex: 1 1 0 !important; }

  /* A swipe row full-bleeds to the screen edge, which is right in a container
     and wrong inside a narrow split column. */
  .split .swipe-row {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  /* "Prefer email?" is held on one line for the desktop card, which sets a
     floor on how narrow the column can get. */
  .card--contact h3 { white-space: normal; }

  /* One exception, on the home page. Every other split has a visual on one
     side, so halving the width costs that side a picture rather than its
     readability. "The honest problem" is prose against prose: at 167px each,
     lines like "Every post approved by you before it goes live" come out one
     or two words at a time and stop being readable at all. That one stacks. */
  .split:has(.pain) {
    flex-wrap: wrap;
    gap: var(--sp-5);
  }
  .split:has(.pain) > .split__col { flex: 1 1 100%; }
  .split:has(.pain) .lede,
  .split:has(.pain) p,
  .split:has(.pain) li { font-size: var(--fs-sm); }
  .split:has(.pain) h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); }

  /* The FAQ aside cannot be sticky next to its own panel. */
  .faq-split__aside { position: static !important; }
}

/* ==========================================================================
   PHONE LAYOUT, SECOND PASS
   Again entirely inside a 720px query, so the desktop and landscape-tablet
   layouts cannot see any of it.
   ========================================================================== */
@media (max-width: 720px) {

  /* --- footer: the three link columns across, and tighter ---------------- */
  .footer__cols { flex-wrap: nowrap; gap: 10px; }
  .footer__col { flex: 1 1 0; min-width: 0; }
  .footer__col-h { font-size: 0.58rem; letter-spacing: 0.07em; margin-bottom: 8px; }
  .footer__col a { font-size: 0.72rem; }
  .footer__col ul { gap: 0; }
  .footer__col li a { padding-block: 5px; }

  /* --- home hero: no graphic, so the words get the whole width ---------- */
  .hero__visual { display: none; }
  .hero__copy { flex: 1 1 100%; }
  .hero__copy .pill {
    font-size: 0.66rem;
    padding: 6px 12px;
    white-space: nowrap;
  }
  .hero__title { font-size: clamp(1.9rem, 9.4vw, 2.9rem); }
  .hero__lede { font-size: var(--fs-sm); }
  .hero__actions { flex-direction: row; gap: 10px; }
  .hero__actions .btn { flex: 1 1 0; width: auto; font-size: 0.78rem; padding-inline: 10px; }
  /* The three credentials read as a row, not a list. All three will not fit
     on one line at this size, so each takes a third of the width and wraps
     inside its own column. */
  .hero__meta {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
  }
  .hero__meta-item {
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-start;
    font-size: 0.6rem;
    line-height: 1.35;
    gap: 5px;
  }
  .hero__meta-item svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; }

  /* Shorter wording for the platform line, phone only, sized to hold it on
     a single line: the sentence measures about 35 times the font size, and
     the column is the viewport less its two 20px gutters. */
  .only-phone { display: inline; }
  .only-wide { display: none; }
  p:has(> .only-phone) { font-size: clamp(0.5rem, 2.45vw, 0.62rem); }

  /* --- the problem and solution block is off on a phone ----------------- */
  .section:has(.pain) { display: none; }

  /* --- the four numbers sit as a row ------------------------------------ */
  .row:has(> .stat) { flex-wrap: nowrap; gap: 8px; }
  .row:has(> .stat) > .stat { flex: 1 1 0; min-width: 0; gap: 2px; }
  .row:has(> .stat) .stat__num { font-size: clamp(1.1rem, 5.4vw, 1.6rem); }
  .row:has(> .stat) .stat__label { font-size: 0.56rem; line-height: 1.35; }

  /* --- the output: the mockup sits against the middle of the copy ------- */
  .split:has(.phone) { align-items: center; }

  /* --- packages ---------------------------------------------------------
     Basic, Standard, Premium in that order, and room above the row so the
     "most popular" badge, which sits half outside its card, is not clipped
     by the scroller. */
  .plan--featured { order: 0; }
  .swipe-row:has(> .plan) { padding-top: 16px; }
  .plan__badge { font-size: 0.56rem; padding: 5px 12px; letter-spacing: 0.05em; }

  /* --- accordions ------------------------------------------------------- */
  .accordion__icon { width: 30px; height: 30px; }
  .accordion__icon::before { width: 10px; }
  .accordion__icon::after { height: 10px; }
  /* The list inside an answer is a flex row, so "Basic" and the sentence
     after it were two flex items being squeezed into one line. Let them run
     as ordinary text with a hanging dash. */
  .accordion__inner ul li {
    display: block;
    padding-left: 16px;
    text-indent: -16px;
  }
  .accordion__inner ul li::before { margin-right: 6px; }

  /* --- about: the portrait moves under the words ------------------------ */
  .split:has(.portrait__img) { flex-wrap: wrap; }
  .split:has(.portrait__img) > .split__col { flex: 1 1 100% !important; }
  .split:has(.portrait__img) > .split__col:first-child { order: 2; }
  .split:has(.portrait__img) .stage {
    max-width: 230px;
    width: 100%;
    margin-inline: auto;
  }
  /* The lavender disc and its outline are part of the portrait, not
     decoration to be dropped with the rest. */
  .split:has(.portrait__img) .stage__blob,
  .split:has(.portrait__img) .stage__ring { display: block; }
  .split:has(.portrait__img) .lede,
  .split:has(.portrait__img) p { font-size: var(--fs-sm); }
  .split:has(.portrait__img) h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); }

  /* --- about: "how I work" cards, two across under the heading ---------- */
  .split:has(.stack--4) { flex-wrap: wrap; }
  .split:has(.stack--4) > .split__col { flex: 1 1 100% !important; }
  .split:has(.stack--4) h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .stack--4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .stack--4 > .card {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    padding: 16px;
  }
  .stack--4 > .card h3 {
    font-size: 0.92rem;
    line-height: 1.25;
    overflow-wrap: break-word;
  }
  .stack--4 > .card p { font-size: 0.72rem; line-height: 1.45; }

  /* --- about: the first month, stacked and folded ----------------------- */
  .split:has(.timeline) { flex-wrap: wrap; }
  .split:has(.timeline) > .split__col { flex: 1 1 100% !important; }
  .split:has(.timeline) h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .timeline__item h3 { font-size: 0.95rem; line-height: 1.3; }
  .timeline__item.is-folded h3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    min-height: 44px;
    padding-block: 8px;
  }
  .timeline__item.is-folded h3::after {
    content: '+';
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--lav-700);
    line-height: 1;
  }
  .timeline__item.is-folded.is-open h3::after { content: '\2013'; }
  .timeline__item.is-folded > div > p { display: none; }
  .timeline__item.is-folded.is-open > div > p { display: block; }

  /* --- work: the "one post" heading block is centred -------------------- */
  /* The label is centred over the block; the heading and its paragraph read
     from the left, which is where the eye expects a line of prose to start. */
  .split:has(.ticks--on-lav) > .split__col:first-child { text-align: left; }
  .split:has(.ticks--on-lav) .eyebrow { justify-content: center; }
  /* Automatic hyphenation was splitting "decisions" across two lines. */
  .split:has(.ticks--on-lav) h2 { hyphens: manual; }
}