/* Design tokens sourced from the Improving Design System in Figma.
 * Reference tokens by name in components. Do not hardcode hex values elsewhere. */

:root {
  /* Brand */
  --color-primary: #00355E;
  --color-primary-900: #042B49;
  --color-primary-700: #004E8A;
  --color-primary-600: #0065B3;
  --color-primary-500: #007CDB;
  --color-primary-100: #B3D5EF;
  --color-primary-50: #E5EEF5;
  --color-secondary: #4597D3;
  --color-secondary-800: #153851;
  --color-secondary-100: #BFD4E4;
  --color-secondary-50: #E8EEF2;
  --color-accent: #1AB1A2;
  --color-accent-800: #0F5750;
  --color-accent-100: #BBE7E3;
  --color-accent-50: #E7F3F2;

  /* Neutral */
  --color-neutral-light: #E9E9E9;
  --color-neutral-mid: #B6B6B6;
  --color-neutral-dark: #3D3D3D;
  --color-grey-900: #262626;
  --color-grey-600: #595959;
  --color-grey-500: #6E6E6E;

  /* Functional */
  --color-error: #DC3545;
  --color-error-50: #F3E7E9;
  --color-success: #1AB1A2;
  --color-warning: #F5BB41;
  --color-warning-50: #F4F0E6;
  --color-disabled: #E9E9E9;

  /* Semantic */
  --color-text: var(--color-grey-900);
  --color-text-muted: var(--color-grey-600);
  --color-bg: #FFFFFF;
  --color-border: var(--color-neutral-light);
  --color-link: var(--color-primary-600);
  --color-focus: var(--color-primary-500);

  /* Gradients (fixed set, do not reuse elsewhere) */
  --gradient-stat: linear-gradient(90deg, #4597D3 0%, #005596 100%);
  --gradient-stat-icon: linear-gradient(180deg, #17CCBA 0%, #0064B1 100%);
  --gradient-eyebrow: linear-gradient(90deg, #005DAA 0%, #1AB1A2 100%);

  /* Typography */
  --font-heading: "Poppins", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;

  /* Spacing (desktop values; tablet and mobile to be confirmed from Figma) */
  --space-xs: 0.5rem;   /* 8px */
  --space-s: 1rem;      /* 16px */
  --space-m: 1.5rem;    /* 24px */
  --space-l: 2rem;      /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-xxl: 4rem;    /* 64px */

  /* Layout */
  --content-max: 1600px;
  --margin-page: 160px;
  --gutter: 24px;
  --section-gap: var(--space-xxl);
  --card-gap: var(--space-m);
  --button-padding: var(--space-l);
}

/* Breakpoints (reference names, not raw pixels, in component code):
 * Large Desktop 2560, Desktop 1920, Small Desktop 1440, Tablet Landscape 1024,
 * Tablet Portrait 768, Mobile 375. Content max steps down at each tier. */
@media (max-width: 1440px) { :root { --content-max: 1280px; --margin-page: 80px; } }
@media (max-width: 1024px) { :root { --content-max: 944px;  --margin-page: 40px; --gutter: 16px; } }
@media (max-width: 768px)  { :root { --content-max: 688px;  --margin-page: 40px; } }
@media (max-width: 375px)  { :root { --content-max: 343px;  --margin-page: 16px; --gutter: 12px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark mode is not in the approved Figma system. Keep light until a dark design exists. */
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;          /* B1 Body: 17/25 */
  line-height: 25px;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--space-m);
}

/* H1: 56px to 82px desktop, 40px mobile. Line height 88px desktop, 48px mobile. */
h1 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 5.125rem); line-height: 1.1; }
/* H2: 38px to 48px desktop, 28px mobile. */
h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 3rem); line-height: 1.2; }
/* H3: 32px desktop, 24px mobile. */
h3 { font-family: var(--font-body); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: 1.3; }
/* H4: 28px desktop, 22px mobile. */
h4 { font-family: var(--font-body); font-size: clamp(1.375rem, 1.2rem + 0.4vw, 1.75rem); line-height: 1.3; }
/* H5: 24px desktop, 18px mobile. */
h5 { font-family: var(--font-body); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.5rem); line-height: 1.33; }
/* H6 eyebrow: Poppins SemiBold 20px desktop, 16px mobile. */
h6 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.25rem); line-height: 1.1; }

p { margin: 0 0 var(--space-m); }
small, .caption { font-size: 12px; line-height: 16px; }

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

