:root {
  --charcoal: #2C2C2A;
  --grey: #5F5E5A;
  --light-grey: #B4B2A9;
  --off-white: #F1EFE8;
  --white: #FFFFFF;
  --accent: #0C447C;
  /* Content spans close to the full window on a 13" laptop (~1440px wide),
     leaving only the .wrap side padding as a margin, so the nav, footer and
     page content hug the left/right edges. */
  --max-width: 1600px;
  /* total height of the hero area on every page, so section borders line up */
  --hero-block: 640px;
  /* banner pages (Team, Advisory Board, News) sit 100px shorter — the banner
     stays put and only the space below the heading is reduced */
  --hero-block-banner: 490px;
  /* distance from the nav to the top of the eyebrow — identical on every page */
  --hero-text-top: 245px;
  /* banners scale with the window but are capped so the heading can still sit
     at --hero-text-top on wide screens */
  --banner-h: clamp(110px, 17vw, 230px);
  /* the news banner is the deepest one, but it can never exceed --hero-text-top
     or its heading would be pushed below the headings on the other pages */
  --banner-h-news: clamp(160px, 22vw, 305px);
  /* how far a side image is pulled up so its centre matches the middle of the
     headline block (depends on how tall that block is — see .hero--subcopy) */
  --hero-img-offset: -143px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--charcoal);
  background: var(--off-white);
  line-height: 1.6;
  font-weight: 300;
}

a {
  color: inherit;
  text-decoration: none;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 68px;
  position: relative;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  background: var(--off-white);
  border-bottom: 1px solid var(--light-grey);
  z-index: 100;
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  /* nav keeps a slightly wider gutter than page content; brought out 10px */
  padding-left: 38px;
  padding-right: 38px;
}

.nav-logo img { height: 24px; width: auto; }

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--grey);
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
}

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Animate to an X when open. */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-bleed banner image, sits above the hero text and spans the whole viewport */
.hero-banner {
  display: block;
  width: 100%;
  /* scales with the window, but capped so it never pushes the heading too far down */
  height: var(--banner-h);
  object-fit: cover;
  /* anchored to the bottom, so any cropping happens off the top edge */
  object-position: center bottom;
}

/* Hero
   Every hero occupies the same total height (--hero-block), so the border line
   at the top of the next section lands in the same place on every page.
   On banner pages the banner and the text area together add up to that height,
   so the banner can still scale with the window without moving the border. */
.hero {
  position: relative;
  min-height: var(--hero-block);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  /* the heading starts at exactly this offset on every page */
  padding: var(--hero-text-top) 0 40px;
}

.hero > .wrap {
  width: 100%;
}

/* On banner pages the banner already occupies part of that offset.
   Using a negative margin (rather than padding) lets the heading sit at
   --hero-text-top even when the banner is deeper than that, in which case
   the heading overlaps the bottom of the banner. */
.hero.has-banner {
  padding-top: 0;
  margin-top: calc(var(--hero-text-top) - var(--banner-h));
  min-height: calc(var(--hero-block-banner) - var(--hero-text-top));
}

.hero-banner--news {
  height: var(--banner-h-news);
  /* nudged up 10px so the top 10px is cropped; height/size is unchanged */
  margin-top: -10px;
}

.hero.has-banner--news {
  /* +10px cancels the banner's -10px nudge, so the heading stays level with
     the headings on the other pages while the banner top is still cropped. */
  margin-top: calc(var(--hero-text-top) - var(--banner-h-news) + 10px);
}

/* Pages with no imagery (Contact, article) keep their natural height */
.hero.hero--compact {
  min-height: 0;
  padding: 90px 0;
}

.hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.hero-bg {
  opacity: 0.55;
  flex-shrink: 0;
  /* 20% larger than the original 437px, applied on Home, Thesis and Contact */
  height: 524px;
  width: auto;
  max-width: 100%;
  pointer-events: none;
  /* pulls the image up so its centre lines up with the middle of the
     eyebrow + headline block, which now starts at a fixed offset */
  margin-top: var(--hero-img-offset);
}

/* Home and Thesis pull the image up with a negative offset (Contact instead
   centres its row), so they get an extra -43px to keep the enlarged image's
   centre level with the headline block. */
.hero:not(.hero--imgcentre) .hero-bg {
  margin-top: calc(var(--hero-img-offset) - 43px);
}

/* Home has an extra line of sub-copy, so its headline block is taller and the
   image needs pulling up less to stay centred on it. */
.hero--subcopy {
  --hero-img-offset: -102px;
}

.hero-content {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 620px;
}

.eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 20px;
}

