/* ==========================================================================
   Hillsgreen — Brand Update 2026 · Homepage (static build)

   Every dimension below is taken from the InDesign source file
   ("2655 ... Homepage.indd", page 1, 1728pt wide, content column
   254 → 1474 = 1220px). Values are 1:1 px at desktop.

   Fonts are REUSED from the live theme (nothing in the theme is modified):
   /wp-content/themes/hillsgreen/library/fonts/
   ========================================================================== */

/* ==========================================================================
   1. Fonts
   ========================================================================== */
@font-face {
  font-family: ChampGothic;
  font-style: normal;
  font-weight: 100; /* Featherweight */
  font-display: swap;
  src: url(../../../library/fonts/champion-gothic/champion-featherweight/font.woff2) format("woff2"),
  url(../../../library/fonts/champion-gothic/champion-featherweight/font.woff) format("woff");
}
@font-face {
  font-family: ChampGothic;
  font-style: normal;
  font-weight: 200; /* Bantamweight */
  font-display: swap;
  src: url(../../../library/fonts/champion-gothic/champion-bantamweight/font.woff2) format("woff2"),
  url(../../../library/fonts/champion-gothic/champion-bantamweight/font.woff) format("woff");
}
@font-face {
  font-family: ChampGothic;
  font-style: normal;
  font-weight: 300; /* Lightweight */
  font-display: swap;
  src: url(../../../library/fonts/champion-gothic/champion-liteweight/font.woff2) format("woff2"),
  url(../../../library/fonts/champion-gothic/champion-liteweight/font.woff) format("woff");
}
@font-face {
  font-family: ChampGothic;
  font-style: normal;
  font-weight: 400; /* Welterweight */
  font-display: swap;
  src: url(../../../library/fonts/champion-gothic/champion-welterweight/font.woff2) format("woff2"),
  url(../../../library/fonts/champion-gothic/champion-welterweight/font.woff) format("woff");
}
@font-face {
  font-family: ChampGothic;
  font-style: normal;
  font-weight: 500; /* Middleweight */
  font-display: swap;
  src: url(../../../library/fonts/champion-gothic/champion-middleweight/font.woff2) format("woff2"),
  url(../../../library/fonts/champion-gothic/champion-middleweight/font.woff) format("woff");
}
@font-face {
  font-family: ChampGothic;
  font-style: normal;
  font-weight: 700; /* Heviweight */
  font-display: swap;
  src: url(../../../library/fonts/champion-gothic/champion-heviweight/font.woff2) format("woff2"),
  url(../../../library/fonts/champion-gothic/champion-heviweight/font.woff) format("woff");
}
@font-face {
  font-family: BeVietnam;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../../library/fonts/be-vietnam/be-vietnam-regular/font.woff2) format("woff2"),
  url(../../../library/fonts/be-vietnam/be-vietnam-regular/font.woff) format("woff");
}
@font-face {
  font-family: BeVietnam;
  font-style: normal;
  font-weight: 500; /* design's "Medium" maps to semibold file's lighter sibling — reuse regular tracking */
  font-display: swap;
  src: url(../../../library/fonts/be-vietnam/be-vietnam-regular/font.woff2) format("woff2"),
  url(../../../library/fonts/be-vietnam/be-vietnam-regular/font.woff) format("woff");
}
@font-face {
  font-family: BeVietnam;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../../../library/fonts/be-vietnam/be-vietnam-semibold/font.woff2) format("woff2"),
  url(../../../library/fonts/be-vietnam/be-vietnam-semibold/font.woff) format("woff");
}
@font-face {
  font-family: BeVietnam;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../../library/fonts/be-vietnam/be-vietnam-bold/font.woff2) format("woff2"),
  url(../../../library/fonts/be-vietnam/be-vietnam-bold/font.woff) format("woff");
}

/* ==========================================================================
   2. Tokens (swatches from the .indd)
   ========================================================================== */
:root {
  --teal: #45b8ac;
  --magenta: #b50156;
  --orange: #eb5b25;
  --yellow: #f7cc66;
  --blue: #5fa9d8;
  --steel: #35506c;
  --pink: #f0c3dc;
  --charcoal: #282828;
  --white: #fff;
  --off-white: #f4f4f4;      /* sampled off the visual PDF */
  --paper: #f2f1f2;          /* case study "our results" band, sampled likewise */

  --font-display: ChampGothic, "Arial Narrow", sans-serif;
  --font-body: BeVietnam, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1220px;       /* 254 → 1474 on the 1728 page */
  --gutter: 24px;

  --transition: 0.25s ease;
}

/* ==========================================================================
   3. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
address { font-style: normal; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   4. Chamfer shapes
   Buttons in the design are cut asymmetrically: small top-right,
   large bottom-left (14 / 23 on the 61px hero button).
   ========================================================================== */
.cut {
  clip-path: polygon(
          0 0,
          calc(100% - var(--c, 16px)) 0,
          100% var(--c, 16px),
          100% 100%,
          var(--c, 16px) 100%,
          0 calc(100% - var(--c, 16px))
  );
}
.cut-asym {
  clip-path: polygon(
          0 0,
          calc(100% - var(--ctr, 11px)) 0,
          100% var(--ctr, 11px),
          100% 100%,
          var(--cbl, 18px) 100%,
          0 calc(100% - var(--cbl, 18px))
  );
}

/* Outlined chamfer: border would be sliced by clip-path, so the stroke is a
   solid chamfered layer with the fill layer inset by the stroke width. */
.cut-outline {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
}
.cut-outline::before,
.cut-outline::after {
  content: "";
  position: absolute;
  z-index: -1;
}
.cut-outline::before {
  inset: 0;
  background: var(--outline, currentColor);
  clip-path: polygon(
          0 0,
          calc(100% - var(--c, 10px)) 0,
          100% var(--c, 10px),
          100% 100%,
          var(--c, 10px) 100%,
          0 calc(100% - var(--c, 10px))
  );
}
/* Insetting the inner layer by --stroke on every side moves the 45° edge only
   --stroke/√2 inward, so the diagonal would read √2 times heavier than the
   straight sides. Shrinking its chamfer by (2-√2)·stroke evens it out. */
.cut-outline::after {
  inset: var(--stroke, 1.5px);
  background: var(--outline-bg, var(--charcoal));
  clip-path: polygon(
          0 0,
          calc(100% - var(--c, 10px) + 0.586 * var(--stroke, 1.5px)) 0,
          100% calc(var(--c, 10px) - 0.586 * var(--stroke, 1.5px)),
          100% 100%,
          calc(var(--c, 10px) - 0.586 * var(--stroke, 1.5px)) 100%,
          0 calc(100% - var(--c, 10px) + 0.586 * var(--stroke, 1.5px))
  );
}

.t-teal { color: var(--teal); }

/* ==========================================================================
   5. Buttons — exact sizes from the .indd
   small: 142.41 x 48.03, text 16.36  ·  hero: 181.68 x 61.28, text 20.87
   header: 110.83 x 37.38, text 15.92
   ========================================================================== */
.btn {
  --ctr: 11px;
  --cbl: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  min-height: 48px;
  padding: 8px 17px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16.36px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--white);
  background: var(--magenta);
  border: 0;
  clip-path: polygon(
          0 0,
          calc(100% - var(--ctr)) 0,
          100% var(--ctr),
          100% 100%,
          var(--cbl) 100%,
          0 calc(100% - var(--cbl))
  );
  transition: filter var(--transition), transform var(--transition);
}
.btn:hover { filter: brightness(1.1); transform: translateY(-2px); }

.btn--lg {
  --ctr: 14px;
  --cbl: 23px;
  min-width: 182px;
  min-height: 61px;
  font-size: 20.87px;
}
.btn--hdr {
  --ctr: 9px;
  --cbl: 14px;
  min-width: 111px;
  min-height: 37px;
  padding: 6px 14px;
  font-size: 15.92px;
}
.btn--teal    { background: var(--teal); }
.btn--blue    { background: var(--blue); }
.btn--orange  { background: var(--orange); }
.btn--magenta { background: var(--magenta); }

/* solid category tag (result / news cards): 24.8 tall, text 11.12.
   Pill widths in the .indd: CRO 39, Paid Social 76.1, PPC 39, SEO 39 —
   7.5px of side padding lands on those. */
.tag-solid {
  display: inline-flex;
  align-items: center;
  padding: 0 7.5px;
  height: 24.8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--white);
  background: var(--teal);
}

/* ==========================================================================
   6. Header — bar 92.37, logo 145.26x38.99, nav 15/Bold, CTA 110.8x37.4
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--charcoal);
}
/* Once the hero's own baked-in shadow has scrolled away, the sticky header
   casts its own. Hidden at rest so the hero matches the .indd exactly. */
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 99.37px;
  background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.28) 0,
          rgba(0, 0, 0, 0) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.site-header.is-scrolled::after { opacity: 1; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 92px;
}
.site-logo img { width: 145px; height: 39px; }

/* Every gap along the nav row is 26 in the .indd — between the links and
   between "Resources" and the CTA alike. */
.site-header__right {
  display: flex;
  align-items: stretch;
  align-self: stretch;     /* so a dropdown's top:100% lands on the bar's edge */
  gap: 26px;
}
.site-header__right > .btn { align-self: center; }
.nav { display: flex; align-items: stretch; gap: 26px; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  display: inline-flex;
  align-items: baseline;
  gap: 3.74px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--white);
  transition: color var(--transition);
}
.nav__link:hover { color: var(--teal); }
/* Open "V", 11.89 x 5.94, 1.5 teal stroke — the viewBox is padded by half the
   stroke so nothing clips. Sits 0.55 below the text baseline. */
.nav__chev {
  width: 13.39px;
  height: 7.44px;
  flex: none;
  color: var(--teal);
  margin-bottom: -1.5px;
  transition: transform var(--transition);
}

/* ---- hover / focus dropdowns ---------------------------------------- */
.nav__sub {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 232px;
  padding: 14px 0;
  background: var(--charcoal);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 5;
}
.nav__sub a {
  display: block;
  padding: 9px 18px;
  font-weight: 500;
  font-size: 15px;
  color: var(--white);
  transition: color var(--transition), background var(--transition);
}
.nav__sub a:hover,
.nav__sub a:focus-visible { color: var(--teal); background: rgba(255, 255, 255, 0.04); }

.nav__item--has-sub:hover > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub,
.nav__item--has-sub.is-open > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__item--has-sub:hover > .nav__link .nav__chev,
.nav__item--has-sub:focus-within > .nav__link .nav__chev,
.nav__item--has-sub.is-open > .nav__link .nav__chev { transform: rotate(180deg); }

@media (hover: none) {
  .nav__item--has-sub:hover > .nav__sub { opacity: 0; visibility: hidden; }
  .nav__item--has-sub.is-open > .nav__sub { opacity: 1; visibility: visible; }
}

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--teal);
}
.nav-toggle span { display: block; width: 26px; height: 2px; background: currentColor; position: relative; }
.nav-toggle span { transition: background var(--transition); }
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor;
  transition: transform var(--transition), top var(--transition);
}
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after  { top: 8px; }

/* ==========================================================================
   7. Hero — 886.15 tall
   eyebrow y145.4 · h1 y212.9 (72.58/71.4) · body y520.2 · btn y607.2
   awards y726.6 (h 57.6, gap 9) · collage y146.1, tiles 215x256 gap 9
   ========================================================================== */
.hero {
  position: relative;
  background: var(--charcoal);
  color: var(--white);
  overflow: hidden;         /* bottom edge is straight at y978.5 in the .indd */
  z-index: 5;
  padding-top: 145px;
  padding-bottom: 102px;
}
/* Shadow cast by the header onto the hero: black 58% → 0 over 99.37px.
   Painted on .hero__bg itself so the lighter diagonal panel (::before)
   covers it on the right, exactly as the layers stack in the .indd. */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.58) 0,
          rgba(0, 0, 0, 0) 99.37px
  );
}
/* Lighter panel #333 (the right-hand block; the swatch is *named* "R=40 G=40
   B=40" but renders 51,51,51 — sampled off the visual PDF). Its left edge is
   the chevron's 45° line through (396.73, -60.25): x = y + 456.98, so
   x=549.38 at the hero top → 549.38/1728 = 31.79%. */
.hero__bg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 31.79%;
  width: 200%;
  background: #333;
  transform: skewX(45deg);
  transform-origin: top left;
}
/* Teal tab on the left edge. In the .indd it's a plain 100x195 rectangle at
   x0/y392.2 sitting *under* the charcoal chevron; the chevron's 45° corner at
   (47.94, 489.1) is what cuts it into an arrow. Visible part is therefore a
   pure triangle — 47.94 wide, page y 441.16..537.04, i.e. 348.76 below the
   92.4 header. */
