/* ==========================================================================
   Potting Shed | Social Leads landing page
   Brand: PP Neue Montreal (primary), Quarto italic (accent words)
   Accent: PS blue #50CDFF, grounded by #171717 / #F2F2F2
   Stat bubbles only: teal / hot pink / orange / yellow from brand palette
   Buttons: 1px outline pills. On light bg hover fills blue; on coloured bg
   hover fills black; on dark bg hover fills blue.
   Radius system: buttons = pill, media tiles = 14px, phone = 44px
   ========================================================================== */

/* Self-hosted brand webfonts, the same cuts pottingshed.com serves. Without
   these the page only renders correctly on machines with the fonts installed
   locally and falls back to Helvetica Neue / Georgia everywhere else.
   Quarto is italic-only by design — it is used solely for accent words. */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../assets/fonts/neue-montreal-book.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../assets/fonts/neue-montreal-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../assets/fonts/neue-montreal-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quarto";
  src: url("../assets/fonts/quarto-medium-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Quarto";
  src: url("../assets/fonts/quarto-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --blue: #50cdff;
  --ink: #171717;
  --paper: #f2f2f2;
  --teal: #01fecd;
  --pink: #ff16a5;
  --orange: #ff840a;
  --yellow: #fde619;
  --grey: #6f6f6f;
  --grey-on-dark: #9a9a9a;
  --pad: clamp(20px, 3.4vw, 56px);
  --tile-radius: 14px;
  --font-sans: "PP Neue Montreal", "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Quarto", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }

/* one display scale for every full-width section title (~86px at 1440) */
h2 { font-size: clamp(2.5rem, 6vw, 5.5rem); }

em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

a { color: inherit; }

/* full-width sections, confident edge padding (site goes full width) */
.container { width: 100%; padding: 0 var(--pad); }
.container--narrow { max-width: 1080px; margin: 0 auto; }

/* ---------- logo (recoloured via CSS mask) ---------- */
.logo-mask {
  display: block;
  width: 100%;
  aspect-ratio: 1732.76 / 365.21;
  background: currentColor;
  -webkit-mask: url("../assets/ps-logo.svg") no-repeat center / contain;
  mask: url("../assets/ps-logo.svg") no-repeat center / contain;
}

/* ---------- icons (Flaticon basic straight lineal, recoloured via CSS mask) ---------- */
.icon-mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.step__icon--strategy  { -webkit-mask-image: url("../assets/icons/strategy.svg");  mask-image: url("../assets/icons/strategy.svg"); }
.step__icon--creative  { -webkit-mask-image: url("../assets/icons/creative.svg");  mask-image: url("../assets/icons/creative.svg"); }
.step__icon--launch    { -webkit-mask-image: url("../assets/icons/launch.svg");    mask-image: url("../assets/icons/launch.svg"); }
.step__icon--learn     { -webkit-mask-image: url("../assets/icons/learn.svg");     mask-image: url("../assets/icons/learn.svg"); }
.step__icon--optimise  { -webkit-mask-image: url("../assets/icons/optimise.svg");  mask-image: url("../assets/icons/optimise.svg"); }
.step__icon--report    { -webkit-mask-image: url("../assets/icons/report.svg");    mask-image: url("../assets/icons/report.svg"); }
.way__icon--awareness  { -webkit-mask-image: url("../assets/icons/social-awareness.svg"); mask-image: url("../assets/icons/social-awareness.svg"); }
.way__icon--campaign   { -webkit-mask-image: url("../assets/icons/social-campaign.svg");  mask-image: url("../assets/icons/social-campaign.svg"); }

/* ---------- buttons: 1px outline pills, site-accurate sizing ---------- */
.btn {
  display: inline-block;
  border: 1px solid var(--ink);
  border-radius: 300px;
  background: transparent;
  color: var(--ink);
  padding: 16px 40px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.25s var(--ease);
}
.btn:active { transform: scale(0.98); }

/* on light backgrounds: hover becomes a solid highlight button */
.btn:hover { background: var(--blue); border-color: var(--blue); }

/* on coloured backgrounds: hover becomes a solid black button */
.on-colour .btn:hover,
.btn--oncolour:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* on dark backgrounds: white outline, hover becomes a solid highlight button */
.btn--ondark { border-color: #fff; color: #fff; }
.btn--ondark:hover { background: var(--blue); color: var(--ink); border-color: var(--blue); }

/* keyboard focus */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- eyebrow ---------- */
.eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 22px;
}
.eyebrow--accent { color: var(--blue); }

/* ---------- nav: solid bar, creative scrolls behind ---------- */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: 112px;
  /* solid fallback first for browsers without color-mix (older iOS Safari) */
  background: var(--blue);
  background: color-mix(in srgb, var(--blue) 90%, transparent);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad);
}
/* logo stays white on every accent, as on pottingshed.com */
.nav__logo { width: 200px; color: #fff; justify-self: start; }
.nav__links {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: clamp(28px, 3.3vw, 48px);
}
.nav__link {
  font-size: 24px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.nav__link:hover { color: #fff; }
.nav__cta { justify-self: end; }
.nav .btn { padding: 15px 36px; }

/* burger + full-screen mobile menu (matches pottingshed.com) */
.nav__burger {
  display: none;
  justify-self: end;
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  background-color: currentColor;
}
.nav__burger--close { width: 30px; height: 30px; }
.nav__burger.icon-mask { -webkit-mask-image: url("../assets/icons/menu.svg"); mask-image: url("../assets/icons/menu.svg"); }
.nav__burger--close.icon-mask { -webkit-mask-image: url("../assets/icons/menu-close.svg"); mask-image: url("../assets/icons/menu-close.svg"); }

.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--blue);
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad);
}
.mobilemenu[hidden] { display: none; }
.mobilemenu__top {
  height: 84px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobilemenu__top .nav__logo { width: 150px; }
.mobilemenu__links {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding-bottom: 84px;
}
.mobilemenu__links a:not(.btn) {
  font-size: 40px;
  color: var(--ink);
  text-decoration: none;
}
.mobilemenu__links .btn { margin-top: 16px; }
body.menu-open { overflow: hidden; }
.nav .btn--fill {
  background: #f8f8f8;
  border-color: #f8f8f8;
  color: var(--ink);
}
.nav .btn--fill:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--blue);
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.hero__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  padding: 112px var(--pad) 0;
}
.hero__title {
  font-size: clamp(2.7rem, 5.9vw, 5.7rem);
  margin-bottom: 32px;
}
.hero__title em { padding-right: 0.06em; }
.hero__sub {
  font-size: clamp(1.15rem, 1.55vw, 1.375rem);
  line-height: 1.45;
  max-width: 42ch;
  margin-bottom: 44px;
}

