/* ══════════════════════════════════════════
   NAVIGATION — light, sticky, subtle blur
══════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--c-surface-blur);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-outline-variant);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  min-height: 88px;
  padding-block: var(--sp-3);
  padding-inline: var(--gutter);
  max-width: var(--container-wide);
  margin-inline: auto;
}
.nav__inner > nav { min-width: 0; }
.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-gray-900);
  letter-spacing: -0.03em;
}
.nav__logo img {
  height: 56px;
  width: auto;
  display: block;
}
.nav__logo span { color: var(--c-royal); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-8));
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__links a {
  color: var(--c-gray-500);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--c-royal); }

/* Dropdown trigger */
.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--c-gray-500);
  font-size: var(--text-nav);
  font-weight: 500;
  padding: 0;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__dropdown-toggle:hover,
.nav__item--has-dropdown:focus-within > .nav__dropdown-toggle,
.nav__dropdown-toggle[aria-expanded="true"],
.nav__dropdown-toggle[aria-current="true"] { color: var(--c-royal); }
.nav__caret { font-size: 0.7em; transition: transform var(--t-fast) var(--ease-out); }
.nav__item--has-dropdown:hover .nav__caret,
.nav__dropdown-toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__item { position: relative; display: flex; align-items: center; }

/* Dropdown panel */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 250px;
  background: var(--c-surface-elevated);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              visibility var(--t-fast);
  z-index: var(--z-nav);
}
/* Invisible bridge over the gap so the menu stays open while the cursor
   travels from the trigger down into the panel */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav__item--has-dropdown:hover > .nav__dropdown,
.nav__item--has-dropdown:focus-within > .nav__dropdown,
.nav__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown li { margin: 0; }
.nav__dropdown a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--c-gray-500);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: none;
  white-space: nowrap;
}
.nav__dropdown a:hover,
.nav__dropdown a:focus-visible,
.nav__dropdown a[aria-current="page"] {
  background: var(--c-surface-container);
  color: var(--c-royal);
}
.nav__dropdown .nav__dropdown-lead {
  font-weight: 700;
  color: var(--c-gray-900);
  border-bottom: 1px solid var(--c-outline-variant);
  margin-bottom: var(--sp-1);
  padding-bottom: var(--sp-2);
}

.nav__cta { flex-shrink: 0; }
.nav__cta .btn--sm {
  min-width: 190px;
  padding-inline: var(--sp-4);
}

/* Mobile toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--sp-2);
}
.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c-gray-900);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast);
}
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Keep the mobile CTA hidden until the compact menu is opened. */
.nav__cta-mobile { display: none; }

/* Switch to the compact navigation before the desktop CTA can overflow. */
@media (max-width: 960px) {
  .nav__toggle { display: flex; }

  .nav__links {
    display: none;
    /* Anchored to the sticky header itself, so the panel always sits directly
       under it no matter how tall the header renders at a given width. */
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-surface);
    padding: var(--sp-6) var(--gutter) var(--sp-10);
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--c-outline-variant);
    box-shadow: var(--shadow-lg);
  }
  .nav--open .nav__links { display: flex; }

  .nav__item { display: block; }
  .nav__item > a,
  .nav__dropdown-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-3) 0;
    font-size: var(--text-base);
  }
  .nav__item--has-dropdown { border-bottom: 1px solid var(--c-outline-variant); }

  .nav__dropdown {
    display: none;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0 0 var(--sp-3) var(--sp-3);
  }
  .nav__item--has-dropdown:hover > .nav__dropdown,
  .nav__item--has-dropdown:focus-within > .nav__dropdown,
  .nav__dropdown.is-open {
    display: block;
    /* Cancel the desktop panel's centering transform — it is more specific than
       the base mobile rule and would otherwise push the submenu off-screen. */
    transform: none;
    left: auto;
    top: auto;
  }
  .nav__dropdown a { padding: var(--sp-2) 0; }
  .nav__caret { display: none; }

  .nav__dropdown a { white-space: normal; }

  .nav__cta { display: none; }
  .nav__cta-mobile { display: block; margin-top: var(--sp-5); }
  /* `.nav__links a` outranks `.btn--primary`, so restore the button's own colour. */
  .nav__cta-mobile .btn--primary,
  .nav__cta-mobile .btn--primary:hover { color: var(--c-white); }
  .nav__cta-mobile .btn { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════
   BUTTONS — technical mono labels, soft lift
══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-fast),
              opacity var(--t-fast);
  min-height: 44px;
  white-space: nowrap;
}
/* On a phone the longer labels ("Schedule a Healthcare IT Assessment") are
   wider than the screen, and `nowrap` turns that into a sideways-scrolling
   page — worse, a nowrap button inside a grid sets the track's min-content
   width, so it drags the whole column out with it. Let them wrap instead. */
