/*
  Light visual refresh layered on top of the existing Solid State theme.
  Goal: neutral surfaces + a couple of accents so the site does not read
  as a single dark-blue block. Scoped to new card/grid components only.
*/

:root {
  /* Card surfaces are lifted a few steps lighter than the darkest wrappers so
     they read as raised panels rather than blending into the section behind
     them. */
  --bi-surface: #434857;
  --bi-surface-2: #4d5365;
  --bi-border: rgba(255, 255, 255, 0.1);
  --bi-border-strong: rgba(255, 255, 255, 0.2);
  --bi-muted: rgba(255, 255, 255, 0.66);
  --bi-accent: #8a9bd8;
  --bi-card-shadow: 0 2px 10px rgba(8, 10, 18, 0.28);
  --bi-card-shadow-hover: 0 8px 22px rgba(8, 10, 18, 0.38);

  /* Light/neutral band used to break up the dark-blue sections. */
  --bi-light-bg: #eef0f5;
  --bi-light-heading: #23262f;
  --bi-light-text: #41475a;
  --bi-light-muted: #5c637a;
  --bi-light-border: rgba(35, 38, 47, 0.12);
  --bi-light-card-border: rgba(35, 38, 47, 0.1);
  --bi-light-accent: #3a4aa0;
  --bi-light-card-shadow: 0 1px 3px rgba(20, 24, 40, 0.1);
  --bi-light-card-shadow-hover: 0 8px 20px rgba(20, 24, 40, 0.16);
}

/* Keep media from overflowing on small screens */
img {
  max-width: 100%;
}

/* ---- Header: inline desktop navigation ----
   The hamburger #menu overlay is kept for small screens; on wider screens we
   surface the primary links directly in the header so navigation isn't
   menu-only. The .nav-links list is hidden by default (mobile) and the
   hamburger toggle is hidden on desktop. */
#header nav .nav-links {
  display: none;
}

@media screen and (min-width: 981px) {
  #header nav .nav-links {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
  }

  #header nav .nav-links li {
    padding: 0;
    margin: 0;
    border: 0;
  }

  #header nav .nav-links a {
    display: inline-block;
    padding: 0 0.9em;
    border: 0;
    color: inherit;
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  #header nav .nav-links a:hover {
    color: var(--bi-accent);
  }

  /* Hide the hamburger toggle on desktop; overlay remains for small screens. */
  #header nav a[href='#menu'] {
    display: none;
  }
}

/* On pages without a hero banner (everything except the home page), the
   theme never removes the `.alt` class from the header, leaving it
   permanently transparent so page content shows through the nav links while
   scrolling. Keep the home hero's transparent-over-banner effect, but give
   the header a solid background everywhere else and restore the logo (the
   `.alt` state otherwise hides it). */