/* staggered entrance on load */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * {
    opacity: 0;
    translate: 0 26px;
    animation: rise 0.9s var(--ease) forwards;
  }
  .hero__copy > *:nth-child(2) { animation-delay: 0.1s; }
  .hero__copy > *:nth-child(3) { animation-delay: 0.2s; }
  .hero__copy > *:nth-child(4) { animation-delay: 0.3s; }
}
@keyframes rise { to { opacity: 1; translate: 0 0; } }
.hero__reel { position: relative; height: 100dvh; }

/* the creative reel: two counter-scrolling columns, slightly tilted */
.reel {
  position: absolute;
  inset: -12% -4%;
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  transform: rotate(-4deg);
}
.reel__col { flex: 1; overflow: hidden; }
.reel__track {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 24px);
  animation: reel-up 46s linear infinite;
}
.reel__col--down .reel__track { animation: reel-down 52s linear infinite; }
.reel__track img {
  width: 100%;
  border-radius: var(--tile-radius);
}
@keyframes reel-up   { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes reel-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* ---------- case study shared ---------- */
.case { padding: clamp(90px, 10vw, 160px) 0; }
.case--dark { background: var(--ink); color: #fff; }
.case--light { background: #fff; }
.case__head { max-width: 1100px; margin-bottom: clamp(48px, 6vw, 88px); }
.case__body { font-size: 22px; max-width: 56ch; line-height: 1.45; }
.case--dark .case__body { color: #d8d8d8; }

.case__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* phone with auto-scrolling ad feed */
.case__phone { display: flex; justify-content: center; }
.phone {
  width: min(330px, 78vw);
  border-radius: 44px;
  padding: 12px;
  background: #2b2b2b;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* overflow hidden so page scrolling is never trapped; the feed auto-drifts
   via JS (scrollTop still works programmatically) and users drag it like a phone */
.phone__screen {
  border-radius: 34px;
  overflow: hidden;
  aspect-ratio: 9 / 17.5;
  background: #000;
  cursor: grab;
  touch-action: pan-x;
}
.phone__screen.is-dragging { cursor: grabbing; }
.phone__feed {
  display: flex;
  flex-direction: column;
}
.phone__feed video { width: 100%; display: block; }

/* floating stat bubbles: one brand colour each, big numerals */
.case__stats {
  position: relative;
  min-height: 660px;
}
.bubble {
  position: absolute;
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  animation: floaty 7s ease-in-out infinite;
  transition: background-color 0.35s var(--ease), scale 0.35s var(--ease);
}
.bubble:hover { background: #fff; scale: 1.06; }
.bubble--teal   { background: var(--teal); }
.bubble--yellow { background: var(--yellow); }
.bubble--orange { background: var(--orange); }
.bubble--pink   { background: var(--pink); }
.bubble .stat {
  font-size: clamp(3rem, 4.6vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.bubble .stat__label {
  display: block;
  font-size: 1.05rem;
  line-height: 1.3;
  max-width: 17ch;
  margin-top: 12px;
}
.bubble--a { width: clamp(240px, 22vw, 320px); height: clamp(240px, 22vw, 320px); top: 0;     left: 2%;  animation-delay: 0s; }
.bubble--b { width: clamp(200px, 18vw, 262px); height: clamp(200px, 18vw, 262px); top: 56px;  right: 6%; animation-delay: -2.2s; }
.bubble--c { width: clamp(196px, 17.5vw, 252px); height: clamp(196px, 17.5vw, 252px); bottom: 30px; left: 14%; animation-delay: -4.1s; }
.bubble--d { width: clamp(230px, 21vw, 306px); height: clamp(230px, 21vw, 306px); bottom: 0;  right: 12%; animation-delay: -5.6s; }
@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}

.case__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  margin-top: clamp(56px, 7vw, 100px);
  align-items: start;
}
.quote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.quote figcaption { margin-top: 22px; font-size: 17px; color: var(--grey-on-dark); }

/* featured-in press strip (inside the dark case study) — symmetric padding,
   matching the .trusted section so the gap above the logos equals the gap below */
#cloudfirst { padding-bottom: 0; }
.press {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  border-top: 1px solid #333;
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(36px, 4vw, 56px) 0;
}
.press__logos {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
  flex-wrap: wrap;
}
.press__label { font-size: 15px; color: var(--grey-on-dark); white-space: nowrap; }
.press img { height: clamp(20px, 2.3vw, 34px); width: auto; filter: invert(1); opacity: 0.92; }

/* ---------- process ---------- */
.process { background: var(--paper); padding: clamp(90px, 10vw, 160px) 0 clamp(60px, 7vw, 100px); }
.process__head { max-width: 900px; margin-bottom: clamp(48px, 6vw, 80px); }
.process__lede { margin-top: 28px; font-size: 22px; line-height: 1.45; color: var(--grey); }
.steps { list-style: none; border-top: 1px solid #d9d9d9; }
.step {
  display: grid;
  grid-template-columns: 90px 72px minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 24px;
  padding: 34px 0;
  border-bottom: 1px solid #d9d9d9;
}
.step__num { font-size: 1.05rem; color: var(--grey); transition: color 0.3s; }
.step__icon { width: 44px; height: 44px; color: var(--ink); }
.step__icon svg { width: 100%; height: 100%; display: block; }
.step__name { font-size: clamp(2.2rem, 3.9vw, 3.75rem); letter-spacing: -0.02em; }
.step__desc {
  font-size: 22px;
  color: var(--grey);
  opacity: 0.6;
  transition: opacity 0.4s var(--ease);
}
.step.is-active .step__desc { opacity: 1; }
.step.is-active .step__num { color: var(--ink); }
.step.is-active .step__icon { color: var(--blue); }
.step.is-active .step__name { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 3px; text-underline-offset: 10px; }

/* "All right Potting Shed" full-width strip */
.strip {
  display: block;
  margin: clamp(60px, 7vw, 100px) 0 0;
  border: 1px solid var(--ink);
  border-radius: 300px;
  padding: 26px 32px;
  text-align: center;
  font-size: 22px;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.strip:hover { background: var(--blue); border-color: var(--blue); }

/* ---------- manifesto band ---------- */
.manifesto {
  background: var(--ink);
  color: #fff;
  padding: clamp(100px, 12vw, 180px) 0;
  text-align: center;
}
.manifesto__title { margin-bottom: 32px; }
.manifesto__title em { color: var(--blue); padding-right: 0.05em; }
.manifesto__body {
  font-size: 22px;
  line-height: 1.45;
  color: #d8d8d8;
  max-width: 52ch;
  margin: 0 auto;
}
/* ---------- creative tickers: slow infinite rows ---------- */
.ticker {
  --tile-h: clamp(220px, 25vw, 360px);
  --tile-w: calc(var(--tile-h) * 0.8);
  --tile-gap: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  display: flex;
  margin-top: clamp(90px, 10vw, 150px);
}
.ticker__track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  will-change: transform;
  animation: ticker-rtl 80s linear infinite;
}
.ticker--ltr .ticker__track { animation-name: ticker-ltr; }

/* scrollable variant: JS drifts scrollLeft, user can flick through */
.ticker--scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ticker--scroll::-webkit-scrollbar { display: none; }
.ticker--scroll .ticker__track { animation: none; }
.ticker__set {
  display: flex;
  flex: 0 0 auto;
  gap: var(--tile-gap);
  padding-right: var(--tile-gap);
}
.ticker img,
.ticker video {
  flex: 0 0 var(--tile-w);
  width: var(--tile-w);
  height: var(--tile-h);
  max-width: none;
  object-fit: cover;
  border-radius: var(--tile-radius);
  display: block;
}
@keyframes ticker-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ticker-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- tekex ---------- */
.tekex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 90px);
  align-items: center;
}
.tekex__media { position: relative; padding-bottom: 90px; }
.tekex__img { border-radius: var(--tile-radius); display: block; }
.tekex__img--main { width: 86%; aspect-ratio: 1 / 1; object-fit: cover; }
.tekex__img--float {
  position: absolute;
  width: 52%;
  right: 0;
  bottom: 0;
  box-shadow: 0 30px 70px rgba(23, 23, 23, 0.25);
}
.statlist__title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grey);
  margin-top: 48px;
}
.statlist {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 48px;
  margin-top: 24px;
}
.statlist .stat {
  font-size: clamp(3.4rem, 5.9vw, 5.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}
.statlist .stat__label {
  display: block;
  margin-top: 12px;
  font-size: 18px;
  color: var(--grey);
  max-width: 24ch;
}

/* ---------- managed (blue block) ---------- */
.managed { background: var(--paper); color: var(--ink); padding: clamp(90px, 10vw, 150px) 0; }
.managed__head { margin-bottom: clamp(48px, 6vw, 80px); }
.managed__title { font-size: clamp(2.4rem, 5.4vw, 5rem); max-width: 22ch; }

/* team: full-bleed ticker of animated portraits, name + role beneath */
.ticker--team {
  --tile-h: clamp(240px, 24vw, 340px);
  --tile-w: calc(var(--tile-h) * 0.8);
  margin-top: 0;
  margin-bottom: clamp(56px, 6vw, 88px);
}
.ticker--team .ticker__set { align-items: start; }
.team__member {
  flex: 0 0 var(--tile-w);
  width: var(--tile-w);
  margin: 0;
}
.team__member img {
  width: 100%;
  height: var(--tile-h);
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 18px;
  display: block;
}
.team__name, .team__role { display: block; }
.team__name { font-size: 20px; line-height: 1.3; }
.team__role { font-size: 18px; color: var(--grey); }

/* copy left + pull quote right, quote column on the same grid line as Tekex copy */
.managed__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 90px);
  align-items: start;
}
.managed__text { max-width: 46ch; }
.managed__text p { font-size: 22px; line-height: 1.45; }
.managed__text p + p { margin-top: 22px; }
.managed__quote-mark {
  width: clamp(46px, 4vw, 60px);
  height: clamp(46px, 4vw, 60px);
  color: var(--ink);
  margin-bottom: clamp(20px, 2vw, 30px);
  -webkit-mask-image: url("../assets/icons/quote.svg");
  mask-image: url("../assets/icons/quote.svg");
}
.managed__quote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.managed__quote-hl { color: var(--grey); }
.managed__quote figcaption {
  margin-top: 22px;
  font-size: 17px;
  color: var(--grey);
}
.managed__cta {
  display: block;
  margin-top: clamp(56px, 6vw, 88px);
  border: 1px solid var(--ink);
  border-radius: 300px;
  padding: 26px 32px;
  text-align: center;
  font-size: 22px;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.managed__cta:hover { background: var(--blue); border-color: var(--blue); }

/* ---------- ways ---------- */
.ways { background: #fff; padding: clamp(90px, 10vw, 160px) 0; }
.ways__head { max-width: 900px; margin-bottom: clamp(48px, 6vw, 80px); }
.ways__lede { margin-top: 24px; font-size: 22px; line-height: 1.45; color: var(--grey); }
.ways__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
}
/* cards styled like pottingshed.com/contact brand-journey cards */
.way {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  padding: clamp(32px, 3.2vw, 52px);
  transition: transform 0.35s var(--ease);
}
.way:hover { transform: translateY(-6px); }
.way__icon {
  width: clamp(44px, 3.8vw, 56px);
  height: clamp(44px, 3.8vw, 56px);
  color: #c4c4c4;
  margin-bottom: clamp(24px, 2.4vw, 36px);
}
.way__icon svg { width: 100%; height: 100%; display: block; }
.way h3 { font-size: clamp(2.3rem, 3.2vw, 3rem); margin-bottom: 10px; }
.way__tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.6vw, 1.45rem);
  line-height: 1.25;
  margin-bottom: 20px;
}
.way > p:not(.way__tag):not(.way__label) { font-size: 18px; line-height: 1.55; max-width: 46ch; }
.way__label { margin-top: 30px; font-size: 18px; }
.checks { list-style: none; margin-top: 16px; display: grid; gap: 14px; }
.checks li {
  position: relative;
  padding-left: 36px;
  font-size: 18px;
  line-height: 24px;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 24px;
  height: 24px;
  background-color: var(--blue);
  -webkit-mask: url("../assets/icons/card-tick.svg") no-repeat center / contain;
  mask: url("../assets/icons/card-tick.svg") no-repeat center / contain;
}
.way__link {
  margin-top: auto;
  padding-top: 34px;
  font-size: 18px;
  text-underline-offset: 4px;
}
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.chips li {
  border: 1px solid var(--ink);
  border-radius: 300px;
  padding: 9px 18px;
  font-size: 0.9rem;
}

/* ---------- more / trust row ---------- */
.more { background: var(--paper); padding: clamp(90px, 10vw, 150px) 0 0; overflow: hidden; }
.more__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.more .ticker { margin-top: 0; padding-bottom: clamp(90px, 9vw, 130px); }

/* ---------- testimonials ---------- */
.testimonials { background: var(--paper); padding: 0 0 clamp(80px, 9vw, 130px); }
.testimonials__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(44px, 5vw, 72px);
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 72px);
}
.testimonial__mark {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--blue);
  margin-bottom: 20px;
  -webkit-mask-image: url("../assets/icons/asterisk.svg");
  mask-image: url("../assets/icons/asterisk.svg");
  animation: asterisk-spin 24s linear infinite;
}
@keyframes asterisk-spin { to { rotate: 360deg; } }
.testimonial blockquote {
  font-size: 17px;
  line-height: 1.5;
  color: #3d3d3d;
}
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-size: 17px; }
.testimonial__role { font-size: 15px; color: var(--grey); }

