/**
 * Cxs site chrome (custom header + footer).
 * Only the inert design tokens are shipped globally.
 */

/* ===== Design tokens (inert, global) ===== */
:root {
  --cxs-ink: #0f1722;
  --cxs-navy: #16263b;
  --cxs-slate: #475569;
  --cxs-muted: #7a8898;
  --cxs-teal: #0ca2d4;
  --cxs-teal-d: #0879a2;
  --cxs-teal-soft: #e3f6fc;
  --cxs-teal-line: #bde8f4;
  --cxs-line: #e5eaf0;
  --cxs-panel: #f4f7fa;
  --cxs-white: #fff;
  --cxs-cta: linear-gradient(90deg, #39b8eb, #1c8ad2);
  --cxs-shadow: 0 6px 22px rgba(15, 23, 34, 0.1);
  --cxs-radius: 12px;
}

/* ===== iOS Safari text-autosizing guard (site-wide) =====
   Astra's stylesheet normally carries this normalize rule, but inc/debloat.php
   strips Astra from the custom templates (jobs archive/search, single jobs,
   landings, blog), leaving them exposed to Mobile Safari's automatic text
   boost — it inflates small text (e.g. the 10.5px "Sort by radius" label)
   while fixed-px boxes stay put, clipping their contents. Harmless where
   Astra still loads; it sets the same value. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ===== iOS Safari focus-zoom guard (site-wide) =====
   Mobile Safari auto-zooms the page whenever a text-entry field is focused with
   a computed font-size under 16px, and never zooms back out. Our compact search,
   radius, sort, blog-search and Contact Form 7 fields all sit below that floor
   on mobile, so this pins every focusable text field to a 16px minimum below the
   921px breakpoint. Scoped to mobile (desktop styling untouched) and to
   text-entry controls only, so buttons/checkboxes/radios keep their own sizing.
   max(16px, 1rem) keeps the floor even where the root font is shrunk (Astra
   sets html to 91.2% on mobile). !important is required to beat per-component
   rules; the primary search fields are also bumped at their source so this is a
   safety net, not the only line of defence. */
@media (max-width: 921.98px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input:not([type]),
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }
}

/* Scope the design's system font to the chrome only (no global body override). */
.site-header,
.site-header *,
.drawer,
.drawer *,
.scrim,
.footwrap,
.footwrap * {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* Astra normally supplies this global reset. Keep the custom chrome
   self-contained when the parent theme assets are dequeued. */
.site-header,
.site-header *,
.site-header *::before,
.site-header *::after,
.drawer,
.drawer *,
.drawer *::before,
.drawer *::after,
.scrim,
.scrim *,
.scrim *::before,
.scrim *::after,
.footwrap,
.footwrap *,
.footwrap *::before,
.footwrap *::after {
  box-sizing: border-box;
}

/* ===== Header shell ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--cxs-white);
  border-bottom: 1px solid var(--cxs-line);
  transition:
    box-shadow 0.2s,
    background 0.2s;
}
.site-header.scrolled {
  box-shadow: 0 6px 20px rgba(15, 23, 34, 0.08);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}
.site-header .bar {
  max-width: 1388px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 22px;
  padding: 14px 24px;
}

/* Logo */
.site-header .logo,
.drawer .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}
.site-header .brandimg,
.drawer .brandimg {
  height: 40px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Default (desktop): show the horizontal logo, hide the mobile vertical one. */
.site-header .brandimg--mobile,
.drawer .brandimg--mobile {
  display: none;
}

/* Primary nav */
.site-header .primary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .menu > li {
  position: relative;
  margin: 0;
}
.site-header .navlink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cxs-navy);
  transition: 0.15s;
  text-decoration: none;
}
.site-header .navlink:hover {
  color: var(--cxs-teal-d);
  background: var(--cxs-teal-soft);
  text-decoration: none;
}
.site-header .navlink .chev {
  width: 15px;
  height: 15px;
  transition: transform 0.2s;
}
.site-header .menu > li:hover .navlink .chev,
.site-header .menu > li:focus-within .navlink .chev {
  transform: rotate(180deg);
}

