/* ==========================================================================
   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 img {
  --c: 30.06px;
  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 */

/* --- 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: 72.5px; }

  /* 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: 100px; }
  .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: 71.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: 112.9px; padding-bottom: 151.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);
  }
  /* 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: 17px; --cbl: 28px;
    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) {
  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 img { --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,
  .m2fr-split__photo { --c: 44px; }
  .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; }
}

@media (max-width: 640px) {
  .m2fr-hero__card    { --c: 34px; padding: 24px 24px 42px; }
  .m2fr-report__panel { --c: 30px; padding: 32px 24px; }
  .m2fr-report__photo,
  .m2fr-split__photo  { --c: 30px; }
  .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
   stacked rules below 860 have lower specificity than these variants. */
@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__logo { --logo-h: 31.67px; }
.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--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 card's furniture no longer fits along one line at this width */
  .svc-card { padding-bottom: 0; }
  .svc-card__stat,
  .svc-card__logo,
  .svc-card__btn { position: static; }
  .svc-card__stat { width: auto; min-height: 0; padding: 20px; }
  .svc-card__logo { width: auto; height: 90px; }
  .svc-card__btn  { display: flex; margin-top: 20px; }
}

@media (max-width: 640px) {
  .svc-card__stat { --c: 26px; }
  .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; }
}