/* ==========================================================================
   neil-sampson.com — shared stylesheet

   Layout is fluid throughout: every size is a clamp() and every grid is an
   auto-fit minmax, so columns collapse on their own. The design is
   breakpoint-free by intent and stays that way for layout.

   Five media queries. One is the design's own: prefers-reduced-motion. The
   other four cover what it did not — the nav below 640px, the work bands and
   the comparison table once they collapse to one column, and neutralising
   hover styles on touch. See "Responsive refinements" at the foot of this
   file.
   ========================================================================== */

/* ==========================================================================
   Fonts

   Everett ships in two weights. Light covers 300–400, Medium covers 500–700,
   so the 600 micro-labels and the 700 wordmark resolve to Medium rather than
   to a synthesised bold. Space Grotesk — what the design was drawn in — is
   the fallback and takes over wherever Everett is missing.
   ========================================================================== */

@font-face {
  font-family: 'Everett';
  src: url('../fonts/Everett-Light-8f759ffb.woff') format('woff');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Everett';
  src: url('../fonts/Everett-Medium-d8cb7d44.woff') format('woff');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  /* Dark grounds */
  --ink: #131417;
  --ink-deep: #0f1013;
  --ink-lift: #1b1f2b;
  --ink-lift-hero: #1e2231;
  --ink-deep-hero: #0d0e11;

  /* Light grounds */
  --chalk: #eceae4;
  --chalk-warm: #e6e3dc;
  --chalk-panel: #e3e0d8;
  --paper: #f7f6f2;
  --image-bed: #dcd8ce;

  /* Accent */
  --blue: #1f4fd8;
  --blue-light: #8fa6ff;
  --blue-pale: #c3cdf0;

  /* Type colour */
  --body: #33312c;
  --body-muted: #4f4c45;
  --body-strong: #3f3c36;
  --label: #5c5952;
  --body-ink: #e2e0d9;
  --body-ink-soft: #e4e2dc;
  --label-ink: #8a877f;
  --muted-ink: #a8a49b;
  --label-ink-soft: #9b978e;

  /* Rules */
  --hairline: #d3d0c7;
  --hairline-soft: #cdc9be;
  --hairline-ink: rgba(247, 246, 242, .18);
  --hairline-ink-faint: rgba(247, 246, 242, .14);

  /* Layout */
  --max: 1320px;
  --max-wide: 1560px;
  --pad-x: clamp(16px, 4vw, 44px);
  --pad-y: clamp(48px, 7vw, 100px);
  --panel-pad: clamp(24px, 3vw, 42px);
  --gap-tight: clamp(12px, 1.4vw, 20px);
  --gap-loose: clamp(20px, 3vw, 56px);

  /* Radii — only the nav/inline CTAs and contact tiles are ever rounded */
  --r-cta: 9px;
  --r-tile: 11px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: 'Everett', 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

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

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

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

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--blue);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

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

/* Word clips for masked headline and quote reveals. The padding/negative
   margin pair keeps the overflow off the descenders. */
.word-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .2em;
  margin-bottom: -.2em;
}
.word { display: inline-block; will-change: transform; }

.mask-line {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

/* ==========================================================================
   Type primitives
   ========================================================================== */

.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
}
.label--ink { color: var(--blue-light); }

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
}

.h2 {
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 54px);
  line-height: 1;
  letter-spacing: -.034em;
}

.lede {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.68;
  color: var(--body);
}

.body {
  font-size: 15px;
  line-height: 1.66;
  color: var(--body-strong);
}

.rule {
  display: block;
  width: 38px;
  height: 2px;
  background: var(--blue);
  flex: none;
}
.rule--short { width: 30px; }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */

.section {
  padding: var(--pad-y) var(--pad-x);
  border-bottom: 1px solid var(--hairline);
}
.section--flush { padding-inline: 0; }
.section--warm { background: var(--chalk-warm); }
.section--ink {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0;
}

.inner { max-width: var(--max); margin: 0 auto; }
.inner--wide { max-width: var(--max-wide); margin: 0 auto; }

.stack { display: flex; flex-direction: column; }
.stack--head { gap: 12px; }
.stack--section { gap: clamp(28px, 3.4vw, 48px); }

/* The lit dark ground: gradient, blue glow, six-column grid overlay. */
.lit {
  position: relative;
  background: linear-gradient(168deg, var(--ink-lift) 0%, var(--ink) 46%, var(--ink-deep) 100%);
  color: var(--paper);
}
.lit__glow {
  position: absolute;
  top: -24%;
  right: -14%;
  width: min(92vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 79, 216, .34) 0%, rgba(31, 79, 216, 0) 66%);
  filter: blur(18px);
  pointer-events: none;
}
.lit__grid {
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right,
    rgba(247, 246, 242, .06) 0 1px,
    transparent 1px calc(100% / 6));
}

