/* Muallemi — the site stylesheet. The whole cascade; nothing else is loaded.
   Order: reset, tokens, base type, layout primitives, chrome, page sections. */

/* ---- 0. Reset ----------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}
ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}
img,
picture,
svg {
  max-width: 100%;
  display: block;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
table {
  border-collapse: collapse;
}

/* One focus ring for the whole site. The brass reads on both the paper and the
   ink grounds, so keyboard users get the same affordance everywhere. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Ink is the voice of the page. */
  --ink: #0f1b2d;
  --ink-2: #263349;
  --ink-3: #55617a;
  --ink-4: #7c869b;

  /* Brass is the only accent. --brass for ink grounds, --brass-deep for paper (AA). */
  --brass: #c0873f;
  --brass-deep: #8a5a17;
  --brass-wash: #f6f0e6;

  --danger: #a1261d;
  --danger-wash: #fbf1f0;

  --rule: #dcdfe6;
  --rule-soft: #ebedf1;
  --rule-ink: rgba(255, 255, 255, 0.16);

  --paper: #ffffff;
  --paper-2: #f6f7f9;
  --paper-3: #eceef2;

  /* Newsreader for the page voice, Plex for everything else. */
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad: 84px;
  --pad-lg: 104px;
  --gutter: 32px;
  --measure: 1240px;

  /* The fixed header's height. Three rules have to agree on it exactly. */
  --header-h: 68px;

  /* Near-square. The 24px pill radii were the most legible signature of the
     template this site was built from. */
  --radius: 2px;
  --radius-lg: 3px;

  /* Colour only, and quickly. Movement is reserved for the reveal on scroll. */
  --t: 120ms ease;

  /* Back-compat aliases: the section rules further down still reference the
     in-* token names, so both halves of this file share one palette. */
  --in-ink: var(--ink);
  --in-ink-2: var(--ink-2);
  --in-ink-3: var(--ink-3);
  --in-ink-4: var(--ink-4);
  --in-accent: var(--brass-deep);
  --in-accent-deep: var(--brass-deep);
  --in-rule: var(--rule);
  --in-rule-soft: var(--rule-soft);
  --in-paper: var(--paper);
  --in-paper-2: var(--paper-2);
  --in-paper-3: var(--paper-3);
  --in-serif: var(--serif);
  --in-sans: var(--sans);
  --in-pad: var(--pad);
  --in-pad-lg: var(--pad-lg);
}

/* Arabic runs on one family; Newsreader has no Arabic. Hierarchy from weight and size. */
[dir="rtl"] {
  --serif: "IBM Plex Sans Arabic", "Alexandria", sans-serif;
  --sans: "IBM Plex Sans Arabic", "Alexandria", sans-serif;
}

/* ---- 2. Base typography ------------------------------------------------- */

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ink);
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 600;
  color: var(--ink);
}

/* Links in running prose. Brass underline,
.s-our-story__text a,
.s-faq__description a,
.in-section__lede a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t);
}
.s-our-story__text a:hover,
.s-faq__description a:hover,
.in-section__lede a:hover {
  color: var(--brass-deep);
}

/* ---- 3. Layout primitives (replaces Materialize) ------------------------ */

.b-wrapper,
.content {
  width: 100%;
}

.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.row {
  display: block;
  margin: 0;
}

.col,
.s12 {
  width: 100%;
}

section {
  position: relative;
}

/* ---- 4. Header ---------------------------------------------------------- */

.top-menu {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--gutter);
  height: var(--header-h);
  background: var(--paper);
  border-block-end: 1px solid var(--rule);
  transition: box-shadow var(--t);
}
.top-menu.not-top {
  box-shadow: 0 1px 0 rgba(15, 27, 45, 0.06);
}

.top-menu .nav-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  min-width: 0;
}

.brand-logo {
  display: flex;
  align-items: center;
  flex: none;
}
.brand-logo img {
  height: 30px;
  width: auto;
}

/* Primary menu */
.anqors-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.desctop-menu .anqors-wrap > li {
  position: relative;
}
.desctop-menu .anqors-wrap > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 22px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--t);
}
.desctop-menu .anqors-wrap > li > a:hover {
  color: var(--ink);
}

/* Current page in brass. A real underline: text-decoration draws below the text
   without changing the anchor's box, so the item stays in line with its siblings. */
.desctop-menu .anqors-wrap > li.current-menu-item > a,
.desctop-menu .anqors-wrap > li.current_page_item > a,
.desctop-menu .anqors-wrap > li.current-menu-ancestor > a {
  color: var(--brass-deep);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* Parent items get a caret drawn in CSS — the theme used a purple chevron
   image that had to be recoloured on every state. */
.desctop-menu .menu-item-has-children > a::before {
  content: "";
  order: 2;
  width: 6px;
  height: 6px;
  margin-block-start: -3px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}

.desctop-menu .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -20px;
  min-width: 232px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(15, 27, 45, 0.1);
}
.desctop-menu .sub-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--ink-2);
  transition: background var(--t), color var(--t);
}
.desctop-menu .sub-menu a:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.desctop-menu .sub-menu .current-menu-item > a {
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--brass);
}
[dir="rtl"] .desctop-menu .sub-menu .current-menu-item > a {
  box-shadow: inset -2px 0 0 var(--brass);
}

.auth-wrapper {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: none;
}

.gv-lang-toggle {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  transition: color var(--t);
}
.gv-lang-toggle:hover {
  color: var(--ink);
}

/* Header CTA. Square, ink-filled, no lift and no glow. */
.top-menu__signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: background var(--t), border-color var(--t);
}
.top-menu__signup:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}
.top-menu__signup span {
  display: block;
}

/* Mobile bar and drawer */
.mobile-menu {
  display: none;
}
.mobile-menu .nav-wrapper {
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 12px;
}
.gv-mobile-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gv-mobile-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius);
}
.sidenav-trigger {
  display: flex;
  align-items: center;
  padding: 6px;
}
.sidenav-trigger img {
  width: 22px;
}

.sidenav {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 300;
  width: min(340px, 86vw);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  transform: translateX(-100%);
  overflow-y: auto;
}
[dir="rtl"] .sidenav {
  transform: translateX(100%);
}
/* Phone numbers are LTR runs; left to the paragraph they read back to front. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .in-contact__details dd {
  unicode-bidi: isolate;
}
[dir="rtl"] a[href^="tel:"] {
  direction: ltr;
}
.gv-sidenav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding-inline: 24px;
  border-block-end: 1px solid var(--rule);
}
.gv-sidenav-logo img {
  height: 28px;
}
/* The close control was an 18px icon with no padding — an 18px tap target on a
   touch-only surface. The icon stays the same size; the hit area does not. */
.sidenav-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -11px;
}
.sidenav-cross img {
  width: 18px;
}
.sidenav-content {
  padding: 24px;
}
.sidenav-content .anqors-wrap,
.sidenav-content .top-menu__collapse {
  display: block;
  gap: 0;
}
.sidenav-content .top-menu__collapse > li > a {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-block-end: 1px solid var(--rule-soft);
}
/* Parents are toggles, not links; without a caret nothing said so. */
.sidenav-content .top-menu__collapse > li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sidenav-content .top-menu__collapse > li.menu-item-has-children > a::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55;
  transition: transform 0.18s ease;
}
.sidenav-content .top-menu__collapse > li.menu-item-has-children.active-menu > a::after {
  transform: rotate(-135deg) translate(-3px, -3px);
  opacity: 1;
}
.sidenav-content .sub-menu {
  display: none;
  padding: 4px 0 12px;
  margin: 0;
  list-style: none;
}
.sidenav-content .sub-menu a {
  display: block;
  padding: 9px 0 9px 16px;
  font-size: 15px;
  color: var(--ink-3);
}
[dir="rtl"] .sidenav-content .sub-menu a {
  padding: 9px 16px 9px 0;
}
.sidenav-content .auth-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-block-start: 28px;
}
.sidenav-content .top-menu__signup {
  width: 100%;
  height: 46px;
}
/* The shared toggle carries side padding for the desktop bar; in the drawer that
   indented it past every other row. */
.sidenav-content .gv-lang-toggle {
  padding-inline: 0;
  align-self: flex-start;
}
.sidenav-overlay {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(15, 27, 45, 0.5);
}

@media (max-width: 1024px) {
  .desctop-menu {
    display: none;
  }
  .mobile-menu {
    display: flex;
  }
}

/* ---- 1. Retune the inherited theme -------------------------------------- */

/* Body copy was Alexandria 15px/28px — small and airy at once, which reads as
   thin. Inter at 17px/1.6 carries the same column with authority. */
body,
p,
li,
.s-our-story__text,
.s-feature__description,
.s-faq__description,
.s-open-position__description,
.gv-card__text {
  font-family: var(--in-sans);
}
[dir="ltr"] .s-faq__description,
[dir="ltr"] .s-feature__description,
[dir="ltr"] .s-open-position__description,
[dir="ltr"] .s-our-story__description p,
[dir="ltr"] .s-header__text {
  font-size: 17px;
  line-height: 1.62;
}
.gv-card__text {
  font-size: 16px;
  line-height: 1.6;
}

