/* =============================================================
   Bercell Integrated Technologies — Design System
   Editorial corporate / quiet authority
   ============================================================= */

/* -----------------------------------------------------------
   1. Tokens
   ----------------------------------------------------------- */
:root {
  /* Locked brand palette */
  --bit-navy:         #002E62;
  --bit-royal-blue:   #002060;
  --bit-medium-blue:  #1F497D;
  /* --bit-silver was #888C8D in the brief; darkened to #6B6E6F so small text
     passes WCAG 2.1 AA (≥4.5:1) on white and on --bit-light-gray.
     Same hue, just darker. The original brand hex is preserved below. */
  --bit-silver:       #6B6E6F;
  --bit-silver-brand: #888C8D;
  --bit-charcoal:     #333333;
  /* --bit-footer-gray was #808080 in the brief; darkened to #5F6364 so 12px
     fine-print passes AA. Used on light backgrounds only — footer strip on
     navy switches to rgba(255,255,255,0.62) which already passes AAA. */
  --bit-footer-gray:  #5F6364;
  --bit-light-gray:   #F5F5F5;
  --bit-white:        #FFFFFF;
  --bit-success:      #28A745;
  --bit-alert:        #E8740C;

  /* Derived surfaces */
  --hairline:         rgba(136, 140, 141, 0.22);
  --hairline-strong:  rgba(0, 46, 98, 0.12);
  --hairline-dark:    rgba(255, 255, 255, 0.14);
  --shadow-card:      0 1px 2px rgba(0, 46, 98, 0.04), 0 8px 24px rgba(0, 46, 98, 0.06);
  --shadow-lift:      0 2px 4px rgba(0, 46, 98, 0.06), 0 14px 36px rgba(0, 46, 98, 0.10);

  /* Typography */
  --font-display: Arial, Helvetica, sans-serif;
  --font-body:    'Aptos', 'Inter', Arial, Helvetica, sans-serif;
  --font-fine:    'Arial Narrow', 'Inter', Arial, Helvetica, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale */
  --fs-eyebrow: 0.6875rem;  /* 11px */
  --fs-fine:    0.75rem;    /* 12px */
  --fs-small:   0.875rem;   /* 14px */
  --fs-body:    1rem;       /* 16px */
  --fs-lead:    1.125rem;   /* 18px */
  --fs-h4:      1.25rem;    /* 20px */
  --fs-h3:      1.625rem;   /* 26px */
  --fs-h2:      2.25rem;    /* 36px */
  --fs-h1:      3rem;       /* 48px */
  --fs-display: 4.25rem;    /* 68px */
  --fs-monolith: 8rem;      /* 128px — for big tabular figures */

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container:       1180px;
  --container-wide:  1320px;
  --radius:          6px;
  --radius-lg:       8px;
  --radius-pill:     999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 420ms;

  /* Chrome heights */
  --h-utility: 38px;
  --h-header: 84px;
  --h-header-scrolled: 64px;
}

@media (max-width: 900px) {
  :root {
    --fs-display: 2.75rem;   /* 44px */
    --fs-h1: 2.25rem;
    --fs-h2: 1.75rem;
    --fs-monolith: 5rem;
    --h-header: 68px;
    --h-header-scrolled: 56px;
  }
}

/* -----------------------------------------------------------
   2. Reset & base
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bit-white);
  color: var(--bit-charcoal);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }

a {
  color: var(--bit-medium-blue);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
a:visited { color: var(--bit-medium-blue); }  /* Stay on-brand; no purple */
a:hover { color: var(--bit-navy); }
a:focus-visible {
  outline: 2px solid var(--bit-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

p { margin: 0 0 1em 0; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em 0; padding-left: 1.25rem; }
ul li, ol li { margin-bottom: 0.35em; }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-7) 0;
}

::selection { background: var(--bit-navy); color: var(--bit-white); }

/* -----------------------------------------------------------
   3. Typography
   ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--bit-royal-blue);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-4) 0;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.018em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.014em; }
h3 { font-size: var(--fs-h3); color: var(--bit-medium-blue); }
h4 { font-size: var(--fs-h4); color: var(--bit-navy); }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--bit-navy);
  margin: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--bit-charcoal);
  max-width: 56ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bit-silver);
  margin: 0 0 var(--space-5) 0;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--bit-silver);
}
.eyebrow--navy { color: var(--bit-navy); }
.eyebrow--navy::before { background: var(--bit-navy); }
.eyebrow--light { color: rgba(255,255,255,0.62); }
.eyebrow--light::before { background: rgba(255,255,255,0.42); }

.fine {
  font-family: var(--font-fine);
  font-size: var(--fs-fine);
  color: var(--bit-footer-gray);
  letter-spacing: 0.02em;
}

.tabular { font-variant-numeric: tabular-nums lining-nums; }

.monolith {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-monolith);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--bit-navy);
  font-variant-numeric: tabular-nums lining-nums;
}

/* -----------------------------------------------------------
   4. Layout primitives
   ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.container--wide { max-width: var(--container-wide); }

.section { padding: var(--space-9) 0; }
.section--tight { padding: var(--space-8) 0; }
.section--gray { background: var(--bit-light-gray); }
.section--navy {
  background: var(--bit-navy);
  color: var(--bit-white);
}
/* Headings inside ANY dark surface must be white. The default `h2 { color: royal-blue }`
   was bleeding through into .cta-band, making titles like "Ready to make IT
   less painful?" essentially invisible (royal-blue on navy = 1.03:1). */
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4, .section--navy h5, .section--navy h6,
.cta-band     h1, .cta-band     h2, .cta-band     h3, .cta-band     h4, .cta-band     h5, .cta-band     h6,
.sidecard     h1, .sidecard     h2, .sidecard     h3, .sidecard     h4, .sidecard     h5, .sidecard     h6,
.hero__visual h1, .hero__visual h2, .hero__visual h3, .hero__visual h4, .hero__visual h5, .hero__visual h6,
.site-footer  h1, .site-footer  h2, .site-footer  h3, .site-footer  h4, .site-footer  h5, .site-footer  h6 {
  color: var(--bit-white);
}

