/* Homepage styles — consumed only by components/HomepageContent/HomepageContent.tsx.
   NOTE: black_2/black_3/black_5/black_6 are referenced dynamically via
   styles[project.accent] and will not show up in a grep for literal usage. */

/* ---- Core wrapper ---- */

.pageWrapper {
  background: var(--bg);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---- Layout ---- */

.container {
  width: 100%;
  max-width: var(--rail);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.alignItemsCenter {
  align-items: center;
}

.col12 {
  width: 100%;
  flex: 0 0 100%;
  padding: 0 15px;
}

.textCenter {
  text-align: center;
  margin-bottom: 60px;
}

/* ---- Shared UI ---- */

/* Orange text only — no fill, border or radius. Vertical padding matches
   .btnGhost so the two hero CTAs sit on the same baseline. */
.btnDefault {
  padding: 15px 8px;
  background: none;
  border: 0;
  color: var(--orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  transition: var(--speed-base);
}

.btnDefault:hover {
  color: var(--amber);
  gap: 13px;
}

.btnBorder {
  background: transparent;
  border: 2px solid var(--border-default);
}

.round {
  border-radius: var(--radius);
}

.buttonGroup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btnGhost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 8px;
  color: var(--text-primary);
  font-weight: 600;
  transition: var(--speed-base);
}

.btnGhost:hover {
  color: var(--blue);
  gap: 12px;
}

.subtitle {
  color: var(--rose);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}

.title {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ---- Hero ---- */

.sliderArea {
  padding: 40px 0;
  /* Fill the viewport minus the header stack above it, so the landing view is
     exactly one screen - a flat 100svh would overshoot by the header height. */
  min-height: calc(100svh - var(--header-stack));
  background: #000;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.heroBgWrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.heroBgImg {
  object-fit: cover;
  object-position: center right;
}

.heroBloom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.38;
  /* No `filter` here on purpose. grayscale + brightness used to live on this
     element, but a 100x brightness multiplier re-saturates whatever `opacity`
     dimmed, and engines disagree on which of the two applies first — iOS
     Safari ignored the opacity entirely while Chrome honoured it. The canvas
     now draws desaturated pixels itself, so `opacity` is the only control. */
  pointer-events: none;
}

.heroBgOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #0f0f11 0%,
    #0f0f11 22%,
    rgba(15, 15, 17, 0.88) 42%,
    rgba(15, 15, 17, 0.35) 68%,
    rgba(15, 15, 17, 0.05) 100%
  );
}

.heroInner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.innerHero {
  max-width: 700px;
}

.heroTitle {
  font-size: clamp(40px, 8vw, 80px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 30px;
  text-align: left;
}

.descriptionHero {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 40px;
  text-align: left;
}

/* Rotating-word reel. Reel height and item height are derived from the word
   count in HomepageContent and set inline, so adding or removing a word needs
   no change here. */

.spinnerWindow {
  display: inline-block;
  vertical-align: top;
  height: 1.2em;
  overflow: hidden;
  position: relative;
}

.spinnerReel {
  display: flex;
  flex-direction: column;
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.spinnerItem {
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1.2em;
  color: var(--orange);
}

@media (max-width: 991px) {
  .spinnerWindow {
    margin-left: 0;
    display: block;
  }
}

@media (max-width: 768px) {
  .sliderArea {
    /* min-height comes from the shared calc + --header-stack; a flat 100svh
       here pushed the hero exactly one header-height below the fold. */
    padding: 32px 0;
  }
  .heroBgImg {
    object-position: 70% center;
  }
  /* .heroBgOverlay is deliberately NOT overridden: phone gets the same
     left-to-right gradient as desktop. The bloom sits slightly stronger here
     than the desktop 0.38, since the phone draws finer dots. */
  .heroBloom {
    opacity: 0.43;
  }
}

/* ---- Custom Solutions ---- */

.customSolutionsSection {
  padding: var(--section-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
}

.customSolutionsIntro {
  margin: 16px auto 0;
  max-width: var(--measure);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
}

.solutionGrid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.solutionCard {
  background: var(--surface);
  border: 1px solid var(--border-default);
  padding: var(--card-pad);
  box-shadow: var(--specular);
  transition: background var(--speed-fast) var(--ease-out),
    border-color var(--speed-fast) var(--ease-out),
    translate var(--speed-base) var(--ease-out);
}

.solutionCard:hover {
  translate: 0 var(--lift);
  background: var(--surface-hi);
  border-color: rgba(var(--orange-rgb), 0.35);
}

.solutionIconWrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--orange-rgb), 0.4);
  background: linear-gradient(140deg, rgba(67, 45, 28, 0.92), rgba(30, 24, 18, 0.9));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffb15f;
}