/* ==========================================================================
   Progress bar
   ========================================================================== */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ==========================================================================
   Nav

   Two states crossfading over 450ms, held in custom properties so background,
   border, blur, type colour and wordmark size all turn together.
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 15px var(--pad-x);

  --nav-bg: transparent;
  --nav-line: transparent;
  --nav-blur: none;
  --nav-ink: var(--paper);
  --brand-size: 20px;

  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-line);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  transition: background-color .45s ease, border-color .45s ease;
}

.nav.is-scrolled {
  --nav-bg: rgba(236, 234, 228, .94);
  --nav-line: var(--hairline);
  --nav-blur: blur(14px);
  --nav-ink: var(--ink);
  --brand-size: 15px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
}

.nav__link {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nav-ink);
  transition: color .45s ease;
}
.nav__link:hover { color: var(--blue); }

.nav__brand {
  justify-self: center;
  white-space: nowrap;
  font-size: var(--brand-size);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nav-ink);
  transition: color .45s ease, font-size .45s ease;
}

.nav__end { display: flex; justify-content: flex-end; }


.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 21px;
  border-radius: var(--r-cta);
  background: var(--blue);
  color: var(--paper);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .35s ease, color .35s ease;
}
.nav__cta:hover { background: var(--ink); color: var(--paper); }

/* Mobile: three columns will not fit below ~640px. Wordmark left, CTA right,
   links drop — they are all reachable from the page itself. The wordmark takes
   its scrolled size rather than a fourth value. */
@media (max-width: 640px) {
  .nav { grid-template-columns: auto auto; gap: 12px; }
  .nav__links { display: none; }
  .nav__brand { justify-self: start; --brand-size: 15px; }
  /* 14px block padding keeps the tap target near 40px tall; at 11px it was 34. */
  .nav__cta { gap: 8px; padding: 14px 14px; font-size: 10px; letter-spacing: .1em; }

  /* Below ~400px the wordmark and the CTA stop fitting side by side at their
     designed tracking. Both keep their copy and shed letter-spacing instead,
     which costs far less than wrapping the button or dropping the label. */
  .nav__brand { letter-spacing: clamp(.09em, .52vw, .22em); }
  .nav__cta {
    gap: clamp(6px, 1.6vw, 8px);
    padding-inline: clamp(10px, 3vw, 14px);
    font-size: clamp(9px, 2.7vw, 10px);
    letter-spacing: clamp(.03em, .28vw, .1em);
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 21px;
  border-radius: var(--r-cta);
  border: 1px solid transparent;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

/* Outlined, on a dark ground */
.cta--outline-ink {
  border-color: rgba(247, 246, 242, .5);
  color: var(--paper);
}
.cta--outline-ink:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}


/* Quiet inline link, blue, with an arrow */
.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ==========================================================================
   Hero

   100svh so mobile browser chrome cannot push content below the fold. Top and
   bottom padding come from the nav's measured height at runtime, so centring
   stays true as the type loads.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  height: 100svh;
  /* Runs under the transparent nav, which is sticky and so holds its own space
     in flow. --nav-h is the nav's measured height, written at runtime. */
  margin-top: calc(-1 * var(--nav-h, 62px));
  padding: calc(var(--nav-h, 62px) + 28px) var(--pad-x);
  background: var(--ink);
  color: var(--paper);
  overflow: clip;
}

.hero__ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(168deg, var(--ink-lift-hero) 0%, var(--ink) 46%, var(--ink-deep-hero) 100%);
}


.hero__glow {
  position: absolute;
  top: -22%;
  right: -14%;
  z-index: 0;
  width: min(94vw, 920px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 79, 216, .34) 0%, rgba(31, 79, 216, 0) 66%);
  filter: blur(20px);
  pointer-events: none;
}

/* Fixed diagonal scrim rather than one tuned to a single frame, so contrast
   holds wherever the loop happens to be. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg,
    rgba(19, 20, 23, .86) 0%,
    rgba(19, 20, 23, .62) 55%,
    rgba(19, 20, 23, .78) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.8vw, 34px);
}

.hero__title {
  font-weight: 500;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.032em;
  max-width: 26ch;
}


.hero__subtitle {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--body-ink);
  max-width: 52ch;
}

.cue {
  position: absolute;
  z-index: 2;
  left: var(--pad-x);
  bottom: clamp(20px, 3vw, 38px);
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity .9s ease .8s;
}
.cue.is-in { opacity: 1; }
.cue.is-past { opacity: 0; transition: opacity .4s ease; }

.cue__track {
  position: relative;
  display: block;
  width: 62px;
  height: 1px;
  background: rgba(247, 246, 242, .28);
  overflow: hidden;
}
.cue__dash {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 1px;
  background: var(--blue-light);
  animation: cue-run 2.8s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes cue-run {
  from { transform: translateX(-16px); }
  to   { transform: translateX(62px); }
}

.cue__word {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--label-ink);
}

/* ==========================================================================
   Panel cards (problems, and anywhere a card sits on the chalk ground)
   ========================================================================== */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: var(--gap-tight);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--panel-pad);
  background: var(--chalk-panel);
  transition: background .35s ease;
}
.panel:hover { background: var(--chalk-warm); }