/* Actions (account + CTA) */
.site-header .actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-header .iconbtn {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1.5px solid var(--cxs-line);
  display: grid;
  place-items: center;
  color: var(--cxs-navy);
  transition: 0.15s;
}
.site-header .iconbtn:hover {
  border-color: var(--cxs-teal);
  color: var(--cxs-teal-d);
  background: var(--cxs-teal-soft);
}
.site-header .iconbtn svg {
  width: 20px;
  height: 20px;
}
.site-header .cta,
.drawer .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cxs-cta);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(28, 138, 210, 0.32);
  transition: 0.2s;
  white-space: nowrap;
  text-decoration: none;
}
/* Pin the header CTA to the account icon's height; inherited line-height varies per page. */
.site-header .cta {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}
.site-header .cta:hover,
.drawer .cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(28, 138, 210, 0.45);
  color: #fff;
}
.site-header .cta svg,
.drawer .cta svg {
  width: 18px;
  height: 18px;
}

/* ===== Dropdowns / mega-menu ===== */
.site-header .panel {
  position: absolute;
  top: calc(100% + 10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.18s;
  background: #fff;
  border: 1px solid var(--cxs-line);
  border-radius: 16px;
  box-shadow: var(--cxs-shadow);
  padding: 22px;
  z-index: 50;
}
.site-header .menu > li:hover .panel,
.site-header .menu > li:focus-within .panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-header .panel::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.site-header .dd {
  left: 0;
  min-width: 230px;
}
.site-header .dd a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cxs-navy);
  text-decoration: none;
}
.site-header .dd a:hover {
  background: var(--cxs-teal-soft);
  color: var(--cxs-teal-d);
}
.site-header .mega {
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 820px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 8px 20px;
}
.site-header .menu > li:hover .mega,
.site-header .menu > li:focus-within .mega {
  transform: translateX(-50%) translateY(0);
}
.site-header .mega h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cxs-muted);
  margin: 4px 0 8px 8px;
}
.site-header .mega a {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cxs-navy);
  text-decoration: none;
}
.site-header .mega a:hover {
  background: var(--cxs-teal-soft);
  color: var(--cxs-teal-d);
}
.site-header .mega .feature {
  background: linear-gradient(160deg, #0e2236, #16263b);
  border-radius: 13px;
  padding: 18px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.site-header .mega .feature .big {
  font-size: 24px;
  font-weight: 800;
}
.site-header .mega .feature .sub {
  font-size: 13px;
  color: #aebfd0;
  margin: 4px 0 14px;
}
.site-header .mega .feature .go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--cxs-teal-d);
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 16px;
  border-radius: 10px;
  align-self: flex-start;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(8, 121, 162, 0.18);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
/* Feature-card links must NOT inherit the light-bg .mega a hover. */
.site-header .mega .feature .go:hover {
  background: #fff;
  color: var(--cxs-teal-d);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(8, 121, 162, 0.28);
}
.site-header .mega .feature .go svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
  transition: transform 0.18s ease;
}
.site-header .mega .feature .go:hover svg {
  transform: translateX(2px);
}
.site-header .mega .feature .alerts-link {
  display: inline-flex;
  align-items: center;
  color: #aebfd0;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 12px;
  padding: 0;
  border-radius: 6px;
  transition: color 0.15s ease;
}
.site-header .mega .feature .alerts-link:hover {
  background: none;
  color: #fff;
}
/* Two-column mega (Resources) — same style as Travel Jobs, no feature card */
.site-header .mega.two {
  width: max-content;
  grid-template-columns: max-content max-content;
  padding: 12px 14px;
  gap: 2px 26px;
}
.site-header .mega.two h4 {
  margin: 4px 0 5px 8px;
}
.site-header .mega.two a {
  padding: 6px 8px;
  white-space: nowrap;
}