/* Headlines to the serif. This is the single loudest institutional signal
   available and it costs nothing but a font request. */
h1,
h2,
h3,
.s-header__title,
.s-faq__title,
.s-feature__title,
.s-our-story__title,
.s-open-position__title,
.s-widget__title,
.gv-card__title,
.gv-404__title{
  font-family: var(--in-serif);
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--in-ink);
}
.s-header__title,
.s-faq__title,
.s-feature__title,
.s-our-story__title,
.s-open-position__title {
  font-weight: 600;
}

/* Serif is for page and section voice only; anything sub-heading scale is sans. */
.gv-card__title,
.in-initiative__name,
.in-person__name,
.in-pubs__title,
.in-milestone__title,
.in-reach__region,
.s-our-story__title--small,
.s-feature__block-item-title,
.gv-accordion__title,
.s-widget__title {
  font-family: var(--in-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* The story band is dark by default; the blanket ink colour must not reach it. */
.s-our-story .s-our-story__title,
.s-our-story .s-our-story__title--small,
.s-our-story .s-our-story__pretitle {
  color: #fff;
}
.s-our-story.gv-light .s-our-story__title,
.s-our-story.gv-lavender .s-our-story__title,
.s-our-story.gv-light .s-our-story__title--small,
.s-our-story.gv-lavender .s-our-story__title--small {
  color: var(--in-ink);
}
.s-our-story.gv-light .s-our-story__pretitle,
.s-our-story.gv-lavender .s-our-story__pretitle {
  color: var(--in-ink-3);
}

/* custom.css set a global purple on `a`. Anchors inherit surrounding text colour;
   only things that read as links take the accent. */
a {
  color: inherit;
}
.in-link,
.in-person__link,
.in-pubs__arrow,
.gv-card__link,
.s-feature__block-item-link {
  color: var(--in-accent);
}
.in-link:hover,
.in-person__link:hover,
.gv-card__link:hover {
  color: var(--in-accent-deep);
}
.gv-step__dot,
.gv-404__code,
.gv-card__num {
  color: var(--in-accent);
}
/* Geometry: 24px cards and 12px buttons are product-UI radii. */
.gv-card,
.s-widget__logo-wrap,
.gv-accordion__item {
  border-radius: 3px;
}
.s-header__started-btn,
.gv-btn-ghost,
.gv-badge {
  border-radius: 2px;
}

/* Hairlines, not float shadows. */
.gv-card {
  box-shadow: none;
  border: 1px solid var(--in-rule);
  background: var(--in-paper);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.gv-card:hover {
  border-color: var(--in-ink-3);
  background: var(--in-paper);
}
/* ---- Buttons ---- Two weights of one object. */
.s-header__btn-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.s-header__started-btn {
  box-shadow: none;
  background: var(--in-ink);
  color: var(--in-paper);
  border: 1px solid var(--in-ink);
  border-radius: var(--radius);
}
.s-header__started-btn span {
  color: inherit;
}
.in-hero .s-header__started-btn {
  border-color: #fff;
}
.s-header__started-btn:hover {
  background: var(--in-accent-deep);
}
/* Primary and secondary must be the same object at two weights. They were 58px
   and 74px tall with different type sizes. */
.s-header__started-btn,
.gv-btn-ghost,
.s-header__btn-wrap .s-header__started-btn,
.s-header__btn-wrap .gv-btn-ghost {
  height: 48px;
  min-height: 0;
  line-height: 46px;
  padding: 0 26px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* The circular arrow badge is what forced the button to 58px against an explicit 48px. */
.s-header__started-btn .more-wrap {
  display: none;
}
.gv-btn-ghost {
  border: 1px solid var(--in-rule);
  border-radius: var(--radius);
  color: var(--in-ink);
  background: transparent;
}
/* Ghost hover: background and colour must be set together or the text goes invisible. */
.gv-btn-ghost:hover,
.gv-cta .gv-btn-ghost:hover {
  border-color: var(--in-ink);
  background: var(--in-paper-2);
  color: var(--in-ink);
}
.gv-btn-ghost:hover span,
.gv-cta .gv-btn-ghost:hover span {
  color: var(--in-ink);
}

/* Card interiors, denser. */
.gv-card {
  padding: 24px 22px;
}
/* Card icons dropped; the 01/02/03 index already carries the structure. */
.gv-card__icon {
  display: none;
}
.gv-card__title {
  font-size: 19px;
  line-height: 1.3;
}
/* A real grid, not centred flex-wrap, so a five-card set does not centre its last row. */
.gv-cards {
  display: grid;
  gap: 18px;
  align-items: stretch;
  justify-content: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gv-cols-2 .gv-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-cols-4 .gv-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gv-cards > .gv-card {
  width: auto;
  max-width: none;
  margin: 0;
}
@media (max-width: 1000px) {
  .gv-cards,
  .gv-cols-4 .gv-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .gv-cards,
  .gv-cols-2 .gv-cards,
  .gv-cols-4 .gv-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Checklist rows: plain ruled rows, not lavender pills. */
.gv-check-item,
.gv-checklist .gv-check-item,
.gv-checklist--light .gv-check-item {
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 0;
  padding: 7px 0;
  font-size: 15px;
  line-height: 1.45;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--in-rule-soft);
  border-radius: 0;
}
.gv-check-item span {
  color: var(--in-ink-2);
}
.gv-check-item:last-child {
  border-bottom: 0;
}
.gv-check-item img {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  flex: none;
}
.gv-checklist {
  margin-top: 12px;
}
/* Numbered cards: the counter becomes a rule-anchored index number rather than
   a filled purple dot. */
.gv-card__num {
  background: none;
  color: var(--in-accent);
  font-family: var(--in-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  width: auto;
  height: auto;
  margin-bottom: 10px;
  padding: 0;
}

/* ---- The three gradient blocks ---- All become flat ink, full width, square. */
.s-our-story.gv-accent {
  background-image: none;
  background-color: var(--in-ink);
}
/* Let a lone main block grow to a readable measure instead of a 361px column. */
.s-our-story__blocks-wrap > .s-our-story__block--main:only-child {
  flex: 1 1 auto;
  max-width: 760px;
}
.s-our-story__blocks-wrap > .s-our-story__block--main:only-child .s-our-story__title {
  max-width: 620px;
}
/* Paper, not ink. Explicit so the band is white regardless of ground alternation. */
.s-open-position.gv-cta {
  background: var(--paper);
  padding: 72px 0;
}
.s-open-position.gv-cta .s-open-position__content {
  background-image: none;
  background-color: transparent;
  border-radius: 0;
  margin: 0;
  padding: 0;
  text-align: start;
}
/* The theme centres the CTA title and description; with the panel left-aligned
   that left a centred headline sitting above a left-aligned button. */
.s-open-position.gv-cta .s-open-position__title {
  color: var(--in-ink);
  font-size: 32px;
  margin: 0 0 12px;
  text-align: start;
  max-width: 720px;
}
.s-open-position.gv-cta .s-open-position__description {
  color: var(--in-ink-3);
  margin: 0 0 26px;
  max-width: 560px;
  text-align: start;
}
.s-open-position.gv-cta .s-open-position__pretitle {
  color: var(--in-ink-3);
}
/* A ::before painted a radial white glow over the old gradient card; with the
   card gone it read as an unexplained lighter rectangle floating in the band. */
.s-open-position.gv-cta .s-open-position__content::before {
  content: none;
}
.s-open-position.gv-cta .s-header__btn-wrap {
  justify-content: flex-start;
}
/* No button overrides on paper — the base styles are already correct. */
.s-footer {
  background-image: none;
  background-color: var(--in-ink);
}

/* The logo-band kicker was still purple and centred while every other eyebrow on
   the site is an ink-grey small-caps label. */
.gv-logo-band .s-widget__title,
.s-widget.gv-logo-band .s-widget__title {
  color: var(--in-ink-3);
  text-align: center;
  margin-bottom: 26px;
}
/* The band carried the theme's full section padding for three small marks. */
.s-widget.gv-logo-band {
  padding: 52px 0;
}
.s-widget.gv-logo-band .s-widget__content {
  padding: 0;
}

/* One alignment per page; the theme centres .s-faq__title regardless of the section. */
.gv-cards-section:not(.gv-cards-centered) .s-faq__title,
.gv-cards-section:not(.gv-cards-centered) .s-faq__description {
  text-align: start;
  margin-inline: 0;
}
/* Section ledes were 20px in the theme's purple-grey; every other lede on the
   site is 17px ink-grey. */
.s-faq__description,
.s-feature__description {
  color: var(--in-ink-3);
  font-size: 17px;
  line-height: 1.62;
  max-width: 720px;
}

/* Decorative blobs and the sparkle. */
.s-our-story__bg-img,
.s-our-story__top-wrap {
  display: none !important;
}

/* Density. */
.s-faq,
.s-feature,
.gv-cards-section {
  padding-top: var(--in-pad) !important;
  padding-bottom: var(--in-pad) !important;
}
.s-our-story,
.s-open-position {
  padding-top: var(--in-pad-lg) !important;
  padding-bottom: var(--in-pad-lg) !important;
}

/* The impact band: lavender + 56px purple numerals read consumer-EdTech.
   Dark, tight and ink-on-light is the institutional register. */
.gv-stats-band {
  background: var(--in-ink);
  padding: 56px 0;
  border-block: none;
}
.gv-stats-band .gv-stats-label {
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 26px;
}
.gv-stats-band .gv-stat__number {
  font-family: var(--in-sans);
  font-size: 46px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.gv-stats-band .gv-stat__text {
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}
.gv-stats-band .gv-stats-grid {
  gap: 28px 40px;
  text-align: start;
}
.gv-stats-band .gv-stat {
  border-inline-start: 2px solid rgba(255, 255, 255, 0.22);
  padding-inline-start: 18px;
}

/* Eyebrows across the site: same small-caps rule everywhere. */
.in-eyebrow,
.gv-stats-label,
.s-feature__subtitle,
.s-our-story__pretitle,
.s-open-position__pretitle {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--in-ink-3);
}
.in-eyebrow {
  margin-bottom: 14px;
}
.in-eyebrow--light {
  color: rgba(255, 255, 255, 0.78);
}
/* Labels inside the dark story band were left at accent purple, which on ink is
   both low-contrast and the one place purple should not appear at label size. */
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-steps-label,
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-footnote {
  color: rgba(255, 255, 255, 0.68);
}
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-step__title {
  color: #fff;
}
/* The item text sets its own ink on a span, so a dark ground has to override the
   span and not the item. */
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-check-item span {
  color: rgba(255, 255, 255, 0.82);
}
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-check-item {
  border-bottom-color: var(--rule-ink);
}
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-check-item::before {
  border-color: var(--brass);
}
/* Outlined tag pills sit on the same grounds. */
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-badge {
  color: rgba(255, 255, 255, 0.82);
  border-color: var(--rule-ink);
}

/* Logo band — named institutions, not anonymous marks. */
.gv-logo-band .s-widget__title {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--in-ink-3);
}
/* The three marks have very different aspect ratios. Equal cell, fixed optical height. */
.s-widget__logos-wrap.in-logos--named {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
  gap: 32px;
  max-width: 900px;
  margin-inline: auto;
}
.s-widget__logos-wrap.in-logos--named .s-widget__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  border: 0;
  background: none;
  padding: 0;
  width: auto;
  height: auto;
}
/* Cap both axes and letterbox, or Ooredoo renders 238px against Qatar Foundation's 55px. */
.s-widget__logos-wrap.in-logos--named .s-widget__logo {
  height: 54px;
  /* .s-widget__logo caps every mark at 44px; the named strip sets its own box. */
  max-height: none;
  width: 100%;
  max-width: 132px;
  object-fit: contain;
  object-position: center;
}
.s-widget__logos-wrap.in-logos--named .in-logo__name {
  min-height: 2.6em;
}
.in-logo__name {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--in-ink-3);
  text-align: center;
  max-width: 240px;
}

/* ---- Site header ---- A solid institutional bar; transparent needed a scroll state
   that was not firing reliably. */
.top-menu.desctop-menu,
.top-menu.mobile-menu {
  height: 68px;
  /* Full-bleed bar, contents aligned to .container. max() holds 34px once the
     viewport is narrower than the measure. */
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2 + var(--gutter)));
  background: var(--in-paper);
  border-bottom: 1px solid var(--in-rule);
  box-shadow: none;
  align-items: center;
}
.top-menu .brand-logo img {
  height: 30px;
  width: auto;
}
/* common.css styles these as `.top-menu .anqors-wrap .menu-item a` and custom.css
   paints every `a` purple, so the override has to reach that depth to land. */
.top-menu .anqors-wrap .menu-item > a,
.top-menu .anqors-wrap .menu-item a {
  font-family: var(--in-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--in-ink-2);
  transition: color 0.15s ease;
}
.top-menu .anqors-wrap .menu-item > a:hover,
.top-menu .anqors-wrap .menu-item.current-menu-item > a,
.top-menu .anqors-wrap .menu-item.current-menu-ancestor > a {
  color: var(--in-accent);
}
  /* Underline is drawn with text-decoration above. The old padding-bottom made this
     item 49px against its siblings' 67px and align-items re-centred it 9px low. */
.gv-lang-toggle {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--in-ink-3);
  padding: 8px 14px;
  border-radius: 0;
}
.gv-lang-toggle:hover {
  color: var(--in-ink);
}
/* Header CTA: same vocabulary as every other primary button on the site —
   rectangular, ink, no glow — just smaller. */