@media (max-width: 600px) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}
.btn:focus-visible {
  outline: 3px solid var(--c-steel);
  outline-offset: 3px;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-royal);
  color: var(--c-white);
  border-color: var(--c-royal);
}
.btn--primary:hover {
  background: var(--c-royal-light);
  box-shadow: var(--shadow-royal);
  color: var(--c-white);
  text-decoration: none;
}

.btn--secondary {
  background: transparent;
  color: var(--c-royal);
  border-color: var(--c-royal);
}
.btn--secondary:hover {
  background: var(--on-light-royal);
  color: var(--c-royal);
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border-color: var(--on-dark-border-strong);
}
.btn--ghost:hover {
  background: var(--on-dark-fill-hover);
  color: var(--c-white);
  border-color: var(--c-white);
  text-decoration: none;
}
/* Ghost buttons sit on light interior page-heroes — render as outlined blue */
.page-hero .btn--ghost,
.hero .btn--ghost {
  color: var(--c-royal);
  border-color: var(--c-royal);
}
.page-hero .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: var(--on-light-royal);
  color: var(--c-royal);
  border-color: var(--c-royal);
}

.btn--lg {
  font-size: var(--text-base);
  padding: var(--sp-4) var(--sp-8);
}
.btn--sm {
  font-size: var(--text-xs);
  padding: var(--sp-3) var(--sp-5);
}


/* ══════════════════════════════════════════
   HERO (home) — light, content-led
══════════════════════════════════════════ */
.hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--c-surface);
  color: var(--c-gray-900);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--on-light-royal-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--on-light-royal-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, var(--on-light-royal-grid), transparent 70%);
  mask-image: linear-gradient(to bottom, var(--on-light-royal-grid), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__eyebrow,
.hero__services {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-royal);
  font-weight: 600;
  margin-bottom: var(--sp-6);
}
.hero__services {
  display: block;
  letter-spacing: 0.08em;
  margin-top: calc(var(--sp-6) * -1);
}
.hero__headline {
  font-size: var(--text-hero);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: none;
  margin-bottom: var(--sp-6);
  color: var(--c-gray-900);
}
.hero__headline-line { display: block; white-space: nowrap; }
.hero__headline em {
  font-style: italic;
  color: var(--c-royal);
  display: block;
}
.hero__subline {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--c-gray-500);
  max-width: 62ch;
  margin-bottom: var(--sp-10);
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.hero__actions > .btn {
  flex: 1 1 220px;
  min-width: 220px;
  min-height: 56px;
}
.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-royal);
  text-decoration: none;
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid var(--c-royal);
  border-radius: var(--radius-lg);
  min-height: 44px;
  transition: background var(--t-fast);
}
.hero__phone-label { font-size: var(--text-xs); letter-spacing: 0.1em; }
.hero__phone-value { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__phone:hover { background: var(--on-light-royal); color: var(--c-royal); }

/* Hero photo — sits behind the copy on the right. Held down by opacity and
   masked away toward the headline so no line of text lands on busy pixels.
   `.hero .container` carries z-index:1, which keeps the copy on top. */
.hero__media {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(46%, 620px);
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to left, var(--c-gray-900) 25%, transparent 95%);
  mask-image: linear-gradient(to left, var(--c-gray-900) 25%, transparent 95%);
}
@media (max-width: 900px) {
  .hero__media { display: none; }
}


/* ══════════════════════════════════════════
   MEDIA — inline photography
══════════════════════════════════════════ */
.media-block {
  display: block;
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius);
}
.media-block--wide { aspect-ratio: 16 / 10; }

/* A photo used as section texture rather than as content. It sits behind the
   copy, held far enough down that it reads as tone on the band instead of as a
   picture competing with the cards, and faded out at the top and bottom so the
   section still starts and ends on flat colour. */
.section--media {
  position: relative;
  overflow: hidden;
}
.section--media > .container { position: relative; z-index: 1; }
.section__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.17;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--c-gray-900) 30%,
                                      var(--c-gray-900) 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, var(--c-gray-900) 30%,
                              var(--c-gray-900) 70%, transparent 100%);
}