.solutionTitle {
  margin: 14px 0 0;
  font-size: 21px;
  font-weight: 700;
}

.solutionDescription {
  margin: 10px 0 0;
  color: var(--text-muted);
  line-height: 1.65;
  font-size: 15px;
}

/* ---- Expert ---- */

.expertSection {
  padding: var(--section-y) 0;
  background: linear-gradient(90deg, #181512, var(--bg));
  border-top: 1px solid var(--border-subtle);
}

.expertRow {
  display: flex;
  align-items: center;
  gap: 64px;
}

.expertPhotoCol {
  flex: 0 0 380px;
}

.expertPhotoWrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

.expertPhoto {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.05);
}

.expertTextCol {
  flex: 1;
}

.expertName {
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 700;
  color: var(--text-primary);
  margin: 8px 0 4px;
  line-height: 1;
}

.expertTitle {
  font-size: 15px;
  color: var(--rose);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}

.expertBio {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.expertTags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 32px;
}

.expertTag {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-default);
  padding: 7px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  color: #d0d0d4;
  font-weight: 500;
}

/* Read more / less toggle under the bio. */
.bioToggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange);
  transition: color var(--speed-fast) ease;
}

.bioToggle:hover {
  color: var(--amber);
}

.bioToggle svg {
  transition: transform var(--speed-base) var(--ease-out);
}

.bioToggleOpen svg {
  transform: rotate(180deg);
}

.expertCta {
  margin-top: 8px;
}

.expertCtaLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
  transition: var(--speed-base);
}

.expertCtaLink:hover {
  color: var(--amber);
  gap: 11px;
}

@media (max-width: 991px) {
  .expertRow {
    flex-direction: column;
    gap: 40px;
  }
  .expertPhotoCol {
    flex: none;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .expertTextCol {
    text-align: center;
  }
  .expertTags {
    justify-content: center;
  }
  .expertCta {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .expertSection {
    padding: 80px 0;
  }
  .expertName {
    font-size: 48px;
  }
  .expertBio {
    font-size: 15px;
  }
  .expertTextCol {
    text-align: left;
  }
  .expertTags {
    justify-content: flex-start;
  }
  .expertCta {
    justify-content: flex-start;
  }
  /* Smaller, centered portrait on phones */
  .expertPhotoCol {
    max-width: 240px;
    margin: 0 auto;
  }
  /* "AI Architect" pill sits 16px in from the image edges */
  .expertBadge {
    bottom: 16px;
    left: 16px;
  }
}

/* ---- Reviews ---- */

.reviewsSection {
  padding: var(--section-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
}

.reviewQuoteIcon {
  color: var(--text-muted);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .customSolutionsSection,
  .reviewsSection {
    padding: 80px 0;
  }
  .customSolutionsIntro {
    font-size: 16px;
  }
}

/* ---- Products ---- */

.sectionGap {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
}

/* Pinstripe — the tailoring/banknote ruling, deliberately a different figure
   from the 45deg cross-hatch on the announcement card so the two read as one
   family rather than one repeated trick. Vertical, so it does not fight the
   horizontal card grid, and at a wide 34px pitch it stays a texture instead of
   becoming moire at full-bleed width.

   The fade stop is in px, not a percentage: the section grows with its card
   grid, so a percentage tracked the section height and pushed the fade down
   past the cards. 170px keeps it inside the heading block — measured, the
   grid starts at 256px on desktop and 197px on a 375px phone, where the
   shorter section padding outweighs the wrapping title. 150px clears both
   with room for a longer heading. */
.sectionGap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.045) 0 1px,
    transparent 1px 34px
  );
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 150px);
  mask-image: linear-gradient(180deg, #000 0, transparent 150px);
}

.sectionGap > * {
  position: relative;
  z-index: 1;
}

/* ---- Homepage announcement ---- */
.announceSection {
  padding: 0 0 var(--section-y);
  background: var(--bg);
}

.announceCard {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border-default);
  background: var(--surface);
  box-shadow: var(--specular);
  padding: 44px 48px;
}

