/* =========================================================
   Northbridge Construction Consulting — Home page styles
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --navy: #1b2f5b;
  --navy-dark: #14244a;
  --blue: #2a5db0;
  --blue-light: #eaf1fb;
  --tint: #f5fafe;
  --tint-strong: #e0eefb;
  --yellow: #f7c447;
  --yellow-dark: #e8b52e;
  --text: #4a5568;
  --text-light: #6b7688;
  --border: #d9e2ef;
  --white: #ffffff;
  --ph-bg: #dfe6f0;
  --ph-fg: #7a8699;

  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", cursive;

  --container: 1200px;
  --gutter: 24px;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(27, 47, 91, 0.10);
  --transition: 0.2s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Horizontal overflow is clipped on both html and body: mobile browsers can
   still pan sideways when it is only hidden on body. "clip" (unlike "hidden")
   does not create a scroll container, so the sticky header keeps working;
   the "hidden" on body is the fallback for browsers without "clip". */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); color: var(--navy); line-height: 1.2; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
a { color: var(--blue); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: 28px 0; }
.section--tint { background: var(--tint); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.section__title {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  margin-bottom: 8px;
}
.section__lead {
  font-size: 15px;
  color: var(--text);
  max-width: 720px;
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn--primary { background: var(--yellow); color: var(--navy); }
.btn--primary:hover { background: var(--yellow-dark); box-shadow: 0 4px 14px rgba(247, 196, 71, 0.45); }
.btn--lg { padding: 14px 26px; font-size: 15px; }
.btn__icon, .btn__arrow { width: 18px; height: 18px; flex: 0 0 auto; }
.btn__arrow { width: 16px; height: 16px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
}
.text-link:hover { text-decoration: underline; }
.text-link--sm { font-size: 13px; }
.text-link__arrow { width: 14px; height: 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition);
}
.chip:hover { background: #dbe7f8; }
.chip__arrow { width: 12px; height: 12px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--navy);
  transition: background var(--transition);
}
.icon-btn:hover { background: var(--tint); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- Brand ---------- */
/* The logo never shrinks or squeezes: it opts out of the global img max-width and of flex shrinking. */
/* The logo is 35px tall but may shrink (keeping its proportions) when the
   header is too narrow for both the logo and the menu button. */
.brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.brand__img { display: block; width: auto; height: auto; max-height: 35px; max-width: 100%; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: 28px; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  padding: 8px 0;
}
.nav__link:hover { color: var(--blue); }
.nav__chev { width: 14px; height: 14px; }
.nav__mobile-only, .nav__cta { display: none; }

.header__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.header__cta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.header__cta .btn { font-size: 13px; padding: 10px 18px; }

.menu-toggle { display: none; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(90deg, #ffffff 0%, #f6f8fc 100%);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: 460px;
}
.hero__content { padding: 56px 40px 56px 0; max-width: 520px; }
.hero__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 600;
  margin-bottom: 16px;
}
.hero__lead { font-size: 15px; margin-bottom: 24px; }

/* On very wide screens the hero media stops growing: the layout freezes at --hero-max
   and centres, so the image never spans the whole viewport or covers the copy. */
.hero { --hero-max: 1920px; }
.hero__media {
  position: absolute;
  top: 0;
  right: max(0px, calc((100% - var(--hero-max)) / 2));
  bottom: 0;
  width: min(55%, calc(var(--hero-max) * 0.55));
}
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(246,248,252,1) 0%, rgba(246,248,252,0) 30%);
  pointer-events: none;
}
.hero__badge {
  position: absolute;
  z-index: 2;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hero__handwritten {
  font-family: var(--font-hand);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  transform: rotate(-6deg);
  position: relative;
  padding-bottom: 6px;
}
.hero__handwritten::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--yellow);
  border-radius: 2px;
}
.hero__pill {
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: 4px;
}

/* Home hero (desktop): the photo carries its own fade to white on the left. It spans the
   container's content width, like the sections below, and the copy sits over the faded
   part. The background matches the photo's left edge so the fade has no seam. */
@media (min-width: 768px) {
  .hero--home { background: #fbfcfc; }
  /* Tall enough to show the whole photo at full content width. */
  .hero--home .hero__inner {
    position: relative;
    min-height: calc((min(100vw, var(--container)) - var(--gutter) * 2) * 460 / 1056);
  }
  .hero--home .hero__content { position: relative; z-index: 2; }
  /* Soft wash behind the copy; it only shows where the photo reaches the text. */
  .hero--home .hero__content::before {
    content: "";
    position: absolute;
    top: -100vh;
    bottom: -100vh;
    left: -100vw;
    right: -40px;
    z-index: -1;
    background: linear-gradient(90deg, rgba(251,252,252,0.88) calc(100% - 120px), rgba(251,252,252,0));
    pointer-events: none;
  }
  /* Shifted up 2px to hide a 1px blue line along the photo's top edge. When the copy
     makes the hero taller than the photo, the faded left side is what gets trimmed. */
  .hero--home .hero__media {
    top: -2px;
    bottom: 0;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }
  .hero--home .hero__img { object-position: right center; }
  .hero--home .hero__media::before { display: none; }
  /* Badge sits in the sky left of the advisor (positions are in photo coordinates). */
  .hero--home .hero__badge { right: 36%; top: 14%; transform: none; }
}
/* Below 1200px there is no room between the copy and the advisor for the badge. */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero--home .hero__badge { display: none; }
}
/* Home hero (mobile): keep the advisor and vest logo in view by trimming the faded left
   side, and pull the photo up 2px to hide the 1px blue line along its top edge. */
@media (max-width: 767px) {
  .hero--home .hero__media { overflow: hidden; }
  .hero--home .hero__img {
    display: block;
    height: calc(100% + 2px);
    margin-top: -2px;
    object-position: right center;
  }
}

/* ---------- Trust bar ---------- */
.trust { border-bottom: 1px solid var(--border); }
.trust__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 18px 0;
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 44px;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.4;
  border-left: 1px solid var(--border);
}
.trust__item:first-child { border-left: 0; }
.trust__icon { width: 36px; height: 36px; color: var(--navy); flex: 0 0 auto; }
.trust__icon--img { object-fit: contain; }

/* ---------- Services ---------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 22px 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow var(--transition), transform var(--transition);
}
.service:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.service__icon { width: 40px; height: 40px; color: var(--navy); }
.service__body { flex: 1 1 auto; }
.service__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.service__desc { font-size: 12.5px; color: var(--text); }

.services__general {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 28px;
  position: relative;
  padding-top: 20px;
}
.services__general::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: var(--border);
}
.services__general p { font-size: 13px; color: var(--text); }

/* ---------- Process ---------- */
.process__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 28px;
}
.step { padding-right: 8px; }
.step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}
.step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--navy);
}
.step__icon svg { width: 26px; height: 26px; }
.step__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.step__desc { font-size: 13px; }
.process__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  padding-top: 18px;
}
.process__arrow svg { width: 22px; height: 22px; }

/* ---------- Founder ---------- */
.founder__inner {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;
  gap: 40px;
  align-items: center;
}
.founder__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.founder__eyebrow--mobile { display: none; }
.founder__name { font-size: 30px; font-weight: 600; margin-bottom: 4px; }
.founder__role { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 14px; }
.founder__bio { font-size: 14px; margin-bottom: 22px; }
.founder__stats {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 36px;
  border-left: 1px solid var(--border);
}
.stat__value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
}
.stat__label { font-size: 13px; color: var(--text); margin-top: 4px; }

/* ---------- Snapshot ---------- */
.snapshot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: center;
}
.checklist { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--navy); }
.checklist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--white);
  flex: 0 0 auto;
}
.checklist__icon svg { width: 16px; height: 16px; }

.snapshot__media { display: flex; justify-content: center; }
.snapshot__doc {
  width: 210px;
  background: var(--white);
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(27, 47, 91, 0.18);
  transform: rotate(-7deg);
  color: var(--navy);
}
.snapshot__doc-brand { height: 22px; width: auto; margin-bottom: 12px; }
.snapshot__doc-title {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 12px;
}
.snapshot__doc-photo {
  width: 100%;
  aspect-ratio: 13 / 5;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 12px;
}
.snapshot__doc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the crop is tilted like the mockup; counter-rotate it so the card's own tilt restores it */
  transform: rotate(7deg) scale(1.15);
}
.snapshot__doc-meta { font-size: 9.5px; line-height: 1.6; color: var(--text); }
.snapshot__doc-meta strong { color: var(--navy); }

.snapshot__aside-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.snapshot__aside p { font-size: 14px; }

/* ---------- Partners ---------- */
.partners { padding: 24px 0; }
.partners__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.partners__lead { font-size: 15px; color: var(--navy); }
.partners__link { flex: 0 0 auto; margin-top: 4px; }
.partners__link--mobile { display: none; }
.partners__logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin-top: 26px;
}
.partners__logos img { height: 32px; width: auto; }
.partners__logos img.logo--tall { height: 54px; }

/* ---------- Resources ---------- */
.resources { padding-top: 24px; padding-bottom: 32px; }
.resources__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.resources__head .section__title { font-size: 22px; }
.resources__head .section__lead { font-size: 14px; }
.resources__link { flex: 0 0 auto; margin-top: 4px; }
.resources__link--mobile { display: none; }
.resources__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.resource {
  display: flex;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow var(--transition);
}
.resource:hover { box-shadow: var(--shadow); }
.resource__thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
}
.resource__body { display: flex; flex-direction: column; gap: 4px; }
.resource__type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.resource__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.resource__desc { font-size: 12px; margin-bottom: 4px; }

