/* Inflowork, HALDE direction (local draft, unpublished).
   From the template: Archivo (variable) for display and text, IBM Plex Mono labels, square buttons,
   hairline borders, "(0n)" section numbers, a 12-column grid inside max-w 80rem with 20/32px gutters,
   the cubic-bezier(.22,1,.36,1) easing, the fixed header that frosts on scroll, the progressive top blur.
   Flipped to the Inflowork light palette with one accent (periwinkle). */

:root {
  --page: #fdfcfc;
  --band: #f4f3f3;
  --white: #fff;
  --ink: #1c1c1c;
  --n900: #3d3d3d;
  --n700: #525252;
  --n600: #636363;
  --n500: #767676;
  --n400: #949494;
  --n300: #b8b8b8;
  --n200: #dcdcdc;
  --n100: #e5e5e5;
  --n50: #f2f2f2;
  --accent: #6390ff;
  --accent-rgb: 99 144 255;
  --accent-ink: #3e63d6;
  --line: #e5e5e5;
  --muted: #767676;

  --sans:
    "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --mono:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 80rem;
  --gutter: 1.25rem;
  --sec: 6rem;

  /* The kit, restyled to HALDE: square corners, hairlines instead of shadows, mono labels. */
  --k-accent: #6390ff;
  --k-accent-rgb: 99 144 255;
  --k-accent-ink: #3e63d6;
  --k-ink: #1c1c1c;
  --k-n900: #3d3d3d;
  --k-n700: #525252;
  --k-n600: #636363;
  --k-n500: #636363;
  --k-n400: #949494;
  --k-n300: #b8b8b8;
  --k-n200: #dcdcdc;
  --k-n50: #f2f2f2;
  --k-card: #fff;
  --k-line: #e5e5e5;
  --k-line-soft: #f2f2f2;
  --k-radius: 2px;
  --k-radius-sm: 2px;
  --k-font-body: var(--sans);
  --k-font-display: var(--sans);
  --k-font-label: var(--mono);
  --k-label-case: uppercase;
  --k-label-tracking: 0.05em;
  --k-label-weight: 500;
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k-shadow: 0 0 #0000;
  --k-shadow-float: 0 0 #0000;
}
@media (min-width: 640px) {
  :root {
    --gutter: 2rem;
    --sec: 8rem;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.menu-open {
  overflow: hidden;
}
::selection {
  background: var(--ink);
  color: #fff;
}
h1,
h2,
h3,
p,
figure,
ol,
ul {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.mono-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--n600);
}
.muted {
  color: var(--muted);
}
.line {
  display: block;
}
.icon {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 639.98px) {
  .hide-sm {
    display: none;
  }
}

.skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-200%);
}
.skip:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* ---------- Buttons: square, as the template ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  white-space: nowrap;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.btn .icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s var(--ease);
}
.btn-solid {
  background: var(--ink);
  color: #fff;
}
.btn-solid:hover {
  background: var(--n900);
}
.btn-solid:hover .icon-go {
  transform: translateX(2px);
}
.btn-solid:hover .icon-out {
  transform: translate(1px, -1px);
}
.btn-line {
  border-color: var(--n300);
  color: var(--ink);
}
.btn-line:hover {
  border-color: var(--ink);
}
.btn-sm {
  padding: 0.4375rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* ---------- Progressive blur under the header (template device, colour-neutral) ---------- */

.gradient-blur {
  position: fixed;
  z-index: 5;
  inset: 0 0 auto 0;
  height: 12%;
  pointer-events: none;
}
.gradient-blur > div,
.gradient-blur::before,
.gradient-blur::after {
  position: absolute;
  inset: 0;
}
.gradient-blur::before {
  content: "";
  z-index: 1;
  backdrop-filter: blur(0.5px);
  mask: linear-gradient(
    to top,
    rgb(0 0 0 / 0) 0%,
    #000 12.5%,
    #000 25%,
    rgb(0 0 0 / 0) 37.5%
  );
}
.gradient-blur > div:nth-of-type(1) {
  z-index: 2;
  backdrop-filter: blur(1px);
  mask: linear-gradient(
    to top,
    rgb(0 0 0 / 0) 12.5%,
    #000 25%,
    #000 37.5%,
    rgb(0 0 0 / 0) 50%
  );
}
.gradient-blur > div:nth-of-type(2) {
  z-index: 3;
  backdrop-filter: blur(2px);
  mask: linear-gradient(
    to top,
    rgb(0 0 0 / 0) 25%,
    #000 37.5%,
    #000 50%,
    rgb(0 0 0 / 0) 62.5%
  );
}
.gradient-blur > div:nth-of-type(3) {
  z-index: 4;
  backdrop-filter: blur(4px);
  mask: linear-gradient(
    to top,
    rgb(0 0 0 / 0) 37.5%,
    #000 50%,
    #000 62.5%,
    rgb(0 0 0 / 0) 75%
  );
}
.gradient-blur > div:nth-of-type(4) {
  z-index: 5;
  backdrop-filter: blur(8px);
  mask: linear-gradient(
    to top,
    rgb(0 0 0 / 0) 50%,
    #000 62.5%,
    #000 75%,
    rgb(0 0 0 / 0) 87.5%
  );
}
.gradient-blur > div:nth-of-type(5) {
  z-index: 6;
  backdrop-filter: blur(16px);
  mask: linear-gradient(
    to top,
    rgb(0 0 0 / 0) 62.5%,
    #000 75%,
    #000 87.5%,
    rgb(0 0 0 / 0) 100%
  );
}
.gradient-blur > div:nth-of-type(6) {
  z-index: 7;
  backdrop-filter: blur(32px);
  mask: linear-gradient(to top, rgb(0 0 0 / 0) 75%, #000 87.5%, #000 100%);
}
.gradient-blur::after {
  content: "";
  z-index: 8;
  backdrop-filter: blur(64px);
  mask: linear-gradient(to top, rgb(0 0 0 / 0) 87.5%, #000 100%);
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    -webkit-backdrop-filter 0.3s,
    backdrop-filter 0.3s;
}
.site-header.is-scrolled,
body.menu-open .site-header {
  background: rgb(253 252 252 / 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
}
/* The logo file carries about 10% padding on every side, so it's set larger than the type to read at the button's weight. */
.brand img {
  width: auto;
  height: 30px;
}
@media (min-width: 768px) {
  .brand img {
    height: 34px;
  }
}
.nav {
  display: none;
  align-items: center;
  gap: 2rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--n600);
}
.nav a {
  transition: color 0.2s;
}
.nav a:hover {
  color: var(--ink);
}
.header-end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header-cta {
  display: none;
}
.menu-btn {
  display: inline-grid;
  place-items: center;
  margin-right: -0.5rem;
  padding: 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-btn .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.menu-btn .i-close,
.menu-btn[aria-expanded="true"] .i-open {
  display: none;
}
.menu-btn[aria-expanded="true"] .i-close {
  display: block;
}
.mobile-menu {
  display: none;
  background: var(--page);
  border-bottom: 1px solid var(--line);
}
.mobile-menu.is-open {
  display: block;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.mobile-nav a:not(.btn) {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--n50);
  transition: color 0.2s;
}
.mobile-nav a:not(.btn):hover {
  color: var(--n600);
}
.mobile-nav .btn {
  margin-top: 1rem;
  padding-block: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
@media (min-width: 640px) {
  .header-cta {
    display: inline-flex;
  }
}
@media (min-width: 768px) {
  .nav {
    display: flex;
  }
  .menu-btn,
  .mobile-menu,
  .mobile-menu.is-open {
    display: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  /* At least 56px of clear space under the header, so the eyebrow reads with the headline rather than the nav. */
  padding-top: clamp(7.5rem, 15vh, 8.5rem);
  padding-bottom: clamp(3.5rem, 8vh, 5rem);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}
.abyss {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Faded out under the header (so the progressive blur never smears a particle) and into the page at the bottom. */
.abyss canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent 4.5rem,
    #000 9rem,
    #000 50%,
    rgb(0 0 0 / 0.35) 78%,
    transparent 97%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent 4.5rem,
    #000 9rem,
    #000 50%,
    rgb(0 0 0 / 0.35) 78%,
    transparent 97%
  );
}
.abyss.is-on canvas {
  opacity: 1;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.hero-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.hero-eyebrow {
  max-width: 21rem;
  text-wrap: balance;
}
.hero-index {
  flex: none;
  white-space: nowrap;
}

.hero-title {
  font-weight: 300;
  font-size: clamp(2.75rem, 1rem + 6.6vw, 7.25rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.hero-title .hl-line {
  display: inline;
}
.hw {
  display: inline-block;
  will-change: font-weight, font-variation-settings;
}

.hero-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
  align-items: end;
  margin-top: auto;
  padding-top: 3rem;
}
.hero-copy {
  grid-column: 1 / -1;
}
.hero-lead {
  max-width: 31rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--n700);
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.hero-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.375rem;
  margin-top: 1.5rem;
}
.hero-terms li {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.hero-terms li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.hero-scroll {
  display: none;
}
.hero-scroll .icon {
  width: 0.875rem;
  height: 0.875rem;
}

@media (min-width: 640px) {
  .hero-eyebrow {
    max-width: 30rem;
  }
}
@media (min-width: 1024px) {
  .hero-eyebrow {
    max-width: none;
  }
  .hero-title {
    font-size: min(calc(1rem + 6.9vw), 15vh, 7.5rem);
  }
  .hero-title .hl-line {
    display: block;
    white-space: nowrap;
  }
  .hero-copy {
    grid-column: 1 / span 7;
  }
  .hero-scroll {
    display: inline-flex;
    grid-column: 12 / 13;
    justify-self: end;
    align-items: center;
    gap: 0.5rem;
  }
}
@media (min-width: 1280px) {
  .hero-copy {
    grid-column: 1 / span 6;
  }
}

/* Entrance: the template's per-word rise, staggered .05s, started once the fonts are in. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero .hw,
  html.js .hero .rise {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.7s var(--ease),
      transform 0.7s var(--ease);
    transition-delay: var(--d, 0s);
  }
  html.js .hero.is-ready .hw,
  html.js .hero.is-ready .rise {
    opacity: 1;
    transform: none;
  }
  .hero-scroll .icon {
    animation: bob 2.4s var(--ease) infinite;
  }
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(2px);
  }
}

/* ---------- Client logos: a slow ticker (after PSYCHO MAKER's, Michael, October 7), inside HALDE's hairlines ---------- */

.logos {
  border-bottom: 1px solid var(--line);
}
/* The label and the logos are one unit, so nothing divides them; the band's own top and bottom lines frame both.
   Stacked on phones. From tablet up the label sits beside the ticker, which fades out as it reaches it. */
.logos .wrap {
  display: grid;
}
.logos-label {
  padding-top: 1.75rem;
}
@media (min-width: 768px) {
  .logos .wrap {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 3rem;
  }
  .logos-label {
    padding-top: 0;
    white-space: nowrap;
  }
}
/* Two identical groups slide left by half the track, so the loop never shows a seam; the edges fade out. */
.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}
.ticker-track {
  display: flex;
  width: max-content;
}
.ticker-group {
  display: flex;
  align-items: center;
  gap: 6rem;
  margin: 0;
  padding: 0 6rem 0 0;
  list-style: none;
}
.ticker-group li {
  flex: none;
  display: flex;
  align-items: center;
  height: 8rem;
}
.ticker-group li:hover .lg {
  opacity: 1;
  filter: none;
}
@media (max-width: 767px) {
  .ticker-group {
    gap: 3.5rem;
    padding-right: 3.5rem;
  }
  .ticker-group li {
    height: 6.5rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ticker-track {
    animation: ticker 40s linear infinite;
  }
  .ticker:hover .ticker-track {
    animation-play-state: paused;
  }
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
/* Without motion it's one still, centred row. */
@media (prefers-reduced-motion: reduce) {
  .ticker {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ticker-track {
    width: auto;
    justify-content: center;
  }
  .ticker-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 3.5rem;
    padding: 1.5rem 0;
  }
  .ticker-group[aria-hidden="true"],
  .ticker .dup {
    display: none;
  }
}
.lg {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.58;
  mix-blend-mode: multiply;
  transition:
    opacity 0.25s,
    filter 0.25s;
}
.lg-myo,
.lg-alignr {
  height: 30px;
}
.lg-signet {
  height: 54px;
}
.lg-ajl {
  height: 58px;
}

/* ---------- Shared section type ---------- */

.label-row {
  margin-bottom: 2rem;
}
.h2 {
  font-weight: 600;
  font-size: clamp(2.25rem, 1.15rem + 3.4vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lead {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--n700);
  text-wrap: pretty;
}

/* ---------- 2. Who we help ---------- */

/* One band for the whole section, so the statement and its cards read as one block. */
.who {
  padding-block: var(--sec);
  background: var(--band);
  border-bottom: 1px solid var(--line);
}
.statement {
  padding-block: var(--sec);
}
.who .statement {
  padding-block: 0;
}
.statement-title {
  font-weight: 500;
}
.statement-lead {
  max-width: 37rem;
  margin-top: 2.5rem;
}
@media (min-width: 1024px) {
  .statement-body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .statement-title {
    grid-column: 1 / -1;
  }
  .statement-lead {
    grid-column: 7 / span 6;
    margin-top: 3rem;
  }
}
.scrub-word {
  display: inline-block;
}

/* The five problems: cards in the template's gap-px hairline grid (its testimonials grid), each with a drawing
   in the slot the template gives its work images (and their hover: colour back, scale 1.03). */
.who-cards {
  margin-top: clamp(2.75rem, 1.75rem + 2.75vw, 4rem);
}
/* The question sits in a mini strip on top of the cards: the same strip as the diagram's caption bar in section 3
   (height, background, type), joined to the grid so the two read as one box. Its text lines up with the card text. */
.pain-strip {
  display: flex;
  align-items: center;
  min-height: 3.8125rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--n200);
  border-bottom: 0;
  background: var(--page);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--n700);
}
.art-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.pain-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border: 1px solid var(--n200);
  background: var(--n200);
}
.pain-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
}
.pc-art {
  position: relative;
  height: 10.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--n100);
  background-color: var(--page);
  background-image: radial-gradient(
    rgb(28 28 28 / 0.07) 1px,
    transparent 1.3px
  );
  background-size: 16px 16px;
  background-position: 8px 8px;
}
.pc-art svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(0.3) contrast(1.02);
  transform-origin: 50% 55%;
  transition:
    filter 0.25s ease,
    transform 0.5s var(--ease);
}
.pain-card:hover .pc-art svg {
  filter: none;
  transform: scale(1.03);
}
.pc-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 1.75rem;
}
.pain-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  color: var(--n600);
  transition: color 0.2s;
}
.pain-card:hover .pain-num {
  color: var(--accent-ink);
}
.pain-body h3 {
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pain-body p {
  max-width: 34rem;
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--n700);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .pc-art {
    height: 12rem;
  }
  .pc-body {
    padding: 1.75rem 2rem 2rem;
  }
  .pain-strip {
    padding-inline: 2rem;
  }
}
@media (min-width: 768px) {
  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pain-card:last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1024px) {
  .pain-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .pain-card,
  .pain-card:last-child {
    grid-column: span 2;
  }
  .pain-card:nth-child(n + 4) {
    grid-column: span 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pain-card:hover .pc-art svg {
    transform: none;
  }
}

/* ---------- 3. What we do ---------- */

.what {
  padding-block: var(--sec);
  border-bottom: 1px solid var(--line);
}
.what-head .label-row {
  margin-bottom: 1rem;
}
.what-lead {
  max-width: 37rem;
  margin-top: 2rem;
}
@media (min-width: 1024px) {
  .what-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .what-head > * {
    grid-column: 1 / -1;
  }
  .what-head .what-lead {
    grid-column: 7 / span 6;
    margin-top: 3rem;
  }
}
.flow-wrap {
  margin-top: 4rem;
}

/* The before-and-after diagram, flattened to HALDE: hairlines, 2px radii, mono labels, no shadows. */
.flow {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  box-shadow: none;
}
.flow-top {
  border-bottom-color: var(--line);
  background: var(--page);
}
/* Caption and toggle sit on the same inner edges as the stage's columns. */
@media (min-width: 561px) {
  .flow-top {
    padding: 12px clamp(24px, 4vw, 52px);
  }
}
.flow-caption {
  font-size: 0.9375rem;
  color: var(--n700);
}
.seg {
  padding: 3px;
  border-radius: 0;
  background: var(--n50);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg button {
  padding: 9px 18px;
  border-radius: 0;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--n600);
}
.seg button:hover {
  color: var(--ink);
}
.seg button[aria-pressed="true"] {
  color: #fff;
}
.seg button:focus-visible {
  outline-offset: 3px;
}
.seg-thumb {
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 0;
  background: var(--ink);
  box-shadow: none;
}
.flow-stage {
  background-image: radial-gradient(
    rgb(28 28 28 / 0.07) 1px,
    transparent 1.3px
  );
}
.flow-head {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--n600);
}
.tool {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.9375rem;
  color: var(--n900);
}
.tool svg {
  stroke: var(--n600);
  stroke-width: 1.5;
}
.direction {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.45);
  color: var(--n700);
}
.hub {
  border-radius: 2px;
}
.hub-after {
  background: var(--white);
  box-shadow:
    inset 0 0 0 1px rgb(var(--accent-rgb) / 0.5),
    0 0 0 6px rgb(var(--accent-rgb) / 0.07);
}
.hub-after::before {
  border-radius: 3px;
}
.hub-mark {
  border-radius: 2px;
  box-shadow: none;
}
.hub strong {
  font-weight: 600;
  letter-spacing: -0.025em;
}
.hub-before {
  box-shadow: inset 0 0 0 1px var(--n200);
}
.people span {
  border-radius: 0;
  box-shadow:
    0 0 0 2px #fff,
    inset 0 0 0 1px var(--line);
}
.outcome {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--n900);
}
.oc {
  border-radius: 0;
}