.panel__statement {
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.028em;
}

/* Statements voiced as the reader's own words open with a quotation mark. It
   hangs just outside the left edge so the first letter aligns with the rule
   above; .38em is the measured width of the mark in Everett at this weight and
   tracking, and scales with the type. */
.panel__statement--quoted { text-indent: -.38em; }

.panel__body { display: flex; flex-direction: column; gap: 13px; }

/* ==========================================================================
   Capability — pinned, scroll-stepped
   ========================================================================== */

.pin__stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
}

.pin__inner {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 88px) var(--pad-x);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

.pin__head { display: flex; flex-direction: column; gap: 18px; }

.pin__title {
  font-weight: 500;
  font-size: clamp(32px, 5vw, 76px);
  line-height: .94;
  letter-spacing: -.032em;
}

.pin__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 24px);
}

.pin__step {
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--body-ink-soft);
}

.steprail {
  position: relative;
  height: 1px;
  margin-top: 6px;
  background: rgba(247, 246, 242, .24);
}
.steprail__fill {
  position: absolute;
  inset: 0;
  background: var(--blue-light);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Scroll distance the pin runs for beyond the sticky stage's own height —
   enough for each of the four offers to hold the eye before the next lights. */
.pin__runway { height: 80vh; }

/* ---- How I can help: four offers, stepped through by the pin ---------------
 * The head spans the top and the offers run as a row beneath it. Each is led
 * by a hairline that fills blue as the pin reaches it, so read left to right
 * the four rules become a single progress bar across the module.
 * ------------------------------------------------------------------------- */
.pin__inner--offers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(28px, 4.5vw, 64px);
}

.offers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(20px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Explicit counts rather than auto-fit, which strands the fourth offer on a
   row of its own at tablet widths. */
@media (min-width: 560px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .offers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2vw, 26px) 0 clamp(18px, 2.2vw, 28px);
}

.offer::before,
.offer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.offer::before {
  height: 1px;
  background: rgba(247, 246, 242, .18);
}
.offer::after {
  height: 2px;
  background: var(--blue-light);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
}
.offer.is-on::after { transform: scaleX(1); }

.offer__number {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  color: var(--label-ink);
  transition: color .6s ease;
}
.offer.is-on .offer__number { color: var(--blue-light); }

.offer__title {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.12;
  letter-spacing: -.026em;
  color: var(--paper);
}

.offer__body {
  margin-top: 10px;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.58;
  color: var(--body-ink-soft);
  max-width: 44ch;
}

/* A pinned module taller than the screen would hide its own lower half for the
   whole pin. When it does not fit — measured in page.js — it scrolls normally
   and each offer lights as it arrives instead. */
.pin--static .pin__stage { position: relative; min-height: 0; }
.pin--static .pin__runway { display: none; }

@media (prefers-reduced-motion: reduce) {
  .offer::after,
  .offer__number { transition: none; }
}

/* ==========================================================================
   Work bands
   ========================================================================== */

.bands { display: flex; flex-direction: column; }

.band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  align-items: stretch;
  border-top: 1px solid var(--hairline);
}

.band__frame {
  position: relative;
  min-height: clamp(280px, 42vw, 560px);
  overflow: clip;
  background: var(--image-bed);
  order: 2;
}
.band__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease);
}
.band:hover .band__frame img { transform: scale(1.04); }

.band__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(28px, 4vw, 72px) clamp(20px, 3.2vw, 60px);
  order: 1;
}

/* Alternating rows: image leads. */
.band--flip .band__frame { order: 1; }
.band--flip .band__copy { order: 2; }

.band__title {
  font-weight: 500;
  font-size: clamp(23px, 2.8vw, 40px);
  line-height: 1.04;
  letter-spacing: -.032em;
  max-width: 24ch;
}

.band__summary {
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--body-muted);
  max-width: 48ch;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 40px);
  padding-top: clamp(14px, 1.8vw, 22px);
  border-top: 1px solid var(--hairline-soft);
}

.stat { display: flex; flex-direction: column; gap: 5px; }