/* Same defensive rule for links inside dark surfaces — the global
   `a { color: medium-blue }` is only 1.85:1 on navy. */
.section--navy p a:not(.btn),
.cta-band     p a:not(.btn),
.sidecard     p a:not(.btn),
.hero__visual p a:not(.btn) {
  color: var(--bit-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.section--navy p a:not(.btn):hover,
.cta-band     p a:not(.btn):hover,
.sidecard     p a:not(.btn):hover,
.hero__visual p a:not(.btn):hover {
  text-decoration-thickness: 2px;
}

@media (max-width: 768px) {
  .section, .section--tight { padding: var(--space-8) 0; }
}

.divider-rule {
  height: 1px;
  background: var(--hairline);
  margin: 0;
}
.divider-rule--dark { background: var(--hairline-dark); }

/* Grid */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   5. Buttons
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* Explicit fallback so an <a class="btn"> without a modifier doesn't
     inherit the global a{color:medium-blue} — which would be invisible on
     navy surfaces. Modifiers (.btn--primary etc.) override this. */
  color: var(--bit-navy);
  background: var(--bit-white);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
  white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: var(--bit-navy);
  color: var(--bit-white);
  border-color: var(--bit-navy);
}
.btn--primary:hover {
  background: var(--bit-royal-blue);
  color: var(--bit-white);
  border-color: var(--bit-royal-blue);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 46, 98, 0.24);
}

/* On dark surfaces, the default navy-on-navy primary button vanishes.
   Invert: white background, navy text. Used inside any dark section. */
.section--navy .btn--primary,
.cta-band     .btn--primary,
.sidecard     .btn--primary,
.hero--full-bleed .btn--primary,
.site-footer  .btn--primary {
  background: var(--bit-white);
  color: var(--bit-navy);
  border-color: var(--bit-white);
}
.section--navy .btn--primary:hover,
.cta-band     .btn--primary:hover,
.sidecard     .btn--primary:hover,
.hero--full-bleed .btn--primary:hover,
.site-footer  .btn--primary:hover {
  background: var(--bit-light-gray);
  color: var(--bit-navy);
  border-color: var(--bit-light-gray);
}

/* Same inversion for .btn--outline on dark surfaces — navy on navy is
   invisible there too. Switch to white text + white border. */
.section--navy .btn--outline,
.cta-band     .btn--outline,
.sidecard     .btn--outline,
.site-footer  .btn--outline {
  color: var(--bit-white);
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}
.section--navy .btn--outline:hover,
.cta-band     .btn--outline:hover,
.sidecard     .btn--outline:hover,
.site-footer  .btn--outline:hover {
  background: var(--bit-white);
  color: var(--bit-navy);
  border-color: var(--bit-white);
}

.btn--outline {
  background: transparent;
  color: var(--bit-navy);
  border-color: var(--bit-navy);
}
.btn--outline:hover {
  background: var(--bit-navy);
  color: var(--bit-white);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--bit-white);
  border-color: rgba(255,255,255,0.45);
}
.btn--ghost:hover {
  background: var(--bit-white);
  color: var(--bit-navy);
  border-color: var(--bit-white);
}

.btn--sm { padding: 0.5rem 1rem; font-size: 0.8125rem; }
.btn--lg { padding: 1.0625rem 1.875rem; font-size: 1rem; }

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bit-navy);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.link-arrow::after {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--dur) var(--ease-out);
}
.link-arrow:hover { gap: 0.875rem; color: var(--bit-navy); }
.link-arrow:hover::after { width: 26px; }

/* -----------------------------------------------------------
   6. Top utility bar
   ----------------------------------------------------------- */
.utility-bar {
  background: var(--bit-navy);
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-fine);
  height: var(--h-utility);
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.utility-bar a { color: rgba(255,255,255,0.82); }
.utility-bar a:hover { color: var(--bit-white); }

