/* ══════════════════════════════════════════════════════════════
   HOMEPAGE + SHARED SYSTEM (rebuild of 2026-09-30)
   Loaded after style.css by index.html and, with css/pages.css, by every
   rebuilt inner page (<body class="inner">), which reuses the shared
   parts (tokens, sections, heads, navy bands, steps, FAQ, CTA, motion).
   Every rule is scoped to body.home / body.inner or uses the home-
   prefix, so pages that don't load it are unchanged.
   Direction and component specs: design.md. Coding rules: rules.md.

   Alignment: every band uses padding-inline: var(--gutter), the same edge
   as the nav logo and the footer. Only the case-study row bleeds past it,
   on purpose, so cards can slide in from the edge.
   Rhythm: NAVY hero (logo globe) > white trust strips > tint > white
   service columns > tint > NAVY how-we-work > white industries > NAVY
   case studies > white FAQ > NAVY CTA (logo globe) > navy footer.
   Behaviour: js/main.js (tabs, reveal, FAQ, sticky strip), js/globe.js
   (the two canvases), js/home.js (marquees, columns, hover list, carousel).
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
body.home,
body.inner {
  --brand-blue: #006EFE;            /* top of the logo globe */
  --brand-cyan: #00BCFE;            /* bottom of the logo globe */
  --navy-rgb: 10, 22, 51;           /* --navy as channels, for overlays */
  --grad-brand: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  /* Lighter ends so the accent phrase stays above 3:1 on --navy (large text). */
  --grad-brand-text: linear-gradient(90deg, #5AA2FF 0%, #00C8FF 100%);
  --home-line: rgba(255, 255, 255, 0.12);
  --home-line-strong: rgba(255, 255, 255, 0.28);
  --home-py: clamp(72px, 9vw, 128px);
  --home-gap: clamp(20px, 2.4vw, 32px);
  --home-h1: clamp(2.375rem, 1.4rem + 3.4vw, 4rem);
  --home-h2: clamp(1.875rem, 1.25rem + 2.4vw, 3rem);
  --home-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

/* ── Nav over the hero ──────────────────────────────────────── */
/* Transparent while the navy hero sits under it; the existing .scrolled
   state (main.js, past 60px) brings the solid bar back. Never while the
   mobile drawer is open. */
html:not(.nav-open) body.home .nav:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Navy CTA and navy footer meet: a hairline keeps them apart. */
body.home .footer { border-top: 1px solid var(--home-line); }

/* ── Shared section parts ───────────────────────────────────── */
.home-section { padding: var(--home-py) var(--gutter); }
.home-section.is-tint { background: var(--off-white); }
.home-dark { background: var(--navy); color: var(--text-dark-body); }

.home-head { max-width: 780px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.home-head .eyebrow { margin-bottom: 14px; }
.home-h2 {
  font-size: var(--home-h2);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.home-lead {
  margin-top: 18px;
  max-width: 62ch;
  font-size: var(--home-lead);
  line-height: 1.6;
  color: var(--text-soft);
}
/* Bare inline links in paragraphs use the site-wide rule in style.css
   ("Inline text links"). That rule only knows .section-dark, so the navy
   bands get the light twin and a white focus ring here (0,3,2 beats the
   site rule's 0,2,3). */
.home-dark .home-h2, .home-dark h3 { color: var(--white); }
.home-dark .eyebrow { color: var(--teal); }
.home-dark .home-lead { color: var(--text-dark-sub); }
.home-dark p > a:not([class]) { color: var(--teal); text-decoration-color: rgba(156, 189, 255, 0.5); }
.home-dark p > a:not([class]):hover { color: var(--white); }
.home-dark p > a:not([class]):focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* Text link with an arrow, used once per block. */
.home-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--blue);
}
.home-link svg { transition: transform 0.2s var(--ease); }
.home-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-link:hover svg { transform: translateX(3px); }
.home-dark .home-link, .home-hero .home-link { color: var(--teal); }

.home-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 36px; }

/* Dark bands: a --blue focus ring is too faint on navy. */
.home-hero a:focus-visible,
.home-dark a:focus-visible,
.home-dark button:focus-visible,
.home-dark [tabindex]:focus-visible,
.home-cta a:focus-visible { outline-color: var(--white); }

