/* =========================================
   SATIEE PAGE LAYOUT
   Shared by every page built from the site's sections: the page title
   banners, the alternating bands, the split bands, the carousel, the
   journey timeline, the contact form, and the sections that used to live
   on the homepage (the problem, the team, the advisors, the mission text).
   Colours, type and buttons are the homepage's own, copied unchanged.
   The header and footer are in /site.css, which every page links after this.
   ========================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; width: 100%; }

:root {
  --dark: #1B3A4B;
  --teal: #0F766E;   /* darker than the brand #0D9488 so teal text and white-on-teal buttons pass 4.5:1 */
  --teal-light: #14B8A6;
  --lime: #7BB518;
  --lime-light: #8DC63F;
  --gold: #F5C518;
  --purple: #6B3FA0;
  --hr-green: #4D7A0F;   /* the brand lime #7BB518 darkened until white text on it passes AA (5.1:1) */
  --blue: #2563EB;
  --text: #111827;
  --text-secondary: #5A6B78;
  --text-muted: #6B7280;
  --bg: #FFFFFF;
  --bg-alt: #F8FAFB;
  --bg-dark: #0F2A36;
  --border: #E5E7EB;
  --radius: 12px;
  /* each page's primary colour: teal by default, set per page on <body> */
  --page: var(--teal);
}
body.page-employees { --page: var(--teal); }
body.page-managers { --page: var(--purple); }
body.page-hr { --page: var(--hr-green); }

html:focus-within { scroll-behavior: smooth; }
picture { display: contents; }

body {
  font-family: 'Neco', Georgia, system-ui, serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; }