.hero__tab {
  position: absolute;
  left: 0;
  top: 348.76px;
  width: 47.94px;
  height: 95.88px;
  background: var(--teal);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* The chevron's lower corner cuts a white wedge *into* the bottom edge of the
   hero — apex (497.19, 938.35), base on y978.5 from x457.04 to x537.34.
   Centre 497.19/1728 = 28.77%; 45° sides, so height == half-width. */
.hero__notch {
  position: absolute;
  bottom: 0;
  left: calc(28.77% - 40.15px);
  width: 0; height: 0;
  border-left: 40.15px solid transparent;
  border-right: 40.15px solid transparent;
  border-bottom: 40.15px solid var(--white);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 557fr) minmax(0, 663fr);
  gap: 0;
  align-items: start;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 400;               /* Welterweight */
  text-transform: uppercase;
  font-size: 22.58px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--teal);
}
.hero__title {
  margin-top: 49px;
  font-family: var(--font-display);
  font-weight: 500;               /* Middleweight */
  text-transform: uppercase;
  font-size: 72.58px;
  line-height: 71.4px;
  letter-spacing: 0.002em;
}
.hero__text {
  margin-top: 35px;
  max-width: 380px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.hero .btn--lg { margin-top: 30px; }

.hero__awards {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 58px;
}
.hero__awards img { height: 57.6px; width: auto; }

/* One flat image straight from the .indd — cut shapes, 9px gaps and the
   figures breaking out of their frames are all baked in.
   The group starts at page y=217, i.e. 20.4px above the hero's 145px pad. */
.collage {
  align-self: start;
  width: 100%;
  margin-top: -20.4px;
}
.collage img { width: 100%; height: auto; }

/* ==========================================================================
   8. Client logo marquee — band 979..1163, slots h≈100, gap 51
   ========================================================================== */
.marquee {
  background: var(--white);
  padding: 66px 0 10px;      /* report's magazine bleeds up into this band */
  overflow: hidden;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 51px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img {
  height: 88px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.5;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================================
   9. Report — white band 1163.5..1662.4 (498.9 tall)
   art group x254..975 / y1271..1565 (721 x 294) — one flat export
   heading col x1061.7 (+86.7), top y1281.1 (+10.1), 394 wide, 71.38/70.22
   button y1516.2..1564.3
   ========================================================================== */
.report {
  background: var(--white);
  padding-top: 107.5px;
  padding-bottom: 97.4px;
}
.report__inner {
  display: flex;
  align-items: flex-start;
}
.report__art {
  flex: none;
  width: 721px;
}
.report__art img { width: 100%; }

.report__body { margin-left: 86.7px; margin-top: 10.1px; min-width: 0; }
.report__title {
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  text-transform: uppercase;
  font-size: 71.38px;
  line-height: 70.22px;
}
.report__title b { font-weight: 500; }
.report__body .btn { margin-top: 38px; }

/* ==========================================================================
   10. Services — dark band 603.7 tall
   label y146 (130.3x34.3 outline, 11.68) · title +59 (43.16/40.58)
   body 15/19 · btn 142x48 · cols 261, gap 58.65 · bottom 146
   ========================================================================== */
.services {
  background: var(--charcoal);
  color: var(--white);
  padding-top: 146px;
  padding-bottom: 146px;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 58.65px;
}
.service { display: flex; flex-direction: column; align-items: flex-start; }
.service__label {
  --c: 9px;
  --outline: #fff;
  --outline-bg: var(--charcoal);
  --stroke: 1.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 9px 12px;
  margin-bottom: 25px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 11.68px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
}
.service__title {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 43.16px;
  line-height: 40.58px;
}
.w-light { font-weight: 300; }             /* Champion Gothic Lightweight */
.service__text {
  flex: 1 0 auto;
  margin-top: 15px;
  font-size: 15px;
  line-height: 19px;
}
.service .btn { margin-top: 11px; }

/* ==========================================================================
   11. Results — white band 753.5 tall
   title y107 (51.38) · cards y192, 261x266 · stat 118.5x142 @y179
   logo panel 184x78.7 right, @y242.6 · btn right @y346.8 · bottom 166
   ========================================================================== */
.results {
  background: var(--white);
  padding-top: 107px;
  padding-bottom: 166px;
}
.results__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 51.38px;
  line-height: 1;
  letter-spacing: -0.02em;        /* tracking -20 in the story */
}
.results__title b { font-weight: 500; }

.results__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 58.65px;
  margin-top: 85px;
}
.result__top { position: relative; }
/* Photos are plain rectangles in the .indd — probed the top-right corner of
   cards 1 and 2 at 3x, both are image content, no chamfer. */
.result__media {
  aspect-ratio: 261.04 / 265.86;
  overflow: hidden;
}
.result__media img { width: 100%; height: 100%; object-fit: cover; }

/* tags: one row of four, y2463.9 (5.8 from the photo top), x262 (+8), gap 5 */
.result__tags {
  position: absolute;
  top: 5.8px;
  left: 8px;
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  z-index: 2;
}

/* stat block: 118.5x142 at y179.3, hangs 55.4 below the photo.
   Chamfer is symmetric — top-right 35.6, bottom-left 34.4.
   Each card sets its own --num / --lbl / --dim: the designer sized every
   stat by hand (37.48/19.39 on card 1, 47.41/13.92 on cards 2-3, 43.41 on 4)
   and the trailing half of the label takes a tinted colour. */
.result__stat {
  --c: 35px;
  --num: 47.41px;
  --lbl: 13.92px;
  position: absolute;
  left: 0;
  top: 67.44%;
  width: 45.4%;
  min-height: 142px;
  z-index: 3;
  /* CenterAlign in the story; frame insets 22 top / 9.02 the rest. The text
     frame is x254..369.9 while the panel runs to 372.5, so the extra 2.6 goes
     on the right to keep the optical centre on x311.95. */
  padding: 22px 11.62px 9.02px 9.02px;
  text-align: center;
  color: var(--white);
  background: var(--teal);
}
.result__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--num);
  line-height: 1.036;
  letter-spacing: -0.01em;
}
/* the % sign is set in a lighter cut than the digits — Featherweight on card 1,
   Bantamweight on the rest (same point size) */
.result__stat .pct { font-weight: var(--pct, 200); }
.result__stat > span {
  display: block;                 /* no gap — the leading already stacks it */
  font-family: var(--font-display);
  font-weight: var(--lblw, 500);
  font-size: var(--lbl);
  text-transform: uppercase;
  line-height: 1.107;
  letter-spacing: -0.01em;
}
.result__stat i { font-style: normal; color: var(--dim); }

/* client logo panel: plain white rect, right side, same bottom line as the
   stat block. No chamfer and no shadow in the .indd. */
.result__logo {
  position: absolute;
  right: 0;
  top: 91.25%;
  width: 70.54%;
  height: 78.7px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
}
.result__logo img { max-height: 42px; max-width: 75%; width: auto; }

.result__actions {
  display: flex;
  justify-content: flex-end;
  /* stat hangs 55.5 below the media, button sits 25.5 under that */
  margin-top: 81px;
}

.result--teal    .result__stat, .result--teal    .tag-solid { background: var(--teal); }
.result--magenta .result__stat, .result--magenta .tag-solid { background: var(--magenta); }
.result--orange  .result__stat, .result--orange  .tag-solid { background: var(--orange); }
.result--blue    .result__stat, .result--blue    .tag-solid { background: var(--blue); }

/* per-card stat sizes and tinted label colours, straight from the stories */
/* card 1's label is Lightweight (and larger); cards 2-4 are Middleweight */
.result--teal    .result__stat { --num: 37.48px; --lbl: 19.39px; --dim: #a2dbd5; --pct: 100; --lblw: 300; }
.result--magenta .result__stat { --dim: #f0c3dc; }
.result--orange  .result__stat { --dim: #f7cc66; }
.result--blue    .result__stat { --num: 43.41px; --dim: #35506c; }

/* ==========================================================================
   12. Culture — tinted band y3019.5..3646.3 (626.8 tall)
   photo x254..634 / y3140.4..3525.4 (380x385, chamfer 78)
   heading col x719.2..1474 (754.8 wide), gap 85.2 · 65.09/64.03
   ========================================================================== */
.culture {
  background: var(--off-white);
  padding-top: 120.9px;
  padding-bottom: 120.9px;   /* photo and button both end on y3525.4 */
  overflow: hidden;
}
.culture__inner {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 754.8px);
  column-gap: 85.2px;
  align-items: start;
}
/* photo is flush with the 254 column, same left edge as the result cards */
.culture__media {
  --c: 78px;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 380 / 385;
  overflow: hidden;
}
.culture__media img { width: 100%; height: 100%; object-fit: cover; }

.culture__body { padding-top: 1.1px; }
.culture__title {
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  text-transform: uppercase;
  font-size: 65.09px;
  line-height: 64.03px;
}
.culture__title b { font-weight: 300; }   /* Lightweight, not Middleweight */
/* The woff2 sets ~0.75% wider than the desktop font InDesign composed with,
   which pushes "commercial growth." onto a fourth line. Measured per-glyph
   excess is 0.0027em on all three lines — take it back so the .indd's three
   lines hold. */
.culture__title { letter-spacing: -0.0027em; }
.culture__text {
  margin-top: 38px;
  max-width: 591px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.culture .btn { margin-top: 30px; }

/* ==========================================================================
   13. News — dark band 604.9 tall
   title y95 (60.73/59.74) · sub y170 · cards y208, img 380x253
   titles right-aligned 24.73/31.74 · READ MORE right
   ========================================================================== */
.news {
  background: var(--charcoal);
  color: var(--white);
  padding-top: 95px;
  padding-bottom: 70px;
}
.news__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.news__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 60.73px;
  line-height: 59.74px;
}
.news__title b { font-weight: 500; }
.news__sub { margin-top: 26px; font-weight: 500; font-size: 17px; line-height: 20px; }

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 38px;
}
.news-card__media {
  --c: 30px;
  position: relative;
  aspect-ratio: 380 / 253.5;
  overflow: hidden;
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__cat { position: absolute; top: 12px; left: 10px; z-index: 2; }
.news-card__title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 24.73px;
  line-height: 31.74px;
  text-align: right;
}
.news-card__foot { display: flex; justify-content: flex-end; margin-top: 24px; }

/* ==========================================================================
   14. CTA — tinted band 466.1 tall, centred
   title y105 (53.05/52.19) · text y223 (17/20 semibold) · btn y313
   ========================================================================== */
.cta {
  background: var(--off-white);
  text-align: center;
  padding-top: 105px;
  padding-bottom: 105px;
}
.cta__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 53.05px;
  line-height: 52.19px;
  max-width: 760px;
  margin-inline: auto;
}
.cta__title b { font-weight: 500; }
.cta__text {
  margin-top: 24px;
  margin-inline: auto;
  max-width: 694px;
  font-weight: 600;
  font-size: 17px;
  line-height: 20px;
}
.cta .btn { margin-top: 33px; }

/* ==========================================================================
   15. Partners — white strip 167.6 tall
   outlined label (text 16.36) + 4 logos (h 41–62), all centred
   ========================================================================== */
.partners { background: var(--white); padding: 38px 0; }
.partners__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  flex-wrap: wrap;
}
.partners__label {
  --c: 16px;
  --outline: var(--charcoal);
  --outline-bg: var(--white);
  --stroke: 2px;
  display: inline-flex;
  align-items: center;
  padding: 23px 42px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16.36px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.partners__logos {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}
.partners__logos img { height: 42px; width: auto; }
.partners__logos img:last-child { height: 62px; }

/* ==========================================================================
   16. Footer — dark band 552.6 tall
   cols at 0 / 183 / 560 / 796 within the 1220 column
   titles CG-Featherweight 46.69/45.93 · contact 19.55/25.5
   inputs 202.8x36.4 gap 17 · legal y458 (12/20)
   ========================================================================== */
.site-footer {
  background: var(--charcoal);
  color: var(--white);
  padding-top: 107px;
  padding-bottom: 83px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 183px 377px 236px minmax(0, 1fr);
  gap: 0;
}
.site-footer__mark img { width: 87px; height: 110px; }

.f-title {
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  text-transform: uppercase;
  font-size: 46.69px;
  line-height: 45.93px;
  margin-bottom: 22px;
}
.f-contact a {
  display: block;
  font-weight: 500;
  font-size: 19.55px;
  line-height: 25.5px;
}
.f-contact a:hover { color: var(--teal); }
.f-address { font-size: 12px; line-height: 18px; }

.f-connected { margin-top: 46px; }

/* 38.3 boxes, 8.9 apart, BevelCorner 7.13 on top-right / bottom-left, 0.81
   white stroke. A border would be sliced open by the chamfer, so the outline
   is drawn as two stacked layers. */
.socials { display: flex; gap: 8.9px; }
.socials a {
  --c: 7.13px;
  --stroke: 0.81px;
  --outline: var(--white);
  --outline-bg: var(--charcoal);
  width: 38.3px; height: 38.3px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--transition);
}
.socials a:hover { --outline-bg: var(--white); color: var(--charcoal); }
/* Icons are the .indd's own outlines, exported in the box's own coordinate
   space — the svg fills the whole 38.3 tile and the artwork is already
   positioned inside it. */
.socials svg { width: 100%; height: 100%; fill: currentColor; }

.newsletter { max-width: 422.4px; }  /* x1049.7..1472.1 */
.newsletter__title {
  font-family: var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  font-size: 46.69px;
  line-height: 45.93px;
  margin-bottom: 28px;
}
.newsletter__row {
  display: flex;
  gap: 16.8px;
  margin-bottom: 15.5px;
}
/* Inputs can't carry pseudo-elements, so the chamfered outline lives on a
   wrapper. BevelCorner 9.48 top-right / bottom-left, 1px white stroke. */
.field {
  --c: 9.48px;
  --stroke: 1px;
  --outline: var(--white);
  --outline-bg: var(--charcoal);
  display: block;
  flex: 1;
  min-width: 0;
  height: 36.3px;
}
.newsletter input {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--white);
  background: transparent;
  border: 0;
}
.newsletter input::placeholder { color: rgba(255, 255, 255, 0.8); }
.newsletter input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.newsletter .btn { margin-top: 21px; }

.site-footer__legal {
  margin-top: 96px;
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
}
.site-footer__legal a:hover { color: var(--teal); }
.site-footer__legal span { margin-inline: 10px; opacity: 0.5; }

/* ==========================================================================
   17. About page
   Measured off "2655 ... About Us.indd", page 1 (1728 x 4870), same 254→1474
   content column as the homepage. Header, footer, partners strip and the
   button/chamfer utilities above are reused unchanged.

   Bands: hero 92.4→791.2 · intro 791.2→1537.7 · mission 1537.7→2215.7 (#f4f4f4)
   values 2215.7→2893.7 (charcoal) · team 2893.7→ · CTA band y3928.7
   ========================================================================== */

/* --- 17.1 Hero ------------------------------------------------------------
   The photo fills the page right of x679.77. Over it sits the charcoal
   chevron: its edge runs 45° from (735.37, 92.37) to the apex at (1339, 696),
   then back down-left to (1243.81, 791.19). Both edges are built from skewed
   blocks rather than a percentage polygon so the angle stays 45° at any width.
   Breadcrumb y237.73 · h1 y305.26 (98.39/96.78) · body y612.61
   -------------------------------------------------------------------------- */
/* InDesign frames are fitted to the cap height; a browser line box adds half
   the leading above it. Every offset below is (lineBox - frameHeight) / 2, so
   the cap lands on the y measured in the .indd and the band keeps its 698.82. */
.hero--about { padding-top: 143.1px; padding-bottom: 140.08px; }
.hero--about .hero__inner { display: block; }

.hero--about .hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 58.34%;                /* x719.85 → 1728, where the photo actually starts */
  height: 100%;
  object-fit: cover;
}

/* Upper edge: leading corner at 735.37/1728 = 42.56%, running down-right to
   the apex 603.63 lower. Carries the header's shadow (58% → 0 over 99.37),
   same as the homepage hero. */
.hero--about .hero__chev {
  position: absolute;
  top: 0;
  right: 57.44%;
  width: 300%;
  height: 603.63px;
  background:
          linear-gradient(to bottom, rgba(0, 0, 0, 0.58) 0, rgba(0, 0, 0, 0) 99.37px),
          var(--charcoal);
  transform: skewX(45deg);
  transform-origin: top;
  pointer-events: none;
}
/* Lower edge: starts where the upper one ends, so its offset is derived from
   the same 57.44% and can never drift away from the apex. */
.hero--about .hero__chev--low {
  top: 603.63px;
  bottom: 0;
  height: auto;
  min-height: 95.19px;
  right: calc(57.44% - 603.63px);
  background: var(--charcoal);
  transform: skewX(-45deg);
}

/* Same teal arrow and white wedge as the homepage, only higher up the band:
   the chevron's left corner sits at (47.94, 301) here instead of (47.94, 489). */
.hero--about .hero__tab { top: 160.69px; }

.breadcrumb {
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  text-transform: uppercase;
  font-size: 22.58px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--teal);
}
.breadcrumb span { margin-inline: 1px; }
.breadcrumb a:hover { text-decoration: underline; }

.hero--about .hero__title {
  margin-top: 38.17px;
  font-weight: 300;               /* Lightweight */
  font-size: 98.39px;
  line-height: 96.78px;
  letter-spacing: 0;
}
.hero--about .hero__title b { font-weight: 100; color: var(--teal); }
.hero--about .hero__text { margin-top: 24.55px; max-width: 568.5px; }

/* --- 17.2 Intro -----------------------------------------------------------
   Copy column x254 w380 (y916.69); photo x753 w719.86 (y890.72) with the teal
   panel overlapping it from y1181.82. Awards row y1342.09.
   -------------------------------------------------------------------------- */
