/* ============================================
   Third Eye Consulting — Design 3
   Clean, Dashboard-Inspired, Frosted Glass
   ============================================ */

/* --- 1. Variables --- */
:root {
  --bg-warm: #FEFAF8;
  --bg-white: #ffffff;
  --primary: #03584E;
  --primary-rgb: 3, 88, 78;
  --primary-light: #067a6c;
  --primary-dark: #024a40;
  --coral: #F6AB93;
  --coral-light: #fde8e0;
  --coral-dark: #e89576;
  --mint: #D9ECE7;
  --mint-strong: #BFE0D6;
  --text-heading: #03584E;
  --text-body: #4a5568;
  --text-light: #718096;
  --font: 'League Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1280px;
  --nav-h: 98px;
  --radius: 30px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --gap: 20px;
  --shadow-sm: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.1);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.13);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.15);
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.35);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* Extended Palette */
  --peachy-grey: #F2F3F4;
  --mint: #D5E8D3;
  --light-coral: #FBD5C5;
  --light-blue: #C3E1E6;
  --light-yellow: #FFF0D4;
  --blue-grey: #688590;
  --dark-blue: #003957;
  --dark-blue-rgb: 0, 57, 87;
}

/* --- 2. Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--bg-warm);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* --- 3. Typography --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
h2 { font-size: clamp(2.5rem, 4.5vw, 4.75rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
h4 { font-size: 1.375rem; }
p + p { margin-top: 1em; }

/* --- 4. Layout --- */
.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 36px;
}
.container--narrow {
  max-width: 960px;
}
.section {
  padding: 100px 0;
}
.section--warm {
  background: var(--bg-warm);
}
.section--white {
  background: var(--bg-white);
}
.section--primary {
  background: var(--primary);
  color: #fff;
}
.section--deep {
  background: var(--primary-dark);
  color: #fff;
}
.section--deep h2,
.section--deep h3,
.section--deep h4 {
  color: #fff;
}
.section--deep .label {
  color: var(--coral);
}
.section--deep p {
  color: rgba(255,255,255,0.8);
}
.section-header {
  max-width: 920px;
  margin-bottom: 56px;
  /* Centered by default — section titles/subtitles align centre across the site */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-header.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-header--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.section-header p {
  margin-top: 16px;
  font-size: 1.3125rem;
}

/* --- Gradient text highlight (scroll-animated, TW16-style) --- */
.text-gradient {
  background: linear-gradient(90deg, #4da8b5 0%, #4da8b5 25%, #f0845e 50%, #4da8b5 75%, #4da8b5 100%);
  background-size: 300% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient--light {
  background: linear-gradient(90deg, #7dd3df 0%, #7dd3df 25%, #f6ab93 50%, #7dd3df 75%, #7dd3df 100%);
  background-size: 300% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- 5. Label / Badge --- */
.label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 16px;
}
.label--coral {
  color: var(--coral-dark);
}
.label--light {
  color: rgba(255,255,255,0.7);
}

/* --- 6. Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1875rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 60px;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.25);
}
.btn--coral {
  background: var(--coral);
  color: var(--dark-blue);
}
.btn--coral:hover {
  background: var(--coral-dark);
  color: var(--dark-blue);
  transform: translateY(-2px);
}
.btn--outline {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
}
.btn--outline:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}
.btn--outline-light {
  border: 2px solid rgba(255,255,255,0.4);
  color: #fff;
  background: transparent;
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}
.btn--sm {
  padding: 14px 28px;
  font-size: 1.25rem;
}
.btn--lg {
  padding: 18px 36px;
  font-size: 1.125rem;
}
/* Eye ring motif */
.te-ring {
  width: 0.55em;
  height: 0.55em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.btn .te-ring {
  width: 0.6em;
  height: 0.6em;
}
.btn__arrow {
  transition: transform var(--transition);
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* --- 7. Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 1000;
  transition: all var(--transition);
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(254, 250, 248, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
  opacity: 0;
  transition: opacity var(--transition);
}
.nav--scrolled::before {
  opacity: 1;
}
.nav__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 1;
}
.nav__logo {
  width: 200px;
  flex-shrink: 0;
}
.nav__logo svg {
  width: 100%;
  height: auto;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav__link {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-heading);
  padding: 10px 22px;
  border-radius: 60px;
  transition: background var(--transition), color var(--transition);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
}
.nav__link:hover,
.nav__link--active {
  background: var(--mint);
  color: var(--primary);
}
.nav__link--active {
  font-weight: 600;
}
.nav__link svg {
  width: 10px;
  height: 10px;
  transition: transform var(--transition);
}
/* When a dropdown's parent label is non-clickable (no link target), make that
   obvious to the user — cursor is default, not pointer. */
.nav__link--no-link { cursor: default; }
.nav__dropdown {
  position: relative;
}
.nav__dropdown:hover > .nav__link svg,
.nav__dropdown:focus-within > .nav__link svg {
  transform: rotate(180deg);
}
/* Two-column dropdown menu */
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 4px;
  padding: 14px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(3, 88, 78, 0.14), 0 4px 14px rgba(3, 88, 78, 0.08);
  border: 1px solid rgba(3, 88, 78, 0.06);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 50;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__dropdown-item {
  display: block;
  padding: 10px 16px;
  border-radius: 12px;
  transition: background var(--transition), color var(--transition);
  min-width: 0;
}
.nav__dropdown-label {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-heading);
  line-height: 1.3;
  white-space: nowrap;
}
.nav__dropdown-desc {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.3;
  margin-top: 2px;
  white-space: normal;
}
.nav__dropdown-item:hover,
.nav__dropdown-item--active {
  background: var(--mint);
}
.nav__dropdown-item:hover .nav__dropdown-label,
.nav__dropdown-item--active .nav__dropdown-label {
  color: var(--primary);
}
.nav__cta {
  margin-left: 16px;
}
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 10;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav__hamburger.active span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(254, 250, 248, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 999;
  /* Horizontal 36px matches .nav__inner's `padding: 0 36px` so the menu
     links share the same left edge as the logo — they align by
     construction even if the breakpoint or container changes. */
  padding: calc(var(--nav-h) + 40px) 36px 40px;
  flex-direction: column;
  gap: 8px;
}
.nav__mobile.open {
  display: flex;
}
.nav__mobile-link {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-heading);
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
}

/* Expandable group on mobile — wraps a parent label + its sub-items.
   Border-bottom moves from the inner row to the group so the visual
   separator stays clean whether the submenu is open or closed. */
.nav__mobile-group {
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
}
.nav__mobile-group .nav__mobile-link {
  border-bottom: 0;
}

/* Parent row: label on the left (real link), expand button on the right.
   align-items: stretch so the button covers the full row height for a
   comfortable tap target. */
/* Parent that's link-less: whole row IS the toggle. Flex layout pushes
   the chevron to the right of the label. */
.nav__mobile-link--expandable {
  appearance: none;
  background: transparent;
  border: 0;
  /* font-family only (NOT the `font:` shorthand) — the shorthand sets
     font-size and font-weight back to "inherit" which flattens the
     1.5rem / 600 we get from the sibling .nav__mobile-link class.
     We just need the family so the button doesn't render with the
     browser's default system button typeface. */
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nav__mobile-link--expandable svg {
  width: 14px;
  height: 9px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.nav__mobile-link--expandable[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Submenu list — collapsed (hidden attribute) by default. When the JS
   toggles the group open it removes the hidden attribute and applies
   .nav__mobile-sub--open which animates max-height smoothly. */
.nav__mobile-sub {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 12px 16px;
  margin-top: -4px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.nav__mobile-sub--open {
  max-height: 600px;  /* generous cap — any realistic submenu fits */
}
.nav__mobile-sub[hidden] {
  display: none;
}
.nav__mobile-sub-link {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-body);
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.05);
}
.nav__mobile-sub-link:last-child {
  border-bottom: 0;
}

/* --- 8. Hero Mosaic --- */
.hero {
  padding-top: calc(var(--nav-h) + 24px);
  padding-bottom: 50px;
  background: var(--bg-warm);
}
.hero__mosaic {
  display: grid;
  grid-template-columns: 6fr 2.5fr 2.5fr;
  grid-template-rows: 4fr 4fr 2fr;
  gap: var(--gap);
  width: 100%;
  padding: 12px;
  aspect-ratio: 16 / 8;
  max-height: 700px;
  transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Initial equal-width state (before bounce) */
.mosaic--init {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  transition: none;
}
/* Bounce easing for the initial animation */
.mosaic--animate {
  transition: grid-template-columns 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
              grid-template-rows 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Hover column states */
.hero__mosaic[data-active-col="1"] { grid-template-columns: 6fr 2.5fr 2.5fr; }
.hero__mosaic[data-active-col="2"] { grid-template-columns: 4fr 5fr 1.5fr; }
.hero__mosaic[data-active-col="3"] { grid-template-columns: 4fr 1.5fr 5fr; }
/* Hover row states */
.hero__mosaic[data-active-row="1-2"] { grid-template-rows: 4fr 4fr 2fr; }
.hero__mosaic[data-active-row="1"]   { grid-template-rows: 5fr 3fr 2fr; }
.hero__mosaic[data-active-row="2"]   { grid-template-rows: 3fr 5fr 2fr; }
.hero__mosaic[data-active-row="3"]   { grid-template-rows: 7fr 7fr 6fr; }

.mosaic__block {
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s ease;
}
/* Inner clip wrapper for tiles with bleeding media (video, patterns) */
.mosaic__clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.mosaic__block:hover {
  box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
}

/* Headline block */
.mosaic__headline {
  grid-row: 1 / 3;
  grid-column: 1;
  background: var(--bg-white);
  box-shadow: var(--shadow-md);
  padding: 48px;
  justify-content: center;
}
.mosaic__headline .label {
  margin-bottom: 20px;
}
.mosaic__headline h1 {
  margin-bottom: 20px;
}
.mosaic__headline p {
  font-size: 1.1875rem;
  margin-bottom: 32px;
  max-width: 480px;
  transition: opacity 0.35s ease, max-height 0.4s ease, margin 0.4s ease;
  max-height: 10em;
  overflow: hidden;
}
.mosaic__headline > div {
  transition: opacity 0.35s ease, max-height 0.4s ease;
  max-height: 5em;
  overflow: hidden;
}
/* Fade out description & CTA when another column is active */
.hero__mosaic[data-active-col="2"] .mosaic__headline p,
.hero__mosaic[data-active-col="3"] .mosaic__headline p {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
}
.hero__mosaic[data-active-col="2"] .mosaic__headline > div,
.hero__mosaic[data-active-col="3"] .mosaic__headline > div {
  opacity: 0;
  max-height: 0;
}

/* Shared video element */
.mosaic__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* --- Stat tiles --- */
.mosaic__stat {
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(var(--primary-rgb), 0.06);
}
.mosaic__number {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.03em;
}
.mosaic__stat-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-light);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Stat colour variants by position */
.mosaic__stat:nth-child(2) { background: var(--mint); border-color: transparent; }
.mosaic__stat:nth-child(4) { background: var(--light-blue); border-color: transparent; }
.mosaic__stat:nth-child(5) { background: var(--light-yellow); border-color: transparent; }

/* Video stat tile */
.mosaic__stat.mosaic__stat--video {
  background: #005950;
  border-color: transparent;
}
.mosaic__stat--video .mosaic__number {
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 20px rgba(0,89,80,0.6), 0 1px 4px rgba(0,89,80,0.4);
}
.mosaic__stat--video .mosaic__stat-label {
  color: rgba(255,255,255,0.9);
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 12px rgba(0,89,80,0.5);
}
.mosaic__stat--video .mosaic__video {
  mix-blend-mode: screen;
  filter: grayscale(90%) contrast(100%);
}

/* --- Accent block --- */
.mosaic__accent {
  background: var(--coral);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mosaic__accent-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-dark);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.mosaic__pattern {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  opacity: 0.3;
}

/* --- Competency blocks --- */
.mosaic__comp {
  background: var(--primary);
  color: #fff;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 24px 28px 24px 48px;
  gap: 12px;
}
.mosaic__comp:nth-child(7) { background: var(--dark-blue); }
.mosaic__comp:last-child {
  grid-column: span 1;
  background: var(--mint);
}
.mosaic__comp:last-child .mosaic__comp-title { color: var(--primary); }
.mosaic__comp:last-child .mosaic__comp-subtitle { color: var(--primary); }
.mosaic__comp:last-child .mosaic__comp-icon { color: var(--primary); }
.mosaic__comp-icon {
  width: 36px;
  height: 36px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.35s ease, max-height 0.35s ease;
}
.mosaic__comp:hover .mosaic__comp-icon { opacity: 0.7; max-height: 36px; }
.mosaic__comp-title { font-size: 1.5rem; font-weight: 600; color: #fff; }
.mosaic__comp-subtitle {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.65);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.35s ease, max-height 0.35s ease;
}
.mosaic__comp:hover .mosaic__comp-subtitle { opacity: 1; max-height: 3em; }

/* --- Tile Hover CTA Button --- */
.mosaic__cta {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 28px;
  border-radius: 60px;
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
  pointer-events: none;
  background: var(--tile-btn-bg, #fff);
  color: var(--tile-btn-color, var(--primary));
  text-decoration: none;
  letter-spacing: 0.02em;
}
.mosaic__block:not(.mosaic__headline):hover .mosaic__cta {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.mosaic__cta-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile-btn-circle-bg, var(--tile-btn-color, var(--primary)));
  color: var(--tile-btn-circle-color, var(--tile-btn-bg, #fff));
  flex-shrink: 0;
}
.mosaic__cta-circle svg {
  width: 14px;
  height: 14px;
}
/* Per-tile CTA button colours */
.mosaic__stat--video { --tile-btn-bg: #fff; --tile-btn-color: #005950; }
.mosaic__comp { --tile-btn-bg: #fff; --tile-btn-color: var(--primary); }
.mosaic__comp:nth-child(7) { --tile-btn-bg: #fff; --tile-btn-color: var(--dark-blue); }
.mosaic__stat:not(.mosaic__stat--video) { --tile-btn-bg: var(--primary); --tile-btn-color: #fff; --tile-btn-circle-bg: #fff; --tile-btn-circle-color: var(--primary); }
.mosaic__accent { --tile-btn-bg: var(--primary); --tile-btn-color: #fff; --tile-btn-circle-bg: #fff; --tile-btn-circle-color: var(--primary); }
.mosaic__comp:last-child { --tile-btn-bg: var(--primary); --tile-btn-color: #fff; --tile-btn-circle-bg: #fff; --tile-btn-circle-color: var(--primary); }

/* --- Shared tile title --- */
.mosaic__tile-title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.mosaic__tile-title--tl {
  color: var(--primary-dark);
  text-shadow: none;
  align-self: flex-start;
}
.mosaic__tile-title--tc {
  color: #fff;
  text-shadow: none;
  align-self: center;
}
.mosaic__tile-title--left {
  color: #fff;
  text-shadow: none;
}

/* --- PEOPLE tile (col 2, row 1) --- */
.mosaic__people {
  grid-column: 2;
  grid-row: 1;
  background: var(--primary);
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.mosaic__people-ctas {
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 2;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s, max-height 0.35s ease, margin-top 0.35s ease;
  pointer-events: none;
  overflow: hidden;
}
.mosaic__people:hover .mosaic__people-ctas {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: 60px;
  margin-top: 12px;
}
.mosaic__pill-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: 60px;
  background: #fff;
  border: 1px solid #fff;
  color: #005950;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--transition);
  text-decoration: none;
}
.mosaic__pill-btn:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.5);
}

/* --- PARTNERS tile (col 3, row 1) --- */
.mosaic__partners {
  grid-column: 3;
  grid-row: 1;
  background: #fff;
  padding: 24px;
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.mosaic__partners .mosaic__tile-title {
  color: var(--primary-dark);
  text-shadow: none;
  width: 100%;
  text-align: center;
  transition: font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.mosaic__partners:hover .mosaic__tile-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
/* CTA button beneath title — hidden until hover */
.mosaic__partners-ctas {
  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s, max-height 0.35s ease, margin-top 0.35s ease;
  pointer-events: none;
  overflow: hidden;
}
.mosaic__partners:hover .mosaic__partners-ctas {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: 60px;
  margin-top: 12px;
}
/* Ticker at bottom — full colour, larger logos */
.mosaic__partners-ticker {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  height: 56px;
  overflow: hidden;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  transition: opacity 0.4s ease;
}
.mosaic__partners:hover .mosaic__partners-ticker {
  opacity: 0;
  pointer-events: none;
}
.mosaic__partners-track {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  width: max-content;
  animation: partnerTickerScroll 35s linear infinite;
}
.mosaic__partner-logo {
  flex-shrink: 0;
  height: 40px;
  display: flex;
  align-items: center;
}
.mosaic__partner-logo img {
  height: 34px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  filter: none;
}
.mosaic__partner-logo span {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-body);
  white-space: nowrap;
}
/* Scattered logos on hover */
.mosaic__partners-scattered {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.mosaic__partners:hover .mosaic__partners-scattered {
  opacity: 1;
}
.mosaic__scattered-logo {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(0.7);
}
.mosaic__partners:hover .mosaic__scattered-logo {
  opacity: 1;
  transform: scale(1);
}
.mosaic__scattered-logo img {
  height: 28px;
  max-width: 100px;
  width: auto;
  object-fit: contain;
  filter: none;
}
.mosaic__scattered-logo span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-body);
  opacity: 1;
}
@keyframes partnerTickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- RESULTS tile (col 2, row 2) --- */
/* Default (inactive): centred title with fading metric below */
.mosaic__results {
  grid-column: 2;
  grid-row: 2;
  background: var(--primary);
  color: #fff;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
/* Title — centred by default, slides to left on hover */
.mosaic__results .mosaic__tile-title {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.mosaic__results:hover .mosaic__tile-title {
  left: 28px;
  transform: translate(0, -50%);
}
/* Fading metric row below title — value left, label right */
.mosaic__results-fader {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  justify-content: center;
  transition: opacity 0.3s ease;
}
.mosaic__results-fader-value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.mosaic__results-fader-value.active { opacity: 1; }
.mosaic__results-fader-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  line-height: 1.3;
  text-align: left;
  max-width: 160px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.mosaic__results-fader-label.active { opacity: 1; }
/* Hide fader on hover */
.mosaic__results:hover .mosaic__results-fader {
  opacity: 0;
  pointer-events: none;
}
/* Ticker — absolute, right side, hidden by default */
.mosaic__results-ticker {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease 0.15s;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.mosaic__results:hover .mosaic__results-ticker {
  opacity: 1;
  pointer-events: auto;
}
.mosaic__results-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: resultsTickerScroll 25s linear infinite;
}
/* Larger pills, fewer visible */
.mosaic__result-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: rgba(255,255,255,0.1);
  border-radius: 60px;
  border: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
  flex-shrink: 0;
}
.mosaic__result-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}
.mosaic__result-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
}
.mosaic__result-logo {
  height: 20px;
  width: auto;
  max-width: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-width 0.3s ease, margin 0.3s ease;
  margin-left: 0;
}
.mosaic__results:hover .mosaic__result-logo {
  opacity: 0.8;
  max-width: 70px;
  margin-left: 8px;
}
@keyframes resultsTickerScroll {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* --- EXPERTISE tile (col 3, row 2) --- */
.mosaic__expertise {
  grid-column: 3;
  grid-row: 2;
  background: var(--dark-blue);
  color: #fff;
  padding: 24px;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* Navy-tinted video — grayscale + screen blend on navy bg */
.mosaic__expertise-clip {
  background: var(--dark-blue);
}
.mosaic__expertise-video {
  mix-blend-mode: screen;
  filter: grayscale(100%) contrast(200%) invert(0);
}
.mosaic__expertise .mosaic__tile-title {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 57, 87, 0.8), 0 4px 40px rgba(0, 57, 87, 0.6), 0 0 60px rgba(0, 57, 87, 0.4);
}
.mosaic__expertise-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s, max-height 0.35s ease, margin-top 0.35s ease;
  pointer-events: none;
  overflow: hidden;
}
.mosaic__expertise:hover .mosaic__expertise-ctas {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: 120px;
  margin-top: 12px;
}

/* --- TBC placeholder tiles --- */
.mosaic__tbc {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mosaic__tbc--blue {
  grid-column: 2;
  grid-row: 3;
  background: var(--mint);
}
.mosaic__tbc--coral {
  grid-column: 3;
  grid-row: 3;
  background: var(--coral);
}
.mosaic__tbc-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}
.mosaic__tbc--blue .mosaic__tbc-text {
  color: #005950;
  opacity: 0.5;
}
.mosaic__tbc--coral .mosaic__tbc-text {
  color: var(--primary);
  opacity: 0.5;
}

/* --- Tile Hover CTA Button --- */
.mosaic__cta {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 28px;
  border-radius: 60px;
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
  pointer-events: none;
  background: var(--tile-btn-bg, #fff);
  color: var(--tile-btn-color, var(--primary));
  text-decoration: none;
  letter-spacing: 0.02em;
}
.mosaic__block:not(.mosaic__headline):hover .mosaic__cta {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.mosaic__cta-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile-btn-circle-bg, var(--tile-btn-color, var(--primary)));
  color: var(--tile-btn-circle-color, var(--tile-btn-bg, #fff));
  flex-shrink: 0;
}
.mosaic__cta-circle svg {
  width: 14px;
  height: 14px;
}
/* Per-tile CTA button colours */
.mosaic__people { --tile-btn-bg: #fff; --tile-btn-color: var(--primary); }
.mosaic__results { --tile-btn-bg: #fff; --tile-btn-color: var(--primary); }
.mosaic__partners { --tile-btn-bg: var(--primary); --tile-btn-color: #fff; --tile-btn-circle-bg: #fff; --tile-btn-circle-color: var(--primary); }
.mosaic__partners .mosaic__pill-btn {
  background: #005950;
  border-color: #005950;
  color: #fff;
}
.mosaic__partners .mosaic__pill-btn:hover {
  background: #03584E;
}

/* --- 9. Partner Carousel --- */
.partner-strip {
  padding: 100px 0;
  background: var(--bg-warm);
}
/* When embedded inside the home page Industries scroll-lock pin, the
   carousel sits directly beneath the cards and wants tighter top/bottom
   padding so the strip doesn't dwarf the pinned section. */
.industry__pin > .partner-strip {
  padding: 32px 0 56px;
}
.partner-carousel {
  overflow: hidden;
  position: relative;
  padding: 1rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.partner-carousel__track {
  display: flex;
  gap: 3.5rem;
  align-items: center;
  width: max-content;
  animation: partnerScroll 40s linear infinite;
}
.partner-carousel:hover .partner-carousel__track {
  animation-play-state: paused;
}
.partner-carousel__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Container sized to fit the full 84px max-display height with a touch
     of vertical breathing so scaled-down logos still feel centred in the
     row, not floating at the top. */
  height: 90px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}
.partner-carousel__item:hover {
  transform: scale(1.18);
}
/* Universal logo sizing — every logo renders at 84px height by default.
   Editors bake-in any extra vertical padding the logo needs in their PNG
   source (or use SVG for crisp scaling). Per-item downscale handled by
   the --logo-scale custom property the partial emits inline when the
   editor's `sizePercent` is set to anything below 100 (clamped 30-100).
   We previously had ~7 per-alt-text height overrides for specific brands
   — all removed in favour of this single universal rule. */
.partner-carousel__item img {
  height: calc(84px * var(--logo-scale, 1));
  max-width: 240px;
  width: auto;
  object-fit: contain;
  transition: filter 0.35s ease, height 0.2s ease;
}
.partner-carousel__item:hover img {
  filter: drop-shadow(0 6px 16px rgba(3, 88, 78, 0.18));
}
.partner-carousel__item span {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-light);
  white-space: nowrap;
}
@keyframes partnerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- 10. Industries --- */
.industries {
  position: relative;
  /* IMPORTANT: must stay `overflow: clip` (or `visible`). Anything
     `hidden`/`scroll`/`auto` on this ancestor breaks position:sticky on
     the .industry__pin descendant (browsers disable sticky if an
     ancestor establishes a scroll container on the same axis). The
     `clip` value is the only overflow that clips children without
     creating a scroll container, so sticky still works. The original
     "section wider than viewport on mobile" centring bug is now fixed
     structurally by moving the heading OUT of .industry__sticky into a
     normal block sibling — see _HorizontalScrollLockSection.cshtml. */
  overflow: clip;
}
/* The inner `.industry__sticky` already pads itself by `nav-h + 8` so its
   content clears the fixed nav when the pin sticks at the viewport top.
   That doubles as the "top spacing" of the section, so we drop the .section
   default padding-top here to avoid stacking ~100px on top of it. Applies
   wherever a horizontal scroll-lock section is used.

   padding-bottom: 0 too — when a trailing section (vertical scroll-lock,
   logo carousel, etc.) is embedded inside the pin, .section's default 100px
   below would leave a strip of the .industries section's own bg colour
   (warm cream by default) between the embedded section and whatever follows
   — breaking the visual flow if the next section is dark green. Without
   trailing content, the next section's own padding-top supplies the gap. */
.section.industries {
  /* 80px top padding gives the heading breathing room above it in
     natural flow (before the user has scrolled it into the sticky
     state). When the pin sticks at `top: nav-h + 8`, the sticky
     positioning takes over and the section's padding becomes
     irrelevant for visual placement — so this only affects the
     in-flow appearance. */
  padding-top: 80px;
  padding-bottom: 0;
}

/* Breathing room between the horizontal cards (sticky pin's top content)
   and any embedded trailing section sat inside the pin. The visual gap
   is painted by .industry__pin's own background (set earlier in this
   file: `background: var(--bg-warm)`), so it inherits the horizontal
   scroll lock section's colour even if the embedded section's bg is
   different (e.g., a white timed-content section). margin-top here on
   the embedded section is cleaner than padding-bottom on .industry__sticky
   because adding to .industry__sticky would grow the sticky height the
   JS uses for scroll-area sizing — margin-top doesn't affect that. */
.industry__pin > .section,
.industry__pin > .section-anchor + .section {
    margin-top: 40px;
}
.industry__scroll-area {
  position: relative;
  /* height set by JS: stickyContentHeight + maxTranslate */
}
/* The pin wrapper holds sticky cards + partner-strip together (home industries),
   so both pin and release as one unit when cards finish animating. */
.industry__pin {
  position: sticky;
  /* Sticks BELOW the nav, not at top:0. This is so the heading + cards
     (which are stacked inside the pin) clear the fixed nav while
     pinned. Was top:0 previously; required the inner .industry__sticky
     to add a nav-h + 8 padding-top — that padding now moves up here
     because the heading inside the pin (above the sticky cards) also
     needs the clearance and we want both to share the same offset. */
  top: calc(var(--nav-h) + 8px);
  z-index: 2;
  /* Default background = warm cream, the most common backdrop for
     industry/scroll-lock sections. Other section backgrounds get
     scoped overrides below so the pin matches its section (otherwise
     the pin's solid colour shows ABOVE the section's colour while
     pinned and the visual diverges from the rest of the page). */
  background: var(--bg-warm);
}
.section--white .industry__pin { background: var(--bg-white, #ffffff); }
/* --primary-dark, not --primary — the .section--deep rule above uses
   var(--primary-dark) for its surface, so the pin must match that
   exact shade to blend with adjacent dark-green sections. */
.section--deep .industry__pin { background: var(--primary-dark); }
/* When no pin wrapper is present (e.g. about timeline), .industry__sticky itself
   is the pinned element. */
.industry__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Nav-clearance padding moved up to .industry__pin's `top` offset
     (sticks below the nav), so cards sit cleanly under the heading
     when the whole pin is locked at the top of the viewport. */
  padding: 0 0 16px;
}
/* When nested inside a pin wrapper, the sticky is just a layout container —
   the wrapper handles pinning. */
.industry__pin .industry__sticky {
  position: relative;
  top: auto;
}
.industry__sticky .container,
.industry__sticky .industry__cards-mask {
  position: relative;
  z-index: 2;
}
/* Heading sits INSIDE the pin (sibling of .industry__sticky), so the
   whole pin (heading + cards) sticks together — heading stays visible
   while the cards animate horizontally.
   Just a touch of bottom padding to tighten the gap to the cards below;
   nav-clearance is handled by the pin's `top: nav-h + 8` rule. */
.industry__heading {
  /* Top padding gives breathing room between the nav bottom and the
     heading content while the pin is locked. The pin sticks at
     calc(var(--nav-h) + 8px) — that 8px is just a hairline; the heading
     itself needs more space to feel comfortable below the nav. */
  padding: 32px 0 16px;
}
.industry__heading .section-header {
  margin-bottom: 0;
}

/* Background image layers */
.industry__bg-images {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
.industry__bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: sepia(1) saturate(0.3);
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: opacity;
}

.industry__cards-mask {
  overflow: hidden;
  padding: 48px 0 56px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  /* Lock mask width to the visible viewport area minus container padding.
     Without this, on some mobile layouts the inner flex column lets the
     mask's offsetWidth read wider than the viewport — and the JS uses
     that wider value to compute centerPad and maxTranslate, so the last
     card centres relative to the wider phantom mask (off-screen to the
     right of the actual visible viewport). The 100% upper bound keeps
     it natural on desktop where the container is already the constraint. */
  width: 100%;
  max-width: calc(100vw - 72px);
  box-sizing: border-box;
}
.industry-grid {
  display: flex;
  gap: 24px;
  padding: 8px 0;
  will-change: transform;
}
.industry-card {
  flex: 0 0 408px;
  /* No min-height — let cards size to their content. The grid's
     `display: flex` + default `align-items: stretch` keeps every card in
     the same section equal-height (matching the tallest sibling), so an
     icon-less section shrinks naturally instead of leaving dead space
     below the text. */
  background: var(--bg-white);
  border-radius: var(--radius);
  padding: 36px 28px 56px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(var(--primary-rgb), 0.05);
  transition: box-shadow 0.4s ease, transform 0.4s ease, opacity 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
/* Locked state: dim non-active cards */
.industries--locked .industry-card {
  opacity: 0.8;
  transform: scale(0.95);
}
.industries--locked .industry-card.industry-card--active {
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--primary-rgb), 0.15);
}
.industries--locked .industry-card.industry-card--active:hover {
  transform: scale(1.02);
}

/* Project counter — overlapping pill on bottom-left edge */
.industry__counter {
  position: absolute;
  bottom: -24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease, background-color 0.6s ease;
  background-color: var(--primary);
  border-radius: 60px;
  padding: 16px 32px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 5;
  /* Uniform pill size so fact-only and count-up pills match visually */
  min-width: 290px;
  min-height: 59px;
  box-sizing: border-box;
}
/* Active card pill fades from green to coral, with dark blue text. */
.industries--locked .industry-card--active .industry__counter {
  background-color: var(--coral);
}
.industries--locked .industry-card--active .industry__counter-number,
.industries--locked .industry-card--active .industry__counter-label,
.industries--locked .industry-card--active .industry__counter-fact {
  color: var(--dark-blue);
}
.industry__counter.industry__counter--visible {
  opacity: 1;
  transform: translateY(0);
}
.industry__counter-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.6s ease;
}
.industry__counter-label {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.6s ease;
}
.industry-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background-color: rgba(var(--primary-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background-color 0.6s ease;
}
.industry-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}
/* Active card icon tile fades from green to coral. */
.industries--locked .industry-card--active .industry-card__icon {
  background-color: var(--coral);
}
.industry-card h3 {
  margin-bottom: 12px;
  font-weight: 600;
}
.industry-card p {
  font-size: 1.3125rem;
  color: var(--text-light);
}

/* Centre the icon, title and body text inside horizontal-scroll-lock
   tiles. .industry-card is `display: flex; flex-direction: column;`
   so `align-items: center` centres each flex child horizontally; the
   `text-align: center` handles h3 + p text within their own boxes.
   Scoped with :not(.timeline-card) — timeline cards inherit
   .industry-card but lay out as title-beside-year-pill on a row
   axis, and centering would break that arrangement.
   The .industry__counter pill at the bottom of these cards is
   position:absolute (bottom-left), so it's unaffected by these
   flex-axis changes — stays anchored to the bottom-left corner. */
.industry-card:not(.timeline-card) {
  align-items: center;
  text-align: center;
}

/* --- 11. Approach (Scroll-Lock Tiles) --- */
.approach {
  background: var(--primary-dark);
  position: relative;
  overflow: clip;
}
.approach__scroll-area {
  position: relative;
  height: 600vh;
  z-index: 1;
}
.approach__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--nav-h) + 56px) 40px 40px;
  gap: 24px;
  overflow: hidden;
}
.approach__header {
  text-align: center;
  padding: 80px 0 0;
}
.approach__header .label {
  color: var(--coral);
}
.approach__header h2 {
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  max-width: 920px;
  margin: 12px auto 0;
}
.approach__viewport {
  position: relative;
  width: 100%;
  max-width: var(--container);
  flex: 1;
  min-height: 0;
  max-height: 650px;
  border-radius: var(--radius);
}
.approach__tile {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--bg-white);
  box-shadow: var(--shadow-xl);
  display: grid;
  grid-template-columns: 5fr 4fr;
  transform: translateY(100%);
  will-change: transform;
}
.approach__tile:first-child {
  transform: translateY(0);
}
.approach__tile:nth-child(1) { z-index: 1; }
.approach__tile:nth-child(2) { z-index: 2; }
.approach__tile:nth-child(3) { z-index: 3; }
.approach__tile:nth-child(4) { z-index: 4; }
.approach__tile:nth-child(5) { z-index: 5; }
.approach__tile:nth-child(6) { z-index: 6; }
.approach__tile-text {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.approach__tile-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -30px;
  left: 32px;
  min-width: 360px;
  padding: 18px 36px;
  border-radius: 60px;
  background: var(--coral);
  color: var(--dark-blue);
  font-size: 1.5rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 6;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
/* Linked variant — added by the partial when the tile's CMS `link`
   property is set. Cursor + hover lift signal that the pill is
   interactive (otherwise it visually reads as static decoration).
   transition is on `all` because we change background, transform AND
   shadow on hover. */
.approach__tile-badge--linked {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.approach__tile-badge--linked:hover {
  background: var(--coral-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.approach__tile-desc {
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 400;
  color: var(--text-heading);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
/* Optional further text below the main description — body-text size and
   colour so it reads as supporting detail, not a second headline.
   Selector scopes to the tile wrapper so we beat `.section--deep p` (which
   would otherwise paint this white-on-white inside the white tile). */
.approach__tile-text .approach__tile-further {
  margin-top: 16px;
  font-size: 1.3125rem;
  line-height: 1.55;
  color: var(--text-body);
}
.approach__tile-desc .accent {
  background: linear-gradient(135deg, #4da8b5 35%, #f0845e 65%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.approach__tile-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
}
.approach__tile-img {
  width: 88%;
  height: 82%;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.approach__tile-accent {
  position: absolute;
  right: 16px;
  top: 18%;
  bottom: 18%;
  width: 20px;
  border-radius: 10px;
  background: var(--coral);
  opacity: 0.5;
}
.approach__progress {
  display: flex;
  gap: 10px;
  margin-top: 32px;
}
.approach__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: all var(--transition);
}
.approach__dot.active {
  background: var(--coral);
  transform: scale(1.3);
}

/* --- 12. Featured Case Study --- */
.featured-case__tile {
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: visible;
  position: relative;
  padding: 32px;
  margin-bottom: 32px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.featured-case__tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.featured-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.featured-case__visual {
  border-radius: calc(var(--radius) - 8px);
  overflow: hidden;
  position: relative;
}
.featured-case__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}
.featured-case__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(2,61,54,0.75) 0%, rgba(3,88,78,0.6) 50%, rgba(246,171,147,0.5) 100%);
  z-index: 1;
  pointer-events: none;
}
.featured-case__metric {
  position: absolute;
  left: 36px;
  bottom: 32px;
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 80%;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.featured-case__metric-value {
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.featured-case__metric-label {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
}
.featured-case__content .label {
  margin-bottom: 12px;
}
.featured-case__content h3 {
  font-size: 2.25rem;
  /* Default heading weight (set on the global h1-h6 rule near the top
     of this file) is 400 — too thin for a 2.25rem featured headline.
     600 / semibold reads as a confident card title without competing
     with the section h2 above it (which is at 700). */
  font-weight: 600;
  margin-bottom: 16px;
}
.featured-case__content p {
  margin-bottom: 24px;
  font-size: 1.3125rem;
}
.featured-case__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.featured-case__stat {
  padding: 20px;
  border-radius: var(--radius-sm);
}
.featured-case__stat:nth-child(1) { background: rgba(213, 232, 211, 0.4); }
.featured-case__stat:nth-child(2) { background: rgba(195, 225, 230, 0.4); }
.featured-case__stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.featured-case__stat-label {
  font-size: 1.0625rem;
  color: var(--text-light);
  margin-top: 4px;
}
/* Featured case — overlapping CTA pill on bottom-right */
.featured-case__btn {
  position: absolute;
  bottom: -24px;
  right: 32px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 5;
}
.featured-case__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.25);
}

/* --- 13. Insights Teaser --- */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.insight-card {
  background: var(--bg-white);
  border-radius: var(--radius);
  overflow: visible;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(var(--primary-rgb), 0.05);
  transition: all var(--transition);
  position: relative;
}
.insight-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.insight-card__image {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.insight-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}
.insight-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.insight-card__overlay--green {
  background: linear-gradient(135deg, rgba(3,88,78,0.75) 0%, rgba(4,121,107,0.65) 100%);
}
.insight-card__overlay--blend {
  background: linear-gradient(135deg, rgba(2,61,54,0.75) 0%, rgba(3,88,78,0.6) 50%, rgba(246,171,147,0.5) 100%);
}
.insight-card__body {
  padding: 28px 28px 48px;
}
.insight-card__body .label--pill {
  margin-bottom: 14px;
}
.insight-card__title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}
.insight-card__excerpt {
  font-size: 1.1875rem;
  color: var(--text-light);
}
/* Pill button overlaps the bottom of the card, matching Talk to Us size */
.insight-card__btn {
  position: absolute;
  bottom: -24px;
  right: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 5;
}
.insight-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.25);
}

/* --- 14. CTA Section --- */
.cta-section {
  padding: 100px 0;
  background: var(--primary);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(246, 171, 147, 0.08);
}
.cta-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
}
.cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cta__content h2 {
  color: #fff;
  margin-bottom: 16px;
}
.cta__content p {
  color: rgba(255,255,255,0.75);
  font-size: 1.3125rem;
  margin-bottom: 24px;
}
.cta__content .label {
  color: var(--coral);
}
.contact-form {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 40px;
  position: relative;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-xs);
  color: #fff;
  font-size: 1.1875rem;
  transition: all var(--transition);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255,255,255,0.45);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--coral);
  background: rgba(255,255,255,0.12);
}
.form-group textarea {
  resize: vertical;
  min-height: 100px;
}
.contact-form {
  padding-bottom: 56px;
}
.contact-form .btn {
  position: absolute;
  bottom: -22px;
  left: 24px;
  justify-content: center;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(246, 171, 147, 0.35);
  z-index: 5;
}
.contact-form .btn:hover {
  transform: translateY(-2px);
}

/* --- 15. Footer --- */
.footer {
  background: #1a1a1a;
  color: rgba(255,255,255,0.7);
  padding: 80px 0 40px;
}
.footer__legal {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.95rem;
}
.footer__legal a {
  color: rgba(255,255,255,0.5);
  transition: color var(--transition);
}
.footer__legal a:hover {
  color: #fff;
}
.footer__legal-sep {
  opacity: 0.3;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
.footer__brand {
  max-width: 280px;
}
.footer__logo {
  width: 140px;
  margin-bottom: 20px;
}
.footer__logo svg path {
  fill: #fff;
}
.footer__brand p {
  font-size: 1.1875rem;
  line-height: 1.6;
}
.footer__col h4 {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 20px;
}
/* Toggle wrapper around each h4. On desktop it's a no-op visual
   container — looks just like a plain heading (no button affordance,
   chevron hidden). On mobile (below) it becomes the clickable row
   with a chevron that collapses its links. */
.footer__col-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: inherit;
  cursor: default;
  text-align: left;
  font: inherit;
}
.footer__col-chevron {
  display: none;          /* desktop: chevron hidden — toggle isn't interactive */
}
.footer__col-links {
  display: flex;
  flex-direction: column;
}
.footer__col a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1875rem;
  padding: 4px 0;
  transition: color var(--transition);
}
.footer__col a::before {
  display: none;
}
.footer__col a:hover::before {
  display: none;
}
.footer__col a:hover {
  color: var(--coral);
}
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.0625rem;
}
.footer__socials {
  display: flex;
  gap: 16px;
}
.footer__socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.footer__socials a:hover {
  background: var(--coral);
  color: var(--primary-dark);
}

/* --- 16. About Page (Redesign) --- */

/* Conversational Hero */
.about-hero-new {
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: 80px;
  background: var(--bg-warm);
}
.about-hero-new__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
}
.about-hero-new__left h1 {
  font-size: clamp(2.5rem, 4.5vw, 4.75rem);
  line-height: 1.1;
  margin-bottom: 0;
}
.about-hero-new__left .label {
  margin-bottom: 16px;
}

/* Jump-to-section pills below the about hero title.
   Size/shape match the home hero carousel pills (and Talk to Us). */
.about-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 56px;
}
.about-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 32px;
  border-radius: 60px;
  color: #fff;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.about-jump:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* Opt-out modifier — keeps the hover shadow but drops the lift. */
.about-jump--static:hover {
  transform: none;
}
.about-jump--1 { background: rgba(3, 88, 78, 0.85); }
.about-jump--2 { background: rgba(52, 93, 83, 0.85); }
.about-jump--3 { background: rgba(150, 120, 105, 0.85); }
.about-jump--4 { background: rgba(246, 171, 147, 0.95); color: var(--dark-blue); }

/* Vision / Mission / Values 3-tile grid */
.vmv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 32px;
}
.vmv-card {
  background: var(--bg-warm);
  border-radius: var(--radius);
  padding: 40px 32px;
  border: 1px solid rgba(var(--primary-rgb), 0.06);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.vmv-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.vmv-card__title,
.section--deep .vmv-card__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
}
.vmv-card__text,
.section--deep .vmv-card__text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-body);
}
.section--deep .vmv-card__list li {
  color: var(--text-body);
}
.vmv-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vmv-card__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text-body);
}
.vmv-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}
.vmv-card__list li:last-child {
  margin-bottom: 0;
}