/* Services index: the cards and the two standing photos are children of ONE
   grid, not a card grid sitting next to a photo column. That is what lets each
   photo be pinned to exact card rows — with two separate grids there is no row
   geometry to align to. Below 1001px the whole thing collapses to the ordinary
   card grid and the photos go full width. */
.services-layout {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.services-layout__media {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
@media (max-width: 900px) {
  .services-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .services-layout { grid-template-columns: 1fr; }
}

@media (min-width: 1001px) {
  /* The first photo sits in the left rail beside rows 1–3. Those six cards use
     columns 2 and 3; later cards return to columns 1 and 2 so the second photo
     can sit in the right rail. */
  .services-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(260px, 26vw, 380px);
    column-gap: var(--sp-10);
  }
  .services-layout > .card:nth-child(odd)  { grid-column: 1; }
  .services-layout > .card:nth-child(even) { grid-column: 2; }
  .services-layout > .card:nth-child(-n+6):nth-child(odd)  { grid-column: 2; }
  .services-layout > .card:nth-child(-n+6):nth-child(even) { grid-column: 3; }

  .services-layout__media {
    grid-column: 3;
    aspect-ratio: auto;
    /* Fills the rows it spans instead of setting its own height, so the bottom
       edge lands exactly on the bottom of its last card row. */
    height: 100%;
    /* Faded into the page rather than framed — a hard border beside the cards
       read as a third card. The left edge dissolves toward the copy it sits
       next to; the top and bottom soften the ends of the run. */
    border: none;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, var(--c-gray-900) 26%),
      linear-gradient(to bottom, transparent 0%, var(--c-gray-900) 9%,
                      var(--c-gray-900) 91%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, var(--c-gray-900) 26%),
      linear-gradient(to bottom, transparent 0%, var(--c-gray-900) 9%,
                      var(--c-gray-900) 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  /* Rows 1–3: left of the first six service cards. */
  .services-layout__media--a {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  /* Rows 5–7: right of the final six service cards. */
  .services-layout__media--b { grid-row: 5 / span 3; }
}

.footer__col .footer__title > a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ══════════════════════════════════════════
   BADGE STRIP — certifications & partner marks
══════════════════════════════════════════ */
/* The Women-Owned mark is the primary affiliation. The partner mark beside it
   stays secondary, and the band remains close in height to the statistics
   strip above it. */
.badge-strip {
  background: var(--c-surface);
  padding-block: var(--sp-10);
  border-bottom: 1px solid var(--c-outline-variant);
}
.badge-strip__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6) clamp(var(--sp-6), 4vw, var(--sp-12));
}
.badge-strip__logo {
  width: min(30vw, 340px);
  height: 54px;
  object-fit: contain;
  display: block;
  flex: none;
}
.badge-strip__logo--featured {
  width: min(22vw, 230px);
  height: 80px;
  filter: drop-shadow(0 8px 14px rgba(var(--c-royal-rgb), 0.2));
}
.badge-strip__logo--compact {
  width: min(20vw, 220px);
  height: 34px;
}
@media (max-width: 700px) {
  .badge-strip__inner {
    display: grid;
    grid-template-columns: minmax(112px, 1.25fr) minmax(0, 1fr);
    gap: var(--sp-3);
  }
  .badge-strip__logo {
    width: 100%;
    height: 40px;
  }
  .badge-strip__logo--featured {
    width: 100%;
    height: 64px;
  }
  .badge-strip__logo--compact {
    width: 100%;
    height: 26px;
  }
}


/* ══════════════════════════════════════════
   TRUST STRIP — dark anchor band
══════════════════════════════════════════ */
.trust-strip {
  background: var(--bg-industry-card);
  padding-block: var(--sp-12);
}
.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-10) var(--sp-12);
}
.trust-stat { text-align: center; color: var(--c-white); }
.trust-stat__number {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-steel-light);
}
.trust-stat__number--text {
  font-size: clamp(1.55rem, 2.5vw, 2rem);
}
.trust-stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-text-dim);
  margin-top: var(--sp-2);
}


/* ══════════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════════ */
.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-royal);
  margin-bottom: var(--sp-4);
}
.section--dark .section-label,
.section--royal .section-label { color: var(--c-steel-light); }
.section-header { margin-bottom: var(--sp-12); }
.section-header h2 {
  margin-bottom: var(--sp-4);
  font-size: var(--text-4xl);
  font-weight: 700;
}
/* Second title line that belongs to the h2 but reads a step quieter — same
   role as `.hero__headline em`, so it breaks to its own line. */