.intro {
  background: var(--white);
  padding-top: 99.53px;
  padding-bottom: 126.35px;
}
/* Ratios, not fixed px: 380 : 119 gap : 719.86 out of the 1220 column. The
   composition then shrinks with the viewport instead of stacking early and
   letting the photo balloon to the full column width. */
.intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 380fr) minmax(0, 719.86fr);
  column-gap: 9.75%;              /* 119 / 1220 */
  align-items: start;
}
.intro__copy {
  margin-top: 23.22px;            /* copy y916.69 against the art's y890.72 */
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
}
.intro__copy > * + * { margin-top: 19px; }
.intro__list li { padding-left: 13px; text-indent: -13px; }
.intro__list li::before { content: "\2022\00a0"; }
.intro__list li + li { margin-top: 9px; }

/* Awards: 69.25 tall, 11 apart. The first badge sits on its own charcoal
   plate (73.67 x 69.25); the last one is shorter and rides the centre line. */
.awards {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 66.65px;
}
.awards img { height: 69.25px; width: auto; }
.awards img:last-child { height: 57.07px; }
.awards__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 73.67px;
  height: 69.25px;
  background: var(--charcoal);
}
.awards__box img { height: 58.91px; }

.intro__photo { --c: 60px; }
.intro__photo img { width: 100%; }

/* Title and button share a row: the button sits 48.09 off the right edge with
   its foot just above the title's last line, as in the .indd — but in flow, so
   a narrower panel can never let the two collide. */
.numbers {
  --c: 60px;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-top: -27.07%;            /* 194.9 of the 719.86 column: the panel starts
                                     291.1 down the photo at every width */
  min-height: 229.52px;
  padding: 27.7px 48.09px 45.25px 55px;
  background: var(--teal);
}
.numbers__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 53.05px;
  line-height: 52.19px;
  color: var(--charcoal);
}
.numbers__title b { font-weight: 500; }
.numbers__btn { flex: none; margin-left: auto; margin-bottom: 4.87px; }

/* --- 17.3 Mission ---------------------------------------------------------
   Photo x254 w595.12 (y1648.69) · body x923.51 w550.49, eyebrow y1682.5,
   title y1764.96 (64.61/63.56)
   -------------------------------------------------------------------------- */
.mission {
  background: var(--off-white);
  padding-top: 111px;
  padding-bottom: 111px;
}
.mission__inner {
  display: grid;
  grid-template-columns: minmax(0, 595.12fr) minmax(0, 550.49fr);
  column-gap: 6.1%;               /* 74.39 / 1220 */
  align-items: start;
}
.mission__photo { --c: 60px; }
.mission__photo img { width: 100%; }
.mission__body { padding-top: 28.67px; }

.section-eyebrow {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 51.38px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.section-eyebrow b { font-weight: 500; }

.mission__title {
  margin-top: 30.28px;
  font-family: var(--font-display);
  font-weight: 400;               /* Welterweight */
  text-transform: uppercase;
  font-size: 64.61px;
  line-height: 63.56px;
}
.mission__title b { font-weight: 500; }

/* --- 17.4 Values ----------------------------------------------------------
   Heading row y2314.79 · six 380 x 184.46 cards, 40 apart, rows 21.74 apart.
   Each card's type carries the colour of the card diagonally opposite it.
   -------------------------------------------------------------------------- */
.values {
  background: var(--charcoal);
  color: var(--white);
  padding-top: 97.42px;
  padding-bottom: 99.1px;
}
.values__head { display: flex; align-items: center; gap: 26.48px; }
.values__heading {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 51.38px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.values__heading b { font-weight: 500; }
.values__cta { min-width: 126.57px; }

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 21.74px;
  margin-top: 39.44px;
}
/* The title's frame spans the full 380 card; only the body copy is inset,
   otherwise "make connections" breaks onto a second line. */
.value {
  --c: 30.06px;
  min-height: 184.46px;
  padding: 41.05px 0 0;
  text-align: center;
}
.value__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 51.38px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.value__title b { font-weight: 500; }
.w-feather { font-weight: 100; font-style: normal; }
/* Each card's copy sits in its own measure in the .indd (259.9 / 204 / 302),
   which is what decides where the two lines break. */
.value__text {
  max-width: var(--tw, 302px);
  margin: 9.84px auto 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 19px;
}
.value--steel   { --tw: 259.9px; background: var(--steel);   color: var(--blue); }
.value--orange  { --tw: 259.9px; background: var(--orange);  color: var(--yellow); }
.value--magenta { --tw: 259.9px; background: var(--magenta); color: var(--pink); }
.value--blue    { --tw: 204px;   background: var(--blue);    color: var(--steel); }
.value--yellow  { background: var(--yellow);  color: var(--orange); }
.value--pink    { background: var(--pink);    color: var(--magenta); }

/* --- 17.5 Team ------------------------------------------------------------
   Heading y3000.07 · sub y3071.82 · 4 x 282.68 cards, 29.76 apart,
   name plate sitting straight on the card's bottom edge (17/31.74, right)
   -------------------------------------------------------------------------- */
.team {
  background: var(--white);
  padding-top: 101.24px;
  padding-bottom: 100.35px;
}
.team__heading {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 51.38px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.team__heading b { font-weight: 500; }
.team__sub {
  max-width: 632px;
  margin-top: 24.01px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 29.76px;
  row-gap: 54.07px;
  margin-top: 53.15px;
}
/* Photos vary in size (portrait, landscape); crop them all to the design's
   near-square frame so the grid stays even. Bias the crop upward to keep faces. */

.member { --c: 30.06px; }
.member img {
  width: 100%;
  aspect-ratio: 565 / 547;
  height: auto;
  object-fit: cover;
  object-position: center 22%;
}
.member__name {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 17px;
  line-height: 31.74px;
  text-align: right;
}
.member__name b { font-weight: 400; }   /* Welterweight for the name */

/* Bio popup — the photo is a button when the person has a bio to show. The
   button carries no styling of its own: it must sit in the grid exactly where
   the bare <img> did, so the row of faces stays even whether or not a given
   member has a bio. */
.member__open {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
/* "View bio" washes up over the photo on hover, and is always readable to a
   keyboard user who tabs onto the button. */
.member__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 40, 40, 0.62);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity var(--transition);
}
.member__open:hover .member__hint,
.member__open:focus-visible .member__hint { opacity: 1; }
.member__bio { display: none; }

/* The popup itself. Same overlay mechanics as the video modal: .is-open on
   the backdrop, .has-modal on the body to stop the page scrolling under it. */
.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
}
.bio-modal.is-open { display: flex; }
.bio-modal__inner {
  --c: 30.06px;
  position: relative;
  display: grid;
  grid-template-columns: 386px minmax(0, 1fr);
  gap: 42px;
  width: min(1040px, 100%);
  max-height: calc(100vh - 48px);
  padding: 46px;
  overflow-y: auto;
  background: var(--white);
}
.bio-modal__photo {
  --c: 22px;
  width: 100%;
  aspect-ratio: 565 / 547;
  height: auto;
  object-fit: cover;
  object-position: center 22%;
}
.bio-modal__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.bio-modal__role {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.2;
  color: var(--charcoal);
}
.bio-modal__text {
  margin-top: 22px;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
}
.bio-modal__text p { margin: 0 0 14px; }
.bio-modal__text p:last-child { margin-bottom: 0; }
/* Same tile as the footer socials, charcoal on white for the light panel. */
.bio-modal__linkedin {
  --c: 9.3px;
  --stroke: 1px;
  --outline: var(--charcoal);
  --outline-bg: var(--white);
  display: none;                 /* shown by main.js when the member has one */
  width: 50px; height: 50px;
  margin-top: 26px;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  transition: color var(--transition);
}
.bio-modal__linkedin:hover { --outline-bg: var(--charcoal); color: var(--white); }
.bio-modal__linkedin svg { width: 100%; height: 100%; fill: currentColor; }
.bio-modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--charcoal);
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 860px) {
  .bio-modal__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding: 32px 24px;
  }
  .bio-modal__photo { max-width: 280px; }
  .bio-modal__name { font-size: 34px; }
  /* No hover on touch: the overlay would need a first tap to reveal itself,
     which is the tap that should already be opening the popup. */
  .member__hint { display: none; }
}

/* --- 17.6 "Sounds like a good fit?" band ---------------------------------
   x254 w1220 h182.87 at y3928.69, text inset 107.46, button 30.85 after it
   -------------------------------------------------------------------------- */
.fit { background: var(--white); }
.fit__band {
  --c: 42.49px;
  display: flex;
  align-items: center;
  gap: 30.85px;
  min-height: 182.87px;
  padding-left: 107.46px;
  background: var(--teal);
}
.fit__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 53.05px;
  line-height: 52.19px;
  color: var(--charcoal);
}
.fit__title b { font-weight: 500; }

/* The band's bottom (y4111.56) to the partners strip (y4149.28). The strip is
   167.55 tall in the .indd; scoping it to `.fit +` keeps the shared component
   itself untouched for the homepage. */
.fit { padding-bottom: 37.72px; }
.fit + .partners {
  display: grid;
  align-items: center;
  min-height: 167.55px;
  padding: 0;
}

.t-white { color: var(--white); }

/* ==========================================================================
   18. Responsive
   Desktop values above are 1:1 with the 1728 visual. Below 1280 the fixed
   compositions collapse to fluid layouts.
   ========================================================================== */
@media (max-width: 1279px) {
  .hero { padding-top: 96px; padding-bottom: 80px; }
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__bg::before { display: none; }
  .hero__title { font-size: clamp(46px, 6.4vw, 72.58px); line-height: 0.985; }
  .report__inner { flex-wrap: wrap; gap: 36px; }
  .report__art { width: 100%; }
  .report__body { margin-left: 0; margin-top: 0; }
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 44px; }
  /* The card's stat block, logo panel and button are placed at fixed sizes
     against a 261-wide card, so stretching a card to half the column pulls
     them out of register. auto-fit keeps every card between ~245 and ~330:
     four across at 1279, three in the 900s, two on a tablet. */
  .results__grid { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 40px 28px; }
  .culture__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .culture__body { padding-top: 0; }
  .culture { padding-top: 72px; padding-bottom: 72px; }
  .news__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 44px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-header__inner { min-height: 76px; }

  /* The nav and the CTA drop into a panel under the bar. It stays in the
     flow-less layer so the bar keeps its height; .is-nav-open reveals it. */
  .site-header__right {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    align-self: auto;
    gap: 0;
    padding: 6px 24px 24px;
    background: var(--charcoal);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
  .site-header.is-nav-open .site-header__right { display: flex; }
  .site-header__right > .btn { align-self: flex-start; margin-top: 16px; }

  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { display: block; }
  .nav__item--has-sub > .nav__link { justify-content: space-between; width: 100%; }
  .nav__link { padding: 13px 0; }

  /* submenus become inline accordions, opened by tap */
  .nav__sub {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 8px 14px;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__item--has-sub.is-open > .nav__sub { display: block; }
  .nav__sub a { padding: 9px 0; }

  /* burger turns into a close cross */
  .site-header.is-nav-open .nav-toggle span { background: transparent; }
  .site-header.is-nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
  .site-header.is-nav-open .nav-toggle span::after  { top: 0; transform: rotate(-45deg); }

  /* ------------------------------------------------------------------
     Everything below is measured off the MOBILE artboard (800 x 5040,
     57 side margins -> 686 content). Sizes are written as vw so the
     artboard is reproduced 1:1 at 800px and scales down from there,
     clamped so type stays readable on a 375 phone.
     ------------------------------------------------------------------ */
  .container { padding-inline: 7.125%; }          /* 57/800 */

  /* header: bar 120 tall, logo 174.3x46.8, burger 49.4 wide */
  .site-header__inner { min-height: 120px; }
  .site-logo img { width: clamp(120px, 21.79vw, 174.3px); height: auto; }
  .nav-toggle { width: 49.4px; height: 49.4px; }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after { height: 5.8px; width: 49.4px; }
  .nav-toggle span::before { top: -15.4px; }
  .nav-toggle span::after  { top: 15.4px; }

  /* hero: eyebrow y199.5, h1 y270.2, body y665.8, btn y785.2, awards y901.2 */
  .hero { padding-top: 79.5px; padding-bottom: 59.2px; }
  .hero__tab, .hero__notch { display: none; }
  .eyebrow { font-size: clamp(15px, 2.82vw, 22.58px); }
  .hero__title {
    margin-top: 52.6px;
    font-size: clamp(46px, 12.38vw, 99.07px);      /* 99.07/800 */
    line-height: 0.984;                            /* 97.46/99.07 */
  }
  .hero__text {
    margin-top: 41.8px;
    max-width: none;
    font-size: clamp(16px, 2.75vw, 22px);
    line-height: 1.273;                            /* 28/22 */
  }
  .hero .btn--lg { margin-top: 41.4px; }
  .hero__awards { margin-top: 41.5px; gap: 10.5px; }
  .hero__awards img { height: clamp(42px, 8.29vw, 66.3px); }
  .collage { margin-top: 42.5px; }

  .hero__inner {
    gap: 0px;
  }

  /* client logos: band 183 tall, slots 290.3x117.2, pitch 214.5 */
  .marquee { padding: 36.5px 0 29.3px; }
  .marquee__track { gap: 0; }
  .marquee__track img { height: clamp(64px, 14.65vw, 117.2px); }

  /* report: title FIRST, then the art, then the button (y1891.8 / 2169.3 /
     2675.5 on the artboard) — the desktop order is art then body. */
  .report { padding-top: 45.8px; padding-bottom: 50px; }
  .report__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .report__body { display: contents; }
  .report__title { order: 1; font-size: clamp(38px, 9.16vw, 73.24px); line-height: 0.984; }
  .report__art { order: 2; width: 100%; margin-top: 21.3px; }
  .report__body .btn { order: 3; justify-self: start; margin-top: 41.1px; }

  /* services: one column, rule between items, button to the right of the
     copy and sharing its bottom edge (label y2962.9, pitch 517.1) */
  .services { padding-top: 62.9px; padding-bottom: 101.7px; }
  .services__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
  }
  .service + .service {
    margin-top: 70.5px;
    padding-top: 71.2px;
    border-top: 1px solid var(--white);
  }
  .results {
    padding-top: 57px;
    padding-bottom: 26px;
  }
  .results__grid {
    margin-top: 52px;
  }
  .site-footer {
    padding-top: 57px;
    padding-bottom: 43px;
  }
  .cta {
    padding-top: 55px;
    padding-bottom: 55px;
  }
  /* label pill: 200.7 x 52.8, 17.98 type, 1.54 stroke, text inset 18.4 */
  .service__label {
    grid-column: 1 / -1;
    justify-self: start;
    --stroke: 1.54px;
    --c: 13px;
    min-height: clamp(38px, 6.6vw, 52.8px);
    padding: 9px clamp(13px, 2.3vw, 18.4px);
    margin-bottom: 0;
    font-size: clamp(13px, 2.25vw, 17.98px);
  }
  .service__title {
    grid-column: 1 / -1;
    margin-top: 36.6px;
    font-size: clamp(40px, 9.99vw, 79.9px);
    line-height: 0.984;
  }
  .service__text {
    margin-top: 37.5px;
    max-width: 375.2px;
    font-size: clamp(16px, 2.75vw, 22px);
    line-height: 1.273;
  }
  .service .btn { align-self: end; margin-top: 37.5px; }

  /* buttons on the artboard are 220.7 x 74.5 with a 25.36 label */
  .btn {
    --ctr: 20px; --cbl: 20px;
    min-width: clamp(150px, 27.59vw, 220.7px);
    min-height: clamp(52px, 9.31vw, 74.5px);
    font-size: clamp(17px, 3.17vw, 25.36px);
  }
  .hero .btn--lg { font-size: clamp(15px, 2.05vw, 16.36px); }   /* label stays 16.36 */

  .news__head { flex-direction: column; }
  .news__title { font-size: clamp(34px, 6vw, 50px); line-height: 1; }
  .culture__title { font-size: clamp(34px, 6.4vw, 54px); line-height: 0.99; }
  .cta__title { font-size: clamp(30px, 5.8vw, 46px); line-height: 0.99; }
  .results__title { font-size: clamp(30px, 5.6vw, 44px); }
}