.top-menu__signup,
.gv-mobile-cta {
  font-family: var(--in-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  height: 38px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--in-ink);
  color: #fff;
  border-radius: 2px;
  box-shadow: none;
  border: 0;
}
.top-menu__signup:hover,
.gv-mobile-cta:hover {
  background: var(--in-accent-deep);
  color: #fff;
}
.top-menu__signup span {
  color: #fff;
}
/* Dropdown: a document panel, not a floating pill. */
.top-menu .sub-menu {
  border-radius: 2px;
  border: 1px solid var(--in-rule);
  box-shadow: 0 10px 24px -12px rgba(16, 26, 46, 0.28);
  padding: 6px 0;
}
.top-menu .sub-menu li a {
  font-family: var(--in-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--in-ink-2);
  padding: 9px 18px;
  display: block;
}
.top-menu .sub-menu li a:hover {
  background: var(--in-paper-2);
  color: var(--in-accent);
}

/* ---- Mobile drawer ---- Scoped to #slide-out, which the .top-menu rules miss. */
.sidenav .sidenav-content .top-menu__collapse .menu-item > a {
  font-family: var(--in-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--in-ink);
}
.sidenav .sidenav-content .top-menu__collapse .menu-item.current-menu-item > a,
.sidenav .sidenav-content .top-menu__collapse .menu-item.active-menu > a,
.sidenav .sidenav-content .top-menu__collapse .menu-item > a:hover {
  color: var(--in-accent);
}
.sidenav .sidenav-content .top-menu__collapse .sub-menu li > a {
  font-family: var(--in-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--in-ink-3);
}
.sidenav .gv-lang-toggle {
  color: var(--in-ink-3);
}
.gv-sidenav-header {
  border-bottom: 1px solid var(--in-rule);
}
.sidenav .gv-sidenav-logo img {
  height: 30px;
  width: auto;
}

/* Must track the nav height exactly, or a white band opens under the header. */
.b-wrapper {
  padding-top: var(--header-h);
}
/* Only the plain hero is tuned here; the photo hero sets its own symmetric padding. */
.in-hero--plain .in-hero__inner {
  padding-top: 56px;
  padding-bottom: 52px;
}

/* A headline that reads "…built to / scale" is a bad break; give it room. */
.in-hero__copy {
  max-width: 860px;
}

/* Footer social icons ship as bare 23px images — a hair under the 24px minimum
   target size, and awkward to hit on a phone. (`socilal` is the theme's spelling.) */
.s-footer__socilal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}
/* Footer menu links sit at 20px line boxes at every width, not just on phones —
   Arabic showed the same under-24px targets on desktop. */
.s-footer__links-wrap li.menu-item a,
.s-footer__link{
  display: inline-block;
  padding: 5px 0;
}
/* ---- 2. Institutional primitives ---------------------------------------- */

.in-section {
  padding: var(--in-pad) 0;
}
.in-section__head {
  max-width: 720px;
  margin-bottom: 42px;
}
.in-section__title {
  font-family: var(--in-serif);
  font-size: 34px;
  line-height: 1.22;
  font-weight: 600;
  color: var(--in-ink);
  margin: 0 0 14px;
}
.in-section__lede {
  font-family: var(--in-sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--in-ink-3);
  margin: 0;
}
.in-link {
  font-family: var(--in-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--in-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.in-link:hover {
  color: var(--in-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[dir="rtl"] .in-link span {
  transform: scaleX(-1);
}

/* ---- Photographic hero ---- Fills the opening screen exactly. */
/* .b-wrapper already reserves the header height, so a full 100svh overhangs by one
   header. svh (not vh) keeps this true on mobile. */
.in-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  /* Centred, not bottom-anchored: the hero box equals the visible area. */
  align-items: center;
  overflow: hidden;
  background: var(--in-ink);
}
/* Very short/landscape viewports: full-bleed would crop the copy, so let the
   content set the height once there is less room than the hero needs. */
@media (max-height: 620px) {
  .in-hero {
    min-height: 0;
  }
}
/* Inner pages: a compact ink band, no photograph and no decorative gradient. */
.in-hero--plain {
  min-height: 0;
  background: var(--in-ink);
}
.in-hero--plain .in-hero__inner {
  padding: 112px 0 64px;
}
.in-hero--plain .in-hero__title {
  font-size: clamp(32px, 3.6vw, 46px);
}
.in-hero--plain::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.in-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.in-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 15, 26, 0.94) 0%,
    rgba(9, 15, 26, 0.82) 34%,
    rgba(9, 15, 26, 0.44) 68%,
    rgba(9, 15, 26, 0.3) 100%
  );
}
.in-hero__inner {
  position: relative;
  width: 100%;
  /* Symmetric: the hero box is the visible area, so equal padding centres the
     block and still guarantees clearance if the copy ever outgrows the screen. */
  padding: 56px 0;
}
.in-hero__copy {
  max-width: 760px;
}
.in-hero__title {
  font-family: var(--in-serif);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 20px;
}
.in-hero__text {
  font-family: var(--in-sans);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
  margin: 0 0 30px;
}
.in-hero .s-header__btn-wrap {
  margin-bottom: 0;
}
.in-hero .s-header__started-btn {
  background: #fff;
  color: var(--in-ink);
}
.in-hero .s-header__started-btn span {
  color: var(--in-ink);
}
.in-hero .s-header__started-btn:hover {
  background: rgba(255, 255, 255, 0.88);
}
/* Over a photograph a 45%-white hairline all but disappears, which made the
   secondary button read as an unexplained dark box next to the white primary. */