/* Tool rows: the name, then the main platforms' own logos on small tiles. Grey while the work runs on people,
   in colour once the system connects them, row by row as the wires draw in. */
.tool {
  justify-content: space-between;
  gap: 12px;
}
.tool-logos {
  display: flex;
  flex: none;
  gap: 4px;
}
.tool-logos img {
  display: block;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 2px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition:
    filter 0.6s var(--ease),
    opacity 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.flow[data-state="after"] .tool-logos img {
  filter: none;
  opacity: 1;
}
@media (min-width: 1101px) {
  .flow-stage {
    grid-template-columns: minmax(0, 258px) minmax(0, 1fr) minmax(0, 284px);
  }
}
@media (max-width: 1100px) and (min-width: 961px) {
  .flow-stage {
    grid-template-columns: minmax(0, 236px) minmax(0, 1fr) minmax(0, 250px);
  }
}
@media (max-width: 560px) {
  .tool {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .tool-logos img {
    width: 20px;
    height: 20px;
  }
}

/* Before: the people holding it together, scattered through a loose area. The wires (flow.js) take each tool's work
   to someone different, two handoffs wait on a clock, and most lines end with you. */
.hubs > * {
  align-self: center;
}
.crowd {
  position: relative;
  width: min(100%, 320px);
  height: 300px;
  border: 1px dashed var(--n300);
  border-radius: 2px;
}
.person {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  justify-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
}
.person .av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--n50);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--n600);
}
.person .av svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.person .pl {
  padding: 1px 5px;
  background: var(--white);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--n600);
}
.p-you .av {
  width: 48px;
  height: 48px;
  background: var(--ink);
  box-shadow: none;
  color: #fff;
}
.p-you .av svg {
  width: 21px;
  height: 21px;
}
.p-you .pl {
  font-weight: 600;
  color: var(--ink);
}
.w-h {
  fill: none;
  stroke: var(--n400);
  stroke-width: 1.2;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
}
.w-clock circle {
  fill: var(--white);
  stroke: var(--n400);
  stroke-width: 1.1;
}
.w-clock path {
  fill: none;
  stroke: var(--n600);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The crowd sits beside the hubs in the column body. Side by side it spans the body row exactly, so its dashed box lines
   up with the first and last tool; stacked, it shares the hubs' cell, so the before view has no gap where the chip waits. */
@media (min-width: 961px) {
  .mid-body {
    position: relative;
  }
  /* flow.js sets top and height to the first and last tool rows; this is the stand-in until it runs. */
  .mid-body > .crowd {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 302px;
    transform: translate(-50%, -50%);
  }
  .mid-body > .crowd[style*="height"] {
    transform: translateX(-50%);
  }
}
@media (max-width: 960px) {
  .mid-body > .hubs,
  .mid-body > .crowd {
    grid-area: 1 / 1;
  }
  .mid-body > .crowd {
    align-self: center;
    height: 260px;
  }
}
/* The direction chip lives in the hubs grid. Side by side it floats above the system box (a transform, so it takes no
   space), which lets the system box centre on the same line as the tools and the outcomes; stacked, it takes its own row. */
.hubs > .direction {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  text-wrap: balance;
}
@media (min-width: 1101px) {
  .hubs > .direction {
    white-space: nowrap;
  }
}
@media (min-width: 961px) {
  .hubs > .direction {
    margin-bottom: 0;
    transform: translateY(calc(-100% - 30px));
  }
}
@media (max-width: 960px) {
  .hubs > .hub {
    grid-area: 2 / 1;
  }
}

/* The pillars and the example feed in the template's testimonial grid: gap-px hairline cells. */
.cells {
  display: grid;
  gap: 1px;
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 2rem;
  background: var(--page);
}
.pillar-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pillar-tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.25s;
}
.pillar-tile .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.pillar:hover .pillar-tile {
  border-color: var(--ink);
}
.pillar h3 {
  max-width: 10em;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.pillar p {
  max-width: 34rem;
  margin-top: 0.875rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--n700);
  text-wrap: pretty;
}
.cell-feed {
  justify-content: center;
  padding: 1.25rem;
  background: var(--band);
}
.cell-feed .feed {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .cell {
    padding: 2.5rem;
  }
  .cell-feed {
    padding: 2.5rem;
  }
}
@media (min-width: 768px) {
  .cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cell-feed {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1200px) {
  .cells {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cell-feed {
    grid-column: auto;
    padding: 1.75rem;
  }
}

/* The example feed, flattened to match. */
.feed {
  border-radius: 2px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.feed-head {
  padding: 13px 18px;
  border-bottom-color: var(--line);
}
.feed-title {
  font-size: 0.75rem;
  color: var(--n700);
}
.feed-tag {
  padding: 3px 8px;
  border-radius: 0;
  background: var(--n50);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--n600);
}
.k-dot,
.k-dot::after {
  border-radius: 0;
}
.feed-item {
  padding: 0 18px;
  border-bottom-color: var(--n50);
}
.fi-icon {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.fi-icon svg {
  stroke-width: 1.5;
}
.fi-title {
  font-weight: 500;
}
.fi-meta {
  color: var(--n600);
}
.fi-kind {
  font-weight: 600;
  color: var(--n700);
}
.fi-done {
  border-radius: 0;
}
.feed-foot {
  padding: 12px 18px;
  border-top-color: var(--line);
  background: #fafafa;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.2rem;
  color: var(--n600);
  text-wrap: balance;
}

/* ---------- 4. Case studies ---------- */

.work {
  padding-block: var(--sec);
  background: var(--band);
  border-bottom: 1px solid var(--line);
}
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: 3rem;
}
.work-head .label-row {
  margin-bottom: 1rem;
}
.work-note {
  max-width: 22rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--n600);
  text-wrap: pretty;
}

/* Three case cards, one box per case, so they read as case 1, 2 and 3. Each opens on a strip: the case number, then the
   department, with the client on the right. The lead case runs full width, the story on the left and its chart on the
   right. From 1100px cases 2 and 3 sit side by side under it, each ending on one result line, with their strips, stories
   and results lined up across the pair (subgrid). The mono is kept for the one index ("Case 01"); everything you read as
   language is in the sans. */
.cases {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
}
.cs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  min-height: 3.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--page);
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--n600);
}
.cs-id {
  display: inline-flex;
  align-items: baseline;
  gap: 0.875rem;
}
.cs-no {
  color: var(--accent-ink);
}
.cs-dept {
  position: relative;
  padding-left: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.cs-dept::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0.875rem;
  margin-top: -0.4375rem;
  background: var(--n300);
}
.cs-client > span:not([aria-hidden]) {
  white-space: nowrap;
}
.cs-body {
  display: grid;
}
.cs-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 2rem 1.5rem;
}
.cs-title {
  max-width: 22em;
  margin-bottom: 0.25rem;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.cs-text p {
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--n700);
  text-wrap: pretty;
}
.cs-text .cs-small {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--n600);
}
.cs-link {
  margin-top: 0.75rem;
}
.work-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--n300);
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.2s;
}
.work-link:hover {
  border-color: var(--ink);
}
.work-link .icon {
  width: 0.9375rem;
  height: 0.9375rem;
  transition: transform 0.2s var(--ease);
}
.work-link:hover .icon {
  transform: translate(1px, -1px);
}
.cs-evidence {
  margin: 0;
  padding: 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--page);
}
.cs-note {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--n600);
}
/* Cases 2 and 3: a step down from the lead. The result is one line, the figure at the scale of the card's own headline
   with its label beside it on the baseline, so it reads as a fact, not a poster. */
