/* ==========================================================================
   Homepage only (body.home), loaded after sections.css and header.css.
   2026-10-16: no photos or film, light all the way down. Hero, What we build,
   Capabilities and Deployment use the same drifting-wash cards as Solutions,
   Use cases and How we work. Nothing here touches the inner pages.
   ========================================================================== */

/* ---- Breathing room: fluid side gutter ---- */

/* One background all the way down: no alternate tinted bands */
.home .stage-alt,
.home .dep { background: transparent; }

/* Section heads: title in 7 of 12 columns, lede in the last 5, last lines on one baseline */
@media (min-width: 992px) {
  .home .stage-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(20px, 2vw, 32px);
    align-items: end;
    align-items: last baseline;
  }
  .home .stage-head > .stage-title { grid-column: 1 / span 7; }
  .home .stage-head > .stage-lede { grid-column: 8 / -1; max-width: none; }
}

/* ---- Hero: pale ground, two slow washes of colour (GPU transform only) ---- */
.home .proof-band {
  background: transparent;
  color: #0b1322;
}

/* Tall desktop screens (2026-10-19, user): the hero fits its content instead of filling the
   screen. Full height with the text at the bottom left an empty band above the headline that grew
   with the screen (254px at 1858x930, 495px at 1920x1200). The headline now sits about 95px under
   the fixed header (110px with the announcement bar) and the next section starts in view.
   Short laptop screens keep the full-screen hero; the hubs have their own hero rules. */
@media (min-width: 992px) and (min-height: 820px) {
  .home .proof-band:not(.hub-hero) {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 205px;
  }
}

/* Phones and small tablets (launch review): the full-height, bottom-aligned hero left about 285px of empty screen above
   the headline at 390x844. Content-led instead: the headline sits under the fixed header and the proof strip stays in view. */
@media (max-width: 991.98px) {
  .home .proof-band:not(.hub-hero) {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 150px;
    padding-bottom: clamp(40px, 8vw, 72px);
  }
}

.hero-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-wash::before,
.hero-wash::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  will-change: transform;
  animation: wash-drift 22s ease-in-out infinite alternate;
}

.hero-wash::before { background: radial-gradient(40% 36% at 50% 50%, rgba(141, 165, 201, 0.42), transparent 70%); }

.hero-wash::after {
  background: radial-gradient(34% 32% at 50% 50%, rgba(148, 184, 171, 0.34), transparent 70%);
  animation-duration: 30s;
  animation-direction: alternate-reverse;
}