.section-header__sub {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--c-gray-500);
  margin-top: var(--sp-2);
}
.section--dark .section-header__sub,
.section--royal .section-header__sub { color: var(--c-steel-light); }
.section-header p  { color: var(--c-gray-500); font-size: var(--text-xl); }
.section--dark .section-header p { color: var(--c-gray-300); }


/* ══════════════════════════════════════════
   SERVICE CARDS — white, hairline border, soft lift
══════════════════════════════════════════ */
/* ── Card scale ──
   Set `--card-scale` on a card, or on any ancestor (usually the grid), to size
   a whole row of cards down together. Box dimensions — padding, the icon tile,
   min-heights — track it exactly. Type is scaled half as hard, because a
   heading shrunk linearly with its box stops being readable well before the
   box looks wrong. */
.cards--90 { --card-scale: 0.90; }  /* 10% smaller */
.cards--85 { --card-scale: 0.85; }  /* 15% smaller */
.cards--80 { --card-scale: 0.80; }  /* 20% smaller */
.cards--65 { --card-scale: 0.65; }  /* 35% smaller */

.card {
  --card-type-scale: calc(1 - (1 - var(--card-scale, 1)) * 0.5);
  background: var(--c-white);
  /* The card brings its own background, so it has to bring its own text colour
     too — inheriting it leaves white headings on white when the card sits
     inside a dark band. */
  color: var(--c-gray-900);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius);
  padding: calc(var(--sp-8) * var(--card-scale, 1));
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-royal);
}
.card--dark {
  background: var(--c-forest-light);
  color: var(--c-white);
  border-color: var(--on-dark-border);
}
.home-cabling .card--dark {
  background: var(--c-cabling-card);
}
.card--dark:hover {
  border-color: var(--c-steel-light);
  box-shadow: var(--shadow-forest);
}

/* Shared icon primitive — stroke inherits the tile's `color`, so every
   icon picks up the brand palette instead of carrying its own. */
.icon {
  width: var(--icon-glyph);
  height: var(--icon-glyph);
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Sits in a run of text rather than in a tile — scales with the type. */
.icon--inline {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin-right: 0.15em;
}

/* The glyph is centred by the flex box rather than by line-height, so tall
   emoji (🏗️) and short ones (💾) sit on the same optical centre. The tile
   itself is centred in the card and sized off `--card-scale`, so it stays in
   proportion wherever the card is scaled down. */
.card__icon {
  width: var(--icon-tile);
  height: var(--icon-tile);
  background: var(--c-icon-tile);
  color: var(--c-royal);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-emoji);
  font-size: var(--text-glyph-sm);
  line-height: 1;
  margin-block-end: calc(var(--sp-6) * var(--card-scale, 1));
  margin-inline: auto;
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-out);
}
.card:hover .card__icon { transform: scale(1.08) translateY(-2px); }
.card--dark .card__icon {
  background: var(--on-dark-fill-raised);
  color: var(--c-steel-light);
}
.card--center { text-align: center; }
.card__stat {
  font-family: var(--font-head);
  font-size: var(--text-glyph);
  font-weight: 700;
  line-height: 1;
  color: var(--c-steel-light);
  margin-bottom: var(--sp-3);
}

.card h3,
.card h2 {
  font-family: var(--font-head);
  font-size: calc(var(--text-2xl) * var(--card-type-scale, 1));
  font-weight: 600;
  margin-bottom: calc(var(--sp-3) * var(--card-scale, 1));
  transition: color var(--t-fast);
}
.card:hover h3,
.card:hover h2 { color: var(--c-royal); }
.card--dark:hover h3,
.card--dark:hover h2 { color: var(--c-white); }
.card__title-link,
.card__title-link:visited {
  color: var(--c-gray-900);
  text-decoration: none;
}
.card__title-link:hover {
  color: var(--c-royal);
  text-decoration: underline;
}
/* Body copy deliberately does not scale — it is the readability floor, and a
   card's height is mostly its copy, so shrinking it makes the box jump a whole
   line rather than tightening smoothly. */
.card p {
  color: var(--c-gray-500);
  font-size: var(--text-base);
  flex-grow: 1;
}
.card--dark p { color: var(--c-gray-300); }
.card__link {
  margin-top: calc(var(--sp-6) * var(--card-scale, 1));
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-royal);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: gap var(--t-fast) var(--ease-out);
}
.card--dark .card__link { color: var(--c-steel-light); }
.card__link::after { content: '→'; }
.card:hover .card__link { gap: var(--sp-4); }