a { color: var(--color-link); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.site-header, .site-footer, main {
  max-width: calc(var(--content-max) + 2 * var(--margin-page));
  margin: 0 auto;
  padding: var(--space-m) var(--margin-page);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
  justify-content: space-between;
}

.site-title { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: var(--space-m); }
nav a { color: var(--color-text); text-decoration: none; }

.site-footer { color: var(--color-text-muted); font-size: 12px; line-height: 16px; }

/* ---------- Shared page components ---------- */

.section { margin: var(--section-gap) 0; }
.section-center { text-align: center; }
.section-narrow { max-width: 900px; margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gradient-eyebrow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 var(--space-s);
  display: inline-block;
}

.lead { font-size: 18px; line-height: 28px; max-width: 720px; color: var(--color-text-muted); }

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: var(--button-padding) calc(var(--button-padding) * 0.75);
  padding: 18px 32px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #FFFFFF;
  text-decoration: none;
}
.btn:hover { background: var(--color-primary-700); }
.btn-outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }

.hero { padding: var(--space-xxl) 0 var(--section-gap); }
.hero h1 { max-width: 14ch; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gutter);
  margin: var(--section-gap) 0;
}
.stat-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3.5rem);
  line-height: 1.1;
  background: var(--gradient-stat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-caption { font-weight: 300; font-size: 18px; line-height: 28px; color: var(--color-text-muted); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--card-gap);
  margin-top: var(--space-l);
}
.card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-l);
  background: var(--color-bg);
}
.card h3 { margin-bottom: var(--space-s); }
.card p:last-child { margin-bottom: 0; }

.media-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: var(--color-primary-50);
  margin-bottom: var(--space-m);
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-l);
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-l);
}
.quote { border-left: 4px solid var(--color-accent); padding-left: var(--space-m); }
.quote cite { display: block; font-style: normal; font-weight: 500; color: var(--color-primary); margin-top: var(--space-s); }
.quote-role { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }

.checklist { list-style: none; padding: 0; margin: var(--space-m) 0 0; }
.checklist li { padding: var(--space-xs) 0 var(--space-xs) var(--space-l); position: relative; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.9em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gradient-eyebrow);
}

.contact-band {
  background: var(--color-primary-50);
  border-radius: 16px;
  padding: var(--space-xxl) var(--space-l);
  text-align: center;
}

.engage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gutter); }
.engage-card {
  position: relative;
  background: linear-gradient(195.8deg, #FFFFFF 12.2%, #DEF6FF 88.1%);
  border: 1.3px solid var(--color-neutral-light);
  border-radius: 8px;
  padding: var(--space-l);
  text-align: center;
  box-shadow: 3px 3px 5px rgba(102, 102, 102, 0.1), 13px 12px 8.5px rgba(102, 102, 102, 0.09);
}
.engage-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 32px; line-height: 42px; color: var(--color-primary); }
.engage-card p { font-family: var(--font-heading); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--color-neutral-dark); }
.engage-card .btn-talent {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  color: #0067B6;
  border: 0.754px solid #005596;
  border-radius: 3px;
  padding: 8px 16px;
  text-decoration: none;
  background: transparent;
  margin-top: var(--space-s);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}
.footer-grid h4 { font-size: 18px; margin-bottom: var(--space-s); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--space-xs); font-size: 14px; line-height: 20px; }
.footer-grid a { color: var(--color-text-muted); text-decoration: none; }

.breadcrumb { font-size: 14px; color: var(--color-text-muted); margin-bottom: var(--space-m); }
.article-body { max-width: 760px; }
.article-body h2 { margin-top: var(--space-xl); }