.stat__figure {
  font-weight: 500;
  font-size: clamp(21px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -.032em;
}

.stat__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
}

/* ==========================================================================
   Trusted by
   ========================================================================== */

.clients__title {
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -.032em;
  max-width: 62ch;
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(33%, 150px), 1fr));
  gap: clamp(48px, 7vw, 104px) clamp(24px, 3vw, 52px);
  align-items: center;
  padding: clamp(40px, 5.5vw, 80px) 0 clamp(30px, 4vw, 56px);
  border-top: 1px solid var(--hairline);
}

.clients__logo { display: flex; align-items: center; justify-content: center; }
.clients__logo img {
  max-height: clamp(22px, 2.4vw, 32px);
  width: auto;
  opacity: .8;
}

/* Zebra People only exists as white artwork, so on the light ground it is
   inverted to ink rather than left invisible. */
.clients__logo img[src*="zebra-people"] { filter: invert(1); }

/* Tablet and phone: the cells are narrow enough that a wide wordmark and a
   compact mark read as different sizes. Every logo gets the same box and is
   scaled to fit inside it, so the wall reads evenly. */
@media (max-width: 879px) {
  .clients__logo { height: 24px; }
  .clients__logo img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonial { display: flex; flex-direction: column; gap: clamp(30px, 4vw, 56px); }

.testimonial__lead {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 34px);
  max-width: 1100px;
}

.display-quote {
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 50px);
  line-height: 1.16;
  letter-spacing: -.03em;
  text-wrap: pretty;
}
.display-quote .soft { color: var(--label); }

.attr { display: flex; align-items: center; gap: 12px; }
.attr img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.attr__text { display: flex; flex-direction: column; gap: 4px; }
.attr__name { font-size: 14.5px; font-weight: 500; }
.attr__role {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  align-items: stretch;
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 2.8vw, 38px);
  background: var(--chalk-warm);
}
.quote__body { display: flex; flex-direction: column; gap: 14px; }
.quote__body p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--body);
}
.quote .attr {
  margin-top: auto;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--hairline-soft);
}/* ==========================================================================
   Contact
   ========================================================================== */

.contact { background: var(--ink); color: var(--paper); }

.contact__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 80px) var(--pad-x) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 52px);
}

.contact__title {
  font-weight: 500;
  font-size: clamp(40px, 10vw, 164px);
  line-height: .9;
  letter-spacing: -.04em;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--r-tile);
  border: 1px solid transparent;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.tile__text { display: flex; flex-direction: column; gap: 9px; }
.tile__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.tile__value {
  font-size: clamp(16px, 1.8vw, 25px);
  font-weight: 600;
  letter-spacing: -.026em;
}
.tile__arrow { font-size: clamp(16px, 1.8vw, 22px); }

.tile--primary { background: var(--paper); color: var(--ink); }
.tile--primary .tile__label { color: var(--label); }
.tile--primary:hover { background: var(--blue); color: var(--paper); }
.tile--primary:hover .tile__label { color: var(--paper); }

.tile--secondary { border-color: rgba(247, 246, 242, .6); }
.tile--secondary .tile__label { color: var(--label-ink-soft); }
.tile--secondary:hover { background: rgba(247, 246, 242, .1); border-color: var(--paper); }

.colophon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 0 26px;
  border-top: 1px solid var(--hairline-ink);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label-ink-soft);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue { opacity: 1; transition: none; }
  .cue__dash { animation: none; }
  .band__frame img { transition: none; }
  .band:hover .band__frame img { transform: none; }
}

/* ==========================================================================
   Inner-page hero — Services and the case studies

   No video: the lit ground carries it. Pulled under the nav the same way the
   homepage hero is, but sized to its content rather than the viewport.
   ========================================================================== */

.hero--inner {
  height: auto;
  min-height: min(76svh, 760px);
  padding: calc(var(--nav-h, 62px) + 45px) var(--pad-x) clamp(40px, 5vw, 72px);
  background: linear-gradient(168deg, var(--ink-lift) 0%, var(--ink) 48%, var(--ink-deep) 100%);
}

.hero--inner .hero__inner { gap: clamp(22px, 2.8vw, 36px); }

.hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--blue-light);
}

.hero__glow--inner {
  top: -26%;
  right: -12%;
  width: min(92vw, 880px);
  background: radial-gradient(circle, rgba(31, 79, 216, .3) 0%, rgba(31, 79, 216, 0) 66%);
  filter: blur(18px);
}

.lit__grid--soft { opacity: .45; }

/* ==========================================================================
   Engagement cards — Services

   A stack of hairline-divided blocks closed by an ink terms bar. The bar is
   pushed to the bottom with margin-top:auto so both cards read as comparable
   offers however long the copy runs.
   ========================================================================== */

