@import url("https://use.typekit.net/ihu3rho.css");

/* Jost (SIL OFL): self-hosted Futura-style fallback for when Typekit's Futura PT
   isn't available (blocked, offline, domain not allowed). */
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/jost-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/jost-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   TOKENS
   ============================================ */
:root {
  --blue:        #1a75b4;
  --blue-deep:   #14568a;
  --sky:         #1c94d2;
  --orange:      #f68e1e;
  --green:       #7fc571;
  --ink:         #14181f;
  --ink-soft:    #4a5160;
  --paper:       #ffffff;
  --mist:        #f4f5f6;
  --line:        #e3e6ea;

  /* Lifted tints of the brand accents for words set on the blue bands
     (pure orange/green on #1a75b4 is ~2:1 and visibly vibrates) */
  --grey-band:      #F6F6F8;   /* the light grey used for the hero and the former blue bands */
  --green-on-blue:  #b9eaa9;
  --orange-on-blue: #ffc27a;
  --sky-on-blue:    #a9dcf7;

  --font-display: "futura-pt", "Futura", "Jost", "Century Gothic", "Avenir Next", Avenir, sans-serif;
  --font-body:    "futura-pt", "Futura", "Jost", "Century Gothic", "Avenir Next", Avenir, sans-serif;

  --container: 1180px;
  --radius: 6px;
  /* Type tiers: HEADLINE = big, black, one coloured phrase; STATEMENT = small, bold, black; BODY = small, regular, grey */
  --fs-statement: clamp(17px, 1.4vw, 20px);
  --fs-body: clamp(16px, 1.3vw, 19px);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ============================================
   RESET / BASE
   ============================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body) !important;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
p { margin: 0; }
button { font-family: inherit; }

.wrap {
  width: 100%;
  max-width: none;                          /* full width: nav, content and footer run edge to edge */
  margin: 0 auto;
  padding: 0 clamp(16px, 2.2vw, 40px);
}

.skip-link a {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; z-index: 999;
}
.skip-link a:focus { left: 12px; top: 12px; }

/* Section rhythm */
section { padding: 96px 0; }
@media (max-width: 780px) { section { padding: 64px 0; } }

.eyebrow { font-weight: 700; color: var(--ink-soft); }