body:not(:has(#banner)) #header,
body:not(:has(#banner)) #header.alt {
  background-color: rgba(53, 56, 73, 0.95);
}

body:not(:has(#banner)) #header.alt h1 {
  opacity: 1;
  visibility: visible;
}

/* Offset in-page anchor targets so they clear the fixed header. */
#products,
#team,
#footer {
  scroll-margin-top: 4.5em;
}

/* Avoid long words / emails breaking the layout on mobile */
#banner p,
.content p,
.info-card p,
.capability-card p,
.advisor-bio {
  overflow-wrap: break-word;
}

/* ---- Shared card surface ---- */
.info-card,
.product-card,
.logo-card,
.advisor-card,
.capability-card {
  background-color: var(--bi-surface);
  border: 1px solid var(--bi-border);
  border-radius: 8px;
  padding: 1.75em;
  box-shadow: var(--bi-card-shadow);
  transition: transform 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease;
}

.info-card:hover,
.product-card:hover,
.logo-card:hover,
.advisor-card:hover,
.capability-card:hover {
  background-color: var(--bi-surface-2);
  border-color: var(--bi-border-strong);
  box-shadow: var(--bi-card-shadow-hover);
  transform: translateY(-3px);
}

.info-card h3,
.advisor-card h3,
.logo-card h3 {
  margin-bottom: 0.4em;
}

.info-card p {
  margin-bottom: 1em;
}

.card-logo {
  display: inline-block;
  margin-bottom: 1em;
}

.card-links a {
  margin-right: 1.5em;
}

/* ---- Product card head (title/logo + status) ---- */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.6em;
}

.card-head h3 {
  margin-bottom: 0;
}

.card-head .card-logo {
  margin-bottom: 0;
}

.card-status {
  flex-shrink: 0;
  display: inline-block;
  font-family: Raleway, Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6em;
  line-height: 1;
  padding: 0.55em 0.85em;
  border-radius: 999px;
  border: 1px solid var(--bi-border-strong);
  color: var(--bi-muted);
  white-space: nowrap;
}

.card-status--live {
  color: #7fd1a4;
  border-color: rgba(127, 209, 164, 0.4);
  background-color: rgba(127, 209, 164, 0.1);
}

.card-status--internal {
  color: var(--bi-accent);
  border-color: rgba(138, 155, 216, 0.4);
  background-color: rgba(138, 155, 216, 0.1);
}

/* ---- Product one-line value + CTA ---- */
.card-value {
  color: var(--bi-muted);
  margin-bottom: 1em;
}

.card-cta {
  display: inline-block;
  font-weight: 700;
}

.card-cta--muted {
  color: var(--bi-muted);
  font-weight: 600;
}

/* ---- Eyebrow labels (strategic partners + case study) ---- */
.card-eyebrow,
.case-study__eyebrow {
  display: inline-block;
  font-family: Raleway, Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7em;
  color: var(--bi-accent);
  margin-bottom: 0.85em;
}

.partner-card {
  border-left: 3px solid var(--bi-accent);
}

/* ---- Case study (BBC) ---- */
.case-study__eyebrow {
  margin-bottom: 0.5em;
}

.case-study__lead {
  display: flex;
  align-items: center;
  gap: 2.25em;
  margin-bottom: 2.25em;
}

.case-study__logo {
  flex: 0 0 auto;
  width: 9em;
  border-bottom: none;
  background: #ffffff;
  padding: 0.9em 1.1em;
  border-radius: 0.4em;
}

.case-study__lead p {
  margin-bottom: 0;
}

.case-study__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75em;
  margin-bottom: 2.25em;
}

.case-study__col h3 {
  font-family: Raleway, Helvetica, sans-serif;
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bi-accent);
  margin-bottom: 0.6em;
}

.case-study__col p {
  font-size: 0.95em;
  color: var(--bi-muted);
  margin-bottom: 0;
}

/* ---- Stat callouts ---- */
.stat-callouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  list-style: none;
  padding: 0;
  margin: 0 0 2.25em 0;
}

.stat-callouts li {
  background-color: var(--bi-surface);
  border: 1px solid var(--bi-border);
  border-radius: 8px;
  padding: 1.25em;
  text-align: center;
}

.stat-callouts strong {
  display: block;
  font-family: Raleway, Helvetica, sans-serif;
  font-size: 2.25em;
  line-height: 1.05;
  color: #ffffff;
  margin-bottom: 0.3em;
}

.stat-callouts span {
  display: block;
  font-size: 0.85em;
  color: var(--bi-muted);
}

/* ---- Capability tags ---- */
.cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cap-tags li {
  font-family: Raleway, Helvetica, sans-serif;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--bi-muted);
  background-color: var(--bi-surface);
  border: 1px solid var(--bi-border);
  border-radius: 999px;
  padding: 0.55em 1.1em;
}

/* ---- Generic grids ---- */
.card-grid,
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
}

/* ---- Engineering capabilities ---- */
.eng-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
}

.eng-card h3 {
  margin-bottom: 0.4em;
}

.eng-card p {
  font-size: 0.95em;
  color: var(--bi-muted);
  margin-bottom: 0;
}

/* ---- Capabilities ---- */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
}