/* Timeline cards — reuse the industry horizontal scroll-lock plumbing.
   The year sits centred ON the rail; content alternates above (odd) and
   below (even) for a staggered reading rhythm. */
.timeline .industry-card.timeline-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  flex: 0 0 360px;
  min-height: 480px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  text-align: center;
  overflow: visible;
}
.timeline-card__content {
  padding: 0 16px;
}
.timeline-card__year {
  position: relative;
  grid-row: 2;
  justify-self: center;
  background: var(--coral);
  color: var(--primary);
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  z-index: 3;
}
.timeline-card h3 {
  font-size: 1.875rem;
  margin-bottom: 14px;
  font-weight: 700;
  color: var(--coral);
}
.timeline-card p {
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.55;
}
.timeline .industry-card:nth-child(odd) .timeline-card__content {
  grid-row: 1;
  align-self: end;
  padding-bottom: 28px;
}
.timeline .industry-card:nth-child(even) .timeline-card__content {
  grid-row: 3;
  align-self: start;
  padding-top: 28px;
}

/* Timeline-specific layout — rail behind cards, wider gap, shorter tiles.
   Scoped with `.timeline` so the home industries section is untouched. */
.timeline .industry-grid {
  gap: 72px;
  position: relative;
  z-index: 1;
}
.timeline .industry__cards-mask {
  position: relative;
}
.timeline .industry__cards-mask::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: var(--coral);
  z-index: 0;
  pointer-events: none;
}
.timeline .industry-card {
  min-height: 0;
  transition: background-color 0.45s ease, box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}