/* Color utility words — matches the brand's established accent-word pattern */
.c-green  { color: var(--green); }
.c-orange { color: var(--orange); }
.c-blue   { color: var(--blue); }
.c-sky    { color: var(--sky); }
.c-white  { color: #fff; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--blue);
  color: #fff;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); background: var(--blue-deep); }
.btn--sm { padding: 10px 20px; font-size: 14px; }

/* ============================================
   HEADER / NAV
   ============================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.logo { display: flex; align-items: center; line-height: 1; }
.logo__img { height: 30px; width: auto; display: block; }

.primary-nav > ul { display: flex; align-items: center; gap: 8px; }
.primary-nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--radius);
  color: var(--ink);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > a.is-active {
  background: var(--mist);
  color: var(--blue);
}
.nav-cta { margin-left: 8px; }
.nav-cta .btn { padding: 11px 22px; border-radius: var(--radius); color: #fff; }

.has-dropdown { position: relative; }
.has-dropdown .chev { transition: transform .18s var(--ease); }
.has-dropdown:hover .chev,
.has-dropdown:focus-within .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; left: auto;   /* right-aligned so it never runs off the screen edge */
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(20,24,31,.12);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius);
  color: var(--ink);
}
.dropdown__link + .dropdown__link,
.dropdown li + li .dropdown__link { margin-top: 2px; }
.dropdown__link:hover { background: var(--mist); }
.dropdown__dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  align-self: center; background: var(--accent, var(--blue));
}
.dropdown__text { display: flex; flex-direction: column; justify-content: center; }
.dropdown__label { font-weight: 700; font-size: 15px; }
.dropdown__pitch { font-weight: 500; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.dropdown--compact { min-width: 200px; left: 0; right: auto; }
.dropdown--compact .dropdown__link { padding: 10px 14px; }
.dropdown__link--green  { --accent: var(--green); }
.dropdown__link--orange { --accent: var(--orange); }
.dropdown__link--blue   { --accent: var(--blue); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.nav-toggle__bars { display: flex; flex-direction: column; justify-content: center; width: 100%; }
.nav-toggle span span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; }
.nav-toggle span span + span { margin-top: 5px; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  /* backdrop-filter on .site-header establishes a new containing block for
     position:fixed descendants, which would size the fullscreen mobile nav
     relative to the 84px header bar instead of the viewport. Disable it here
     so the fixed nav panel positions against the viewport as intended. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .primary-nav {
    position: fixed; top: 84px; right: 0; bottom: 0; left: 0;
    background: #fff;
    transform: translateX(100%);
    transition: transform .25s var(--ease);
    overflow-y: auto;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav > ul { flex-direction: column; align-items: stretch; padding: 16px; gap: 4px; }
  .primary-nav a { padding: 16px; font-size: 18px; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; display: none; margin-top: 4px;
    min-width: 0; width: 100%; padding: 4px 0;
  }
  .has-dropdown.is-open .dropdown { display: block; }
  .nav-cta { margin-left: 0; margin-top: 8px; }
  .nav-cta .btn { width: 100%; justify-content: center; padding: 16px; }
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  padding: clamp(64px, 8vw, 120px) 0;
  min-height: 75vh;                                                  /* three quarters of the screen */
  display: flex; flex-direction: column; justify-content: center;   /* headline centred vertically */
  overflow: hidden;
  background:
    linear-gradient(115deg, #eceef0 0%, #f6f7f8 38%, #ffffff 60%),
    linear-gradient(200deg, rgba(26,117,180,.06), transparent 55%);
}
.hero__plane {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(-32deg, rgba(20,24,31,.035) 0 1px, transparent 1px 64px);
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 75%, transparent);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero h1 {
  font-size: clamp(40px, 8.4vw, 56px);        /* phones: wraps naturally */
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 60px;                        /* room between the heading and the intro text */
}
@media (min-width: 900px) {
  /* "Your people and culture need to shift." sits on ONE line and scales with the screen */
  .hero h1 { font-size: 5.3vw; }
  .hero h1 .line--one { white-space: nowrap; }
}
.hero h1 .line { display: block; }
.hero__sub {
  font-size: clamp(19px, 1.7vw, 25px); color: var(--ink-soft); max-width: 820px;
  display: flex; flex-direction: column; gap: 14px;
}
.hero__sub p { font-weight: 500; }

/* Homepage hero: white, centred, dark text (accent words get a coloured underline) */
.hero--white { background: var(--grey-band); color: var(--ink); text-align: center; }
.hero--white h1 { color: var(--ink); }
.hero--white h1 .c-blue { color: var(--blue); }
/* Hand-drawn brush underline under the accent words; it sweeps in from the left on load */
.scribble { position: relative; display: inline-block; color: var(--ink); }
.scribble__line {
  position: absolute; left: -3%; width: 106%; bottom: -.16em; height: .28em;
  overflow: visible; pointer-events: none;
  clip-path: inset(0 100% 0 0);
  animation: scribble-draw .9s cubic-bezier(.65,0,.35,1) forwards;
}
.scribble--green  .scribble__line { fill: var(--green);  animation-delay: .45s; }
.scribble--orange .scribble__line { fill: var(--orange); animation-delay: .85s; transform: rotate(-1.2deg); }
.scribble--green  .scribble__line { transform: rotate(.8deg); }
@keyframes scribble-draw { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .scribble__line { animation: none; clip-path: none; }
}
.hero--white .hero__sub { color: var(--ink-soft); margin-left: auto; margin-right: auto; align-items: center; }
/* Client logos scrolling in their own strip below the homepage hero (full-colour logos on white) */
.logos-strip { padding: 40px 0; background: #fff; }
.clients.clients--hero {
  margin: 0; padding: 0; border-top: 0;
}
.clients--hero .clients__track .clients__logo { height: 64px; }
.clients--hero .clients__track .clients__logo img { max-width: 150px; }
@media (max-width: 860px) {
  .clients.clients--hero { margin: 0; padding: 0; }
  .clients--hero .clients__track .clients__logo { height: 48px; }
}

/* ============================================
   RECOGNITION (list of pain points)
   ============================================ */
.recognition { background: var(--grey-band); color: var(--ink); }
/* On the light grey bands the accent text/dot colours use the full brand colours */
.recognition, .why, .process { --green-on-blue: var(--green); --orange-on-blue: var(--orange); --sky-on-blue: var(--blue); }
.recognition__inner {
  display: flex; align-items: center; gap: clamp(32px, 6vw, 110px);
}
.recognition__left { flex: 0 1 50%; }
.recognition__left h2 { font-size: clamp(28px, 3.7vw, 54px); line-height: 1.1; color: var(--ink); }
.recognition__close {
  margin-top: 44px;
  font-size: var(--fs-statement); font-weight: 700; line-height: 1.4; color: var(--ink);
  text-wrap: balance;                       /* no lone word on phones */
}
@media (min-width: 1100px) { .recognition__close { white-space: nowrap; } }   /* exactly two lines on desktop */
.recognition-list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.recognition-list li {
  display: flex; gap: 18px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid #d6dade;
  font-size: clamp(17px, 1.6vw, 23px); color: var(--ink);
}
.recognition-list li:first-child { border-top: 1px solid #d6dade; }
.recognition-list .dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange); margin-top: 11px;
}
.recognition-list strong { font-weight: 700; color: var(--ink); }
.recognition-list strong.c-green  { color: var(--green-on-blue); }
.recognition-list strong.c-orange { color: var(--orange-on-blue); }
.recognition-list strong.c-blue   { color: var(--sky-on-blue); }
.recognition-list li:nth-child(3n+2) .dot { background: var(--green-on-blue); }
.recognition-list li:nth-child(3n) .dot { background: var(--sky-on-blue); }
@media (max-width: 860px) {
  .recognition__inner { flex-direction: column; align-items: stretch; gap: 36px; }
  .recognition__left { flex: none; }
  .recognition__close { margin-top: 28px; }
}

/* ============================================
   SHARED — kicker chips & soft blob accents
   ============================================ */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 16px; border-radius: var(--radius); margin-bottom: 22px;
}
.kicker--orange { color: var(--orange); background: rgba(246,142,30,.12); }
.kicker--blue   { color: var(--blue);   background: rgba(26,117,180,.10); }
.kicker--white  { color: #fff; background: rgba(255,255,255,.16); }
.blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }

/* ============================================
   STATEMENT (big bold belief-shift divider — replaces old WHY layout)
   ============================================ */
.statement { position: relative; overflow: hidden; padding: 120px 0 130px; }
.statement .blob--1 {
  width: 460px; height: 460px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(26,117,180,.10), transparent 70%);
}
.statement .blob--2 {
  width: 260px; height: 260px; left: -100px; bottom: -110px;
  background: radial-gradient(circle, rgba(246,142,30,.09), transparent 70%);
}
.statement__inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; text-align: center; }
.statement h2 {
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;                      /* avoids a lone word ("do:") on its own line on phones */
}
.statement__body { margin: 28px auto 0; font-size: 19px; color: var(--ink-soft); max-width: 740px; }
.statement__small, .statement__punch { font-size: var(--fs-statement); line-height: 1.45; font-weight: 700; color: var(--ink); }
.statement__small { margin: 32px auto 0; max-width: 760px; }
.statement__punch { margin-top: 32px; }   /* same gap as between the heading and the line above */
@media (max-width: 780px) {
  .statement { padding: 72px 0 80px; }
}

/* ============================================
   THE DIFFERENCE — right now / after table
   ============================================ */