.utility-bar__left,
.utility-bar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.utility-bar__phone {
  color: var(--bit-alert) !important;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.utility-bar__phone:hover { color: #FFA552 !important; }

.utility-bar__divider {
  width: 1px; height: 14px;
  background: rgba(255,255,255,0.18);
}

.social-icons { display: inline-flex; gap: 0.875rem; align-items: center; }
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: rgba(255,255,255,0.72);
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.social-icons a:hover { color: var(--bit-white); transform: translateY(-1px); }
.social-icons svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .utility-bar { font-size: 0.6875rem; }
  .utility-bar__left { gap: 0.5rem; }
  .utility-bar__right { gap: 0.75rem; }
  .utility-bar .hide-mobile { display: none; }
}

/* -----------------------------------------------------------
   7. Main header
   ----------------------------------------------------------- */
.site-header {
  background: var(--bit-white);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--hairline-strong);
  transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(0, 46, 98, 0.04), 0 4px 16px rgba(0, 46, 98, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--h-header);
  transition: height var(--dur) var(--ease-out);
  gap: 2rem;
}
.site-header.is-scrolled .site-header__inner { height: var(--h-header-scrolled); }

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo img {
  height: 52px;
  width: auto;
  transition: height var(--dur) var(--ease-out);
}
.site-header.is-scrolled .site-header__logo img { height: 42px; }

/* Primary nav */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav__item { position: relative; }
.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bit-charcoal);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
/* Dropdown-parent buttons (no overview href) — strip native UA chrome but
   let .primary-nav__link's typography apply. `font: inherit` here was a bug:
   it RESET the carefully-set Arial-bold 14px from .primary-nav__link back to
   the body font (Aptos 16px), making "Company" look bigger and out of place
   next to the rest of the nav. */
.primary-nav__link--button {
  background: transparent;
  border-top: 0; border-left: 0; border-right: 0;
  /* Keep .primary-nav__link's border-bottom: 2px transparent for the active
     underline animation */
  cursor: pointer;
  text-align: inherit;
  /* color + font deliberately omitted — .primary-nav__link sets them */
}
.primary-nav__link:hover,
.primary-nav__link[aria-current="page"] {
  color: var(--bit-navy);
}
.primary-nav__link[aria-current="page"] { border-bottom-color: var(--bit-navy); }
.primary-nav__link .chevron {
  width: 10px; height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform var(--dur) var(--ease-out);
}
.primary-nav__item:hover > .primary-nav__link .chevron { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  min-width: 260px;
  background: var(--bit-white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: 0.625rem;
  list-style: none;
  margin: 0;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s var(--dur);
}
.primary-nav__item:hover > .dropdown,
.primary-nav__item:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s;
}
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--bit-charcoal);
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              padding-left var(--dur) var(--ease-out);
}
.dropdown a:hover {
  background: var(--bit-light-gray);
  color: var(--bit-navy);
  border-left-color: var(--bit-navy);
  padding-left: 1.125rem;
}

.header-cta { margin-left: 0.75rem; }

/* Mobile nav trigger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.nav-toggle__bars {
  display: flex; flex-direction: column; gap: 5px; width: 18px;
}
.nav-toggle__bars span {
  display: block;
  height: 2px;
  background: var(--bit-navy);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

@media (max-width: 1024px) {
  /* Nav (5 items) doesn't fit alongside logo + CTA on tablet — collapse it
     into the hamburger drawer. But keep the Support button visible: it's the
     primary action, useful on every viewport, and there's room for it. */
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Compact the CTA so it doesn't crowd the hamburger */
  .header-cta { padding: 0.625rem 1.125rem; font-size: 0.875rem; }
}
@media (max-width: 480px) {
  /* On phones, every pixel matters — drop the header CTA; users tap the
     hamburger and find Support inside the drawer. */
  .header-cta { display: none; }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--bit-white);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-in-out);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-5);
}
.mobile-nav__close {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bit-navy);
}
.mobile-nav__list { list-style: none; padding: 0; margin: 0; }
.mobile-nav__list > li { border-bottom: 1px solid var(--hairline); }
.mobile-nav__list a, .mobile-nav__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bit-navy);
  cursor: pointer;
  list-style: none;
}
.mobile-nav__list summary::-webkit-details-marker { display: none; }
.mobile-nav__list summary svg { transition: transform var(--dur) var(--ease-out); }
.mobile-nav__list details[open] > summary svg { transform: rotate(180deg); }
.mobile-nav__sub { list-style: none; padding: 0 0 var(--space-4) var(--space-4); margin: 0; }
.mobile-nav__sub a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--bit-charcoal);
  padding: var(--space-2) 0;
}
.mobile-nav__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* -----------------------------------------------------------
   8b. Hero — full-bleed photo variant
   ----------------------------------------------------------- */
.hero--full-bleed {
  position: relative;
  min-height: clamp(540px, 70vh, 720px);
  padding: 0;
  background: var(--bit-navy); /* fallback while photo loads */
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.hero--full-bleed .hero__photo {
  position: absolute;
  inset: 0;
  background-image: url('assets/photos/home_hosting_photo_box.jpg');
  background-size: cover;
  background-position: center 35%;
  z-index: 0;
  filter: saturate(0.85) contrast(1.05);
}
/* Dark gradient overlay — left side near-solid for headline legibility,
   right side lighter so the photo still reads. */
.hero--full-bleed .hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(0, 32, 96, 0.95) 0%,
      rgba(0, 46, 98, 0.88) 35%,
      rgba(0, 46, 98, 0.65) 75%,
      rgba(0, 46, 98, 0.45) 100%),
    radial-gradient(circle at 12% 20%, rgba(0, 0, 0, 0.25) 0%, transparent 45%);
  z-index: 1;
}
.hero--full-bleed::after {
  /* subtle grain for film feel — only covers the photo, not the chrome */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.02) 3px,
    rgba(255, 255, 255, 0.02) 4px
  );
  z-index: 2;
  pointer-events: none;
}
.hero--full-bleed .hero__content {
  position: relative;
  z-index: 3;
  color: var(--bit-white);
  padding: var(--space-9) 0;
  width: 100%;
}
.hero--full-bleed .hero__display {
  color: var(--bit-white);
  max-width: 18ch;
}
.hero--full-bleed .hero__display .accent {
  color: var(--bit-white);
  font-style: italic;
  opacity: 0.78;
}
.hero--full-bleed .hero__display .underline::after {
  background: var(--bit-alert);
}
.hero--full-bleed .hero__sub {
  color: rgba(255, 255, 255, 0.86);
  max-width: 52ch;
}
.hero--full-bleed .hero__meta {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
}
.hero--full-bleed .hero__meta-item strong { color: var(--bit-white); }
.hero--full-bleed .hero__meta-item span { color: rgba(255, 255, 255, 0.6); }
.hero--full-bleed .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}
.hero--full-bleed .eyebrow::before {
  background: rgba(255, 255, 255, 0.5);
}