/* ---------- trusted by ---------- */
/* keyline sits inside the container (not full-bleed) so it matches .press */
.trusted {
  background: var(--paper);
  padding: 0 0 clamp(36px, 4vw, 56px);
}
.trusted__row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  border-top: 1px solid #d9d9d9;
  padding-top: clamp(36px, 4vw, 56px);
}
.trusted__logos {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
  flex-wrap: wrap;
}
.trusted__label { font-size: 15px; color: var(--grey); white-space: nowrap; }
.trusted__row img { height: clamp(26px, 2.6vw, 38px); width: auto; opacity: 0.85; }

/* ---------- final cta with brand video ---------- */
.cta {
  position: relative;
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: clamp(130px, 15vw, 220px) 0;
  overflow: hidden;
}
.cta__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 23, 0.74);
}
.cta .container--narrow { position: relative; z-index: 1; }
.cta__title { margin-bottom: 32px; }
.cta__title em { color: var(--blue); padding-right: 0.05em; }
.cta__body {
  font-size: 22px;
  line-height: 1.45;
  color: #e2e2e2;
  max-width: 50ch;
  margin: 0 auto 48px;
}

/* ---------- footer (site-accurate, blue, full width) ---------- */
.footer {
  background: var(--blue);
  color: var(--ink);
  padding-top: clamp(60px, 7vw, 96px);
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 110px);
  padding-bottom: clamp(56px, 6vw, 88px);
}
.footer__signup > p:first-child { font-size: 22px; line-height: 1.4; max-width: 24ch; }
.footer__form {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  max-width: 340px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
}
.footer__form input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  color: var(--ink);
  outline: none;
}
.footer__form input::placeholder { color: var(--ink); opacity: 0.85; }
.footer__form button {
  border: 0;
  background: transparent;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.25s var(--ease);
}
.footer__arrow {
  width: 24px; height: 24px;
  -webkit-mask-image: url("../assets/icons/email-arrow.svg");
  mask-image: url("../assets/icons/email-arrow.svg");
}
.footer__form button:hover { transform: translateX(4px); }
.footer__note { margin-top: 16px; font-size: 15px; max-width: 38ch; }
.footer__note a { text-decoration: underline; }
.footer__social { display: flex; gap: 18px; margin-top: 24px; font-size: 15px; }
.footer__social a { text-decoration: underline; text-underline-offset: 3px; }
.footer__col h4 { font-weight: 400; font-size: 22px; margin-bottom: 16px; }
.footer__col p { font-size: 18px; line-height: 1.5; }
.footer__col p + p { margin-top: 14px; }
.footer__col a { text-decoration: underline; text-underline-offset: 3px; }
.footer__mark {
  display: block;
  color: #fff;
  width: 100%;
  padding: 0 var(--pad);
}
.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 22px;
  margin-top: -1.5%;
}
.footer__legal p, .footer__legal a { font-size: 15px; }
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- reveal on scroll (staggered within groups) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.case__stats .reveal:nth-child(2),
.steps .reveal:nth-child(2),
.statlist .reveal:nth-child(2),
.ways__grid .reveal:nth-child(2),
.testimonials__grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.case__stats .reveal:nth-child(3),
.steps .reveal:nth-child(3),
.statlist .reveal:nth-child(3),
.testimonials__grid .reveal:nth-child(3) { transition-delay: 0.24s; }
.case__stats .reveal:nth-child(4),
.steps .reveal:nth-child(4),
.statlist .reveal:nth-child(4) { transition-delay: 0.36s; }
.steps .reveal:nth-child(5) { transition-delay: 0.48s; }
.steps .reveal:nth-child(6) { transition-delay: 0.6s; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .case__grid { grid-template-columns: minmax(0, 1fr); }
  .case__stats { min-height: 560px; }
  .bubble--a { left: 0; }
  .bubble--b { right: 0; }
  .managed__grid, .tekex { grid-template-columns: 1fr; }
  .testimonials__grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__signup { grid-column: 1 / -1; }
}