.engagements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  align-items: stretch;
}

.engagement {
  display: flex;
  flex-direction: column;
  background: var(--chalk-warm);
  transition: background .35s ease;
}
.engagement:hover { background: var(--chalk-panel); }

.engagement__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 42px) clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 30px);
}

.engagement__title {
  font-weight: 500;
  font-size: clamp(25px, 2.9vw, 42px);
  line-height: 1;
  letter-spacing: -.03em;
}

.engagement__promise {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.42;
  color: var(--body);
  max-width: 40ch;
}

.engagement__how {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(18px, 2.2vw, 26px) clamp(26px, 3vw, 42px);
  border-top: 1px solid var(--hairline-soft);
}

.engagement__how p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--body-muted);
}

.panel-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}

.engagement__terms {
  margin-top: auto;
  padding: clamp(15px, 1.8vw, 20px) clamp(26px, 3vw, 42px);
  background: var(--ink);
  color: var(--chalk);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ==========================================================================
   Capability columns — Services
   ========================================================================== */

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-soft);
}

.column__title {
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 23px);
  line-height: 1.1;
  letter-spacing: -.026em;
}

.column__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body-muted);
  list-style: none;
  padding: 0;
}

/* ==========================================================================
   Process — Services
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--chalk-warm);
}

.step__number {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--blue);
}

.step__title {
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 23px);
  line-height: 1.1;
  letter-spacing: -.026em;
}

.step__body {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--body-muted);
}

/* ==========================================================================
   Comparison table — Services, on the lit ground

   A grid rather than a <table> would lose the row/column relationship for a
   screen reader, so this stays a real table with the grid applied to its rows.
   ========================================================================== */

.compare { width: 100%; border-collapse: collapse; }

.compare tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(14px, 2vw, 32px);
  text-align: left;
}

.compare thead tr {
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(247, 246, 242, .28);
}

.compare th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.compare th.is-lead { color: var(--paper); }

.compare tbody tr {
  padding: clamp(15px, 1.8vw, 22px) 0;
  border-bottom: 1px solid var(--hairline-ink-faint);
  font-size: 14.5px;
  line-height: 1.55;
}
.compare tbody tr:last-child { border-bottom: 0; }

.compare td { font-weight: 400; }
.compare th[scope="row"],
.compare td.is-alt {
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted-ink);
}

/* ==========================================================================
   Standalone pull quote — Services
   ========================================================================== */

.quote-lead {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 34px);
}

.quote-lead blockquote {
  font-weight: 400;
  font-size: clamp(21px, 3vw, 44px);
  line-height: 1.2;
  letter-spacing: -.028em;
  text-wrap: pretty;
}

.quote-lead__attr {
  display: flex;
  align-items: center;
  gap: 13px;
}
.quote-lead__attr img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.quote-lead__attr span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}

/* ==========================================================================
   Contact on the chalk ground — Services and case studies

   The homepage closes on ink; the inner pages close on chalk with the tiles
   inverted, so the ink tile is the one that carries the weight.
   ========================================================================== */

.contact-chalk {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.2vw, 46px);
}

.tiles--chalk { gap: clamp(14px, 2vw, 22px); }

.tiles--chalk .tile { padding: clamp(22px, 2.8vw, 34px); }

.tiles--chalk .tile__value {
  font-size: clamp(17px, 1.9vw, 26px);
  font-weight: 500;
}
.tiles--chalk .tile__arrow { font-size: clamp(17px, 1.9vw, 23px); }

.tile--ink { background: var(--ink); color: var(--paper); }
.tile--ink .tile__label { color: var(--label-ink); }
.tile--ink:hover { background: var(--blue); }
.tile--ink:hover .tile__label { color: var(--paper); }

.tile--outline { border-color: var(--hairline-soft); }
.tile--outline .tile__label { color: var(--label); }
.tile--outline:hover { background: var(--chalk-warm); border-color: var(--label); }

.site-footer {
  padding: 20px var(--pad-x) 30px;
  border-top: 1px solid var(--hairline);
}

.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}

/* ==========================================================================
   Case study template

   Shared by all three case studies. Sections in order: hero, situation,
   baseline, task, artefacts, action, result, next. Individual cases add one
   bespoke section each — Lindblad a reframe, BPP a prototype block, Polesdon
   a coach quote — which are styled at the end of this file.
   ========================================================================== */

.hero--case {
  align-items: flex-end;
  min-height: min(88svh, 860px);
}

.hero__summary {
  font-size: clamp(15.5px, 1.5vw, 20px);
  line-height: 1.56;
  color: var(--body-ink);
  max-width: 58ch;
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(16px, 2vw, 32px);
  padding-top: clamp(14px, 2vw, 24px);
  border-top: 1px solid var(--hairline-ink);
  max-width: 940px;
}