/* Override the standard btn--outline on dark surfaces */
.hero--full-bleed .btn--outline {
  color: var(--bit-white);
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}
.hero--full-bleed .btn--outline:hover {
  background: var(--bit-white);
  color: var(--bit-navy);
  border-color: var(--bit-white);
}

@media (max-width: 768px) {
  .hero--full-bleed {
    min-height: 480px;
  }
  .hero--full-bleed .hero__photo {
    background-position: center 30%;
  }
}

/* -----------------------------------------------------------
   8. Hero (homepage)
   ----------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--bit-white);
  padding: var(--space-9) 0 var(--space-9);
  overflow: hidden;
}
.hero::before {
  /* Decorative diagonal silver hairline grid — subtle */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 60% 60% at 80% 30%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 80% 30%, black 0%, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 900px) {
  .hero { padding: var(--space-8) 0; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-7); }
}

.hero__display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--bit-navy);
  margin: 0 0 var(--space-5) 0;
}
.hero__display .accent {
  color: var(--bit-medium-blue);
  font-style: normal;
}
.hero__display .underline {
  position: relative;
  display: inline-block;
}
.hero__display .underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px;
  background: var(--bit-alert);
}

.hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--bit-charcoal);
  max-width: 52ch;
  margin: 0 0 var(--space-6) 0;
}

.hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__meta-item strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.875rem;
  color: var(--bit-navy);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}
.hero__meta-item span {
  font-size: var(--fs-fine);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bit-silver);
  font-weight: 700;
}

/* Hero visual right column — typographic monolith */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
  max-height: 520px;
  background: var(--bit-navy);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6);
  color: var(--bit-white);
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 100%, rgba(31, 73, 125, 0.55) 0%, transparent 60%),
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
  pointer-events: none;
}
.hero__visual::after {
  /* faint horizontal scan lines */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,0.025) 3px,
    rgba(255,255,255,0.025) 4px
  );
  pointer-events: none;
}
.hero__visual-head, .hero__visual-foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: var(--fs-fine);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.62);
}
.hero__visual-body {
  position: relative;
  z-index: 2;
}
.hero__visual-monolith {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-monolith);
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--bit-white);
  margin: 0;
}
.hero__visual-monolith em {
  font-style: normal;
  color: rgba(255,255,255,0.42);
}
.hero__visual-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.86);
  margin-top: var(--space-3);
  max-width: 24ch;
  line-height: 1.4;
}

/* -----------------------------------------------------------
   9. Cards & service grid
   ----------------------------------------------------------- */
.card {
  background: var(--bit-white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: rgba(0, 46, 98, 0.22);
}

.card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: rgba(0, 46, 98, 0.06);
  color: var(--bit-navy);
  margin-bottom: var(--space-4);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.card__icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.card--link:hover .card__icon {
  background: var(--bit-navy);
  color: var(--bit-white);
}

.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--bit-navy);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: -0.005em;
}

.card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
  color: var(--bit-charcoal);
}
.card__list li {
  position: relative;
  padding-left: 1.125rem;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.625rem;
  width: 8px; height: 1px;
  background: var(--bit-silver);
}

.card__foot { margin-top: auto; padding-top: var(--space-4); }

/* Service grid — break the grid: alternate cards lift differently */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.service-grid .card {
  border-radius: 0;
  border-left: 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  border-right: 1px solid var(--hairline-strong);
  padding: var(--space-6) var(--space-5);
}
.service-grid .card:first-child {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
  border-left: 1px solid var(--hairline-strong);
}
.service-grid .card:last-child {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
@media (max-width: 1024px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid .card { border-radius: 0; border-left: 1px solid var(--hairline-strong); }
  .service-grid .card:nth-child(1) { border-top-left-radius: var(--radius-lg); }
  .service-grid .card:nth-child(2) { border-top-right-radius: var(--radius-lg); }
  .service-grid .card:nth-child(3) { border-bottom-left-radius: var(--radius-lg); }
  .service-grid .card:nth-child(4) { border-bottom-right-radius: var(--radius-lg); }
}
@media (max-width: 640px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-grid .card { border-radius: 0 !important; border-top-width: 0; }
  .service-grid .card:first-child { border-top-width: 1px; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
  .service-grid .card:last-child  { border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; }
}

/* -----------------------------------------------------------
   10. Why Bercell (3-col band on gray)
   ----------------------------------------------------------- */
.why-grid .why-cell {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--hairline);
}
.why-grid .why-cell__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--bit-silver);
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: var(--space-3);
}
.why-grid .why-cell__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--bit-navy);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.why-grid .why-cell__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--bit-charcoal);
}

