:root {
  --ink: #15263f;
  --ink-2: #45536b;
  --muted: #6b7688;
  --line: #e3e8ef;
  --line-2: #c9d2de;
  --paper: #ffffff;
  --soft: #f5f7fa;
  --night: #12203a;
  --blue: #1f6fb2;
  --green: #3e9c3a;
  --green-2: #7bc96a;
  --shadow: 0 16px 42px rgba(21, 38, 63, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  color: var(--ink-2);
  background: var(--paper);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Stops iOS from inflating body copy when a phone is rotated to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--ink); }
input, select, textarea, button { font: inherit; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.narrow { width: min(780px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: clamp(52px, 8vw, 104px) 0; }
.section-sm { padding: clamp(40px, 6vw, 80px) 0; }
.band { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dark { background: var(--night); color: #fff; }
.eyebrow {
  margin: 0 0 16px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dark .eyebrow { color: var(--green-2); }
/* The home page runs an oversized eyebrow. At 24px with this much tracking it
   wraps and outshouts the headline on a phone, so it scales with the viewport. */
body[data-page="home"] .eyebrow { font-size: clamp(15px, 2.6vw, 24px); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); letter-spacing: 0; line-height: 1.14; }
.dark h1, .dark h2, .dark h3 { color: #fff; }
h1 { margin-bottom: 20px; font-size: clamp(36px, 5vw, 58px); font-weight: 700; max-width: 18ch; text-wrap: balance; }
h2 { margin-bottom: 18px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; text-wrap: balance; }
h3 { margin-bottom: 12px; font-size: 21px; font-weight: 600; }
.lead { color: var(--ink-2); font-size: 18px; line-height: 1.65; max-width: 62ch; text-wrap: pretty; }
.dark .lead, .dark p { color: #9fb0c8; }
.copy { font-size: 17px; line-height: 1.65; text-wrap: pretty; }

.hero-photo {
  position: relative;
  background-image:
    linear-gradient(115deg, rgba(10, 18, 32, 0.78) 0%, rgba(13, 23, 40, 0.5) 32%, rgba(13, 23, 40, 0.15) 58%),
    linear-gradient(0deg, rgba(9, 16, 28, 0.95) 0%, rgba(13, 23, 40, 0.55) 45%, rgba(21, 38, 63, 0.25) 100%),
    linear-gradient(rgba(13, 23, 40, 0.42), rgba(13, 23, 40, 0.42)),
    url('/assets/images/approbuilding.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}
.hero-photo .container { padding: clamp(96px, 18vw, 200px) 0 56px; }
.hero-photo .eyebrow { color: var(--green-2); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.hero-photo h1 { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5); }
.hero-photo .lead { color: #eaeff6; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.header-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 34px; width: auto; }
.desktop-nav { display: flex; align-items: center; gap: 24px; }
.desktop-nav a, .mobile-nav a { color: var(--ink); font-size: 15px; font-weight: 500; }
.desktop-nav a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--blue); font-weight: 700; }
.desktop-nav .btn-primary, .mobile-nav .btn-primary,
.desktop-nav .btn-primary:hover, .mobile-nav .btn-primary:hover { color: #fff; }
/* Header tap-to-call — selectors scoped to .desktop-nav so they outrank .desktop-nav a */
.desktop-nav .hdr-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.desktop-nav .hdr-phone svg { width: 15px; height: 15px; color: var(--green); flex: none; }
.desktop-nav .hdr-phone:hover { color: var(--green); }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; min-height: 42px; }
.has-subnav > .nav-link::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.sub-nav {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 230px;
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.sub-nav::before {
  content: "";
  position: absolute;
  top: -13px;
  right: 0;
  left: 0;
  height: 13px;
}
.sub-nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
}
.sub-nav a:hover, .sub-nav a:focus-visible {
  background: var(--soft);
  color: var(--ink);
}
.has-subnav:hover .sub-nav, .has-subnav:focus-within .sub-nav {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translate(-50%, 0);
}
.menu-toggle {
  position: relative;
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  z-index: 3;
}
.menu-toggle-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, calc(-50% + var(--bar-offset, 0px)));
  transition: transform 220ms ease, opacity 220ms ease;
}
.menu-toggle-bar:nth-child(1) { --bar-offset: -6px; }
.menu-toggle-bar:nth-child(3) { --bar-offset: 6px; }
.menu-toggle.open .menu-toggle-bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.menu-toggle.open .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle.open .menu-toggle-bar:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
.nav-backdrop {
  position: fixed;
  inset: 72px 0 0 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
  z-index: 1;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  /* dvh, not vh: on mobile Safari vh is the URL-bar-hidden height, which let the
     drawer run under the browser chrome and put the CTA out of reach. */
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 8px 24px 20px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}
.mobile-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mobile-nav a { display: block; padding: 12px 4px; font-size: 16px; }
.mobile-subnav {
  display: grid;
  gap: 2px;
  margin: -4px 0 8px;
  padding: 0 0 8px 16px;
  border-left: 2px solid var(--line);
}
.mobile-subnav a {
  padding: 11px 4px;
  color: var(--muted);
  font-size: 14.5px;
}
/* `.mobile-nav a` outranks `.btn`, which flattened the drawer CTA into a
   left-aligned text block. Re-assert the button box. */
.mobile-nav .btn {
  display: flex;
  width: 100%;
  margin-top: 14px;
  padding: 14px 26px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: #348432; color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #0e1a2e; color: #fff; }
.btn-outline { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: #fff; color: var(--ink); background: #fff; }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.btn-outline-light:hover { border-color: #fff; color: var(--ink); background: #fff; }
.btn-small { min-height: 42px; padding: 10px 20px; font-size: 15px; }

/* Language toggle (careers pages) */
.lang-toggle-row { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--green-2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lang-toggle:hover { background: var(--green); border-color: var(--green); }
.lang-toggle .lang-toggle-icon { font-size: 17px; line-height: 1; }
/* On light sections the toggle needs dark text */
.section .lang-toggle, .band .lang-toggle { color: var(--ink); background: transparent; }
.section .lang-toggle:hover, .band .lang-toggle:hover { color: #fff; background: var(--green); }

.hero-grid, .split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
.hero {
  min-height: calc(100svh - 72px - 300px);
  display: flex;
  align-items: center;
  padding: clamp(32px, 5vw, 64px) 0;
  background: linear-gradient(180deg, #eef5fa 0%, #ffffff 82%);
}
.headline-accent { color: var(--green); }

/* Landing fold: hero grows so the stat bar bottom-aligns to the first screen */
.hero-fold {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 72px);
}
.hero-fold .hero-airport { flex: 1 1 auto; }

/* Home hero — airport background, left overlay (treatment A: stronger scrim) */
.hero-airport {
  position: relative;
  min-height: clamp(460px, 62vh, 640px);
  padding: 0;
  background:
    linear-gradient(100deg, rgba(7, 13, 24, 0.95) 0%, rgba(9, 16, 28, 0.82) 40%, rgba(9, 16, 28, 0.4) 68%, rgba(9, 16, 28, 0) 88%),
    url('/assets/images/airport_hero_webp.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-airport .container { padding: clamp(28px, 5vh, 88px) 0; }
.hero-airport .hero-copy { max-width: 620px; }
.hero-airport .eyebrow { color: var(--green-2); }
.hero-airport h1 { color: #fff; }
.hero-airport .headline-accent { color: var(--green-2); }
.hero-airport .lead { color: #e7edf5; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.photo-frame {
  overflow: hidden;
  border-radius: 12px;
  background: #eef4f8;
  border: 1px solid var(--line);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-media { position: relative; padding-bottom: 24px; }
.hero-media .photo-frame { aspect-ratio: 4 / 3; border: none; }
.hero-media-cutout {
  display: grid;
  align-items: end;
  min-height: clamp(410px, 45vw, 560px);
  padding-bottom: 18px;
  isolation: isolate;
}
.hero-cutout-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(380px, 42vw, 520px);
}
.hero-cutout {
  position: relative;
  z-index: 1;
  width: min(88%, 500px);
  max-height: 540px;
  object-fit: contain;
  object-position: center bottom;
}
.hero-cutout-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 2% 8% 4% 8%;
  border-radius: 48% 48% 44% 44% / 58% 58% 42% 42%;
  background: linear-gradient(165deg, #e4eff8 0%, #e9f4e7 100%);
  border: 1px solid rgba(31, 111, 178, 0.10);
}
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 250px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}
.float-card .mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: #eaf4e9;
  color: var(--green);
}
.float-card .mark-blue { background: #e8f1f9; color: var(--blue); }
.float-top { top: 20px; right: -8px; }
.float-bottom { bottom: -2px; left: -8px; }
.hero-media-cutout .float-bottom { bottom: 28px; left: -14px; }

.cert-bar { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cert-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px 44px; padding: 28px 0; }
.cert-row p { margin: 0; flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.cert-logos { display: flex; flex: 1; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; }
/* The wordmark-shaped logos are only ~27px tall on their own. */
.cert-logos a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.cert-logos img { max-height: 78px; width: auto; }
.cert-logos .orange { max-height: 52px; }
.cert-logos .ieha { max-height: 138px; }
.cert-logos .cims { max-height: 116px; }

.check-list, .plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.check-list li { display: flex; gap: 13px; align-items: flex-start; line-height: 1.55; }
.check-mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 6px rgba(21, 38, 63, 0.25);
}
.check-mark svg { width: 13px; height: 13px; }
.check-list .copy-block { display: grid; gap: 3px; }
.check-list .item-title { font-weight: 700; color: var(--ink); }
.check-list .item-desc { color: var(--muted); font-size: 0.94em; line-height: 1.45; }
.num-list { list-style: none; margin: 0; padding: 0; }
.num-list li { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.num-list li:first-child { padding-top: 0; }
.num-list li:last-child { border-bottom: none; padding-bottom: 0; }
.num-mark {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.num-list .copy-block { display: grid; gap: 3px; }
.num-list .item-title { font-weight: 700; color: var(--ink); }
.num-list .item-desc { color: var(--muted); font-size: 0.94em; line-height: 1.45; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 250px 250px;
  gap: 16px;
}
.bento > div { position: relative; overflow: hidden; }
.bento-tint { background: linear-gradient(165deg, #e4eff8 0%, #e9f4e7 100%); border: 1px solid rgba(31, 111, 178, 0.10); }
.b-arch { display: flex; align-items: flex-end; justify-content: center; border-radius: 999px 999px 16px 16px; }
.b-arch img {
  width: 80%;
  max-height: 92%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 12px 14px rgba(21, 38, 63, 0.16));
}
.b-circle { border-radius: 50%; }
.b-circle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; }
.flip-x { transform: scaleX(-1); }
.b-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 26px;
  border-radius: 16px 16px 16px 100px;
  background: var(--night);
}
.b-stat strong { color: var(--green-2); font-size: 30px; }
.b-stat span { color: #c7d2e3; font-size: 13.5px; line-height: 1.5; }
.b-leaf {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  padding: 22px;
  border-radius: 100px 16px 100px 16px;
  background: linear-gradient(150deg, #3e9c3a 0%, #7bc96a 100%);
}
.b-leaf strong { color: #fff; font-size: 22px; line-height: 1.2; }
.b-leaf span { color: #eaf6e6; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

#stats { padding: clamp(22px, 3vh, 48px) 0; margin-top: -1px; position: relative; background: var(--soft); border-bottom: 1px solid var(--line); }
#stats .stat-value, #stats .stat-value span { color: var(--ink); }
#stats .stat-label { color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 40px; text-align: center; }
.stat-value { margin: 0; color: #fff; font-size: clamp(36px, 4vw, 48px); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-value span { color: var(--green-2); }
.stat-label { margin: 10px 0 0; color: #9fb0c8; font-size: 15px; font-weight: 700; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 40px; border-bottom: 1px solid var(--line); }
.tab {
  margin-bottom: -1px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
}
.tab[aria-selected="true"] { border-color: var(--green); color: var(--ink); }
.service-carousel-nav { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.car-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.car-arrow svg { width: 15px; height: 15px; }
.car-dots { display: flex; align-items: center; }
.car-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.car-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-2);
  transition: width 180ms ease, background 180ms ease;
}
.car-dot.active::after { width: 18px; border-radius: 4px; background: var(--green); }
.service-panel { display: none; padding-top: 24px; }
.service-panel.active { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.service-rings {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.service-rings .ring { position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%); }
.service-rings .r1 { bottom: 6%; width: 62%; aspect-ratio: 1 / 1; background: linear-gradient(165deg, #e4eff8 0%, #e9f4e7 100%); }
.service-rings .r2 { bottom: -1%; width: 80%; aspect-ratio: 1 / 1; border: 1.5px solid rgba(31, 111, 178, 0.22); }
.service-rings .r3 { bottom: -8%; width: 98%; aspect-ratio: 1 / 1; border: 1.5px dashed rgba(62, 156, 58, 0.35); }
.service-rings img {
  position: relative;
  z-index: 1;
  height: 96%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 12px 14px rgba(21, 38, 63, 0.16));
}
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
.tag { border: 1px solid var(--line-2); border-radius: 4px; padding: 6px 12px; color: var(--ink-2); font-size: 13px; font-weight: 600; }

.industry-list {
  border-top: 1px solid #dde3eb;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
}
.industry-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 6px;
  border-bottom: 1px solid #dde3eb;
  color: inherit;
  transition: background .15s ease, padding-left .15s ease;
}
.industry-ico {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--night);
  color: #fff;
}
.industry-row strong { display: block; color: var(--ink); font-size: clamp(16px, 1.6vw, 18px); }
.industry-row span span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.arrow { color: var(--green); font-size: 20px; font-weight: 700; opacity: 0; transition: opacity .15s ease; }
/* Touch browsers latch :hover after a tap, which left the shifted row and the
   revealed arrow stuck on. Gate both on a real pointer; without one the arrow
   just stays visible. */
@media (hover: hover) {
  .industry-row:hover { background: #fff; padding-left: 12px; }
  .industry-row:hover .arrow { opacity: 1; }
}
@media (hover: none) {
  .industry-row .arrow { opacity: 1; }
}

.contact-grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr); gap: clamp(36px, 6vw, 72px); align-items: start; }
.contact-detail { display: grid; gap: 22px; margin-top: 36px; }
.contact-row { display: flex; gap: 16px; align-items: flex-start; }
.contact-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  font-size: 16px;
}
.contact-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-detail a, .contact-address { color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.45; }
.form-card { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 6px; padding: 12px 14px; background: #fff; color: var(--ink); font-size: 16px; }
textarea { resize: vertical; }
.form-note { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 13.5px; }
.success { display: none; padding: 34px 12px; text-align: center; }
.success.active { display: block; }
.success-icon { width: 52px; height: 52px; display: inline-grid; place-items: center; border-radius: 50%; background: #eaf4e9; color: var(--green); font-size: 24px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; }
.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.card.pad { padding: 30px 28px; background: var(--soft); }
.card-number { color: var(--green); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; }
.post-card { display: flex; flex-direction: column; color: inherit; }
.post-card .photo-frame { aspect-ratio: 16 / 9; border: 0; border-radius: 0; }
.post-body { display: grid; gap: 10px; flex: 1; padding: 22px 24px 26px; }
.meta { color: var(--blue); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.meta span { color: #9fb0c8; font-weight: 500; letter-spacing: 0; text-transform: none; }
.post-title { color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1.3; }
.post-excerpt { color: var(--muted); font-size: 15px; line-height: 1.55; }
.read-more { margin-top: auto; color: var(--green); font-weight: 600; }
.testimonial { text-align: center; }
.testimonial.section { padding: clamp(44px, 5vw, 64px) 0; }
.testimonial .lead { margin-left: auto; margin-right: auto; }
blockquote { margin: 0 0 32px; color: var(--ink); font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; line-height: 1.5; text-wrap: balance; }
.avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--night); color: #fff; font-weight: 700; }
.testimonial.dark blockquote { color: #fff; }
.testimonial.dark strong { color: #fff; }
.testimonial.dark .avatar { background: var(--green); }
.testimonial.dark div span span { color: #9fb0c8; }

.newsletter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 36px; align-items: center; }
.newsletter form { display: flex; flex-wrap: wrap; gap: 12px; }
.newsletter label { flex: 1 1 240px; }
.newsletter input { border-color: #3a4c6b; background: #1b2c4a; color: #fff; }
body[data-page="article"] .newsletter input { border-color: var(--line-2); background: #fff; color: var(--ink); }

/* Shown in place of the article grid when there is nothing to list. */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(40px, 6vw, 68px) 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  text-align: center;
}
.empty-state .eyebrow, .empty-state h2 { margin-bottom: 0; }
.empty-state p:not(.eyebrow) { margin-bottom: 0; max-width: 46ch; color: var(--muted); font-size: 16px; line-height: 1.6; }
.empty-actions { width: min(460px, 100%); margin-top: 10px; }
.empty-actions form { display: flex; flex-wrap: wrap; gap: 12px; }
.empty-actions label { flex: 1 1 220px; }
@media (max-width: 560px) {
  .empty-actions form { flex-direction: column; align-items: stretch; }
  .empty-actions label { flex-basis: auto; }
}

.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 28px; }
.team-member { display: grid; justify-items: center; gap: 14px; text-align: center; }
.headshot {
  width: 184px;
  height: 184px;
  display: block;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f7fa, #dfe7f0);
  color: var(--ink);
  font-size: 32px;
  font-weight: 700;
  object-fit: cover;
  object-position: center top;
  border: 3px solid #fff;
  box-shadow: 0 10px 24px rgba(21, 38, 63, 0.12);
}
.headshot[src$="jonathan-jeon.jpeg"],
.headshot[src$="david-hwang.jpeg"],
.headshot[src$="david-yang.jpeg"] {
  object-position: center -10px;
}
.headshot[src$="allison-park.jpg"] {
  object-position: center -16px;
}
.headshot:not(img) { display: grid; place-items: center; }
.state-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.office-card { padding: 34px 32px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); }
.office-card .eyebrow { margin-bottom: 6px; letter-spacing: 0.12em; }
.office-card h3 { margin-bottom: 18px; font-size: 24px; }
.office-card p:not(.eyebrow) { margin-bottom: 16px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.office-card a { color: var(--ink); font-size: 16px; font-weight: 600; }
.office-card.featured { border-color: transparent; background: var(--night); color: #9fb0c8; }
.office-card.featured h3, .office-card.featured a { color: #fff; }
.office-card.featured .eyebrow { color: var(--green-2); }
.office-card.featured p:not(.eyebrow) { color: #9fb0c8; }
.coverage-cta { background: var(--soft); border-top: 1px solid var(--line); }
.coverage-cta-inner { padding: clamp(64px, 8vw, 96px) 0; text-align: center; }
.coverage-cta h2 { margin-bottom: 16px; font-size: clamp(26px, 3.2vw, 38px); }
.coverage-cta p { margin: 0 auto 32px; color: var(--ink-2); font-size: 17px; line-height: 1.65; text-wrap: pretty; }

.switcher { border-bottom: 1px solid var(--line); overflow-x: auto; }
.switcher .container { display: flex; gap: 2px 6px; }
.switcher a { padding: 16px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 700; white-space: nowrap; }
.switcher a.active { border-color: var(--green); color: var(--ink); }
.industry-pills { display: none; position: relative; border-bottom: 1px solid var(--line); }
.industry-pills-row { display: flex; gap: 4px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.industry-pills-row::-webkit-scrollbar { display: none; }
.industry-pill { flex: none; padding: 16px 10px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 700; white-space: nowrap; }
.industry-pill.active { border-color: var(--green); color: var(--ink); }
.industry-pills-fade { position: absolute; top: 0; right: 0; bottom: 0; width: 28px; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.article-body p { font-size: 17px; line-height: 1.75; }
.article-body h2 { margin-top: 36px; font-size: clamp(21px, 2.4vw, 26px); }

.site-footer { background: var(--soft); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 40px; padding: clamp(48px, 6vw, 72px) 0 0; }
.footer-logo { height: 30px; width: auto; margin-bottom: 16px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col span:first-child { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-col a, .footer-col address, .footer-grid p { color: var(--muted); font-size: 15px; line-height: 1.55; font-style: normal; }
.footer-bottom { margin-top: 40px; padding: 22px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.footer-bottom p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* Header row runs out of room well before the 900px mobile breakpoint. Measured:
   logo 183px + nav 805px (incl. the 129px phone link) = 988px of container with
   zero slack, i.e. a ~1036px viewport. Drop the phone first, with margin. */
@media (max-width: 1080px) {
  .desktop-nav .hdr-phone { display: none; }
}

/* Both hero scrims fade out horizontally, which is right on a wide screen and
   wrong on a narrow one: the copy spans the full column width and ends up over
   the bright part of the photo. Below the tablet breakpoint the scrim runs
   vertically instead, so the copy is legible at any width. */
@media (max-width: 860px) {
  .hero-airport {
    background:
      linear-gradient(180deg, rgba(7, 13, 24, 0.88) 0%, rgba(9, 16, 28, 0.8) 55%, rgba(9, 16, 28, 0.66) 100%),
      url('/assets/images/airport_hero_webp.webp');
    background-size: cover;
    background-position: 62% center;
    background-repeat: no-repeat;
  }
  .hero-photo {
    background-image:
      linear-gradient(180deg, rgba(7, 13, 24, 0.86) 0%, rgba(9, 16, 28, 0.78) 55%, rgba(9, 16, 28, 0.7) 100%),
      url('/assets/images/approbuilding.jpg');
    background-position: 72% center;
  }
}

/* Three stats, but auto-fit drops to two columns plus an orphan anywhere between
   the phone breakpoint and ~1000px. Pin the 3-up row through that range. */
@media (min-width: 621px) and (max-width: 1000px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
}

@media (max-width: 900px) {
  .container, .narrow { width: min(100% - 32px, 1140px); }
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .header-inner { position: relative; }
  body.nav-open { overflow: hidden; }
  .tabs { display: none; }
  .service-carousel-nav { display: flex; }
  .switcher { display: none; }
  .industry-pills { display: block; }
  .industry-list { grid-template-columns: 1fr; column-gap: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .float-card { position: static; margin-top: 12px; max-width: none; }
  .hero-media { padding-bottom: 0; }
  .hero-media-cutout { min-height: 0; }
  .hero-cutout-wrap { min-height: 380px; }
  .hero-cutout { width: min(76%, 420px); max-height: 430px; }

  /* Touch targets. These all render 17-27px tall from line-height alone, which
     is well under the ~44px a thumb needs. */
  .contact-detail a { display: inline-flex; align-items: center; min-height: 44px; }
  .office-card a { display: inline-flex; align-items: center; min-height: 44px; }
  /* gap because flex drops the whitespace before the trailing arrow span */
  a.read-more { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; }
  .footer-col { gap: 2px; }
  .footer-col span:first-child { margin-bottom: 8px; }
  .footer-col a, .footer-col address { padding: 9px 0; }
  .car-arrow { width: 44px; height: 44px; }
  .car-dot { width: 30px; height: 40px; }
}

@media (max-width: 620px) {
  .hero { min-height: calc(100svh - 72px - 320px); }
  .form-grid { grid-template-columns: 1fr; }
  .bento { grid-template-rows: 185px 185px; gap: 12px; }
  .b-stat { padding: 20px; }
  .b-stat strong { font-size: 24px; }
  .b-leaf strong { font-size: 18px; }
  .industry-row { grid-template-columns: 44px 1fr; }
  .industry-row .arrow { display: none; }
  .btn { width: 100%; }
  .newsletter form { flex-direction: column; align-items: stretch; }
  .newsletter label { flex-basis: auto; }
  .hero-cutout-wrap { min-height: 340px; }
  .hero-cutout { width: min(84%, 360px); max-height: 380px; }
  .cert-row { flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 24px 0; }
  .cert-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 22px 20px;
    width: 100%;
    max-width: 300px;
  }
  .cert-logos img { max-height: 48px; }
  .cert-logos .orange { max-height: 36px; }
  .cert-logos .ieha { max-height: 86px; }
  .cert-logos .cims { max-height: 72px; }
  /* Near-square artwork, so the shared 48px cap left it reading half the size
     of the CIMS and IEHA marks beside it. */
  .cert-logos .nmsdc { max-height: 68px; }

  /* Stacked and centered, the three stats ate ~650px of the first scroll and
     pushed the fold well past one screen. Value-beside-label keeps all three
     in view. */
  .stats { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .stats > div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-2);
  }
  .stats > div:last-child { border-bottom: 0; }
  .stat-value { flex: none; min-width: 4.1em; font-size: 30px; }
  .stat-label { margin: 0; }
  #stats .stat-label { font-size: 11.5px; line-height: 1.45; letter-spacing: 0.06em; }

  .hero-photo .container { padding: 72px 0 48px; }

  /* One 184px headshot per row turned nine leaders into ~2,600px of scrolling. */
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .headshot {
    width: 100%;
    max-width: 184px;
    height: auto;
    aspect-ratio: 1 / 1;
    font-size: 26px;
  }
  .team-member p { margin-bottom: 0; }
}