/* ---------- Footer (white, per the About page design) ---------- */
.footer {
  background: var(--white);
  color: #1f2937;
  font-size: 14px;
}
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 60px 0 36px;
}
.footer__brand { flex: 0 0 auto; }
.footer .brand__img { height: 35px; }
.footer__tagline {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.footer__nav { display: flex; align-items: center; gap: 22px; margin-left: auto; margin-right: 56px; }
.footer__link {
  font-size: 16px;
  line-height: 1.2;
  color: var(--navy);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.footer__link:hover { color: var(--blue); }
.footer__link[aria-current="page"] { border-bottom-color: var(--navy); }
.footer__social { display: flex; gap: 16px; flex: 0 0 auto; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #d5e7f0;
  border-radius: 4px;
  color: var(--navy);
}
.footer__social a:hover { background: var(--tint); }
.footer__social svg { width: 20px; height: 20px; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #d5e7f0;
  padding: 36px 0 44px;
}
.footer__copy { margin: 0; }
.footer__legal { display: flex; gap: 16px; margin: 0; }
.footer__legal a { color: #1f2937; text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover { color: var(--navy); }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ----- Tablet ----- */
@media (max-width: 1100px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process__steps { grid-template-columns: 1fr 1fr; }
  .process__arrow { display: none; }
  .founder__inner { grid-template-columns: 220px minmax(0, 1fr); }
  .founder__stats {
    grid-column: 1 / -1;
    flex-direction: row;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 24px;
    gap: 40px;
  }
  .snapshot__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .snapshot__aside { grid-column: 1 / -1; }
  .resources__grid { grid-template-columns: 1fr; max-width: 560px; }
  .footer__top { flex-wrap: wrap; row-gap: 28px; }
  .footer__nav { order: 3; width: 100%; margin: 0; }
}

@media (max-width: 960px) {
  .header__cta { display: none; }
  .nav__list { gap: 20px; }
  .hero__content { padding-right: 24px; }
  .hero__media { width: 48%; }
  .hero__badge { right: 4%; }
  .hero__handwritten { font-size: 24px; }
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
  .section { padding: 32px 0; }
  .section__title { font-size: 24px; }
  .eyebrow { font-size: 12px; }

  /* Header / mobile nav */
  .header__inner { min-height: 64px; }
  .header__actions .icon-btn[aria-label="Search"] { display: none; }
  .menu-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 8px var(--gutter) 20px;
    /* Scroll inside the menu when it is taller than the screen (small phones, landscape). */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--border); }
  .nav__link { justify-content: space-between; padding: 14px 0; font-size: 15px; }
  .nav__mobile-only { display: block; }
  .nav__cta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
  .nav__cta .btn { width: 100%; justify-content: center; }

  /* Hero */
  .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero__content { padding: 32px 0 28px; max-width: none; }
  .hero__title { font-size: 30px; }
  .hero .btn--lg { width: 100%; justify-content: center; }
  .hero__media {
    position: relative;
    width: calc(100% + var(--gutter) * 2);
    margin: 0 calc(var(--gutter) * -1);
    height: 340px;
  }
  .hero__media::before { display: none; }
  .hero__badge { display: none; }

  /* Trust */
  .trust { border-bottom: 0; }
  .trust__list { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 0 8px; }
  .trust__item { border-left: 0; padding: 0; font-size: 14px; }

  /* Services */
  .services__grid { grid-template-columns: 1fr; gap: 12px; }
  .service {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "icon body"
      "icon chip";
    column-gap: 16px;
    row-gap: 10px;
    text-align: left;
    align-items: start;
    padding: 18px 16px;
  }
  .service__icon { grid-area: icon; }
  .service__body { grid-area: body; }
  .service .chip { grid-area: chip; justify-self: start; }
  .services__general { text-align: center; }
  .services__general::before { left: 20%; right: 20%; }

  /* Process */
  .process__steps { grid-template-columns: 1fr; gap: 14px; }
  .step { padding-right: 0; }
  .process__arrow { display: flex; padding: 0; justify-content: center; }
  .process__arrow svg { transform: rotate(90deg); }

  /* Founder */
  .founder__inner { grid-template-columns: 1fr; gap: 20px; }
  .founder__eyebrow--mobile { display: block; margin-bottom: 0; }
  .founder__eyebrow--desktop { display: none; }
  .founder__img { max-width: 100%; }
  .founder__name { font-size: 28px; }
  .founder .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .founder__stats { flex-direction: column; gap: 18px; border-top: 0; padding-top: 0; }

  /* Snapshot */
  .snapshot__inner { grid-template-columns: 1fr; gap: 28px; }
  .snapshot__media { justify-content: center; padding: 12px 0 8px; }
  .snapshot__doc { transform: rotate(-4deg); }
  .snapshot__doc-photo img { transform: rotate(7deg) scale(1.15); }

  /* Partners */
  .partners__head { flex-direction: column; gap: 8px; }
  .partners__link { display: none; }
  .partners__link--mobile { display: inline-flex; margin-top: 22px; }
  .partners__logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
    justify-items: center;
    margin-top: 22px;
  }
  .partners__logos img { height: 28px; }
  .partners__logos img.logo--tall { height: 48px; }
  .partners { border-bottom: 1px solid var(--border); }

  /* Resources */
  .resources__head { flex-direction: column; }
  .resources__link { display: none; }
  .resources__link--mobile { display: inline-flex; margin-top: 22px; align-self: center; }
  .resources .container { display: flex; flex-direction: column; }
  .resources__grid { max-width: none; }
  .resource__thumb { flex-basis: 80px; width: 80px; height: 80px; }
  .resource__type { font-size: 12px; }

  /* Footer */
  .footer { text-align: center; }
  .footer__top {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 64px 0 24px;
  }
  .footer__brand { display: flex; flex-direction: column; align-items: center; }
  .footer .brand__img { height: 32px; }
  .footer__tagline { margin-top: 22px; font-size: 14px; }
  /* Three links per row, as in the design; a short final row stays centred. */
  .footer__nav {
    order: 0;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 34px;
    column-gap: 0;
    width: 100%;
    margin: 40px 0 32px;
  }
  .footer__link { flex: 0 0 33.333%; text-align: center; border-bottom: 0; }
  .footer__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
  .footer__social { justify-content: center; }
  .footer__bottom {
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 44px;
  }
  .footer__legal { justify-content: center; }
}

@media (max-width: 400px) {
  .hero__title { font-size: 27px; }
  .btn--lg { font-size: 14px; padding: 13px 18px; }
}

/* Very narrow phones: keep the hero button inside its column. */
@media (max-width: 359px) {
  /* header: tighter gutters so the full-size logo and the menu button fit at 320px */
  .header__inner { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .nav { padding-left: 16px; padding-right: 16px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero .btn--lg .btn__icon { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */

/* ---------- Active nav link ---------- */
.nav__link[aria-current="page"] {
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--navy);
}

/* ---------- Hero ---------- */
/* breathing room between the breadcrumb and the hero photo, as on the subpages */
.page-services .crumbs { padding-bottom: 14px; }
.hero--services .hero__inner { min-height: 320px; }
.hero--services .hero__content { padding: 36px 40px 36px 0; max-width: 480px; }
.hero--services .hero__title { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 12px; }
.hero--services .hero__lead { margin-bottom: 18px; }
.hero--services .hero__media { width: min(54%, calc(var(--hero-max) * 0.54)); }
.hero--services .hero__media::before {
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 22%);
}
.hero__note { font-size: 12px; color: var(--text); margin-top: 8px; }
.hero__tagline {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.7;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

/* Services hero (desktop): like the home hero, the photo spans the container's content
   width and the copy sits over its faded left side; a wash keeps the copy readable. */
@media (min-width: 768px) {
  .hero--services { background: #fff; }
  /* Tall enough to show the whole photo at full content width. */
  .hero--services .hero__inner {
    position: relative;
    min-height: calc((min(100vw, var(--container)) - var(--gutter) * 2) * 460 / 1056);
  }
  .hero--services .hero__content { position: relative; z-index: 2; }
  .hero--services .hero__content::before {
    content: "";
    position: absolute;
    top: -100vh;
    bottom: -100vh;
    left: -100vw;
    right: -40px;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255,255,255,0.88) calc(100% - 120px), rgba(255,255,255,0));
    pointer-events: none;
  }
  .hero--services .hero__media {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }
  .hero--services .hero__img { object-position: right center; }
  .hero--services .hero__media::before { display: none; }
}

/* ---------- Video ---------- */
.video__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: 980px;
}
.video__frame {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: var(--shadow);
}
.video__media { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Before playback the frame shows the poster, play button and caption; once playing,
   those overlays go and the browser's own controls take over. */
.video__frame:not(.is-playing) .video__media { cursor: pointer; }
.video__frame.is-playing .video__play,
.video__frame.is-playing .video__caption { display: none; }
.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform var(--transition);
}
.video__play svg { width: 28px; height: 28px; margin-left: 3px; }
.video__frame:hover .video__play { transform: scale(1.06); }
.video__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--white);
  padding: 8px 16px;
  min-width: 42%;
  line-height: 1.25;
}
.video__caption strong { font-size: 14px; }
.video__caption small { font-size: 11px; opacity: 0.9; }
.video__signature { height: 36px; width: auto; margin-top: 12px; }
.video__byline { font-size: 11px; color: var(--text); margin-top: 6px; line-height: 1.4; }
.video__byline strong { color: var(--navy); font-weight: 600; }

/* ---------- Services list ---------- */
.svc { padding-top: 12px; }
.svc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 14px;
}
.svc__head .section__title { margin-bottom: 0; }
.svc__list { display: flex; flex-direction: column; }
.svc__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 0.9fr) auto;
  align-items: center;
  gap: 24px;
  padding: 10px 12px 10px 0;
  border-top: 1px solid var(--border);
  border-radius: 6px;
  transition: background var(--transition), box-shadow var(--transition);
}
.svc__row:first-child { border-top: 0; }
.svc__row:hover { background: var(--tint); box-shadow: var(--shadow); }
.svc__thumb { width: 150px; height: 50px; object-fit: cover; border-radius: 4px; }
.svc__title { font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.svc__title a { color: var(--navy); }
.svc__title a:hover { color: var(--blue); }
.svc__desc { font-size: 12.5px; }
.svc__best {
  font-size: 12.5px;
  padding-left: 24px;
  border-left: 1px solid var(--border);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.svc__best strong { font-weight: 500; color: var(--text); }
.svc__more { padding-left: 24px; border-left: 1px solid var(--border); align-self: stretch; }

/* ---------- Ways to engage ---------- */
.engage {
  background: var(--tint);
}
.engage__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}
.engage__item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 4px 28px;
  border-left: 1px solid var(--border);
}
.engage__item:first-child { padding-left: 0; border-left: 0; }
.engage__icon { width: 44px; height: 44px; color: var(--navy); flex: 0 0 auto; }
.engage__title { font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.engage__desc { font-size: 13px; }

/* ---------- Founder + proof ---------- */
.proof { padding: 0; }
.proof__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 0;
}
.proof__founder {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 28px 28px 0;
}
.proof__photo { width: 120px; height: 124px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.proof__name { font-family: var(--font-body); font-size: 17px; font-weight: 700; }
.proof__role { font-size: 12px; color: var(--text); margin-bottom: 10px; }
.proof__bio { font-size: 13px; margin-bottom: 10px; }
.proof__experience {
  background: #f6f9fb;
  padding: 24px 0 20px 40px;
  position: relative;
}
.proof__experience::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 50vw;
  background: #f6f9fb;
}
.proof__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
  text-align: center;
}
.proof__stats .stat { border-left: 1px solid var(--border); }
.proof__stats .stat:first-child { border-left: 0; }
.proof__stats .stat__value { font-size: 26px; }
.proof__stats .stat__label { font-size: 12.5px; }
.proof__partners-lead {
  font-size: 12px;
  color: var(--text);
  text-align: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.proof__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 8px;
}
.proof__logos img { height: 22px; width: auto; }