/* -----------------------------------------------------------
   11. Trust band: logos + pull-quote
   ----------------------------------------------------------- */
.trust {
  background: var(--bit-white);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.trust__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-7) 0;
}
@media (max-width: 900px) {
  .trust__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}

.trust__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--bit-navy);
  margin: 0;
}
.trust__quote::before {
  content: "“";
  display: block;
  font-size: 4rem;
  line-height: 1;
  color: var(--bit-silver);
  margin-bottom: -0.5rem;
}
.trust__attribution {
  margin-top: var(--space-4);
  font-size: var(--fs-fine);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bit-silver);
  font-weight: 700;
  font-family: var(--font-display);
}

.partner-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.partner-strip__cell {
  background: var(--bit-white);
  padding: var(--space-4) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--bit-silver);
  text-align: center;
  min-height: 80px;
  transition: color var(--dur) var(--ease-out);
}
.partner-strip__cell:hover { color: var(--bit-navy); }

@media (max-width: 640px) {
  .partner-strip { grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------------------------------------
   12. CTA band (navy)
   ----------------------------------------------------------- */
.cta-band {
  background: var(--bit-navy);
  color: var(--bit-white);
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 50%, rgba(31, 73, 125, 0.42) 0%, transparent 50%),
    radial-gradient(circle at 10% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: var(--space-7);
}
@media (max-width: 768px) {
  .cta-band__inner { grid-template-columns: 1fr; }
}
.cta-band h2 {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-3);
}
.cta-band p {
  font-size: var(--fs-lead);
  color: rgba(255,255,255,0.78);
  max-width: 48ch;
  margin: 0;
}
.cta-band__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .cta-band__actions { justify-content: flex-start; }
}

/* -----------------------------------------------------------
   13. Interior page hero (compact)
   ----------------------------------------------------------- */
.page-hero {
  background: var(--bit-light-gray);
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--hairline);
}
.page-hero__breadcrumb {
  font-family: var(--font-display);
  font-size: var(--fs-fine);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bit-silver);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.page-hero__breadcrumb a { color: var(--bit-silver); }
.page-hero__breadcrumb a:hover { color: var(--bit-navy); }
.page-hero__breadcrumb span + span::before {
  content: "/";
  margin: 0 0.625rem;
  /* var(--hairline) is 0.22α — only 1.24:1 against the light-gray page-hero.
     Use the visible silver so the separator reads as actual text. */
  color: var(--bit-silver);
}
.page-hero h1 {
  color: var(--bit-royal-blue);
  font-size: var(--fs-display);
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
  max-width: 22ch;
}
.page-hero__sub {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  color: var(--bit-charcoal);
  max-width: 60ch;
}

/* -----------------------------------------------------------
   14. Article / content area
   ----------------------------------------------------------- */
.prose {
  max-width: 70ch;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.prose h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  color: var(--bit-royal-blue);
}
.prose h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--bit-medium-blue);
}
.prose ul li, .prose ol li { margin-bottom: 0.4em; }
.prose strong { color: var(--bit-navy); }

.split-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
}
@media (max-width: 1024px) {
  .split-layout { grid-template-columns: 1fr; }
}

.sidecard {
  background: var(--bit-navy);
  color: var(--bit-white);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  position: sticky;
  top: calc(var(--h-header-scrolled) + var(--space-5));
}
.sidecard h3 {
  color: var(--bit-white);
  margin-top: 0;
  font-size: var(--fs-h4);
}
.sidecard p { color: rgba(255,255,255,0.78); font-size: 0.9375rem; }
.sidecard .btn { margin-top: var(--space-3); width: 100%; justify-content: center; }
.sidecard__phone {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--bit-white);
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------
   15. Forms
   ----------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); }
.form__row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.form label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-fine);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bit-silver);
  margin-bottom: var(--space-2);
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--bit-charcoal);
  background: var(--bit-white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--bit-navy);
  box-shadow: 0 0 0 3px rgba(0, 46, 98, 0.12);
}
.form textarea { min-height: 160px; resize: vertical; }

/* Placeholder text — explicit colour, otherwise browser defaults can fail AA */
.form input::placeholder,
.form textarea::placeholder {
  color: var(--bit-silver);
  opacity: 1;
  font-style: normal;
}

/* -----------------------------------------------------------
   16. Footer
   ----------------------------------------------------------- */
.site-footer {
  background: var(--bit-navy);
  color: rgba(255,255,255,0.72);
  padding: var(--space-8) 0 0;
  font-size: 0.9375rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}
@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-fine);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  /* 0.5 alpha gave 4.45:1 (AA-large only); 0.62 gives 6.03:1 (AAA-adjacent) */
  color: rgba(255,255,255,0.62);
  margin-bottom: var(--space-4);
}

.site-footer__brand img {
  height: 56px;
  width: auto;
  margin-bottom: var(--space-5);
  filter: brightness(0) invert(1);
}
.site-footer__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--bit-white);
  line-height: 1.35;
  margin-bottom: var(--space-3);
  max-width: 32ch;
}
.site-footer__sub {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.62);
  max-width: 38ch;
}