.cs-sm .cs-title {
  font-size: clamp(1.375rem, 1.15rem + 0.55vw, 1.625rem);
}
.cs-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 1rem;
  padding: 1.25rem 1.5rem;
}
.cs-num {
  font-weight: 500;
  font-size: clamp(1.625rem, 1.45rem + 0.5vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cs-stat-label {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--n600);
}
@media (min-width: 640px) {
  .cs-bar {
    padding-inline: 2rem;
  }
  .cs-text {
    padding: 2.5rem 2rem;
  }
  .cs-evidence {
    padding: 2rem;
  }
  .cs-stat {
    padding: 1.5rem 2rem;
  }
}
@media (min-width: 1100px) {
  .cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cs-lead {
    grid-column: 1 / -1;
  }
  .cs-lead .cs-bar {
    padding-inline: 2.5rem;
  }
  .cs-lead .cs-body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .cs-lead .cs-text {
    grid-column: 1 / span 5;
    padding: 2.75rem 2.5rem;
  }
  .cs-lead .cs-evidence {
    grid-column: 6 / span 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.25rem 2.5rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .cs-sm,
  .cs-sm > article,
  .cs-sm .cs-body {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .cs-sm {
    grid-row: span 3;
  }
  .cs-sm > article {
    grid-row: 1 / -1;
  }
  .cs-sm .cs-body {
    grid-row: 2 / -1;
  }
}

/* The lead case's chart, after the case-study PDF: new leads each week as bars, grey before we took over the ads and blue
   after, with the takeover as a line, a pin and a short note. Under the months, a bracket spans each of the two 12-week
   windows the headline compares, with that window's average beneath it: the before on the chart's left edge, the after
   on its right. Both numbers sit on one line, and each points at the weeks it sums up. No legend and no average lines.
   It's built in HTML, not SVG, so its text keeps one size at every width, all in the page's sans. */
.ld-title {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}
.ld {
  display: flow-root;
  margin-top: 1.25rem;
}
.ld-plot {
  position: relative;
  height: 12rem;
  margin: 3rem 0 0 2.5rem;
}
.ld-x,
.ld-wins {
  position: relative;
  margin-left: 2.5rem;
}
.ld-x {
  height: 1.75rem;
}
.ld-grid span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--y) * 100%);
  border-top: 1px solid #ebebeb;
}
.ld-grid span:first-child {
  border-color: var(--n200);
}
.ld-grid b,
.ld-x span {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--n500);
}
.ld-grid b {
  position: absolute;
  right: calc(100% + 0.625rem);
  top: 0;
  transform: translateY(-50%);
}
.ld-bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(41, minmax(0, 1fr));
  column-gap: 0.6%;
  align-items: end;
}
.ld-bars i {
  height: calc(var(--v) * 100%);
  border-radius: 1.5px 1.5px 0 0;
  background: var(--accent);
}
.ld-bars .b0 {
  background: #c8c8c8;
}
.ld-mark {
  position: absolute;
  top: -2.25rem;
  bottom: 0;
  left: calc(var(--x) * 100%);
  border-left: 1px solid var(--n300);
}
.ld-pin {
  position: absolute;
  top: -0.25rem;
  left: -0.28125rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--page);
}
.ld-note {
  position: absolute;
  top: -0.5625rem;
  left: 0.75rem;
  margin: 0;
  white-space: nowrap;
}
.ld-note b {
  display: block;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: var(--ink);
}
.ld-note span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--n600);
}
.ld-x span {
  position: absolute;
  top: 0.625rem;
  left: calc(var(--x) * 100%);
  transform: translateX(-50%);
}
.ld-x .m2 {
  display: none;
}
.ld-wins {
  height: 3.5rem;
  margin-top: 0.25rem;
}
.ld-win {
  position: absolute;
  top: 0;
  left: calc(var(--a) * 100%);
  width: calc((var(--b) - var(--a)) * 100%);
}
.ld-br {
  display: block;
  height: 0.375rem;
  border: 1px solid var(--n300);
  border-top: 0;
}
.w1 .ld-br {
  border-color: var(--accent);
}
.ld-win p {
  position: absolute;
  top: 0.9375rem;
  margin: 0;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--n600);
}
.w0 p {
  left: 0;
}
.w1 p {
  right: 0;
  text-align: right;
}
.ld-win b {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.w1 b {
  color: var(--accent-ink);
}
.ld-win span {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--n500);
}
/* The source line is a footnote to the whole figure, so it sits well clear of the labels above it: they're one group,
   it's another. */