/* ══════════════════════════════════════════
   TESTIMONIALS — glass cards on dark band
══════════════════════════════════════════ */
.testimonial {
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-border);
  border-radius: var(--radius);
  padding: var(--sp-10);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  position: relative;
}
.testimonial__quote {
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--c-white);
  margin-bottom: var(--sp-6);
  font-style: italic;
}
.testimonial__author {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--c-white);
}
.testimonial__company {
  font-size: var(--text-sm);
  color: var(--c-steel-light);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}


/* ══════════════════════════════════════════
   ACCORDION / FAQ — bordered cards
══════════════════════════════════════════ */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border: none;
}
.accordion__item {
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius);
  background: var(--c-white);
  overflow: hidden;
}
.accordion__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--c-gray-900);
  gap: var(--sp-4);
  transition: background var(--t-fast);
}
.accordion__trigger:hover { background: var(--c-surface-alt); }
.accordion--dark .accordion__trigger { color: var(--c-white); }
.accordion__trigger:focus-visible {
  outline: 2px solid var(--c-royal);
  outline-offset: -2px;
}
.accordion__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-outline-variant);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--c-royal);
  transition: transform var(--t-base) var(--ease-out),
              background var(--t-fast),
              color var(--t-fast);
}
.accordion__item[open] .accordion__icon,
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
  background: var(--c-royal);
  color: var(--c-white);
  border-color: var(--c-royal);
}
.accordion__panel {
  padding: 0 var(--sp-6);
  color: var(--c-gray-500);
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out),
              padding var(--t-base);
}
.accordion--dark .accordion__panel { color: var(--c-gray-300); }
.accordion__panel.is-open {
  max-height: 1000px;
  padding: 0 var(--sp-6) var(--sp-6);
}


/* ══════════════════════════════════════════
   CTA BAND — primary blue
══════════════════════════════════════════ */
.cta-band {
  background: var(--c-royal);
  color: var(--c-white);
  padding-block: var(--sp-16);
  text-align: center;
}
.cta-band h2 {
  font-size: var(--text-4xl);
  font-weight: 700;
  margin-bottom: var(--sp-4);
  color: var(--c-white);
}
.cta-band p {
  font-size: var(--text-xl);
  color: var(--on-dark-text);
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  align-items: center;
}


/* ══════════════════════════════════════════
   CONTACT FORM
══════════════════════════════════════════ */
.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.form__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gray-500);
}
.form__input,
.form__textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-gray-900);
  font-size: var(--text-base);
  line-height: 1.5;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 44px;
}
.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--c-royal);
  box-shadow: 0 0 0 2px var(--on-light-royal-ring);
}
.form__textarea { min-height: 120px; resize: vertical; }
.form__group.has-error .form__input,
.form__group.has-error .form__textarea { border-color: var(--c-royal); }
.form__error {
  font-size: var(--text-xs);
  color: var(--c-danger);
  font-weight: 600;
}
.form__status {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius);
  background: var(--c-surface-container);
  color: var(--c-gray-700);
  font-size: var(--text-sm);
}
.form__status.is-success {
  border-color: var(--c-success-border);
  background: var(--c-success-bg);
  color: var(--c-success);
}
.form__status.is-error {
  border-color: var(--c-danger-border);
  background: var(--c-danger-bg);
  color: var(--c-danger);
}
.contact-form button[disabled] {
  cursor: wait;
  opacity: 0.7;
}