.capability-card {
  display: flex;
  gap: 1.25em;
  align-items: flex-start;
  text-align: left;
}

.capability-card.feature {
  grid-column: 1 / -1;
}

.cap-icon {
  position: relative;
  flex: 0 0 auto;
  width: 4.5em;
  height: 4.5em;
  border-radius: 100%;
  overflow: hidden;
  background-color: #4c5c96;
}

.cap-body h3 {
  margin-bottom: 0.4em;
}

.cap-body p {
  margin-bottom: 0;
}

/* ---- Proof strip ---- */
.proof-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em 2.25em;
  padding: 0;
  margin: 0;
}

.proof-strip li {
  font-family: Raleway, Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9em;
  color: var(--bi-muted);
}

/* ---- Client logo cards ---- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
}

.logo-card {
  text-align: center;
}

.logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  margin-bottom: 1em;
  border-bottom: 0;
}

.logo-frame:hover {
  border-bottom: 0;
}

.logo-frame--light {
  background: #ffffff;
  border-radius: 6px;
  padding: 0.5em;
}

.logo-card p {
  font-size: 0.9em;
  color: var(--bi-muted);
  margin-bottom: 0;
}

/* ---- People / advisors ---- */
.advisor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  margin-top: 1.5em;
}

.advisor-card {
  text-align: center;
}

.avatar {
  position: relative;
  display: inline-block;
  width: 7em;
  height: 7em;
  border-radius: 100%;
  overflow: hidden;
  margin-bottom: 0.85em;
  background-color: #4c5c96;
}

.advisor-role {
  display: block;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bi-muted);
  margin-bottom: 0.75em;
}

.advisor-bio {
  font-size: 0.95em;
  margin-bottom: 0;
}

/* ---- Hero ---- */
#banner .actions {
  margin-top: 1.5em;
  flex-wrap: wrap;
}

/* Compact credibility line under the hero CTAs. Overrides the theme's
   uppercase, heavily letter-spaced `#banner p` so it reads as a quiet proof
   strip rather than body copy. */
#banner p.hero-proof {
  margin-top: 1.75em;
  margin-bottom: 0;
  padding-right: 0;
  font-family: Raleway, Helvetica, sans-serif;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--bi-muted);
}

#banner p.hero-proof span {
  margin: 0 0.15em;
  color: var(--bi-accent);
}

@media screen and (max-width: 736px) {
  #banner p.hero-proof {
    font-size: 0.7em;
    letter-spacing: 0.08em;
  }
}

/* ---- Hero entrance animation: faster + accessible ----
   The theme hides the hero (.logo / h2 / p) via `body.is-preload` until JS
   removes that class 100ms after the window `load` event. On mobile that
   event waits for the large hero background image, leaving the headline and
   logo invisible for several seconds. We shorten the entrance and reveal the
   hero immediately on small screens. These rules load after main.css, so they
   win on equal specificity without needing !important. */

#banner .logo {
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#banner h2 {
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease,
    -webkit-filter 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#banner p {
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease,
    -webkit-filter 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/* Phones/tablets: reveal the hero text and logo immediately, even before the
   `is-preload` class is removed, so visitors never stare at an empty banner. */
@media screen and (max-width: 980px) {
  body.is-preload #banner .logo,
  body.is-preload #banner h2,
  body.is-preload #banner p {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-filter: none;
    filter: none;
  }
}

/* Respect reduced-motion preferences: no transforms, blur, or delays anywhere
   in the hero, and keep everything visible from the first paint. */
@media (prefers-reduced-motion: reduce) {
  #banner .logo,
  #banner h2,
  #banner p,
  body.is-preload #banner .logo,
  body.is-preload #banner h2,
  body.is-preload #banner p {
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-filter: none !important;
    filter: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
  }
}