/* ---------- Insights ---------- */
.insights { background: var(--tint); }
.insights__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 18px;
}
.insights__head .section__title { margin-bottom: 0; }
.insights__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.insight {
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(27, 47, 91, 0.06);
  transition: box-shadow var(--transition);
}
.insight:hover { box-shadow: var(--shadow); }
.insight__img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.insight__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.insight__type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.insight__title { font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1.3; }

/* ---------- CTA steps (services) ---------- */
.cta__steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--navy);
}
.cta__steps li { display: flex; align-items: center; gap: 12px; }
.cta__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.cta__step-arrow { color: var(--blue); }
.cta__step-arrow svg { width: 22px; height: 22px; }

/* ---------- Services page: responsive ---------- */
@media (max-width: 1100px) {
  .svc__row { grid-template-columns: 120px minmax(0, 1fr) auto; }
  .svc__thumb { width: 120px; height: 44px; }
  .svc__best { grid-column: 2; padding-left: 0; border-left: 0; }
  .svc__more { grid-column: 3; grid-row: 1 / span 2; }
  .insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof__inner { grid-template-columns: 1fr; }
  .proof__experience { padding: 24px 0; background: transparent; border-top: 1px solid var(--border); }
  .proof__experience::after { display: none; }
  .cta__steps { flex-wrap: wrap; justify-content: flex-start; row-gap: 12px; }
}

@media (max-width: 767px) {
  .hero--services .hero__content { padding: 28px 0 24px; max-width: none; }
  /* Full-bleed photo: override the 54% desktop width, which otherwise
     out-ranks the generic mobile .hero__media rule on specificity. */
  .hero--services .hero__media {
    width: calc(100% + var(--gutter) * 2);
    margin: 0 calc(var(--gutter) * -1);
    height: 260px;
  }
  .hero--services .hero__media::before { display: none; }
  .hero__tagline { right: 16px; top: auto; bottom: 16px; transform: none; font-size: 11px; }
  .hero__note { text-align: center; }

  .video__inner { grid-template-columns: 1fr; gap: 20px; }

  .svc__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .svc__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
    border-radius: 0;
  }
  .svc__row:hover { background: transparent; box-shadow: none; }
  .svc__thumb { width: 100%; height: 90px; }
  .svc__best, .svc__more { grid-column: 1; grid-row: auto; padding-left: 0; border-left: 0; }

  .engage { background-image: none; }
  .engage__list { grid-template-columns: 1fr; gap: 18px; }
  .engage__item { padding: 0; border-left: 0; }

  .proof__founder { flex-direction: column; padding: 24px 0; }
  .proof__stats { grid-template-columns: 1fr; text-align: left; gap: 14px; }
  .proof__stats .stat { border-left: 0; }
  .proof__partners-lead { text-align: left; }
  .proof__logos { justify-content: flex-start; gap: 28px; flex-wrap: wrap; }

  .insights__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .insights__grid { grid-template-columns: 1fr; }

  .cta__steps { flex-direction: column; align-items: flex-start; }
  .cta__step-arrow { display: none; }
}

/* =========================================================
   HEADER DROPDOWN (Services > Bid Support)
   ========================================================= */
.nav__item--has-sub { position: relative; }
.nav__sub {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 180px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 60;
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sublink {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
}
.nav__sublink:hover { background: var(--tint); color: var(--blue); }
.nav__sublink[aria-current="page"] { color: var(--blue); font-weight: 600; }

@media (max-width: 767px) {
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 16px;
    min-width: 0;
  }
  .nav__sublink { padding: 8px 0; font-size: 14px; }
  .nav__sublink:hover { background: transparent; }
}

/* =========================================================
   BID SUPPORT PAGE
   ========================================================= */
.page-bid {
  --bid-blue: #1f3c8c;
  --bid-tint: #f0f9fe;
  --bid-card: #e2f0fd;
  --bid-navy: #00388b;
}
.page-bid .eyebrow { color: var(--bid-blue); }
.page-bid .eyebrow--light { color: #cfe0f7; }
.bid-section { padding: 30px 0; }
.bid-section--tint { background: var(--tint); }
.bid-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  color: var(--bid-blue);
  line-height: 1.2;
  margin-bottom: 10px;
}
.bid-title--sm { font-size: 22px; margin-bottom: 0; }
.bid-lead { font-size: 14px; color: var(--text); }

/* ---------- Breadcrumb ---------- */
.crumbs { padding: 12px 0 0; }
.crumbs__list { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--text-light); }
.crumbs__list li + li::before { content: "\203A"; margin-right: 6px; }
.crumbs__list a { color: var(--text-light); }
.crumbs__list a:hover { color: var(--blue); }

/* ---------- Hero ---------- */
.bid-hero { padding: 18px 0 26px; }
.bid-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 40px;
  /* top-aligned with a fixed offset so the breadcrumb-to-eyebrow gap is the
     same on every service page, whatever the headline length */
  align-items: start;
}
.bid-hero__content { padding-top: 13px; }
@media (max-width: 1100px) {
  .bid-hero__content { padding-top: 0; }
}
.bid-hero__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 600;
  color: var(--bid-blue);
  margin: 12px 0 12px;
}
.bid-hero__lead { font-size: 15px; margin-bottom: 20px; max-width: 480px; }
.bid-hero__note { font-size: 11.5px; color: var(--text); margin-top: 10px; }
.bid-hero__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 326 / 223;
  box-shadow: var(--shadow);
}
.bid-hero__img { width: 100%; height: 100%; object-fit: cover; }
.bid-hero__badge {
  position: absolute;
  top: 6.3%;
  right: 0.3%;
  width: 46%;
  min-height: 28.3%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: rgba(255,255,255,0.96);
  color: var(--bid-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: 6px;
}

/* ---------- Trust + stats ---------- */
.bid-trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bid-trust__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 16px 0;
}
.bid-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text);
}
.bid-trust__item:first-child { border-left: 0; padding-left: 0; }
.bid-trust__item strong { display: block; font-size: 15px; color: var(--navy); }
.bid-trust__icon { width: 30px; height: 30px; color: var(--bid-blue); flex: 0 0 auto; object-fit: contain; }

/* ---------- Cards ---------- */
.bid-card {
  background: var(--bid-card);
  border-radius: 8px;
  padding: 22px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text);
}
.bid-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--bid-blue);
  margin-bottom: 6px;
}

/* ---------- Challenge ---------- */
.bid-challenge__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.bid-bestfor__img { width: 78px; height: auto; flex: 0 0 auto; }

/* ---------- Outcome ---------- */
.bid-outcome__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.bid-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bid-checks li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--navy); }
.bid-checks--compact { gap: 7px; margin-top: 0; }
.bid-checks--compact li { font-size: 13px; }
.bid-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bid-blue);
  color: var(--white);
  flex: 0 0 auto;
}
.bid-check svg { width: 12px; height: 12px; }
.bid-outcome__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 305 / 135;
}
.bid-outcome__img { width: 100%; height: 100%; object-fit: cover; }
.bid-outcome__caption {
  position: absolute;
  right: 0.3%;
  top: 8.1%;
  width: 45.2%;
  height: 48.1%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 10px;
  background: rgba(255,255,255,0.85);
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 600;
  color: var(--bid-blue);
  line-height: 1.3;
}

/* ---------- Process ---------- */
.bid-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
  text-align: center;
}
.bid-step { display: flex; flex-direction: column; align-items: center; }
.bid-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bid-blue);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}
.bid-step__title { font-size: 14px; font-weight: 700; color: var(--bid-blue); margin-bottom: 6px; max-width: 200px; }
.bid-step__desc { font-size: 12.5px; max-width: 210px; }
.bid-steps__arrow { display: flex; align-items: center; justify-content: center; color: var(--bid-blue); padding-top: 10px; }
.bid-steps__arrow svg { width: 26px; height: 26px; }

/* ---------- Package ---------- */
.bid-package__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 32px;
  align-items: center;
  margin-top: 8px;
}
.bid-package__img { width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow); }
.bid-sample__icon { width: 44px; height: 44px; color: var(--bid-blue); flex: 0 0 auto; }
.bid-sample .text-link { margin-top: 6px; }