.in-hero .gv-btn-ghost {
  border-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  color: #fff;
  background: rgba(9, 15, 26, 0.28);
  backdrop-filter: blur(2px);
}
.in-hero .gv-btn-ghost span {
  color: #fff;
}
.in-hero .gv-btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.in-hero .gv-btn-ghost:hover span {
  color: #fff;
}
.in-hero__stats {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.in-hero__stats-label {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 18px;
}
.in-hero__stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px 36px;
}
.in-hero__stat-num {
  font-family: var(--in-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}
.in-hero__stat-label {
  font-family: var(--in-sans);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.in-hero__caption {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-end: 22px;
  font-family: var(--in-sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- Photo band ---- */
.in-photoband {
  position: relative;
}
.in-photoband--contained {
  padding: 0 0 var(--in-pad);
}
.in-photoband__figure {
  position: relative;
  margin: 0;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--in-ink);
}
.in-photoband__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Two layers: the vertical wash grounds the stats, the inline one darkens only the copy
   column and fades by 66%. Stops are the lightest that clear AA on every text region
   in both directions (worst case: the eyebrow at 4.81:1). */
.in-photoband__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(9, 15, 26, 0.7) 0%,
      rgba(9, 15, 26, 0.5) 34%,
      rgba(9, 15, 26, 0) 66%
    ),
    linear-gradient(to top, rgba(9, 15, 26, 0.92) 0%, rgba(9, 15, 26, 0.55) 52%, rgba(9, 15, 26, 0.28) 100%);
}
/* Copy moves to the other edge in Arabic. Gradient keywords are physical, not logical. */
[dir="rtl"] .in-photoband__scrim {
  background:
    linear-gradient(
      to left,
      rgba(9, 15, 26, 0.7) 0%,
      rgba(9, 15, 26, 0.5) 34%,
      rgba(9, 15, 26, 0) 66%
    ),
    linear-gradient(to top, rgba(9, 15, 26, 0.92) 0%, rgba(9, 15, 26, 0.55) 52%, rgba(9, 15, 26, 0.28) 100%);
}
.in-photoband__body {
  position: relative;
  width: 100%;
  padding: 88px 0 44px;
}
.in-photoband__copy {
  max-width: 640px;
}
.in-photoband__title {
  font-family: var(--in-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.16;
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
}
.in-photoband__text {
  font-family: var(--in-sans);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.in-photoband__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px 36px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.in-photoband__stat-num {
  font-family: var(--in-sans);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.in-photoband__stat-label {
  font-family: var(--in-sans);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.in-photoband__caption {
  margin-top: 26px;
  font-family: var(--in-sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.48);
}

/* ---- Named initiatives ---- */
.in-initiatives__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--in-rule);
}
.in-initiative {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 34px;
  padding: 32px 0;
  border-bottom: 1px solid var(--in-rule);
  list-style: none;
}
/* Without a photograph the row is a two-column record: identity left, detail right. */
.in-initiative--nomedia {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 26px 0;
}
.in-initiative--nomedia .in-initiative__body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 30px 46px;
  align-items: start;
}
.in-initiative--nomedia .in-initiative__name {
  font-size: 21px;
  margin-bottom: 0;
}
.in-initiative--nomedia .in-initiative__text {
  margin-bottom: 14px;
  max-width: none;
}
.in-initiative__media {
  overflow: hidden;
  background: var(--in-paper-3);
  aspect-ratio: 3 / 2;
}
.in-initiative__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.in-initiative__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--in-ink-3);
  margin-bottom: 10px;
}
/* The region is the most scannable fact here; give it the weight of a column heading. */
.in-initiative__region {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--in-ink);
}
.in-status {
  border: 1px solid var(--in-rule);
  padding: 3px 9px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--in-ink-3);
  background: var(--in-paper-2);
}
.in-status[data-status="active"],
.in-status[data-status="ongoing"] {
  color: #1b6b45;
  border-color: #bfe0cf;
  background: #f0f8f4;
}
.in-initiative__name {
  font-family: var(--in-sans);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--in-ink);
  margin: 0 0 10px;
}
.in-initiative__text {
  font-family: var(--in-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--in-ink-3);
  margin: 0 0 18px;
  max-width: 62ch;
}
/* Workstreams as one wrapped run. Any fixed column count orphans either the three- or
   the four-item rows. */
.in-initiative__parts {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 3px;
  border-top: 1px solid var(--in-rule-soft);
}
.in-initiative__parts li {
  list-style: none;
  font-family: var(--in-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--in-ink-2);
  padding: 0;
}
/* Separator on the item rather than between flex gaps, so it wraps with the
   text it follows instead of ever landing alone at the start of a line. */
.in-initiative__parts li:not(:last-child)::after {
  content: "·";
  margin: 0 9px;
  color: var(--in-ink-3);
}
.in-initiative__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.in-initiative__metric {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.in-initiative__metric-num {
  font-family: var(--in-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--in-ink);
  letter-spacing: -0.02em;
}
.in-initiative__metric-label {
  font-family: var(--in-sans);
  font-size: 14px;
  color: var(--in-ink-3);
}

/* ---- Case study ---- */
.in-case__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.in-case--flip .in-case__media {
  order: 2;
}
.in-case__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--in-paper-3);
}
.in-case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.in-case__region {
  font-family: var(--in-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--in-ink);
  margin-bottom: 10px;
}
.in-case__title {
  font-family: var(--in-serif);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--in-ink);
  margin: 0 0 16px;
}
.in-case__text {
  font-family: var(--in-sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--in-ink-3);
  margin: 0 0 28px;
}
.in-case__text p + p {
  margin-top: 13px;
}
.in-case__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 22px;
  margin: 0 0 26px;
  padding-top: 22px;
  border-top: 1px solid var(--in-rule);
}
.in-case__metric {
  margin: 0;
}
.in-case__metric-num {
  font-family: var(--in-sans);
  font-size: 30px;
  font-weight: 700;
  color: var(--in-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 5px;
}
.in-case__metric-label {
  font-family: var(--in-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--in-ink-3);
  margin: 0;
}

/* ---- Reach ---- */
.in-reach__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  padding: 28px 0;
  border-block: 1px solid var(--in-rule);
  margin-bottom: 42px;
}
.in-reach__stat-num {
  font-family: var(--in-sans);
  font-size: 40px;
  font-weight: 700;
  color: var(--in-ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 5px;
}
.in-reach__stat-label {
  font-family: var(--in-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--in-ink-3);
}
.in-reach__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px;
}
.in-reach__region {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--in-ink-3);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--in-rule);
}
.in-reach__places {
  list-style: none;
  margin: 0;
  padding: 0;
}
.in-reach__places li {
  font-family: var(--in-sans);
  font-size: 16px;
  line-height: 1.45;
  color: var(--in-ink);
  padding: 7px 0;
  border-bottom: 1px solid var(--in-rule-soft);
  list-style: none;
}

/* ---- People ---- */
.in-people__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 38px 30px;
}
.in-person {
  list-style: none;
}
.in-person__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin-bottom: 16px;
  background: var(--in-paper-3);
  filter: grayscale(1);
  transition: filter 0.25s ease;
}
.in-person:hover .in-person__photo {
  filter: grayscale(0);
}
.in-person__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--in-sans);
  font-size: 30px;
  font-weight: 600;
  color: var(--in-ink-3);
  background: var(--in-paper-3);
  letter-spacing: 0.04em;
}
.in-person__name {
  font-family: var(--in-sans);
  font-size: 19px;
  font-weight: 600;
  color: var(--in-ink);
  margin-bottom: 3px;
}
.in-person__role {
  font-family: var(--in-sans);
  font-size: 14px;
  color: var(--in-ink-3);
  margin-bottom: 9px;
}
.in-person__text {
  font-family: var(--in-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--in-ink-3);
  margin: 0 0 9px;
}
.in-person__link {
  font-family: var(--in-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--in-accent);
  text-decoration: none;
}
.in-person__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Publications ---- */
.in-pubs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--in-rule);
}
.in-pub {
  list-style: none;
  border-bottom: 1px solid var(--in-rule);
}
.in-pub__row {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  gap: 28px;
  align-items: baseline;
  padding: 24px 0;
  text-decoration: none;
  color: inherit;
}
.in-pub__row--link:hover {
  background: var(--in-paper-2);
}
.in-pub__row--link:hover .in-pubs__title {
  color: var(--in-accent);
}
.in-pubs__meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--in-sans);
}
.in-pubs__date {
  font-size: 14px;
  font-weight: 500;
  color: var(--in-ink);
}
.in-pubs__kind {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--in-ink-3);
}
.in-pubs__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.in-pubs__title {
  font-family: var(--in-sans);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--in-ink);
  transition: color 0.15s ease;
}
.in-pubs__text {
  font-family: var(--in-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--in-ink-3);
  max-width: 68ch;
}
.in-pubs__byline {
  font-family: var(--in-sans);
  font-size: 13px;
  color: var(--in-ink-3);
}
.in-pubs__arrow {
  font-size: 17px;
  color: var(--in-accent);
}
[dir="rtl"] .in-pubs__arrow {
  transform: scaleX(-1);
  display: inline-block;
}