/* ══════════════════════════════════════════
   CONNECT CARD — info panel + message form
══════════════════════════════════════════ */
.connect-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius);
  background: var(--c-white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (max-width: 900px) {
  .connect-card { grid-template-columns: 1fr; }
}
.connect-card__info {
  background: var(--c-forest-light);
  color: var(--c-white);
  padding: var(--sp-10);
}
.connect-card__info h3 {
  font-family: var(--font-head);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--sp-8);
}
.connect-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.connect-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.connect-card__item-icon {
  flex-shrink: 0;
  width: var(--icon-tile);
  height: var(--icon-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--on-dark-fill-raised);
  color: var(--c-steel-light);
}
.connect-card__item-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-text-dim);
  margin-bottom: var(--sp-1);
}
.connect-card__item-value,
.connect-card__item a {
  color: var(--c-white);
  font-weight: 600;
  text-decoration: none;
}
.connect-card__item a:hover { color: var(--c-steel-light); }
.connect-card__item address {
  font-style: normal;
  font-weight: 600;
}
.connect-card__directions {
  display: inline-block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel-light) !important;
}
.connect-card__directions::after { content: ' →'; }
.connect-card__hours {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--on-dark-border);
}
.connect-card__hours-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-text-dim);
  margin-bottom: var(--sp-4);
}
.connect-card__hours-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.connect-card__hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}
.connect-card__hours-row dt { color: var(--c-gray-300); }
.connect-card__hours-row dd { margin: 0; font-weight: 600; }
.connect-card__hours-row dd.is-accent { color: var(--c-steel-light); }
.connect-card__info .btn { margin-top: var(--sp-8); width: 100%; }
.connect-card__form {
  padding: var(--sp-10);
}
.connect-card__form h3 {
  font-family: var(--font-head);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.connect-card__form > p {
  color: var(--c-gray-500);
  margin-bottom: var(--sp-8);
}
.connect-card__note {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--c-gray-500);
}
@media (max-width: 600px) {
  .connect-card__info,
  .connect-card__form { padding: var(--sp-6); }
}


/* ══════════════════════════════════════════
   PAGE HERO (interior pages) — light
══════════════════════════════════════════ */
.page-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--c-surface);
  color: var(--c-gray-900);
  border-bottom: 1px solid var(--c-outline-variant);
}
/* Drops the hairline under the hero when the section below already reads as a
   separate block. */
.page-hero--flush { border-bottom: none; }
/* Same treatment as the home hero: photo held down by opacity and masked away
   toward the headline, so no line of copy lands on busy pixels. */
.page-hero--media {
  position: relative;
  overflow: hidden;
}
.page-hero--media > .container { position: relative; z-index: 1; }
.page-hero__media {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(46%, 620px);
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to left, var(--c-gray-900) 25%, transparent 95%);
  mask-image: linear-gradient(to left, var(--c-gray-900) 25%, transparent 95%);
}
@media (max-width: 900px) {
  .page-hero__media { display: none; }
}
.page-hero .breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-gray-500);
  margin-bottom: var(--sp-6);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.page-hero .breadcrumb a { color: var(--c-royal); text-decoration: none; }
.page-hero .breadcrumb a:hover { text-decoration: underline; }
.page-hero h1 {
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
@media (max-width: 480px) {
  :root { --text-4xl: 1.75rem; }
  .page-hero h1 { font-size: 1.875rem; }
}
.page-hero p {
  font-size: var(--text-xl);
  color: var(--c-gray-500);
  max-width: 60ch;
}


/* ══════════════════════════════════════════
   CONSENT — banner, preference dialog, gated embeds
══════════════════════════════════════════ */
/* The banner sits below the nav in stacking order on purpose: it must never
   cover the site menu, because a visitor has to be able to keep browsing
   without answering it. */
.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--c-white);
  color: var(--c-gray-900);
  border-top: 3px solid var(--c-royal);
  box-shadow: 0 -6px 24px rgba(27, 27, 32, 0.16);
  padding: var(--sp-4) var(--gutter);
  /* Keeps the bar clear of the home indicator on notched phones. */
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  animation: consentRise var(--t-base) var(--ease-out);
}
/* Deliberately a short rise rather than a full slide from off-screen: a
   keyframe starting at translateY(100%) leaves the banner completely out of
   view for as long as the animation is stalled — a background tab pauses
   animations at frame 0 — and an unreachable consent banner is worse than an
   unanimated one. At 14px the start frame is still on screen and readable. */
@keyframes consentRise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.consent-banner__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-8);
}
.consent-banner__copy { flex: 1 1 30ch; min-width: 0; }
.consent-banner__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--sp-1);
}
.consent-banner__text {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--c-gray-600);
  max-width: 72ch;
}
.consent-banner__text a { color: var(--c-royal); }
.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
/* Accept and reject are the same component at the same size — neither is
   styled to be the easier answer. */
.consent-banner__actions .btn { min-height: 44px; }
.consent-banner__actions [data-consent="accept"],
.consent-banner__actions [data-consent="reject"] { min-width: 10.5rem; }

/* Reserve the strip the banner covers so it never sits on top of footer
   content while a visitor is still deciding. */
body.has-consent-banner {
  padding-bottom: var(--consent-banner-height, 0px);
}