/* One card left — hold it near its drawn width instead of letting it fill. */
@media (max-width: 560px) {
  .results__grid { grid-template-columns: minmax(0, 340px); justify-content: center; }
}

@media (max-width: 640px) {
  .site-footer__legal {
    margin-top: 56px;
  }
  body { font-size: 16px; }
  .news__grid { grid-template-columns: 1fr; gap: 40px; }
  .partners__inner { gap: 24px; }
  .partners__logos { gap: 18px; }
  .partners__logos img { height: 34px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .newsletter__row { flex-direction: column; }
  .f-title, .newsletter__title { font-size: 36px; line-height: 35px; }
}

/* ==========================================================================
   19. Responsive — About page
   The compositions above are proportional, so 1280 → 861 only needs the type
   to come down; the layout itself holds. Stacking waits until 860, where the
   header turns into a burger.
   ========================================================================== */
@media (max-width: 1279px) {
  /* min-height keeps the band at its 698.82 once the shrinking headline stops
     filling it, so the chevron layers are never clipped. */
  .hero--about { min-height: 698.82px; }
  .hero--about .hero__title {
    font-size: clamp(46px, 7.7vw, 98.39px);
    line-height: 0.985;
  }
  .breadcrumb { font-size: clamp(15px, 1.77vw, 22.58px); }

  .numbers__title { font-size: clamp(30px, 4.15vw, 53.05px); line-height: 0.984; }
  .mission__title { font-size: clamp(34px, 5.05vw, 64.61px); line-height: 0.984; }
  .section-eyebrow,
  .values__heading,
  .team__heading { font-size: clamp(34px, 4.02vw, 51.38px); }
  .value__title  { font-size: clamp(26px, 4.02vw, 51.38px); }
  .fit__title    { font-size: clamp(30px, 4.15vw, 53.05px); line-height: 0.984; }
  .fit__band { padding-left: 8.8%; }
}

/* The apex is 603.63 to the right of the leading edge — a fixed distance that
   would walk off the right of a narrower page and let the chevron swallow the
   photo. Here it is driven by the width instead (34.93% of it, the .indd's
   77.49% apex minus its 42.56% leading edge) so the wedge keeps its share of
   the band, and the lower layer simply runs to whatever the bottom is. */
@media (min-width: 1081px) and (max-width: 1279px) {
  .hero--about .hero__chev { height: 34.93vw; }
  .hero--about .hero__chev--low {
    top: 34.93vw;
    height: calc(100% - 34.93vw);
    right: calc(57.44% - 34.93vw);
  }
}

/* Card grids give up a column before the cards get too narrow for their type */
@media (max-width: 1080px) {
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .team__grid { grid-template-columns: repeat(3, 1fr); }
  /* the heading takes five lines in this panel, which leaves the button
     wedged against its last line — stack them well before the 860 burger */
  .numbers {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 32px 36px;
  }
  .numbers__btn { margin: 0; }
}

/* Under ~1051 the apex cannot stay on the page at all, so the diagonal is
   dropped and the photo moves below the copy — capped, or it would render
   over 800 tall on a tablet. */
@media (max-width: 1080px) {
  .hero--about {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 96px;
    padding-bottom: 0;
  }
  .hero--about .hero__inner { order: 1; }
  .hero--about .hero__photo {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    max-height: 44vw;
    object-fit: cover;
    object-position: center 30%;
    margin-top: 52px;
  }
  .hero--about .hero__chev,
  .hero--about .hero__chev--low,
  .hero--about .hero__tab,
  .hero--about .hero__notch { display: none; }
  /* the copy keeps a measure here; below 860 it goes full width, where the
     homepage's mobile ramp has already taken it up to 22px */
  .hero--about .hero__text { max-width: 620px; }
}

@media (max-width: 860px) {
  .hero--about { padding-top: 79.5px; }
  .hero--about .hero__photo { max-height: 64vw; margin-top: 44px; }
  .hero--about .hero__title { margin-top: 34px; font-size: clamp(44px, 10.6vw, 84px); }
  .hero--about .hero__text { margin-top: 26px; max-width: none; }

  /* the .indd's cuts are cut for 1220-wide blocks — at this size they would
     eat a fifth of the shape, so they scale back with it */
  .intro__photo, .numbers, .mission__photo { --c: 40px; }
  .fit__band { --c: 30px; }

  .intro { padding-top: 64px; padding-bottom: 64px; }
  .intro__inner { grid-template-columns: minmax(0, 1fr); row-gap: 52px; }
  .intro__copy { order: 1; max-width: 620px; margin-top: 0; }
  .intro__art { order: 2; }
  .awards { flex-wrap: wrap; margin-top: 44px; }

  .numbers {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 32px;
  }
  .numbers__btn { margin: 0; }

  .mission { padding-top: 64px; padding-bottom: 64px; }
  .mission__inner { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .mission__body { padding-top: 0; }

  .values { padding-top: 64px; padding-bottom: 64px; }
  .values__head { flex-wrap: wrap; gap: 20px; }
  .values__grid { column-gap: 20px; row-gap: 20px; }
  .value { padding-inline: 20px; }
  .value__text { max-width: none; }

  .team { padding-top: 64px; padding-bottom: 64px; }
  .team__sub { max-width: none; }
  .team__grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 40px; }

  .fit__band {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    min-height: 0;
    padding: 40px;
  }
  .fit + .partners { min-height: 0; padding: 40px 0; }
}

@media (max-width: 640px) {
  .intro__photo, .numbers, .mission__photo { --c: 28px; }
  .fit__band { --c: 22px; }
  .value, .member { --c: 20px; }

  .values__grid { grid-template-columns: minmax(0, 1fr); }
  .value { min-height: 0; padding-block: 32px; }
  .intro__copy { font-size: 16px; }
  .member__name { font-size: 15px; line-height: 22px; }
  .fit__band { padding: 32px 24px; }
}

/* ==========================================================================
   20. Case study page
   Measured off "2655 ... Case Study.indd", page 1 (1728 x 6213), same
   254 → 1474 content column. Header, footer, partners strip, the teal CTA
   band and the button / chamfer utilities above are reused unchanged.

   Bands: hero 92.4→621.2 (charcoal) · intro 621.2→1646.2 (white)
   results 1646.2→2191.1 (#f2f1f2) · quote 2191.1→2657.2 (charcoal)
   method 2657.2→5660.4 (white, CTA band at y5272.2)
   ========================================================================== */

/* --- 20.1 Hero ------------------------------------------------------------
   A plain charcoal band — none of the homepage's chevron, teal tab or white
   notch appear on this page, so only the padding and the grid are overridden.
   Client plate x254 w232 h246.09 · copy from x536 (gap 50)
   -------------------------------------------------------------------------- */
.hero--case {
  overflow: visible;
  padding-top: 141.36px;
  padding-bottom: 141.37px;
}
.hero--case .hero__inner {
  grid-template-columns: 232px minmax(0, 1fr);
  column-gap: 50px;
  align-items: start;
}

/* 1px white outline with the house bevel; a border would be sliced open by
   the chamfer, so it reuses the two-layer .cut-outline. */
.cs-plate {
  --c: 40.53px;
  --stroke: 1px;
  --outline: var(--white);
  --outline-bg: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 232px;
  height: 246.09px;
}
/* 88.52 and 159.76 of the 232 plate — kept as ratios so the marks follow the
   plate when it shrinks. */
.cs-plate img { width: 38.16%; height: auto; }
.cs-plate img.cs-plate__wide { width: 68.86%; }   /* AMTEC's mark is wider and shorter */

.cs-hero__body { padding-top: 38.15px; }  /* breadcrumb cap on y273.23 */

.cs-hero__title {
  max-width: 938px;
  margin-top: 40.95px;
  font-family: var(--font-display);
  font-weight: 300;                       /* Lightweight */
  text-transform: uppercase;
  font-size: 60.58px;
  line-height: 55.4px;
}

/* --- 20.2 Intro -----------------------------------------------------------
   Lede x254 w568.67 (y735.19, 52.53/49.94, tracking -10/1000), body w554.66
   from y972.19. The graphic is flush right: x996.41 w477.59 h568.64.
   -------------------------------------------------------------------------- */
.cs-intro {
  background: var(--white);
  padding-top: 112.14px;
  padding-bottom: 121.96px;
}
/* Ratios, not fixed px — 568.67 : 173.74 gap : 477.59 out of the 1220 column,
   so the composition shrinks with the viewport instead of stacking early. */
.cs-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 568.67fr) minmax(0, 477.59fr);
  column-gap: 14.24%;                     /* 173.74 / 1220 */
  align-items: start;
}

.cs-lede {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 52.53px;
  line-height: 49.94px;
  letter-spacing: -0.011em;               /* tracking -10/1000, plus a hair to hold the .indd's line 2 */
  color: var(--teal);
}

/* Shared body scale for both prose columns: 15/19 with 19 between paragraphs,
   exactly the .indd's paragraph spacing. */
.cs-prose {
  font-size: 15px;
  line-height: 19px;
}
.cs-prose > * + * { margin-top: 19px; }
.cs-prose h2 {
  margin-top: 38px;                       /* an empty 15/19 line sits above each */
  font-family: var(--font-display);
  font-weight: 100;                       /* Featherweight */
  text-transform: uppercase;
  font-size: 40.73px;
  line-height: 39.74px;
}
.cs-prose h2:first-child { margin-top: 0; }
/* The bullet is typed into the copy in the .indd; page 2's objectives wrap,
   and there the second line hangs off it — 0.75em is the "• " advance. */
.cs-prose li + li { margin-top: 9px; }
.cs-prose li::before { content: "\2022\00a0"; }
.cs-prose li,
.cs-objectives li { padding-left: 0.75em; text-indent: -0.75em; }

.cs-intro__prose { max-width: 554.66px; margin-top: 33.8px; }

.cs-objectives__title {
  margin-top: 38px;
  font-family: var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  font-size: 35.68px;
  line-height: 36.63px;
}
.cs-objectives {
  margin-top: 5.9px;
  font-weight: 500;
  font-size: 18.7px;
  line-height: 24.2px;
  letter-spacing: -0.01em;
}
.cs-objectives li::before { content: "\2022\00a0"; }
.cs-objectives li + li { margin-top: 5.9px; }

.cs-intro__art { margin-top: 2.25px; }   /* the .indd frame starts 2.25 below the lede's line box */
.cs-intro__art img { width: 100%; }

/* --- 20.3 Results ---------------------------------------------------------
   Title y1762.59 (60.73/59.74) · three 380 x 184.46 cards at y1837.51,
   40 apart, numbers centred both ways · captions y2037.70 (17/20) in their
   own measures, centred under each card.
   -------------------------------------------------------------------------- */
.cs-results {
  background: var(--paper);
  min-height: 544.92px;           /* page 2's captions are one line — the band
                                     is a fixed rect in both .indds, so hold it */
  padding-top: 113.25px;
  padding-bottom: 118.65px;
}
.cs-results__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 60.73px;
  line-height: 59.74px;
}
.cs-results__title b { font-weight: 500; }   /* Middleweight */

.cs-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  margin-top: 18.33px;
}
.cs-stat__card {
  --c: 30.06px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 184.46px;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 60.73px;
  line-height: 59.74px;
  color: var(--yellow);
  background: var(--orange);
}
.cs-stat__label {
  max-width: var(--lw, 380px);
  margin: 10.49px auto 0;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  text-align: center;
}

/* --- 20.4 Quote -----------------------------------------------------------
   Charcoal band, everything centred on the page: mark y2285.96 (48.51 x
   40.55), quote y2370.08 (33.05/38.19), attribution y2545.35 (17/20).
   -------------------------------------------------------------------------- */
.cs-quote {
  background: var(--charcoal);
  color: var(--white);
  padding-top: 94.86px;
  padding-bottom: 97.09px;
  text-align: center;
}
.cs-quote__mark {
  display: block;
  width: 48.51px;
  height: 40.55px;
  margin-inline: auto;
  fill: var(--teal);
}
.cs-quote__text {
  margin-top: 39.02px;
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 33.05px;
  line-height: 38.19px;
}
.cs-quote__cite {
  margin-top: 21.82px;
  font-weight: 600;                        /* SemiBold */
  font-size: 17px;
  line-height: 20px;
  color: var(--teal);
}

/* --- 20.5 Method ----------------------------------------------------------
   Teal label 380 x 90.05 at y2781.15 (25.54 bevel, 51.58/50.74), then one
   1064.31 column of copy from y2942.90 down to the CTA band at y5272.22.
   -------------------------------------------------------------------------- */
.cs-method {
  background: var(--white);
  padding-top: 123.95px;
  padding-bottom: 156.84px;               /* body bottom y5115.38 → band y5272.22 */
}
.cs-method__label {
  --c: 25.54px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 380px;
  min-height: 90.05px;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 51.58px;
  line-height: 50.74px;
  color: var(--charcoal);
  background: var(--teal);
}
.cs-method__label b { font-weight: 500; }
.cs-method__body { max-width: 1064.31px; margin-top: 69.75px; }

/* --- 20.6 CTA band --------------------------------------------------------
   Same component as the About page's "good fit" strip, but its content group
   (title 694.3 + 30.85 + button) is centred in the 1220 band instead of being
   set against the left inset.
   -------------------------------------------------------------------------- */
/* Only while the band is still a row — below 860 the shared component turns
   into a padded column and must keep its own insets. */