/* ---- Timeline ---- */
.in-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--in-rule);
}
.in-milestone {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid var(--in-rule);
  list-style: none;
}
.in-milestone__year {
  font-family: var(--in-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--in-accent);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.in-milestone__title {
  font-family: var(--in-sans);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--in-ink);
  margin: 0 0 7px;
}
.in-milestone__text {
  font-family: var(--in-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--in-ink-3);
  margin: 0;
  max-width: 66ch;
}

/* ---- 3. Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  .in-case__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .in-case--flip .in-case__media {
    order: 0;
  }
  /* Scoped away from photo-less rows: same specificity, so unscoped this won by
     coming later and forced a one-child row into a two-column grid. */
  .in-initiative:not(.in-initiative--nomedia) {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }
  /* Narrow the identity column to match — 320px of a ~780px measure left the
     detail column too thin to set a line of text in. */
  .in-initiative--nomedia .in-initiative__body {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px 30px;
  }
  .in-pub__row {
    grid-template-columns: 150px 1fr auto;
    gap: 20px;
  }
}

@media (max-width: 700px) {
  :root {
    --in-pad: 54px;
    --in-pad-lg: 62px;
  }
  /* The photo is cropped much tighter on a phone, so the copy lands on whatever
     the crop happens to expose. A heavier scrim keeps the hero legible there. */
  .in-hero__scrim {
    background: linear-gradient(
      to top,
      rgba(9, 15, 26, 0.96) 0%,
      rgba(9, 15, 26, 0.9) 40%,
      rgba(9, 15, 26, 0.74) 76%,
      rgba(9, 15, 26, 0.62) 100%
    );
  }
  /* No hero padding override on phones; the base symmetric padding applies. */
  .in-hero__stats {
    margin-top: 34px;
  }
  .in-initiative {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .in-initiative--nomedia .in-initiative__body {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .in-initiative__media {
    aspect-ratio: 16 / 9;
  }
  .in-pub__row {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .in-pubs__meta {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    grid-column: 1 / -1;
  }
  .in-milestone {
    grid-template-columns: 76px 1fr;
    gap: 18px;
  }
  .in-milestone__year {
    font-size: 18px;
  }
  .in-photoband__figure {
    min-height: 400px;
  }
  .in-photoband__body {
    padding: 62px 0 34px;
  }
  .gv-stats-band .gv-stats-grid {
    gap: 22px;
  }
  .in-section__title {
    font-size: 27px;
  }
  .s-widget__logos-wrap.in-logos--named {
    gap: 28px;
  }
  
  /* The photo band's label row uses the stat slot, so on one column its labels
     rendered as a stack of 30px words filling most of a phone screen. */
  .in-photoband__stats {
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
  }
  .in-photoband__stat-num {
    font-size: 19px;
  }
  .in-photoband__stat-label {
    font-size: 13px;
  }
  /* One mark per row on phones: full measure, proper size, name on one line. */
  .s-widget__logos-wrap.in-logos--named {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 260px;
  }
  .s-widget__logos-wrap.in-logos--named .s-widget__logo-wrap {
    gap: 10px;
  }
  .s-widget__logos-wrap.in-logos--named .s-widget__logo {
    height: 48px;
    max-width: 130px;
  }
  .s-widget__logos-wrap.in-logos--named .in-logo__name {
    min-height: 0;
  }
  .in-logo__name {
    font-size: 12px;
    line-height: 1.4;
  }
  .in-hero__stats-row {
    gap: 18px;
  }
  .in-hero__stat-num {
    font-size: 26px;
  }
  .s-open-position.gv-cta .s-open-position__title {
    font-size: 25px;
  }
  .in-hero .s-header__btn-wrap {
    width: 100%;
  }
  .in-hero .s-header__started-btn,
  .in-hero .gv-btn-ghost {
    flex: 1 1 100%;
  }
  /* Touch targets. Both sat under the 24px WCAG 2.2 minimum as list items. */
  .in-link,
  .in-person__link,
  .in-pubs__title {
    padding: 6px 0;
  }
  .s-footer__links-wrap li.menu-item a,
  .s-footer__link {
    display: inline-block;
    padding: 7px 0;
  }
  .in-reach__places li {
    padding: 10px 0;
  }
}

/* ---- 4. Retire the theme's heading ink (#19063d) ------------------------- */

/* #19063d is a dark violet the theme uses for most headings and labels. Mapped
   wholesale from common.css, 61 selectors; nav and drawer are restyled above. */

body .collapsible li .collapsible-header__title,
body .s-faq__title,
body .s-feature__block-item-title,
body .s-feature__subtitle,
body .s-feature__title,
body .s-header.s-header-about .s-header__block-text,
body .s-header__ptetitle,
body .s-header__title,
body .s-open-position__pretitle,
body .s-open-position__title,
body .s-widget.s-widget-about .s-widget__title{
  color: var(--in-ink);
}

/* ---- 5. Contact page (builder template) --------------------------------- */

/* Built from WordPress blocks, not the section primitives{
  background: var(--in-ink) !important;
  text-align: start;
  padding: 56px 0 !important;
}

/* The masthead is a `wp-block-cover` sized for a full-bleed image that is now
   hidden{
  min-height: 0 !important;
}

/* Each block in the masthead carries its own editor padding, so the eyebrow{
  margin-inline: 0;
  padding-inline: 0;
  max-width: 820px;
}

/* ---- 6. Sections -------------------------------------------------------- */

/* ---- Shared section scaffolding ---------------------------------------- */

.s-our-story,
.s-faq,
.s-feature,
.s-widget,
.s-open-position,
.in-section{
  padding-block: var(--pad);
}

/* Sections on the ink ground. One rule, so the dark bands agree with each
   other instead of each inventing their own greys. */
.s-our-story:not(.gv-light):not(.gv-lavender),
.gv-stats-band {
  color: rgba(255, 255, 255, 0.78);
}
.s-our-story:not(.gv-light):not(.gv-lavender) h1,
.s-our-story:not(.gv-light):not(.gv-lavender) h2,
.s-our-story:not(.gv-light):not(.gv-lavender) h3,
.s-our-story:not(.gv-light):not(.gv-lavender) .s-our-story__title,
.s-our-story:not(.gv-light):not(.gv-lavender) .s-our-story__title--small{
  color: #fff;
}
.s-our-story:not(.gv-light):not(.gv-lavender) .s-our-story__text,
.s-our-story:not(.gv-light):not(.gv-lavender) .s-our-story__description{
  color: rgba(255, 255, 255, 0.76);
}

/* ---- Initiatives list ---------------------------------------------------- */

/* The row's name is its link. Ink text with a brass underline on hover — the
   accent marks the interaction, it does not colour the label. */
.in-initiative__name a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t);
}
.in-initiative__name a:hover {
  color: var(--brass-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* One closing link for the whole list. */
.in-section__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 32px;
  font-size: 15px;
  font-weight: 500;
}

/* ---- Grounds ---- SectionsTemplate wraps each section in one of these; the rhythm
   is decided there so consecutive bands never share a ground. */

/* Painted on the wrapper, not the section, so a section that paints itself covers it. */
.gv-ground--paper {
  background-color: var(--paper);
}
.gv-ground--paper-2 {
  background-color: var(--paper-2);
}
/* Sections that paint their own ink ground (photo bands, the CTA, the accent
   story band) keep it; the wrapper only supplies the seam. */
.gv-ground--seam > section::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--rule-ink);
  z-index: 1;
}

/* ---- Story band --------------------------------------------------------- */

.s-our-story__blocks-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 56px;
  align-items: start;
}
.s-our-story__block {
  flex: 1 1 260px;
  min-width: 0;
}
/* Main block takes the whole row so the text blocks start beneath it. */
.s-our-story__block--main {
  flex: 0 0 100%;
  width: 100%;
}
.s-our-story__block--main .s-our-story__title,
.s-our-story__block--main .s-our-story__description {
  max-width: 720px;
}
.s-our-story__title {
  font-size: clamp(28px, 3vw, 40px);
  margin-block-end: 16px;
}
.s-our-story__description {
  max-width: 680px;
}
.s-our-story__title--small {
  font-size: 19px;
  margin-block-end: 8px;
}
.s-our-story__pretitle {
  margin-block-end: 14px;
}
.gv-centered .s-our-story__content {
  text-align: center;
}
.gv-centered .s-our-story__block--main {
  margin-inline: auto;
}