/* ── 1. Hero: logo globe on the navy-to-blue gradient ───────── */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(640px, 92svh, 880px);
  padding: calc(76px + clamp(48px, 7vw, 96px)) var(--gutter) clamp(64px, 8vw, 112px);
  background: var(--grad-hero);
  color: var(--text-dark-body);
}
/* js/globe.js draws the striped sphere from the logo mark here and turns it
   for five seconds each time it scrolls into view (never under reduced
   motion or the site-wide pause). Same placement as the previous homepage. */
.home-globe {
  position: absolute; top: 0; right: 0; z-index: -1;
  display: block;
  width: 64%; height: 100%;
  pointer-events: none;
}
.home-hero-copy { position: relative; max-width: min(760px, 56%); }
.home-hero .eyebrow { color: var(--teal); margin-bottom: 20px; }
.home-h1 {
  font-size: var(--home-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}
/* The one accent phrase: brand gradient where supported, cyan otherwise. */
.home-accent { display: block; color: var(--brand-cyan); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-accent, .home-step-num {
    background: var(--grad-brand-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.home-hero-sub {
  margin-top: 24px;
  max-width: 56ch;
  font-size: var(--home-lead);
  line-height: 1.6;
  color: var(--text-dark-sub);
}
.home-hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--home-line);
  font-size: 0.9375rem;
  color: var(--text-dark-sub);
}
.home-hero-trust li { display: inline-flex; align-items: center; gap: 10px; }
.home-hero-trust svg { flex-shrink: 0; color: var(--brand-cyan); }

/* ── 2. Trust strips (standards + stack marquees) ───────────── */
.home-trust {
  display: grid; gap: 14px;
  padding: clamp(26px, 3.2vw, 40px) 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
}
.home-trust-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 12px 28px;
  padding-inline: var(--gutter);
}
.home-trust-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-soft);
}
.home-marquee {
  overflow: hidden;
  padding: 4px 0;                       /* room for chip focus rings */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
/* Without js/home.js the chips simply wrap. */
.home-marquee-track { display: flex; flex-wrap: wrap; row-gap: 10px; }
.home-marquee-track > li { margin-right: 10px; }   /* margin, not gap: keeps the -50% loop seamless */
.home-marquee-track.is-looping {
  flex-wrap: nowrap;
  width: max-content;
  animation: home-marquee 55s linear infinite;
}
.home-marquee.is-reverse .home-marquee-track.is-looping { animation-direction: reverse; animation-duration: 65s; }
.home-marquee:hover .home-marquee-track,
.home-marquee:focus-within .home-marquee-track { animation-play-state: paused; }
@keyframes home-marquee { to { transform: translateX(-50%); } }
.home-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 600;
  white-space: nowrap;
  color: var(--navy);
  transition: border-color 0.2s, color 0.2s;
}
.home-chip svg { color: var(--blue); }
a.home-chip:hover { border-color: var(--blue); color: var(--blue); }
.home-chip.is-plain { font-weight: 500; color: var(--text-mid); background: var(--off-white); border-color: transparent; }

/* ── Icon tile (pain cards, AI list) ────────────────────────── */
.home-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--tint);
  color: var(--blue);
}

/* ── 3. Sound familiar? ─────────────────────────────────────── */
.home-pain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--home-gap); }
.home-card {
  padding: 28px 26px 30px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.home-card .home-icon { margin-bottom: 20px; }
.home-card h3 { font-size: 1.125rem; line-height: 1.35; margin-bottom: 10px; }
.home-card p { font-size: 0.9375rem; line-height: 1.6; color: var(--text-soft); }
.home-bridge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 1.0625rem;
  color: var(--text-mid);
}
.home-bridge strong { color: var(--navy); font-weight: 700; }

/* ── 4. What we do: expanding service columns ───────────────── */
/* All content is always visible. Above 1100px the column in use (first by
   default; js/home.js follows pointer and focus) widens and turns navy. */