@media (max-width: 720px) {
  .consent-banner__actions { width: 100%; }
  .consent-banner__actions .btn { flex: 1 1 100%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-banner { animation: none; }
}

/* ── Preference dialog ── */
.consent-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.consent-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 27, 32, 0.55);
}
.consent-dialog__panel {
  position: relative;
  background: var(--c-white);
  color: var(--c-gray-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8);
  width: min(46rem, 100%);
  /* Long category text and 200% zoom both need the panel to scroll rather
     than push its buttons off-screen. */
  max-height: min(85vh, 48rem);
  overflow-y: auto;
}
.consent-dialog__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--sp-3);
  padding-right: var(--sp-8);
}
.consent-dialog__title:focus-visible { outline: 3px solid var(--c-royal); outline-offset: 4px; }
.consent-dialog__desc {
  font-size: var(--text-sm);
  color: var(--c-gray-600);
  margin-bottom: var(--sp-6);
}
.consent-dialog__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-gray-500);
  border-radius: var(--radius);
}
.consent-dialog__close:hover { color: var(--c-gray-900); background: var(--c-surface); }
.consent-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.consent-dialog__actions .btn { min-height: 44px; }
@media (max-width: 560px) {
  .consent-dialog__panel { padding: var(--sp-6); }
  .consent-dialog__actions .btn { flex: 1 1 100%; width: 100%; }
}

/* ── Category rows ── */
.consent-category {
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.consent-category + .consent-category { margin-top: var(--sp-3); }
.consent-category--locked { background: var(--c-surface); }
.consent-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  min-height: 44px;
}
.consent-category--locked .consent-toggle { cursor: default; }
.consent-toggle input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--c-royal);
}
.consent-toggle__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-base);
}
/* The state is spelled out, so it does not rely on the checkbox tint alone. */
.consent-toggle__state {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-gray-500);
}
.consent-category__desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--c-gray-600);
  margin-top: var(--sp-2);
  max-width: none;
}

/* ── Gated embed placeholder ── */
.consent-embed__placeholder {
  border: 1px dashed var(--c-outline-variant);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: var(--sp-8);
  text-align: center;
}
.consent-embed__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: var(--sp-3);
}
.consent-embed__text {
  font-size: var(--text-base);
  color: var(--c-gray-600);
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  max-width: 56ch;
}
.consent-embed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
.consent-embed__actions .btn { min-height: 44px; }
.consent-embed__fallback {
  display: block;
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--c-gray-500);
}
.consent-embed__frame:empty { display: none; }

/* Sits under the submit button on every Web3Forms form, so the privacy terms
   are next to the point of collection rather than only in the footer. */
.form__privacy-note {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--c-gray-500);
  max-width: none;
}
.form__privacy-note a { color: var(--c-royal); }

/* ── Footer settings control ── */
.footer__legal button.footer__legal-btn {
  display: inline-flex;
  align-items: center;
  color: var(--c-gray-300);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  min-height: 44px;
  transition: color var(--t-fast);
}
.footer__legal button.footer__legal-btn:hover { color: var(--c-white); }


/* ══════════════════════════════════════════
   LEGAL PROSE — privacy policy, terms of service
══════════════════════════════════════════ */
/* Long-form running text. Headings are stepped well down from the display
   sizes in base.css, which are tuned for marketing sections and read as
   shouting in a document you are meant to actually read. */
.legal-prose {
  max-width: 74ch;
}
.legal-prose h2 {
  font-size: var(--text-2xl);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
}
.legal-prose > *:first-child { margin-top: 0; }
.legal-prose h3 {
  font-size: var(--text-lg);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.legal-prose p,
.legal-prose li { color: var(--c-gray-700); }
.legal-prose p { max-width: none; }
.legal-prose ul,
.legal-prose ol { margin-block: var(--sp-4); padding-left: var(--sp-6); }
.legal-prose li { margin-bottom: var(--sp-2); }
.legal-prose address {
  font-style: normal;
  line-height: 1.9;
  margin-block: var(--sp-4);
}
.legal-prose__updated {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-gray-500);
}
/* The cookie inventory has seven columns and cannot narrow indefinitely, so it
   scrolls inside its own box rather than dragging the page sideways. */
.table-scroll {
  overflow-x: auto;
  margin-block: var(--sp-6);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius);
}
.legal-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  font-size: var(--text-sm);
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-outline-variant);
}
.legal-table thead th {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gray-900);
  background: var(--c-surface);
  white-space: nowrap;
}
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table td { color: var(--c-gray-700); }
.legal-table code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}
.legal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-block: var(--sp-6);
}
.legal-cta__note { font-size: var(--text-sm); color: var(--c-gray-500); }
/* Long URLs and addresses must never widen the page. */
.legal-prose a { overflow-wrap: anywhere; }