/* ---------- Recent example ---------- */
.bid-example__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}
.bid-example__img { width: 100%; height: auto; border-radius: 8px; }
.bid-example__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--bid-blue);
  margin-bottom: 14px;
}
.bid-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.bid-fact { display: flex; gap: 10px; align-items: flex-start; font-size: 11.5px; color: var(--text); line-height: 1.35; }
.bid-fact + .bid-fact { border-left: 1px solid var(--border); padding-left: 12px; }
.bid-fact__icon { width: 26px; height: 26px; color: var(--bid-blue); flex: 0 0 auto; }
.bid-fact strong { display: block; color: var(--navy); font-size: 12px; margin-bottom: 2px; }
.bid-quote {
  position: relative;
  margin: 16px 0 0;
  background: var(--bid-card);
  border-radius: 8px;
  padding: 16px 20px 16px 52px;
  font-size: 13px;
  color: var(--text);
}
.bid-quote__mark {
  position: absolute;
  left: 16px;
  top: 6px;
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 1;
  color: var(--bid-blue);
}
.bid-quote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ---------- FAQ ---------- */
.bid-faq__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 14px;
}
.bid-faq__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  align-items: start;
}
.bid-faq__col { display: flex; flex-direction: column; gap: 8px; }
.faq {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
}
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { width: 14px; height: 14px; color: var(--bid-blue); flex: 0 0 auto; transition: transform var(--transition); }
.faq[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 14px 12px; font-size: 13px; color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bid-trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .bid-trust__item:nth-child(4) { border-left: 0; padding-left: 0; }
  .bid-steps { grid-template-columns: 1fr 1fr; }
  .bid-steps__arrow { display: none; }
  .bid-package__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bid-sample { grid-column: 1 / -1; }
  .bid-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bid-fact:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 767px) {
  .bid-section { padding: 28px 0; }
  .crumbs { padding-top: 10px; }
  .crumbs__list { font-size: 13px; }

  .bid-hero { padding: 10px 0 24px; }
  .bid-hero__inner { grid-template-columns: 1fr; gap: 20px; }
  .bid-hero__title { font-size: 28px; }
  .bid-hero .btn--lg { width: 100%; justify-content: center; }
  .bid-hero__note { font-size: 13px; }
  .bid-hero__badge { font-size: 12px; letter-spacing: 0.08em; line-height: 1.5; padding: 8px 10px; }

  .bid-trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 0; padding: 18px 0; }
  .bid-trust__item { flex-direction: column; text-align: center; gap: 8px; padding: 0 8px; font-size: 12px; }
  .bid-trust__item:first-child { padding-left: 8px; }
  .bid-trust__item:nth-child(3n + 1) { border-left: 0; }

  .bid-challenge__inner, .bid-outcome__inner, .bid-package__inner, .bid-example__inner { grid-template-columns: 1fr; gap: 20px; }
  .bid-outcome__media { aspect-ratio: 16 / 7; }
  .bid-outcome__caption { font-size: 14px; }

  .bid-steps { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .bid-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
  .bid-step__num { grid-row: 1 / span 2; margin-bottom: 0; }
  .bid-step__title, .bid-step__desc { max-width: none; }

  .bid-package__img { width: 100%; }
  .bid-sample { grid-column: auto; }

  .bid-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bid-fact { background: var(--white); border-radius: 6px; padding: 10px; font-size: 12.5px; }
  .bid-fact strong { font-size: 13px; }
  .bid-fact + .bid-fact { border-left: 0; padding-left: 10px; }
  .bid-quote cite { font-size: 12px; letter-spacing: 0.08em; }

  .bid-faq__head { align-items: center; }
  .bid-faq__head .text-link { flex: 0 0 auto; white-space: nowrap; }
  .bid-faq__cols { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================
   CONSTRUCTION ESTIMATING PAGE (extends the bid-* styles)
   ========================================================= */
.eyebrow--bar { position: relative; padding-bottom: 12px; }
.eyebrow--bar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--yellow);
  border-radius: 2px;
}

/* bid-support: hero badge and outcome caption on the left of their photos */
.bid-hero__badge--start {
  right: auto;
  left: 3%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(15, 35, 70, 0.10);
}
.bid-outcome__caption--start { right: auto; left: 3%; }
/* optional left-aligned text with a yellow accent line, like the RPM caption */
.bid-outcome__caption--bar {
  justify-content: flex-start;
  text-align: left;
  padding: 8px 14px 18px;
  /* grow with the text on narrow screens instead of letting it spill out */
  height: auto;
  min-height: 48.1%;
}
.bid-outcome__caption--bar::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 9px;
  width: 36px;
  height: 3px;
  background: var(--yellow);
}
/* smaller photos: widen the caption so the text stays on three lines and the
   box stays inside the photo */
@media (max-width: 1100px) {
  .bid-outcome__caption--bar { width: 54%; }
}
@media (max-width: 767px) {
  .bid-outcome__caption--bar { top: 6%; width: 62%; min-height: 0; padding: 6px 12px 16px; }
  .bid-outcome__caption--bar::after { left: 12px; bottom: 7px; }
}
@media (max-width: 400px) {
  .page-bid .bid-outcome__caption--panel,
  .page-bid .bid-outcome__caption--text-right { top: 5%; width: 62%; min-height: 0; }
}

/* mobile-only "still have a question" card */
.bid-contact { display: none; margin-top: 16px; }
.bid-contact__icon { width: 40px; height: 40px; color: var(--bid-blue); flex: 0 0 auto; }
.bid-contact .text-link { margin-top: 4px; }

/* mobile-only sticky booking bar */
.bid-sticky { display: none; }

@media (max-width: 767px) {
  .bid-contact { display: flex; }
  /* Space reserved for the sticky bar; restore with the bar.
  .page-est { padding-bottom: 64px; } */
  .bid-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--yellow);
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 -4px 16px rgba(27, 47, 91, 0.15);
  }
  .bid-sticky__icon { width: 20px; height: 20px; }
}

/* =========================================================
   RESPONSIVE VISIBILITY HELPERS
   ========================================================= */
.only-mobile { display: none; }
@media (max-width: 767px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: revert; }
}

/* =========================================================
   SERVICES PAGE: video layout (title above video on mobile)
   ========================================================= */
.video__inner {
  grid-template-areas:
    "frame head"
    "frame body";
  grid-template-rows: auto auto;
  row-gap: 10px;
}
.video__head { grid-area: head; align-self: end; }
.video__frame { grid-area: frame; }
.video__body { grid-area: body; align-self: start; }

/* =========================================================
   SERVICES PAGE: mobile layout per the phone design
   ========================================================= */
@media (max-width: 767px) {
  /* Space reserved for the sticky bar; restore with the bar.
  .page-services { padding-bottom: 64px; } */

  /* hero */
  .page-services .hero { background: #f5f8fc; }
  .page-services .hero__content { padding: 24px 0 24px; }
  .page-services .hero__tagline { display: none; }

  /* trust bar: three columns, icon above label */
  .page-services .trust { border-bottom: 1px solid var(--border); }
  .page-services .trust__list { flex-direction: row; align-items: stretch; gap: 0; padding: 14px 0; }
  .page-services .trust__item {
    flex: 1 1 0;
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 0 6px;
    font-size: 12px;
    border-left: 1px solid var(--border);
  }
  .page-services .trust__item:first-child { border-left: 0; }
  .page-services .trust__icon { width: 32px; height: 32px; }

  /* video */
  .video__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "frame" "body";
    gap: 16px;
  }
  .video__watch { display: inline-flex; margin-top: 12px; }
  .video__signature { margin-top: 18px; }
  .video__byline { font-size: 13px; }
  .video { border-bottom: 1px solid var(--border); }

  /* services: three compact cards with chevrons */
  .svc { padding-top: 28px; }
  .svc__row {
    grid-template-columns: 80px minmax(0, 1fr) 16px;
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    margin-bottom: 12px;
  }
  .svc__row:first-child { border-top: 1px solid var(--border); }
  .svc__thumb { width: 80px; height: 64px; border-radius: 6px; }
  .svc__title { font-size: 15px; margin-bottom: 4px; }
  .svc__desc { display: none; }
  .svc__desc--short { display: block; font-size: 12px; }
  .svc__best, .svc__more { display: none; }
  .svc__chev { width: 16px; height: 16px; color: var(--navy); transform: rotate(-90deg); }
  .svc__all { text-align: center; margin-top: 8px; }

  /* engage: cards with chevrons */
  .engage { background: #eef4fb; }
  .engage__list { gap: 12px; }
  .engage__item {
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
  }
  .engage__icon { width: 40px; height: 40px; }
  .engage__title { font-size: 16px; }
  .engage__chev { width: 16px; height: 16px; color: var(--navy); transform: rotate(-90deg); flex: 0 0 auto; margin-left: auto; }

  /* founder + proof */
  .proof__eyebrow { margin-top: 24px; margin-bottom: 0; }
  .proof__founder { flex-direction: row; padding: 12px 0 20px; gap: 16px; }
  .proof__photo { width: 120px; height: 124px; }
  .proof__name { font-size: 17px; }
  .proof__experience { padding: 0 0 20px; border-top: 0; }
  .proof__stats {
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    gap: 0;
    margin-top: 0;
    padding: 16px 0;
    border-top: 1px solid var(--border);
  }
  .proof__stats .stat { border-left: 1px solid var(--border); padding: 0 6px; }
  .proof__stats .stat:first-child { border-left: 0; }
  .proof__stats .stat__value { font-size: 24px; }
  .proof__stats .stat__label { font-size: 12px; }
  .proof__logos-eyebrow { margin-top: 20px; }
  .proof__logos { justify-content: space-between; gap: 16px; margin-top: 10px; }
  .proof__logos img { height: 20px; }

  /* insights */
  .insights { background: #eef4fb; }
  .insights__grid { gap: 14px; }
  .insight__type { font-size: 12px; }
  .insight__title { font-size: 16px; }
  .insights__all { text-align: center; margin-top: 18px; }

  /* cta: vertical steps with down arrows */
  .cta__steps { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 26px; font-size: 15px; }
  .cta__steps li { gap: 18px; }
  .cta__num { width: 44px; height: 44px; font-size: 17px; }
  .cta__step-arrow { display: flex; justify-content: center; width: 44px; }
  .cta__step-arrow svg { transform: rotate(90deg); width: 20px; height: 20px; }

  /* pre-footer photo block */
  .svc-prefooter {
    position: relative;
    background: var(--navy-dark);
    min-height: 380px;
    overflow: hidden;
  }
  .svc-prefooter__img { width: 100%; height: 380px; object-fit: cover; object-position: center top; }
  .svc-prefooter::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,36,74,0) 40%, rgba(20,36,74,0.55) 75%, var(--navy-dark) 100%);
  }
  .svc-prefooter__text {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 28px;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--white);
  }

}

/* =========================================================
   REMOTE PROJECT MANAGEMENT PAGE (extends the bid-* styles)
   ========================================================= */
/* hero badge with the yellow accent bar, sized to cover the patched photo area */
.page-rpm .bid-hero__badge {
  right: auto;
  left: 3%;
  top: 6.3%;
  width: 44.7%;
  min-height: 32.3%;
  padding: 12px 16px 20px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(15, 35, 70, 0.10);
}
.bid-hero__badge--bar { padding-bottom: 20px; }
.bid-hero__badge--bar::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: 10px;
  width: 36px;
  height: 3px;
  background: var(--yellow);
}