.ld + .cs-note {
  margin-top: 1.75rem;
}
@media (min-width: 640px) {
  .ld-plot {
    height: 15rem;
    margin: 3rem 0 0 3rem;
  }
  .ld-x,
  .ld-wins {
    margin-left: 3rem;
  }
  .ld-x .m2 {
    display: block;
  }
  .ld-win b {
    font-size: 1.25rem;
  }
  .ld-win span {
    font-size: 0.8125rem;
  }
}
/* The bars grow up from the baseline, left to right, once the chart itself is in view; then each bracket draws across its
   weeks and its average appears. script.js arms this (.will-grow) before it starts watching, so nothing is hidden unless
   a script is running to bring it back. */
@media (prefers-reduced-motion: no-preference) {
  .ld.will-grow .ld-bars i {
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.8s var(--ease) calc(0.25s + var(--i) * 22ms);
  }
  .ld.will-grow.is-in .ld-bars i {
    transform: none;
  }
  .ld.will-grow .ld-mark,
  .ld.will-grow .ld-win p {
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }
  .ld.will-grow .ld-br {
    transform: scaleX(0);
    transition: transform 0.7s var(--ease);
  }
  .ld.will-grow .w0 .ld-br {
    transform-origin: 0 50%;
  }
  .ld.will-grow .w1 .ld-br {
    transform-origin: 100% 50%;
  }
  .ld.will-grow.is-in .ld-mark {
    opacity: 1;
    transition-delay: 0.1s;
  }
  .ld.will-grow.is-in .w0 .ld-br {
    transform: none;
    transition-delay: 0.45s;
  }
  .ld.will-grow.is-in .w0 p {
    opacity: 1;
    transition-delay: 0.7s;
  }
  .ld.will-grow.is-in .w1 .ld-br {
    transform: none;
    transition-delay: 1.15s;
  }
  .ld.will-grow.is-in .w1 p {
    opacity: 1;
    transition-delay: 1.4s;
  }
}