.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li { margin-bottom: 0.625rem; }
.site-footer__list a { color: rgba(255,255,255,0.78); font-size: 0.9375rem; }
.site-footer__list a:hover { color: var(--bit-white); }

.site-footer__contact { font-style: normal; line-height: 1.65; }
.site-footer__contact a { color: rgba(255,255,255,0.78); }
.site-footer__contact a:hover { color: var(--bit-white); }
.site-footer__contact strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.375rem;
  color: var(--bit-white);
  margin-top: var(--space-3);
  letter-spacing: 0.01em;
}

.site-footer__social .social-icons a {
  color: rgba(255,255,255,0.62);
}

.site-footer__strip {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-fine);
  font-size: var(--fs-fine);
  /* Was --bit-footer-gray; on navy that's only 3.39:1 (fails AA).
     0.62 white on navy = 6.03:1, comfortably AA. */
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.04em;
}
.site-footer__strip a { color: rgba(255,255,255,0.78); }
.site-footer__strip a:hover { color: var(--bit-white); }

/* -----------------------------------------------------------
   16a. Accessibility — defensive overrides for dark contexts
   ----------------------------------------------------------- */

/* Any eyebrow that ends up inside a navy / dark surface without the
   --light modifier still needs to be readable. Auto-flip to a light
   variant that passes AA (6.03:1) on navy. */
.section--navy .eyebrow:not(.eyebrow--navy):not(.eyebrow--light),
.cta-band     .eyebrow:not(.eyebrow--navy):not(.eyebrow--light),
.hero__visual .eyebrow:not(.eyebrow--navy):not(.eyebrow--light),
.site-footer  .eyebrow:not(.eyebrow--navy):not(.eyebrow--light),
.sidecard     .eyebrow:not(.eyebrow--navy):not(.eyebrow--light) {
  color: rgba(255, 255, 255, 0.62);
}
.section--navy .eyebrow:not(.eyebrow--navy):not(.eyebrow--light)::before,
.cta-band     .eyebrow:not(.eyebrow--navy):not(.eyebrow--light)::before,
.hero__visual .eyebrow:not(.eyebrow--navy):not(.eyebrow--light)::before,
.site-footer  .eyebrow:not(.eyebrow--navy):not(.eyebrow--light)::before,
.sidecard     .eyebrow:not(.eyebrow--navy):not(.eyebrow--light)::before {
  background: rgba(255, 255, 255, 0.42);
}

/* Focus rings must contrast with their background. The default navy outline
   disappears on navy surfaces — switch to white in those contexts. */
.section--navy a:focus-visible,
.cta-band     a:focus-visible,
.site-footer  a:focus-visible,
.utility-bar  a:focus-visible,
.sidecard     a:focus-visible,
.hero__visual a:focus-visible,
.section--navy button:focus-visible,
.cta-band     button:focus-visible,
.site-footer  button:focus-visible,
.utility-bar  button:focus-visible,
.sidecard     button:focus-visible {
  outline: 2px solid var(--bit-white);
  outline-offset: 2px;
}

/* Buttons need a visible focus state. Outlines inherit the element's own
   shape (pill, rounded, etc.) — don't force a radius here. */
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--bit-navy);
  outline-offset: 2px;
}
.btn--primary:focus-visible {
  outline-color: var(--bit-navy);
  box-shadow: 0 0 0 4px rgba(0, 46, 98, 0.18);
}

/* Disabled state for any button — clear visual + cursor cue + ARIA support.
   Pairs with the .btn--primary:disabled rule in the matcher section. */
button:disabled,
button[aria-disabled="true"],
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
button[aria-busy="true"] { cursor: progress; }

/* Touch-target minimums on mobile — WCAG 2.5.5 (AAA) / 2.5.8 (AA in WCAG 2.2)
   recommends 24×24 minimum, 44×44 strongly preferred. Chip and pill buttons
   ran ~32–36px tall; bump them up on coarse pointers (touch). */
@media (pointer: coarse) {
  .matcher__chip {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .filter-bar__btn {
    min-height: 44px;
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
  }
  .matcher__reset {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* -----------------------------------------------------------
   16b. Interior-page components
   ----------------------------------------------------------- */

/* Pull quote — centered, oversized, for mission/testimonials */
.pull-quote {
  max-width: 64ch;
  margin: var(--space-7) auto;
  text-align: center;
  position: relative;
  padding: var(--space-6) 0;
}
.pull-quote::before {
  content: "“";
  display: block;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.4;
  color: var(--bit-silver);
  margin-bottom: var(--space-4);
  font-weight: 900;
}
.pull-quote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.4;
  color: var(--bit-navy);
  letter-spacing: -0.012em;
  margin: 0;
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-fine);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bit-silver);
  font-weight: 700;
  font-style: normal;
}

/* Testimonial card — quote + attribution */
.testimonial {
  background: var(--bit-white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.testimonial::before {
  content: "“";
  position: absolute;
  top: 0.5rem;
  left: 1.25rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4rem;
  line-height: 1;
  color: rgba(0, 46, 98, 0.08);
  z-index: 0;
}
.testimonial__quote {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bit-charcoal);
  margin: 0 0 var(--space-5) 0;
  flex-grow: 1;
}
.testimonial__attr {
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--bit-navy);
  letter-spacing: -0.005em;
}
.testimonial__attr span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-fine);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bit-silver);
  margin-top: 0.25rem;
}

