/* Brand colors */
:root {
  /* --brand-dark: #00192a; */
  --brand-med: #0062a9;
  --brand-light: #00aeef;
  --brand-dark: color-mix(in srgb, var(--brand-med) 25%, black);
  --brand-tint: color-mix(in srgb, var(--brand-dark) 5%, white);
  --mid-gray: color-mix(in srgb, var(--brand-dark) 67%, white);
}

.bg-brand-dark { background-color: var(--brand-dark); }
.bg-brand-med { background-color: var(--brand-med); }
.bg-brand-light { background-color: var(--brand-light); }
.brand-dark { color: var(--brand-dark); }
.brand-med { color: var(--brand-med); }
.brand-light { color: var(--brand-light); }
.brand-tint { color: var(--brand-tint); }
.b--brand-med { border-color: var(--brand-med); }
.b--brand-dark { border-color: var(--brand-dark); }
.bg-brand-tint { background-color: var(--brand-tint); }
.b--brand-dark-10 { border-color: color-mix(in srgb, var(--brand-dark) 10%, transparent); }
.bg-brand-dark-60 { background-color: color-mix(in srgb, var(--brand-dark) 60%, transparent); }
.bg-brand-dark-80 { background-color: color-mix(in srgb, var(--brand-dark) 80%, transparent); }

.mid-gray { color: var(--mid-gray); }

/* Brand-dark headings inside content pages */
.nested-copy-line-height h1,
.nested-copy-line-height h2,
.nested-copy-line-height h3,
.nested-copy-line-height h4,
.nested-copy-line-height h5,
.nested-copy-line-height h6 {
  color: var(--brand-dark);
  font-family: inherit;
}

/* Accessibility: override Ananke's default link blue (#357edd) with the
   eyebrow brand color so body-content links meet WCAG AA contrast on white. */
.nested-links a,
.nested-links a:visited {
  color: var(--brand-med);
}

.nested-links a:hover,
.nested-links a:focus {
  color: var(--brand-dark);
}

.it43-home {
  letter-spacing: -0.005em;
  margin-bottom: -2rem;
}

.it43-card {
  min-height: 100%;
}

.it43-button-primary {
  background: var(--brand-med);
  color: #ffffff;
  border: 1px solid var(--brand-med);
}

.it43-button-primary:hover,
.it43-button-primary:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.it43-button-secondary {
  background: #ffffff;
  color: var(--brand-med);
  border: 1px solid var(--brand-med);
}

.it43-button-secondary:hover,
.it43-button-secondary:focus {
  background: #edf6fc;
}

.it43-button-light {
  background: #ffffff;
  color: var(--brand-med);
  border: 1px solid #ffffff;
}

.it43-button-light:hover,
.it43-button-light:focus {
  background: #edf6fc;
}

.it43-link {
  border-bottom: 2px solid currentColor;
}

.it43-services-link:hover,
.it43-services-link:focus {
  color: var(--brand-light);
}

/* Override Tachyons light-blue to use brand color in trust bar */
.bg-brand-dark .light-blue {
  color: var(--brand-light);
}

.gap-3 {
  gap: 1rem;
}

.mt-auto {
  margin-top: auto;
}

/* Services grid with subgrid for cross-card alignment */
.it43-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media screen and (min-width: 60em) {
  .it43-services-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 0;
  }

  .it43-services-grid--2col {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }

  .it43-services-item {
    grid-row: span 5;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .it43-services-link {
    align-self: end;
  }

  /* Featured single-card layout: spans both columns, with bullets pulled
     to the right so the horizontal space is used deliberately. */
  .it43-services-item--wide {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    align-items: start;
  }

  .it43-services-item--wide > :not(ul) {
    grid-column: 1;
  }

  .it43-services-item--wide > ul {
    grid-column: 2;
    /* Place the bullets at the same grid row as the text paragraph
       (row 1 = subtitle, row 2 = title, row 3 = text, row 4 = link),
       so the first bullet is top-aligned with the first sentence.
       The large span just needs to exceed the number of col-1 children;
       unused rows collapse to zero height. */
    grid-row: 3 / span 99;
    margin-top: 0;
    align-self: start;
  }
}

/* Responsive logo: smaller on mobile */
nav[role="navigation"] img {
  height: 2.5rem;
  width: auto;
}

@media screen and (min-width: 60em) {
  nav[role="navigation"] img {
    height: auto;
    max-height: none;
  }
}

/* Hamburger button */
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  position: relative;
  transition: transform 0.2s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
}

.hamburger-icon::before { top: -0.5rem; }
.hamburger-icon::after  { top:  0.5rem; }

/* Mobile menu */
.mobile-menu {
  display: none;
  padding-top: 0.75rem;
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-link {
  display: block;
  padding: 0.75rem 0;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 1rem;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus {
  color: #fff;
}

/* Mobile submenus: hidden until parent toggled */
.mobile-submenu {
  display: none;
}

.mobile-menu-item.is-open > .mobile-submenu {
  display: block;
}

/* Hide mobile menu elements on desktop */
@media screen and (min-width: 60em) {
  .hamburger-btn { display: none; }
  .mobile-menu   { display: none !important; }
}

/* Dropdown navigation */
.dropdown-nav {
  position: relative;
}

.dropdown-nav > a {
  cursor: pointer;
}

.dropdown-nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  background: var(--brand-dark);
  min-width: 16rem;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dropdown-nav:hover .dropdown-nav-menu,
.dropdown-nav:focus-within .dropdown-nav-menu {
  display: block;
}

.dropdown-nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-nav-link:hover,
.dropdown-nav-link:focus {
  background: var(--brand-med);
  color: #fff;
}

/* Responsive center: only auto-margin at large breakpoint */
@media screen and (min-width: 60em) {
  .center-l {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Fixed height for all page headers */
body > header {
  min-height: 50vh;
}

body > header > div {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 0 !important;
}

/* Text content area fills remaining space after nav */
body > header > div > div:last-child {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Title: anchor last line to the midpoint */
body > header > div > div:last-child > :first-child {
  align-self: end;
}

/* Subtitle: anchor first line to the midpoint */
body > header > div > div:last-child > :nth-child(2) {
  align-self: start;
}