/* The client's words, set like HALDE's testimonials, then the button: the proof ends on the next step. */
.work-quote {
  display: grid;
  gap: 1.75rem;
  max-width: 52rem;
  margin: 6rem 0 0;
}
.work-quote blockquote {
  margin: 0;
}
.work-quote blockquote p {
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
}
.work-quote figcaption {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.work-quote figcaption img {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
  filter: grayscale(1);
}
.work-quote figcaption strong {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}
.work-quote figcaption .mono-label {
  display: block;
  margin-top: 0.125rem;
  color: var(--n600);
}
.work-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--n200);
}
.work-cta p {
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- Shared section head (sections 5 and 7): label, two-line heading, the lead offset right ---------- */

.sec-head .label-row {
  margin-bottom: 1rem;
}
.sec-lead {
  max-width: 37rem;
  margin-top: 2rem;
}
@media (min-width: 1024px) {
  .sec-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .sec-head > * {
    grid-column: 1 / -1;
  }
  .sec-head .sec-lead {
    grid-column: 7 / span 6;
    margin-top: 3rem;
  }
}
/* In the split layouts (how it works, questions) the heading sits in a narrower column, as in the template. */
.how-side .h2,
.qs-side .h2 {
  font-size: clamp(2.25rem, 1.5rem + 1.8vw, 2.625rem);
}
.dept-list li {
  position: relative;
  padding-left: 1.125rem;
}
.dept-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

/* ---------- 5. Where we work: HALDE's services rows ---------- */

.depts {
  padding-block: var(--sec);
  border-bottom: 1px solid var(--line);
}
.dept-rows {
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--n200);
}
.dept-row {
  display: grid;
  align-items: start;
  row-gap: 1.5rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--n200);
}
/* Each department opens on its icon in a tinted square (the outcome ticks' language from section 3) rather than a number:
   departments aren't a sequence. */