p { color: var(--text-secondary); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: #115E59; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13, 148, 136, 0.3); }
.btn-page { background: var(--page); color: #fff; }
.btn-page:hover { filter: brightness(0.9); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15, 42, 54, 0.18); }
.btn:focus-visible { outline: 3px solid #5A46C8; outline-offset: 3px; }

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

/* =========================================
   BANDS
   A "line break" between sections is a change of background, as on the
   homepage: white, then the pale #F8FAFB, then white again.
   ========================================= */
.band { padding: 96px 0; background: var(--bg); }
.band-alt { background: var(--bg-alt); }
.band-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.band-head h2 { margin-bottom: 16px; }
.band-head p { font-size: 1.05rem; }

/* =========================================
   PLACEHOLDERS
   Everything the client has still to write or supply carries .ph (text),
   .ph-box (a block of text) or .ph-media (an image to come), so it can be
   found by searching the source for "ph". Text placeholders start with
   "Placeholder:".
   ========================================= */
.ph { outline: 2px dashed #D97706; outline-offset: 8px; border-radius: 4px; }
.ph-label { font-weight: 700; color: #B45309; }
.ph-box { border: 2px dashed #D97706; background: #FFFBEB; border-radius: var(--radius); padding: 28px; }
.ph-box p { color: var(--text); }

/* the page title banner (.pb) is in /site.css, so pages that do not use this file can have one */

/* =========================================
   HOMEPAGE: PILOTS
   ========================================= */
.home-pilots { padding: 88px 0; }
/* Lauren's layout (18 Oct): the title and text in the left column, the title level with the top of the
   image and the text box level with its bottom, the image on the right, the pilots button below */
.home-pilots-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); }
.home-pilots-copy { display: flex; flex-direction: column; min-width: 0; }
.home-pilots-copy h2 { margin: -0.1em 0 32px; line-height: 1.1; text-align: left; }
.home-pilots-copy .ph-box { flex: 1; }
.home-pilots-grid > .split-media { align-self: start; }
.home-pilots-grid .ph-box p { font-size: 1.05rem; line-height: 1.75; }
.more-link { justify-self: center; display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }
.more-link:hover { color: var(--dark); }
.more-link:focus-visible { outline: 3px solid #5A46C8; outline-offset: 3px; border-radius: 4px; }

/* =========================================
   OUR MISSION: the founding paragraph and the quote
   ========================================= */
.founding { max-width: 820px; margin: 0 auto; }
.founding > p { font-size: 1.12rem; line-height: 1.8; color: var(--dark); text-align: center; }
.founding blockquote {
  max-width: 720px;
  margin: 36px auto 0;
  border-left: 3px solid var(--teal);
  padding-left: 20px;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--dark);
}

/* =========================================
   OUR MISSION: the three-tile carousel
   Works like the /media carousel (same script, /carousel.js): the current
   tile sits in the centre, the neighbours are dimmed, clicking a neighbour
   brings it to the centre, and it loops.
   ========================================= */
.mc { padding: 88px 0 96px; }
/* the heading above the tiles on /platform, left aligned like the rest of the page */
.mc-head { margin: 0 0 clamp(32px, 4vw, 56px); }
.mc-track {
  list-style: none;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  position: relative;
  padding: 4px 0 8px;
}
.mc-track::-webkit-scrollbar { display: none; }
.mc-track > li { flex: 0 0 clamp(270px, 32vw, 400px); scroll-snap-align: center; }
.mc-track.is-ready > li .mc-tile { transition: transform 0.3s, box-shadow 0.3s, opacity 0.4s; }
.mc-track > li:not(.is-current) .mc-tile { opacity: 0.51; }
.mc-track > li:not(.is-current) .mc-tile:hover { opacity: 0.8; transform: none; box-shadow: none; }
.mc-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  background-color: var(--tile, var(--teal));
  background-image: radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.14) 0%, transparent 45%);
  transition: transform 0.3s, box-shadow 0.3s;
}
.mc-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 42, 54, 0.22); }
.mc-tile.tile-employees { --tile: var(--teal); }
.mc-tile.tile-managers { --tile: var(--purple); }
.mc-tile.tile-hr { --tile: var(--hr-green); }
.mc-tile h3 { color: #fff; font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.22; max-width: 14ch; }
.mc-link { color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.05rem; text-decoration: underline; text-underline-offset: 4px; }
/* the link covers the whole tile, so the tile itself is the click target */
.mc-link::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.mc-link:focus-visible { outline: none; }
.mc-link:focus-visible::after { outline: 3px solid #5A46C8; outline-offset: 4px; }
/* each dot is drawn 10px tall, but a 7px transparent border around it makes the
   tap target 24px; the active dot takes the colour of the tile in the centre */
.mc-dots { display: flex; justify-content: center; gap: 0; margin-top: 17px; }
.mc-dots button { box-sizing: content-box; width: 10px; height: 10px; border-radius: 999px; border: 7px solid transparent; background: #C9D3DA; background-clip: padding-box; cursor: pointer; padding: 0; transition: width 0.3s, background 0.3s; }
.mc-dots button[aria-current="true"] { width: 28px; background-color: var(--teal); }
.mc[data-current="1"] .mc-dots button[aria-current="true"] { background-color: var(--purple); }
.mc[data-current="2"] .mc-dots button[aria-current="true"] { background-color: var(--hr-green); }
.mc-dots button:focus-visible { outline: 3px solid #5A46C8; outline-offset: -4px; }

/* =========================================
   FOR EMPLOYEES / MANAGERS / HR
   ========================================= */
.aud-title { padding: 148px 0 64px; }
.aud-title h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); color: var(--dark); }
.aud-title h1 strong { color: var(--page); font-weight: 700; }

/* the split bands: text on one side, a straight-edged image panel on the other */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 400px; background: var(--bg); }
.split + .split { margin-top: 20px; }
.split-text {
  display: flex;
  align-items: center;
  padding: 64px 48px 64px max(24px, calc(50vw - 566px));
}
.split-rev .split-text {
  justify-content: flex-end;
  text-align: right;
  padding: 64px max(24px, calc(50vw - 566px)) 64px 48px;
}
.split-text p { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.5; color: var(--page); max-width: 30ch; }
.split-media {
  --split-img: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: #fff;
  background-color: var(--page);
  background-image: var(--split-img);
  background-size: cover;
  background-position: center;
}
.ph-media::before { content: ''; position: absolute; inset: 18px; border: 2px dashed rgba(255, 255, 255, 0.7); border-radius: 6px; pointer-events: none; }
.ph-media-name { display: block; font-family: 'General Sans', 'Inter', sans-serif; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.2; color: #fff; }
.ph-media-note { display: block; margin-top: 6px; font-family: 'Inter', sans-serif; font-size: 0.8rem; color: rgba(255, 255, 255, 0.9); }

.aud-cta { padding: 88px 0; }
.aud-cta-box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding: 44px 48px;
  background: #fff;
  border: 2px solid var(--page);
  border-radius: 16px;
}
.aud-cta-box h2 { color: var(--page); font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 16ch; }

/* =========================================
   PILOTS
   ========================================= */
.pilots-page { padding: 148px 0 96px; }
.pilots-page h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); margin-bottom: 48px; }
.pilots-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.pilots-copy .ph-box p { font-size: 1.05rem; line-height: 1.75; }
.pilots-copy .ph-box p + p { margin-top: 14px; }
.pilots-text p { line-height: 1.7; color: #33414A; }
.pilots-text p + p { margin-top: 18px; }
.pilots-text strong { font-weight: 600; color: var(--text); }
.pilots-copy a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.price-note { margin-top: 28px; font-size: 1rem; color: var(--dark); }

/* =========================================
   ABOUT US
   ========================================= */
.name-change { max-width: 760px; margin: 0 auto; text-align: center; }
.name-change h2 { margin-bottom: 24px; }
.name-change p { font-size: 1.05rem; line-height: 1.8; margin-bottom: 16px; }
.eden-note { max-width: 760px; margin: 0 auto; text-align: center; }
.eden-note p { font-size: 1.12rem; line-height: 1.75; color: var(--dark); }

/* =========================================
   THE PLATFORM (sections from the live /platform page)
   ========================================= */
.narrow { max-width: 760px; }
.body-copy p { font-size: 1.06rem; color: var(--text-secondary); max-width: 64ch; }
.body-copy p + p { margin-top: 14px; }
.body-copy h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 16px; color: var(--dark); }
.body-copy h3, .journey h3 { color: var(--dark); }
.body-copy a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.pf-lead { font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.5; color: var(--dark); max-width: 46ch; }
.journey { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 36px; position: relative; }
.journey::before { content: ""; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, #B8D9D5 0 10px, transparent 10px 18px); }
.journey li { position: relative; text-align: center; }
.journey .dot { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.2rem; color: #fff; position: relative; z-index: 1; }
.journey li:nth-child(1) .dot { background: #0F766E; }
.journey li:nth-child(2) .dot { background: #1B3A4B; }
.journey li:nth-child(3) .dot { background: #6B3FA0; }
.journey li:nth-child(4) .dot { background: #4D7C0F; }
.journey h3 { font-size: 1.1rem; margin-bottom: 8px; }
.journey p { font-size: 0.95rem; color: var(--text-secondary); max-width: 26ch; margin: 0 auto; }
.journey-note { text-align: center; margin: 32px auto 0; font-size: 1rem; color: var(--dark); font-weight: 600; max-width: 60ch; }

/* =========================================
   THE JOURNEY: a timeline in a panel that scrolls on its own.
   The line fades teal -> purple -> green, and each milestone takes the next of
   those colours in turn (the Employees, Managers and HR page colours).
   ========================================= */
.jt-panel {
  position: relative;
  height: min(640px, 72vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 48px 32px 40px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--border);
  scrollbar-color: #C9D3D9 transparent;
}
.jt-panel:focus-visible { outline: 3px solid #5A46C8; outline-offset: 4px; }
.jt { position: relative; list-style: none; max-width: 960px; margin: 0 auto; }
.jt::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; border-radius: 4px;
  background: linear-gradient(180deg, #0F766E, #6B3FA0 50%, #4D7A0F);
}
.jt > li { position: relative; width: 50%; padding: 0 48px 40px 0; }
.jt > li:nth-child(odd) { margin-left: 50%; padding: 0 0 40px 48px; }
.jt > li:nth-child(3n+1) { --jt-c: #0F766E; --jt-tint: #F0FDFA; }
.jt > li:nth-child(3n+2) { --jt-c: #6B3FA0; --jt-tint: #F6F2FB; }
.jt > li:nth-child(3n+3) { --jt-c: #4D7A0F; --jt-tint: #F4F9EC; }
.jt > li::before {
  content: ''; position: absolute; top: 20px; right: -10px; width: 20px; height: 20px; border-radius: 50%;
  border: 4px solid #fff; background: var(--jt-c); box-shadow: 0 0 0 2px var(--jt-c);
}
.jt > li:nth-child(odd)::before { right: auto; left: -10px; }
.jt-card { background: var(--jt-tint); border-left: 4px solid var(--jt-c); border-radius: 12px; padding: 18px 22px; }
.jt-year { display: block; font-family: 'General Sans', 'Inter', sans-serif; font-weight: 600; color: var(--jt-c); }
.jt-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--dark); margin: 2px 0 6px; }
.jt-card p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.6; }
.jt-card .ph-text { font-style: italic; color: #6B7A85; }
.jt-end { position: relative; text-align: center; padding: 20px 0 8px; }
.jt-end h2 { color: var(--dark); font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 8px; }
.jt-end a { color: var(--teal); font-family: 'Inter', sans-serif; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.jt-end a:hover { color: var(--dark); }
.jt-end a:focus-visible { outline: 3px solid #5A46C8; outline-offset: 3px; border-radius: 4px; }

/* ===== moved from the homepage: THE PROBLEM (now on /mission) ===== */
.problem {
  background: var(--bg-dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.problem::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.problem .container { position: relative; }

.problem-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}


.problem-header h2 { color: #fff; margin-bottom: 16px; }
.problem-header p { color: rgba(255,255,255,0.85); font-size: 1.0625rem; }
.problem-header p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.problem-header p a:hover { color: #fff; text-decoration-thickness: 2px; }
.problem-header p a:focus-visible { outline: 3px solid #9ECD3A; outline-offset: 2px; border-radius: 2px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  transition: border-color 0.3s, background 0.3s;
}
.stat-card:hover { border-color: rgba(13,148,136,0.4); background: rgba(255,255,255,0.06); }

.stat-card .stat-number {
  font-size: 2.4rem;
  font-weight: 900;
  margin-bottom: 4px;
  line-height: 1;
}

.stat-card:nth-child(1) .stat-number { color: var(--gold); }
.stat-card:nth-child(2) .stat-number { color: #EF4444; }
.stat-card:nth-child(3) .stat-number { color: var(--teal-light); }
.stat-card:nth-child(4) .stat-number { color: var(--lime); }

.stat-card .stat-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin-top: 8px;
}

.stat-source {
  text-align: center;
  margin-top: 32px;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
}
.problem-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0B8177;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.problem-link:hover { color: var(--dark); }

/* ===== moved from the homepage: ADVISORS (now on /about/team) ===== */
/* white on /about/team, so the pale team band above it reads as a separate section */
.social-proof { background: var(--bg); }

.social-proof-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}

.social-proof-header h2 { margin-bottom: 16px; }

.advisors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.advisor-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.3s;
}
.advisor-card:hover { border-color: var(--teal); }

.advisor-avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}

.advisor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.advisor-card:nth-child(1) .advisor-avatar { background: var(--teal); }
.advisor-card:nth-child(2) .advisor-avatar { background: var(--purple); }
.advisor-card:nth-child(3) .advisor-avatar { background: var(--lime); }
.advisor-card:nth-child(4) .advisor-avatar { background: var(--blue); }

.advisor-info { flex: 1; min-width: 0; }
.advisor-card h3 { font-size: 1rem; margin-bottom: 4px; }
.advisor-card .advisor-title { font-size: 0.8rem; color: var(--teal); font-weight: 600; margin-bottom: 10px; }
.advisor-card p { font-size: 0.82rem; line-height: 1.6; }

/* ===== moved from the homepage: THE TEAM (now on /about/team) ===== */
/* Co-founders grid */
.founders-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}

.founders-header h2 { margin-bottom: 16px; }

.founders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 60px;
}

.cofounder-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.cofounder-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 30px rgba(13, 148, 136, 0.08);
}

.cofounder-header {
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cofounder-card:nth-child(3n+1) .cofounder-header {
  background: linear-gradient(135deg, var(--teal) 0%, var(--dark) 100%);
}
.cofounder-card:nth-child(3n+2) .cofounder-header {
  background: linear-gradient(135deg, var(--purple) 0%, var(--dark) 100%);
}
.cofounder-card:nth-child(3n+3) .cofounder-header {
  background: linear-gradient(135deg, var(--lime) 0%, var(--dark) 100%);
}

.cofounder-initials {
  font-size: 4rem;
  font-weight: 900;
  color: rgba(255,255,255,0.15);
  letter-spacing: 0.05em;
}

.cofounder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.cofounder-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(27,58,75,0.7), transparent);
}

.cofounder-name-overlay {
  position: absolute;
  bottom: 16px;
  left: 20px;
  z-index: 2;
  color: #fff;
}

.cofounder-name-overlay h3 {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 2px;
}

.cofounder-name-overlay span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

.cofounder-body {
  padding: 24px 20px;
}

.cofounder-body p {
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 12px;
}

.cofounder-body p:last-child {
  margin-bottom: 0;
}

.cofounder-badges {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.cofounder-badge {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}

.cofounder-badge .cb-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.cofounder-badge .cb-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
}

.cofounder-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.cofounder-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.2s;
}

.cofounder-link:hover { color: var(--dark); }

.cofounder-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .founders-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }
}
.founders-join { margin-top: 14px; }
.founders-join a { color: #0B8177; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.founders-join a:hover { color: var(--dark); }

/* ===== moved from the homepage: MISSION TEXT (now on /mission and /about) ===== */
.mission-text h2 {
  color: #fff;
  margin-bottom: 24px;
}

.mission-text p {
  color: rgba(255,255,255,0.65);
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

.mission-text blockquote {
  border-left: 3px solid var(--teal);
  padding-left: 20px;
  margin: 28px 0;
  font-style: italic;
  color: rgba(255,255,255,0.8);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ===== moved from the homepage: CONTACT FORM AND BOOKING (homepage and /pilots) ===== */
/* ---- Form card ---- */
.pilot-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 4px 24px rgba(27, 58, 75, 0.06);
}

.pilot-form-card h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--dark);
}

.pilot-form-card .form-sub {
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 7px;
}

.field label .req { color: #DC2626; margin-left: 2px; }

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.field textarea { resize: vertical; min-height: 90px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #DC2626;
  background: #FEF2F2;
}

.pilot-form-card .btn-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

.pilot-form-card .btn-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.form-privacy {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}

.form-privacy a { color: var(--teal); }

/* Honeypot — hidden from humans, visible to bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Success / error states */
.form-status {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 4px;
}

.form-status.show { display: flex; }

.form-status.success {
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.25);
  color: #0B6B62;
}

.form-status.error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
}

.form-status svg { flex-shrink: 0; margin-top: 2px; }

.pilot-success {
  display: none;
  text-align: center;
  padding: 24px 8px;
}

.pilot-success.show { display: block; }

.pilot-success .tick {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
}

.pilot-success h3 { margin-bottom: 10px; }
.pilot-success p { font-size: 0.95rem; }

/* Two fields side by side */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Contact form in the closing CTA section */
.contact-form-wrap {
  position: relative;
  max-width: 620px;
  margin: 44px auto 0;
  text-align: left;
}
/* booking calendar and message form, side by side on wide screens, stacked below 960px */
.contact-duo { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; margin: 44px auto 0; text-align: left; align-items: start; }
.book-slot { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #F8FAFB; min-height: 520px; display: flex; }
.book-slot iframe { width: 100%; height: calc(100vh - 110px); min-height: 620px; max-height: 900px; border: 0; display: block; }
.book-slot iframe:focus-visible { outline: 3px solid #0F766E; outline-offset: -3px; }
/* once the calendar opens it takes the full width, because Google needs about 760px to show times beside dates */
.contact-duo.is-booking { grid-template-columns: 1fr; }
.contact-duo.is-booking > .pilot-form-card:last-child { width: 100%; max-width: 620px; justify-self: center; }
#book, #book-slot { scroll-margin-top: 88px; }
.book-facade { margin: auto; text-align: center; padding: 40px 28px; color: #0F766E; }
.book-facade-title { font-size: 1.1rem; font-weight: 700; color: var(--dark); margin: 14px 0 6px; }
.book-facade-note { font-size: 0.9rem; color: var(--text-secondary); max-width: 34ch; margin: 0 auto 22px; }
.book-alt { font-size: 0.85rem; color: var(--text-secondary); margin-top: 14px; }
.book-alt a { color: #0F766E; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) { .contact-duo { grid-template-columns: 1fr; max-width: 620px; } }
@media (max-width: 700px) { .book-slot { min-height: 0; } .book-alt { display: none; } }

@media (max-width: 900px) {
  .pilot-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pilot { padding: 64px 0; }
  .pilot-form-card { padding: 28px 22px; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================
   THE LIVE "NEW NAME, SAME MISSION" BAND (from the homepage, now on /about and /mission)
   ========================================= */
.mission {
  background: linear-gradient(170deg, var(--bg-dark) 0%, #132D3A 100%);
  color: #fff;
  position: relative;
}
.mission-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.problem.band, .mission.band { padding: 100px 0; }
/* on /mission it sits straight under the dark problem band, so a hairline marks the change */
.problem + .mission {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  /* a lighter navy than the problem band above, so the two read as separate sections */
  background: linear-gradient(170deg, var(--dark) 0%, #163545 100%);
}
/* the EDEN note on /about, in the same band under the name change */
.mission-note { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* the tribunal link on the dark problem band, lightened so it reads */
.problem .problem-link { color: #5EEAD4; }
.problem .problem-link:hover { color: #fff; }

/* /pilots: the form title is an h2 there, drawn like the homepage form card h3 */
.pilot-form-card h2 { font-size: 1.15rem; line-height: 1.2; letter-spacing: normal; margin-bottom: 6px; color: var(--dark); }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .advisors-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .journey::before { display: none; }
  .home-pilots-grid, .pilots-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .more-link { justify-self: start; }
  /* the split bands stack: text first, then the image panel */
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split-text, .split-rev .split-text { padding: 40px 24px 28px; justify-content: flex-start; text-align: left; }
  .split-rev .split-text { order: 2; }
  .split-media, .split-rev .split-media { min-height: 240px; padding: 40px 24px; }
  .split .ph-media::before, .split-rev .ph-media::before { inset: 16px; }
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  h1 { font-size: 1.85rem; line-height: 1.25; }
  h2 { font-size: 1.45rem; line-height: 1.3; }
  h3 { font-size: 1.1rem; }
  .band, .home-pilots, .aud-cta, .mc { padding: 56px 0; }
  .btn { padding: 14px 24px; font-size: 0.92rem; width: 100%; justify-content: center; }
  .aud-title { padding: 108px 0 32px; }
  .aud-title h1 { font-size: 2rem; }
  .aud-cta-box { padding: 28px 22px; }
  .pilots-page { padding: 108px 0 64px; }
  .pilots-page h1 { font-size: 2rem; margin-bottom: 32px; }
  .band-head { margin-bottom: 40px; }
  .mc-track > li { flex-basis: 78vw; }
  .mc-tile { gap: 28px; }
  /* the timeline folds to one side: the line on the left, every entry to its right */
  .jt-panel { padding: 32px 16px 28px; height: 60vh; overscroll-behavior: auto; }
  .jt::before { left: 10px; }
  .jt > li, .jt > li:nth-child(odd) { width: 100%; margin-left: 0; padding: 0 0 28px 40px; }
  .jt > li::before, .jt > li:nth-child(odd)::before { left: 0; right: auto; }
  .jt-end { text-align: left; padding-left: 40px; }

  /* moved with the sections from the homepage's own mobile rules */
  .problem-header { margin-bottom: 40px; }
  .problem-header p { font-size: 1rem; }
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { padding: 24px 20px; display: flex; flex-direction: column; align-items: center; }
  .stat-card .stat-number { font-size: 2rem; }
  .stat-card .stat-label { font-size: 0.875rem; }
  .stat-source { font-size: 0.75rem; margin-top: 20px; }
  .social-proof-header { margin-bottom: 40px; }
  .advisors-grid { grid-template-columns: 1fr; gap: 12px; }
  .advisor-card { padding: 20px; display: flex; gap: 16px; align-items: flex-start; text-align: left; }
  .advisor-avatar { margin: 0; min-width: 64px; width: 64px; height: 64px; font-size: 1rem; flex-shrink: 0; }
  .advisor-card h3 { font-size: 0.95rem; }
  .advisor-card .advisor-title { font-size: 0.75rem; margin-bottom: 6px; }
  .advisor-card p { font-size: 0.82rem; }
  .founders-header { margin-bottom: 40px; }
  .founders-grid { gap: 20px; }
  .cofounder-body { padding: 20px 16px; }
  .cofounder-body p { font-size: 0.85rem; }
  .founding > p { font-size: 1rem; }
  .founding blockquote { font-size: 0.95rem; padding-left: 16px; margin-top: 24px; }
  .problem.band, .mission.band { padding: 56px 0; }
  .mission-text p { font-size: 0.92rem; }
  .mission-text blockquote { font-size: 0.9rem; padding-left: 16px; margin: 20px 0; }
}
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .journey { grid-template-columns: 1fr; text-align: left; }
  .journey li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; }
  .journey .dot { margin: 0; grid-row: span 2; }
  .journey p { margin: 0; max-width: none; }
  .split-text, .split-rev .split-text { padding: 36px 16px 24px; }
}
@media (max-width: 380px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  .stat-card .stat-number { font-size: 1.75rem; }
}

/* people who turn motion off get the finished page */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .mc-track { scroll-behavior: auto; }
}

/* =========================================
   TEXT WIDTH
   Every text block spans the page container, so it lines up with the menu bar,
   and reads from the left. No narrow centred columns. Side-by-side layouts
   (hero, split bands, form cards, step cards, carousel tiles) are unaffected.
   ========================================= */
.cta-section .cta-inner,
.problem-header,
.founders-header,
.social-proof-header,
.mission-inner,
.founding,
.narrow:not(.container),
.body-copy,
.body-copy p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.cta-section,
.founding > p,
.stat-source,
.journey-note {
  text-align: left;
}
.pf-lead,
.journey-note {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* a .container that is also .narrow keeps the full container width, centred on the page like the menu bar */
.container.narrow { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* =========================================
   SECTION CONTRAST
   Each section contrasts with the one above it. Dark sections (the teal title
   banner, the navy problem band, the navy footer) never sit next to each other,
   so the mission / name-change band is light grey with dark text.
   ========================================= */
.mission,
.problem + .mission {
  background: var(--bg-alt);
  color: var(--text);
  border-top: 0;
}
.mission-text h2 { color: var(--dark); }
.mission-text p { color: var(--text-secondary); }
.mission-text blockquote { color: var(--dark); }
.mission-note { border-top-color: var(--border); }
.mission-note strong { color: var(--dark); }

/* =========================================
   STEPS AND PHOTO AS ONE BLOCK (/platform, "What happens to a request")
   The steps sit on a brand green panel and the photo fills the other half to the
   same height, so the two read as one piece. The photo is shown whole at its own
   2:3 shape and normally sets the height of the block, with the steps centred beside it.
   It is never cropped: if the text ever runs taller (narrow laptops), the photo stays
   pinned to the top and a strip of dark teal fills the space beneath it.
   The audit trail line sits on the foot of the photo.
   ========================================= */
.pf-flow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); color: #fff; }
.pf-flow-text { background: linear-gradient(135deg, #2D512E 0%, #133035 100%); padding: clamp(36px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.pf-flow-text h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 20px; }
.pf-flow-steps { list-style: none; margin: 0; padding: 0; }
.pf-flow-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.pf-flow-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-flow-num { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem; color: #9ECD3A; padding-top: 3px; }
.pf-flow-steps h3 { color: #fff; font-size: 1.15rem; margin: 0 0 6px; }
.pf-flow-steps p { color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; line-height: 1.55; margin: 0; }
.pf-flow-media { --split-img: none; position: relative; margin: 0; aspect-ratio: 2 / 3; width: 100%; height: 100%; display: flex; align-items: flex-end;
  background: #133035 var(--split-img) center top / contain no-repeat; }
.pf-flow-photo { position: absolute; inset: 0; }
.pf-flow-media figcaption { position: relative; width: 100%; padding: 64px 28px 24px; font-weight: 600; line-height: 1.45;
  background: linear-gradient(180deg, rgba(10, 31, 34, 0) 0%, rgba(10, 31, 34, 0.88) 70%); }
@media (max-width: 900px) {
  .pf-flow { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================
   AUDIENCE PAGE INTRO (Employees, Managers, HR)
   One short paragraph under the banner, like Stripe's: the first sentence
   in the page colour, the rest in grey, the same size, in General Sans.
   ========================================= */
.aud-intro { padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 3.5vw, 48px); }
.aud-intro p { max-width: none; text-wrap: pretty; font-family: 'General Sans', 'Inter', sans-serif; font-weight: 500; font-size: clamp(1.375rem, 2.6vw, 2.25rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--text-secondary); }
.aud-intro strong { color: var(--page); font-weight: 600; }
.aud-intro p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.aud-intro p a:hover { text-decoration-thickness: 2px; }
.aud-intro p a:focus-visible { outline: 3px solid #754DD0; outline-offset: 2px; border-radius: 2px; }
/* two square corners frame the intro, top right and bottom left, in the page's colour, and the same on the Platform page's lead */
.aud-intro p, .pf-lead { position: relative; }
.aud-intro p::before, .aud-intro p::after, .pf-lead::before, .pf-lead::after { content: ""; position: absolute; width: clamp(28px, 4vw, 56px); height: clamp(28px, 4vw, 56px); border: 0 solid var(--page); pointer-events: none; }
.aud-intro p::before, .pf-lead::before { top: calc(-1 * clamp(12px, 1.6vw, 20px)); right: calc(-1 * clamp(10px, 2vw, 28px)); border-top-width: 3px; border-right-width: 3px; }
.aud-intro p::after, .pf-lead::after { bottom: calc(-1 * clamp(12px, 1.6vw, 20px)); left: calc(-1 * clamp(10px, 2vw, 28px)); border-bottom-width: 3px; border-left-width: 3px; }
/* option C (Matthew, 18 Oct): the opening line on a signature yellow highlighter in deep teal ink, and thick
   forest green corners, from the homepage banner's palette and the same on every page */
.aud-intro strong { color: #133035; background: linear-gradient(transparent 12%, #FFD834 12%, #FFD834 92%, transparent 92%); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.aud-intro p::before, .aud-intro p::after, .pf-lead::before, .pf-lead::after { border-color: #2D512E; }
.aud-intro p::before, .pf-lead::before { border-top-width: 8px; border-right-width: 8px; }
.aud-intro p::after, .pf-lead::after { border-bottom-width: 8px; border-left-width: 8px; }

/* =========================================
   /about/journey: STAGES ON COLOURED BANDS (after McKinsey's history page)
   A stage menu sits in the left column and stays in view. Each stage runs
   full width on its own band: white, a pale green, or the brand's forest to
   teal green with white text. Each milestone is a hairline, a bold year, a
   light title, a few sentences and a photo, and the photo changes side and
   size from one milestone to the next. Text is always left aligned.
   ========================================= */
.jy { overflow-x: clip; isolation: isolate; color: var(--text); }
.jy-grid { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 48px; }
.jy-nav { position: sticky; top: 140px; align-self: start; z-index: 1; padding-top: clamp(64px, 8vw, 120px); }
.jy-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.jy-nav a { font-family: 'General Sans', 'Inter', sans-serif; font-size: 1.05rem; color: #9AA7A6; text-decoration: none; transition: color .2s; }
.jy-nav a[aria-current="true"] { color: var(--text); }
.jy-nav a:hover { color: var(--text); }
.jy-nav a:focus-visible { outline: 3px solid #5A46C8; outline-offset: 3px; border-radius: 4px; }
.jy.jy-dark .jy-nav a { color: rgba(255, 255, 255, 0.55); }
.jy.jy-dark .jy-nav a[aria-current="true"], .jy.jy-dark .jy-nav a:hover { color: #FFFFFF; }
.jy-stage { position: relative; padding-block: clamp(64px, 8vw, 120px); scroll-margin-top: 73px; }
.jy-stage::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: #FFFFFF; }
.jy-tone-b::before { background: #F0F6E9; }
.jy-tone-c { color: #FFFFFF; }
.jy-tone-c::before { background: linear-gradient(160deg, #2D512E 0%, #133035 100%); }
.jy-stage-name { font-family: 'General Sans', 'Inter', sans-serif; font-weight: 300; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -0.03em; color: inherit; margin: 0 0 clamp(40px, 5vw, 64px); }
.jy-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.jy-item + .jy-item { margin-top: clamp(56px, 7vw, 96px); }
.jy-photo { --split-img: none; position: relative; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: 24px; color: #FFFFFF; text-align: center; background: var(--teal) var(--split-img) center / cover no-repeat; }
.jy-right { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.jy-right .jy-photo { order: 2; aspect-ratio: 1 / 1; }
.jy-wide { grid-template-columns: minmax(0, 1fr); }
.jy-wide .jy-photo { order: 2; aspect-ratio: 16 / 9; }
.jy-text { border-top: 1px solid currentColor; padding-top: 16px; }
.jy-tone-c .jy-text { border-top-color: rgba(255, 255, 255, 0.5); }
/* a milestone that shares the year above it has no line or year of its own, as on McKinsey's page */
.jy-text.jy-same-year { border-top: 0; padding-top: 0; }
.jy-year { font-family: 'General Sans', 'Inter', sans-serif; font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; color: inherit; margin: 0 0 10px; }
.jy-text h3 { font-family: 'General Sans', 'Inter', sans-serif; font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; color: inherit; margin: 0 0 14px; }
.jy-text p:not(.jy-year) { font-size: 1.0625rem; line-height: 1.65; color: #33414A; max-width: 60ch; margin: 0; }
.jy-tone-c .jy-text p:not(.jy-year) { color: rgba(255, 255, 255, 0.85); }
.jy-text p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jy-text p a:hover { text-decoration-thickness: 2px; }
.jy-text p a:focus-visible { outline: 3px solid #5A46C8; outline-offset: 2px; border-radius: 2px; }
.jy-end { text-align: left; padding: clamp(56px, 7vw, 96px) 0; }
/* "One name" shows a portrait version of the email signature banner instead of a photo */
.jy-brand { padding: 0; background-color: #133035; }
/* phones, as McKinsey's history page looks on an iPhone: the photo and text stay side by side in two
   narrow columns, swapping sides, and the stage menu becomes a white card held at the foot of the screen */
@media (max-width: 900px) {
  .jy-grid { display: flex; flex-direction: column; gap: 0; }
  .jy-stages { order: 1; }
  .jy-nav { order: 2; align-self: stretch; position: sticky; top: auto; bottom: 12px; z-index: 5; margin: 0 0 16px; padding: 14px 16px; background: #FFFFFF; border-radius: 12px; box-shadow: 0 6px 24px rgba(19, 48, 53, 0.14); }
  .jy-nav ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
  .jy-nav a { font-size: 0.95rem; }
  .jy.jy-dark .jy-nav a { color: #9AA7A6; }
  .jy.jy-dark .jy-nav a[aria-current="true"], .jy.jy-dark .jy-nav a:hover { color: var(--text); }
  .jy-item, .jy-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .jy-item + .jy-item { margin-top: 48px; }
  .jy-photo { padding: 12px; }
  .jy-photo .ph-media-name { font-size: 1rem; }
  .jy-photo .ph-media-note { display: none; }
  .jy-year { font-size: 1.5rem; margin-bottom: 8px; }
  .jy-text { padding-top: 12px; }
  .jy-text h3 { font-size: 1.25rem; margin-bottom: 10px; }
  .jy-text p:not(.jy-year) { font-size: 0.95rem; line-height: 1.5; }
  .jy-stage-name { margin-bottom: 32px; }
}
@media (max-width: 560px) {
  .jy-grid { padding: 0 16px; }
}

/* =========================================
   /mission: WHY WE WERE FOUNDED AS A ROW
   The text sits beside a photo, like the rows on the audience pages,
   with room above and below.
   ========================================= */
.split.mission-row { margin-top: clamp(72px, 9vw, 128px); margin-bottom: clamp(72px, 9vw, 128px); }
.split-text p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.split-text p a:hover { text-decoration-thickness: 2px; }
.split-text p a:focus-visible { outline: 3px solid #754DD0; outline-offset: 2px; border-radius: 2px; }

/* =========================================
   PHOTO TILES (/mission, the three rotating tiles)
   A tile takes a photo with the class has-img and style="--tile-img: url('...')".
   The tile's own colour washes over the photo, so the white text still reads
   and each tile keeps the colour of the page it links to. --tile-wash sets how strong it is.
   ========================================= */
.mc-tile { --tile-img: none; }
/* how strong the tile colour is over the photo, as chosen in the photo picker */
:root { --tile-wash: 23%; }
.mc-tile.has-img {
  background-image:
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.14) 0%, transparent 45%),
    linear-gradient(color-mix(in srgb, var(--tile) var(--tile-wash, 72%), transparent), color-mix(in srgb, var(--tile) var(--tile-wash, 72%), transparent)),
    var(--tile-img);
  background-size: cover;
  background-position: center;
}

/* =========================================
   SPLIT BANDS ON PHONES: EVERY ROW IS PHOTO, THEN ITS TEXT
   On phones the page reads banner, intro, photo, text, photo, text. Each
   photo sits closer to its own text below it than to the row above, and
   the intro leaves room before the first photo.
   ========================================= */
@media (max-width: 900px) {
  .split .split-media { order: -1; }
  .split-text, .split-rev .split-text { padding: 24px 24px 28px; }
  .split + .split { margin-top: 40px; }
  .aud-intro { padding-bottom: 32px; }
}
@media (max-width: 560px) {
  .split-text, .split-rev .split-text { padding: 20px 16px 24px; }
}

/* =========================================
   CLEAN ROWS (Employees, Managers, HR, and "Why we were founded" on /mission)
   After EY and Apple: each row sits inside the page width beside a photo,
   with even space between rows. The text is dark grey at reading size,
   opens with a bold line and is always left aligned. On desktop the photo is
   as tall as its text, so the text starts at the photo's top edge and ends at
   its bottom edge. On phones each row is its photo at 4:3, then its text.
   ========================================= */
.split { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; min-height: 0; }
.split + .split { margin-top: clamp(72px, 9vw, 128px); }
.aud-intro { padding-bottom: clamp(48px, 6vw, 96px); }
.aud-cta { margin-top: clamp(40px, 5vw, 72px); }
.split-text, .split-rev .split-text { display: block; padding: 0; text-align: left; }
.split-media, .split-rev .split-media { aspect-ratio: 1 / 1; min-height: 0; padding: 0; }
.split-text p { font-size: 1.0625rem; line-height: 1.65; color: #33414A; max-width: 62ch; }
.split-text p strong { font-weight: 600; color: var(--text); }
@media (min-width: 901px) {
  .split { align-items: stretch; }
  .split > .split-media { aspect-ratio: auto; }   /* only the photo in a text row, not other photo boxes such as the homepage Pilots photo */
  .split-text p { text-box: trim-both cap alphabetic; }
}
@media (max-width: 900px) {
  .split, .split-rev { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .split-media, .split-rev .split-media { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .split, .split-rev { padding: 0 16px; }
  .split-text p { font-size: 1rem; }
}

/* =========================================
   TEXT SIZES (chosen in the photo picker's Text sizes panel)
   Bigger text above phone width: banner line 19px, intro 29px, small
   headings 29px and body text 22px. Phones keep their own sizes, and so
   do the homepage hero and the forms.
   ========================================= */
@media (min-width: 561px) {
  #main .pb-sub { font-size: 1.1875rem; }
  #main .aud-intro p, #main .pf-lead { font-size: 1.8125rem; }
  #main :is(h3, h4):not(.pilot-form-card *) { font-size: 1.8125rem; }
  #main p:not(.pb-sub, .pf-lead, .jy-year, .stat-source, .aud-intro p, .hero-text *, .pilot-form-card *) { font-size: 1.375rem; }
}

/* =========================================
   /about: CARDS TO THE OTHER ABOUT US PAGES (after McKinsey's "We built that!")
   Three staggered columns on desktop, two on a tablet, one on a phone. Each photo has its bottom
   left corner cut away, and each card's figure comes from the page it links to (the team figure is
   Matthew's count of 12, as of 18 Oct 2026).
   ========================================= */
.ab-more { padding: clamp(24px, 3vw, 40px) 0 clamp(72px, 9vw, 128px); }
.ab-more h2 { text-align: center; margin: 0 0 clamp(40px, 5vw, 64px); }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
.ab-card { display: block; color: var(--text); text-decoration: none; }
.ab-photo { display: block; aspect-ratio: 6 / 5; background: #133035 var(--ab-img) center / cover no-repeat; clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 79%); }
.ab-card:focus-visible { outline: 3px solid #754DD0; outline-offset: 4px; }
/* every card ends in a visible link line, so it reads as clickable on a phone too; it underlines on hover */
.ab-cta { display: inline-block; margin-top: 16px; font: 600 1rem/1.3 'Inter', sans-serif; color: #0F766E; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 0.2s; }
.ab-card:is(:hover, :focus-visible) .ab-cta { text-decoration-color: currentColor; }
.ab-text { display: block; margin-top: 20px; font-family: 'General Sans', 'Inter', sans-serif; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.35; color: var(--text); text-wrap: pretty; }
.ab-fig { display: block; margin: 8px 0 6px; font-family: 'Neco', Georgia, serif; font-weight: 700; font-size: clamp(2.75rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.02em; color: #133035; }
@media (min-width: 561px) {
  .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 72px; }
  .ab-card:nth-child(2n) { margin-top: 56px; }
}
@media (min-width: 901px) {
  .ab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-card:nth-child(2n) { margin-top: 0; }
  .ab-card:nth-child(3n+2) { margin-top: 72px; }
  .ab-card:nth-child(3n) { margin-top: 144px; }
}

/* =========================================
   AUDIENCE BUTTON (.aud-btn)
   The foot of For Employees, For Managers and For HR: one button, in the style of the pilots button,
   in the page's own colour (--page), filled with a pale tint of it at rest and with a soft shadow.
   It holds the standard mark, the page's line, "Get in touch with our team" and a small arrow, and
   opens the contact form on the homepage. On hover it lifts and fills with the page's colour,
   deepening to the right: the text turns white, the mark swaps to the reversed one and the arrow
   circle turns white. When pressed it sinks back.
   ========================================= */
body.page-employees { --page-deep: #133035; --page-tint: #E6F3F1; }
body.page-managers { --page-deep: #3B2160; --page-tint: #F1EBF8; }
body.page-hr { --page-deep: #2D512E; --page-tint: #EEF4E4; }
.aud-cta .container { display: flex; justify-content: center; }
.aud-btn {
  display: inline-grid; grid-template-columns: 52px minmax(0, 1fr) 36px; align-items: center; gap: 18px;
  max-width: 100%; padding: 16px 20px; border: 2px solid var(--page); border-radius: 16px;
  background: var(--page-tint, #FFFFFF); color: var(--page); text-decoration: none;
  box-shadow: 0 10px 24px rgba(19, 48, 53, 0.2), 0 2px 6px rgba(19, 48, 53, 0.1);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.aud-btn:hover {
  background: linear-gradient(90deg, var(--page) 0%, var(--page-deep, var(--page)) 100%); color: #FFFFFF;
  transform: translateY(-3px); box-shadow: 0 16px 32px rgba(19, 48, 53, 0.3), 0 4px 10px rgba(19, 48, 53, 0.15);
}
.aud-btn:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(19, 48, 53, 0.22); }
.aud-btn:focus-visible { outline: 3px solid var(--dark); outline-offset: 4px; }
.aud-btn-marks, .aud-btn-mark { display: block; width: 52px; height: 52px; }
.aud-btn-mark-hover, .aud-btn:hover .aud-btn-mark-rest { display: none; }
.aud-btn:hover .aud-btn-mark-hover { display: block; }
.aud-btn-text { display: grid; gap: 2px; min-width: 0; }
.aud-btn .aud-btn-title {
  margin: 0; color: inherit; font-family: 'General Sans', 'Inter', sans-serif;
  font-weight: 650; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.15; letter-spacing: -0.01em;
}
.aud-btn-line { font-family: 'General Sans', 'Inter', sans-serif; font-weight: 600; font-size: 0.98rem; line-height: 1.3; color: var(--dark); }
.aud-btn:hover .aud-btn-line { color: rgba(255, 255, 255, 0.9); }
.aud-btn-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--page); color: #FFFFFF; transition: transform 0.15s, background 0.2s, color 0.2s; }
.aud-btn-go svg { width: 16px; height: 16px; }
.aud-btn:hover .aud-btn-go { background: #FFFFFF; color: var(--page); transform: translateX(4px); }
@media (max-width: 640px) {
  .aud-btn { grid-template-columns: 40px minmax(0, 1fr) 30px; gap: 12px; padding: 12px 14px 12px 16px; }
  .aud-btn-marks, .aud-btn-mark { width: 40px; height: 40px; }
  .aud-btn-go { width: 30px; height: 30px; }
  .aud-btn-go svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .aud-btn, .aud-btn-go { transition: none; }
  .aud-btn:hover, .aud-btn:active, .aud-btn:hover .aud-btn-go { transform: none; }
}

/* =========================================
   HOMEPAGE CARDS: four rotating cards like the tiles on /mission (carousel.js), each with the banner
   photo of the page it links to, in that card's own colour
   ========================================= */
.mc-tile.tile-mission { --tile: var(--teal); }
.mc-tile.tile-about { --tile: var(--purple); }
.mc-tile.tile-pilots { --tile: #133035; }
.mc-tile.tile-journey { --tile: var(--hr-green); }
.home-cards[data-current="1"] .mc-dots button[aria-current="true"] { background-color: var(--purple); }
.home-cards[data-current="2"] .mc-dots button[aria-current="true"] { background-color: #133035; }
.home-cards[data-current="3"] .mc-dots button[aria-current="true"] { background-color: var(--hr-green); }