.home-cols { display: flex; gap: var(--home-gap); align-items: stretch; }
.home-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition-property: flex-grow, background-color, border-color, box-shadow;
  transition-duration: 0.55s, 0.35s, 0.35s, 0.35s;
  transition-timing-function: var(--ease);
}
.home-col-media { display: block; height: 200px; overflow: hidden; background: var(--off-white); transition: height 0.55s var(--ease); }
.home-col-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.home-col-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 22px; }
.home-col .eyebrow { margin-bottom: 10px; }
.home-col h3 { font-size: 1.375rem; line-height: 1.25; margin-bottom: 10px; transition: color 0.35s; }
.home-col p { font-size: 0.9875rem; line-height: 1.6; color: var(--text-soft); transition: color 0.35s; }
.home-col-links { margin: 20px 0 8px; border-top: 1px solid var(--gray-100); }
.home-col-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.9375rem; font-weight: 500;
  color: var(--text);
  transition: color 0.2s, border-color 0.35s;
}
.home-col-link svg { color: var(--gray-400); transition: transform 0.2s var(--ease), color 0.2s; }
.home-col-link:hover { color: var(--blue); }
.home-col-link:hover svg { color: var(--blue); transform: translateX(3px); }
.home-col .home-link { margin-top: auto; }

@media (min-width: 1100.02px) {
  .home-cols { min-height: 620px; }
  .home-col.is-active { flex-grow: 1.7; background: var(--navy); border-color: var(--navy); box-shadow: var(--shadow-lg); }
  .home-col.is-active .home-col-media { height: 260px; }
  .home-col.is-active .home-col-media img { transform: scale(1.04); }
  .home-col.is-active h3 { color: var(--white); }
  .home-col.is-active p { color: var(--text-dark-sub); }
  .home-col.is-active .eyebrow { color: var(--teal); }
  .home-col.is-active .home-col-links,
  .home-col.is-active .home-col-link { border-color: var(--home-line); }
  .home-col.is-active .home-col-link { color: var(--white); }
  .home-col.is-active .home-col-link svg,
  .home-col.is-active .home-col-link:hover { color: var(--teal); }
  .home-col.is-active .home-link { color: var(--teal); }
  .home-col.is-active a:focus-visible { outline-color: var(--white); }
}

/* ── 5. Use AI with confidence ──────────────────────────────── */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.home-split .home-head { margin-bottom: 0; }
.home-ai-list { display: grid; gap: 12px; margin-top: 32px; }
.home-ai-item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px;
  padding: 20px 22px 14px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-md);
}
.home-ai-item h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.home-ai-item p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-soft); }
.home-ai-item .home-link { font-size: 0.9375rem; }
.home-media {
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--off-white);
  box-shadow: var(--shadow-lg);
}
.home-media img { width: 100%; height: auto; }

/* ── 6. How we work (navy band) ─────────────────────────────── */
.home-work {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.home-steps { display: grid; }
.home-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--home-line);
}
.home-step:last-child { border-bottom: 1px solid var(--home-line); }
.home-step-num {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  min-width: 2.1ch;              /* 01..04 line up in one column */
  color: var(--brand-cyan);
}
.home-step h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.home-step p { color: var(--text-dark-body); }
.home-work-figure { position: sticky; top: 110px; margin: 0; }
.home-work-figure .home-media { background: var(--navy-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.home-work-figure figcaption { margin-top: 14px; font-size: 0.875rem; color: var(--text-dark-muted); }
.home-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--home-gap);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--home-line);
}
.home-facts dt {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
}
.home-facts dd { margin-top: 8px; max-width: 30ch; color: var(--text-dark-sub); }

/* ── 7. Where we help: industry hover list ──────────────────── */
.home-ind {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.home-ind-list { display: flex; flex-direction: column; border-top: 1px solid var(--gray-100); }
.home-ind-list .tab-btn {
  display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; min-height: 76px;
  padding: 16px 14px 16px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gray-100);
  border-left: 3px solid transparent;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: left;
  color: var(--gray-400);            /* 5.3:1 on white: readable while unselected */
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.home-ind-num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  color: var(--gray-400);
}
.home-ind-list .tab-btn svg { width: 22px; height: 22px; color: var(--blue); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s, transform 0.2s var(--ease); }
.home-ind-list .tab-btn:hover { color: var(--navy); }
/* Selected: navy text, a 3px --blue bar (5.4:1 on white), a tint wash and
   the arrow, so the state never rests on colour alone. */