/* Light and pale variants. The lavender wash is now the brass wash — same job,
   a colour that belongs to this palette. */
.s-our-story.gv-light {
  background: var(--paper-2);
}
.s-our-story.gv-lavender {
  background: var(--brass-wash);
}
.s-our-story.gv-paper {
  background: var(--paper);
}

/* ---- Step rail ---------------------------------------------------------- */

/* The one place numbering earns its keep: the assessment cycle really is ordered. */
.gv-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 24px;
  margin-block-start: 36px;
}
.gv-steps-label {
  margin-block-start: 40px;
  margin-block-end: 18px;
}
.gv-step {
  position: relative;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--rule-ink);
}
.s-our-story.gv-light .gv-step,
.s-our-story.gv-lavender .gv-step {
  border-block-start-color: var(--rule);
}
/* --brass only reaches 2.9:1 on paper, so numerals step up to it only on ink. */
.gv-step__dot {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brass-deep);
  margin-block-end: 6px;
}
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-step__dot {
  color: var(--brass);
}
.gv-step__title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}
.gv-footnote {
  margin-block-start: 30px;
  font-size: 15px;
}

/* ---- Logo band ---------------------------------------------------------- */

.s-widget__content {
  text-align: center;
}
.s-widget__logos-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 72px;
}
.s-widget__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.s-widget__logo {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}
.in-logo__name {
  font-size: 13px;
  color: var(--ink-3);
}

/* ---- Card grids --------------------------------------------------------- */

/* .s-faq__content wraps the section heading as well as the cards, so only the
   .gv-cards list is a grid — making the wrapper one put the h2 in a column. */
.gv-cards {
  display: grid;
  gap: 20px;
  margin-block-start: 36px;
  /* Each card sizes to its own content. Stretching them to the tallest in the
     row left the short ones with a block of empty space under the last item. */
  align-items: start;
}
/* Explicit column counts: auto-fit ran a five-card section as 4 + 1. */
.gv-cols-2 .gv-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-cols-3 .gv-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .gv-cols-2 .gv-cards,
  .gv-cols-3 .gv-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .gv-cols-2 .gv-cards,
  .gv-cols-3 .gv-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Opt-in, for sections where the cards read as one set rather than as entries. */
.gv-cards-equal .gv-cards {
  align-items: stretch;
}
.gv-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
}
.gv-card__title {
  font-size: 18px;
}
.gv-card__text {
  color: var(--ink-3);
}
.gv-card__icon {
  width: 28px;
  height: 28px;
  margin-block-end: 6px;
}
/* ---- Dark card section ---- For the one cards section that breaks the alternation. */
.gv-cards-section.gv-dark {
  background: var(--ink);
}
.gv-cards-section.gv-dark .s-faq__title {
  color: #fff;
}
.gv-cards-section.gv-dark .s-faq__description {
  color: rgba(255, 255, 255, 0.68);
}
.gv-cards-section.gv-dark .gv-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}
.gv-cards-section.gv-dark .gv-card__title {
  color: #fff;
}
.gv-cards-section.gv-dark .gv-card__text {
  color: rgba(255, 255, 255, 0.68);
}
.gv-cards-section.gv-dark .gv-card__num {
  color: var(--brass);
}

.gv-card__link {
  margin-block-start: auto;
  padding-block-start: 12px;
  font-size: 15px;
  font-weight: 500;
}

/* Numbered cards only where the order is real. Set small, in the corner. */
.gv-card__num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brass-deep);
}

.s-faq__title {
  font-size: clamp(26px, 2.6vw, 36px);
  margin-block-end: 12px;
}
.s-faq__description {
  margin-block-end: 0;
}

/* ---- Feature rows ------------------------------------------------------- */

.s-feature__blocks-wrap {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-block-start: 36px;
}
.s-feature__title {
  font-size: clamp(26px, 2.6vw, 36px);
  margin-block-end: 12px;
}
.s-feature__block-item {
  display: flex;
  gap: 14px;
  align-items: start;
}
.s-feature__block-item-icon {
  width: 26px;
  flex: none;
}
.s-feature__block-item-title {
  font-size: 17px;
  margin-block-end: 4px;
}
.s-feature__block-item-text {
  font-size: 15px;
  color: var(--ink-3);
}
.s-feature__block-img {
  width: 100%;
  height: auto;
}

/* ---- Checklists --------------------------------------------------------- */

/* Plain rows with a brass tick, not lavender pills. */
.gv-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block-start: 14px;
}
.gv-check-item {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}
/* Tick drawn here, not shipped as an image; check.svg baked the old purple into an asset. */
.gv-check-item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 10px;
  margin-block-start: 7px;
  border-inline-end: 1.5px solid var(--brass-deep);
  border-block-end: 1.5px solid var(--brass-deep);
  transform: rotate(45deg);
}
[dir="rtl"] .gv-check-item::before {
  transform: rotate(45deg);
}
.gv-checklist--light .gv-check-item {
  color: rgba(255, 255, 255, 0.8);
}
.gv-checklist--light .gv-check-item::before {
  border-color: var(--brass);
}

/* ---- Image slots ---- Where a photograph has not been chosen yet. Exact dimensions
   kept so the page reads as finished. */
.in-photoband--empty .in-photoband__figure {
  background: var(--ink);
}
.in-photoband__slot {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    #16233a,
    #16233a 12px,
    #131f34 12px,
    #131f34 24px
  );
}
/* With no photograph there is nothing to darken, and the scrim would only mute
   the slot. */
.in-photoband--empty .in-photoband__scrim {
  display: none;
}

/* ---- Badges ------------------------------------------------------------- */

.gv-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 18px;
}
.gv-badge {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border: 1px solid var(--rule);
}

/* ---- Stats -------------------------------------------------------------- */

.gv-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 40px;
}

/* ---- CTA band ----------------------------------------------------------- */

.s-open-position__content {
  max-width: 620px;
}
.s-open-position__title {
  font-size: clamp(28px, 3vw, 38px);
  margin-block-end: 14px;
}
.s-open-position__description {
  margin-block-end: 28px;
}

/* ---- Accordion ---------------------------------------------------------- */

.gv-accordion__item {
  border: 1px solid var(--rule);
  margin-block-end: -1px;
}
.gv-accordion__title,
.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.collapsible-body,
.gv-accordion__body {
  padding: 0 20px 20px;
  color: var(--ink-3);
}
/* Rows need to read as rows, or the accordion looks like a plain list. */
.s-faq__content .s-faq__collapse {
  margin-block-start: 44px;
  border-block-start: 1px solid var(--rule);
}
.s-faq__collapse > li {
  list-style: none;
  border-block-end: 1px solid var(--rule);
}
.collapsible-header {
  transition: color var(--t);
}
.collapsible-header:hover,
.collapsible-header[aria-expanded="true"] {
  color: var(--brass-deep);
}
.collapsible-header:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: -2px;
}
/* Drawn in CSS: the theme's glyph was an asset with the old purple baked in. */
.collapsible-header__icon {
  flex: none;
  inline-size: 9px;
  block-size: 9px;
  margin-block-end: 4px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t);
}
.collapsible-header[aria-expanded="true"] .collapsible-header__icon {
  margin-block: 4px 0;
  transform: rotate(225deg);
}
/* The retire-purple block colors the title directly, which would hold it at ink
   while the row around it went brass. */
body .collapsible li .collapsible-header__title {
  min-inline-size: 0;
  color: inherit;
}

/* ---- Footer ------------------------------------------------------------- */

/* A shade deeper than the CTA above it, or the two merge into one ~800px mass. */
.s-footer {
  padding-block: 72px 32px;
  background-color: #0a1422;
  color: rgba(255, 255, 255, 0.72);
}
.s-footer__content {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  gap: 48px 64px;
  padding-block-end: 48px;
}
.s-footer__logo {
  height: 30px;
  width: auto;
  margin-block-end: 14px;
}
.s-footer__logo-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 260px;
}

/* The footer menu is one <ul> whose top-level items are column headings and
   whose sub-menus are the links under them. */
/* Five columns of links. auto-fit at 140px fitted only four across, which
   dropped "Policies" onto a second row on its own. */
.s-footer__links-wrap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1100px) {
  .s-footer__links-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .s-footer__links-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.s-footer__links-wrap > li > a {
  display: block;
  margin-block-end: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.s-footer__links-wrap .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.s-footer__links-wrap .sub-menu li + li {
  margin-block-start: 9px;
}
.s-footer__links-wrap .sub-menu a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.68);
  transition: color var(--t);
}
.s-footer__links-wrap .sub-menu a:hover {
  color: #fff;
}