@media (max-width: 540px) {
  #banner .actions {
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
  }
  #banner .actions li {
    padding-left: 0;
  }
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .logo-grid,
  .eng-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .advisor-grid {
    grid-template-columns: 1fr;
    max-width: 28em;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 980px) {
  .case-study__cols {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
  .stat-callouts {
    grid-template-columns: 1fr;
  }
  .case-study__lead {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
  }
}

@media (max-width: 736px) {
  .card-grid,
  .products-grid,
  .capability-grid,
  .logo-grid,
  .eng-grid {
    grid-template-columns: 1fr;
  }
  .capability-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================================
   Light / neutral section band
   ------------------------------------------------------------
   The Solid State theme renders every `.wrapper` as a dark-blue slab with
   angled SVG edges tinted to match its own background. `.wrapper--light`
   flips a single section to a soft neutral surface (with dark text and white
   cards) so the page reads as alternating bands instead of one continuous
   dark block. It also repaints the angled top/bottom edges to the light tone
   and re-themes the text, links, and cards nested inside.
   ============================================================ */

.wrapper.wrapper--light {
  background-color: var(--bi-light-bg);
  color: var(--bi-light-text);
}

.wrapper.wrapper--light:before,
.wrapper.wrapper--light:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23eef0f5%3B' /%3E%3C/svg%3E");
  box-shadow: inset 0 -1px 0 0 var(--bi-light-bg), 0 1px 0 0 var(--bi-light-bg);
}

/* Headings and body copy inherit the theme's white text; re-color them for
   the light surface. */
.wrapper--light h1,
.wrapper--light h2,
.wrapper--light h3,
.wrapper--light h4,
.wrapper--light h5,
.wrapper--light h6 {
  color: var(--bi-light-heading);
}

.wrapper--light p,
.wrapper--light li {
  color: var(--bi-light-text);
}

.wrapper--light .major {
  border-bottom-color: var(--bi-light-border);
}

/* Links: the theme paints links white with a white hover (the hover uses
   !important), both invisible on a light band. */
.wrapper--light a:not(.button) {
  color: var(--bi-light-accent);
  border-bottom-color: rgba(58, 74, 160, 0.35);
}

.wrapper--light a:not(.button):hover {
  color: var(--bi-light-accent) !important;
}

/* Eyebrow labels use the light-blue accent that washes out on white. */
.wrapper--light .card-eyebrow,
.wrapper--light .case-study__eyebrow,
.wrapper--light .case-study__col h3,
.wrapper--light .advisor-role {
  color: var(--bi-light-accent);
}

/* Muted copy tokens are white-based; darken them for the light surface. */
.wrapper--light .card-value,
.wrapper--light .eng-card p,
.wrapper--light .case-study__col p,
.wrapper--light .proof-strip li,
.wrapper--light .cap-tags li,
.wrapper--light .logo-card p,
.wrapper--light .advisor-bio,
.wrapper--light .card-cta--muted {
  color: var(--bi-light-muted);
}

/* Cards on a light band become clean white panels with a soft shadow. */
.wrapper--light .info-card,
.wrapper--light .product-card,
.wrapper--light .logo-card,
.wrapper--light .advisor-card,
.wrapper--light .capability-card,
.wrapper--light .stat-callouts li,
.wrapper--light .cap-tags li {
  background-color: #ffffff;
  border-color: var(--bi-light-card-border);
  box-shadow: var(--bi-light-card-shadow);
}

.wrapper--light .info-card:hover,
.wrapper--light .product-card:hover,
.wrapper--light .logo-card:hover,
.wrapper--light .advisor-card:hover,
.wrapper--light .capability-card:hover {
  background-color: #ffffff;
  border-color: rgba(35, 38, 47, 0.2);
  box-shadow: var(--bi-light-card-shadow-hover);
}

.wrapper--light .partner-card {
  border-left-color: var(--bi-light-accent);
}

.wrapper--light .card-status {
  border-color: var(--bi-light-card-border);
  color: var(--bi-light-muted);
}

.wrapper--light .stat-callouts strong {
  color: var(--bi-light-heading);
}

.wrapper--light .stat-callouts span {
  color: var(--bi-light-muted);
}