.home-ind-list .tab-btn[aria-selected="true"] {
  color: var(--navy);
  border-left-color: var(--blue);
  background: linear-gradient(90deg, var(--tint) 0%, rgba(238, 243, 253, 0) 85%);
}
.home-ind-list .tab-btn[aria-selected="true"] svg { opacity: 1; transform: none; }
.home-ind-list .tab-btn[aria-selected="true"] .home-ind-num { color: var(--blue); }
/* Without JS the buttons do nothing, so they hide and every panel shows. */
html:not(.js) .home-ind-list { display: none; }
.home-ind-more {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 22px 0 6px;
  font-size: 0.9375rem;
  color: var(--text-soft);
}
.home-ind-more span { width: 100%; font-weight: 600; color: var(--text-mid); }
.home-ind-more a { color: var(--text-mid); text-decoration: underline; text-decoration-color: var(--gray-200); text-underline-offset: 4px; min-height: 32px; display: inline-flex; align-items: center; }
.home-ind-more a:hover { color: var(--blue); text-decoration-color: currentColor; }
.home-panels { display: grid; gap: var(--home-gap); position: sticky; top: 110px; }
.home-panel {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.home-panel[hidden] { display: none; }
/* html.js is set in <head>, so inactive panels never flash (no CLS) before
   main.js wires the tabs. If main.js fails, html.js is removed on load and
   every panel shows. */
html.js .home-panel:not(.active) { display: none; }
.home-panel-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--off-white); }
.home-panel-media img { width: 100%; height: 100%; object-fit: cover; }
.home-panel-body { padding: clamp(22px, 2.6vw, 32px); }
.home-panel h3 { font-size: 1.375rem; line-height: 1.25; margin-bottom: 10px; }
.home-panel p { color: var(--text-soft); }
.home-checks { display: grid; gap: 10px; margin: 18px 0 8px; }
.home-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 0.9375rem; color: var(--text-mid); }
.home-checks svg { margin-top: 3px; color: var(--blue); }

/* ── 8. Recent work: filterable carousel (navy) ─────────────── */
.home-showcase-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 26px;   /* the head keeps its usual gap above; the bar groups with the cards below */
}
.home-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.home-filter {
  min-height: 44px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--home-line-strong);
  border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 600;
  color: var(--text-dark-sub);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.home-filter:hover { border-color: var(--white); color: var(--white); }
.home-filter[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--navy); }
/* Previous / next sit on the left and right edges of the case-study window,
   centred on the cards: inside the page margin on wide screens, over the card
   edges (on a solid disc) where the margin is narrower than the button. */
.home-carousel { position: relative; }
.home-carousel-btn {
  --btn: 48px;
  position: absolute; z-index: 2;
  top: calc(50% - 9px - var(--btn) / 2);   /* the track pads 10px above the cards, 28px below */
  display: grid; place-items: center;
  width: var(--btn); height: var(--btn);
  background: rgba(var(--navy-rgb), 0.92);
  border: 1px solid var(--home-line-strong);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  color: var(--white);
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}
.home-carousel-btn.is-prev { left: calc(-1 * var(--gutter) + max(8px, (var(--gutter) - var(--btn)) / 2)); }
.home-carousel-btn.is-next { right: calc(-1 * var(--gutter) + max(8px, (var(--gutter) - var(--btn)) / 2)); }
.home-carousel-btn:hover:not(:disabled) { background: var(--white); border-color: var(--white); color: var(--navy); }
.home-carousel-btn:disabled { opacity: 0.3; cursor: default; }
/* The controls need js/home.js; the row itself scrolls natively without it. */
html:not(.home-js) .home-showcase-bar,
html:not(.home-js) .home-carousel-btn { display: none; }
/* A one-row-per-part grid (image, eyebrow, title, figures) that every card
   shares through subgrid, so titles, dividers and figures line up across the
   cards at any width, however the text wraps. */
.home-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 29vw, 400px);
  grid-template-rows: repeat(4, auto);
  column-gap: var(--home-gap); row-gap: 0;
  margin-inline: calc(-1 * var(--gutter));
  padding: 10px var(--gutter) 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.home-track::-webkit-scrollbar { display: none; }