/* semi-transparent caption panel anchored to the left of the outcome photo */
.bid-outcome__caption--panel {
  right: auto;
  left: 3%;
  top: 10.5%;
  width: 46%;
  font-size: clamp(14px, 1.4vw, 17px);
  height: auto;
  min-height: 49.3%;
  display: block;
  text-align: left;
  padding: 10px 14px 18px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
}
.bid-outcome__caption--panel::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 8px;
  width: 36px;
  height: 3px;
  background: var(--yellow);
}

@media (max-width: 767px) {
  .bid-hero__badge--bar { padding-bottom: 16px; }
  .bid-hero__badge--bar::after { left: 10px; bottom: 7px; }
  .page-rpm .bid-hero__badge { padding: 10px 12px 16px; }
  .page-rpm .bid-hero__badge--bar::after { left: 16px; bottom: 10px; }
  .bid-outcome__caption--panel { min-height: 0; font-size: 14px; }
}

/* =========================================================
   BUDGET DEVELOPMENT PAGE (extends the bid-* styles)
   ========================================================= */
/* hero badge and outcome caption reuse the bid-support --start styles */

/* text-only hero tagline (now used only as the base for estimate-review's --er badge) */
.bid-hero__badge--text {
  right: auto;
  left: 5.9%;
  top: 14.0%;
  width: 34.9%;
  min-height: 29.2%;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--bid-blue);
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .bid-hero__badge--text { font-size: 12px; letter-spacing: 0.08em; line-height: 1.5; }
}

/* =========================================================
   ESTIMATE REVIEW PAGE (extends the bid-* styles)
   ========================================================= */
/* hero tagline with yellow bar, over the repainted sky, top-left */
.bid-hero__badge--er {
  left: 4.2%;
  top: 7.1%;
  width: 41.6%;
  min-height: 32.2%;
  padding: 10px 12px 16px;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
}
.bid-hero__badge--er::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 8px;
  width: 36px;
  height: 3px;
  background: var(--yellow);
}

/* text-only outcome caption with yellow bar, over the repainted sky, top-right */
.bid-outcome__caption--text-right {
  right: 1.5%;
  top: 5%;
  width: 40%;
  height: auto;
  min-height: 62.8%;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 8px 12px 16px;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  color: var(--bid-blue);
  font-size: clamp(14px, 1.4vw, 17px);
}
.bid-outcome__caption--text-right::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 8px;
  width: 36px;
  height: 3px;
  background: var(--yellow);
}

@media (max-width: 767px) {
  .bid-hero__badge--er { font-size: 12px; }
}

/* Phones: a wider hero badge keeps its tagline on three lines on every service
   page (placed after the page-specific badge rules so it wins). */
@media (max-width: 767px) {
  .page-bid .bid-hero__badge { width: 74%; min-height: 0; }
}

/* Very narrow phones: the photo badges only fit at the smaller size. */
@media (max-width: 359px) {
  .bid-hero__badge, .bid-hero__badge--text, .bid-hero__badge--er { font-size: 10px; }
  .bid-outcome__caption--text-right { font-size: 14px; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.page-about {
  --about-tint: #eef8fc;
  --about-tint-soft: #f8fcfe;
  --about-border: #d5e7f0;
  --about-blue: #2d5fa8;
}
.page-about .eyebrow { font-size: 12px; letter-spacing: 0.12em; }

/* ---------- Hero ---------- */
.about-hero { padding: 40px 0 36px; }
.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
.about-hero__eyebrow { position: relative; padding-bottom: 14px; margin-bottom: 22px; }
.about-hero__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: var(--yellow-dark);
}
.about-hero__title {
  font-size: clamp(34px, 3.9vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 26px;
}
.about-hero__sub {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}
.about-hero__lead { font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
.about-hero__btn { padding: 15px 24px; }
.about-hero__btn .btn__arrow { width: 16px; height: 16px; }

.about-hero__card {
  background: var(--about-tint);
  border-radius: 4px;
  padding: 30px 0 0;
  overflow: hidden;
}
.about-hero__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0 28px;
  margin-bottom: 8px;
}
.about-hero__img { width: 100%; height: auto; display: block; }

/* ---------- Stats ---------- */
.about-stats { border-top: 1px solid var(--about-border); border-bottom: 1px solid var(--about-border); }
.about-stats__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 32px 0;
}
.about-stat {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 30px;
  border-left: 1px solid var(--about-border);
}
.about-stat:first-child { border-left: 0; padding-left: 30px; }
.about-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--about-tint);
  color: var(--about-blue);
  flex: 0 0 auto;
}
.about-stat__icon svg { width: 28px; height: 28px; }
.about-stat__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 6px;
}
.about-stat__value--text { font-size: 26px; }
.about-stat__label { font-size: 15px; color: var(--text); line-height: 1.45; }

/* ---------- Story ---------- */
.about-story { padding: 56px 0 40px; }
.about-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 60px;
  align-items: start;
}
.about-story__title {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.25;
}
.about-story__text { font-size: 16px; line-height: 1.75; }

/* ---------- Team ---------- */
.team { padding: 40px 0 24px; }
.team__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 30px;
}
.team__eyebrow { font-size: 14px; letter-spacing: 0.1em; margin: 0; }
.team__tagline { font-size: 11px; margin: 0; }
.team__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.member {
  /* subgrid: photo+name, focus and body rows line up across the cards in a row,
     so every focus box starts at the same height and is equally tall */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
  border: 1px solid var(--about-border);
  border-radius: 4px;
  background: var(--white);
  overflow: hidden;
}
.member__photo {
  width: 100%;
  aspect-ratio: 222 / 243;
  object-fit: cover;
  display: block;
}
.member__id { padding: 24px 18px 22px; }
.member__name { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.member__role { font-size: 14px; font-style: italic; color: var(--text); line-height: 1.5; }
.member__focus {
  background: var(--about-tint);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  padding: 18px 18px;
}
.member__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 18px 18px;
}
.member__bio { font-size: 15px; line-height: 1.65; margin-bottom: 30px; }
.member__qa { display: flex; flex-direction: column; gap: 22px; margin-bottom: 26px; }
.qa dt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 8px;
}
.qa__icon { width: 18px; height: 18px; color: var(--about-blue); flex: 0 0 auto; margin-top: 1px; }
.qa dd { font-size: 14px; line-height: 1.6; }
.member__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--about-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--about-blue);
}
.member__link:hover { text-decoration: underline; }
.member__li { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Values ---------- */
.values { padding: 56px 0 40px; }
.values__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 36px;
}
.values__title { font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.2; }
.values__lead { font-size: 16px; line-height: 1.6; max-width: 340px; }
.values__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.value {
  background: var(--about-tint-soft);
  border-radius: 4px;
  padding: 24px 20px 28px;
}
.value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--about-tint);
  color: var(--about-blue);
  margin-bottom: 26px;
}
.value__icon svg { width: 28px; height: 28px; }
.value__title { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.value__desc { font-size: 15px; line-height: 1.65; }

/* ---------- CTA (shared by every page; the About page design) ---------- */
.site-cta { padding: 48px 0 0; }
.site-cta__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding: 52px 48px 56px;
  border-radius: 4px;
  background: #0b2d5c url("../images/site-cta-bg.png") center / cover no-repeat;
  color: var(--white);
}
.site-cta__content { max-width: 640px; }
.site-cta__box .site-cta__eyebrow { color: var(--white); font-size: 11px; margin-bottom: 20px; }
.site-cta__title {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 18px;
}
.site-cta__lead { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.92); }
.site-cta__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
}
.site-cta__alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-cta__alt:hover { color: var(--yellow); }
.site-cta__note { font-size: 13px; color: rgba(255,255,255,0.85); text-align: center; }
/* services page: numbered steps inside the box */
.site-cta__box { flex-wrap: wrap; }
.site-cta__steps { flex: 1 1 100%; margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.18); }
.site-cta .cta__steps { margin-top: 0; color: var(--white); }
.site-cta .cta__num { background: var(--yellow); color: var(--navy); }
.site-cta .cta__step-arrow { color: var(--yellow); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .about-hero__inner { gap: 32px; }
  .about-stat { padding: 0 18px; gap: 16px; }
  .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-cta__box { flex-direction: column; align-items: flex-start; gap: 28px; }
  .site-cta__action { align-items: flex-start; }
}
@media (max-width: 900px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .page-about .eyebrow { font-size: 13px; }

  /* hero */
  .about-hero { padding: 28px 0 24px; }
  .about-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .about-hero__title { font-size: clamp(28px, 8.8vw, 36px); margin-bottom: 22px; }
  .about-hero__sub { font-size: 17px; }
  .about-hero__lead { font-size: 16px; margin-bottom: 24px; }
  .about-hero__btn { width: 100%; justify-content: center; padding: 17px 24px; font-size: 16px; }
  .about-hero__card { padding-top: 26px; }
  .about-hero__label { padding: 0 20px; margin-bottom: 6px; }

  /* stats: stacked rows with dividers */
  .about-stats { border-top: 0; border-bottom: 0; }
  .about-stats__list { grid-template-columns: 1fr; padding: 0; }
  .about-stat {
    border-left: 0;
    border-top: 1px solid var(--about-border);
    padding: 22px 8px;
    gap: 24px;
  }
  .about-stat:first-child { padding-left: 8px; }
  .about-stat:last-child { border-bottom: 1px solid var(--about-border); }
  .about-stat__icon { width: 60px; height: 60px; }
  .about-stat__value { font-size: 30px; }
  .about-stat__value--text { font-size: 28px; }
  .about-stat__label { font-size: 16px; }

  /* story */
  .about-story { padding: 36px 0 28px; }
  .about-story__inner { grid-template-columns: 1fr; gap: 20px; }
  .about-story__title { font-size: 30px; }
  .about-story__text { font-size: 17px; }

  /* team: stacked cards, photo beside name */
  .team { padding: 24px 0 16px; }
  .team__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .team__eyebrow { font-size: 14px; }
  .team__tagline { font-size: 14px; }
  .team__grid { grid-template-columns: 1fr; gap: 24px; }
  .member__top { display: flex; align-items: center; gap: 16px; padding: 20px 20px 24px; }
  .member__photo { width: 104px; height: 114px; aspect-ratio: auto; border-radius: 4px; flex: 0 0 auto; }
  .member__id { padding: 0; }
  .member__name { font-size: 24px; margin-bottom: 8px; }
  .member__role { font-size: 15px; }
  .member__focus { padding: 22px 20px; font-size: 17px; }
  .member__body { padding: 24px 20px 20px; }
  .member__bio { font-size: 16px; margin-bottom: 24px; }
  .member__qa { gap: 22px; }
  .qa dt { font-size: 16px; gap: 14px; }
  .qa__icon { width: 20px; height: 20px; margin-top: 3px; }
  .qa dd { font-size: 16px; padding-left: 34px; }
  .member__link { font-size: 16px; padding-top: 22px; }
  .member__li { width: 20px; height: 20px; }

  /* values: stacked cards with icon on the left */
  .values { padding: 40px 0 24px; }
  .values__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .values__title { font-size: 32px; }
  .values__lead { font-size: 17px; max-width: none; }
  .values__grid { grid-template-columns: 1fr; gap: 16px; }
  .value { display: flex; align-items: flex-start; gap: 20px; padding: 26px 20px; }
  .value__icon { width: 56px; height: 56px; margin-bottom: 0; flex: 0 0 auto; }
  .value__icon svg { width: 26px; height: 26px; }
  .value__title { font-size: 24px; margin-bottom: 10px; }
  .value__desc { font-size: 16px; }

  /* cta: centered */
  .site-cta { padding: 32px 0 0; }
  .site-cta__box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    padding: 36px 24px 40px;
  }
  .site-cta__box .site-cta__eyebrow { font-size: 12px; margin-bottom: 18px; }
  .site-cta__title { font-size: 30px; }
  .site-cta__lead { font-size: 17px; }
  .site-cta__action { align-items: center; width: 100%; }
  .site-cta__action .btn { width: 100%; justify-content: center; padding: 17px 20px; font-size: 16px; }
  .site-cta__alt { font-size: 17px; }
  .site-cta__note { font-size: 14px; }
  .site-cta__steps { text-align: left; padding-top: 22px; }
}