@media (min-width: 861px) {
  .fit__band--center {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}
.fit__band--center .fit__title { text-align: center; }

/* --- 20.7 Case study 2 (AMTEC) --------------------------------------------
   Page 2 of the same .indd (1728 x 4833) is the same skeleton with a second
   client. Only these differ: the h1 runs to 953.01, the intro body is set in
   Medium with -10 tracking over 590.94, "Objectives" is separated by a 5.9
   space instead of a blank line, the stat cards are blue with steel figures,
   and the shorter method body (ends y3757.96) leaves 134.26 to the CTA band.
   -------------------------------------------------------------------------- */
/* The .indd sets this headline in a 953.01 frame that overhangs the 938
   column by 15. Rather than break the grid, the line is tightened by 0.8% —
   the web cut is wide enough that it then lands at 934.5 in the column. */
.cs-hero__title--wide { letter-spacing: -0.008em; }

.cs-intro--medium { padding-bottom: 130.89px; }
.cs-intro--medium .cs-intro__prose {
  max-width: 590.94px;
  font-weight: 500;               /* Medium */
  letter-spacing: -0.01em;        /* tracking -10/1000 */
}
.cs-intro--medium .cs-objectives__title { margin-top: 24.9px; }

.cs-stat--blue .cs-stat__card { color: var(--steel); background: var(--blue); }

.cs-method--short { padding-bottom: 134.26px; }

/* ==========================================================================
   21. Responsive — Case study page
   ========================================================================== */
@media (max-width: 1279px) {
  .cs-hero__title { font-size: clamp(34px, 4.74vw, 60.58px); line-height: 0.985; }
  .cs-lede        { font-size: clamp(30px, 4.11vw, 52.53px); line-height: 0.951; }
  .cs-results__title,
  .cs-stat__card  { font-size: clamp(34px, 4.75vw, 60.73px); line-height: 0.984; }
  .cs-quote__text { font-size: clamp(22px, 2.59vw, 33.05px); line-height: 1.156; }
  .cs-method__label { font-size: clamp(30px, 4.03vw, 51.58px); line-height: 0.984; }
  .cs-prose h2    { font-size: clamp(26px, 3.19vw, 40.73px); line-height: 0.976; }
  .cs-objectives__title { font-size: clamp(24px, 2.79vw, 35.68px); line-height: 1.027; }

  .cs-method__label { width: auto; max-width: 380px; }
}

/* The 232 plate and the 45° cuts on the H graphic hold their proportions, so
   the hero only needs to stack once the copy column gets too narrow. */
@media (max-width: 1080px) {
  .hero--case { padding-top: 96px; padding-bottom: 88px; }
  .hero--case .hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .cs-hero__body { padding-top: 0; }

  .cs-intro { padding-top: 72px; padding-bottom: 72px; }
  .cs-intro__inner { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  /* The lede's hard breaks are the .indd's composition for a 568.67 measure.
     Once the column goes full width they only produce orphans, so they are
     dropped — the newline after each <br> keeps the word space. */
  .cs-lede br,
  .cs-hero__title--wide br { display: none; }
  .cs-intro__art { max-width: 477.59px; }
  .cs-intro__prose { max-width: 620px; }

  .cs-results { padding-top: 72px; padding-bottom: 72px; }
  .cs-quote { padding-top: 64px; padding-bottom: 64px; }
  .cs-method { padding-top: 72px; padding-bottom: 88px; }
  .cs-method__body { margin-top: 48px; }
}

@media (max-width: 860px) {
  .cs-plate { --c: 30px; }
  .cs-stat__card { --c: 22px; }
  .cs-method__label { --c: 20px; }

  /* Three stat cards will not hold their type at this width; two, then one. */
  .cs-results__grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 32px; }
  .cs-stat__card { min-height: 140px; }
  .cs-stat__label { max-width: none; }

  .cs-hero__title { margin-top: 26px; }
  .cs-intro__prose { margin-top: 32px; }
}

@media (max-width: 640px) {
  .cs-plate { --c: 24px; width: 180px; height: 191px; }
  .cs-results__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-prose, .cs-objectives { font-size: 16px; }
  .cs-objectives { line-height: 22px; }
}

/* ==========================================================================
   22. Marketing to Farmers page
   Measured off "2655 ... M2FR.indd", page 1 (1728 x 5437.55), same
   254 → 1474 content column. Header, footer, partners strip, the results
   grid, the teal CTA band and the button / chamfer utilities above are
   reused unchanged.

   Bands: hero 92.4→809.5 · report 809.5→1658.5 (white)
   influencers 1658.5→2285.3 (#f4f4f4) · channels 2285.3→2912.1 (charcoal)
   guide 2912.1→3641.5 (white) · results 3641.5→4418.5 (#f4f4f4)

   Both grey bands carry a swatch *named* "R=40 G=40 B=40" that renders
   244,244,244 — sampled off the visual PDF, same trap as the homepage hero.
   ========================================================================== */

/* --- 22.1 Hero ------------------------------------------------------------
   Same construction as the homepage: the lighter #333 block with a charcoal
   chevron laid over it, the teal arrow biting the left edge and a white notch
   cut into the bottom. The chevron's 45° edge runs x = y + 629.71 up to the
   apex at (1340.90, 711.19), then back down-left along x + y = 2052.09.
   Columns: copy 488.27 · art 388.07 · teal card 311.46.
   -------------------------------------------------------------------------- */
.hero--m2fr {
  background: #333;
  padding-top: 129.43px;          /* topmost item is the art at y221.80 */
  padding-bottom: 189.27px;
}
/* The header's shadow falls across both tones, so it sits above the chevron
   rather than being baked into it (58% → 0 over 99.37, as on the homepage). */
.hero--m2fr::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 99.37px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0));
}
/* Upper edge: leading corner at 722.08/1728 = 41.79%, running down-right to
   the apex 618.82 below the band top. */
.hero--m2fr .hero__chev {
  position: absolute;
  top: 0;
  right: 58.21%;
  width: 300%;
  height: 618.82px;
  background: var(--charcoal);
  transform: skewX(45deg);
  transform-origin: top;
  pointer-events: none;
}
/* Lower edge: starts where the upper one ends, so its offset is derived from
   the same 58.21% and can never drift away from the apex. */
.hero--m2fr .hero__chev--low {
  top: 618.82px;
  height: 98.31px;
  right: calc(58.21% - 618.82px);
  transform: skewX(-45deg);
}
/* Teal rectangle at x0/y226 sits *under* the chevron; the visible part is the
   triangle its 45° corner at (47.94, 316.38) cuts out — 95.88 tall, centred
   on that corner, i.e. 176.07 below the 92.4 band top. */
.hero--m2fr .hero__tab { top: 176.07px; }
/* The chevron's lower corner cuts a white wedge into the band's bottom edge:
   apex (497.19, 765.63) against a bottom of 809.50, so 43.87 deep. */
.hero--m2fr .hero__notch {
  left: calc(28.77% - 43.87px);
  border-left-width: 43.87px;
  border-right-width: 43.87px;
  border-bottom-width: 43.87px;
}

.hero--m2fr .hero__inner {
  grid-template-columns: 40.02% 31.81% 25.53%;   /* 488.27 / 388.07 / 311.46 */
  column-gap: 1.32%;
  align-items: start;
}

.m2fr-hero__copy { margin-top: 14.58px; }        /* eyebrow cap on y237.73 */
.m2fr-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 400;               /* Welterweight */
  text-transform: uppercase;
  font-size: 22.58px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--teal);
}
.m2fr-hero__title {
  margin-top: 42.6px;
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  text-transform: uppercase;
  font-size: 71.38px;
  line-height: 70.22px;
}
.m2fr-hero__title b { font-weight: 500; }        /* Middleweight */
.m2fr-hero__text {
  margin-top: 17.99px;
  max-width: 380px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}

.m2fr-hero__art img { width: 100%; }

.m2fr-hero__card {
  --c: 88.18px;
  margin-top: 27.59px;
  min-height: 370.84px;
  padding: 27.16px 83.54px 20px 24.18px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 37.76px;
  line-height: 35.12px;
  letter-spacing: -0.01em;         /* tracking -10 */
}

/* --- 22.2 Report ----------------------------------------------------------
   The teal panel starts at x218 — 36 outside the 1220 column — and the show
   photo overlaps its right edge from x697.41. The form is its own column
   from x1094.08 (380.42 wide, flush with the 1474 grid line).
   -------------------------------------------------------------------------- */
.m2fr-report {
  background: var(--white);
  padding-top: 133.09px;
  padding-bottom: 129.23px;
}
.m2fr-report__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380.42px;
  column-gap: 57.67px;
  align-items: start;
}
.m2fr-report__left { position: relative; }

.m2fr-report__panel {
  --c: 70px;
  width: 73.11%;                  /* 571.64 of the 781.91 column */
  /* bleeds 36 left of the column, but never past the page's own margin */
  margin-left: calc(-1 * min(36px, max(24px, (100vw - 1220px) / 2)));
  min-height: 586.68px;
  padding: 6.69% 24.27% 7% 6.3%;  /* 38.26 / 138.74 / 40 / 36 of 571.64 */
  background: var(--teal);
}
.m2fr-report__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 71.38px;
  line-height: 70.22px;
  color: var(--charcoal);
}
.m2fr-report__title b { font-weight: 500; }      /* "Marketing" Middleweight */
.m2fr-report__lead {
  margin-top: 22.73px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}

/* Shared bullet list: the bullet is typed into the copy in the .indd but the
   wrapped lines hang off it, so it gets the 0.75em "• " indent. */
.m2fr-list {
  margin-top: 19px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.m2fr-list li { padding-left: 0.75em; text-indent: -0.75em; }
.m2fr-list li::before { content: "\2022\00a0"; }
.m2fr-list li + li { margin-top: var(--li-gap, 9px); }
.m2fr-list--teal li::before { color: var(--teal); }
.m2fr-report__panel .m2fr-list { --li-gap: 10px; }

.m2fr-report__photo {
  --c: 39.62px;
  position: absolute;
  top: 94.55px;
  left: 56.71%;                   /* 443.41 of the 781.91 column */
  width: 43.36%;                  /* 339 */
}
.m2fr-report__photo img { width: 100%; }

.m2fr-form { padding-top: 68.24px; }
.m2fr-form__title {
  font-family: var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  font-size: 48.83px;
  line-height: 48.03px;
  letter-spacing: -0.003em;       /* the web cut is a hair wide for the 380.42 measure */
  color: var(--charcoal);
}
/* 4 fields on a 67.74 pitch — 53.58 tall with a 14.16 gap. */
.m2fr-field {
  --c: 9.48px;
  --stroke: 1px;
  --outline: var(--charcoal);
  --outline-bg: var(--white);
  height: 53.58px;
  margin-top: 14.16px;
}
.m2fr-field:first-of-type { margin-top: 24.91px; }
.m2fr-form input {
  width: 100%;
  height: 100%;
  padding: 0 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  color: var(--charcoal);
  background: transparent;
  border: 0;
}
.m2fr-form input::placeholder { color: var(--charcoal); opacity: 1; }
.m2fr-form input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }

.m2fr-consent {
  display: flex;
  align-items: flex-start;
  gap: 16.38px;
  margin-top: 18.45px;
}
.m2fr-consent__box {
  --c: 3.65px;
  --stroke: 1px;
  --outline: var(--charcoal);
  --outline-bg: var(--white);
  flex: none;
  width: 20.62px;
  height: 20.62px;
}
.m2fr-consent__box input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%; height: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.m2fr-consent__box input:checked { background: var(--charcoal); }
.m2fr-consent label {
  margin-top: 1.11px;
  max-width: 343px;
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
}
.m2fr-consent a { text-decoration: underline; }

.m2fr-form__submit { display: flex; margin: 30.83px 0 0 auto; }

/* --- 22.3 Influencers / channels -----------------------------------------
   Two mirrored bands. Light: photo 527.86 left, copy 552.15 from x876.59.
   Dark: copy 598.90 left, photo 527.86 from x946.14.
   -------------------------------------------------------------------------- */
.m2fr-split {
  background: var(--off-white);
  padding-top: 118.06px;
  padding-bottom: 120.91px;
}
.m2fr-split__inner {
  display: grid;
  grid-template-columns: 43.27% 45.26%;    /* 527.86 / 552.15 */
  column-gap: 7.76%;                       /* 94.73 */
  align-items: start;
}
.m2fr-split__photo { --c: 79px; margin-top: 2.86px; }
.m2fr-split__photo img { width: 100%; }

.m2fr-split__title {
  font-family: var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  font-size: 65.09px;
  line-height: 64.03px;
  letter-spacing: -0.004em;       /* holds the .indd's two-line composition */
  color: var(--charcoal);
}
.m2fr-split__lead {
  margin-top: 26.71px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.m2fr-split .btn { margin-top: 47.51px; }

.m2fr-split--dark {
  background: var(--charcoal);
  color: var(--white);
  padding-top: 115.14px;
  padding-bottom: 118.53px;
}
.m2fr-split--dark .m2fr-split__inner {
  grid-template-columns: 49.09% 43.27%;    /* 598.90 / 527.86 */
  column-gap: 7.64%;                       /* 93.24 */
}
.m2fr-split--dark .m2fr-split__title { color: var(--white); }
.m2fr-split--dark .m2fr-split__photo { margin-top: 3.38px; }
.m2fr-split--dark .btn { margin-top: 33.35px; }

/* --- 22.4 Essential guide -------------------------------------------------
   Charcoal card x674 w646 (50 bevel) with the orange stat box hanging
   233.74 off its right edge, out to the 1474 grid line.
   -------------------------------------------------------------------------- */
.m2fr-guide {
  background: var(--white);
  padding-top: 103.14px;
  padding-bottom: 103.14px;
}
.m2fr-guide__inner {
  display: grid;
  grid-template-columns: 25.22% 52.95%;    /* 307.70 / 646 */
  column-gap: 9.2%;                        /* 112.30 */
  align-items: start;
}
.m2fr-guide__body { margin-top: 77.16px; }
.m2fr-guide__title {
  font-family: var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  font-size: 65.09px;
  line-height: 64.03px;
}
.m2fr-guide__text {
  margin-top: 18.05px;
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
}

.m2fr-guide__cardwrap { position: relative; }
.m2fr-guide__card {
  --c: 50px;
  padding: 49.95px 54.7px 107.72px;
  background: var(--charcoal);
  color: var(--white);
}
.m2fr-guide__mark { margin-inline: 0; }
.m2fr-guide__quote {
  margin-top: 16.89px;
  max-width: 469.72px;
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 33.05px;
  line-height: 38.19px;
  letter-spacing: -0.003em;       /* keeps the quote to the .indd's seven lines */
}
.m2fr-guide__cite {
  margin-top: 20.64px;
  font-weight: 600;
  font-size: 17px;
  line-height: 20px;
  color: var(--teal);
}

/* Width and offset as shares of the card, so the box keeps its overhang when
   the card narrows instead of running off the page. */
.m2fr-guide__stat {
  --c: 32.89px;
  position: absolute;
  top: 111.94px;
  right: -23.84%;                 /* 154 of the 646 card */
  width: 36.18%;                  /* 233.74 */
  min-height: 178.44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--orange);
  color: var(--yellow);
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
}
.m2fr-guide__stat b { font-weight: 500; font-size: 49.93px; line-height: 49.12px; }
.m2fr-guide__stat span { font-weight: 300; font-size: 27.18px; line-height: 26.47px; }

/* --- 22.5 Results ---------------------------------------------------------
   The homepage grid unchanged — only the band tint and the space above and
   below the cards differ (title y3790.27, cards y3874.88, band ends 4418.5).
   -------------------------------------------------------------------------- */
.results--m2fr {
  background: var(--off-white);
  padding-top: 145.69px;
  padding-bottom: 148.78px;
}
.results--m2fr .results__grid { margin-top: 36.31px; }

/* --- 22.6 CTA -------------------------------------------------------------
   Same band as the case studies; the button is wider here (221.06) and the
   gap to the title is 38.82 rather than 30.85.
   -------------------------------------------------------------------------- */
.fit--m2fr { padding-top: 66px; padding-bottom: 49.99px; }
.fit--m2fr .fit__band { gap: 38.82px; }
.m2fr-cta__btn { min-width: 221.06px; }

/* ==========================================================================
   23. Responsive — Marketing to Farmers page
   ========================================================================== */