.home-track:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }
.home-proj {
  position: relative;
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  scroll-snap-align: start;
  transition-property: transform, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: var(--ease);
}
.home-proj[hidden] { display: none; }
.home-proj:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.36); }
.home-proj:focus-within { outline: 3px solid var(--white); outline-offset: 4px; }
.home-proj img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.home-proj-body { display: grid; grid-row: 2 / span 3; grid-template-rows: subgrid; row-gap: 10px; padding: 22px 24px 24px; }
.home-proj .eyebrow { margin: 0; color: var(--blue); }
.home-dark .home-proj h3 { font-size: 1.1875rem; line-height: 1.3; color: var(--navy); }
/* The title link covers the whole card, so each card is one tab stop. */
.home-proj h3 a::after { content: ""; position: absolute; inset: 0; }
.home-proj h3 a:focus-visible { outline: none; }
.home-proj p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-soft); }
.home-proj-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-content: start;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.home-proj-metrics dt { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }
.home-proj-metrics dd { margin-top: 4px; font-size: 0.8125rem; line-height: 1.4; color: var(--text-soft); }
.home-showcase-foot { display: flex; margin-top: 8px; }

/* ── 9. FAQ ─────────────────────────────────────────────────── */
.home-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.home-faq .home-head { position: sticky; top: 110px; margin-bottom: 0; }
.home-faq-list { border-top: 1px solid var(--gray-100); }

/* ── 10. Final CTA: the logo globe again ────────────────────── */
.home-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 10vw, 140px) var(--gutter);
  background: var(--grad-hero);
  color: var(--text-dark-sub);
}
.home-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.home-cta .eyebrow { color: var(--teal); }
.home-cta .home-h2 { max-width: 20ch; color: var(--white); }
.home-cta-sub { max-width: 56ch; margin-top: 18px; font-size: var(--home-lead); line-height: 1.6; }
.home-globe-cta { display: block; width: 100%; max-width: 380px; aspect-ratio: 1 / 1; margin-left: auto; }

/* ── Subtle page motion (js/home.js) ────────────────────────── */
/* --py is set on scroll for [data-parallax] elements. The individual
   `translate` / `scale` properties compose with any `transform` already in
   use (reveal, hover, the open service column), so nothing is overridden.
   Images get a little extra scale so the drift never shows an edge. */
[data-parallax] { translate: 0 var(--py, 0px); }
.home-col-media img[data-parallax],
.home-media img[data-parallax],
.home-panel-media img[data-parallax] { scale: 1.08; }
.home-col-media, .home-media, .home-panel-media { position: relative; }

/* ── Background images and looping clips ───────────────────── */
/* The hero and CTA background images sit under the logo globe. A navy veil
   from the left keeps the headline readable whatever the image does. */
.home-hero-bg, .home-cta-bg {
  position: absolute; inset: 0; z-index: -3;
  display: block;
  overflow: hidden;
}
.home-hero-bg img, .home-cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.home-hero-bg img[data-parallax] { scale: 1.08; }
.home-hero::before,
.home-cta::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--navy-rgb), 0.8) 0%, rgba(var(--navy-rgb), 0.45) 45%, rgba(var(--navy-rgb), 0) 72%);
}
/* Silent looping clips (videos/<name>.mp4)
   that behave like GIFs: no controls, no sound, decorative. js/home.js plays
   one only while it is on screen and never under reduced motion or the
   site-wide pause; the still underneath shows whenever it is not playing. */