/* Timeline: cards stay transparent so the rail remains visible; non-active
   cards dim via opacity for the scroll-lock emphasis. */
.timeline.industries--locked .industry-card {
  opacity: 1;
  background-color: transparent;
  box-shadow: none;
  border-color: transparent;
}
.timeline.industries--locked .industry-card .timeline-card__content {
  opacity: 0.65;
  transition: opacity 0.4s ease;
}
.timeline.industries--locked .industry-card.industry-card--active .timeline-card__content {
  opacity: 1;
}
.timeline.industries--locked .industry-card.industry-card--active {
  opacity: 1;
  background-color: transparent;
  box-shadow: none;
  border-color: transparent;
}

/* --- Face Mosaic: 75 greyscale portraits drop in on scroll --- */
.section--faces {
  padding: 24px 0 80px;
  background: var(--bg-warm);
  overflow: hidden;
}
.section--faces .section-header {
  margin-bottom: 40px;
}
.face-mosaic {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  height: clamp(720px, 90vh, 1000px);
  background: transparent;
  overflow: visible;
}
.face-tile {
  position: absolute;
  width: var(--tile-size, 160px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: calc(var(--tile-size, 160px) * 0.09);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: left, top, width, z-index;
  /* Photo accepts pointer events; the white name/role panel passes them through
     so a bigger tile's panel never blocks hovers on smaller tiles beneath. */
  pointer-events: none;
}
.face-tile.is-revealed .face-tile__photo { pointer-events: auto; }
.face-tile.is-revealed { opacity: 1; }
.face-tile__photo {
  width: var(--tile-size, 160px);
  height: var(--tile-size, 160px);
  overflow: hidden;
  filter: grayscale(100%);
  background: rgba(0, 0, 0, 0.04);
  transition: filter 0.6s ease;
}
.face-tile.is-hovered .face-tile__photo {
  filter: grayscale(0%);
}
.face-tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.face-tile__name {
  margin-top: calc(var(--tile-size, 160px) * 0.05);
  font-size: calc(var(--tile-size, 160px) * 0.1);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-heading);
  opacity: 0.55;
  transition: opacity 0.5s ease;
}
.face-tile__role {
  margin-top: 2px;
  font-size: calc(var(--tile-size, 160px) * 0.075);
  line-height: 1.2;
  color: var(--text-light);
  opacity: 0.45;
  transition: opacity 0.5s ease;
}
.face-tile.is-hovered .face-tile__name,
.face-tile.is-hovered .face-tile__role {
  opacity: 1;
}
.about-hero-new__right {
  padding-bottom: 0;
}
.about-hero-new__right p {
  font-size: 1.3125rem;
  color: var(--text-body);
  line-height: 1.7;
}