.s-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block-start: 26px;
  border-block-start: 1px solid var(--rule-ink);
}
.s-footer__copyright {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.s-footer__socilals-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
.s-footer__socilal img {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  transition: opacity var(--t);
}
.s-footer__socilal:hover img {
  opacity: 1;
}

/* ---- Forms -------------------------------------------------------------- */

/* WPForms hides its layout-row label at top/left:-99999px with no clip. The box still
   contributes to the ancestor's scrollable overflow, which balloons scroll width to
   ~100,000px in RTL. Keep it in static flow{
  position: absolute;
  top: auto;
  left: auto;
  right: auto;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inputs shipped as lavender-filled rounded boxes. White field, hairline
   border, square — and a brass ring on focus so the active field is obvious. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 16px;
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(192, 135, 63, 0.16);
}
/* Drawn here so the arrow sits on the same 13px inset as the text, RTL included. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355617a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 10px 6px;
}
[dir="rtl"] select {
  background-position: left 13px center;
}
/* Firefox keeps a focus ring on the text itself once appearance is removed. */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--ink);
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-4);
}
textarea {
  min-height: 132px;
  resize: vertical;
}
label {
  display: block;
  margin-block-end: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t);
}
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--ink-2);
}

/* ---- Contact ------------------------------------------------------------ */

.in-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px 72px;
  align-items: start;
}
.in-contact__form .in-section__title {
  font-size: clamp(24px, 2.4vw, 32px);
  margin-block-end: 28px;
}
.in-contact__aside-title {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 20px;
}
.in-contact__details {
  margin: 0 0 32px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--rule);
}
/* --ink-4 is a 3.66:1 grey — fine for a 20px figure, under AA for a 12px
   label. Small type takes --ink-3. */
.in-contact__details dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 4px;
}
.in-contact__details dd {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--ink-2);
}
.in-contact__details dd:last-child {
  margin-block-end: 0;
}
/* mailto: and tel: links are the two things a visitor most wants to hit on a
   phone. As inline text they were ~19px tall. */
.in-contact__details a {
  display: inline-block;
  padding-block: 6px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
  transition: color var(--t);
}
.in-contact__details a:hover {
  color: var(--brass-deep);
}
/* The map was an <embed> at a fixed 640x1000, which ran off the right edge of
   the page and left the bottom half below the fold. */
.in-contact__map {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.in-contact__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 860px) {
  .in-contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  /* 4:3 across the full measure made the map taller than the form it supports. */
  .in-contact__map {
    aspect-ratio: 16 / 10;
    max-height: 340px;
  }
}

/* The header is fixed; clear it when a fragment link lands. */
:target {
  scroll-margin-block-start: calc(var(--header-h) + 16px);
}

/* ---- Careers application ------------------------------------------------ */

.in-apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px 72px;
  align-items: start;
}
.in-apply__text {
  color: var(--ink-3);
  max-width: 46ch;
}
.in-apply__media {
  margin-block-start: 32px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-3);
}
.in-apply__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.in-apply__footnote {
  margin-block-start: 28px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-4);
}

.in-apply__form {
  display: grid;
  gap: 22px;
}
.in-field__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.in-field__label {
  display: block;
  margin-block-end: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.in-field__opt {
  font-weight: 400;
  color: var(--ink-4);
}
.in-field__error {
  margin-block-start: 6px;
  font-size: 13px;
  color: var(--danger);
}
.in-field [aria-invalid="true"] {
  border-color: var(--danger);
}
/* Checkbox beside its label, not above it. */
.in-field--check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
.in-field--check input {
  width: 17px;
  height: 17px;
  margin-block-start: 2px;
  accent-color: var(--ink);
}
.in-field--check label {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.in-field--check .in-field__error {
  grid-column: 1 / -1;
}

/* Native file control hidden (clip, not display:none, to keep it focusable);
   its <label> is the button. */
.in-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.in-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.in-file__button {
  display: inline-flex;
  align-items: center;
  height: 42px;
  margin: 0;
  padding: 0 18px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.in-file__button:hover {
  background: var(--ink);
  color: var(--paper);
}
/* Focus lands on the hidden input; draw the ring on its label. */
.in-file__input:focus-visible + .in-file__button {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(192, 135, 63, 0.16);
}
.in-file__name,
.in-file__hint {
  font-size: 14px;
  color: var(--ink-3);
}
.in-file__name {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink-2);
  font-weight: 500;
}
.in-file__clear {
  padding: 0;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-4);
  text-decoration: underline;
  cursor: pointer;
}
.in-file__clear:hover {
  color: var(--danger);
}

.in-apply__alert {
  margin: 0;
  padding: 12px 14px;
  background: var(--danger-wash);
  border-inline-start: 3px solid var(--danger);
  font-size: 14px;
  color: var(--ink-2);
}
.in-apply__submit {
  justify-self: start;
}
.in-apply__submit:disabled {
  opacity: 0.7;
  cursor: progress;
}

.in-apply__done {
  padding: 36px 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--brass);
}
.in-apply__done-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}
.in-apply__done-text {
  margin: 0;
  color: var(--ink-3);
}

/* Honeypot. Off-screen, not display:none — some bots skip hidden fields. */
.in-apply__trap {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .in-apply__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .in-apply__media {
    display: none;
  }
}
@media (max-width: 560px) {
  .in-field__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 404 ---------------------------------------------------------------- */

.gv-404 {
  display: flex;
  align-items: center;
  min-height: 66vh;
  padding-block: 120px 84px;
}
.gv-404__inner {
  max-width: 560px;
}
.gv-404__code {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-block-end: 14px;
}
.gv-404__title {
  font-size: clamp(30px, 3.4vw, 42px);
  margin-block-end: 14px;
}
.gv-404__text {
  color: var(--ink-3);
  margin-block-end: 28px;
}
.gv-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- Quote -------------------------------------------------------------- */

.gv-quote__inner {
  max-width: 780px;
}
.gv-quote__mark {
  display: none;
}
.gv-quote__text {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.34;
  color: var(--ink);
}
.gv-quote__attribution {
  margin-block-start: 22px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--rule);
}
.gv-quote__name {
  font-weight: 600;
  color: var(--ink);
}
.gv-quote__role {
  font-size: 15px;
  color: var(--ink-3);
}

/* ---- Reveal on scroll --------------------------------------------------- */

/* Deliberately nothing. ThemeBehaviors still adds .seen, but nothing hangs off it. */

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  :root {
    --pad: 60px;
    --pad-lg: 72px;
    --gutter: 22px;
  }
  /* auto-fit still fitted 3–4 tracks here and stranded the last item on its own
     row. Fixed counts that divide the item counts we actually ship. */
  .in-photoband__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .s-widget__logos-wrap.in-logos--named {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gv-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .in-reach__groups {
    grid-template-columns: 1fr;
  }
}

/* Phone counts restated here: the phone block above sets these too, but it sits
   earlier in the file and loses to the tablet block at equal specificity. */
@media (max-width: 700px) {
  .gv-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .s-widget__logos-wrap.in-logos--named {
    grid-template-columns: 1fr;
  }
  .s-footer__content {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .s-our-story__blocks-wrap {
    gap: 32px;
  }
}

/* ---- Contrast panel ----------------------------------------------------- */
/* Two claims side by side. The distinction used to live in a paragraph, where
   nobody read past the first clause. */
.in-contrast__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--in-rule);
}
.in-contrast__col {
  padding: 30px 32px 34px;
}
.in-contrast__col--is {
  background: var(--in-paper);
}
.in-contrast__col--isnt {
  background: var(--in-paper-2);
  border-inline-start: 1px solid var(--in-rule);
}
.in-contrast__head {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--in-ink-3);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--in-rule);
}
.in-contrast__col--is .in-contrast__head {
  color: var(--in-accent);
}
.in-contrast__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.in-contrast__list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-family: var(--in-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--in-ink);
  list-style: none;
}
.in-contrast__col--isnt .in-contrast__list li {
  color: var(--in-ink-3);
}
/* Drawn rather than iconographic: a tick and a strike, so the two columns read
   as opposites at a glance without shipping two more SVG requests. */
.in-contrast__mark {
  position: relative;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 2px;
}
.in-contrast__mark::before,
.in-contrast__mark::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.in-contrast__col--is .in-contrast__mark {
  color: var(--in-accent);
}
/* Physical borders, not logical: a tick is not directional, so it must not
   mirror under RTL the way border-inline-end would. */