.hero__meta div { display: flex; flex-direction: column; gap: 7px; }/* Two-column split: label and heading on the left, the passage on the right. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 3.4vw, 64px);
  align-items: start;
}

.split__head { display: flex; flex-direction: column; gap: 14px; }

.case-h2 {
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -.032em;
}

.passage {
  font-size: 17px;
  line-height: 1.68;
  color: var(--body);
  max-width: 62ch;
}
.passage--ink { color: var(--body-ink); }

/* ---- Baseline band ------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 190px), 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.figure {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid rgba(247, 246, 242, .22);
}

.figure__value {
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: 1;
  letter-spacing: -.038em;
}

.figure__label {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-ink);
}

/* ---- Artefacts ----------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.shot { display: flex; flex-direction: column; gap: 13px; }

.shot__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: clip;
  background: var(--image-bed);
}
.shot__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot__frame--wide { aspect-ratio: 16 / 9; }

.shot figcaption {
  font-size: 13px;
  line-height: 1.6;
  color: var(--label);
}

.shot--full {
  max-width: var(--max);
  margin: clamp(20px, 2.6vw, 40px) auto 0;
}

/* ---- Action -------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--chalk-warm);
}

.card__title {
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 23px);
  line-height: 1.1;
  letter-spacing: -.026em;
}

.card__body {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--body-muted);
}

.rule--card { width: 32px; }

.tradeoffs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px, 3vw, 56px);
  padding-top: clamp(22px, 2.8vw, 38px);
  border-top: 1px solid var(--hairline);
}

.tradeoffs__col { display: flex; flex-direction: column; gap: 14px; }

.tradeoffs__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
}

.ledger { display: flex; flex-direction: column; gap: 11px; }

.ledger__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid #d9d5cb;
  font-size: 14.5px;
}
.ledger__reason { color: var(--label); }

/* ---- Result -------------------------------------------------------------- */

.outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.outcome {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(247, 246, 242, .2);
  border-radius: var(--r-tile);
}

.outcome__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label-ink);
}

.outcome__value {
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1;
  letter-spacing: -.038em;
}

.outcome__note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-ink);
}

.source-line {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label-ink);
}

/* ---- Bespoke sections ---------------------------------------------------- */

/* Lindblad — the reframe */
.reframe {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 34px);
}

.reframe__title {
  font-weight: 500;
  font-size: clamp(26px, 4vw, 62px);
  line-height: 1;
  letter-spacing: -.034em;
  max-width: 24ch;
}

/* BPP — the prototype block, sitting under the artefacts */
.proto {
  max-width: var(--max);
  margin: clamp(28px, 3.4vw, 52px) auto 0;
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
}

.proto__title {
  font-weight: 500;
  font-size: clamp(21px, 2.6vw, 36px);
  line-height: 1.04;
  letter-spacing: -.03em;
}

.proto__body { display: flex; flex-direction: column; gap: 20px; }

.cta--ink {
  gap: 12px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
}
.cta--ink:hover { background: var(--blue); color: var(--paper); }

/* Outcome figures that carry a before → after pair need more room than a
   single number, so they take a step down the scale. */
.outcome__value--pair {
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: -.036em;
}

/* ==========================================================================
   Polesdon — sections unique to this case study
   ========================================================================== */

/* Full-bleed opening image with a tracked caption row beneath */
.plate {
  margin: 0;
  background: var(--ink);
}

/* width must be the definite dimension: with only min-height set, the aspect
   ratio derives width from height and the frame blows past narrow viewports
   (280px tall × 21/9 = 653px wide). Pinning width to 100% makes the ratio
   derive height instead, and min-height then only ever makes it taller. */
.plate__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 280px;
  overflow: clip;
  background: var(--ink-lift);
}
.plate__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plate figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px var(--pad-x);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label-ink);
}

/* The market-position cards: two neutral, one picked out on ink */
.card--muted .rule { background: var(--label-ink-soft); }
.card--ink { background: var(--ink); color: var(--paper); }
.card--ink .card__body { color: #d8d6cf; }

/* Brand principles row */
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(16px, 2.4vw, 36px);
  padding-top: clamp(20px, 2.6vw, 34px);
  border-top: 1px solid var(--hairline);
}
.principle { font-size: 16px; line-height: 1.5; }

.shot__frame--ink { background: var(--ink); }
.shot__frame--portrait { aspect-ratio: 4 / 5; }
.shot__frame img,
.shot__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scope ledger — a label column against a description */
.ledger__row--split { justify-content: flex-start; gap: 14px; line-height: 1.6; }
.ledger__term {
  flex: none;
  min-width: 88px;
  color: var(--label);
}