.dept-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dept-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgb(99 144 255 / 0.1);
  color: var(--accent-ink);
}
.dept-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.dept-name {
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.dept-line {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.dept-list {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.dept-list li {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--n700);
}
@media (min-width: 1024px) {
  .dept-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    padding: 3rem 0;
  }
  .dept-head {
    grid-column: 1 / span 6;
    gap: 1.5rem;
  }
  .dept-icon {
    width: 3rem;
    height: 3rem;
  }
  .dept-icon .icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  .dept-detail {
    grid-column: 7 / span 6;
    padding-top: 0.625rem;
  }
}

/* ---------- 6. How it works: HALDE's process, cleaned up. A sticky head with what it asks of you; the steps hang off one
   line from the first square to the last, which fills as you scroll. A step lights up when the fill reaches it. ---------- */

.how {
  padding-block: var(--sec);
  background: var(--band);
  border-bottom: 1px solid var(--line);
}
.how-grid {
  display: grid;
  gap: 3.5rem;
}
.how-lead {
  max-width: 30rem;
  margin-top: 1.5rem;
}
/* What it asks of you: a small white card, one row per ask, each with its icon. */
.asks {
  max-width: 27rem;
  margin-top: 2.5rem;
  border: 1px solid var(--line);
  background: var(--white);
}
.asks-title {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--page);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--ink);
}
.asks ul {
  margin: 0;
  padding: 0 1.25rem;
  list-style: none;
}
.asks li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.asks li + li {
  border-top: 1px solid var(--line);
}
.asks .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-ink);
}
/* The line runs from the first square's centre to the last one's (script.js measures them); the fill and its small head
   follow the scroll, and the squares sit on top of the line. */