/* ===== Mobile ===== */
.site-header .hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1.5px solid var(--cxs-line);
  background: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.site-header .hamburger svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--cxs-navy);
}
.drawer,
.scrim {
  display: none;
}
/* Tighten the nav before it gets cramped (1100–1280). */
@media (max-width: 1280px) {
  .site-header .bar {
    gap: 16px;
  }
  .site-header .navlink {
    padding: 10px 11px;
    font-size: 14.5px;
  }
}
/* Collapse to the hamburger drawer early enough to avoid a cramped bar. */
@media (max-width: 1100px) {
  .site-header .primary {
    display: none;
  }
  .site-header .hamburger {
    display: inline-flex;
  }
  .site-header .bar {
    gap: 14px;
    justify-content: space-between;
  }
  .site-header .actions {
    margin-left: auto;
  }
}
@media (max-width: 768px) {
  .site-header .brandimg,
  .drawer .brandimg {
    height: 34px;
  }
  /* Mobile: swap the horizontal logo for the vertical variant. */
  .site-header .brandimg--desktop,
  .drawer .brandimg--desktop {
    display: none;
  }
  .site-header .brandimg--mobile,
  .drawer .brandimg--mobile {
    display: block;
  }
  .site-header .bar {
    gap: 12px;
  }
  .site-header .cta {
    padding: 8px 19px 8px 16px;
  }
}
@media (max-width: 560px) {
  .drawer .account {
    display: none;
  }
  .site-header .bar {
    padding: 12px 16px;
  }
}
@media (max-width: 440px) {
  .site-header .brandimg {
    height: 30px;
  }
  .site-header .actions {
    gap: 8px;
  }
  /* Keep logo + CTA + hamburger on one row on the narrowest phones. */
  .site-header .actions .account {
    display: none;
  }
}

/* Drawer */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 34, 0.45);
  /* Above the sticky header (z-index 1100) so the drawer head isn't covered. */
  z-index: 1150;
  opacity: 0;
  transition: 0.2s;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 86vw);
  background: #fff;
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
}
body.cxs-drawer-open .scrim {
  display: block;
  opacity: 1;
}
body.cxs-drawer-open .drawer {
  display: flex;
  transform: translateX(0);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--cxs-line);
}
.drawer-head .x {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--cxs-line);
  background: none;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.drawer-head .x svg {
  width: 22px;
  height: 22px;
  color: var(--cxs-navy);
}
.drawer-cta {
  margin: 16px 18px 8px;
  display: flex;
  gap: 10px;
}
.drawer-cta .cta {
  flex: 1;
  justify-content: center;
}
.drawer-search {
  position: relative;
  margin: 8px 18px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.6px solid var(--cxs-line);
  border-radius: 11px;
  padding: 12px 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
/* Focus ring belongs on the whole field, not just the input. */
.drawer-search:focus-within {
  border-color: var(--cxs-teal);
  box-shadow: 0 0 0 3px var(--cxs-teal-soft);
}
.drawer-search svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--cxs-teal);
}
.drawer-search form {
  flex: 1;
  min-width: 0;
  display: flex;
}
.drawer-search input {
  border: none;
  outline: none;
  font: inherit;
  /* Explicit 16px overrides the inherited (~14.6px) size so iOS Safari
     doesn't auto-zoom the page when the header search field is focused. */
  font-size: 16px;
  width: 100%;
  color: var(--cxs-ink);
  background: none;
  /* Pin the box: Elementor/Astra form globals (homepage) otherwise add
     box-shadow, 40px height, and padding the landing pages don't have. */
  box-shadow: none;
  height: 24px;
  min-height: 0;
  line-height: 24px;
  padding: 0;
  border-radius: 0;
}
/* Suggestions panel, injected by header-search.js. Class names are
   deliberately distinct from home-filters.css's .hf-suggest so the two
   widgets stay fully independent (see assets/js/header-search.js). */
.drawer-search .ds-suggest[hidden] {
  display: none;
}
.drawer-search .ds-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--cxs-white, #fff);
  border: 1px solid var(--cxs-line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11, 37, 51, 0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.drawer-search .ds-suggest button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  color: var(--cxs-ink);
  text-align: left;
}
.drawer-search .ds-suggest button:hover,
.drawer-search .ds-suggest button.is-active {
  background: #eef7f7;
}
.drawer-search .ds-suggest-t {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-search .ds-suggest-ct {
  min-width: 64px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cxs-teal-d, #0879a2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.drawer-search .ds-suggest button b {
  font-weight: 700;
  color: var(--cxs-teal-d, #0879a2);
}
.drawer-nav {
  padding: 8px 10px 24px;
  overflow-y: auto;
}
.drawer .acc > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cxs-navy);
  background: none;
  border: none;
  cursor: pointer;
}
.drawer .acc > button:hover {
  background: var(--cxs-panel);
}
.drawer .acc > button .chev {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}
.drawer .acc.open > button .chev {
  transform: rotate(180deg);
}
.drawer .acc .sub {
  display: none;
  padding: 2px 8px 10px 14px;
  list-style: none;
  margin: 0;
}
.drawer .acc.open .sub {
  display: block;
}
.drawer .acc .sub a,
.drawer-nav > a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cxs-slate);
  text-decoration: none;
}
.drawer .acc .sub a:hover,
.drawer-nav > a:hover {
  background: var(--cxs-teal-soft);
  color: var(--cxs-teal-d);
}
.drawer-nav > a {
  font-size: 16px;
  font-weight: 700;
  color: var(--cxs-navy);
}
.drawer .acc .sub h4 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cxs-muted);
  margin: 8px 12px 2px;
}