.decisions { display: flex; flex-direction: column; gap: 16px; }
.decision { display: flex; flex-direction: column; gap: 8px; }
.decision h3 {
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.022em;
}
.decision p {
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--body-muted);
  max-width: 52ch;
}

/* The coach-quote panel on ink */
.signal {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 34px);
  padding: clamp(24px, 3.2vw, 44px);
  background: var(--ink);
  color: var(--paper);
}

.signal__quote {
  font-weight: 400;
  font-size: clamp(19px, 2.4vw, 34px);
  line-height: 1.28;
  letter-spacing: -.024em;
  max-width: 34ch;
}

.signal__attr {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.signal__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px, 3vw, 48px);
  padding-top: clamp(18px, 2.4vw, 30px);
  border-top: 1px solid rgba(247, 246, 242, .2);
}

.signal__col { display: flex; flex-direction: column; gap: 9px; }
.signal__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.signal__body {
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--body-ink);
  max-width: 50ch;
}

/* Go-to-market channels */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.channel {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.channel h3 {
  font-weight: 500;
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.1;
  letter-spacing: -.024em;
}
.channel p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--body-muted);
}

/* Campaign grid — one wide plate over a row of portraits */
.campaign {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.campaign .shot { gap: 11px; }

/* Closing note on the result band */
.standing {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: clamp(20px, 2.6vw, 34px);
  border-top: 1px solid rgba(247, 246, 242, .2);
}
.standing__credits { margin-top: 14px; }

/* ==========================================================================
   Responsive refinements

   The design is breakpoint-free by intent and stays that way for layout —
   these are the few places where a single-column phone needs something the
   two-column desktop does not.
   ========================================================================== */

/* ---- Work bands ---------------------------------------------------------
 * Side by side, the bands alternate which column holds the image. Collapsed
 * to one column that alternation just reads as inconsistency, so the image
 * leads every band and the copy follows it.
 * ------------------------------------------------------------------------- */
@media (max-width: 879px) {
  .band__frame { order: 1; }
  .band__copy  { order: 2; }
}

/* ---- Comparison table ---------------------------------------------------
 * Once the row grid drops below three columns the header row no longer sits
 * above its values, and the table becomes an unlabelled list of phrases. Each
 * cell carries its own column name instead, and the header row goes away.
 * ------------------------------------------------------------------------- */
@media (max-width: 589px) {
  .compare thead { display: none; }

  .compare tbody tr {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: clamp(18px, 4vw, 24px);
  }

  /* The row subject leads the group rather than reading as another value. */
  .compare th[scope="row"] {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.022em;
    color: var(--paper);
  }

  .compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--label-ink);
  }
}

/* ---- Touch --------------------------------------------------------------
 * Hover styles latch after a tap on touch devices, leaving a card or tile
 * stuck in its hover state. Neutralise them where there is no real pointer.
 * ------------------------------------------------------------------------- */
@media (hover: none) {
  .nav__link:hover { color: var(--nav-ink); }
  .nav__cta:hover { background: var(--blue); color: var(--paper); }
  .panel:hover { background: var(--chalk-panel); }
  .engagement:hover { background: var(--chalk-warm); }
  .band:hover .band__frame img { transform: none; }
  .tile--primary:hover { background: var(--paper); color: var(--ink); }
  .tile--primary:hover .tile__label { color: var(--label); }
  .tile--secondary:hover { background: transparent; border-color: rgba(247, 246, 242, .6); }
  .tile--ink:hover { background: var(--ink); }
  .tile--ink:hover .tile__label { color: var(--label-ink); }
  .tile--outline:hover { background: transparent; border-color: var(--hairline-soft); }
  .cta--outline-ink:hover { background: transparent; border-color: rgba(247, 246, 242, .5); color: var(--paper); }
  .cta--ink:hover { background: var(--ink); color: var(--paper); }
}


/* ==========================================================================
   Starting points with portrait

   The body splits into two equal columns beneath the heading: the portrait,
   at its original tone, on the left, cropped from the top to match the height
   of the three cards stacked on the right. On phones the portrait sits above
   the cards.
   ========================================================================== */

.problems__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-tight);
  align-items: stretch;
  padding: 0 var(--pad-x);
}

.problems__portrait {
  position: relative;
  margin: 0;
  overflow: clip;
  background: var(--image-bed);
}

.problems__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.problems__body .panels { grid-template-columns: minmax(0, 1fr); }

/* On phones the photo sets the frame's height itself. A frame whose only
   content is absolutely positioned gets its height from aspect-ratio alone,
   and Safari can collapse that to zero on a stretched grid item, which hid
   the photo on iPhones. */