h1 {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

h1 em, .accent-text {
  font-style: normal;
  color: var(--accent);
}

.hero p, .intro p {
  font-size: 18px;
  color: var(--grey);
  max-width: 620px;
}

/* Statement block: large lead text on the left, supporting paragraphs on the
   right. Sits inside .wrap, so it lines up with the nav margins. */
.statement {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 32px 72px;
  align-items: start;
}

.statement-lead h2 {
  margin-bottom: 0;
  line-height: 1.2;
}

.statement-body p {
  font-size: 18px;
  color: var(--grey);
  line-height: 1.65;
  margin-bottom: 22px;
}

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

@media (max-width: 860px) {
  .statement {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Contact: no eyebrow, so the headline is centred against the image.
   The image keeps its usual position; the row does the centring. */
.hero--imgcentre {
  --hero-img-offset: 0px;
  padding-top: 102px;
}

.hero--imgcentre .hero-row {
  align-items: center;
}

/* Contact image: raised 43px to match the image top on Home and Thesis, and
   shifted 50px left. Size is unchanged. */
.hero--imgcentre .hero-bg {
  margin-top: -43px;
  margin-right: 50px;
}

/* Thesis: the two statements are set in heading type */
.thesis-statement h2 {
  line-height: 1.25;
  margin-bottom: 32px;
}

.thesis-statement h2:last-child {
  margin-bottom: 0;
}

/* Section */
.section {
  padding: 90px 0;
  border-top: 1px solid var(--light-grey);
}

/* First section on Team, Advisory Board and News: no divider line, and the
   content sits 50px higher than a standard section. */
.section--noborder {
  border-top: none;
  padding-top: 40px;
}

/* Team and Advisory Board grids sit a further 50px higher than the
   News list, which keeps the standard --noborder spacing. */
.section--raised {
  padding-top: 0;
  margin-top: -60px;
}

.section-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--light-grey);
  font-weight: 500;
  margin-bottom: 14px;
}

h2 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 40px;
}

/* Cards / grids */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.card {
  padding: 28px 0;
  border-top: 1px solid var(--light-grey);
}

.card h3 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 10px;
}

.card p {
  font-size: 15px;
  color: var(--grey);
}

/* Team grid */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px 32px;
}

/* Collapsible bio */
.bio-toggle {
  margin-top: 10px;
}

.bio-toggle summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* hide the browser's default disclosure triangle */
.bio-toggle summary::-webkit-details-marker { display: none; }
.bio-toggle summary::marker { content: ""; }

/* our own chevron, which rotates when open */
.bio-toggle summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}

.bio-toggle[open] summary::after {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.bio-toggle summary:hover {
  opacity: 0.75;
}

.bio-text {
  padding-top: 12px;
}

.bio-text p {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.6;
  margin-bottom: 12px;
}

.bio-text p:last-child {
  margin-bottom: 0;
}

/* Exactly four per row: each card is a quarter of the row minus its share of
   the three 32px column gaps. Portrait sizing (square image) is unchanged. */
.team-member {
  flex: 0 0 calc((100% - 3 * 32px) / 4);
  max-width: calc((100% - 3 * 32px) / 4);
}

.team-member img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--off-white);
  border-radius: 4px;
  margin-bottom: 16px;
}

.team-member h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 2px;
}

.team-member .role {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 10px;
}

.team-member p.bio {
  font-size: 14px;
  color: var(--grey);
}

/* Numbered list (legacy, kept for compatibility) */
.numbered-list {
  list-style: none;
}

.numbered-list li {
  display: flex;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--light-grey);
  align-items: baseline;
}

.numbered-list .num {
  font-size: 14px;
  color: var(--light-grey);
  min-width: 28px;
}

.numbered-list .name {
  font-size: 17px;
  font-weight: 500;
  min-width: 220px;
}

.numbered-list .field {
  font-size: 15px;
  color: var(--grey);
}


/* News filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  /* Filter buttons sit just above the upper edge of the first row's logos. */
  margin-top: 30px;
  margin-bottom: 12px;
}

.filter-btn {
  padding: 8px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--grey);
  background: transparent;
  border: 1px solid var(--light-grey);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.filter-select {
  padding: 8px 34px 8px 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--grey);
  background-color: var(--off-white);
  border: 1px solid var(--light-grey);
  border-radius: 100px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F5E5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.filter-select:disabled {
  color: var(--light-grey);
  cursor: not-allowed;
  background: transparent;
}

/* News */
.news-item {
  padding: 28px 0;
  border-top: 1px solid var(--light-grey);
}

.news-item-inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.news-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--off-white);
  padding: 8px;
  flex-shrink: 0;
}

.news-meta {
  font-size: 13px;
  color: var(--light-grey);
  margin-bottom: 8px;
}

.news-item h3 {
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 8px;
}

.news-item p {
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 10px;
}

/* News page grid (press releases) */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}

@media (max-width: 1000px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .team-member {
    flex-basis: calc((100% - 2 * 32px) / 3);
    max-width: calc((100% - 2 * 32px) / 3);
  }
}

@media (max-width: 760px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .team-member {
    flex-basis: calc((100% - 32px) / 2);
    max-width: calc((100% - 32px) / 2);
  }
}

@media (max-width: 520px) {
  .news-grid { grid-template-columns: 1fr; }
  .team-member {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  /* Raised close to the grid; nudged back down 20px for a little breathing room. */
  margin-top: 26px;
}

.page-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--grey);
  background: transparent;
  border: 1px solid var(--light-grey);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.page-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  cursor: default;
}

.page-btn.nav-btn {
  padding: 0 20px;
}