.in-contrast__col--is .in-contrast__mark::before {
  inline-size: 6px;
  block-size: 12px;
  inset-block-start: 1px;
  inset-inline-start: 5px;
  background: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.in-contrast__col--is .in-contrast__mark::after {
  content: none;
}
.in-contrast__col--isnt .in-contrast__mark {
  color: var(--in-ink-4);
}
.in-contrast__col--isnt .in-contrast__mark::before {
  inline-size: 14px;
  block-size: 1.5px;
  inset-block-start: 9px;
  inset-inline-start: 3px;
}
.in-contrast__col--isnt .in-contrast__mark::after {
  content: none;
}
@media (max-width: 700px) {
  .in-contrast__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .in-contrast__col--isnt {
    border-inline-start: 0;
    border-block-start: 1px solid var(--in-rule);
  }
}

/* ---- Reach atlas -------------------------------------------------------- */
.in-atlas {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.in-atlas__map {
  position: relative;
  max-inline-size: 420px;
}
.in-atlas__globe {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}
.in-atlas__disc {
  fill: var(--in-paper-2);
  stroke: var(--in-rule);
  stroke-width: 1;
}
.in-atlas__grid {
  fill: none;
  stroke: var(--in-rule);
  stroke-width: 1;
}
.in-atlas__arc {
  fill: none;
  stroke: var(--in-ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  opacity: 0.85;
  transition: stroke 160ms ease, opacity 160ms ease;
}
.in-atlas__arc.is-active {
  stroke: var(--in-accent);
  opacity: 1;
}
/* Pins select the same region the list rows do, so they need a pointer target
   sized for a finger rather than for the 5px dot. */
.in-atlas__pin {
  cursor: pointer;
}
.in-atlas__hit {
  fill: transparent;
}
.in-atlas__pin:focus {
  outline: none;
}
.in-atlas__pin:focus-visible .in-atlas__halo {
  fill: none;
  stroke: var(--in-accent);
  stroke-width: 1.5;
}
.in-atlas__halo {
  fill: var(--in-accent);
  opacity: 0;
  transition: opacity 160ms ease;
}
.in-atlas__pin.is-active .in-atlas__halo {
  opacity: 0.14;
}
.in-atlas__dot {
  fill: var(--in-ink);
  transition: fill 160ms ease;
}
.in-atlas__pin.is-active .in-atlas__dot {
  fill: var(--in-accent);
}
.in-atlas__pin-label {
  font-family: var(--in-sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--in-ink-3);
  transition: fill 160ms ease;
}
.in-atlas__pin.is-active .in-atlas__pin-label {
  fill: var(--in-ink);
}
.in-atlas__hub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--in-rule);
}
.in-atlas__hub-name {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--in-ink);
}
.in-atlas__hub-note {
  font-family: var(--in-sans);
  font-size: 14px;
  color: var(--in-ink-3);
}
.in-atlas__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.in-atlas__list li {
  list-style: none;
}
.in-atlas__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 6px;
  inline-size: 100%;
  text-align: start;
  background: none;
  border: 0;
  border-block-end: 1px solid var(--in-rule);
  padding: 20px 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.in-atlas__list li:first-child .in-atlas__row {
  border-block-start: 1px solid var(--in-rule);
}
.in-atlas__index {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--in-ink-4);
  padding-block-start: 5px;
  transition: color 160ms ease;
}
.in-atlas__row.is-active .in-atlas__index {
  color: var(--in-accent);
}
.in-atlas__body {
  display: grid;
  gap: 8px;
}
.in-atlas__name {
  font-family: var(--in-serif);
  font-size: 22px;
  line-height: 1.2;
  color: var(--in-ink);
}
.in-atlas__note {
  font-family: var(--in-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--in-ink-3);
}
.in-atlas__work {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 2px;
}
.in-atlas__tag {
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--in-ink-2);
  border: 1px solid var(--in-rule);
  padding: 4px 10px;
}
.in-atlas__row.is-active .in-atlas__tag {
  border-color: var(--in-accent);
  color: var(--in-accent-deep);
}
@media (max-width: 900px) {
  .in-atlas {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .in-atlas__map {
    max-inline-size: 380px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .in-atlas__arc,
  .in-atlas__halo,
  .in-atlas__dot,
  .in-atlas__pin-label,
  .in-atlas__index {
    transition: none;
  }
}

/* A closing collaboration band. Same wash the story sections use, moved here so
   the page does not run two plain-paper sections back to back. */
.in-section--tint {
  background: var(--brass-wash);
}
.in-reach .in-section__title {
  font-size: 26px;
}

/* ---- Lifecycle rail ----------------------------------------------------- */
/* Full-width rows on a shared spine. The five stages carry 3–5 items each, which
   in a card grid gave ragged heights and a hole in the last row. */
.in-lifecycle__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.in-lifecycle__stage {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  list-style: none;
  padding-block: 28px;
  border-block-end: 1px solid var(--in-rule-soft);
}
.in-lifecycle__stage:first-child {
  border-block-start: 1px solid var(--in-rule);
  padding-block-start: 32px;
}
.in-lifecycle__stage:last-child {
  border-block-end: 1px solid var(--in-rule);
}
/* The spine: a hairline through the marker column, broken by the numeral. */
.in-lifecycle__rail {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  justify-content: center;
}
.in-lifecycle__rail::before {
  content: "";
  position: absolute;
  inset-block: -28px;
  inset-inline-start: calc(50% - 0.5px);
  inline-size: 1px;
  background: var(--in-rule);
}
.in-lifecycle__stage:first-child .in-lifecycle__rail::before {
  inset-block-start: 12px;
}
.in-lifecycle__stage:last-child .in-lifecycle__rail::before {
  inset-block-end: calc(100% - 12px);
}
.in-lifecycle__num {
  position: relative;
  font-family: var(--in-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--in-accent);
  background: var(--in-paper);
  padding-block: 2px;
  line-height: 1.4;
}
.in-lifecycle__head {
  grid-column: 2;
  grid-row: 1;
}
.in-lifecycle__items {
  grid-column: 2;
  grid-row: 2;
}
.in-lifecycle__phase {
  font-family: var(--in-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--in-ink-4);
  margin-block-end: 6px;
}
.in-lifecycle__name {
  font-family: var(--in-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--in-ink);
  margin: 0;
}
.in-lifecycle__items {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.in-lifecycle__items li {
  list-style: none;
  /* Without this the chips shrink to one word per line when the rail goes
     two-column, instead of wrapping as whole chips. */
  flex: 0 0 auto;
  max-inline-size: 100%;
  font-family: var(--in-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--in-ink-2);
  border: 1px solid var(--in-rule);
  padding: 5px 11px;
}
/* Wide enough for the name to hold its own column, so every row aligns on the
   same two edges regardless of how many items follow it. */
@media (min-width: 901px) {
  .in-lifecycle__stage {
    grid-template-columns: 64px minmax(0, 300px) minmax(0, 1fr);
    column-gap: 32px;
  }
  /* Name and chips share a row, so every stage aligns on the same two edges. */
  .in-lifecycle__items {
    grid-column: 3;
    grid-row: 1;
    margin-block-start: 0;
    padding-block-start: 4px;
  }
}

/* ---- Numbered story blocks ---------------------------------------------- */
/* Counts the text blocks only; the main block carries the heading, not a step. */
.s-our-story__blocks-wrap.gv-numbered {
  counter-reset: gv-story-block;
}
.gv-numbered > .s-our-story__block--text {
  counter-increment: gv-story-block;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--in-rule);
}
.gv-numbered > .s-our-story__block--text::before {
  content: "0" counter(gv-story-block);
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brass-deep);
  margin-block-end: 10px;
}
/* On the ink and lavender grounds the hairline and numeral need their own values. */
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-numbered > .s-our-story__block--text {
  border-block-start-color: var(--rule-ink);
}
.s-our-story:not(.gv-light):not(.gv-lavender) .gv-numbered > .s-our-story__block--text::before {
  color: var(--brass);
}


/* ---- 8. De-templating pass --------------------------------------------- */

/* Section density. One padding value on every section of every page is the
   structural reason the pages scanned as one page. Used on five sections. */
.in-section--tight {
  padding-block: calc(var(--pad) * 0.6);
}
.in-section--generous {
  padding-block: calc(var(--pad) * 1.4);
}

/* The one section on the site that leaves --measure. Heading stays put; only the
   grid steps out. Narrower than 1320px there is no room for it to read as intent.
   The 40px allowance covers the scrollbar, which 100vw counts and clientWidth does not. */
@media (min-width: 1320px) {
  .in-section--breakout .in-contrast__grid {
    margin-inline: calc(
      -1 * min(120px, max(24px, (100vw - var(--measure)) / 2 + var(--gutter) - 40px))
    );
  }
}

/* Between 700 and 900 the three-up grids drop to two columns, which leaves an
   odd card alone in the last row. It spans the row instead. */
@media (min-width: 701px) and (max-width: 900px) {
  .gv-cols-3 .gv-cards:has(> :nth-child(odd):last-child) > :last-child {
    grid-column: 1 / -1;
  }
}

/* Five cards in a three-up grid left a hole in row two. Six tracks: three cards
   spanning two, then two spanning three. Only fires on a five-card grid. */
@media (min-width: 901px) {
  .gv-cols-3 .gv-cards:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gv-cols-3 .gv-cards:has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }
  .gv-cols-3 .gv-cards:has(> :nth-child(5):last-child) > :nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* The atlas rows carried 01/02/03 over three regions that are not a sequence.
   Numbered rows now appear twice on the site: the lifecycle and the exam cycle. */
.in-atlas__index {
  display: none;
}
.in-atlas__row {
  grid-template-columns: minmax(0, 1fr);
}

/* Partner marks keep their own colours. Only the sizing is normalised: contain
   against one box made the wide wordmark read three times the weight of the
   square ones, so the caps are set optically instead. */
.in-logos--named .s-widget__logo-wrap:nth-child(2) .s-widget__logo {
  max-width: 104px;
}
.in-logos--named .s-widget__logo-wrap:nth-child(3) .s-widget__logo {
  max-width: 120px;
}
.in-logos--named .s-widget__logo-wrap:nth-child(4) .s-widget__logo {
  height: 62px;
}

/* The map was a raw embed sitting square against the page's rounded rules. */
.in-contact__map {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
}