@media (max-width: 1279px) {
  .m2fr-hero__title  { font-size: clamp(38px, 5.58vw, 71.38px); line-height: 0.984; }
  .m2fr-hero__card   { font-size: clamp(22px, 2.95vw, 37.76px); line-height: 0.93; }
  .m2fr-report__title,
  .m2fr-form__title  { font-size: clamp(34px, 5.58vw, 71.38px); line-height: 0.984; }
  .m2fr-form__title  { font-size: clamp(28px, 3.82vw, 48.83px); }
  .m2fr-split__title,
  .m2fr-guide__title { font-size: clamp(30px, 5.09vw, 65.09px); line-height: 0.984; }
  .m2fr-guide__quote { font-size: clamp(22px, 2.59vw, 33.05px); line-height: 1.156; }
  .m2fr-guide__stat b    { font-size: clamp(34px, 3.9vw, 49.93px); }
  .m2fr-guide__stat span { font-size: clamp(18px, 2.13vw, 27.18px); }
  .m2fr-hero__eyebrow { font-size: clamp(15px, 1.77vw, 22.58px); }
}

/* The chevron's apex is a fixed 618.82 to the right of the leading edge — on
   a narrower page it would walk off and swallow the art, so below 1280 it is
   driven by the width instead (35.81vw, the .indd's 77.60% apex minus its
   41.79% leading edge). */
@media (min-width: 1081px) and (max-width: 1279px) {
  .hero--m2fr .hero__chev { height: 35.81vw; }
  .hero--m2fr .hero__chev--low {
    top: 35.81vw;
    height: calc(100% - 35.81vw);
    right: calc(58.21% - 35.81vw);
  }
}

/* Under ~1080 the three hero columns cannot hold their measures, so the
   diagonal is dropped and the composition goes to a single column. */