.how-steps {
  position: relative;
}
.track {
  position: absolute;
  top: 1.125rem;
  bottom: 0;
  left: 1.125rem;
  width: 1px;
  margin-left: -0.5px;
  background: var(--n200);
}
.track-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}
.track-head {
  position: absolute;
  left: 50%;
  top: calc(var(--p, 0) * 100%);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(99 144 255 / 0.18);
}
.how-steps:not([data-live]) .track-head {
  display: none;
}
.steps-list {
  position: relative;
  display: grid;
  gap: 3.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.how-step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 1.5rem;
}
.step-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--n300);
  background: var(--band);
  color: var(--n600);
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease);
}
.how-step.is-active .step-node {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}
.step-body h3 {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2.25rem;
  letter-spacing: -0.025em;
}
.step-body p {
  max-width: 34rem;
  margin-top: 0.375rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--n700);
  text-wrap: pretty;
}
.step-body .step-out {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}
.step-out .oc {
  background: rgb(99 144 255 / 0.14);
  color: var(--accent-ink);
}
/* Steps the line hasn't reached yet wait at lower contrast, as in HALDE's own process. */
.how-steps[data-live] .step-body {
  transition: opacity 0.5s var(--ease);
}
.how-steps[data-live] .how-step:not(.is-active) .step-body {
  opacity: 0.4;
}
@media (min-width: 1024px) {
  .how-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .how-side {
    grid-column: 1 / span 5;
  }
  .how-sticky {
    position: sticky;
    top: 7rem;
  }
  .how-steps {
    grid-column: 7 / span 6;
    padding-top: 0.25rem;
  }
  .steps-list {
    gap: 4.5rem;
  }
  .how-step {
    column-gap: 1.75rem;
  }
}

/* ---------- 7. Who we are: the people as HALDE's testimonial grid, how we work, who it's for ---------- */