/* Office card — for the contact page */
.office {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--bit-white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.office:hover { border-color: var(--bit-navy); transform: translateY(-2px); }
.office__role {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bit-silver);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.office__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.375rem;
  color: var(--bit-navy);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.office__addr {
  font-size: 0.9375rem;
  color: var(--bit-charcoal);
  margin-bottom: var(--space-4);
  font-style: normal;
  line-height: 1.55;
}
.office__contact {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
}
.office__contact a {
  color: var(--bit-navy);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Tag list — small label pills (used for threats on cyber-security) */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tag-list li {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  background: var(--bit-white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-fine);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bit-silver);
  margin: 0;
}
.tag-list--threat li { color: var(--bit-navy); border-color: rgba(0, 46, 98, 0.22); }

/* Stat row — three big numbers with labels */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-6) 0;
}
@media (max-width: 768px) {
  .stat-row { grid-template-columns: 1fr; gap: var(--space-4); }
}
.stat-row__cell { display: flex; flex-direction: column; }
.stat-row__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--bit-navy);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
}
.stat-row__label {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bit-silver);
  font-weight: 700;
}

/* Feature row — eyebrow + title + body, alternating */
.feature-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--hairline);
}
.feature-row:last-child { border-bottom: 1px solid var(--hairline); }
@media (max-width: 768px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--space-3); }
}
.feature-row__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bit-silver);
  font-weight: 700;
}
.feature-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--bit-navy);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: -0.01em;
}
.feature-row__body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bit-charcoal);
}

/* Partner logo grid — real PNG logos, grayscale by default, colour on hover */
.partner-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.partner-logo-grid__cell {
  background: var(--bit-white);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  transition: background var(--dur) var(--ease-out);
}
.partner-logo-grid__cell img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0.5) contrast(1.3);
  opacity: 0.7;
  transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.partner-logo-grid__cell:hover { background: var(--bit-light-gray); }
.partner-logo-grid__cell:hover img {
  filter: none;
  opacity: 1;
}
@media (max-width: 900px) { .partner-logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .partner-logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* Same treatment for the homepage trust-band strip */
.partner-strip__cell img {
  max-width: 100%;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0.5) contrast(1.3);
  opacity: 0.7;
  transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.partner-strip__cell:hover img {
  filter: none;
  opacity: 1;
}

/* Service-page photo accent — sits inside or next to the prose area */
.service-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
  border: 1px solid var(--hairline);
}
.service-photo--inline {
  max-width: 240px;
  float: right;
  margin: 0 0 var(--space-4) var(--space-5);
}
@media (max-width: 768px) {
  .service-photo--inline { float: none; max-width: 100%; margin: var(--space-5) 0; }
}

/* About / story photo — full-width visual breakpoint */
.story-photo {
  width: 100%;
  height: clamp(220px, 32vw, 380px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  display: block;
}

/* Industry / partner big grid (4 col, hairline-shared) */
.name-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.name-grid__cell {
  background: var(--bit-white);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
  transition: background var(--dur) var(--ease-out);
}
.name-grid__cell:hover { background: var(--bit-light-gray); }
.name-grid__cell-num {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bit-silver);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.name-grid__cell-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--bit-navy);
  letter-spacing: -0.005em;
}
@media (max-width: 900px) {
  .name-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .name-grid { grid-template-columns: 1fr; }
}

/* Service-page hero — slightly larger H1, no subhead constraint */
.page-hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); }

/* -----------------------------------------------------------
   16c. React components
   ----------------------------------------------------------- */

/* Hero monolith — react-enhanced version */
.hero__visual--react {
  will-change: transform;
  transform-style: preserve-3d;
}
.hero__visual-scanline {
  position: absolute;
  left: 0; right: 0;
  top: -2px;
  height: 80px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(31, 73, 125, 0.0) 20%,
    rgba(31, 73, 125, 0.28) 60%,
    rgba(31, 73, 125, 0.0) 100%
  );
  pointer-events: none;
  z-index: 1;
  animation: scan-sweep 2200ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms forwards;
}
@keyframes scan-sweep {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(540px); opacity: 0; }
}
.hero__visual-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bit-success);
  margin-right: 0.625rem;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6);
  animation: pulse-dot 2400ms ease-out infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual-scanline { display: none; }
  .hero__visual-dot { animation: none; }
}

@media (hover: none) {
  /* Touch devices — kill the parallax inline transform */
  .hero__visual--react { transform: none !important; }
}


/* SSR fallback content is FULLY USABLE — the static markup is hand-written to
   work without React. Don't fade it; don't disable clicks. React replaces
   it on mount via innerHTML='' + removeAttribute, so users who keep the
   fallback (no JS, blocked CDN, etc.) get the complete experience. */
[data-ssr-fallback] {
  opacity: 1;
}
[data-react-ready="true"] [data-ssr-fallback] { display: none; }

