/* Local fixes layered on top of the Webflow export. Loaded after the Webflow stylesheet. */

/* ---------- Cross-browser basics ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } } /* clip keeps sticky elements working */
img, video, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p { overflow-wrap: break-word; }

/* ---------- Webflow badge ---------- */
.w-webflow-badge { display: none !important; visibility: hidden !important; }
.footer-copyright-link[href*="webflow.com"] { display: none !important; }

/* ---------- Nav: logo left, "Contact us" pinned right ---------- */
.header .nav-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 0; }
.header .w-nav-menu { margin-left: auto; float: none; }
.header .nav-menu-link-div { justify-content: flex-end; }
.header .nav-link { max-width: none !important; padding-right: 0; }

/* ---------- Stats: three equal cards, no orphaned third card ---------- */
.statistics-grid {
  display: grid !important; /* Webflow switches this to a wrapping flex row at some widths */
  column-gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  height: auto !important;
  align-items: start;
}
.statistics-grid > .statistics-div { grid-column: auto !important; grid-row: auto !important; width: auto !important; max-width: none; flex: none; }

/* ---------- "What We Do" cards: plain row, no scroll-jacked sideways slide ---------- */
.section.background-gray.capability-section,
.section.capability-section { height: auto !important; }
.capability-main-div { position: static !important; overflow: visible !important; top: auto; }
.capability-wrapper {
  transform: none !important; /* Webflow's scroll animation writes translate3d(...) inline */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  min-width: 0 !important;
  width: 100% !important;
}
.capability-div, .capability-card { width: 100% !important; }
/* The card used to take its height from the sticky panel; give it its own shape instead */
.capability-card { aspect-ratio: 2 / 3; min-height: 520px; height: auto; }
.capability-card > .capability-image-div {
  position: absolute; inset: 0; width: 100%; height: 100% !important;
  object-fit: cover; object-position: center top;
}
.capability-card > .capability-detail-div { bottom: 0; left: 0; }

/* ---------- Fluid type so headlines never overflow ---------- */
h1 { font-size: clamp(2.5rem, 7vw, 6rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.15; }

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .statistics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .capability-wrapper { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .capability-card { aspect-ratio: auto; height: 600px; min-height: 0; }
  /* Webflow collapses the menu here; keep the burger on the right */
  .header .nav-button-wrapper { margin-left: auto; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .statistics-grid { grid-template-columns: 1fr !important; row-gap: 48px; }
  .w-container, .container { padding-left: 16px; padding-right: 16px; }
}

/* Respect users who turn off motion: show content immediately */
@media (prefers-reduced-motion: reduce) {
  [style*="opacity: 0"], [style*="opacity:0"] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Contact form ---------- */
/* Honeypot: off-screen rather than display:none so naive bots still fill it */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot { margin: 16px 0 8px; min-height: 65px; }
.form-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; opacity: .8; }
.form-note a, .email-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-paragraph .email-link { text-decoration: none; }
.footer-paragraph .email-link:hover { text-decoration: underline; }

/* ---------- Partner logos (linked) ---------- */
.partner-logo-link { display: inline-flex; align-items: center; transition: opacity .2s; }
.partner-logo-link:hover, .partner-logo-link:focus-visible { opacity: .75; }

/* ---------- Legal pages (Privacy Policy, Candidate Privacy Notice) ---------- */
.legal-content { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.65; }
.legal-content h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; margin: 2.2em 0 .6em; }
.legal-content p, .legal-content ul { margin: 0 0 1em; }
.legal-content ul { padding-left: 1.3em; }
.legal-content li { margin-bottom: .4em; }
.legal-content a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-updated { opacity: .7; font-size: 15px; }
@media (max-width: 767px) { .legal-content { font-size: 16px; } }
.legal-docref { font-size: 14px; opacity: .7; margin-top: 1.4em; }

/* Legal tables: key/value rows and multi-column tables, stacked into cards on phones */
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .92em; line-height: 1.55; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.12); }
.legal-table thead th { font-weight: 600; border-bottom: 2px solid rgba(0,0,0,.25); }
.legal-table-kv th { width: 32%; font-weight: 600; }
@media (max-width: 767px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: 100% !important; }
  .legal-table thead { position: absolute; left: -10000px; }
  .legal-table tr { border-bottom: 1px solid rgba(0,0,0,.15); padding: 10px 0; }
  .legal-table th, .legal-table td { border: 0; padding: 4px 0; }
  .legal-table-kv th { padding-top: 8px; }
  .legal-table-stack td::before { content: attr(data-label); display: block; font-weight: 600; font-size: .85em; opacity: .7; margin-bottom: 2px; }
}

/* ---------- Partner logos: keep their real proportions at every width ---------- */
/* Webflow fixes the height on tablet/phone while the <img width> attribute fixes the width, which squashes them */
.who-we-are-logo-div .about-company-logo {
  width: auto !important; height: auto; max-width: 100%;
  max-height: 64px; object-fit: contain;
}
@media (max-width: 991px) {
  .who-we-are-logo-div.margin-bottom { justify-content: center; gap: 28px 40px; }
  .who-we-are-logo-div .about-company-logo { max-height: 52px; }
}
@media (max-width: 767px) {
  .who-we-are-logo-div.margin-bottom { flex-direction: column; align-items: center; gap: 28px; }
  .who-we-are-logo-div .partner-logo-link { justify-content: center; }
  /* Webflow slides each logo up 65px while scrolling into view; stacked on phones that slides them under the
     photo below, so keep the fade but drop the slide */
  .who-we-are-logo-div .about-company-logo { max-height: 44px; max-width: 220px; transform: none !important; }
  .who-we-are-logo-div.margin-bottom { margin-bottom: 40px; }
}

/* ---------- Header logo on phones: smaller, lined up with the page text ---------- */
@media (max-width: 767px) {
  .header .nav-brand-logo, .header .nav-brand-dark-logo { width: 140px; height: auto; }
  .header .nav-brand-logo-link { padding-left: 0; margin-left: 0; }
}