/* Full-Bleed Video Banner */
.about-video-banner {
  position: relative;
  overflow: hidden;
  height: 70vh;
  min-height: 500px;
  max-height: 800px;
}
.about-video-banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-video-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.about-video-banner__text {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.about-video-banner__text h2 {
  color: #fff;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Zigzag Editorial Story */
.zigzag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}
.zigzag:last-of-type { margin-bottom: 0; }
.zigzag--reverse .zigzag__images { order: -1; }
.zigzag__text h3 {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  margin-bottom: 16px;
  font-weight: 600;
}
.zigzag__text p {
  font-size: 1.1875rem;
  color: var(--text-body);
  line-height: 1.7;
}
.zigzag__text p + p { margin-top: 1em; }
.zigzag__images {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  min-height: 380px;
}
.zigzag__img {
  border-radius: var(--radius);
  object-fit: cover;
  width: 100%;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  display: block;
}
.zigzag__img:hover {
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}
.zigzag__img--tall {
  grid-row: 1 / 3;
  grid-column: 1;
}
.zigzag__img--short {
  grid-column: 2;
}
.zigzag__images--single {
  display: block;
}
.zigzag__img--solo {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border-radius: var(--radius);
  object-fit: cover;
}

/* Third Eye by Numbers */
.about-numbers {
  padding: 80px 0;
  background: var(--bg-warm);
  position: relative;
  overflow: hidden;
}

/* Differentiators */
.differentiators {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-bottom: 60px;
}
.differentiator {
  text-align: center;
  padding: 32px 24px;
}
.differentiator__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.differentiator__title {
  font-size: 1.5rem;
  margin-bottom: 12px;
}
.differentiator__text {
  color: var(--text-body);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.about-numbers__tile {
  background: linear-gradient(135deg, #88C5CE 35%, #F39879 65%);
  border-radius: var(--radius);
  padding: 58px 60px 48px;
  position: relative;
  overflow: hidden;
}
.about-numbers__header {
  text-align: center;
  margin-bottom: 32px;
}
.about-numbers__header h2 {
  color: #fff;
}
.about-numbers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.about-numbers__stat {
  text-align: center;
  padding: 16px;
}
.about-numbers__value {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  font-variant-numeric: tabular-nums;
}
.about-numbers__label {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-body);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
}

/* Team Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  max-width: 1260px;
  margin: 0 auto;
}
.team-card {
  background: var(--bg-white);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.team-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__overlay {
  position: absolute; inset: 0;
  background: rgba(0, 89, 80, 0.75);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.team-card:nth-child(3n+2) .team-card__overlay { background: rgba(0, 89, 80, 0.75); }
.team-card:nth-child(3n+3) .team-card__overlay { background: rgba(0, 89, 80, 0.75); }
.team-card:hover .team-card__overlay { opacity: 1; }
.team-card__overlay span {
  color: #fff; font-size: 1.1rem; font-weight: 600;
  padding: 0.6rem 1.5rem; border: 2px solid #fff; border-radius: 2rem;
}
.team-card__info { padding: 20px 24px 24px; }
.team-card__name { font-size: 1.375rem; font-weight: 700; margin-bottom: 4px; }
.team-card__role { font-size: 1.125rem; color: var(--text-light); }
.team-card__social { display: flex; gap: 0.5rem; margin-top: 12px; }
.team-card__social a {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-warm); color: var(--text-light); transition: all var(--transition);
}
.team-card__social a:hover { background: var(--primary); color: #fff; }

/* Bio Modal */
.bio-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.bio-modal.is-active { opacity: 1; visibility: visible; }
.bio-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0, 20, 18, 0.6); backdrop-filter: blur(4px);
}
.bio-modal__content {
  position: relative; background: #fff; border-radius: var(--radius);
  max-width: 720px; width: 90%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  transform: translateY(20px); transition: transform 0.3s ease;
}
.bio-modal.is-active .bio-modal__content { transform: translateY(0); }
.bio-modal__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none;
  background: var(--bg-warm); cursor: pointer; font-size: 1.5rem; line-height: 1; color: #333;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.bio-modal__close:hover { background: #ddd; }