@media (max-width: 1080px) {
  .hero--m2fr { padding-top: 96px; padding-bottom: 88px; }
  .hero--m2fr .hero__chev,
  .hero--m2fr .hero__chev--low,
  .hero--m2fr .hero__tab,
  .hero--m2fr .hero__notch { display: none; }
  .hero--m2fr .hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .m2fr-hero__copy { margin-top: 0; }
  .m2fr-hero__art  { max-width: 388.07px; }
  /* padding-bottom >= --c keeps the last line clear of the diagonal */
  .m2fr-hero__card {
    --c: 56px;
    margin-top: 0;
    max-width: 460px;
    min-height: 0;
    padding: 28px 32px 64px 32px;
  }

  .m2fr-report { padding-top: 72px; padding-bottom: 72px; }
  .m2fr-report__inner { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .m2fr-report__panel { width: auto; margin-left: 0; padding: 44px 40px; min-height: 0; }
  /* the photo can no longer overlap a panel it is wider than */
  .m2fr-report__photo { position: static; width: 100%; max-width: 339px; margin-top: 40px; }
  .m2fr-form { padding-top: 0; max-width: 460px; }

  .m2fr-split { padding-top: 72px; padding-bottom: 72px; }
  .m2fr-split--dark { padding-top: 72px; padding-bottom: 72px; }
  .m2fr-split__inner,
  .m2fr-split--dark .m2fr-split__inner { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .m2fr-split__photo,
  .m2fr-split--dark .m2fr-split__photo { margin-top: 0; order: 2; max-width: 527.86px; }
  .m2fr-split__body { order: 1; }
  /* a full-width column would run to ~110 characters a line */
  .m2fr-split__lead,
  .m2fr-split .m2fr-list,
  .m2fr-guide__text { max-width: 640px; }
  .m2fr-split .btn { margin-top: 36px; }

  .m2fr-guide { padding-top: 72px; padding-bottom: 72px; }
  .m2fr-guide__inner { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .m2fr-guide__body { margin-top: 0; }
  .m2fr-guide__card { padding: 44px 40px; }
  /* the overhang has nowhere to go once the card is the full column */
  .m2fr-guide__stat {
    position: static;
    width: 233.74px;
    margin-top: 40px;
  }

  .results--m2fr { padding-top: 72px; padding-bottom: 72px; }
  .results--m2fr .results__grid { margin-top: 40px; }
}

@media (max-width: 860px) {
  .m2fr-hero__card   { --c: 46px; padding-bottom: 54px; }
  .m2fr-report__panel { --c: 44px; }
  .m2fr-report__photo { --c: 44px; }
  .m2fr-split__photo { --c: 80px; }
  .m2fr-guide__card  { --c: 32px; }
  .m2fr-guide__stat  { --c: 22px; }

  .m2fr-hero__text { max-width: none; }
  .m2fr-consent label { max-width: none; }
  .m2fr-form__submit { margin-left: 0; }
  .result__media img {
    border-bottom-left-radius: 20px;
  }
}

@media (max-width: 640px) {
  .m2fr-hero__card    { --c: 34px; padding: 24px 24px 42px; }
  .m2fr-report__panel { --c: 30px; padding: 32px 24px; }
  .m2fr-report__photo { --c: 30px; }
  .m2fr-split__photo  { --c: 50px; }
  .m2fr-guide__card   { --c: 24px; padding: 32px 24px; }
  .m2fr-guide__stat   { width: 100%; }
  .m2fr-report__lead,
  .m2fr-list,
  .m2fr-split__lead,
  .m2fr-guide__text { font-size: 16px; }
}

/* ==========================================================================
   24. Service page (Performance Marketing)
   Measured off "2655 ... Service A.indd", page 1 (1728 x 5101.93), same
   254 → 1474 content column. Header, footer, partners strip and the
   button / chamfer utilities above are reused unchanged.

   Bands: hero 92.4→791.2 · intro 791.2→1355.2 (white)
   four channel bands of 626.82 — #f4f4f4 / charcoal / white / #f4f4f4 —
   1355.2→3862.5 · CTA 3862.5→4381.8 (teal)

   The two light bands carry a swatch *named* "R=40 G=40 B=40" that renders
   244,244,244; sampled off the visual PDF, as on the M2FR page.
   ========================================================================== */

/* --- 24.1 Hero ------------------------------------------------------------
   Same chevron-over-photo composition as the About page, a shade tighter:
   the 45° edge runs from (736.69, 92.37) to the apex at (1340.90, 696.58),
   then back down-left to (1246.29, 791.19).
   -------------------------------------------------------------------------- */
.hero--service { padding-top: 144.01px; padding-bottom: 218.43px; }
.hero--service .hero__inner { display: block; }

.hero--service .hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 60.66%;                  /* frame x679.77 → 1728 */
  height: 100%;
  object-fit: cover;
}
/* Upper edge: leading corner 736.69/1728 = 42.63%, running down-right to the
   apex 604.21 lower. Carries the header's shadow (58% → 0 over 99.37). */
.hero--service .hero__chev {
  position: absolute;
  top: 0;
  right: 57.37%;
  width: 300%;
  height: 604.21px;
  background:
          linear-gradient(to bottom, rgba(0, 0, 0, 0.58) 0, rgba(0, 0, 0, 0) 99.37px),
          var(--charcoal);
  transform: skewX(45deg);
  transform-origin: top;
  pointer-events: none;
}
/* Lower edge: derived from the same 57.37% so it can never drift off the apex.
   Its height is what is left of the band rather than the .indd's 94.61, so a
   longer heading or lead — the band is only as tall as its copy — cannot leave
   the pair short and the photo showing through underneath. At the design's own
   height the two are identical. */
.hero--service .hero__chev--low {
  top: 603.21px;
  bottom: 0;
  height: auto;
  min-height: 94.61px;
  right: calc(57.37% - 604.21px);
  background: var(--charcoal);
  transform: skewX(-45deg);
}
/* Teal rectangle at x0/y217.69 sits under the chevron; the visible part is the
   triangle its 45° corner at (47.94, 301.77) cuts out. */
.hero--service .hero__tab { top: 161.46px; }

.hero--service .hero__title {
  margin-top: 42.21px;
  font-weight: 300;               /* Lightweight */
  font-size: 98.39px;
  line-height: 94.78px;
  letter-spacing: 0;
}
.hero--service .hero__title b { font-weight: 400; }   /* Welterweight */
.hero--service .hero__text { margin-top: 22.04px; max-width: 595.23px; }

/* --- 24.2 Intro -----------------------------------------------------------
   Heading x254 w613.47 (95.09/86.03, tracking -10) with the button under it;
   copy x985.39 w479.78 from y1014.83.
   -------------------------------------------------------------------------- */
.svc-intro {
  background: var(--white);
  padding-top: 139.83px;
  padding-bottom: 179.16px;
}
.svc-intro__inner {
  display: grid;
  grid-template-columns: 50.28% 39.33%;    /* 613.47 / 479.78 */
  column-gap: 9.67%;                       /* 117.92 */
  align-items: start;
}
.svc-intro__title {
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  text-transform: uppercase;
  font-size: 95.09px;
  line-height: 86.03px;
  letter-spacing: -0.012em;       /* tracking -10, plus a hair: the web cut
                                     would otherwise wrap to a third line */
  color: var(--charcoal);
}
.svc-intro__title b { font-weight: 400; color: var(--teal); }   /* Welterweight */
.svc-intro__text {
  margin-top: 78.58px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
/* the .indd's buttons are 140.06 wide here, 2.35 under the shared 142.41 */
.svc-btn { min-width: 140.06px; }
.svc-intro .svc-btn { margin-top: 24.93px; }

/* --- 24.3 Channel bands ---------------------------------------------------
   Four 626.82 bands. In each, the copy column (heading 590 / body 550.45) and
   the case card (548.70) are centred independently on the band's middle line
   — the .indd's own top and bottom gaps are equal in both columns.
   -------------------------------------------------------------------------- */
.svc-band {
  display: flex;
  align-items: center;
  min-height: 626.82px;
  padding-block: 40px;
}
.svc-band--paper { background: var(--off-white); }
.svc-band--white { background: var(--white); }
.svc-band--dark  { background: var(--charcoal); color: var(--white); }

.svc-band__inner {
  display: grid;
  grid-template-columns: 48.36% 44.98%;    /* 590 / 548.70 */
  column-gap: 6.66%;                       /* 81.30 */
  align-items: center;
}
.svc-band__title {
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  text-transform: uppercase;
  font-size: 84.16px;
  line-height: 76.14px;
  letter-spacing: -0.01em;
}
.svc-band__text {
  margin-top: 16.98px;
  max-width: 550.45px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.svc-band .svc-btn { margin-top: 27.82px; }

/* --- 24.4 Case card -------------------------------------------------------
   548.70 wide: photo 246.31 tall with the tag row on it, then a 95.65 strip
   carrying the client panel. The stat block sits on the card's bottom edge
   and hangs back up over the photo; the button ends on the same line.
   -------------------------------------------------------------------------- */
.svc-card { position: relative; padding-bottom: 95.65px; }
.svc-card__media { aspect-ratio: 548.7 / 246.31; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* row y1503.09, i.e. 5.47 down and 7.56 in from the card's corner */
.svc-card__tags {
  position: absolute;
  top: 5.47px;
  left: 7.56px;
  z-index: 3;
  display: flex;
  gap: 4.72px;
}
/* Pill widths in the .indd are fixed frames: CRO / PPC / SEO 36.83 and Paid
   Social 71.95. min-width lands the three short ones exactly; the padding
   leaves Paid Social 4.3 narrow, which is where the type falls. */
.tag-solid--sm {
  min-width: 36.83px;
  height: 23.44px;
  padding: 0 7.9px;
  justify-content: center;
  font-size: 9.24px;
}

.svc-card__stat {
  --c: 40.9px;
  --num: 50.68px;
  --lbl: 14.88px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 26.23%;                  /* 143.91 */
  min-height: 172.54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 10px;
  text-align: center;
  color: var(--white);
  background: var(--teal);
}
.svc-card__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;               /* Middleweight */
  font-size: var(--num);
  line-height: 0.817;             /* 41.38 / 50.68 */
  letter-spacing: -0.01em;
}
/* the % is set in a lighter cut than the digits, same point size */
.svc-card__stat .pct { font-weight: var(--pct, 200); }
.svc-card__stat > span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: var(--lblw, 500);
  font-size: var(--lbl);
  text-transform: uppercase;
  line-height: 1.09;
  letter-spacing: -0.01em;
}
.svc-card__stat i { font-style: normal; color: var(--dim); }

/* plain white panel, no chamfer and no shadow in the .indd */
.svc-card__logo {
  position: absolute;
  left: 26.23%;
  bottom: 0;
  z-index: 2;
  width: 31.46%;                  /* 172.60 */
  height: 95.65px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--white);
}
.svc-card__logo img { max-height: var(--logo-h, 42px); max-width: 100%; width: auto; }

.svc-card__btn {
  --ctr: 16.6px;
  --cbl: 16.6px;
  position: absolute;
  left: 67.82%;                   /* 372.14 */
  bottom: 0;
  min-width: 176.56px;
  min-height: 59.55px;
  font-size: 17.85px;
}

.svc-card--teal    .svc-card__stat { background: var(--teal); }
.svc-card--orange  .svc-card__stat { background: var(--orange); }
.svc-card--magenta .svc-card__stat { background: var(--magenta); }
.svc-card--teal    .tag-solid { background: var(--teal); }
.svc-card--orange  .tag-solid { background: var(--orange); }
.svc-card--magenta .tag-solid { background: var(--magenta); }

/* per-card sizes and tinted label halves, straight from the stories */
.svc-card--teal .svc-card__stat {
  --c: 38.7px; --num: 38.07px; --lbl: 19.70px;
  --dim: #a2dbd5; --pct: 100; --lblw: 300;
}
/* Only while the furniture is still laid along the card's bottom edge — the
   rules below 860 rebuild the card and have lower specificity than these
   variants, so everything they touch is held back to the wide layout. */
@media (min-width: 861px) {
  .svc-card--teal .svc-card__stat { width: 24.92%; min-height: 163.97px; }
  .svc-card--teal .svc-card__logo { left: 24.92%; width: 32.81%; height: 90.90px; }
  .svc-card--teal { padding-bottom: 90.9px; }
  .svc-card--teal    .svc-card__media { aspect-ratio: 548.7 / 242.50; }
  .svc-card--magenta .svc-card__media { aspect-ratio: 548.7 / 245.87; }
}
.svc-card--teal .svc-card__logo { --logo-h: 31.67px; }
.svc-card--orange  .svc-card__stat { --dim: var(--yellow); }
.svc-card--orange  .svc-card__logo { --logo-h: 46.24px; }
.svc-card--magenta .svc-card__stat { --num: 50.74px; --lbl: 14.90px; --dim: var(--pink); }
.svc-card--magenta .svc-card__logo { --logo-h: 41.30px; }

/* --- 24.5 CTA -------------------------------------------------------------
   Teal band. The quote column starts at x674 and runs 848.11 — 48 past the
   1474 grid line, exactly as the .indd's own 1268.11 group does.
   -------------------------------------------------------------------------- */
.svc-cta {
  background: var(--teal);
  color: var(--charcoal);
  padding-top: 107.6px;
  padding-bottom: 108.66px;
}
.svc-cta__inner {
  display: grid;
  /* The .indd's own group is 1268.11 wide, so the quote column deliberately
     runs 48 past the 1474 grid line — a fixed track, not a capped one. */
  grid-template-columns: 34.43% 848.11px;              /* 420 / 848.11 */
  align-items: start;
}
.svc-cta__title {
  font-family: var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  font-size: 84.16px;
  line-height: 76.14px;
  letter-spacing: -0.01em;
}
.svc-cta__head .svc-btn { margin-top: 26.58px; }

.svc-cta__mark { margin-inline: 0; margin-top: 1.5px; fill: var(--white); }
.svc-cta__text {
  margin-top: 25.07px;
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 33.05px;
  line-height: 38.19px;
  letter-spacing: -0.003em;       /* holds the .indd's three lines over 848.11 */
}
.svc-cta__cite {
  margin-top: 17.19px;
  font-weight: 600;
  font-size: 17px;
  line-height: 20px;
}

/* The band's bottom is the partners strip's top — no gap here. */
.svc-cta + .partners {
  display: grid;
  align-items: center;
  min-height: 167.55px;
  padding: 0;
}

/* ==========================================================================
   25. Responsive — Service page
   ========================================================================== */
@media (max-width: 1279px) {
  .hero--service { min-height: 698.82px; }
  .hero--service .hero__title { font-size: clamp(46px, 7.7vw, 98.39px); line-height: 0.964; }
  .svc-intro__title { font-size: clamp(38px, 7.44vw, 95.09px); line-height: 0.905; }
  .svc-band__title,
  .svc-cta__title   { font-size: clamp(36px, 6.58vw, 84.16px); line-height: 0.905; }
  .svc-cta__text    { font-size: clamp(22px, 2.59vw, 33.05px); line-height: 1.156; }
  .svc-card__btn    { min-width: 150px; font-size: 16.36px; }
}

/* The card's stat block is a fixed 172.5 tall against a photo that scales, so
   below ~1150 it would cover the whole image — the band stacks first. */
@media (max-width: 1150px) {
  .svc-band { min-height: 0; padding-block: 72px; }
  .svc-band__inner { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .svc-card { max-width: 548.7px; }
  .svc-band__text { max-width: 640px; }
}

/* The quote column's 48 overhang only clears the page margin down to about
   1317 (container left + 1268.11 <= viewport); below that it is reined in. */
@media (max-width: 1320px) {
  .svc-cta__inner { grid-template-columns: 34.43% minmax(0, 1fr); }
}

/* The apex is a fixed 604.21 right of the leading edge — driven by the width
   below 1280 (34.97vw, the .indd's 77.60% apex minus its 42.63% edge) so the
   wedge keeps its share of the band instead of swallowing the photo. */
@media (min-width: 1081px) and (max-width: 1279px) {
  .hero--service .hero__chev { height: 34.97vw; }
  .hero--service .hero__chev--low {
    top: 34.97vw;
    height: calc(100% - 34.97vw);
    right: calc(57.37% - 34.97vw);
  }
}

/* Under ~1080 the apex cannot stay on the page, so the diagonal is dropped
   and the photo moves below the copy. */
@media (max-width: 1080px) {
  .hero--service {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 96px;
    padding-bottom: 0;
  }
  .hero--service .hero__inner { order: 1; }
  .hero--service .hero__photo {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    max-height: 44vw;
    object-position: center 30%;
    margin-top: 52px;
  }
  .hero--service .hero__chev,
  .hero--service .hero__chev--low,
  .hero--service .hero__tab,
  .hero--service .hero__notch { display: none; }
  .hero--service .hero__text { max-width: 620px; }

  .svc-intro { padding-top: 72px; padding-bottom: 72px; }
  .svc-intro__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .svc-intro__text { margin-top: 0; max-width: 620px; }


  .svc-cta { padding-top: 72px; padding-bottom: 72px; }
  .svc-cta__inner { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .svc-cta + .partners { min-height: 0; padding: 40px 0; }
}

@media (max-width: 860px) {
  .hero--service { padding-top: 79.5px; }
  .hero--service .hero__photo { max-height: 64vw; margin-top: 44px; }
  .hero--service .hero__title { margin-top: 34px; font-size: clamp(44px, 10.6vw, 84px); }
  .hero--service .hero__text { margin-top: 26px; max-width: none; }
  .svc-band__text { max-width: none; }

  /* The furniture no longer fits along one line here, so the card takes the
     home page's results-card arrangement (§11): the stat hangs off the
     bottom-left corner of the photo, the client panel sits to the right of it
     on the same line, and the button goes underneath, ranged right. Offsets
     are the ones that card holds at 375 — stat 35 below the photo, panel 50,
     button a further 26 under the stat. */
  .svc-card {
    --btn-h: clamp(52px, 9.31vw, 74.5px);
    padding-bottom: calc(81px + var(--btn-h));
  }
  /* the photo has to carry a 142 tall stat block, so it stands on its end;
     capped so a 548 wide card doesn't turn into a 559 tall picture */
  .svc-card__media { width: 100%; aspect-ratio: 261.04 / 265.86; max-height: 380px; }

  .svc-card__stat {
    --c: 35px;
    bottom: calc(var(--btn-h) + 46px);
    width: 45.4%;
    min-height: 142px;
  }
  /* the panel runs on under the stat, as it does on the home page */
  .svc-card__logo {
    left: auto;
    right: 0;
    bottom: calc(var(--btn-h) + 31px);
    width: 70.54%;
    height: 78.7px;
  }
  /* where a stat covers its left end, the inset keeps the client's logo
     inside the part of the panel that stays visible */
  .svc-card__stat + .svc-card__logo { padding-left: 23%; }
  /* the shared mobile button size, which the wide rules above overrode */
  .svc-card__btn {
    --ctr: 20px;
    --cbl: 20px;
    left: auto;
    right: 0;
    min-width: clamp(150px, 27.59vw, 220.7px);
    min-height: var(--btn-h);
    font-size: clamp(17px, 3.17vw, 25.36px);
  }
}

@media (max-width: 640px) {
  .svc-intro__text, .svc-band__text, .svc-cta__cite { font-size: 16px; }
}

/* ==========================================================================
   26. Services page (overview)
   Measured off "2655 ... Services.indd", page 1 (1728 x 5784.48), same
   254 → 1474 content column. Header, footer, partners strip and the hero's
   chevron machinery (§24.1) are reused unchanged.

   Bands: hero 92.4→791.2 · intro 791.2→1355.2 (white)
   five discipline bands of 626.82 — #f4f4f4 / charcoal / white / #f4f4f4 /
   charcoal — 1355.2→4489.3 · CTA 4489.3→5064.3 (white)
   ========================================================================== */

/* --- 26.1 Hero ------------------------------------------------------------
   Identical band and chevron to service.html; only the headline runs to
   three lines here, which moves the body copy down to y612.61.
   -------------------------------------------------------------------------- */
.hero--services { padding-bottom: 143.82px; }
.hero--services .hero__text { margin-top: 21.87px; }

/* --- 26.2 Intro -----------------------------------------------------------
   Heading x254 w766.59 (95.09/86.03, tracking -10) with the button under it;
   copy x1094 w371.16 from the same y932.19.
   -------------------------------------------------------------------------- */
.svcs-intro {
  background: var(--white);
  padding-top: 135.76px;
  padding-bottom: 148.01px;
}
.svcs-intro__inner {
  display: grid;
  grid-template-columns: 62.83% 30.42%;    /* 766.59 / 371.16 */
  column-gap: 6.02%;                       /* 73.41 */
  align-items: start;
}
.svcs-intro__title {
  margin-top: 4.06px;             /* the copy's cap sits 4.06 above the heading's */
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  text-transform: uppercase;
  font-size: 95.09px;
  line-height: 86.03px;
  letter-spacing: -0.012em;       /* tracking -10, plus a hair for the web cut */
  color: var(--charcoal);
}
.svcs-intro__title b { font-weight: 400; color: var(--teal); }   /* Welterweight */
.svcs-intro__text {
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.svcs-intro__text p + p { margin-top: 19px; }
/* the .indd's buttons are 180.85 wide on this page */
.svcs-btn { min-width: 180.85px; }
.svcs-intro .svcs-btn { margin-top: 56.08px; }

/* --- 26.3 Discipline bands ------------------------------------------------
   Five 626.82 bands. Copy (590) and the photo card (538.05) are centred
   independently on the band's middle line and swap sides band by band —
   the .indd's top and bottom gaps are equal in both columns every time.
   -------------------------------------------------------------------------- */
.svcs-band {
  display: flex;
  align-items: center;
  min-height: 626.82px;
  padding-block: 40px;
}
.svcs-band--paper { background: var(--off-white); }
.svcs-band--white { background: var(--white); }
.svcs-band--dark  { background: var(--charcoal); color: var(--white); }

.svcs-band__inner {
  display: grid;
  grid-template-columns: 48.36% 44.10%;    /* 590 / 538.05 */
  column-gap: 7.54%;                       /* 91.95 */
  align-items: center;
}
/* photo left, copy right */
.svcs-band--flip .svcs-band__inner { grid-template-columns: 44.10% 48.36%; }

.svcs-band__title {
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight; the highlighted half is
                                     Lightweight, not the other way round */
  text-transform: uppercase;
  font-size: 95.09px;
  line-height: 86.03px;
  letter-spacing: -0.012em;
}
.svcs-band__title .w-light { font-weight: 300; }
.svcs-band__text {
  margin-top: 22.26px;
  max-width: 537.98px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}

/* Discipline list: display type with a teal bullet, one or two columns. */
.svcs-list {
  margin-top: 31.48px;
  max-width: var(--list-w, 505.95px);
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  text-transform: uppercase;
  font-size: 35.68px;
  line-height: 36.63px;
  letter-spacing: -0.012em;       /* holds "Brand/Product Naming" on one line
                                     in the 239.95 column, as the .indd sets it */
}
.svcs-list li { padding-left: 0.55em; text-indent: -0.55em; }
.svcs-list li::before { content: "\2022\00a0"; color: var(--teal); }
.svcs-list--2col { columns: 2; column-gap: var(--list-gap, 26.05px); }

/* The .indd centres the card on the band's middle line everywhere except the
   influencer band, where it sits 24.5 lower; the extra top margin moves the
   centred box down by half of it. */
.svcs-band--low .svcs-card { margin-top: 49px; }

/* photo 538.05 x 309.90 (60.73 bevel) with the button hung 12.22 under its
   right edge — the pair is the card, 370.15 tall. */
.svcs-card { display: flex; flex-direction: column; }
.svcs-card img { --c: 60.73px; width: 100%; }
.svcs-card__btn {
  --ctr: 13.5px;
  --cbl: 13.5px;
  align-self: flex-end;
  margin-top: 12.22px;
  min-width: 180.85px;
  min-height: 48.03px;
}

/* --- 26.4 CTA -------------------------------------------------------------
   White band, everything centred on the page: title y4615 (53.05/52.19),
   copy y4709.63 over 999.54, button y4889.55 (218 x 49.01).
   -------------------------------------------------------------------------- */
.svcs-cta {
  background: var(--white);
  padding-top: 122.97px;
  padding-bottom: 125.71px;
  text-align: center;
}
.svcs-cta__title {
  max-width: 682.2px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 300;               /* Lightweight */
  text-transform: uppercase;
  font-size: 53.05px;
  line-height: 52.19px;
  color: var(--charcoal);
}
.svcs-cta__title b { font-weight: 500; color: var(--teal); }   /* Middleweight */
.svcs-cta__text {
  max-width: 999.54px;
  margin: 39.96px auto 0;
  font-weight: 600;               /* SemiBold */
  font-size: 17px;
  line-height: 20px;
  letter-spacing: -0.003em;       /* keeps the copy to the .indd's six lines */
}
.svcs-cta__text p + p { margin-top: 20px; }
.svcs-cta__btn {
  --ctr: 14.4px;
  --cbl: 14.4px;
  margin-top: 65.16px;
  min-width: 218px;
  min-height: 49.01px;
}

/* The band's bottom is the partners strip's top — no gap here. */
.svcs-cta + .partners {
  display: grid;
  align-items: center;
  min-height: 167.55px;
  padding: 0;
}

/* ==========================================================================
   27. Responsive — Services page
   ========================================================================== */
@media (max-width: 1279px) {
  .svcs-intro__title,
  .svcs-band__title { font-size: clamp(38px, 7.44vw, 95.09px); line-height: 0.905; }
  .svcs-list        { font-size: clamp(24px, 2.79vw, 35.68px); line-height: 1.027; }
  .svcs-cta__title  { font-size: clamp(30px, 4.15vw, 53.05px); line-height: 0.984; }
}

/* Below ~1150 the copy column is too tight for 95px display type beside a
   photo, so the bands go to one column — as the service page does. */
@media (max-width: 1150px) {
  .svcs-band { min-height: 0; padding-block: 72px; }
  .svcs-band__inner,
  .svcs-band--flip .svcs-band__inner { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  /* copy first in both directions once stacked */
  .svcs-band__body { order: 1; }
  .svcs-card { order: 2; max-width: 538.05px; }
  .svcs-band__text { max-width: 640px; }
}

@media (max-width: 1080px) {
  .hero--services { padding-bottom: 0; }

  .svcs-intro { padding-top: 72px; padding-bottom: 72px; }
  .svcs-intro__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .svcs-intro__title { margin-top: 0; }
  .svcs-intro__text { max-width: 620px; }

  .svcs-cta { padding-top: 72px; padding-bottom: 72px; }
  .svcs-cta + .partners { min-height: 0; padding: 40px 0; }
}

@media (max-width: 860px) {
  .svcs-card img { --c: 44px; }
  .svcs-card__btn { align-self: stretch; display: flex; }
  .svcs-list--2col { columns: 1; }
  .svcs-list { max-width: none; }
}

@media (max-width: 640px) {
  .svcs-card img { --c: 30px; }
  .svcs-band__text, .svcs-intro__text, .svcs-cta__text { font-size: 16px; }
}

/* ==========================================================================
   18. Contact page
   Hero band y92.37..621.5 · enquiry band y621.5..1474.23 (teal panel x254.13
   w571.64 + form x910.15 w563.35) · map placeholder y1474.23..1997.31.
   ========================================================================== */

/* --- 18.1 Hero -----------------------------------------------------------
   Copy column x254; the Muller cut-out fills the right from x459 with the
   45° charcoal edge baked into the export. Teal arrow tab on the left.
   ------------------------------------------------------------------------- */
.hero--contact { padding-top: 145.36px; padding-bottom: 169px; }
.hero--contact .hero__inner { display: block; }

/* 1269 x 529 on the 1728 page → right 73.44%, full band height. The export's
   own aspect matches the band, so it seats 1:1 with no cropping. */
.hero--contact .hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 73.44%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 1;
}
/* Charcoal chevron laid over the cut-out: the *visible* diagonal is a clean 45°
   from (725, top) to (1254, bottom) — steeper than the photo frame's own edge,
   so it must be painted on rather than left to the export. Carries the header
   shadow (58% → 0 over 99.37px), same as the homepage / about heroes. */
.hero--contact .hero__chev {
  position: absolute;
  top: 0;
  right: 58.04%;                  /* 1728 · (1 − 0.5804) = 725 at the top edge */
  width: 300%;
  height: 100%;
  background:
          linear-gradient(to bottom, rgba(0, 0, 0, 0.58) 0, rgba(0, 0, 0, 0) 99.37px),
          var(--charcoal);
  transform: skewX(45deg);
  transform-origin: top;
  pointer-events: none;
  z-index: 1;
}

/* Teal rectangle x0/y226 h195, cut to an arrow by the charcoal chevron; the
   visible triangle centres on the block, 47.94 wide. Sits above the chevron. */
.hero--contact .hero__tab { top: 183px; z-index: 2; }

.hero--contact .hero__title {
  margin-top: 45px;
  font-family: var(--font-display);
  font-weight: 300;               /* Lightweight — "Let's" */
  font-size: 98.39px;
  line-height: 94.78px;
  text-transform: uppercase;
  letter-spacing: 0;
}
.hero--contact .hero__photo--mob { display: none; }   /* desktop uses the cut-out */
.hero--contact .hero__title b { font-weight: 500; }   /* Middleweight — "Talk" */
.hero--contact .hero__text { margin-top: 12px; max-width: 448px; }

/* --- 18.2 Enquiry band ---------------------------------------------------- */
.contact {
  background: var(--white);
  padding-top: 86.32px;
  padding-bottom: 92.85px;
}
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 571.64fr) minmax(0, 563.35fr);
  column-gap: 6.92%;              /* 84.37 / 1220 */
  align-items: start;
}

/* Teal info panel — 70 bevel on the top-right and bottom-left corners. */
.contact__info {
  background: var(--teal);
  color: var(--charcoal);
  min-height: 596.68px;
  padding: 82.64px 67.9px;
  clip-path: polygon(
          0 0,
          calc(100% - 70px) 0,
          100% 70px,
          100% 100%,
          70px 100%,
          0 calc(100% - 70px)
  );
}
.contact__lead a {
  display: block;
  font-family: var(--font-display);
  font-size: 48.83px;
  line-height: 48.03px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--charcoal);
  overflow-wrap: anywhere;        /* the long email must never spill the panel's cut edge */
  transition: color var(--transition);
}
.contact__email { font-weight: 100; }   /* Featherweight */
.contact__phone { font-weight: 300; }    /* Lightweight */
.contact__lead a:hover { color: var(--white); }

.contact__address {
  margin-top: 8px;
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.contact__connect {
  margin-top: 50px;
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight — "Stay" */
  font-size: 46.69px;
  line-height: 45.93px;
  text-transform: uppercase;
}
.contact__connect b { font-weight: 300; }   /* Lightweight — "connected" */

/* Dark social tiles: charcoal outline + charcoal icon on the teal panel. */
.socials--dark { margin-top: 24px; }
.socials--dark a {
  --outline: var(--charcoal);
  --outline-bg: var(--teal);
  color: var(--charcoal);
}
.socials--dark a:hover { --outline-bg: var(--charcoal); color: var(--teal); }

/* Enquiry form — heading seats level with the panel's contact block. */
.contact__form { padding-top: 82.64px; }
.contact__title {
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  font-size: 48.83px;
  line-height: 48.03px;
  text-transform: uppercase;
  color: var(--charcoal);
}
.contact__title b { font-weight: 300; }   /* Lightweight — "Enquiry Form" */

.enquiry { margin-top: 21px; }
/* Full-width fields, 9.48 bevel top-right / bottom-left, 1px charcoal outline. */
.enquiry .field {
  --c: 9.48px;
  --stroke: 1px;
  --outline: var(--charcoal);
  --outline-bg: var(--white);
  display: block;
  width: 100%;
  height: 53.58px;
  margin-bottom: 14.16px;
}
.enquiry .field--area { height: 125.71px; }
.enquiry input,
.enquiry textarea {
  width: 100%;
  height: 100%;
  padding: 0 18px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 20px;
  color: var(--charcoal);
  background: transparent;
  border: 0;
}
.enquiry textarea { padding: 16px 18px; resize: vertical; }
.enquiry input::placeholder,
.enquiry textarea::placeholder { color: var(--charcoal); opacity: 0.85; }
.enquiry input:focus,
.enquiry textarea:focus { outline: 2px solid var(--teal); outline-offset: 2px; }

.enquiry__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 29px;   /* collapses with the message field's 14.16 mb → 29.35 gap */
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 16.38px;
  max-width: 343px;
  font-size: 10px;
  line-height: 14px;
  color: var(--charcoal);
}
.consent input {
  flex: 0 0 auto;
  width: 20.62px;
  height: 20.62px;
  margin: 0;
  accent-color: var(--magenta);
}
.consent a { text-decoration: underline; }
.enquiry__foot .btn { flex: 0 0 auto; }

/* --- 18.3 Map placeholder ------------------------------------------------
   Full-bleed band; the live site drops the map embed in here.
   ------------------------------------------------------------------------- */
.map-embed {
  height: 523.08px;
  background: #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The map plugin drops a fixed-size iframe (e.g. 600x450); stretch it to fill
   the full-bleed band instead of sitting as a small centered box. */
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-embed__placeholder {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 48.83px;
  line-height: 48.03px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--charcoal);
}

/* --- 18.4 Contact responsive --------------------------------------------- */
@media (max-width: 1279px) {
  /* The cut-out unwinds from an absolute overlay into a photo band *under* the
     copy — no diagonal, no floating tab, and no desktop top padding gap. */
  .hero--contact {
    padding-top: 56px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  .hero--contact .hero__chev,
  .hero--contact .hero__tab,
  .hero--contact .hero__photo--desk { display: none; }
  .hero--contact .hero__inner { order: 1; }
  .hero--contact .hero__photo--mob {
    display: block;
    order: 2;
    position: relative;
    width: 100%;
    height: clamp(220px, 40vw, 380px);
    margin-top: 44px;
    object-fit: cover;
    object-position: center;
  }
}

/* 861..1279 keeps two columns, so the 48px Champion email would overrun the
   narrower teal panel — scale the display type to the column. */
@media (min-width: 861px) and (max-width: 1279px) {
  .contact__lead a { font-size: clamp(24px, 3.2vw, 48.83px); line-height: 1.05; }
  .contact__title,
  .contact__connect { font-size: clamp(34px, 3.6vw, 48.83px); line-height: 1.02; }
}

@media (max-width: 860px) {
  .contact__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .contact__form { padding-top: 0; }
  .contact__info { min-height: 0; padding: 56px 44px; --c-cut: 44px;
    clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 44px 100%, 0 calc(100% - 44px)); }
  .hero--contact .hero__title { font-size: clamp(56px, 12vw, 98.39px); line-height: 0.96; }
  .map-embed { height: 360px; }
  .map-embed__placeholder { font-size: clamp(30px, 7vw, 48.83px); }
}

@media (max-width: 640px) {
  .contact__lead a { font-size: clamp(30px, 8.5vw, 48.83px); line-height: 1.0; }
  .contact__title,
  .contact__connect { font-size: clamp(32px, 9vw, 48.83px); line-height: 1.0; }
  .contact__info { padding: 40px 28px; }
  .enquiry__foot { flex-direction: column; align-items: stretch; gap: 20px; }
  .enquiry__foot .btn { align-self: flex-start; }
}

/* ==========================================================================
   19. Join the Team page
   Hero (About construction) · white intro · off-white benefits · charcoal
   band (alert + PHOTO-107 + standards) · white vacancies.
   ========================================================================== */

/* --- 19.0 Shared display heading (95.09 / 86.03) ------------------------- */
.join-heading {
  font-family: var(--font-display);
  font-weight: 100;               /* Featherweight */
  font-size: 95.09px;
  line-height: 86.03px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--charcoal);
}
.join-heading b { font-weight: 300; }         /* Lightweight */
.join-heading--light { color: var(--white); }

/* --- 19.1 Hero (Join variant of hero--about) ----------------------------
   The band is a fixed 698.82 in the design; the 2-line title alone leaves it
   ~100 short, so the bottom pad is topped up to hold the About-hero height. */
.hero--join { padding-bottom: 241px; }
.hero--join .hero__title { line-height: 94.78px; }
.hero--join .hero__title b { font-weight: 500; color: var(--white); }  /* "Team" */
/* Below 1280 the headline shrinks (clamp) but the fixed 94.78px leading would
   stay put, tearing "Join Our" and "Team" apart — switch to proportional. */
@media (max-width: 1279px) {
  .hero--join .hero__title { line-height: 0.96; }
}

/* --- 19.2 Intro: video still + copy ------------------------------------- */
.join-intro { background: var(--white); padding-top: 105px; padding-bottom: 132px; }
.join-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 800fr) minmax(0, 356fr);
  column-gap: 4.5%;               /* 55 / 1220 */
  align-items: start;
}
.join-video { position: relative; margin: 0; line-height: 0; }
/* Brand chamfer: 60.73 bevel on the top-right and bottom-left, same as the
   design's image frames. */