/* ══════════════════════════════════════════
   INDUSTRY CARDS — tall, gradient, no photo
══════════════════════════════════════════ */
.industry-card {
  --card-type-scale: calc(1 - (1 - var(--card-scale, 1)) * 0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(360px * var(--card-scale, 1));
  padding: calc(var(--sp-8) * var(--card-scale, 1));
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-white);
  background: var(--bg-industry-card);
  border: 1px solid var(--c-outline-variant);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.industry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--on-dark-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--on-dark-grid) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.6;
  pointer-events: none;
}
.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: var(--c-white);
}
.industry-card > * { position: relative; z-index: 1; }
.industry-card__icon {
  width: var(--icon-tile);
  height: var(--icon-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-emoji);
  font-size: var(--text-glyph-sm);
  line-height: 1;
  flex-shrink: 0;
  margin-block-end: auto;
  margin-inline: auto;
  color: var(--c-steel-light);
  background: var(--on-dark-fill-raised);
  border: 1px solid var(--on-dark-border);
  border-radius: var(--radius);
  transition: transform var(--t-base) var(--ease-out);
}
.card h2 { font-weight: 700; }
.industry-card:hover .industry-card__icon { transform: scale(1.08) translateY(-2px); }
.industry-card h3,
.industry-card h2 {
  font-family: var(--font-head);
  font-size: calc(var(--text-2xl) * var(--card-type-scale, 1));
  font-weight: 700;
  margin-top: calc(var(--sp-6) * var(--card-scale, 1));
  margin-bottom: calc(var(--sp-2) * var(--card-scale, 1));
}
.industry-card p  { font-size: var(--text-sm); color: var(--on-dark-text); }

.home-industries .industry-card {
  justify-content: flex-start;
  min-height: 230px;
}
.home-industries .industry-card__icon {
  margin-block-end: 0;
}
.home-industries .industry-card h3 {
  margin-top: var(--sp-4);
}

.industries-grid .industry-card {
  min-height: calc(288px * var(--card-scale, 1));
}
/* ══════════════════════════════════════════
   FOOTER — dark band
══════════════════════════════════════════ */
.footer {
  background: var(--c-forest-dark);
  color: var(--c-gray-300);
  padding-block: var(--sp-16) var(--sp-8);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .footer__grid { grid-template-columns: 1fr; }
}
.footer__brand .nav__logo {
  display: block;
  margin-bottom: var(--sp-6);
}
.footer__brand .nav__logo img { height: 69px; width: auto; }
.footer__brand p { font-size: var(--text-sm); line-height: 1.7; max-width: 32ch; color: var(--c-gray-300); }
.footer__col h4,
.footer__col .footer__title {
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-white);
  margin-bottom: var(--sp-6);
}
/* A second list stacked under the one above it in the same column — the Contact
   block carries the address first, then Resources. */
.footer__col .footer__title--stacked { margin-top: var(--sp-8); }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: var(--sp-3); }
.footer__col a {
  color: var(--c-gray-300);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--t-fast);
}
.footer__col a:hover { color: var(--c-white); text-decoration: underline; }
.footer__remote-support-link {
  margin-top: var(--sp-5);
  color: var(--c-white) !important;
  border-color: var(--on-dark-border-strong);
  display: inline-flex;
  width: max-content;
  max-width: 100%;
}
.footer__nap { font-style: normal; font-size: var(--text-sm); line-height: 2; color: var(--c-gray-300); }
.footer__nap a { color: var(--c-gray-300); text-decoration: none; }
.footer__nap a:hover { color: var(--c-white); }
/* Legal links — sit above the hairline so they read as part of the site body
   rather than as copyright fine print. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-bottom: var(--sp-6);
}
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-gray-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--text-sm);
  line-height: 1.4;
  transition: color var(--t-fast);
}
.footer__legal a:hover { color: var(--c-white); }
.footer__bottom {
  border-top: 1px solid var(--on-dark-hairline);
  padding-top: var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-gray-500);
}
.footer__bottom p { color: var(--c-gray-300); opacity: 0.7; }
.footer__bottom p:last-child { font-size: 0.75em; }


/* ══════════════════════════════════════════
   BADGE / COMPLIANCE CHIP
══════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-container);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-royal);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.section--dark .badge {
  background: var(--on-dark-accent-fill);
  border-color: var(--on-dark-accent-border);
  color: var(--c-steel-light);
}