.difference { background: var(--paper); }   /* white, so it separates the two light-grey bands either side */
.difference__head { max-width: none; margin: 0 auto 64px; text-align: center; }
.difference__head h2 {
  font-size: clamp(30px, 4vw, 68px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 auto 22px;
  max-width: 20em;                           /* tied to the font size: always wraps to two balanced lines on desktop */
  text-wrap: balance;
}
.difference__head p { color: var(--ink); font-size: var(--fs-statement); }

/* Before / after: a plain list, muted "right now" -> bold blue "after", hairline dividers (flexbox) */
.shift-list { max-width: 1040px; margin: 0 auto; }
.shift-list__labels, .shift-row { display: flex; align-items: center; gap: 24px; }
.shift-list__labels { padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.shift-list__labels span:nth-child(3) { color: var(--blue); }
.shift-list__labels span:nth-child(1), .shift-row__before { flex: 1 1 0; min-width: 0; }
.shift-list__labels span:nth-child(2), .shift-row__arrow { flex: 0 0 40px; }
.shift-list__labels span:nth-child(3), .shift-row__after { flex: 1 1 0; min-width: 0; }
.shift-row { padding: 22px 12px; margin: 0 -12px; border-bottom: 1px solid #d6dade; border-radius: 4px; }
.shift-row p { margin: 0; }
.shift-row__before { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; font-weight: 500; color: #3a404c; }
.shift-row__arrow { display: flex; justify-content: center; color: var(--orange); }
.shift-row:nth-child(3n+1) .shift-row__arrow { color: var(--green); }
.shift-row:nth-child(3n) .shift-row__arrow { color: var(--sky); }
.shift-row__arrow svg { width: 34px; height: 17px; animation: shift-nudge 2.4s var(--ease) infinite; }
/* The arrows nudge forward in a ripple running down the list */
.shift-row:nth-child(2) .shift-row__arrow svg { animation-delay: .15s; }
.shift-row:nth-child(3) .shift-row__arrow svg { animation-delay: .3s; }
.shift-row:nth-child(4) .shift-row__arrow svg { animation-delay: .45s; }
.shift-row:nth-child(5) .shift-row__arrow svg { animation-delay: .6s; }
.shift-row:nth-child(6) .shift-row__arrow svg { animation-delay: .75s; }
.shift-row:nth-child(7) .shift-row__arrow svg { animation-delay: .9s; }
.shift-row:nth-child(8) .shift-row__arrow svg { animation-delay: 1.05s; }
.shift-row:nth-child(9) .shift-row__arrow svg { animation-delay: 1.2s; }
@keyframes shift-nudge {
  0%, 55%, 100% { transform: translateX(0); }
  25% { transform: translateX(7px); }
}
.shift-row { transition: background .2s var(--ease); }
.shift-row:hover { background: var(--grey-band); }
.shift-row:hover .shift-row__after { color: var(--blue-deep); }
/* Scroll reveal: "right now" shows, then the arrow shoots across, then "after" lands */
.js-reveal .shift-row[data-reveal] .shift-row__before { opacity: 0; transition: opacity .4s var(--ease); }
.js-reveal .shift-row[data-reveal] .shift-row__arrow { opacity: 0; transform: translateX(-14px); transition: opacity .35s var(--ease) .2s, transform .35s var(--ease) .2s; }
.js-reveal .shift-row[data-reveal] .shift-row__after { opacity: 0; transform: translateX(-10px); transition: opacity .45s var(--ease) .4s, transform .45s var(--ease) .4s; }
.js-reveal .shift-row.is-revealed .shift-row__before,
.js-reveal .shift-row.is-revealed .shift-row__arrow,
.js-reveal .shift-row.is-revealed .shift-row__after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .shift-row__arrow svg { animation: none; } }
.shift-row__after { font-size: clamp(19px, 1.8vw, 26px); line-height: 1.25; font-weight: 700; color: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .shift-list__labels { display: none; }
  .shift-row { flex-wrap: wrap; gap: 6px 14px; padding: 18px 12px; }
  .shift-row__before { flex: 1 1 100%; }
  .shift-row__arrow { flex: 0 0 auto; transform: rotate(90deg); }
  .shift-row__after { flex: 1 1 0; }
}

.difference__fit {
  text-align: center; margin-top: 40px; font-size: 18px;
}
.difference__fit strong { display: block; font-size: 20px; margin-top: 4px; }

/* ============================================
   HOW WE WORK (process circles)
   ============================================ */
.process { background: var(--grey-band); }
.process__head { max-width: none; margin: 0 auto 72px; text-align: center; }
.process__head h2 { font-size: clamp(34px, 5vw, 76px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); }

.process__intro {
  max-width: 860px; margin: 28px auto 0; text-align: center;
  color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.55;
}

.process-grid {
  display: flex; flex-wrap: wrap;
  position: relative;
}
.process-grid::before {
  content: ""; position: absolute; top: 74px; left: 11%; right: 11%; height: 2px;
  background: #d6dade; z-index: 0;
}
.process-step { position: relative; z-index: 1; text-align: center; padding: 0 16px; flex: 1 1 22%; min-width: 200px; }
.process-step__circle {
  width: 148px; height: 148px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 22px; letter-spacing: .06em;
  margin: 0 auto 28px;
  box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(20,24,31,.18);
}
.process-step__circle--blue-deep { background: var(--blue-deep); }
.process-step__circle--green { background: var(--green); }
.process-step__circle--orange { background: var(--orange); }
.process-step__circle--sky { background: var(--sky); }
.process-step p { color: var(--ink-soft); font-size: clamp(16px, 1.2vw, 18px); max-width: 280px; margin: 0 auto; }
.js-reveal .process-step[data-reveal] .process-step__circle { transform: scale(.6); opacity: 0; transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .35s var(--ease); }
.js-reveal .process-step.is-revealed .process-step__circle { transform: none; opacity: 1; }
@media (max-width: 780px) { .process-step__circle { width: 120px; height: 120px; font-size: 19px; } }

.process__note {
  margin-top: 56px; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto;
  font-size: var(--fs-statement); line-height: 1.45; font-weight: 700; color: var(--ink);
}

@media (max-width: 780px) {
  .process-grid { gap: 40px; }
  .process-step { flex-basis: 100%; }
  .process-grid::before { display: none; }
}

/* ============================================
   PROOF / testimonials
   ============================================ */
.proof__head { max-width: 1040px; margin: 0 auto 24px; text-align: center; }
.proof__head h2 { font-size: clamp(34px, 4.8vw, 72px); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 28px; text-wrap: balance; }
.proof__head h2 .c-blue { white-space: nowrap; }   /* so "us" never sits alone on a line */
.proof__head p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.55; max-width: 860px; margin: 0 auto 16px; }

.proof__stats {
  display: flex; justify-content: center; gap: clamp(36px, 8vw, 150px); flex-wrap: wrap;
  margin: 56px 0 80px; text-align: center;
}
.proof__stat strong {
  display: block; font-size: clamp(60px, 8vw, 128px); line-height: 1; letter-spacing: -0.03em;
  color: var(--blue); font-family: var(--font-display) !important;
  font-variant-numeric: tabular-nums;
}
.proof__stat span { display: block; margin-top: 14px; color: var(--ink-soft); font-size: clamp(15px, 1.3vw, 19px); }

/* Client logos: centred statement above a slow, looping carousel */
.clients { margin: 0 0 96px; padding-top: 72px; border-top: 1px solid var(--line); text-align: center; }
.clients--title-only { margin-bottom: 0; }
.clients--title-only .clients__title { margin-bottom: 0; }
.clients__title {
  font-size: clamp(28px, 3.2vw, 52px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink); max-width: 22em; margin: 0 auto 48px;
  text-wrap: balance;
}
.clients__carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients__track {
  display: flex; width: max-content; align-items: center;
  animation: clients-scroll 55s linear infinite;
}
.clients__carousel:hover .clients__track { animation-play-state: paused; }
.clients__logo { flex: 0 0 auto; height: 88px; padding: 0 clamp(28px, 3.4vw, 56px); display: flex; align-items: center; }
.clients__logo img { display: block; height: auto; max-height: 100%; width: auto; max-width: 190px; object-fit: contain; }
@keyframes clients-scroll { to { transform: translateX(-50%); } }
@media (max-width: 860px) { .clients { padding-top: 48px; margin-bottom: 64px; } .clients--title-only { margin-bottom: 0; }
.clients--title-only .clients__title { margin-bottom: 0; }
.clients__title { margin-bottom: 32px; } .clients__logo { height: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .clients__carousel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .clients__track { animation: none; }
}

/* Testimonials: featured card + stacked cards, two columns (flexbox) */
.testimonials {
  display: flex; align-items: flex-start; gap: 24px;
  margin-top: 48px;
}
.t-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.t-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 32px 34px;
  box-shadow: 0 10px 30px -14px rgba(20,24,31,.14);
  display: flex; flex-direction: column; gap: 26px;
}
.t-card__quote { font-size: 18px; line-height: 1.6; color: var(--ink); }
.t-card__by { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.t-card__avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: Georgia, serif; font-size: 30px; line-height: 1; padding-top: 10px;
  background: linear-gradient(135deg, var(--green), var(--sky));
}
.t-card:nth-child(2n) .t-card__avatar { background: linear-gradient(135deg, var(--orange), #f9b95c); }
.t-card:nth-child(3n) .t-card__avatar { background: linear-gradient(135deg, var(--blue), var(--sky)); }
.t-card__who { display: flex; flex-direction: column; font-style: normal; }
.t-card__role { font-weight: 700; font-size: 17px; color: var(--ink); }
.t-card__org { font-size: 15px; color: var(--ink-soft); }
/* Lead quote: same white card as the rest, just set a little larger */
.t-card--featured { padding: 42px 44px; gap: 34px; }
.t-card--featured .t-card__quote { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5; }
@media (max-width: 860px) {
  .testimonials { flex-direction: column; gap: 20px; }
  .t-col { width: 100%; gap: 20px; }
  .t-card, .t-card--featured { padding: 28px 24px; border-radius: 0; }
}

/* ============================================
   SERVICES — three level cards
   ============================================ */

.level-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.level-cards .level-card { flex: 1 1 280px; }
.level-card {
  background: #fff; border-radius: 0;
  border: 2px solid var(--line);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.level-card:hover { transform: translateY(-4px); }
.level-card--green  { border-color: var(--green); }
.level-card--orange { border-color: var(--orange); }
.level-card--blue   { border-color: var(--blue); }
.level-card h3 { font-size: 22px; }
.level-card--green h3  { color: var(--green); }
.level-card--orange h3 { color: var(--orange); }
.level-card--blue h3   { color: var(--blue); }
.level-card p { color: var(--ink-soft); font-size: 16px; flex: 1; }
.level-card__arrow {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s var(--ease);
}
.level-card--green .level-card__arrow  { background: rgba(127,197,113,.15); color: var(--green); }
.level-card--orange .level-card__arrow { background: rgba(246,142,30,.15); color: var(--orange); }
.level-card--blue .level-card__arrow   { background: rgba(26,117,180,.15); color: var(--blue); }
.level-card:hover .level-card__arrow { transform: translateX(4px); }

@media (max-width: 860px) { .level-cards .level-card { flex-basis: 100%; } }

/* ---- Levels: heading + three tiles (homepage) ---- */
.levels { background: var(--paper); }
.testimonials-band, .founders-section { background: var(--grey-band); }
.testimonials-band { padding-top: 0; }                 /* no grey space above the heading... */
.testimonials-band .clients { border-top: 0; }          /* ...and no thin line */
.levels__head, .section-head { max-width: 900px; margin: 0 auto 64px; text-align: center; }
.levels__head h2, .section-head h2 { font-size: clamp(34px, 5vw, 76px); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 22px; }
.levels__head p, .section-head p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.5; max-width: 760px; margin: 0 auto; }

.level-tiles { display: flex; flex-wrap: wrap; gap: 14px; }
.level-tile {
  flex: 1 1 320px;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;                          /* hard right angles, tiles spaced tightly like Apple's */
  overflow: hidden;
  transition: box-shadow .25s var(--ease);
}
.level-tile:hover, .level-tile:focus-visible {
  box-shadow: 0 18px 36px -22px rgba(20,24,31,.3);
}
.level-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.level-tile__top {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  min-height: 250px; padding: 36px 38px;
  color: #fff;
}
/* Three nested rings: leader inside team inside organisation. The tile's own level is filled. */
.level-rings {
  position: absolute; top: 26px; right: 26px; width: 132px; height: 132px; overflow: visible;
}
.level-rings circle { transition: transform .5s cubic-bezier(.34,1.56,.64,1); transform-origin: 70px 70px; }
.level-rings__outer  { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
.level-rings__active { fill: #fff; }
.level-rings__inner  { fill: none; stroke: var(--tile-accent, var(--blue)); stroke-width: 2.5; opacity: .75; }
.level-tile:hover .level-rings__active, .level-tile:focus-visible .level-rings__active { transform: scale(1.08); }
.level-tile--green  { --tile-accent: #5aa84c; }
.level-tile--orange { --tile-accent: #e07a10; }
.level-tile--blue   { --tile-accent: var(--blue); }
@media (max-width: 860px) { .level-rings { width: 104px; height: 104px; top: 20px; right: 20px; } }
.level-tile--green  .level-tile__top { background: linear-gradient(140deg, #78c06a, #8fd082); }
.level-tile--orange .level-tile__top { background: linear-gradient(140deg, #f4861a, #f9a64a); }
.level-tile--blue   .level-tile__top { background: linear-gradient(140deg, var(--blue-deep), var(--sky)); }
.level-tile__num {
  position: relative; align-self: flex-start;
  font-weight: 700; font-size: 15px; letter-spacing: .12em;
  padding: 6px 14px; border-radius: var(--radius); background: rgba(255,255,255,.22);
}
.level-tile__title { position: relative; font-weight: 700; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; letter-spacing: -0.01em; }
.level-tile__body {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 34px 38px 38px;
}
.level-tile__pitch { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-soft); }
.level-tile__cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 17px; color: var(--ink);
}
.level-tile__cta svg { transition: transform .25s var(--ease); }
.level-tile:hover .level-tile__cta svg, .level-tile:focus-visible .level-tile__cta svg { transform: translateX(8px); }
.level-tile--green  .level-tile__cta { color: #3f8a33; }
.level-tile--orange .level-tile__cta { color: #c8650a; }
.level-tile--blue   .level-tile__cta { color: var(--blue-deep); }
@media (max-width: 860px) {
  .level-tiles { gap: 14px; }
  .level-tile__top { min-height: 190px; padding: 28px 26px; }
  .level-tile__body { padding: 26px 26px 30px; }
  .levels__head { margin-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .level-tile, .level-tile__cta svg { transition: none; }
  .level-tile:hover { transform: none; }
}

/* ============================================
   ROLLOVER SERVICE CARDS (accordion — green highlight items)
   ============================================ */
.service-list { display: flex; flex-direction: column; gap: 20px; max-width: 1180px; margin: 0 auto; }
.service-card {
  border: 2px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.service-card:hover { border-color: var(--accent, var(--blue)); }
.service-card.is-open { border-color: var(--accent, var(--blue)); box-shadow: 0 14px 36px rgba(20,24,31,.08); }

.service-card__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(24px, 2.6vw, 38px) clamp(24px, 3vw, 44px);
  background: none; border: none; cursor: pointer; text-align: left;
}
.service-card__headline { font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
.service-card__more {
  flex: none; display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--ink);
  padding: 10px 20px; border-radius: var(--radius); background: var(--accent, var(--blue)); border: 0; color: #fff;
}
.service-card__more svg { transition: transform .22s var(--ease); }
.service-card.is-open .service-card__more svg { transform: rotate(45deg); }

.service-card__body {
  max-height: 0; overflow: hidden;
  transition: max-height .32s var(--ease);
}
.service-card__body-inner { padding: 0 clamp(24px, 3vw, 44px) clamp(26px, 3vw, 40px); color: var(--ink-soft); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; max-width: 980px; }

.service-card__body-inner p + p { margin-top: 14px; }
.service-card__lead { color: var(--ink); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; }
.service-list--green  .service-card { --accent: var(--green); }
.service-list--orange .service-card { --accent: var(--orange); }
.service-list--blue   .service-card { --accent: var(--blue); }

/* ============================================
   PAGE HEADER (internal pages hero)
   ============================================ */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(72px, 9vw, 140px) 0 clamp(64px, 8vw, 120px);
  text-align: center;
  background:
    linear-gradient(115deg, #eceef0 0%, #f6f7f8 38%, #ffffff 60%),
    linear-gradient(200deg, rgba(26,117,180,.06), transparent 55%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero__kicker {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 16px; border-radius: var(--radius); margin: 0 0 24px;
  color: var(--blue); background: rgba(26,117,180,.10);
}
.page-hero h1 {
  font-size: clamp(38px, 6.2vw, 100px); line-height: 1.03; letter-spacing: -0.02em;
  max-width: 17em; margin: 0 auto; text-wrap: balance;
}
/* How We Help level pages: hero in the level's own colour (as in the nav dropdown), white text */
.page-hero--accent-green  { background: var(--green);  color: #fff; }
.page-hero--accent-orange { background: var(--orange); color: #fff; }
.page-hero--accent-blue   { background: var(--blue);   color: #fff; }
.page-hero--accent-green .page-hero__kicker,
.page-hero--accent-orange .page-hero__kicker,
.page-hero--accent-blue .page-hero__kicker { color: #fff; background: rgba(20,24,31,.22); }
.page-hero--accent-green h1 .accent,
.page-hero--accent-orange h1 .accent,
.page-hero--accent-blue h1 .accent { color: #fff; }
/* About / Contact / Insights hero: light grey, dark text */
.page-hero--blue, .page-hero--grey { background: var(--grey-band); color: var(--ink); }
.page-hero--blue .page-hero__kicker, .page-hero--grey .page-hero__kicker { color: var(--blue); background: rgba(26,117,180,.10); }
.page-hero--blue h1, .page-hero--grey h1 { color: var(--ink); }
.page-hero--blue h1 .accent, .page-hero--grey h1 .accent { color: var(--blue); }
.page-hero.page-hero--accent-green p.page-hero__sub,
.page-hero.page-hero--accent-orange p.page-hero__sub,
.page-hero.page-hero--accent-blue p.page-hero__sub { color: rgba(255,255,255,.95); }
.page-hero.page-hero--blue p.page-hero__sub, .page-hero.page-hero--grey p.page-hero__sub { color: var(--ink-soft); }
.page-hero__lead {
  max-width: 980px; margin: clamp(28px, 3vw, 44px) auto 0;
  font-size: clamp(17px, 1.55vw, 23px); line-height: 1.6; font-weight: 500;
  color: rgba(255,255,255,.94);
}
.page-hero--blue .page-hero__lead { color: var(--ink-soft); }
.page-hero p.page-hero__sub { margin: 32px auto 0; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.5; color: var(--ink-soft); max-width: 860px; }

/* ============================================
   PROSE BLOCKS (about / intros)
   ============================================ */
.prose { max-width: 720px; }
.prose p { font-size: 18px; color: var(--ink-soft); margin-bottom: 20px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); }

.two-col {
  display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start;
}
.two-col > * { flex: 1 1 380px; }
@media (max-width: 860px) { .two-col { gap: 32px; } }

/* Assessments / sustain panel */
.panels { display: flex; flex-wrap: wrap; gap: 24px; }
.panels .panel { flex: 1 1 320px; }
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: clamp(28px, 3.4vw, 48px);
  box-shadow: 0 12px 30px -18px rgba(20,24,31,.2);
}
.panel h4 {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--radius); margin-bottom: 24px; color: #fff; background: var(--accent, var(--blue));
}
.panel ul { display: flex; flex-direction: column; gap: 14px; }
.panel li { padding-left: 26px; position: relative; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.45; }
.panel li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--blue));
}
@media (max-width: 700px) { .panels .panel { flex-basis: 100%; } }
.panel--wide { max-width: 1180px; margin: 0 auto; }
.panel--wide ul { display: block; columns: 2; column-gap: 56px; }
.panel--wide li { break-inside: avoid; margin-bottom: 14px; }
@media (max-width: 700px) { .panel--wide ul { columns: 1; } }

/* ============================================
   ABOUT PAGE EXTRAS
   ============================================ */
.alt-band { background: var(--mist); }

.about-intro__inner { max-width: 1040px; margin: 0 auto; text-align: center; }
.about-intro__lead { font-size: clamp(22px, 2.5vw, 38px); line-height: 1.38; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 36px; }
.about-intro__inner p:not(.about-intro__lead) { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; color: var(--ink-soft); margin: 0 auto 22px; max-width: 880px; }
.about-intro__inner strong { color: var(--ink); }
/* Level pages: less white space between the paragraphs and before the services */
.about-intro--level { padding: 72px 0 40px; }
.about-intro--level .about-intro__inner { gap: 18px 0; }
.about-intro--level .about-intro__inner p { flex: 0 0 100%; max-width: 100%; margin: 0; text-align: left; }
.about-intro--level .about-intro__inner p:not(.about-intro__lead) { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
.about-intro--level .about-intro__lead { font-size: var(--fs-statement); line-height: 1.45; font-weight: 700; color: var(--ink); letter-spacing: 0; text-wrap: balance; max-width: 62em; }

.founders {
  display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 96px); align-items: center;
}
.founders__photo { flex: 1 1 320px; }
.founders > .prose { flex: 2 1 480px; max-width: none; }
.founders__photo { align-self: flex-start; }
.founders__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 0; }
.founders h2 { font-size: clamp(32px, 4vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 28px; }
.founders .prose p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; }
@media (max-width: 860px) { .founders__photo, .founders > .prose { flex-basis: 100%; } }

/* Case study card body (inside the shared expandable .service-card) */
.case-study h4 { margin: 26px 0 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #c8650a; }
.case-study h4:first-child { margin-top: 4px; }
.case-study__quote { margin: 30px 0 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--orange); color: var(--ink); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; font-weight: 600; }

/* About: all assessments in one place (same look as the three level tiles: colour block on top, white list below) */
.assessment-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.assessment-card { flex: 1 1 300px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.assessment-card__top { display: flex; align-items: flex-end; min-height: 125px; padding: 24px 32px; color: #fff; }
.assessment-card--blue   .assessment-card__top { background: linear-gradient(140deg, var(--blue-deep), var(--sky)); }
.assessment-card--orange .assessment-card__top { background: linear-gradient(140deg, #f4861a, #f9a64a); }
.assessment-card--green  .assessment-card__top { background: linear-gradient(140deg, #78c06a, #8fd082); }
.assessment-card--blue   { --accent-ink: var(--blue); }
.assessment-card--orange { --accent-ink: var(--orange); }
.assessment-card--green  { --accent-ink: var(--green); }
.assessment-card h4 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.assessment-card ul { list-style: none; margin: 0; padding: 30px 32px 34px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.assessment-card li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.35; }
.assessment-card li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-ink); }
@media (max-width: 860px) { .assessment-card { flex-basis: 100%; } }

/* Desktop-only line break (<br class="br-desktop">): hidden on phones so the text wraps naturally */
@media (max-width: 700px) { .br-desktop { display: none; } }

/* Contact form: result messages and the hidden spam trap */
.form-msg { margin: 0 0 24px; padding: 16px 20px; font-size: var(--fs-body); font-weight: 700; border-left: 4px solid; }
.form-msg--ok { background: #edf7ea; border-color: var(--green); color: #2f6b25; }
.form-msg--error { background: #fdecec; border-color: #d64545; color: #8f1d1d; }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact form card */
.contact-card {
  max-width: 900px; margin: 0 auto; background: #fff;
  border: 1px solid var(--line); border-radius: 0;
  padding: clamp(28px, 4.5vw, 64px);
  box-shadow: 0 24px 50px -28px rgba(20,24,31,.28);
}
.contact-form { display: flex; flex-direction: column; gap: 26px; }
.field-row { display: flex; flex-wrap: wrap; gap: 26px; }
.field-row .field { flex: 1 1 260px; }
.field { display: flex; flex-direction: column; gap: 10px; font-weight: 700; font-size: 16px; color: var(--ink); }
.field input, .field textarea {
  width: 100%; padding: 16px 18px; font: inherit; font-weight: 500; font-size: 18px; color: var(--ink);
  background: var(--mist); border: 1.5px solid var(--line); border-radius: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.field input:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26,117,180,.16);
}
.contact-form .btn { align-self: flex-start; padding: 17px 38px; font-size: 18px; }
.contact-note { margin-top: 24px; color: var(--ink-soft); font-size: 14px; }

/* ============================================
   IMAGE PLACEHOLDERS
   Used anywhere a real photo/illustration is pending. Diagonal texture +
   centered glyph + small caption so it reads as "content coming", not a
   broken box.
   ============================================ */
.img-placeholder { position: relative; overflow: hidden; }
.img-placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.09) 0 2px, transparent 2px 26px);
}
.img-placeholder__icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 22%; max-width: 64px; min-width: 36px; opacity: .55; z-index: 1;
}
.img-placeholder__icon svg { display: block; width: 100%; height: auto; }
.img-placeholder__caption {
  position: absolute; left: 20px; bottom: 20px; z-index: 1;
  color: #fff; font-weight: 700; font-size: 14px;
}
.img-placeholder__caption small {
  display: block; font-weight: 600; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .75; margin-top: 3px;
}

/* ============================================
   CLOSER (full-width PDF hero photo with WORK BETTER TOGETHER over it,
   like page 1 of the client's PDF — sits above the revealed footer)
   ============================================ */
.closer {
  padding: 0;                               /* no default section padding: the photo starts flush at the top */
  position: relative; z-index: 1;          /* covers the sticky footer until the end of the page */
  background: #000;                         /* matches the photo's black mountain so it blends below */
  color: #fff;
  overflow: hidden;
  box-shadow: 0 24px 40px -12px rgba(0,0,0,.45);
}
.closer__photo {
  width: 100%;
  aspect-ratio: 1820 / 600;
  min-height: 300px;                        /* aspect-ratio fallback + keeps it tall on phones */
  background-image: url('../images/footer-team.jpg');
  background-size: cover; background-position: center top;
  position: relative;
}
.closer__photo::after {                     /* fade the sky's bottom edge into the black below */
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, #000 100%);
}
.closer__inner {
  position: relative;
  margin-top: -16vw;                        /* pull the headline up over the photo */
  padding: 0 clamp(16px, 2.2vw, 40px) 80px;
}
.closer__headline {
  font-size: 13.6vw;
  line-height: .86;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 48px;
}
.closer__row { display: block; white-space: nowrap; }
.closer__row--right { text-align: right; }
.closer__headline .c-sky { color: #5fc3dd; } /* lighter sky, as in the PDF, so it reads on the sunset */
.closer__cta {
  display: flex; align-items: center; justify-content: flex-end; gap: 32px;
  max-width: none; margin: 0 auto;
}
.closer__cta .btn { flex-shrink: 0; }
@media (max-width: 760px) {
  .closer__photo { min-height: 220px; background-position: 70% top; }
  .closer__inner { margin-top: -70px; padding-bottom: 56px; }
  .closer__headline { font-size: 15vw; margin-bottom: 32px; }
  .closer__cta { flex-direction: column; align-items: flex-end; padding: 0 12px; }
}

/* ============================================
   FOOTER
   ============================================ */
main { position: relative; z-index: 1; background: var(--paper); }

/* Revealed on scroll: sticks to the bottom of the viewport behind .closer,
   which slides up off it as you reach the end of the page. */
.site-footer {
  position: sticky; bottom: 0; z-index: 0;
  padding: 48px 0; background: #000000;
}
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.site-footer__brand p { color: rgba(255,255,255,.72); font-size: 13px; margin-top: 6px; }
.logo__img--footer { height: 48px; }
.site-footer__nav { display: flex; gap: 24px; }
.site-footer__nav a { font-size: 14px; font-weight: 700; color: #fff; }
.site-footer__nav a:hover { color: var(--sky-on-blue); }
.site-footer__legal { font-size: 13px; color: rgba(255,255,255,.72); width: 100%; text-align: center; margin-top: 12px; }

@media (max-width: 700px) {
  .site-footer__inner { flex-direction: column; text-align: center; }
}

/* ============================================
   INSIGHTS POST (single article)
   ============================================ */
.post-hero { padding-bottom: 40px; }
.post-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 28px; color: var(--ink-soft); font-size: clamp(16px, 1.3vw, 19px); }
.post-meta__author { font-weight: 700; color: var(--ink); }
/* Post heroes are coloured: byline in white */
.post-hero.page-hero--accent-blue .post-meta, .post-hero.page-hero--accent-orange .post-meta, .post-hero.page-hero--accent-green .post-meta,
.post-hero.page-hero--accent-blue .post-meta__author, .post-hero.page-hero--accent-orange .post-meta__author, .post-hero.page-hero--accent-green .post-meta__author { color: #fff; }

/* Dates are hidden on posts and listing cards at the owner's request. They are still in the markup:
   delete this rule to show them again. */
.post-meta time, .insight-card__meta time { display: none; }

.post-section { padding: 40px 0 72px; }
.post-wrap { display: flex; flex-direction: column; align-items: center; }
.post-figure { width: 100%; max-width: 960px; margin: 0 0 40px; }
.post-figure img { width: 100%; height: auto; border-radius: 0; background: var(--mist); min-height: 160px; object-fit: cover; }

.post-body { width: 100%; max-width: 720px; font-size: 19px; line-height: 1.7; color: var(--ink); overflow-wrap: break-word; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.25em; }
.post-body h2 { font-size: clamp(26px, 3.2vw, 32px); margin: 2em 0 .6em; line-height: 1.2; }
.post-body h3 { font-size: clamp(21px, 2.6vw, 25px); margin: 1.7em 0 .5em; line-height: 1.25; }
.post-body h4 { font-size: 19px; margin: 1.5em 0 .4em; }
.post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--blue-deep); }
.post-body ul, .post-body ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: .45em; }
.post-body li > ul, .post-body li > ol { margin-top: .45em; margin-bottom: 0; }
.post-body blockquote { margin: 1.75em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--sky); color: var(--ink-soft); font-size: 1.08em; font-style: italic; }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body img { max-width: 100%; height: auto; border-radius: 0; margin: 1.5em 0; }
.post-body iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; min-height: 220px; border: 0; border-radius: var(--radius); margin: 1.5em 0; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.post-body pre { overflow-x: auto; background: var(--mist); padding: 16px; border-radius: var(--radius); font-size: 15px; }
.post-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.25em; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }

.post-nav { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; max-width: 720px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.post-nav__link { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1.5px solid var(--line); border-radius: 0; transition: border-color .2s var(--ease); }
.post-nav__link:hover { border-color: var(--blue); }
.post-nav__link--next { text-align: right; }
.post-nav__label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.post-nav__title { font-weight: 700; color: var(--blue); line-height: 1.3; }

@media (max-width: 700px) {
  .post-hero { padding: 48px 0 28px; }
  .post-section { padding: 28px 0 48px; }
  .post-body { font-size: 17px; }
  .post-nav__link--next { text-align: left; }
}

/* ============================================
   INSIGHTS LISTING
   ============================================ */
.insights-section { padding: 40px 0 80px; }
.insights-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.insights-tab { display: inline-block; padding: 10px 20px; border: 1.5px solid var(--line); border-radius: 0; font-weight: 700; font-size: 15px; color: var(--ink-soft); transition: border-color .2s var(--ease), color .2s var(--ease); }
.insights-tab:hover { border-color: var(--blue); color: var(--blue); }
.insights-tab.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.insights-tab:focus-visible, .insights-pager__link:focus-visible, .insight-card__link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.insight-cards { display: flex; flex-wrap: wrap; gap: 28px; }
.insight-card { flex: 1 1 320px; max-width: calc((100% - 56px) / 3); min-width: 0; display: flex; }
.insight-card__link { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1.5px solid var(--line); border-radius: 0; overflow: hidden; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.insight-card__link:hover { border-color: var(--blue); transform: translateY(-3px); }
.insight-card__media { display: block; background: var(--mist); aspect-ratio: 16 / 9; min-height: 160px; overflow: hidden; }
.insight-card__media img { display: block; width: 100%; height: 100%; min-height: 160px; object-fit: cover; }
.insight-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1 1 auto; }
.insight-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-soft); }
.insight-card__cat { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.insight-card__title { font-family: var(--font-display); font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
.insight-card__excerpt { font-size: 16px; line-height: 1.55; color: var(--ink-soft); overflow-wrap: break-word; }

.insights-empty { padding: 48px 0; font-size: 18px; color: var(--ink-soft); }

.insights-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.insights-pager__link { display: inline-block; min-width: 44px; padding: 10px 16px; text-align: center; border: 1.5px solid var(--line); border-radius: 0; font-weight: 700; color: var(--ink); }
.insights-pager__link:hover { border-color: var(--blue); color: var(--blue); }
.insights-pager__link.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

@media (max-width: 1000px) {
  .insight-card { max-width: calc((100% - 28px) / 2); }
}
@media (max-width: 700px) {
  .insights-section { padding: 28px 0 56px; }
  .insight-card { flex-basis: 100%; max-width: 100%; }
}

/* Draft preview banner (insight.php?preview=1, admins only) */
.preview-banner {
  padding: 10px 16px;
  background: #fff4e0;
  border-bottom: 2px solid var(--orange);
  color: var(--ink);
  font-weight: 600;
  text-align: center;
}
.preview-banner a { margin-left: 8px; }


/* ============================================
   SOCIAL — LinkedIn icon (white "in" on LinkedIn blue)
   ============================================ */
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: #0A66C2; color: #fff; border-radius: var(--radius);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.social-link:hover, .social-link:focus-visible { background: #004182; color: #fff; transform: translateY(-1px); }
.social-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.nav-social { margin-left: 4px; display: flex; align-items: center; }
.primary-nav .nav-social a { padding: 0; width: 36px; height: 36px; color: #fff; background: #0A66C2; }
.primary-nav .nav-social a:hover { background: #004182; color: #fff; }
.site-footer__nav { align-items: center; }
.site-footer__nav .social-link { color: #fff; }
.site-footer__nav .social-link:hover { color: #fff; background: #004182; }
@media (max-width: 900px) {
  .nav-social { margin-left: 0; margin-top: 8px; }
  .primary-nav .nav-social a { width: 44px; height: 44px; }
}

/* Small admin link in the footer legal line */
.site-footer__admin { font-size: 11px; color: rgba(255,255,255,.72); opacity: .7; margin-left: 10px; }
.site-footer__admin:hover { opacity: 1; color: var(--sky-on-blue); }

/* Photos added to the homepage proof section and the About intro */
.proof__photo { margin: 40px auto 8px; max-width: 1100px; }
.proof__photo img { display: block; width: 100%; height: auto; border-radius: 0; }
.about-intro__inner { display: flex; flex-wrap: wrap; align-items: stretch; gap: 40px 56px; text-align: left; max-width: 1200px; }
.about-intro__text { flex: 1 1 420px; }
.about-intro__inner .about-intro__text p { margin: 0 0 22px; max-width: none; text-align: left; }
.about-intro__photo { flex: 1 1 380px; margin: 0; position: relative; min-height: 320px; }   /* stretches to the height of the text beside it */
.about-intro__photo img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.proof__photo-note { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.55; max-width: 860px; margin: 28px auto 0; text-align: center; }

/* ============================================
   CLIENT ROUND 13 OCT 2026 — additions
   ============================================ */

/* Anchored sections clear the sticky header */
[id] { scroll-margin-top: 100px; }

/* Generic scroll reveal (js/reveal.js adds .js-reveal to <html> only when motion is OK) */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Rows that animate their own parts instead */
.js-reveal .shift-row[data-reveal], .js-reveal .process-step[data-reveal] { opacity: 1; transform: none; }
.js-reveal .recognition-list li[data-reveal] { transform: translateX(-16px); }
.js-reveal .recognition-list li[data-reveal].is-revealed { transform: none; }

/* WHY US — values-style list on light grey, sticky heading on desktop */
.why { background: var(--grey-band); color: var(--ink); }
.why__inner { display: flex; gap: clamp(32px, 6vw, 110px); align-items: flex-start; }
.why__head { flex: 0 1 36%; position: sticky; top: 130px; }
.why__head h2 { font-size: clamp(40px, 5.4vw, 84px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 24px; }
.why__accent { color: var(--orange-on-blue); }
.why__head p { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; color: var(--ink-soft); max-width: 22em; }
.why-list { flex: 1 1 0; min-width: 0; border-top: 1px solid #d6dade; }
.why-item {
  position: relative; padding: 30px 0 30px 40px;
  border-bottom: 1px solid #d6dade;
}
.why-item__mark {
  position: absolute; left: 0; top: 40px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange-on-blue);
}
.why-item:nth-child(3n+2) .why-item__mark { background: var(--green-on-blue); }
.why-item:nth-child(3n) .why-item__mark { background: var(--sky-on-blue); }
.why-item__title { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15; color: var(--ink); margin-bottom: 10px; }
.why-item__text { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--ink-soft); max-width: 46em; }
@media (max-width: 860px) {
  .why__inner { flex-direction: column; gap: 32px; }
  .why__head { position: static; flex: none; }
  .why-item { padding: 24px 0 24px 32px; }
  .why-item__mark { top: 32px; width: 12px; height: 12px; }
}

/* FIT — closing statement on every page, above the final image */
.fit { background: var(--paper); padding: clamp(80px, 9vw, 140px) 0; border-top: 1px solid var(--line); }
.fit__inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.fit__text {
  font-family: var(--font-display) !important; font-weight: 700;
  font-size: clamp(26px, 3.4vw, 52px); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); text-wrap: balance;
}
.fit__muted { color: var(--ink-soft); }