.join-video img,
.join-dark__photo img {
  --img-cut: 60.73px;
  clip-path: polygon(
          0 0,
          calc(100% - var(--img-cut)) 0,
          100% var(--img-cut),
          100% 100%,
          var(--img-cut) 100%,
          0 calc(100% - var(--img-cut))
  );
}
.join-video img { width: 100%; height: auto; }
.join-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 75.4px; height: 75.4px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--charcoal);
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}
.join-video__play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--white); }
.join-video__play svg { width: 30px; height: 30px; margin-left: 3px; }

/* Video popup — a play button opens its video here as a 16:9 embed. */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
}
.video-modal.is-open { display: flex; }
.video-modal__inner { position: relative; width: min(1040px, 100%); }
.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-modal__close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
}
body.has-modal { overflow: hidden; }

.join-intro__copy {
  margin-top: 144px;              /* copy sits at y1040 against the video's y896 top */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  color: var(--charcoal);
}
.join-intro__copy p + p { margin-top: 18px; }
.join-intro__copy .btn { margin-top: 36px; }

/* --- 19.3 Benefits (off-white) ------------------------------------------ */
.join-benefits { background: var(--off-white); padding-top: 126px; padding-bottom: 188px; }
.join-benefits__inner {
  display: grid;
  grid-template-columns: minmax(0, 590fr) minmax(0, 538fr);
  column-gap: 7.5%;               /* 92 / 1220 */
  align-items: start;
}
.tick-list {
  margin-top: 27px;
  max-width: 526px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  color: var(--charcoal);
}
.tick-list li { position: relative; padding-left: 20px; }
.tick-list li::before { content: "\2022"; position: absolute; left: 2px; color: var(--teal); font-weight: 700; }
.tick-list li + li { margin-top: 14px; }
.join-benefits__photo { margin: 0; }
.join-benefits__photo img { width: 100%; height: auto; display: block; }

/* --- 19.4 Charcoal band: alert card + photo + standards ----------------- */
/* padding-top blocks the alert's negative margin from collapsing the band's
   top up — without it the charcoal starts at the card's top and the card no
   longer straddles the seam. 92 = half the card, so the seam lands mid-card. */
.join-dark { background: var(--charcoal); color: var(--white); padding-top: 92px; padding-bottom: 102px; }

/* Teal vacancy-alert card, pulled up so its top half sits on the band above
   (seam through its middle). Cut on the top-right and bottom-left. */
.join-alert {
  position: relative;
  z-index: 2;
  margin-top: -183px;
  min-height: 182.87px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 89px;
  background: var(--teal);
  color: var(--charcoal);
  clip-path: polygon(
          0 0,
          calc(100% - 40px) 0,
          100% 40px,
          100% 100%,
          40px 100%,
          0 calc(100% - 40px)
  );
}
.join-alert__title {
  font-family: var(--font-display);
  font-weight: 300;               /* Lightweight */
  font-size: 53.05px;
  line-height: 52.19px;
  text-transform: uppercase;
  letter-spacing: 0;
}
.join-alert__title b { font-weight: 500; }    /* Middleweight — "Job Opportunity" */
.join-alert .btn { flex: 0 0 auto; }

.join-dark__photo { margin: 126px 0 0; line-height: 0; }
.join-dark__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1220 / 530;
  object-fit: cover;
  display: block;
}

.join-standard {
  margin-top: 70px;
  display: grid;
  grid-template-columns: minmax(0, 469fr) minmax(0, 751fr);
  column-gap: 0;
  align-items: start;
}
.std-list {
  max-width: 606px;
  columns: 2;
  column-gap: 40px;
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 35.68px;
  line-height: 36.63px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--white);
}
.std-list li { position: relative; padding-left: 24px; margin-bottom: 12px; break-inside: avoid; }
.std-list li::before { content: "\2022"; position: absolute; left: 0; color: var(--teal); }

/* --- 19.5 Vacancies (white) --------------------------------------------- */
.join-vacancies { background: var(--white); padding-top: 126px; padding-bottom: 120px; }

/* Two columns of bordered cards, the department on a tab over the top edge —
   the careers listing carried across from the previous site. */
.join-vacancies__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px 34px;
  /* clears the heading above and the department tab that sits over each card */
  margin-top: 72px;
  min-height: 160px;
}
.vacancy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--charcoal);
  background: var(--white);
  padding: 52px 40px 40px;
}
.vacancy-card__tag {
  position: absolute;
  top: -19px;
  left: 34px;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #0a8f86;
  background: #66e3cc;
}
.vacancy-card__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1.05;
  color: var(--charcoal);
}
.vacancy-card__text {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  /* Keep the cards even — clamp the summary rather than trim it in PHP. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vacancy-card__link {
  margin-top: auto;
  padding-top: 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--teal);
}
.vacancy-card__link:hover { color: var(--charcoal); }

/* --- 19.6 Join responsive ----------------------------------------------- */
@media (max-width: 1080px) {
  /* the desktop bottom pad only exists to hold the fixed hero band height;
     once the photo unwinds below the copy it just leaves dead charcoal space */
  .hero--join { padding-bottom: 0; }
  .join-intro__inner,
  .join-benefits__inner { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .join-intro__copy { margin-top: 0; }        /* no offset once stacked */
  .join-benefits__photo { max-width: 460px; }
  .join-intro { padding-bottom: 96px; }
  .join-benefits { padding-bottom: 150px; }
  .join-standard { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .join-vacancies__list { grid-template-columns: minmax(0, 1fr); gap: 46px; }
}

@media (max-width: 860px) {
  .join-heading { font-size: clamp(52px, 12vw, 95.09px); line-height: 0.92; }
  .join-alert { flex-direction: column; align-items: flex-start; gap: 22px; padding: 32px; }
  .join-alert__title { font-size: clamp(32px, 7vw, 53.05px); line-height: 1.0; }
  .std-list { columns: 1; font-size: clamp(26px, 6vw, 35.68px); line-height: 1.05; }
  .join-dark__photo { margin-top: 96px; }
  /* the 60.73 chamfer is too heavy once the images are phone-width */
  .join-video img,
  .join-dark__photo img { --img-cut: 34px; }
}

@media (max-width: 640px) {
  .std-list { columns: 1; }
}

.col-full-width.textarea .m2fr-field {
  height: 80px;
}

.col-full-width.textarea textarea{
  border: 0;
  height: 60px;
  width: 96%;
  resize: none;
  outline: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  color: var(--charcoal);
}

.col-full-width.textarea textarea::placeholder {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  color: var(--charcoal);
}

.col-full-width.textarea .wpcf7-form-control-wrap {
  padding-top: 10px;
  padding-left: 10px;
}

.work-testimonial-wrapp .tt-content-wrapp img {display: inline}

.successful-download-link-show a {
	font-weight:bold;
	color:#0000EE;
}