.bio-modal__inner { display: flex; gap: 2rem; padding: 2.5rem; }
.bio-modal__photo { flex-shrink: 0; width: 200px; height: 200px; border-radius: var(--radius-sm); overflow: hidden; }
.bio-modal__photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-modal__body { flex: 1; min-width: 0; }
.bio-modal__name { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem; color: var(--primary); }
.bio-modal__role { font-size: 1.1875rem; color: var(--text-light); margin-bottom: 1.25rem; }
.bio-modal__text { font-size: 1.1875rem; line-height: 1.7; color: var(--text-body); }
.bio-modal__text p { margin-bottom: 1rem; }
.bio-modal__text p:last-child { margin-bottom: 0; }

/* Partner Modal — same shell as bio-modal, logo-fit image */
.partner-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.partner-modal.is-active { opacity: 1; visibility: visible; }
.partner-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0, 20, 18, 0.6); backdrop-filter: blur(4px);
}
.partner-modal__content {
  position: relative; background: #fff; border-radius: var(--radius);
  max-width: 720px; width: 90%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  transform: translateY(20px); transition: transform 0.3s ease;
}
.partner-modal.is-active .partner-modal__content { transform: translateY(0); }
.partner-modal__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none;
  background: var(--bg-warm); cursor: pointer; font-size: 1.5rem; line-height: 1; color: #333;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.partner-modal__close:hover { background: #ddd; }