/* =========================================================
   FAQ PAGE (Resources > FAQ)
   ========================================================= */
.page-faq {
  --faq-blue: #3d6eab;
  --faq-navy: #0b2d5b;
  --faq-tint: #eef8fc;
  --faq-tint-soft: #f8fcfe;
  --faq-badge: #d0d6e1;
}

/* ---------- Intro + search ---------- */
.faq-hero { padding: 40px 0 56px; }
.faq-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 538px;
  gap: 48px;
  align-items: start;
}
.faq-hero__eyebrow { font-size: 12px; margin-bottom: 26px; }
.faq-hero__eyebrow::after { width: 36px; }
.faq-hero__title {
  font-size: clamp(36px, 3.7vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--navy);
  margin-bottom: 26px;
}
.faq-hero__lead { font-size: 17px; color: var(--text); }

.faq-search {
  background: var(--faq-tint);
  border-radius: 6px;
  padding: 32px;
}
.faq-search__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 18px;
}
.faq-search__field { position: relative; }
.faq-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--faq-blue);
  pointer-events: none;
}
.faq-search__input {
  width: 100%;
  height: 56px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  font: inherit;
  font-size: 16px;
  color: var(--navy);
  -webkit-appearance: none;
  appearance: none;
}
.faq-search__input::placeholder { color: var(--text); }
.faq-search__input:focus { outline: 2px solid var(--faq-blue); outline-offset: -1px; }
.faq-search__note { margin-top: 16px; font-size: 14px; color: var(--text); }

/* ---------- Layout ---------- */
.faq-body { padding: 24px 0 0; }
.faq-body__inner {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* ---------- Browse by service ---------- */
.faq-nav { position: sticky; top: 96px; }
.faq-nav__toggle { display: none; }
.faq-nav__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}
.faq-nav__list { display: flex; flex-direction: column; gap: 8px; }
.faq-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 16px 17px;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.35;
  transition: background var(--transition), color var(--transition);
}
.faq-nav__link:hover { background: var(--faq-tint-soft); }
.faq-nav__link[aria-current="true"] {
  background: var(--faq-tint);
  border-left-color: var(--faq-blue);
  font-weight: 700;
}
.faq-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--faq-badge);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  flex: 0 0 auto;
}

/* ---------- Toolbar ---------- */
.faq-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0 30px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.faq-toolbar__count { font-size: 14px; color: var(--text); }
.faq-toolbar__toggle {
  font-size: 14px;
  font-weight: 600;
  color: var(--faq-blue);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.faq-toolbar__toggle:hover { color: var(--navy); }
.faq-empty { font-size: 16px; color: var(--text); padding: 8px 0 32px; }

/* ---------- Groups ---------- */
.faq-group + .faq-group { margin-top: 88px; }
.faq-group[hidden] { display: none; }
.faq-group__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.faq-group__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--faq-tint);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  flex: 0 0 auto;
}
.faq-group__title {
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 700;
  color: var(--navy);
  flex: 1 1 auto;
}
.faq-group__count { font-size: 14px; color: var(--text); white-space: nowrap; }

/* ---------- Accordion ---------- */
.faq-list {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  overflow: hidden;
}
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-item[hidden] { display: none; }
.faq-item[open] { background: var(--faq-tint-soft); }
.faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--faq-blue); }
.faq-item[open] .faq-item__q { font-weight: 700; padding-bottom: 14px; }
.faq-item__icon { width: 16px; height: 16px; color: var(--faq-blue); flex: 0 0 auto; }
.faq-item__icon--close { display: none; }
.faq-item[open] .faq-item__icon--open { display: none; }
.faq-item[open] .faq-item__icon--close { display: block; }
.faq-item__a { padding: 0 24px 26px; font-size: 17px; line-height: 1.6; color: var(--text); }
.faq-item__a p + p { margin-top: 12px; }
.faq-item mark {
  background: rgba(247, 196, 71, 0.45);
  color: inherit;
  border-radius: 2px;
}

/* ---------- CTA ---------- */
.page-faq .site-cta { padding-top: 88px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .faq-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 46%); gap: 32px; }
  .faq-body__inner { grid-template-columns: 230px minmax(0, 1fr); gap: 36px; }
  .faq-nav__link { padding: 14px 14px 14px 13px; font-size: 15px; }
  .faq-group + .faq-group { margin-top: 64px; }
}

@media (max-width: 900px) {
  .faq-hero__inner { grid-template-columns: 1fr; }
  .faq-body__inner { grid-template-columns: 1fr; gap: 24px; }
  .faq-nav { position: static; }
  .faq-nav__title { display: none; }
  .faq-nav__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--faq-tint);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    text-align: left;
  }
  .faq-nav__chev { width: 18px; height: 18px; color: var(--navy); transition: transform var(--transition); }
  .faq-nav__toggle[aria-expanded="true"] .faq-nav__chev { transform: rotate(180deg); }
  .faq-nav__list {
    display: none;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 0;
    gap: 0;
  }
  .faq-nav__toggle[aria-expanded="true"] + .faq-nav__title + .faq-nav__list { display: flex; }
  .faq-nav__link { border-radius: 0; padding: 14px 18px 14px 17px; }
}

@media (max-width: 767px) {

  .faq-hero { padding: 30px 0 32px; }
  .faq-hero__inner { gap: 28px; }
  .faq-hero__eyebrow { font-size: 12px; margin-bottom: 22px; }
  .faq-hero__title { font-size: clamp(30px, 8.6vw, 36px); margin-bottom: 20px; }
  .faq-hero__br { display: none; }
  .faq-hero__lead { font-size: 17px; }
  .faq-search { padding: 24px; }
  .faq-search__title { font-size: 19px; margin-bottom: 16px; }
  /* 16px minimum: iOS Safari zooms the page when a smaller input is focused. */
  .faq-search__input { height: 56px; font-size: 16px; padding-left: 44px; padding-right: 14px; }
  .faq-search__icon { left: 16px; }
  .faq-search__note { font-size: 14px; }

  .faq-body { padding: 8px 0 0; }
  .faq-toolbar { padding: 10px 0 26px; margin-bottom: 24px; }

  .faq-group + .faq-group { margin-top: 56px; }
  .faq-group__head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 8px;
    align-items: center;
    margin-bottom: 22px;
  }
  .faq-group__num { width: 40px; height: 40px; font-size: 14px; }
  .faq-group__title { font-size: 28px; line-height: 1.2; }
  .faq-group__count { grid-column: 2; }

  .faq-item__q { padding: 20px 20px; gap: 16px; font-size: 17px; }
  .faq-item[open] .faq-item__q { padding-bottom: 12px; }
  .faq-item__a { padding: 0 20px 24px; }

  .page-faq .site-cta { padding-top: 72px; }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.page-contact {
  --ct-blue: #3d6eab;
  --ct-navy: #0b2d5b;
  --ct-tint: #eef8fc;
  --ct-card: #f8fcfe;
  --ct-card-border: #d5e7f0;
  --ct-input-border: #7a95b8;
  --ct-error: #c0392b;
}

/* ---------- Intro / form / other ways ---------- */
.contact { padding: 36px 0 0; }
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 630px;
  grid-template-areas:
    "intro form"
    "ways  form";
  column-gap: 56px;
  row-gap: 44px;
  align-items: start;
}
.contact__intro { grid-area: intro; }
.contact-form { grid-area: form; }
.contact__ways { grid-area: ways; }

.contact__eyebrow { font-size: 12px; margin-bottom: 26px; }
.contact__eyebrow::after { width: 36px; }
.contact__title {
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--navy);
  margin-bottom: 26px;
}
.contact__lead { font-size: 18px; line-height: 1.6; color: var(--text); }
.contact__note { font-size: 17px; color: var(--text); margin-top: 22px; }
.contact__quick { display: none; }

/* other ways to connect */
.contact__ways-title { font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 20px; }
.way {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 0 0 28px;
}
.way + .way { padding-top: 28px; border-top: 1px solid var(--border); }
.way:last-child { padding-bottom: 0; }
.way__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ct-tint);
  color: var(--ct-blue);
  flex: 0 0 auto;
}
.way__icon svg { width: 22px; height: 22px; }
.way__body { min-width: 0; }
.way__title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.way__desc { font-size: 16px; line-height: 1.55; color: var(--text); }
.way__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ct-blue);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.way__link .text-link__arrow { width: 16px; height: 16px; }
.way__link:hover { color: var(--navy); }
.way__title + .way__link { margin-top: 0; }
.way__note { font-size: 14px; color: var(--text); margin-top: 10px; }