.home .hero-title { color: #0b1322; }
.home .hero-lede { color: rgba(11, 19, 34, 0.74); }
.home .hero-explore a { color: #0b1322; border-bottom-color: rgba(11, 19, 34, 0.35); }
.home .hero-explore a:hover { border-bottom-color: #0b1322; }

.home .proof-foot {
  border-top-color: rgba(11, 19, 34, 0.14);
  color: #0b1322;
}

.home .proof-foot-tagline,
.home .proof-foot-metrics { color: #0b1322; }

/* ---- What we build / Capabilities: one gradient card per tab ---- */
.home .cap-cards { padding-bottom: clamp(56px, 7vw, 104px); }
.home .cap-cards .stage-tabs-row { margin-bottom: clamp(24px, 3vw, 40px); }

.home .cap-stage.lit {
  display: block;
  min-height: 0;
  overflow: hidden;
  background-color: var(--ground);
  color: var(--ink);
  border: 1px solid rgba(11, 19, 34, 0.08);
}

.home .cap-stage.lit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 45% at 50% 50%, color-mix(in srgb, var(--hue) 45%, transparent), transparent 70%);
  transform: translate(-50%, 0);
  animation: wash-drift 16s ease-in-out infinite alternate;
  will-change: transform;
}

/* Headline and link on the left; the verbs as rows with their one-line meaning on the right */
.home .cap-stage.lit .cap-stage-content {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(32px, 5vw, 80px);
  padding: clamp(28px, 4vw, 56px);
}

.home .cap-stage.lit h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  max-width: 14ch;
  color: var(--ink);
}

.home .cap-stage.lit .cap-cta {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: end;
  margin-top: 32px;
  color: var(--ink);
  border-bottom-color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.home .cap-stage.lit .cap-cta:hover { border-bottom-color: var(--ink); }

.home .cap-stage.lit .cap-verbs {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0 clamp(20px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  border-top: 0;
}

.home .cap-stage.lit .cap-verbs li {
  padding: 14px 0 18px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--ink);
}

.home .cap-stage.lit .cap-verbs a { display: block; border-bottom: 0; }

.home .cap-stage.lit .cap-verbs strong {
  display: block;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  border-bottom: 1px solid transparent;
  width: fit-content;
}

.home .cap-stage.lit .cap-verbs a:hover strong,
.home .cap-stage.lit .cap-verbs a:focus-visible strong { border-bottom-color: var(--ink); }

.home .cap-stage.lit .cap-verbs span {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.45;
}

.home .cap-stage.lit .cap-verbs a:focus-visible { outline-color: var(--ink); }

@media (max-width: 991.98px) {
  .home .cap-stage.lit .cap-stage-content { grid-template-columns: 1fr; grid-template-rows: auto; }
  .home .cap-stage.lit h3 { margin-bottom: 28px; max-width: 18ch; }
  .home .cap-stage.lit .cap-verbs { grid-column: 1; grid-row: auto; }
  .home .cap-stage.lit .cap-cta { grid-column: 1; grid-row: auto; margin-top: 28px; }
}

@media (max-width: 575.98px) {
  .home .cap-stage.lit .cap-verbs { grid-template-columns: 1fr; }
}

/* ---- Deployment: light, same layout ---- */
.home .dep { color: #0b1322; }

.home .dep-mast {
  min-height: 0;
  background: transparent;
  padding-top: clamp(72px, 10vw, 144px);
}

.home .dep-mast h2 { color: #0b1322; }
.home .dep-mast p { color: var(--bs-secondary-fg); }

.home .dep-tab { border-bottom-color: rgba(11, 19, 34, 0.14); color: #6b7280; }
.home .dep-tab:first-child { border-top-color: rgba(11, 19, 34, 0.14); }
.home .dep-tab:hover,
.home .dep-tab[aria-selected="true"] { color: #0b1322; }
.home .dep-tab[aria-selected="true"] > span:first-child::before { background: #0b1322; }
.home .dep :focus-visible { outline-color: #253b29; }
.home .dep-panel h3 { color: #0b1322; }
.home .dep-panel p { color: #4b5563; }
.home .dep-link { color: #0b1322; border-bottom-color: #0b1322; }
.home .dep-link:hover { color: #0b1322; border-bottom-color: #6b7280; }
.home .dep-note { color: #6b7280; }
.home .dep-assure { border-top-color: rgba(11, 19, 34, 0.14); }
.home .dep-assure strong { color: #0b1322; }
.home .dep-assure span { color: #6b7280; }

@media (max-width: 767.98px) {
  .home .dep-mast { min-height: 0; }
  .home .dep-tab[aria-selected="true"] { border-bottom-color: #0b1322; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wash::before, .hero-wash::after, .home .cap-stage.lit::before { animation: none; }
}

/* Hover and focus keep the ink colour: the shared rule turns the link white, which
   suits the old photo chapters but vanishes on the pale cards */
.home .cap-stage.lit .cap-verbs a:hover,
.home .cap-stage.lit .cap-verbs a:focus-visible { color: var(--ink); }

/* Contrast: text on the tinted cards stays at full ink. Fading it (opacity) took
   the small text below 4.5:1 on the stronger parts of the wash */
.home .quote-card-text,
.home .quote-card-role,
.home .quote-card-arrow { opacity: 1; }

/* ---- Hero text centred: headline, lede and the two links ---- */
.home .proof-band .col-12 { text-align: center; }
.home .proof-band .hero-title,
.home .proof-band .hero-lede { margin-inline: auto; }
.home .proof-band .hero-explore { justify-content: center; }

/* Phones: the two links sit side by side in equal columns, as on the hub */
@media (max-width: 575.98px) {
  .home .proof-band .hero-explore {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }
  .home .proof-band .hero-explore a { font-size: 14px; }
}.home .proof-band .proof-foot { text-align: left; }

/* ---- What we build: all five areas at once, each on its own gradient card ---- */
.home .build-overview { padding-bottom: clamp(56px, 7vw, 104px); }

.home .build-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

.home .build-card {
  grid-column: span 2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 40px);
  background-color: var(--ground);
  color: var(--ink);
  border: 1px solid rgba(11, 19, 34, 0.08);
}

/* Six cards in each grid (What we build: Evaluations; Capabilities: Investigate; 2026-10-19, user):
   3 + 3 on desktop, three rows of two on tablet, one column on phones */

.home .build-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 45% at 50% 50%, color-mix(in srgb, var(--hue) 45%, transparent), transparent 70%);
  transform: translate(-50%, 0);
  animation: wash-drift 18s ease-in-out infinite alternate;
  will-change: transform;
}

.home .build-card h3 {
  margin: 0;
  font-size: clamp(30px, 2.6vw, 44px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.home .build-card h3 a,
.home .build-cta { color: inherit; text-decoration: none; }

.home .build-card h3 a:hover,
.home .build-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.home .build-tag {
  margin: 12px 0 26px;
  max-width: 32ch;
  font-size: 16px;
  line-height: 1.45;
  text-wrap: balance;
}

/* The item lists (.build-verbs) were removed from the What we build and Capabilities cards
   (2026-10-19, user); the items live on the hub and capability pages */

.home .build-card :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.home .build-cta {
  margin-top: auto;
  align-self: flex-start;
  padding-bottom: 2px;
  font-size: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
}

.home .build-cta:hover { border-bottom-color: var(--ink); }

@media (max-width: 991.98px) {
  .home .build-card { grid-column: span 3; }
}

@media (max-width: 639.98px) {
  .home .build-card { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .home .build-card::before { animation: none; }
}

/* APIs and Data sit side by side: give Data the slate tone so they differ */
.home #build-data { --hue: #8da5c9 !important; }

/* What we build: both rows of three reserve three tagline lines, so every Explore link sits level */
@media (min-width: 992px) {
  .home #build .build-card .build-tag { min-height: calc(3 * 1.45em); }
}

/* Hero headline: the scale the inner-page heroes use (74-148px there), capped by
   viewport height so it never pushes the lede off a short laptop screen */
.home .hero-title {
  font-size: clamp(2.75rem, min(7.7vw, 15svh), 9.25rem);
  line-height: 1.015;
  letter-spacing: -0.058em;
  max-width: 16ch;
}


/* ---- Insights: an index in four columns, no cards and no carousel, so everything
   is visible at once and it differs from the sections around it ---- */
.home .ins-index { padding-bottom: clamp(56px, 7vw, 104px); }

.home .ins-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px clamp(20px, 2.4vw, 40px);
}

.home .ins-col-title {
  margin: 0 0 6px;
  padding-top: 14px;
  border-top: 2px solid #0b1322;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.home .ins-col ul { list-style: none; margin: 0; padding: 0; }

.home .ins-col li { border-top: 1px solid rgba(11, 19, 34, 0.12); }
.home .ins-col li:first-child { border-top: 0; }

.home .ins-item {
  display: block;
  padding: 18px 0 20px;
  color: inherit;
  text-decoration: none;
}

.home .ins-item-title {
  display: block;
  font-size: clamp(18px, 1rem + 0.3vw, 21px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.22;
  text-wrap: balance;
}

.home .ins-item:hover .ins-item-title,
.home .ins-item:focus-visible .ins-item-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.home .ins-item-line {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bs-secondary-fg);
}

.home .ins-item:focus-visible { outline: 2px solid #253b29; outline-offset: 3px; }

@media (max-width: 1199.98px) {
  .home .ins-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
  .home .ins-cols { grid-template-columns: 1fr; }
}

/* ---- Capabilities: the same gradient cards as What we build, in the same 3 + 3 arrangement
   (2026-10-19, user). The grid comes from the shared .build-card rules. Its taglines are
   shorter, so each card reserves two lines, not three, at a width that breaks them alike. ---- */
@media (min-width: 992px) {
  .home .cap-grid .build-card .build-tag { min-height: calc(2 * 1.45em); max-width: 36ch; }
}

/* ---- Deployment: the options and the chosen option sit on one gradient card ---- */
.home .dep-body.dep-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(32px, 4vw, 56px);
  background-color: var(--ground);
  border: 1px solid rgba(11, 19, 34, 0.08);
}

.home .dep-body.dep-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 45% at 50% 50%, color-mix(in srgb, var(--hue) 45%, transparent), transparent 70%);
  transform: translate(-50%, 0);
  animation: wash-drift 20s ease-in-out infinite alternate;
  will-change: transform;
}

.home .dep-card .dep-tab { color: #4b5563; }
.home .dep-card .dep-tab:hover,
.home .dep-card .dep-tab[aria-selected="true"] { color: #0b1322; }
.home .dep-card .dep-note { color: #4b5563; }

@media (max-width: 767.98px) {
  .home .dep-body.dep-card { padding-bottom: 36px; }
}

/* ---- Insights: two columns, more air and larger type, so it reads instead of crowds ---- */
.home .ins-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px clamp(32px, 5vw, 88px);
}

.home .ins-item { padding: 22px 0 26px; }

.home .ins-item-title { font-size: clamp(20px, 1rem + 0.5vw, 24px); }

.home .ins-item-line {
  max-width: 54ch;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 767.98px) {
  .home .ins-cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .home .dep-body.dep-card::before { animation: none; }
}


/* ---- Section rhythm: with one background all the way down, 256-288px between sections
   read as drift. One shared value, about 140-160px between neighbours. ---- */
.home { --section-pad: clamp(48px, 5.5vw, 80px); }

.home .stage,
.home .build-overview,
.home .ins-index { padding-block: var(--section-pad); }

.home .dep-mast { padding-top: var(--section-pad); }
.home .close-band { padding-top: var(--section-pad); }
.home .stage-head { margin-bottom: clamp(32px, 4vw, 56px); }