.hero-band {
  background: linear-gradient(100deg, #0A1230 0%, #0B1F5C 45%, #1B3FA8 100%);
  color: #FFFFFF;
  border-radius: 0;
  padding: var(--space-xxl) var(--margin-page);
  margin: 0 calc(var(--margin-page) * -1);
  max-width: none;
}
.hero-band h1 { color: #FFFFFF; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.5rem, 1.5rem + 3.2vw, 5.125rem); line-height: 1.2; max-width: 14ch; }
.hero-band .lead { font-family: var(--font-heading); font-size: 21px; line-height: normal; color: #FFFFFF; max-width: 647px; }

/* ---------- Homepage sections (Figma: Final-Updated BG-V3) ---------- */

.body-figma { font-family: var(--font-body); font-size: 17.7px; line-height: 27.9px; color: var(--color-neutral-dark); }
.body-poppins { font-family: var(--font-heading); font-size: 17px; line-height: 27px; color: var(--color-text); }

.partner-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 60px var(--space-l);
  margin-top: var(--space-l);
}
.partner-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: var(--space-s);
  display: block;
  min-height: 42px;
}

.community-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; margin-top: var(--space-l); }
.community-item { border-top: 1px solid var(--color-neutral-light); padding: var(--space-m) 0; }
.community-kicker { font-family: var(--font-heading); font-weight: 500; font-size: 16px; text-transform: uppercase; color: var(--color-neutral-dark); margin: 0; }
.community-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  background: linear-gradient(90deg, #124CA3 0%, #148FE9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 4px 0 var(--space-s);
}
.community-title.green { background: linear-gradient(90deg, #5ED4B5 0%, #38A386 100%); -webkit-background-clip: text; background-clip: text; }
.community-title.blue-dark { background: linear-gradient(90deg, #0073CB 0%, #00355E 100%); -webkit-background-clip: text; background-clip: text; }
.community-stat { font-family: var(--font-heading); font-weight: 600; font-size: 21px; color: #293682; margin-right: var(--space-l); }
.community-stat-caption { font-family: var(--font-heading); font-weight: 300; font-size: 16px; line-height: 22px; color: var(--color-text); }
.pill {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 19px;
  color: #000;
  background: #F4F9FF;
  border: 1px solid #00355E;
  border-radius: 20px;
  padding: 6px 20px 6px 36px;
  margin-top: var(--space-s);
}
.community-photos {
  background: #C5D9F0;
  border-radius: 11px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.community-photos .media-placeholder { margin: 0; border-radius: 0; aspect-ratio: 4 / 3; }
.community-photos .wide { grid-column: 1 / -1; aspect-ratio: 16 / 7; }

.testimonial-card {
  background: #D7EDFF;
  border-radius: 14px;
  padding: var(--space-l);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l);
  box-shadow: 3px 6px 16px rgba(179, 187, 193, 0.1), 12px 27px 29px rgba(179, 187, 193, 0.09);
}
.testimonial-card .quote-mark { font-family: var(--font-heading); font-size: 48px; line-height: 1; color: #6BA5FF; margin-bottom: var(--space-s); }
.testimonial-card p { font-family: var(--font-heading); font-size: 17px; line-height: 27px; color: #000; }
.testimonial-author { display: flex; gap: var(--space-s); align-items: center; margin-top: var(--space-l); }
.avatar { width: 59px; height: 59px; border-radius: 50%; background: var(--color-primary-100); flex-shrink: 0; }
.testimonial-author strong { font-family: var(--font-heading); font-weight: 600; font-size: 14px; display: block; color: #000; }
.testimonial-author span { font-family: var(--font-heading); font-size: 14px; line-height: 18px; color: #000; }

.offices-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.offices-block h2 { margin-bottom: var(--space-s); }

.footer-figma { border-top: 1px solid var(--color-neutral-light); padding-top: var(--space-xl); }
.footer-figma .footer-intro { max-width: 930px; font-family: var(--font-heading); font-size: 16px; line-height: 24px; color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.footer-socials { display: flex; gap: var(--space-s); margin-top: var(--space-m); font-size: 14px; }
.footer-socials a { color: var(--color-text-muted); text-decoration: none; }

@media (max-width: 1024px) {
  .community-block, .offices-block, .testimonial-card { grid-template-columns: 1fr; }
  .partner-name { font-size: 26px; }
  .community-title { font-size: 24px; }
}

/* ---------- Header (Figma homepage: black bar, 77px) ---------- */
.site-header {
  max-width: none;
  margin: 0;
  background: #000000;
  color: #FFFFFF;
  height: 77px;
  padding: 0 clamp(16px, 6.25vw, 120px);
  flex-wrap: nowrap;
  gap: var(--space-l);
}
.site-header .site-title { color: #FFFFFF; font-family: var(--font-heading); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; }
.site-header nav { gap: clamp(20px, 3.2vw, 60px); flex-wrap: nowrap; }
.site-header nav a { color: #FFFFFF; font-family: var(--font-heading); font-size: 20px; text-decoration: none; white-space: nowrap; }
.site-header nav a:hover { text-decoration: underline; }
.btn-contact {
  display: inline-block;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .site-header { height: auto; padding: var(--space-s) 16px; }
  .site-header nav { flex-wrap: wrap; }
}

/* Pull the full-width hero up under the header (main has top padding). */
.hero-carousel { margin-top: calc(-1 * var(--space-m)); }

.header-tools { display: flex; align-items: center; gap: 14px; }
.icon-btn { all: unset; cursor: pointer; color: #FFFFFF; display: inline-flex; padding: 4px; }
.icon-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.header-divider { width: 1px; height: 28px; background: #FFFFFF; }

/* ---------- Stats row (Figma) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l); margin: 96px 0 0; }
.stat { text-align: left; }
.stat-icon { width: 80px; height: 80px; object-fit: contain; margin-bottom: var(--space-s); }
.stat-number {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 33px;
  line-height: 45.6px;
  background: linear-gradient(90deg, #4597D3 0%, #005596 32%, #005596 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-xs);
}
.stat-caption { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 28px; color: #000000; margin: 0; max-width: 260px; }
@media (max-width: 1024px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stats { grid-template-columns: 1fr; } }

/* ---------- What We Do intro (centered) and spacing ---------- */
.section-wwd { margin-top: 128px; }
.wwd-intro { text-align: center; margin-bottom: var(--space-l); }
.wwd-intro .lead { margin-left: auto; margin-right: auto; }