/* Guilloché-style hairline engraving — the cross-hatch used on banknotes and
   watch dials. Structure rather than gloss: no gradient wash, no glow, no
   blur. Two 1px rulings at opposing 45deg angles, then masked so it only
   surfaces on the right where there is no text to compete with. Alpha is
   deliberately at the threshold of visibility; if you can see it as a
   "texture" it is too strong. */
.announceCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 9px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 9px
    );
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 42%, #000 100%);
}

/* The card's own children sit above the engraving. */
.announceCard > * {
  position: relative;
  z-index: 1;
}

.announceLogo {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.announceEyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.announceTitle {
  margin: 0;
  max-width: var(--measure-tight);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
}

.announceText {
  margin: 16px 0 0;
  max-width: var(--measure);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
}

.announceActions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.announceCta,
.announceCtaSecondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: var(--speed-base);
}

.announceCta {
  color: var(--orange);
  padding: 12px 2px;
}

.announceCta:hover {
  color: var(--amber);
}

.announceCtaSecondary {
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--text-primary);
  padding: 12px 22px;
}

.announceCta:hover,
.announceCtaSecondary:hover {
  gap: 11px;
}

@media (max-width: 768px) {
  .announceSection {
    padding: 0 0 80px;
  }
  .announceCard {
    padding: 30px 22px;
  }
}

.productGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.productCard {
  background: var(--surface);
  border: 1px solid #846b4036;
  padding: var(--card-pad);
  box-shadow: var(--specular);
  /* Named properties, not `all` — `all` also transitions the border-color and
     background the hover state sets, and fights Framer Motion on transform. */
  transition: background var(--speed-fast) var(--ease-out),
    border-color var(--speed-fast) var(--ease-out),
    translate var(--speed-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.productCard:hover {
  /* `translate`, not `transform`: these sit on Framer Motion StaggerItem
     nodes, which own the transform property. */
  translate: 0 var(--lift);
  background: var(--surface-hi);
  border-color: rgba(var(--orange-rgb), 0.35);
}

.productIcon {
  margin-bottom: 25px;
}

.iconInner {
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.black_2 {
  background: linear-gradient(135deg, #111111 0%, #353535 100%);
  border: 1px solid rgba(255, 128, 0, 0.697);
}

.black_3 {
  background: linear-gradient(135deg, #111111 0%, #353535 100%);
  border: 1px solid rgba(213, 65, 87, 0.5);
}

.black_4 {
  background: linear-gradient(135deg, #111111 0%, #353535 100%);
  border: 1px solid rgba(139, 92, 246, 0.6);
}

.black_5 {
  background: linear-gradient(135deg, #111111 0%, #353535 100%);
  border: 1px solid rgba(3, 136, 252, 0.5);
}

.black_6 {
  background: linear-gradient(135deg, #111111 0%, #353535 100%);
  border: 1px solid #a47efd80;
}

.productName {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 15px;
}

.productDescription {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 0;
}

.productLaunch {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #ff8000;
  transition: var(--speed-fast);
}

.productLaunch:hover {
  color: #ffa445;
  gap: 7px;
}

.linkWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.visitLink {
  padding: 10px;
  border-radius: var(--radius);
  background: #1a1a1a;
  border: 1px solid #262626;
  color: #ff8000;
  transition: var(--speed-fast);
}

.visitLink:hover {
  cursor: pointer;
  background: #232323;
}

@media (max-width: 768px) {
  .title {
    font-size: 32px;
  }
  .solutionGrid,
  .reviewGrid,
  .productGrid {
    gap: 12px;
  }
}

/* ---- Hero name anchor ---- */
.heroAnchor {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
  text-align: left;
  /* On the whole line, so the bold "Meliorate" and the italic "(v.)" fade with
     it rather than staying at full strength. */
  opacity: 0.5;
}
.heroAnchor b {
  color: var(--text-secondary);
  font-weight: 600;
}
.heroAnchorTag {
  font-style: italic;
  color: var(--text-muted);
}

/* ---- Reviews slider ----
   Square corners throughout, one surface token, and colour restricted to its
   assigned roles: amber for the rating marks, orange for the active indicator.
   No gradients, no coloured hover glows. */
.reviewSliderHead {
  margin-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.googleRating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}
.reviewSliderNav {
  display: flex;
  gap: var(--space-2);
}
.reviewBtn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-default);
  background: var(--surface);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--speed-fast) var(--ease-out),
    border-color var(--speed-fast) var(--ease-out);
}
.reviewBtn:hover {
  background: var(--surface-hi);
  border-color: var(--border-strong);
}
.reviewBtn:disabled {
  opacity: 0.32;
  cursor: default;
}
.reviewBtn:disabled:hover {
  background: var(--surface);
  border-color: var(--border-default);
}
.reviewTrack {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}
.reviewTrack::-webkit-scrollbar {
  display: none;
}
.reviewSlide {
  scroll-snap-align: start;
  flex: 0 0 clamp(280px, 78%, 384px);
  background: var(--surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--specular);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
}
.reviewSlideStars {
  display: inline-flex;
  gap: var(--space-1);
  color: var(--amber);
  margin: var(--space-3) 0;
}
.reviewSlideStars svg {
  fill: currentColor;
}
.reviewSlideText {
  margin: 0 0 var(--space-5);
  color: var(--text-body);
  line-height: var(--leading-body);
  font-size: var(--text-base);
  flex-grow: 1;
}
.reviewWho {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.reviewAvatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-hi);
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
}
.reviewSlideName {
  margin: 0;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
}
.reviewBadge {
  margin-left: var(--space-2);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  /* Was a one-off green (#37d399) that appeared nowhere else in the palette. */
  color: var(--amber);
  border: 1px solid rgba(var(--orange-rgb), 0.3);
  padding: 2px 7px;
  font-weight: 700;
}
.reviewSlideRole {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.reviewDots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-5);
}
.reviewDot {
  width: 18px;
  height: 2px;
  background: var(--border-strong);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--speed-fast) var(--ease-out),
    width var(--speed-base) var(--ease-out);
}
.reviewDotOn {
  width: 34px;
  background: var(--orange);
}

/* ---- Meliorate Labs ---- */
/* Selected Work — case study teasers between reviews and the product grid. */
.workSection {
  padding: var(--section-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
}
.workHead {
  text-align: left;
  margin-bottom: 40px;
}
.workGrid {
  display: grid;
  /* Always two columns on desktop, even with a single case study, so the
     section keeps its shape as more are added. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.workCtaWrap {
  margin-top: 32px;
  display: flex;
  justify-content: flex-start;
}

/* Plain orange text link - no fill, no pill. Mirrors .expertCtaLink. */
.workCtaLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
  transition: var(--speed-base);
}

.workCtaLink:hover {
  color: var(--amber);
  gap: 11px;
}

@media (max-width: 991px) {
  .workSection {
    padding: 80px 0;
  }
  .workGrid {
    grid-template-columns: 1fr;
  }
}

.labsSection {
  padding: var(--section-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
}
.labsHead {
  text-align: left;
  margin-bottom: 48px;
}
/* Deliberately quiet: this reads as a standfirst under the section title, not
   as a second headline competing with it. */
.labsThesis {
  max-width: var(--measure);
  margin: var(--space-4) 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-tertiary);
  font-weight: 400;
}
.labsThesis em {
  /* One step brighter than the surrounding line rather than amber — enough to
     mark the phrase without shouting. */
  color: var(--text-secondary);
  font-style: italic;
}
.labsGrid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.labsCard {
  background: linear-gradient(160deg, rgba(18, 18, 22, 0.95), rgba(9, 9, 11, 1));
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 24px;
}
.labsIcon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius);
  border: 1px solid rgba(5, 157, 255, 0.35);
  background: linear-gradient(140deg, rgba(20, 36, 54, 0.9), rgba(16, 18, 26, 0.9));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-soft);
  margin-bottom: 16px;
}
.labsCardTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.labsCardText {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Sits under the trust card grid now, not inside a card of its own, so the
   space above it matches the grid's own gap. */
.guardrailChips {
  margin-top: var(--grid-gap);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.guardrailChip {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  background: rgba(255, 255, 255, 0.03);
  padding: var(--space-2) var(--space-3);
}

/* ---- High-trust / public-sector band ---- */
.trustSection {
  padding: var(--section-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
}
.trustHead {
  text-align: left;
  margin-bottom: 44px;
}
.trustIntro {
  margin: 16px 0 0;
  max-width: var(--measure);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
}
.trustGrid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.trustCard {
  background: rgba(255, 255, 255, 0.02);
  padding: 20px;
}
.trustCardHead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.trustCardIcon {
  color: var(--blue-soft);
  display: inline-flex;
  flex-shrink: 0;
}
.trustCardTitle {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.trustCardText {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .labsGrid,
  .trustGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .labsSection,
  .trustSection {
    padding: 80px 0;
  }
  .heroAnchor {
    font-size: 13px;
  }
}