.partner-modal__inner { display: flex; gap: 2rem; padding: 2.5rem; align-items: center; }
.partner-modal__logo {
  flex-shrink: 0; width: 200px; height: 200px;
  border-radius: var(--radius-sm); background: var(--bg-warm);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.partner-modal__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.partner-modal__body { flex: 1; min-width: 0; }
.partner-modal__name { font-size: 1.75rem; font-weight: 800; margin-bottom: 0.25rem; color: var(--primary); }
.partner-modal__type {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral-dark);
  margin-bottom: 1rem;
}
.partner-modal__text { font-size: 1.1875rem; line-height: 1.7; color: var(--text-body); }
.partner-modal__text p { margin-bottom: 1rem; }
.partner-modal__text p:last-child { margin-bottom: 0; }

/* Partners */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  height: 90px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-light);
}
.partner-item img {
  max-width: 180px;
  height: 40px;
  object-fit: contain;
  opacity: 0.7;
}
/* vectorlogo.zone SVGs have built-in padding — give them more room */
.partner-item img[src*="vectorlogo"] {
  height: 68px;
  max-width: 210px;
}
/* Tame the visually heavy logos */
.partner-item img[src*="certinia"]  { height: 27px; }
.partner-item img[src*="GoMeddo"]   { height: 27px; }
.partner-item img[src*="slack-edge"] { height: 34px; }
.partner-item img[src*="vonage"]     { height: 28px; }
.partner-item img[src*="abta"]       { height: 50px; }
/* Boost the visually small logos */
.partner-item img[src*="conga"]      { height: 50px; max-width: 140px; }
.partner-item img[src*="dyedurham"]  { height: 50px; }
.partner-item img[src*="Legl"]       { height: 31px; }
.partner-item img[src*="natterbox"]  { height: 34px; }

/* --- 17. Case Studies Page --- */

/* Page Hero */
.page-hero {
  padding: 160px 0 60px;
  text-align: center;
  background: var(--bg-warm);
}
.page-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}
.page-hero__inner h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--text-heading);
}
.page-hero__inner p {
  font-size: 1.1875rem;
  color: var(--text-body);
  line-height: 1.6;
}
/* Split hero (about-style: title left, text right) */
.page-hero--split {
  text-align: left;
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: 80px;
}
.page-hero__split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
}
.page-hero__left h1 {
  font-size: clamp(2.5rem, 4.5vw, 4.75rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0;
  color: var(--text-heading);
  letter-spacing: -0.02em;
}
.page-hero__right {
  padding-bottom: 8px;
}
.page-hero__right p {
  font-size: 1.3125rem;
  color: var(--text-body);
  line-height: 1.7;
}

/* Scrolling Highlights Ticker */
.highlights-ticker {
  overflow: hidden;
  background: var(--primary);
  padding: 24px 0;
  position: relative;
}
.highlights-ticker__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: ticker-scroll 30s linear infinite;
}
.highlights-ticker__link {
  text-decoration: none;
  padding: 0 10px;
  flex-shrink: 0;
  pointer-events: none;
}
.highlights-ticker__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 22px;
  white-space: nowrap;
  background: none;
  border-radius: 0;
  border: none;
  transition: none;
  cursor: default;
}
.highlights-ticker__link:hover .highlights-ticker__item,
.highlights-ticker__item:hover {
  background: none;
  border-color: transparent;
  transform: none;
}
.highlights-ticker__value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
}
.highlights-ticker__label {
  font-size: 1.0625rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Filter Bar */
.filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 48px;
}
.filter-btn {
  padding: 13px 32px;
  font-size: 1.25rem;
  font-weight: 600;
  border-radius: 60px;
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Case Grid */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
  row-gap: 72px;
}

/* Case Card — Outline Style (monday.com-inspired) */
.case-card {
  background: var(--bg-white);
  border-radius: var(--radius);
  overflow: visible;
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--primary-rgb), 0.25);
}
.case-card.hidden {
  display: none;
}

/* Card Logo — centered over the tinted image, white for contrast */
.case-card__logo {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.case-card__logo img {
  max-height: 44px;
  max-width: 200px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
/* vectorlogo.zone SVGs have built-in padding — scale up visually */
.case-card__logo img[src*="vectorlogo"] {
  max-height: 60px;
  max-width: 220px;
  transform: scale(1.5);
  transform-origin: center;
}
/* Boost small logos */
.case-card__logo img[src*="imanage"] {
  transform: scale(1.9);
  transform-origin: center;
}
.case-card__logo img[src*="GoMeddo"] {
  max-height: 32px;
  max-width: 240px;
}
.case-card__logo-fallback {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Card Image */
.case-card__image {
  height: 200px;
  position: relative;
  overflow: hidden;
  margin: 16px 16px 0;
  border-radius: var(--radius-sm);
}
.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  position: relative;
  z-index: 0;
}
.case-card:hover .case-card__image img {
  transform: scale(1.04);
}
.case-card__image--fallback {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.case-card__overlay--green {
  background: linear-gradient(135deg, rgba(3,88,78,0.75) 0%, rgba(4,121,107,0.65) 100%);
}
.case-card__overlay--blend {
  background: linear-gradient(135deg, rgba(2,61,54,0.75) 0%, rgba(3,88,78,0.6) 50%, rgba(246,171,147,0.5) 100%);
}

/* Card Body */
.case-card__body {
  padding: 20px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Tags — inside body now */
.case-card__tags {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.case-card__tag {
  /* Asymmetric padding (5 top, 3 bottom) + line-height:1 — same
     optical-centring trick as .label--pill. Uppercase glyphs sit
     toward the top of their line-box; without compensation the
     text reads as slightly high in the pill. The bias is smaller
     here because the chip is smaller (0.8125rem vs the pill's
     1rem) — even a 1-2px nudge is noticeable at this size. */
  padding: 9px 10px 7px;
  line-height: 1;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-warm);
  color: var(--text-body);
}

/* Card Title, Excerpt, Metric */
.case-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
  color: var(--text-heading);
}
.case-card__excerpt {
  font-size: 1.0625rem;
  color: var(--text-light);
  margin-bottom: 20px;
  line-height: 1.55;
  flex: 1;
}
.case-card__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--primary-rgb), 0.08);
  margin-top: auto;
}
.case-card__metric-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}
.case-card__metric-label {
  font-size: 0.9375rem;
  color: var(--text-light);
}
/* Pill button overlaps the bottom of the card, matching Talk to Us size */
.case-card__btn {
  position: absolute;
  bottom: -24px;
  right: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 5;
}
.case-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.25);
}
/* Whole card is the link — outer .case-card is now an <a> on both the
   case-study and insight listings. Reset anchor defaults so the markup
   still reads like the previous div: no underline, inherits text colour
   from children's own colour rules. */