/* The desktop nav (200px logo + four 24px links + button) needs ~830px before
   it starts colliding, so collapse to the burger well before that. */
@media (max-width: 1000px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
}

@media (max-width: 768px) {
  .nav { height: 84px; }
  .nav__logo { width: 150px; }

  /* hero: creative sits a comfortable, balanced distance below the CTA */
  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: 108px;
    gap: 0;
  }
  .hero { min-height: 0; }
  .hero__title { font-size: clamp(2.5rem, 10vw, 3.4rem); }
  .hero__title br { display: none; }
  .hero__sub { margin-bottom: 40px; }
  .hero__cta { margin-bottom: clamp(48px, 13vw, 72px); }
  .hero__reel { height: 480px; }
  .reel { inset: -8% -4%; }
  .ticker { --tile-h: 210px; margin-top: 64px; }
  .btn { padding: 15px 32px; font-size: 18px; }
  .strip { font-size: 18px; padding: 20px 28px; }

  /* process list: number + icon in a fixed gutter, name and body both aligned
     to the same left edge under/after the icon (no full-left body) */
  .step {
    grid-template-columns: 30px 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 12px;
    align-items: center;
    padding: 26px 0;
  }
  .step__num { grid-row: 1; align-self: center; }
  .step__icon { grid-row: 1; }
  .step__name { grid-column: 3; grid-row: 1; font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .step__desc { grid-column: 3; grid-row: 2; opacity: 1; font-size: 18px; }

  .case__foot { grid-template-columns: 1fr; }
  .case__stats {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
  }
  /* min-width: 0 is load-bearing — aspect-ratio would otherwise turn the tall
     wrapped label into a minimum width and blow the grid past the viewport. */
  .bubble {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    animation: none;
    padding: 18px;
  }
  .bubble .stat { font-size: clamp(2rem, 9vw, 2.6rem); }
  .bubble .stat__label { font-size: 0.82rem; }
  .process__lede, .managed__text p, .ways__lede, .manifesto__body,
  .cta__body, .case__body { font-size: 19px; }
  .statlist { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .ways__grid { grid-template-columns: 1fr; }

  /* logo rows: label left, logos in a tidy 2-column grid (as on pottingshed.com) */
  .press, .trusted__row { flex-direction: column; align-items: flex-start; gap: clamp(28px, 7vw, 44px); }
  .press__logos, .trusted__logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    gap: clamp(48px, 13vw, 76px) 24px;
    width: 100%;
  }
  .press img { height: 30px; }
  .trusted__row img { height: 32px; }

  /* team section: smaller ticker portraits, copy + quote stack */
  .managed__head { max-width: none; }
  .ticker--team { --tile-h: 230px; }
  .team__name { font-size: 18px; }
  .team__role { font-size: 16px; }
  .managed__grid { gap: 44px; }
  .managed__quote blockquote { max-width: none; }
  .managed__cta { font-size: 18px; padding: 22px 26px; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__legal { margin-top: 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reel__track, .phone__feed, .bubble, .ticker__track, .testimonial__mark { animation: none !important; }
  .ticker { overflow-x: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .way { transition: none; }
  .cta__video { display: none; }
}