/* ===== Footer ===== */
.footwrap {
  container-type: inline-size;
}
.ftr {
  background: linear-gradient(180deg, #16263b, #0f1d2e);
  color: #fff;
}
.ftr a {
  color: #aebed0;
  text-decoration: none;
  transition: 0.15s;
}
.ftr a:hover {
  color: #fff;
}
.ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ftr-main {
  padding: 32px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.ftr-brand {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.ftr-logo {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 11px;
}
.ftr-logo .mk {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #39b8eb, #1c8ad2);
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 800;
  color: #fff;
  font-size: 20px;
}
.ftr-logo .wm {
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.ftr-logo .wm b {
  display: block;
  font-size: 16px;
  color: #fff;
}
.ftr-logo .wm span {
  display: block;
  font-size: 11px;
  color: #8fa6bd;
  letter-spacing: 0.18em;
}
.ftr-tag {
  color: #9fb2c6;
  font-size: 13px;
  max-width: 300px;
  line-height: 1.5;
}
/* Footer logo image (replaces the text wordmark). */
.ftr-logo-img {
  height: 38px;
  width: auto;
  max-width: 220px;
  display: block;
}

.ftr-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ftr-contact li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: #aebed0;
}
.ftr-contact svg {
  width: 15px;
  height: 15px;
  color: #39b8eb;
  flex: none;
  margin-top: 2px;
}
.ftr-contact a {
  color: #aebed0;
}
/* Primary phone: stepped up from the 13px contact default so it owns the hierarchy. */
.ftr-contact li.ftr-phone {
  align-items: center;
}
.ftr-contact li.ftr-phone svg {
  width: 18px;
  height: 18px;
  margin-top: 0;
}
.ftr-contact li.ftr-phone a {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.2;
}
.ftr-contact li.ftr-phone a:hover {
  color: #39b8eb;
}
.ftr-social {
  display: flex;
  gap: 8px;
}
.ftr-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  color: #cdd9e6;
}
.ftr-social a:hover {
  background: #39b8eb;
  border-color: #39b8eb;
  color: #fff;
  transform: translateY(-2px);
}
.ftr-social svg {
  width: 15px;
  height: 15px;
}
.ftr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
}
.ftr-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
.ftr-col li {
  margin-bottom: 8px;
}
.ftr-col a {
  font-size: 13px;
}
/* Right rail: Joint Commission seal + app badges (5th grid column at >=700px). */
.ftr-rail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.ftr .jc {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.ftr .jc .seal {
  width: 58px;
  height: 58px;
  flex: none;
  display: block;
}
.ftr .jc .jctext {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: #aebed0;
  max-width: 160px;
}
.ftr .appblock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ftr .appblock h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.ftr .apps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.ftr .badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.15s;
}
.ftr .badge img {
  width: 135px;
  height: auto;
  display: block;
}
.ftr .badge:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}
.ftr-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  text-align: center;
}
.ftr-legal .eoe {
  font-size: 12px;
  color: #8fa6bd;
}
.ftr-legal .ll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ftr-legal .ll a {
  font-size: 12px;
}
.ftr-legal .cr {
  font-size: 12px;
  color: #7a8ea3;
}
@container (min-width: 700px) {
  .ftr-main {
    padding: 40px 40px 28px;
    display: grid;
    grid-template-columns: 1.55fr 0.9fr 0.9fr 0.9fr 1.05fr;
    gap: 36px;
  }
  .ftr-brand {
    grid-column: 1;
  }
  .ftr-cols {
    display: contents;
  }
  .ftr-col {
    min-width: 0;
  }
  .ftr-rail {
    grid-column: 5;
  }
  .ftr .jc .jctext {
    max-width: none;
  }
  .ftr-legal {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 16px 40px;
  }
}
/* Rail wraps to a row (seal beside the app badges) under the 700px container breakpoint. */
@container (max-width: 699px) {
  .ftr-rail {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 34px;
    align-items: flex-start;
  }
}