.news-card {
  display: block;
  text-align: left;
}

.news-card .news-logo-cover {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 5 / 2;
  object-fit: contain;
  object-position: center;
  background: var(--off-white);
  border-radius: 4px;
  padding: 18px;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.news-card .news-meta {
  margin-bottom: 6px;
}

.news-card h3 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 10px;
}

.read-more {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
}

@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info p {
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 20px;
}

.contact-info strong {
  display: block;
  color: var(--charcoal);
  font-weight: 500;
  margin-bottom: 4px;
}

.contact-info a {
  color: var(--accent);
}

.contact-info a:hover {
  text-decoration: underline;
}

form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

label {
  font-size: 13px;
  color: var(--grey);
  margin-bottom: 6px;
  display: block;
}

input, textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  background: var(--white);
  color: var(--charcoal);
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  align-self: flex-start;
  padding: 14px 28px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

button:hover { opacity: 0.88; }

/* Footer */
.footer {
  border-top: 1px solid var(--light-grey);
  padding: 32px 0 20px;
  background: var(--off-white);
}

.footer .wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
  /* footer gutter matches the main page-content margin (68px), not the nav */
  padding-left: 68px;
  padding-right: 68px;
}

/* The three link columns fill the space to the right of the logo and are
   distributed with space-evenly, so the gaps are equal: logo → first column,
   column → column, and last column → right edge are all the same. */
.footer-cols {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  gap: 0;
}

.footer-logo img { height: 88px; }

.footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--light-grey);
  font-weight: 500;
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 10px; }

.footer-col a {
  font-size: 14px;
  color: var(--grey);
}

.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--light-grey);
  font-size: 13px;
  color: var(--grey);
}

/* Responsive
   Tablet: nav collapses to a dropdown, hero stacks image under text, grids
   reflow. Everything below 760px is treated as "mobile". */
@media (max-width: 760px) {
  /* --- Nav: hamburger + dropdown --- */
  .nav-toggle { display: flex; align-self: center; }
  .nav .wrap { padding-left: 20px; padding-right: 20px; }
  .nav-logo img { height: 22px; }

  .nav-links {
    /* collapsed by default; opened by JS toggling .is-open */
    position: absolute;
    top: 60px;               /* height of the nav bar */
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--off-white);
    border-bottom: 1px solid var(--light-grey);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .nav-links.is-open { max-height: 80vh; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 15px 20px;
    font-size: 16px;
    border-top: 1px solid rgba(180, 178, 169, 0.35);
  }
  .nav-links li:first-child a { border-top: none; }

  /* --- Global content gutters shrink on small screens --- */
  .wrap { padding-left: 20px; padding-right: 20px; }
  .footer .wrap { padding-left: 20px; padding-right: 20px; }

  /* --- Hero: stack text then image, drop the fixed-height desktop system --- */
  :root {
    --hero-block: auto;
    --hero-text-top: 0px;
    --hero-img-offset: 0px;
    --banner-h: clamp(90px, 24vw, 150px);
    --banner-h-news: clamp(100px, 26vw, 165px);
  }
  .hero {
    min-height: 0;
    padding: 32px 0 32px;
  }
  .hero-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  /* On desktop .hero-content has flex:1 1 340px, which on the mobile column
     layout would reserve 340px of height and leave a big gap under the short
     heading. Reset it so the text block is only as tall as its content, which
     pulls the image (and the rest of the page) up close to the heading. */
  .hero-content { flex: 0 0 auto; max-width: 100%; }
  /* image sits below the text, left-aligned, sized to the column, no negative
     offsets (those were desktop-only centring tricks) */
  .hero-bg,
  .hero:not(.hero--imgcentre) .hero-bg,
  .hero--imgcentre .hero-bg {
    height: auto;
    width: 100%;
    max-width: 320px;
    margin: 0;
    align-self: center;
  }
  .hero--imgcentre { padding-top: 32px; }
  .hero--imgcentre .hero-row { align-items: flex-start; }

  /* Banner pages: let the banner + content flow naturally (no negative pull,
     and no reserved min-height — that desktop system left a big gap under the
     heading on mobile). */
  .hero.has-banner,
  .hero.has-banner--news {
    margin-top: 0;
    padding-top: 32px;
    min-height: 0;
  }
  .hero-banner--news { margin-top: 0; }

  h1 { font-size: 32px; }
  h2 { font-size: 24px; }

  /* --- Statement / two-column intros stack --- */
  .statement { grid-template-columns: 1fr; gap: 20px; }

  /* --- Footer: logo centered above the centered columns --- */
  .footer .wrap { flex-direction: column; align-items: center; gap: 28px; }
  .footer-logo { align-self: center; }
  .footer-logo img { height: 56px; }
  .footer-cols {
    flex: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
  }

  /* --- Contact: form + info stack --- */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Phone: single-column grids */
@media (max-width: 520px) {
  h1 { font-size: 28px; }
  .section { padding: 60px 0; }
  .hero-bg,
  .hero:not(.hero--imgcentre) .hero-bg,
  .hero--imgcentre .hero-bg { max-width: 260px; }
}