/* Service matcher */
.matcher {
  background: var(--bit-white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  position: relative;
  overflow: hidden;
}
.matcher::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--bit-navy), var(--bit-medium-blue) 50%, var(--hairline) 100%);
}
.matcher__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--bit-navy);
  margin: 0 0 var(--space-3) 0;
}
.matcher__lead {
  font-size: var(--fs-lead);
  color: var(--bit-charcoal);
  max-width: 56ch;
  margin: 0 0 var(--space-6) 0;
}
.matcher__options {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.matcher__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--bit-white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--bit-charcoal);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.matcher__chip:hover { border-color: var(--bit-navy); color: var(--bit-navy); }
.matcher__chip[data-on="true"] {
  background: var(--bit-navy);
  color: var(--bit-white);
  border-color: var(--bit-navy);
}
.matcher__chip[data-on="true"]:hover { transform: translateY(-1px); }
.matcher__chip svg { flex-shrink: 0; }

.matcher__foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.matcher__foot .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bit-silver);
  border-color: var(--bit-silver);
}
.matcher__reset {
  background: transparent;
  border: 0;
  color: var(--bit-silver);
  font-family: var(--font-display);
  font-size: var(--fs-fine);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  cursor: pointer;
  padding: 0.5rem 0;
  border-bottom: 1px solid transparent;
}
.matcher__reset:hover { color: var(--bit-navy); border-bottom-color: var(--bit-navy); }

/* Matcher result panel */
.matcher__recs {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin: var(--space-5) 0 var(--space-6);
  overflow: hidden;
}
.matcher__rec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  background: var(--bit-white);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.matcher__rec:hover { background: var(--bit-light-gray); }
.matcher__rec-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--bit-silver);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.matcher__rec h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--bit-navy);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.005em;
}
.matcher__rec p {
  font-size: 0.9375rem;
  color: var(--bit-charcoal);
  margin: 0;
  line-height: 1.5;
}
.matcher__rec-arrow {
  color: var(--bit-navy);
  display: inline-flex;
  transition: transform var(--dur) var(--ease-out);
}
.matcher__rec:hover .matcher__rec-arrow { transform: translateX(4px); }

@media (max-width: 640px) {
  .matcher { padding: var(--space-5); }
  .matcher__rec { grid-template-columns: auto 1fr; }
  .matcher__rec-arrow { grid-column: 1 / -1; justify-self: end; }
}

/* Testimonial filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline);
}
.filter-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bit-charcoal);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.filter-bar__btn:hover { color: var(--bit-navy); border-color: var(--bit-navy); }
.filter-bar__btn[data-on="true"] {
  background: var(--bit-navy);
  color: var(--bit-white);
  border-color: var(--bit-navy);
}
.filter-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 46, 98, 0.08);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--bit-navy);
  font-variant-numeric: tabular-nums lining-nums;
}
.filter-bar__btn[data-on="true"] .filter-bar__count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--bit-white);
}

.ts-filter__grid {
  animation: fadeUp 360ms var(--ease-out);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Form inline validation
   --bit-alert (#E8740C) is only 3.03:1 on white — fails AA for small text.
   Use navy bold with a "!" prefix so the error is conveyed by colour + glyph
   (passes WCAG 1.4.1 "Use of Color" — not relying on colour alone). */
.form-error {
  color: var(--bit-navy);
  font-size: 0.8125rem;
  margin: 0.375rem 0 0 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.form-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: var(--bit-alert);
  color: var(--bit-white);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 900;
  flex-shrink: 0;
}
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"],
.form select[aria-invalid="true"] {
  border-color: var(--bit-alert);
  box-shadow: 0 0 0 3px rgba(232, 116, 12, 0.10);
}

/* Required-field asterisks — use medium-blue (passes AAA) not alert orange. */
.form .req {
  color: var(--bit-medium-blue);
  font-weight: 700;
  margin-left: 0.125rem;
}
.form-helper {
  font-family: var(--font-fine);
  font-size: 0.75rem;
  color: var(--bit-silver);
  text-align: right;
  margin: 0.375rem 0 0 0;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
}
/* Warn state: orange (3.03:1) fails AA at 12px. Use navy bold for contrast,
   keep a small orange dot prefix so colour isn't the only signal. */
.form-helper[data-warn="true"] {
  color: var(--bit-navy);
  font-weight: 700;
}
.form-helper[data-warn="true"]::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--bit-alert);
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: 1px;
}

.form-result {
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(40, 167, 69, 0.3);
  background: rgba(40, 167, 69, 0.05);
}
.form-result h3 {
  margin: var(--space-3) 0;
  color: var(--bit-navy);
  font-size: 1.75rem;
}

/* Spinner — used in the submit button */
.is-spinning { animation: spin 800ms linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------
   17. Motion: reveal on scroll + stagger on load
   ----------------------------------------------------------- */
/* Reveal elements start invisible and fade in when scrolled into view by
   IntersectionObserver in main.js. The no-JS / JS-failure safety net is:
   (a) a <noscript> override in <head> that forces opacity:1 if JS is off,
   (b) a setTimeout fallback in main.js that reveals everything after 1.5s
       in case IntersectionObserver isn't supported or never fires. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------
   18. Utilities
   ----------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 0; top: -100px;
  background: var(--bit-navy);
  color: var(--bit-white);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  z-index: 200;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 8px; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--space-5); }
.mb-5 { margin-bottom: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-3 { gap: var(--space-3); }
.gap-5 { gap: var(--space-5); }