@media (max-width: 760px) {
  .problems__body { grid-template-columns: minmax(0, 1fr); }
  .problems__portrait { align-self: start; }
  .problems__portrait img {
    position: static;
    display: block;
    height: auto;
    aspect-ratio: 4 / 5;
  }
}


/* ==========================================================================
   Homepage hero — the proposition as masthead

   The headline is set very large in Everett Medium across the full width,
   then a dateline of facts between rules, then the supporting line. The
   stack sits at the foot of the hero over the existing gradient.
   ========================================================================== */

/* The stack is taller than the other heroes', so the hero grows past the
   screen on short phones rather than running under the nav. */
.hero--masthead {
  align-items: flex-end;
  height: auto;
  min-height: 100svh;
  padding-bottom: clamp(72px, 10vh, 120px);
}

.hero--masthead .hero__inner { gap: 0; }

/* Sized to the longest line, "& design leadership", so the headline fills the
   content column and neither line wraps at any width. */
.hero--masthead .hero__title {
  max-width: none;
  font-size: clamp(38px, 11vw, 150px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}

.hero--masthead .hero__title em {
  font-style: normal;
  color: var(--blue-pale);
}

/* The facts row is gone, but the supporting line keeps the distance from the
   headline that the row and its rules used to hold. */
/* Three lines, not four. With text-wrap: balance it breaks to four at 47ch,
   so 50ch leaves margin for the fluid type size to shift the wrap. */
.hero--masthead .hero__subtitle {
  margin-top: calc(clamp(28px, 3.6vw, 52px) + clamp(24px, 3vw, 40px) + 44px);
  max-width: 50ch;
  text-wrap: balance;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
}

@media (max-width: 760px) {
  .hero--masthead .hero__title { font-size: 10.8vw; }
}


/* ==========================================================================
   Hero background motion

   js/hero-motion.js draws a slow texture into a canvas between the gradient
   ground and the glow; the scrim above keeps the headline legible.
   ========================================================================== */

/* With a texture behind it the full scrim flattens the motion to near black,
   so it lifts on the right and in the middle and stays darkest behind the
   start of the headline. */
.hero--masthead .hero__scrim {
  background: linear-gradient(105deg,
    rgba(19, 20, 23, .7) 0%,
    rgba(19, 20, 23, .32) 55%,
    rgba(19, 20, 23, .5) 100%);
}

.hero__motion {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* With motion behind the hero, the scroll cue sits at the bottom right. */
.hero--masthead .cue {
  left: auto;
  right: var(--pad-x);
}


/* ==========================================================================
   Blue quote band, the How I can help lead, and the contact actions
   ========================================================================== */

/* A full-width blue band separates the starting points from the work. */
.section--blue {
  background: var(--blue);
  color: var(--paper);
  border-bottom: 0;
}

.quote-band {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.quote-band__quote { max-width: 24ch; }
.section--blue .display-quote .soft { color: var(--blue-pale); }

.attr--blue .attr__name { color: var(--paper); }
.attr--blue .attr__role { color: var(--blue-pale); }

/* The lead lines under "I build capability. Not dependency." */
.pin__lead {
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 500;
  color: var(--paper);
  max-width: 34ch;
}

.pin__body {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.55;
  color: var(--body-ink);
  max-width: 46ch;
}

.pin__steps > .label { display: block; margin-bottom: clamp(14px, 1.8vw, 22px); }

/* Contact: the supporting line, then the booking button above the two links. */
.contact__lead {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--body-ink);
  max-width: 48ch;
}

.contact__actions {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
}

.cta--blue {
  background: var(--blue);
  color: var(--paper);
  border-color: var(--blue);
}
.cta--blue:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

@media (max-width: 760px) {
  .quote-band__quote { max-width: none; }
  .cta--blue { align-self: stretch; justify-content: center; }
}


/* The work section runs straight into the dark "How I can help" module, so on
   desktop its closing rule would draw a line against that module's edge. */
@media (min-width: 880px) {
  #work { border-bottom: 0; }
}


/* ==========================================================================
   Case study cards on phones

   Edge to edge with only a hairline between them, one case ran into the next:
   the hairline sits against a full-bleed photo where it cannot be seen. Each
   case now sits on its own inset card with real space around it.
   ========================================================================== */

@media (max-width: 879px) {
  .bands {
    gap: clamp(26px, 6vw, 44px);
    padding: 0 var(--pad-x);
  }

  .band {
    border-top: 0;
    border-radius: 16px;
    overflow: clip;
    background: var(--chalk-panel);
  }

  .band__frame { min-height: 46vh; }

  .band__copy {
    padding: clamp(24px, 6vw, 36px) clamp(20px, 5vw, 30px) clamp(28px, 7vw, 38px);
  }
}