/* ===== Accessibility polish: keyboard focus + reduced motion ===== */
.site-header a:focus-visible,
.site-header button:focus-visible,
.drawer a:focus-visible,
.drawer button:focus-visible,
.footwrap a:focus-visible,
.footwrap button:focus-visible {
  outline: 3px solid var(--cxs-teal);
  outline-offset: 2px;
  border-radius: 6px;
}
/* The search field shows its focus on the container (.drawer-search). */
.drawer-search input:focus-visible {
  outline: none;
  border: none;
}
.footwrap a:focus-visible,
.footwrap button:focus-visible,
.ftr-social a:focus-visible {
  outline-color: #39b8eb;
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header *,
  .drawer,
  .drawer *,
  .scrim,
  .footwrap *,
  .seg-ind {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .site-header .cta:hover,
  .site-header .mega .feature .go:hover,
  .site-header .mega .feature .go:hover svg,
  .ftr-social a:hover,
  .ftr .badge:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Sitewide Anders Group compact chrome

   The current header/footer template parts use the same compact Anders Group
   chrome introduced with the blog redesign. These rules are deliberately
   scoped to their new roots so existing page, job, landing, and Elementor
   component styles keep their own tokens and layout systems.
   ========================================================================== */
body.cxs-site-theme {
  /* Usable content width. Shells add their responsive side gutters outside
     this value so the header/footer align with the wider blog content rather
     than making 1240px include (and lose) up to 64px of padding. */
  --ag-shell-content-max: 1240px;
  --ag-ink: #011624;
  --ag-navy: #033d63;
  --ag-slate: #33475b;
  --ag-accent: #044f81;
  --ag-accent-line: #cddce6;
  --ag-action: #7fff00;
  --ag-canvas: #f7fdf3;
  --ag-card: #ffffff;
  --ag-line: #e7eef3;
  --ag-on-dark: #ffffff;
  --ag-on-dark-2: #d6e4ee;
  --ag-on-dark-3: #8fb0c6;
  --ag-line-on-dark: rgba(255, 255, 255, 0.16);
  --ag-radius-sm: 9px;
}

body.cxs-site-theme .cxs-site-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

body.cxs-site-theme .cxs-blogheader,
body.cxs-site-theme .cxs-blogheader *,
body.cxs-site-theme .site-footer,
body.cxs-site-theme .site-footer * {
  box-sizing: border-box;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

body.cxs-site-theme .cxs-blogheader ul,
body.cxs-site-theme .site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.cxs-site-theme .cxs-blogheader .shell,
body.cxs-site-theme .site-footer .shell {
  width: 100%;
  max-width: calc(var(--ag-shell-content-max) + 32px);
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
}

body.cxs-site-theme .skip-link {
  position: absolute;
  top: -56px;
  left: 12px;
  z-index: 1200;
  padding: 10px 16px;
  border-radius: var(--ag-radius-sm);
  background: var(--ag-accent);
  color: var(--ag-on-dark);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease;
}

body.cxs-site-theme .skip-link:focus {
  top: 12px;
}

body.cxs-site-theme .cxs-blogheader {
  position: sticky;
  top: 0;
  z-index: 1100;
  border-bottom: 1px solid var(--ag-line);
  background: var(--ag-card);
}

body.cxs-site-theme .cxs-blogheader .header-inner {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.cxs-site-theme .cxs-blogheader .logo,
body.cxs-site-theme .site-footer .logo {
  min-height: 44px;
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--ag-ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

body.cxs-site-theme .cxs-blogheader .logo {
  width: 86px;
}

body.cxs-site-theme .cxs-blogheader .logo img {
  width: auto;
  max-width: 86px;
  max-height: 32px;
  display: block;
}

body.cxs-site-theme .cxs-blogheader .brandimg--mobile {
  display: none;
}

body.cxs-site-theme .cxs-blogheader .site-nav {
  display: none;
}

body.cxs-site-theme .cxs-blogheader .site-nav ul {
  display: flex;
  gap: 18px;
}

body.cxs-site-theme .cxs-blogheader .site-nav a {
  min-height: 44px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--ag-slate);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

body.cxs-site-theme .cxs-blogheader .site-nav a:hover {
  border-bottom-color: var(--ag-accent);
  color: var(--ag-accent);
  text-decoration: none;
}

body.cxs-site-theme .cxs-blogheader .site-nav a[aria-current="page"] {
  border-bottom-color: var(--ag-action);
  color: var(--ag-accent);
}

body.cxs-site-theme .cxs-blogheader .header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

body.cxs-site-theme .cxs-blogheader .header-phone {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ag-accent);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

body.cxs-site-theme .cxs-blogheader .header-phone:hover {
  text-decoration: underline;
}

body.cxs-site-theme .cxs-blogheader .btn-search {
  min-height: 44px;
  padding: 11px 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1.6px solid var(--ag-accent-line);
  border-radius: 999px;
  background: var(--ag-card);
  color: var(--ag-accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

body.cxs-site-theme .cxs-blogheader .btn-search:hover {
  border-color: var(--ag-accent);
  background: var(--ag-canvas);
  text-decoration: none;
}

body.cxs-site-theme .site-footer {
  width: 100%;
  max-width: none;
  margin-top: auto;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  background: var(--ag-navy);
  color: var(--ag-on-dark-2);
}

body.cxs-site-theme .site-footer .footer-inner {
  padding-top: 44px;
  padding-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 64px;
}

body.cxs-site-theme .site-footer .footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
}

body.cxs-site-theme .site-footer .logo {
  width: 101px;
  color: var(--ag-on-dark);
}

body.cxs-site-theme .site-footer .logo img {
  width: auto;
  max-width: 101px;
  max-height: 28px;
  display: block;
}

body.cxs-site-theme .site-footer .footer-col h3 {
  margin: 0 0 12px;
  color: var(--ag-on-dark-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.cxs-site-theme .site-footer .footer-col ul {
  display: grid;
  gap: 8px;
}

body.cxs-site-theme .site-footer .footer-col a {
  padding: 6px 0;
  display: inline-block;
  color: var(--ag-on-dark-2);
  font-size: 14px;
  text-decoration: none;
}

body.cxs-site-theme .site-footer .footer-col a:hover {
  text-decoration: underline;
}

body.cxs-site-theme .site-footer .footer-legal {
  padding-top: 16px;
  padding-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  border-top: 1px solid var(--ag-line-on-dark);
  color: var(--ag-on-dark-3);
  font-size: 12px;
}

body.cxs-site-theme .cxs-blogheader a:focus-visible,
body.cxs-site-theme .site-footer a:focus-visible {
  outline: 3px solid var(--ag-action);
  outline-offset: 2px;
  border-radius: 5px;
}

@media (min-width: 768px) {
  body.cxs-site-theme .cxs-blogheader .shell,
  body.cxs-site-theme .site-footer .shell {
    max-width: calc(var(--ag-shell-content-max) + 48px);
    padding-right: 24px;
    padding-left: 24px;
  }

  body.cxs-site-theme .cxs-blogheader .header-inner {
    height: 72px;
    gap: 18px;
  }

  body.cxs-site-theme .cxs-blogheader .site-nav {
    display: block;
  }

  body.cxs-site-theme .cxs-blogheader .btn-search {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  body.cxs-site-theme .cxs-blogheader .shell,
  body.cxs-site-theme .site-footer .shell {
    max-width: calc(var(--ag-shell-content-max) + 64px);
    padding-right: 32px;
    padding-left: 32px;
  }

  body.cxs-site-theme .cxs-blogheader .header-inner {
    gap: 28px;
  }

  body.cxs-site-theme .cxs-blogheader .site-nav ul {
    gap: 26px;
  }

  body.cxs-site-theme .site-footer .footer-legal {
    padding-bottom: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cxs-site-theme .skip-link,
  body.cxs-site-theme .cxs-blogheader *,
  body.cxs-site-theme .site-footer * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}