/* form card */
.contact-form {
  background: var(--ct-card);
  border: 1px solid var(--ct-card-border);
  border-radius: 6px;
  padding: 32px;
}
.contact-form__title { font-size: 28px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.contact-form__lead { font-size: 16px; color: var(--text); }
.contact-form__preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--text);
}
.contact-form__info { width: 16px; height: 16px; color: var(--ct-blue); flex: 0 0 auto; }
.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.contact-form__field { margin-top: 22px; }
.contact-form__label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.contact-form__req { color: var(--navy); }
.contact-form__opt { font-size: 14px; font-weight: 400; color: var(--text); }
.contact-form__input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--ct-input-border);
  border-radius: 4px;
  background: var(--white);
  font: inherit;
  font-size: 16px;
  color: var(--navy);
  -webkit-appearance: none;
  appearance: none;
}
.contact-form__input:focus { outline: 2px solid var(--ct-blue); outline-offset: -1px; }
.contact-form__select-wrap { position: relative; }
.contact-form__select { padding-right: 44px; cursor: pointer; }
.contact-form__chev {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--navy);
  pointer-events: none;
}
.contact-form__textarea { height: 130px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.contact-form__hint { margin-top: 8px; font-size: 14px; color: var(--text); }

.contact-form__more { margin-top: 22px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.contact-form__more-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.contact-form__more-toggle::-webkit-details-marker { display: none; }
.contact-form__more-toggle:hover { color: var(--ct-blue); }
.contact-form__more-chev { width: 18px; height: 18px; color: var(--ct-blue); flex: 0 0 auto; transition: transform var(--transition); }
.contact-form__more[open] .contact-form__more-chev { transform: rotate(180deg); }
.contact-form__more-body { padding-bottom: 22px; }
.contact-form__more-body .contact-form__field { margin-top: 4px; }

.contact-form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.contact-form__submit { padding: 17px 22px; font-size: 16px; }
.contact-form__status { font-size: 14px; color: var(--navy); }
.contact-form__status:empty { display: none; }
.contact-form__status.is-error { color: var(--ct-error); font-weight: 600; }
.contact-form__status.is-success { color: var(--navy); }
.contact-form__status.is-success { font-weight: 600; }
.contact-form__status.is-sending { color: var(--text); }
.contact-form__submit[disabled] { opacity: 0.7; cursor: wait; }
.contact-form__botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form__input[aria-invalid="true"] {
  border-color: var(--ct-error);
  box-shadow: 0 0 0 1px var(--ct-error);
}
.contact-form__input[aria-invalid="true"]:focus { outline-color: var(--ct-error); }
.contact-form__error { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--ct-error); }
.contact-form__error:empty { display: none; }
.contact-form__error + .contact-form__hint { margin-top: 6px; }
.contact-form__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--text);
}
.contact-form__policy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ct-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-form__policy:hover { color: var(--navy); }

/* ---------- What happens next ---------- */
.contact-next { padding: 80px 0 0; }
.contact-next__box {
  background: var(--ct-tint);
  border-radius: 4px;
  padding: 40px 40px 44px;
}
.contact-next__eyebrow { font-size: 12px; margin-bottom: 14px; }
.contact-next__title { font-size: clamp(28px, 2.8vw, 36px); font-weight: 700; color: var(--navy); margin-bottom: 36px; }
.contact-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.contact-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ct-navy);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
}
.contact-step__title { font-size: 21px; font-weight: 700; margin-bottom: 18px; }
.contact-step__desc { font-size: 16px; line-height: 1.55; color: var(--text); }

/* ---------- Still exploring (plain navy box, outlined button) ---------- */
.contact-cta.site-cta { padding-top: 88px; }
.site-cta--plain .site-cta__box { background: var(--ct-navy); padding: 44px 48px 48px; }
.site-cta--plain .site-cta__eyebrow { margin-bottom: 18px; }
.site-cta--plain .site-cta__title { margin-bottom: 20px; }
.site-cta--plain .site-cta__lead { font-size: 17px; }
.site-cta--plain .site-cta__action { gap: 22px; }
.site-cta--plain .site-cta__alt { font-weight: 600; font-size: 17px; }
.btn--outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,255);
}
.btn--outline:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .contact__inner { grid-template-columns: minmax(0, 1fr) minmax(360px, 52%); column-gap: 40px; }
  .contact-form { padding: 28px; }
  .contact-next { padding-top: 64px; }
  .contact-steps { gap: 24px; }
  .contact-cta.site-cta { padding-top: 64px; }
}

@media (max-width: 900px) {
  .contact__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "form"
      "ways";
    row-gap: 40px;
  }
  .contact__quick { display: flex; flex-wrap: wrap; gap: 20px 24px; margin-top: 28px; }
  .contact__quick-link {
    gap: 10px;
    font-size: 15px;
    color: var(--ct-blue);
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  .contact__quick-link .text-link__arrow { width: 16px; height: 16px; }
  .contact__note { display: none; }
  .contact-steps { grid-template-columns: 1fr; gap: 32px; }
  .contact-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .contact-step__num { margin-bottom: 0; }
}

@media (max-width: 767px) {

  .contact { padding-top: 30px; }
  .contact__inner { row-gap: 40px; }
  .contact__eyebrow { font-size: 12px; margin-bottom: 22px; }
  .contact__title { font-size: clamp(30px, 8.6vw, 36px); margin-bottom: 20px; }
  .contact__lead { font-size: 17px; }

  .contact-form { padding: 24px 20px 28px; }
  .contact-form__title { font-size: 26px; margin-bottom: 12px; }
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }
  .contact-form__field { margin-top: 20px; }
  .contact-form__more-body .contact-form__field { margin-top: 12px; }
  .contact-form__more-body .contact-form__field:first-child { margin-top: 4px; }
  .contact-form__submit { width: 100%; justify-content: center; }
  .contact-form__foot { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 16px; }

  .contact__ways-title { font-size: 26px; margin-bottom: 18px; }
  .way { gap: 16px; padding-bottom: 24px; }
  .way + .way { padding-top: 24px; }
  .way__title { font-size: 21px; }

  .contact-next { padding-top: 56px; }
  .contact-next__box { padding: 28px 24px 32px; }
  .contact-next__title { font-size: 30px; margin-bottom: 28px; }
  .contact-step__title { font-size: 22px; margin-bottom: 12px; }

  .contact-cta.site-cta { padding-top: 56px; }
  .site-cta--plain .site-cta__box { align-items: flex-start; text-align: left; padding: 32px 24px 36px; }
  .site-cta--plain .site-cta__action { align-items: flex-start; }
  .site-cta--plain .site-cta__action .btn { width: auto; padding: 15px 20px; }
}

/* =========================================================
   ARCHITECTS PAGE (Services > Architects)
   ========================================================= */
.page-arch {
  --arch-navy: #0b2c63;
  --arch-blue: #3d6eab;
  --arch-text: #1f2937;
  --arch-border: #d5e7f0;
  --arch-tint: #eef8fc;
}
.page-arch .eyebrow { color: var(--arch-blue); font-size: 13px; letter-spacing: 0.14em; }
.page-arch .text-link.arch-link { font-size: 17px; color: var(--arch-blue); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.page-arch .text-link.arch-link .text-link__arrow { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.arch-hero {
  position: relative;
  min-height: 730px;
  display: flex;
  align-items: center;
  background: linear-gradient(100deg, #edf7ff 0%, #f6fbff 55%, #fafcff 100%);
  overflow: hidden;
}
.arch-hero__inner { position: static; display: block; }
/* The media's left edge sits at 50vw, so below ~1300px the copy is clamped to stop short of
   it (viewport-based, because the 1200px container stops shrinking before the overlap does). */
.arch-hero__content { position: relative; z-index: 1; max-width: min(600px, calc(50vw - 56px)); padding: 80px 0 90px; }
.arch-hero__eyebrow { margin-bottom: 20px; }
.arch-hero__title {
  font-size: clamp(40px, 4.3vw, 62px);
  font-weight: 700;
  line-height: 1.16;
  color: var(--arch-navy);
  margin-bottom: 26px;
}
.arch-hero__lead { font-size: 22px; line-height: 1.5; color: var(--arch-text); margin-bottom: 28px; }
.arch-hero__btn { padding: 17px 28px; font-size: 17px; border-radius: 4px; }
.arch-hero__btn .btn__arrow { width: 18px; height: 18px; }
.arch-hero__note { font-size: 16px; color: var(--arch-text); margin-top: 18px; }
.arch-hero { --hero-max: 1920px; }
.arch-hero__media {
  position: absolute;
  top: 0;
  right: max(0px, calc((100% - var(--hero-max)) / 2));
  bottom: 0;
  width: min(50%, calc(var(--hero-max) * 0.5));
}
.arch-hero__media picture, .arch-hero__img { width: 100%; height: 100%; }
/* The caption is baked into the bottom-right of the artwork, so the crop is anchored
   there: wide boxes trim the sky, narrow boxes trim the faded left edge instead. */
.arch-hero__img { object-fit: cover; object-position: right 90%; }
/* Re-create the soft left edge in CSS so it survives when the baked-in fade is cropped away. */
.arch-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #f3f9ff 0%, rgba(243,249,255,0.6) 10%, rgba(243,249,255,0) 30%);
  pointer-events: none;
}

/* ---------- Features ---------- */
.arch-features { padding: 56px 0 86px; }
.arch-features__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.arch-feature {
  text-align: center;
  padding: 0 8px;
  border-left: 1px solid var(--arch-border);
}
.arch-feature:first-child { border-left: 0; }
.arch-feature__icon { width: 46px; height: 46px; margin: 0 auto 22px; color: var(--arch-navy); }
.arch-feature__title { font-size: 22px; font-weight: 700; color: var(--arch-navy); margin-bottom: 16px; overflow-wrap: anywhere; hyphens: manual; }
.arch-feature__desc { font-size: 16px; line-height: 1.6; color: var(--arch-text); max-width: 240px; margin: 0 auto; }

/* ---------- Partner ---------- */
.arch-partner { padding: 0 0 88px; }
.arch-partner__inner {
  display: grid;
  grid-template-columns: minmax(0, 608fr) minmax(0, 608fr);
  gap: 64px;
  align-items: center;
}
.arch-partner__img { width: 100%; height: auto; }
.arch-partner__title {
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--arch-navy);
  margin-bottom: 30px;
}
.arch-partner__text { font-size: 19px; line-height: 1.65; color: var(--arch-text); margin-bottom: 36px; }

/* ---------- Stats ---------- */
.arch-stats {
  background: var(--arch-tint);
  border-top: 1px solid var(--arch-border);
  border-bottom: 1px solid var(--arch-border);
}
.arch-stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 40px 0;
}
.arch-stat { text-align: center; padding: 0 24px; border-left: 1px solid #c9dfef; }
.arch-stat:first-child { border-left: 0; }
.arch-stat__value {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--arch-navy);
  margin-bottom: 10px;
}
.arch-stat__label { font-size: 16px; line-height: 1.55; color: var(--arch-text); max-width: 170px; margin: 0 auto; }