.team {
  padding-block: var(--sec);
  border-bottom: 1px solid var(--line);
}
.crew {
  display: grid;
  gap: 1px;
  margin-top: 4rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.member {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 2rem;
  background: var(--page);
}
.member img {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
}
.member h3 {
  margin-top: 1.5rem;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.member-role {
  margin-top: 0.375rem;
  color: var(--n600);
}
.member-bio {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--n700);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .member {
    padding: 2.5rem;
  }
}
@media (min-width: 900px) {
  .crew {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.burned {
  margin-top: 6rem;
}
.burned .label-row {
  margin-bottom: 1.5rem;
}
.principles {
  display: grid;
  gap: 2.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.principles li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--n300);
}
.pr-no {
  color: var(--accent-ink);
}
.principles h3 {
  margin-top: 0.875rem;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.principles p {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--n700);
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .principles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fit {
  display: grid;
  gap: 1px;
  margin-top: 5rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.fit-col {
  padding: 2rem 1.5rem;
  background: var(--white);
}
.fit-col .mono-label {
  color: var(--n600);
}
.fit-col ul {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.fit-col li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.fit-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.125rem;
  height: 1.125rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e63d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.fit-not li {
  color: var(--n700);
}
.fit-not li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
@media (min-width: 640px) {
  .fit-col {
    padding: 2.5rem;
  }
}
@media (min-width: 768px) {
  .fit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 8. Questions: HALDE's FAQ ---------- */

.qs {
  padding-block: var(--sec);
  background: var(--band);
  border-bottom: 1px solid var(--line);
}
.qs-grid {
  display: grid;
  gap: 3rem;
}
.qs-lead {
  max-width: 22rem;
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--n700);
}
.qs-list {
  border-top: 1px solid var(--n200);
}
.qa {
  border-bottom: 1px solid var(--n200);
}
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary:hover {
  color: var(--n600);
}
.qa summary:focus-visible {
  outline-offset: 4px;
}
.qa-icon {
  position: relative;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.25s var(--ease);
}
.qa-icon::before,
.qa-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.qa-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.qa[open] .qa-icon {
  transform: rotate(45deg);
}
.qa-a p {
  max-width: 42rem;
  padding-bottom: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--n700);
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .qs-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .qs-side {
    grid-column: 1 / span 4;
  }
  .qs-list {
    grid-column: 6 / span 7;
  }
}

/* ---------- 9. Apply: HALDE's contact ---------- */

.apply {
  padding-block: var(--sec);
  border-bottom: 1px solid var(--line);
}
.apply-title {
  font-weight: 600;
  font-size: clamp(3rem, 1.4rem + 6.4vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.apply-title .muted {
  display: block;
}
.apply-grid {
  display: grid;
  gap: 3.5rem;
  margin-top: 3.5rem;
}
.apply-lead {
  max-width: 30rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--n700);
  text-wrap: pretty;
}
.apply-steps {
  max-width: 30rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--n200);
}
.apply-steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--n200);
}
.apply-steps .mono-label {
  padding-top: 0.25rem;
  color: var(--accent-ink);
}
.apply-steps strong {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink);
}
.apply-steps p {
  margin-top: 0.125rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--n700);
}
.apply-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
  transition: color 0.2s;
}
.apply-mail:hover {
  color: var(--n600);
}
.apply-mail .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.apply-form {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.field {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.field .mono-label {
  color: var(--n600);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8125rem 1rem;
  border: 1px solid var(--n300);
  border-radius: 0;
  background: var(--white);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s;
}
.field select {
  padding-right: 2.75rem;
  background: var(--white) no-repeat right 1rem center / 1rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636363' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.field textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--n400);
}
.form-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}
.btn-lg {
  padding: 1rem 2rem;
}
.form-note {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--n600);
}
.form-done {
  display: none;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  background: #eef3ff;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.apply-form.is-done .form-done {
  display: block;
}
@media (min-width: 640px) {
  .apply-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
  .field-wide,
  .form-done {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1024px) {
  .apply-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .apply-copy {
    grid-column: 1 / span 5;
  }
  .apply-form {
    grid-column: 6 / span 7;
  }
}

/* ---------- Footer: HALDE's four columns, the base line and the wordmark ---------- */

.foot {
  position: relative;
  overflow: hidden;
  padding-top: 4.5rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--line);
}
.foot-brand {
  grid-column: 1 / -1;
}
.foot-brand img {
  width: auto;
  height: 30px;
}
.foot-brand p {
  max-width: 20rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--n600);
}
.foot-col .mono-label {
  margin-bottom: 1rem;
  color: var(--n600);
}
.foot-col ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-col ul a {
  font-size: 0.9375rem;
  color: var(--n700);
  transition: color 0.2s;
}
.foot-col ul a:hover {
  color: var(--ink);
}
.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.5rem;
  color: var(--n600);
}
.foot-base a {
  color: var(--ink);
}
/* The template's closing wordmark, set in the logo's lowercase and kept faint. */
.foot-mark {
  margin: 0 0 -3.6vw;
  font-weight: 600;
  font-size: 21vw;
  line-height: 0.8;
  letter-spacing: -0.065em;
  text-align: center;
  color: var(--n50);
  white-space: nowrap;
  user-select: none;
}
@media (min-width: 768px) {
  .foot-grid {
    grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
  }
  .foot-brand {
    grid-column: auto;
  }
}

/* ---------- Reveals: the template's rise and mask, driven by kit.js (.reveal gets .is-in) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.7s var(--ease),
      transform 0.7s var(--ease);
    transition-delay: var(--d, 0s);
  }
  html.js .reveal.is-in {
    opacity: 1;
    transform: none;
  }
  /* The template's mask reveal. The clip sits on the child: Chrome's IntersectionObserver honours a target's own clip-path,
     so a clipped wrapper would never report itself as visible. */
  html.js .reveal.mask {
    opacity: 1;
    transform: none;
  }
  html.js .reveal.mask > * {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.9s var(--ease);
    transition-delay: var(--d, 0s);
  }
  html.js .reveal.mask.is-in > * {
    clip-path: inset(0 0 0 0);
  }
  html.js .pain.reveal {
    transition:
      opacity 0.7s var(--ease),
      transform 0.7s var(--ease),
      background-color 0.2s;
    transition-delay: var(--d, 0s), var(--d, 0s), 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
  .reveal,
  .hw,
  .rise {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}