.case-card {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* --- 18. Glass Card --- */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 32px;
}

/* --- 19. Testimonial --- */
.testimonial {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
svg.testimonial__mark {
  width: 144px;
  height: 144px;
  display: block;
  margin: 0 auto 16px;
}
.testimonial__quote {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 28px;
  font-style: italic;
}
.testimonial__author {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--coral);
}
.testimonial__role {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
}

/* --- 20. Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }
.stagger-7 { transition-delay: 0.35s; }
.stagger-8 { transition-delay: 0.4s; }

/* --- 21. Responsive --- */
@media (max-width: 1024px) {
  .hero__mosaic {
    grid-template-columns: 3fr 2fr !important;
    grid-template-rows: auto auto auto auto !important;
    aspect-ratio: unset;
    transition: none;
  }
  .mosaic--init,
  .mosaic--animate {
    grid-template-columns: 3fr 2fr !important;
    grid-template-rows: auto auto auto auto !important;
    transition: none;
  }
  .mosaic__headline {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 40px;
  }
  .mosaic__block { grid-column: auto; grid-row: auto; }
  .mosaic__people { min-height: 200px; }
  .mosaic__partners { min-height: 200px; }
  .mosaic__results { min-height: 200px; }
  .mosaic__expertise { min-height: 200px; }
  .mosaic__tbc { min-height: 80px; }
  .mosaic__partners-scattered { display: none; }
  .featured-case { grid-template-columns: 1fr; gap: 40px; }
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .cta__inner { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero { padding: 140px 0 48px; }
  .page-hero--split { padding-top: calc(var(--nav-h) + 60px); padding-bottom: 60px; }
  .page-hero__split { grid-template-columns: 1fr; gap: 24px; }
  .page-hero__left h1 { margin-bottom: 0; }
  .highlights-ticker { padding: 18px 0; }
  .highlights-ticker__value { font-size: 1.5rem; }
  .highlights-ticker__item { padding: 8px 18px; }
  .approach__tile { grid-template-columns: 1fr; }
  .approach__tile-visual { display: none; }
  .approach__tile-text { padding: 36px; }
  .approach__tile-title { font-size: 1.5rem; }
  /* About page responsive — 1024px */
  .about-hero-new__inner { grid-template-columns: 1fr; gap: 24px; }
  .about-hero-new__left h1 { margin-bottom: 0; }
  .zigzag { grid-template-columns: 1fr; gap: 40px; }
  .zigzag--reverse .zigzag__images { order: 0; }
  .zigzag__images { min-height: 300px; }
  .zigzag__img--solo { min-height: 300px; }
  .differentiators { grid-template-columns: repeat(3, 1fr); }
  .about-numbers__grid { grid-template-columns: repeat(2, 1fr); }
  .about-numbers__tile { padding: 40px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile-style nav (hamburger) kicks in at ≤1200px. The desktop nav row
   is the limiting factor — once the count of top-level nav items grew,
   the 768px breakpoint left the desktop nav cramped at 800-1200px
   viewports. The mobile-menu drawer + chevron pattern handles overflow
   far more gracefully, so we hand off earlier. The actual mobile-tweak
   block (smaller --nav-h, hero padding adjustments, etc.) stays at
   ≤768px since those are about phone-sized viewports specifically. */
@media (max-width: 1200px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
}

@media (max-width: 768px) {
  /* Mobile nav height now 96px (was 80, was 64). The logo SVG is ~44px
     tall, so this gives ~26px of vertical breathing top and bottom —
     visually consistent with desktop's 98px nav (where the gap is
     ~27px). The previous 80px caused the logo to visibly "jump up" by
     about 9px when crossing this breakpoint as the screen narrowed. */
  :root { --nav-h: 96px; }
  .section { padding: 72px 0; }
  /* Horizontal scroll-lock heading hidden on mobile so cards get the
     full vertical space. The pinned block (heading + cards-mask) was
     too tall for small phone viewports — cards were getting cropped at
     the bottom. The cards themselves are self-descriptive (industry /
     expertise name on each pill), so the section's subtitle + title +
     intro above is decorative on mobile, not informational. Hiding via
     display:none also drops the pin's offsetHeight, so the JS-sized
     scroll-area shrinks to match automatically — animation timing stays
     correct without any JS changes. Scoped :not(.timeline-section) so
     the timeline section keeps its heading (where it's the only label
     for what the milestones mean). */
  .industries:not(.timeline-section) .industry__heading {
    display: none;
  }
  .hero { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px; }
  .hero__mosaic {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    aspect-ratio: unset;
    gap: 12px;
    transition: none;
    padding: 0 24px;
  }
  .mosaic__block { grid-column: auto; grid-row: auto; }
  .mosaic__headline {
    grid-column: 1 / -1;
    grid-row: auto;
    padding: 32px;
  }
  .mosaic__headline h1 { font-size: 1.75rem; }
  .mosaic__people,
  .mosaic__partners,
  .mosaic__results,
  .mosaic__expertise { min-height: 180px; }
  .mosaic__tbc { min-height: 60px; }
  .mosaic__partners-scattered { display: none; }
  /* Card width is responsive on mobile: at smaller viewports the
     fixed 336px was wider than the mask (viewport - 72px container
     padding), so even when the last card was centred it spilled past
     the mask edges on both sides — making it never read as "fully
     in view". clamp() keeps it at 336px on larger phones but shrinks
     proportionally on smaller ones, always leaving ~4px breathing
     room inside the mask. */
  .industry-card { flex: 0 0 clamp(240px, calc(100vw - 80px), 336px); }
  /* Tiles stack vertically on mobile. The base 20px gap reads as
     horizontal breathing room on the desktop 3-up grid, but feels
     pinched when the tiles are stacked — bumping to 32px gives each
     tile its own visual breathing room. */
  .insights-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  /* Footer on mobile: switch to a flex column so we can reorder. The
     category groups (footer__col) go FIRST and act as a collapsible
     accordion — each heading is a row with a chevron that toggles its
     link list. The brand block (logo + address) drops to the bottom
     of the grid via order:99. */
  .footer__grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;   /* harmless leftover for older browsers */
    gap: 0;
    margin-bottom: 40px;
  }
  .footer__brand {
    order: 99;
    max-width: 100%;
    padding-top: 32px;
    /* No top border or margin-top — the last .footer__col's bottom
       border already separates the categories from the brand block.
       Adding either creates a visible "double line". */
    display: flex;
    align-items: flex-start;
    justify-content: center;   /* logo + address sit centred as a pair */
    gap: 24px;
  }
  /* Logo on the left, fixed at its desktop size; the SVG sits flush at
     the top of its box. */
  .footer__logo {
    flex: 0 0 140px;
    margin-bottom: 0;
    /* The address paragraph has line-height 1.6 × 1.1875rem so the
       first glyph sits ~6px below the top of the <p> box. Nudge the
       logo down the same amount so its visible top edge aligns with
       the top of the first address line, not the empty leading above
       it. (Calculation: half-leading = (1.6 − 1) × 19px / 2 ≈ 5.7px) */
    margin-top: 6px;
  }
  /* Address column on the right. flex: 0 1 auto so it sizes to its
     own content width (longest text line) instead of stretching to
     fill the row — otherwise justify-content:center has nothing to
     centre, the address would push out to the right edge. Text
     inside the <p> stays left-aligned by default. */
  .footer__brand p {
    flex: 0 1 auto;
    margin: 0;
  }
  /* Each category becomes an accordion row with a divider beneath. The
     first row gets a top divider so the whole stack reads as a unit. */
  .footer__col {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .footer__col:first-of-type {
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  /* Toggle row — flips from "decorative heading" to "interactive row"
     on mobile. Chevron appears, padding gives it tap-target height. */
  .footer__col-toggle {
    cursor: pointer;
    padding: 18px 0;
  }
  .footer__col-toggle h4 {
    margin: 0;   /* row layout — drop the 20px bottom margin */
  }
  .footer__col-chevron {
    display: block;
    width: 14px;
    height: 9px;
    flex: 0 0 auto;
    color: #fff;
    transition: transform 0.25s ease;
  }
  .footer__col-toggle[aria-expanded="true"] .footer__col-chevron {
    transform: rotate(180deg);
  }
  /* Links collapse to 0 height by default; expand when the sibling
     toggle button gets aria-expanded="true". visibility is delayed
     until the collapse transition ends so links stay tab-focusable
     during the animation (and become unfocusable once fully closed). */
  .footer__col-links {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease, visibility 0s linear 0.3s;
  }
  .footer__col-toggle[aria-expanded="true"] + .footer__col-links {
    /* 600px is comfortably above any realistic number of footer links
       in a single category — content-driven height would need JS to
       measure, and this is simpler. */
    max-height: 600px;
    visibility: visible;
    padding-bottom: 14px;
    transition: max-height 0.3s ease, visibility 0s linear 0s;
  }
  .footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 120px 0 40px; }
  .page-hero--split { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
  .page-hero__left h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
  .page-hero__right p { font-size: 1.0625rem; }
  .page-hero__inner h1 { font-size: 1.75rem; }
  .page-hero__inner p { font-size: 1.0625rem; }
  .filter-btn { padding: 13px 24px; font-size: 1.125rem; }
  .highlights-ticker { padding: 14px 0; }
  .highlights-ticker__value { font-size: 1.25rem; }
  .highlights-ticker__label { font-size: 0.9375rem; }
  .highlights-ticker__item { padding: 7px 16px; }
  .highlights-ticker__link { padding: 0 6px; }
  .case-card__image { height: 180px; margin: 12px 12px 0; }
  .case-card__body { padding: 16px 20px 24px; }
  .case-card__logo { top: 12px; left: 12px; right: 12px; height: 180px; padding: 0 20px; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .approach__scroll-area { height: 350vh; }
  .approach__header h2 { font-size: 1.5rem; }
  .approach__header { padding: 48px 0 0; }
  .approach__sticky { padding: calc(var(--nav-h) + 16px) 20px 24px; gap: 16px; }
  .approach__tile-text { padding: 28px; }
  /* Coral badge — on desktop it's anchored left:32px with a 360px
     min-width, which overflows the tile on narrow mobile viewports.
     Centre it horizontally instead and drop the min-width so it
     shrinks to its content (still capped by max-width so it can't
     stretch outside the tile). top:-30px stays — the pill still sits
     half above / half below the tile's top edge. */
  .approach__tile-badge {
    left: 50%;
    transform: translateX(-50%);
    min-width: 0;
    max-width: calc(100% - 32px);
  }
  .section-header { margin-bottom: 40px; }
  .featured-case__stats { grid-template-columns: 1fr; }
  /* About page responsive — 768px */
  .about-video-banner { height: 50vh; min-height: 350px; }
  .about-video-banner__text h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
  .differentiators { grid-template-columns: 1fr; gap: 24px; }
  .differentiator { padding: 24px 16px; }
  .about-numbers__grid { grid-template-columns: repeat(2, 1fr); }
  .about-numbers__tile { padding: 32px 24px; }
  .team-grid { grid-template-columns: 1fr; }
  .bio-modal__inner { flex-direction: column; padding: 1.5rem; gap: 1.25rem; }
  .bio-modal__photo { width: 120px; height: 120px; }
  .partner-modal__inner { flex-direction: column; padding: 1.5rem; gap: 1.25rem; }
  .partner-modal__logo { width: 140px; height: 140px; padding: 0.875rem; }
  .zigzag__images { min-height: 250px; }
}
@media (max-width: 480px) {
  .hero__mosaic { grid-template-columns: 1fr !important; padding: 0 16px; }
  .mosaic__headline { padding: 28px; }
  .partner-grid { grid-template-columns: 1fr 1fr; }
  .about-numbers__grid { grid-template-columns: 1fr; }
}

/* --- Pill-style category label (e.g. featured case caption).
   border-radius matches the .case-card__tag shape used on the case-study
   page (4px corners, not the fully-rounded 60px pill) so the category
   chips visually rhyme across listing + featured surfaces. */
.label--pill {
  background: var(--coral);
  color: var(--dark-blue);
  /* line-height:1 collapses the line-box to the text glyph height so
     the padding values map directly to visible top/bottom whitespace
     (no unpredictable inherited leading bleeding in).
     Asymmetric padding (8 top, 4 bottom) compensates for the way
     uppercase letterforms sit in the top portion of their line-box —
     without that bias, the text optically appears higher than centre
     even when the padding is mathematically symmetric. */
  padding: 8px 16px 4px;
  line-height: 1;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* --- Industries: static fact variant of the counter pill --- */
.industry__counter--fact .industry__counter-fact {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.6s ease;
}
.industry__counter--fact { padding: 16px 28px; }

/* --- Testimonial Carousel (TW16-style auto-rotate) --- */
.section--quote {
  background: var(--mint);
  padding-top: 90px;
  padding-bottom: 100px;
}
.quote-carousel { text-align: center; }
.quote-carousel__mark {
  /* Real typographic left double-quote (&ldquo;) rendered at display size.
     Background-clip: text fills the glyph with the same teal→coral gradient
     used elsewhere on the site. Serif stack so the quote glyph reads with
     proper curl shape rather than the geometric one League Spartan gives. */
  display: block;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21rem;
  line-height: 0.75;
  font-weight: 700;
  height: 144px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, #4da8b5 0%, #4da8b5 25%, #f0845e 50%, #4da8b5 75%, #4da8b5 100%);
  background-size: 300% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quote-carousel__viewport {
  position: relative;
  overflow: hidden;
}
.quote-carousel__track {
  display: flex;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.25, 0.75, 0.3, 1);
  will-change: transform;
}
.quote-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  box-sizing: border-box;
}
.quote-carousel__quote {
  max-width: 820px;
  margin: 0 auto 2rem;
  font-size: clamp(1.125rem, 2.025vw, 2.1375rem);
  line-height: 1.4;
  color: var(--text-body);
  font-style: italic;
  font-weight: 400;
}
.quote-carousel__attribution {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
}
.quote-carousel__author {
  color: var(--primary);
}
.quote-carousel__role {
  color: var(--text-light);
  font-weight: 500;
}
.quote-carousel__sep {
  color: rgba(var(--primary-rgb), 0.3);
  font-weight: 400;
}
.quote-carousel__logo {
  display: block;
  margin: 1.5rem auto 0;
  max-height: 96px;
  max-width: 320px;
  width: auto;
  height: auto;
  filter: grayscale(100%) opacity(0.55);
  mix-blend-mode: multiply;
}

/* =========================================
   Geometric Hero (dot animation)
   Imported from Test Website 16
   Nav styles intentionally excluded — TW17 nav is preserved.
   ========================================= */

/* --- Hero + band together fill the initial viewport (100vh) --- */
:root {
  --hero-band-h: 80px;
}

.hero--geo {
  position: relative;
  min-height: calc(100vh - var(--hero-band-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #ffffff;
  padding: 0;
}

.hero--geo .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 0;
  background: none;
  overflow: visible;
}

#geo-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#geo-hero-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Top fade so dots/animations don't impair logo + nav legibility */
.hero--geo .hero__overlay {
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(255,250,248,0.95) 0%, rgba(255,250,248,0.75) 45%, rgba(255,250,248,0) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero--geo .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero--geo .hero__grid {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: calc(100vh - var(--hero-band-h));
  padding-top: var(--nav-h, 88px);
  padding-bottom: 3rem;
}

.hero--geo .hero__content {
  /* Fixed width/alignment so the block doesn't shift as slides cycle */
  width: 100%;
  max-width: 780px;
  margin-left: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero--geo .hero__title {
  color: var(--primary, #03584E);
  text-shadow: none;
  margin: 0;
  font-size: clamp(2.5rem, 4.5vw, 4.75rem);
  line-height: 1.05;
  transition: opacity 0.4s ease;
  min-height: 1.05em;
}

.hero--geo .hero__subtitle {
  color: var(--text-body, #4a5568);
  text-shadow: none;
  font-size: 1.3125rem;
  line-height: 1.5;
  max-width: none;
  margin: 0;
  /* Reserve ~4 lines so the block height doesn't jump between slides */
  min-height: calc(1.3125rem * 1.5 * 4);
  transition: opacity 0.4s ease;
}

.hero--geo .hero__title.hero-text--fading,
.hero--geo .hero__subtitle.hero-text--fading {
  opacity: 0;
}

/* ─── Dark band sits at bottom of initial viewport (hero + band = 100vh) ─── */
.hero-band {
  background: var(--primary-dark);
  height: var(--hero-band-h);
  position: relative;
  z-index: 2;
}

/* ─── Carousel Buttons ─── */

.hero__carousel {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
}

.hero__carousel-buttons {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero__carousel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: 'League Spartan', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 32px;
  border: none;
  border-radius: 60px;
  cursor: pointer;
  color: #ffffff;
  transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  position: relative;
}

.hero__carousel-btn[data-slide="0"] { background: var(--primary); }
.hero__carousel-btn[data-slide="1"] { background: var(--primary-light); }
.hero__carousel-btn[data-slide="2"] { background: var(--coral); color: var(--dark-blue); }

.hero__carousel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(3, 88, 78, 0.22);
}
.hero__carousel-btn[data-slide="2"]:hover {
  box-shadow: 0 8px 24px rgba(246, 171, 147, 0.35);
}

.hero__carousel-btn-arrow {
  width: 16px;
  height: 16px;
  opacity: 0;
  width: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, width 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

.hero__carousel-btn--active .hero__carousel-btn-arrow,
.hero__carousel-btn:hover .hero__carousel-btn-arrow {
  opacity: 1;
  width: 16px;
  transform: translateX(0);
}

@media (max-width: 1024px) {
  .hero--geo .hero__grid {
    gap: 2.5rem;
    text-align: center;
    padding-top: calc(var(--nav-h, 88px) + 2rem);
    padding-bottom: 3rem;
  }
  .hero--geo .hero__content {
    max-width: 100%;
    align-self: center;
  }
  .hero__carousel {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero--geo {
    min-height: 100svh;
  }
  .hero--geo .hero__grid {
    min-height: auto;
    padding-top: calc(var(--nav-h, 88px) + 1.5rem);
    padding-bottom: 2.5rem;
  }
  .hero__carousel {
    display: none;
  }
}