/* ---------- Services cards ---------- */
.arch-services { padding: 88px 0 100px; }
.arch-services__title {
  text-align: center;
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 700;
  color: var(--arch-navy);
  margin-bottom: 46px;
}
.arch-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.arch-card {
  border: 1px solid var(--arch-border);
  border-radius: 3px;
  background: var(--white);
  overflow: hidden;
}
.arch-card__img { width: 100%; aspect-ratio: 406 / 172; object-fit: cover; border-bottom: 1px solid var(--arch-border); }
.arch-card__body { padding: 28px 24px 30px; }
.arch-card__title { font-size: 24px; font-weight: 700; color: var(--arch-navy); margin-bottom: 16px; }
.arch-card__desc { font-size: 17px; line-height: 1.55; color: var(--arch-text); margin-bottom: 30px; }

/* ---------- CTA ---------- */
.arch-cta {
  background: #072c5e url("../images/arch-cta-bg.png") center / cover no-repeat;
  color: var(--white);
  text-align: center;
  padding: 64px 0 68px;
}
.arch-cta__inner { display: flex; flex-direction: column; align-items: center; }
.page-arch .arch-cta__eyebrow { color: var(--white); font-size: 13px; margin-bottom: 20px; }
.arch-cta__title {
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 34px;
}
.arch-cta__btn { padding: 19px 34px; font-size: 18px; border-radius: 4px; }
.arch-cta__btn .btn__arrow { width: 18px; height: 18px; }
.arch-cta__note { font-size: 16px; color: rgba(255,255,255,0.9); margin-top: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .arch-hero { min-height: 0; display: block; }
  /* Stacked layout: the copy and the image share one centred 640px column. */
  .arch-hero__content { max-width: 640px; padding: 48px 0 32px; margin: 0 auto; }
  .arch-hero__inner { position: relative; }
  .arch-hero__media {
    position: static;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 366 / 378;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto 40px;
  }
  .arch-hero__img { object-position: right center; }
  .arch-hero__media::before { display: none; }
  .arch-features__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .arch-feature:nth-child(2n + 1) { border-left: 0; }
  .arch-partner__inner { grid-template-columns: 1fr; gap: 32px; }
  .arch-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .arch-stat { padding: 30px 16px; }
  .arch-stat:nth-child(2n + 1) { border-left: 0; }
  .arch-stat:nth-child(n + 3) { border-top: 1px solid #c9dfef; }
  .arch-cards { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; gap: 24px; }
}

@media (max-width: 767px) {
  .page-arch .eyebrow { font-size: 13px; }
  .page-arch .text-link.arch-link { font-size: 16px; }

  .arch-hero { background: linear-gradient(180deg, #edf7ff 0%, #f8fcff 60%, #ffffff 100%); }
  .arch-hero__content { padding: 40px 0 28px; }
  .arch-hero__eyebrow { margin-bottom: 18px; }
  .arch-hero__title { font-size: clamp(30px, 8.5vw, 36px); margin-bottom: 22px; }
  .arch-hero__lead { font-size: 18px; margin-bottom: 26px; }
  .arch-hero__btn { padding: 16px 24px; font-size: 16px; }
  .arch-hero__note { font-size: 15px; margin-top: 16px; }
  .arch-hero__media { margin-bottom: 44px; }

  .arch-features { padding: 0 0 56px; }
  .arch-features__list { row-gap: 44px; }
  .arch-feature { padding: 0 12px; }
  .arch-feature__icon { width: 42px; height: 42px; margin-bottom: 18px; }
  .arch-feature__title { font-size: 21px; margin-bottom: 14px; }
  .arch-feature__desc { font-size: 15px; }

  .arch-partner { padding: 0 0 56px; }
  .arch-partner__img { border-radius: 4px; }
  .arch-partner__title { font-size: 32px; margin-bottom: 22px; }
  .arch-partner__text { font-size: 17px; margin-bottom: 30px; }

  .arch-stat { padding: 32px 12px; }
  .arch-stat__value { font-size: 32px; margin-bottom: 8px; }
  .arch-stat__label { font-size: 15px; max-width: 140px; }

  .arch-services { padding: 56px 0 72px; }
  .arch-services__title { font-size: 30px; margin-bottom: 34px; }
  .arch-card__body { padding: 24px 24px 28px; }
  .arch-card__title { font-size: 22px; margin-bottom: 12px; }
  .arch-card__desc { font-size: 16px; margin-bottom: 26px; }

  .arch-cta { padding: 52px 0 56px; }
  .page-arch .arch-cta__eyebrow { font-size: 12px; margin-bottom: 16px; }
  .arch-cta__title { font-size: 32px; margin-bottom: 28px; }
  .arch-cta__break { display: block; }
  .arch-cta__btn { padding: 16px 24px; font-size: 16px; }
  .arch-cta__note { font-size: 15px; margin-top: 18px; }
}

/* Narrow phones: the two feature columns get too tight for 21px titles. */
@media (max-width: 400px) {
  .arch-feature { padding: 0 6px; }
  .arch-feature__title { font-size: 19px; }
  .arch-feature__desc { font-size: 14px; }
}

/* =========================================================
   MOBILE TAP TARGETS
   Small inline links get an invisible 44px-tall hit area so
   they are easier to tap, without changing the layout.
   ========================================================= */
@media (max-width: 767px) {
  .text-link,
  .chip,
  .crumbs__list a,
  .footer__link,
  .footer__legal a,
  .faq-toolbar__toggle,
  .site-cta__alt,
  .way__link,
  .contact-form__policy { position: relative; }

  .text-link::after,
  .chip::after,
  .crumbs__list a::after,
  .footer__link::after,
  .footer__legal a::after,
  .faq-toolbar__toggle::after,
  .site-cta__alt::after,
  .way__link::after,
  .contact-form__policy::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    z-index: 1;
  }

  /* Services page: the whole service card is tappable, not just its title. */
  .svc__row { position: relative; }
  .svc__title a::after { content: ""; position: absolute; inset: 0; }
}

/* =========================================================
   VERY NARROW SCREENS (below 360px)
   Let content that refuses to shrink wrap instead of pushing
   the page wider than the screen.
   ========================================================= */
@media (max-width: 359px) {
  /* buttons may wrap onto two lines */
  .btn { white-space: normal; text-align: center; }
  .bid-hero__inner { grid-template-columns: minmax(0, 1fr); }

  /* about: values cards */
  .values__grid { grid-template-columns: minmax(0, 1fr); }
  .value { gap: 14px; padding: 22px 16px; }
  .value > div { min-width: 0; }
  .value__icon { width: 44px; height: 44px; }
  .value__icon svg { width: 22px; height: 22px; }
  .value__title { font-size: 19px; overflow-wrap: anywhere; }

  /* contact: long email address */
  .contact__inner { grid-template-columns: minmax(0, 1fr); }
  .way__link { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------
   Google Calendar booking popup - NOT IN USE (replaced by the
   Zoho Bookings popup below; kept for rollback). Google's overlay uses 72px padding, which
   leaves almost no room for the calendar on phones.
   --------------------------------------------------------- */
/* Google's stylesheet loads after this one, so these use a higher specificity. */
.hur54b .mmGMM { background-color: #fff; } /* Google's own rule uses an undefined variable */
body .hur54b {
  display: flex;                    /* lets the iframe centre itself with margin:auto */
  overflow-y: auto;                 /* mobile Safari grows the iframe to its content; let the overlay scroll */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* don't hand the scroll to the page underneath */
}
body .hur54b .mmGMM {
  margin: auto;                     /* centred; auto margins collapse to 0 if it overflows, so nothing is clipped */
  max-width: 1040px;                /* Google's booking page stops using extra width at about this size */
  max-height: 780px;
}
@media (min-width: 768px) {
  /* Pin the Close button to the dialog's top-right corner rather than the screen's.
     Dialog width = min(1040px, 100vw - 144px), height = min(780px, 100vh - 144px), both centred. */
  body .Xfsokf {
    right: auto;
    left: calc(50% + min(520px, 50vw - 72px));
    transform: translateX(-100%);
    top: calc(50vh - min(390px, 50vh - 72px) - 46px);
  }
}
@media (max-width: 767px) {
  body .hur54b { padding: 56px 12px 12px; }
  body .Xfsokf { top: 10px; right: 12px; }
}
/* ---------------------------------------------------------
   Zoho Bookings popup (opened from any [data-schedule] link).
   A native <dialog>; main.js puts Zoho's iframe in .booking__frame.
   --------------------------------------------------------- */
.booking {
  width: min(1040px, calc(100% - 48px));
  height: min(780px, calc(100% - 48px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 20px 60px rgba(20, 36, 74, 0.35);
  overflow: hidden;
}
.booking::backdrop { background: rgba(20, 36, 74, 0.6); }
.booking__panel { display: flex; flex-direction: column; height: 100%; }
.booking__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  background: var(--navy);
  color: var(--white);
}
.booking__title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; }
.booking__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--transition);
}
.booking__close:hover,
.booking__close:focus-visible { background: rgba(255, 255, 255, 0.15); }
.booking__close svg { width: 20px; height: 20px; }
.booking__frame {
  flex: 1;
  min-height: 0;
  overflow: auto;                   /* mobile Safari grows iframes to their content height */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.booking__frame iframe { display: block; width: 100%; height: 100% !important; border: 0; }
@media (max-width: 767px) {
  .booking { width: calc(100% - 16px); height: calc(100% - 16px); }
  .booking__bar { padding-left: 16px; }
}

/* Page frozen while the booking popup is open (class set by main.js) */
.is-booking { overflow: hidden; scroll-behavior: auto; }
.is-booking body { position: fixed; left: 0; right: 0; overflow: hidden; }