.home-loop {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.home-loop.is-playing { opacity: 1; }
/* A background clip is a direct child of the hero or CTA, placed after the
   background <picture>. It stays on the background layer, under the veil,
   the globe and the text. */
.home-hero > .home-loop,
.home-cta > .home-loop { z-index: -3; object-position: 70% 50%; }
.home-hero > .home-loop[data-parallax] { scale: 1.08; }  /* moves exactly like the still under it */

/* ── Responsive (site breakpoints: 1100 / 900 / 640 / 480) ──── */
@media (max-width: 1100px) {
  .home-pain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero-copy { max-width: min(700px, 62%); }
}

@media (max-width: 900px) {
  /* As before: the globe sits behind the copy, faint, from here down. */
  .home-globe { width: 100%; opacity: 0.2; }
  .home-hero-copy { max-width: 640px; }
  .home-trust-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .home-split,
  .home-work,
  .home-faq,
  .home-ind,
  .home-cta-inner { grid-template-columns: minmax(0, 1fr); }
  .home-work-figure,
  .home-faq .home-head,
  .home-panels { position: static; }
  /* Stacked FAQ: same head-to-content gap as every other section. */
  .home-faq { row-gap: 0; }
  .home-faq .home-head { margin-bottom: clamp(36px, 4.5vw, 60px); }
  .home-work-figure { max-width: 640px; }
  .home-globe-cta { max-width: 220px; margin: 0; }

  /* Service columns: one per row, a wide image above the text (a side image
     would be a tall strip that crops the illustrations). Stacked, a column
     must size to its content: the desktop `flex: 1 1 0` plus overflow:hidden
     would collapse it to zero height. */
  .home-cols { flex-direction: column; }
  .home-col { flex: none; }
  .home-col-media { height: auto; aspect-ratio: 16 / 9; }

  /* Industry list becomes a scrolling row of chips above the panel. The
     7px padding with a matching negative margin gives focus rings room
     without moving the chips off the gutter edge. */
  .home-ind-list {
    flex-direction: row;
    gap: 8px;
    margin-inline: -7px;
    padding: 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    border-top: 0;
    scrollbar-width: none;
  }
  .home-ind-list::-webkit-scrollbar { display: none; }
  .home-ind-list .tab-btn {
    display: inline-flex; flex: 0 0 auto;
    width: auto; min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-pill);
    font-size: 1rem; font-weight: 600; letter-spacing: 0;
    white-space: nowrap;
    color: var(--text-mid);
    scroll-snap-align: start;
  }
  .home-ind-list .tab-btn .home-ind-num,
  .home-ind-list .tab-btn svg { display: none; }
  .home-ind-list .tab-btn[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
  .home-ind-side { display: contents; }
  .home-ind-list { order: 1; }
  .home-panels { order: 2; }
  .home-ind-more { order: 3; margin-top: 4px; }
  .home-ind-side > .home-link { order: 4; }
}

@media (max-width: 640px) {
  .home-hero { min-height: 0; }
  .home-globe { opacity: 0.16; }
  /* On a phone the copy covers the whole width: veil from the top instead. */
  .home-hero::before,
  .home-cta::before { background: linear-gradient(180deg, rgba(var(--navy-rgb), 0.82) 0%, rgba(var(--navy-rgb), 0.6) 60%, rgba(var(--navy-rgb), 0.35) 100%); }
  .home-actions .btn { flex: 1 1 100%; justify-content: center; }
  .home-hero-trust { flex-direction: column; gap: 10px; }
  .home-pain,
  .home-facts { grid-template-columns: minmax(0, 1fr); }
  .home-col-media { aspect-ratio: 3 / 2; }
  .home-step { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .home-track { grid-auto-columns: 82vw; }
  .home-carousel-btn { --btn: 44px; }
}

@media (max-width: 480px) {
  .home-card { padding: 24px 22px 26px; }
  .home-col-body { padding: 22px 22px 18px; }
  .home-ai-item { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ── Motion, forced colours, print ──────────────────────────── */
/* style.css already stops every animation under reduced motion and
   html.motion-paused; the marquees then fall back to wrapped rows. */
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { translate: none; }
  .home-loop { display: none; }
  .home-marquee { -webkit-mask-image: none; mask-image: none; }
  .home-marquee-track.is-looping { flex-wrap: wrap; width: auto; }
  .home-marquee [data-clone] { display: none; }
  .home-proj:hover { transform: none; }
}
html.motion-paused .home-marquee { -webkit-mask-image: none; mask-image: none; }
html.motion-paused .home-marquee-track.is-looping { flex-wrap: wrap; width: auto; }
html.motion-paused .home-marquee [data-clone] { display: none; }
html.motion-paused .home-proj:hover { transform: none; }
html.motion-paused [data-parallax] { translate: none; }
html.motion-paused .home-loop { opacity: 0; }

@media (forced-colors: active) {
  .home-accent, .home-step-num { background: none; color: CanvasText; }
  .home-ind-list .tab-btn[aria-selected="true"],
  .home-filter[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}

@media print {
  .home-hero, .home-dark, .home-cta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .home-hero { min-height: 0; padding-top: 48px; }
  html.js .home-panel:not(.active), .home-panel[hidden] { display: block !important; }
  .home-marquee [data-clone], .home-showcase-bar, .home-carousel-btn { display: none !important; }
  .home-marquee-track.is-looping { flex-wrap: wrap; width: auto; animation: none; }
  .home-track { display: flex; flex-wrap: wrap; gap: 16px; overflow: visible; }
  .home-proj { flex: 0 0 300px; }
}