/* ============================================================
   Atlas Pro — dark theme for everything below the hero.
   Loaded after home2.css (src/layouts/Base2.astro) and overrides it.

   The hero sets the language: near-black navy, thin hairline edges,
   brand-blue light, white type with 70% white for body copy. This file
   carries that through the rest of the page:
   - one theme: every section sits on the hero's ink (no light bands)
   - one accent: brand blue (lifted for text on dark); green only for
     small highlights, as in the hero (arrow button, pills, HQ marker)
   - one shape system: cards 20px, media 16px, interactive = pill
   ============================================================ */

:root {
  --ink-950: #010A24;             /* = --hero-bg */
  --ink-900: #031230;
  --ink-850: #061a42;
  --surface: rgba(140, 180, 255, 0.035);
  --surface-hover: rgba(140, 180, 255, 0.06);
  --hairline: rgba(160, 196, 255, 0.11);
  --hairline-hi: rgba(160, 196, 255, 0.22);
  --text-hi: #F2F6FF;
  --text-mid: rgba(226, 236, 255, 0.7);
  --text-lo: rgba(226, 236, 255, 0.5);
  --accent-text: #6CB8FF;         /* --blue, lifted for AA contrast on ink */
  --shell: min(1200px, 88vw);
  --r-card: 20px;
  --r-media: 16px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* faint dot grid — the globe's texture, reused on a few surfaces */
  --dots: radial-gradient(rgba(108, 184, 255, 0.16) 1px, transparent 1.4px) 0 0 / 18px 18px;
}

html, body { background: var(--ink-950); }
/* 100% (not 100vw) so insets are symmetric when a scrollbar takes up width */
.canvas.home2 { width: 100%; background: var(--ink-950); color: var(--text-mid); }

/* ---------- hero → page hand-off ---------- */
/* the globe's cropped bottom melts into the page instead of a hard edge */
.home-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 10, 36, 0) 0%, var(--ink-950) 100%);
}
/* scroll progress (0 → 1 over the hero's height) is written to --hero-p by
   the globe script; the copy lifts and fades as the globe rises past it */
.home-hero { --hero-p: 0; }
.home2 .home-hero-inner {
  opacity: calc(1 - var(--hero-p) * 1.6);
  transform: translate3d(0, calc(var(--hero-p) * -90px), 0);
  will-change: transform, opacity;
}
.hero-stars { transform: translate3d(0, calc(var(--hero-p) * 120px), 0); }

/* ---------- shared type ---------- */
/* two-part headings: lead-in dimmed, payoff in full white (hero-style) */
.home2 .h-section,
.home2 .who-left h2 { color: var(--text-lo); }
.home2 .h-section .dark,
.home2 .who-left h2 .dark { color: var(--text-hi); }
.home2 .txt-section,
.home2 .who-left p { color: var(--text-mid); }
.home2 .eyebrow,
.home2 .svc-eyebrow { color: var(--accent-text) !important; }

/* content column matches the hero nav width */
@media (min-width: 761px) {
  .flow-sec > .wrap { width: var(--shell); }
  .home2 .cta-card,
  .home2 .site-footer { width: var(--shell); }
}

/* ---------- 1. intro + "what we take off your plate" ----------
   The one light moment: a white panel inset 24px from the viewport, with the
   page's dark showing around it. It rises into the bottom of the hero, so on
   scroll the panel slides up over the sinking globe. */
.canvas.home2 > .sec-intro {
  position: relative;
  z-index: 2;
  width: auto !important;
  align-self: stretch;
  margin: -4vh 24px 0 !important;
  padding: clamp(80px, 11vh, 120px) 0 clamp(80px, 11vh, 112px);
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 -30px 80px rgba(20, 127, 212, 0.18);
}
.canvas.home2 > .sec-intro + .flow-sec { margin-top: 24px; }
.home2 .sec-intro .h-section { color: var(--blue); }
.home2 .sec-intro .h-section .dark { color: var(--navy); }
.home2 .sec-intro .txt-section { color: var(--ink-soft); }

/* four cards on one line */
.home2 .plate-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.home2 .plate-card {
  position: relative;
  min-height: 300px;
  padding: 28px;
  border: 1px solid rgba(0, 33, 104, 0.12);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: none;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out),
              transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.home2 .plate-card-title { color: var(--navy); max-width: 18ch; }
.home2 .plate-card-art img { width: 104px; transition: transform .6s var(--ease-out); }
.home2 .plate-card:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 127, 212, 0.35);
  box-shadow: 0 18px 40px rgba(0, 33, 104, 0.1);
}
.home2 .plate-card:hover .plate-card-art img { transform: scale(1.04); }

/* ---------- 2. BCBA quote band ----------
   Figma's treatment: a navy → brand-blue vertical gradient panel, inset 24px
   like the white panel above it (the two read as a pair), with the globe's dot
   texture spread evenly across it. The frame is just a 1px line, no fill.
   Pills glide slowly around the frame (Base2.astro); quote words rise in once. */
.canvas.home2 > .quote-circle-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: auto;
  align-self: stretch;
  margin: 24px 24px 0;
  border-radius: 28px;
  background: linear-gradient(180deg, #00214D 0%, #003A8C 70%, #004FB8 100%);
}
.home2 .quote-circle-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px) 0 0 / 22px 22px;
  /* even across the panel, easing off at the very top and bottom */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  pointer-events: none;
}
.home2 .qc-stage {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: none;
}
.home2 .qc-cite { color: rgba(255, 255, 255, 0.72); }
.home2 .qc-center { position: relative; z-index: 1; }
.home2 .qc-tag { z-index: 2; }
/* riding the border (desktop, motion allowed): the JS positions each pill */
.home2 .qc-stage.is-riding .qc-tag { animation: none; transform: translate(-50%, -50%); }
.home2 .qc-stage.is-riding .qc-tag:hover { transform: translate(-50%, -50%) scale(1.04); }
/* attribution fades up after the words (words themselves: .q-word in home2.css) */
.quote-circle-sec.q-in .q-word > span { transform: translateY(0); }
.motion-ready .quote-circle-sec .qc-cite {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s ease .7s, transform .7s var(--ease-out) .7s;
}
.quote-circle-sec.q-in .qc-cite { opacity: 1; transform: none; }

/* ---------- 3. cost cards ----------
   White inset panel (same treatment as the intro panel) with light-grey cards,
   all one colour. No overflow clipping here, so the cards' sticky stacking
   keeps working. */
.canvas.home2 > .cost-sec {
  position: relative;
  width: auto !important;
  align-self: stretch;
  margin: 24px 24px 0 !important;
  padding: clamp(80px, 11vh, 120px) 0 clamp(64px, 9vh, 96px);
  background: #EEF2F7;
  border-radius: 28px;
}
.home2 .cost-sec .h-section { color: var(--blue); }
.home2 .cost-sec .h-section .dark { color: var(--navy); }
@media (min-width: 761px) {
  .home2 .cost-sec .wrap > .cost-stack { margin-top: clamp(56px, 8vh, 88px); }
}
.home2 .stack-card,
.home2 .stack-card:nth-child(2n) {
  background: #fff;
  border: 0;
  box-shadow: none;
}
.home2 .stack-card:hover { box-shadow: none; }
/* receding veil (--cover 0 → 1, set by Base2.astro as the next card covers
   this one): an opaque layer in a slightly deeper grey fades in over the
   content, so the card behind reads as "pushed back" but never shows through */
.home2 .stack-card { --cover: 0; isolation: isolate; }
.home2 .stack-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: #E3E9F1;
  opacity: calc(var(--cover) * 0.85);
  pointer-events: none;
}
/* each card pins a little lower than the one before, so the tops of the
   cards underneath peek out as a stack instead of vanishing entirely */
@media (min-width: 761px) {
  .home2 .stack-card:nth-child(1) { top: calc(100 * var(--vh1)); }
  .home2 .stack-card:nth-child(2) { top: calc(100 * var(--vh1) + 16px); }
  .home2 .stack-card:nth-child(3) { top: calc(100 * var(--vh1) + 32px); }
  .home2 .stack-card:nth-child(4) { top: calc(100 * var(--vh1) + 48px); }
}
/* Layout: a rounded video inset 20px from the card's edges, always on the
   left; text on the right over a soft brand tint + the globe's dot texture. */
.home2 .stack-card { overflow: hidden; }
.home2 .sc-photo {
  width: 46%;
  padding: 20px;
}
.home2 .sc-photo video {
  border-radius: var(--r-media);
  /* natural-colour stock footage (Magnific ids in docs/video-credits.md) */
  filter: none;
}
.home2 .sc-body {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 5vw, 72px);
}
.home2 .sc-body::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(rgba(20, 127, 212, 0.22) 1px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 100% 100%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 100% 100%, #000, transparent 75%);
}
/* numbered badge above each title (1-4, CSS counter, no markup change) */
.home2 .cost-stack { counter-reset: cost; }
.home2 .stack-card { counter-increment: cost; }
.home2 .sc-h::before {
  content: counter(cost);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
.home2 .sc-p { max-width: 46ch; }
/* the markup's manual breaks were set for a wider column; let titles wrap naturally */
.home2 .sc-h br { display: none; }
.home2 .sc-h {
  color: var(--navy);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.15;
}
.home2 .sc-p { color: var(--ink-soft); }

/* "Enter Atlas Pro." statement */
/* CTA under the statement: the hero's navy pill + green arrow */
.home2 .cost-cta {
  position: relative;
  left: auto; top: auto;
  transform: none;
  align-self: center;
}
@media (min-width: 761px) {
  .home2 .flow-sec > .wrap > .cost-cta { margin-top: 36px; }
}
@media (max-width: 760px) {
  .home2 .flow-sec > .wrap > .cost-cta { position: relative !important; align-self: flex-start; margin-top: 8px; }
}
.home2 .enter-atlas { color: var(--navy); }
.home2 .enter-atlas strong { color: var(--blue); }
.enter-divider {
  background: linear-gradient(90deg, transparent 0%, var(--blue) 30%, var(--blue) 70%, transparent 100%);
  height: 1px;
  opacity: .7;
}

/* ---------- 4. services ---------- */
.home2 .white-wrap { background: transparent; }
/* header: one stacked block (title, then copy) instead of a split */
@media (min-width: 761px) {
  .home2 .svc-head {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
  }
  .home2 .svc-head-left,
  .home2 .svc-head-right { flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; }
  .home2 .svc-head-right { padding-top: 0; }
  .home2 .svc-head .h-section { max-width: 16ch; margin: 14px auto 0; text-align: center; }
  .home2 .svc-head .svc-para { max-width: 62ch; margin: 0 auto; text-align: center; }
  .home2 .svc-head .eyebrow { justify-content: center; text-align: center; }
  .home2 .flow-sec > .wrap > .svc-pin { margin-top: clamp(64px, 9vh, 96px); }
}
.home2 .svc-para { color: var(--text-mid); }

/* 7 services → bento: wide + narrow / three / narrow + wide */
.home2 .feature-grid { gap: 20px; }
.home2 .feature-card {
  position: relative;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out), background .4s var(--ease-out);
}
.home2 .feature-card:first-child { grid-column: span 2; }
.home2 .feature-card:last-child { grid-column: 2 / span 2; }
.home2 .feature-card:first-child,
.home2 .feature-card:last-child {
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(20, 127, 212, 0.16), transparent 65%),
    var(--surface);
}
.home2 .feature-card:first-child::before,
.home2 .feature-card:last-child::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dots);
  -webkit-mask-image: radial-gradient(60% 110% at 100% 0%, #000, transparent 75%);
  mask-image: radial-gradient(60% 110% at 100% 0%, #000, transparent 75%);
}
.home2 .feature-card:first-child .feature-desc,
.home2 .feature-card:last-child .feature-desc { max-width: 52ch; }
.home2 .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  border-color: var(--hairline-hi);
  background-color: var(--surface-hover);
}
.home2 .feature-title { color: var(--text-hi); }
.home2 .feature-desc { color: var(--text-mid); }
.home2 .feature-tags { margin-bottom: 24px; }
.home2 .feature-tag {
  background: rgba(20, 127, 212, 0.14);
  color: #8ccaff;
  border: 1px solid rgba(108, 184, 255, 0.18);
}
.home2 .feature-tag.green {
  background: rgba(123, 196, 87, 0.12);
  color: #a3dc86;
  border-color: rgba(123, 196, 87, 0.22);
}
.home2 .feature-tag.navy {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-mid);
  border-color: var(--hairline);
}

/* card colour mix — rows read: [blue-wide, white] [dark, green, dark] [white, dark-wide]
   so the grid alternates light and dark instead of being one dark block */
.home2 .feature-card:nth-child(1) {
  background: linear-gradient(135deg, #147FD4 0%, #004FB8 100%);
  border-color: transparent;
}
.home2 .feature-card:nth-child(1)::before { display: none; }
.home2 .feature-card:nth-child(1) .feature-desc { color: rgba(255, 255, 255, 0.82); }
.home2 .feature-card:nth-child(2),
.home2 .feature-card:nth-child(6) {
  background: #fff;
  border-color: transparent;
}
.home2 .feature-card:nth-child(4) {
  background: var(--green);
  border-color: transparent;
}
.home2 .feature-card:nth-child(2) .feature-title,
.home2 .feature-card:nth-child(6) .feature-title,
.home2 .feature-card:nth-child(4) .feature-title { color: var(--navy); }
.home2 .feature-card:nth-child(2) .feature-desc,
.home2 .feature-card:nth-child(6) .feature-desc { color: var(--ink-soft); }
.home2 .feature-card:nth-child(4) .feature-desc { color: rgba(0, 33, 104, 0.85); }
/* tags on the light / coloured cards */
.home2 .feature-card:nth-child(1) .feature-tag {
  background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.28);
}
.home2 .feature-card:nth-child(2) .feature-tag,
.home2 .feature-card:nth-child(6) .feature-tag {
  background: rgba(123, 196, 87, 0.16); color: var(--green-ink); border-color: rgba(123, 196, 87, 0.3);
}
.home2 .feature-card:nth-child(4) .feature-tag {
  background: rgba(255, 255, 255, 0.35); color: var(--navy); border-color: rgba(0, 33, 104, 0.12);
}
/* ---- bento card anatomy (Linear/Apple-style): icon + tag on top, copy
   anchored to the bottom, so every tile shares one baseline rhythm */
.home2 .feature-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
.home2 .feature-title { margin-top: auto; }
/* icon + category merged into one pill at the top of each card */
.home2 .feature-tags { margin-bottom: 40px; }
.home2 .feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  font-size: 14px;
}
.home2 .feature-tag svg { flex: none; transition: transform .5s var(--ease-out); }
.home2 .feature-card:hover .feature-tag svg { transform: rotate(-8deg); }
/* wide tiles: bigger title, copy kept to a comfortable measure */
.home2 .feature-card:nth-child(1) .feature-title,
.home2 .feature-card:nth-child(7) .feature-title { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.home2 .feature-card:nth-child(1) .feature-title,
.home2 .feature-card:nth-child(1) .feature-desc,
.home2 .feature-card:nth-child(7) .feature-title,
.home2 .feature-card:nth-child(7) .feature-desc { max-width: 62%; }
@media (max-width: 760px) {
  .home2 .feature-card { min-height: 0; }
  .home2 .feature-tags { margin-bottom: 28px; }
  .home2 .feature-card:nth-child(1) .feature-title,
  .home2 .feature-card:nth-child(1) .feature-desc,
  .home2 .feature-card:nth-child(7) .feature-title,
  .home2 .feature-card:nth-child(7) .feature-desc { max-width: 100%; }
}

/* no strokes on any card; the dark tiles get a slightly lifted navy fill
   instead so they still read against the page */
.home2 .feature-card,
.home2 .feature-card:hover { border: 0; padding: 33px; }
.home2 .feature-card:nth-child(3),
.home2 .feature-card:nth-child(5) { background: #081a42; }
.home2 .feature-card:nth-child(7) { background-color: #081a42; }
.home2 .feature-card:nth-child(3):hover,
.home2 .feature-card:nth-child(5):hover { background: #0b2150; }
.home2 .feature-card:nth-child(7):hover { background-color: #0b2150; }
@media (max-width: 760px) {
  .home2 .feature-card,
  .home2 .feature-card:hover { padding: 25px; }
}
/* coloured cards: no stroke at all (also on hover) */
.home2 .feature-card:nth-child(1),
.home2 .feature-card:nth-child(2),
.home2 .feature-card:nth-child(4),
.home2 .feature-card:nth-child(6),
.home2 .feature-card:nth-child(1):hover,
.home2 .feature-card:nth-child(2):hover,
.home2 .feature-card:nth-child(4):hover,
.home2 .feature-card:nth-child(6):hover { border: 0; padding: 33px; }
/* hover on light cards: keep their fill */
.home2 .feature-card:nth-child(1):hover { background: linear-gradient(135deg, #1a88dd 0%, #0056c4 100%); }
.home2 .feature-card:nth-child(2):hover,
.home2 .feature-card:nth-child(6):hover { background: #fff; border-color: transparent; }
.home2 .feature-card:nth-child(4):hover { background: #86cb63; border-color: transparent; }

/* ---------- 5 + 6. who we work with + stats: one white inset panel ---------- */
.canvas.home2 > .light-panel {
  position: relative;
  align-self: stretch;
  margin: var(--sec-gap) 24px 0;
  padding: clamp(80px, 11vh, 120px) 0 clamp(56px, 8vh, 88px);
  background: #fff;
  border-radius: 28px;
}
.home2 .light-panel > .flow-sec { width: 100%; margin: 0; }
.home2 .light-panel .who-sec { padding: 0; background: none; }
.home2 .light-panel .stats-sec { padding: 0; margin-top: clamp(64px, 9vh, 96px); background: none; }

@media (min-width: 761px) {
  .home2 .who-left { flex: 0 0 min(470px, 40%); width: auto; }
}
.home2 .who-left h2 { color: var(--blue); }
.home2 .who-left h2 .dark { color: var(--navy); }
.home2 .who-left p { color: var(--ink-soft); }
.home2 .who-card {
  background: #EEF2F7;
  border: 0;
  border-radius: var(--r-card);
  box-shadow: none;
}
.home2 .who-row h3 { color: var(--navy); }
.home2 .who-row p { color: var(--ink-soft); }
.home2 .who-divider { background: rgba(0, 33, 104, 0.12); height: 1px; opacity: 1; }
/* right column: even 48px padding, large line icons, clear rhythm */
@media (min-width: 761px) {
  .home2 .who-card { padding: 48px !important; }
}
.home2 .who-row { gap: 28px; padding: 0; align-items: flex-start; }
.home2 .who-ico {
  display: grid;
  place-items: center;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}
.home2 .who-ico img { width: 72px; height: 72px; }
.home2 .who-row > div:last-child { padding-top: 6px; }
.home2 .who-row h3 { margin: 0 0 12px; }
.home2 .who-row p { margin: 0; }
.home2 .who-divider { margin: 40px 0; }

/* stats: the Figma navy → brand-blue panel, set on the white.
   Display numerals, left-aligned columns, a green tick per stat and
   sentence-case labels. */
.home2 .stats-panel {
  isolation: isolate;
  padding: clamp(48px, 7vh, 72px) clamp(24px, 3vw, 48px);
  background:
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(135deg, #00214D 0%, #003A8C 60%, #004FB8 100%);
  border: 0;
  border-radius: var(--r-card);
}
.home2 .stats-panel::after { display: none; }
.home2 .stat {
  align-items: flex-start;
  text-align: left;
  padding: 0 clamp(20px, 2.4vw, 40px);
}
.home2 .stat + .stat::before {
  display: none;
}
.home2 .stat .num {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #fff;
  font-weight: 500;
  font-size: clamp(40px, 4.2vw, 64px);
  letter-spacing: -0.03em;
  margin-bottom: 0;
}
.home2 .stat .label {
  position: relative;
  margin-top: 22px;
  padding-top: 20px;
  max-width: 22ch;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
}
.home2 .stat .label::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 3px;
  border-radius: 3px;
  background: var(--green);
}

/* ---------- 7. steps (inside the white panel) ---------- */
.home2 .light-panel .steps-sec,
.home2 .light-panel .tm-sec { background: none; padding: 0; margin-top: clamp(96px, 13vh, 144px); }
@media (min-width: 761px) {
  .home2 .steps-head { flex: 0 0 min(460px, 38%); }
  .home2 .steps-list { flex: 1 1 auto; max-width: 720px; }
  .home2 .step-row-body p { max-width: 58ch; }
}
.home2 .light-panel .h-section { color: var(--blue); }
.home2 .light-panel .h-section .dark { color: var(--navy); }
.home2 .step-row { border-color: rgba(0, 33, 104, 0.12) !important; }
.home2 .steps-list,
.home2 .step-row { border-top-color: rgba(0, 33, 104, 0.12); border-bottom-color: rgba(0, 33, 104, 0.12); }
.home2 .step-num { color: var(--blue); }
.home2 .step-row-body h4 { color: var(--navy); }
.home2 .step-row-body p { color: var(--ink-soft); }
.home2 .step-phone { color: var(--blue); }
/* "Sounds good?" card: compact, fits its content, text + round call button */
.home2 .steps-head .get-started-pill {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  width: auto;
  max-width: 100%;
  padding: 16px 16px 16px 24px;
  border: 0;
  border-radius: 18px;
  background: #EEF2F7;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  margin-top: 48px !important;
}
.home2 .get-started-link {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.home2 .get-started-link:hover { color: var(--navy); }
.home2 .gs-phone {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  transition: transform .2s var(--ease-out), background .2s ease;
}
.home2 .gs-phone svg { width: 20px; height: 20px; }
.home2 .gs-phone:hover { transform: scale(1.06); background: var(--navy); filter: none; }

/* ---------- 8. testimonials (inside the white panel) ----------
   A horizontal track that runs off the panel's right edge (cards peek in),
   scrolled one card at a time by the < > arrows (Base2.astro). No drag,
   no hover state on the cards. */
.home2 .light-panel { overflow: hidden; }
.home2 .light-panel .tm-sec { margin-top: 100px; }
.home2 .tm-sec .h-section { margin-bottom: 0; max-width: 680px; text-wrap: balance; }
.home2 .tm-sec .wrap > .tm-slider { margin-top: clamp(56px, 8vh, 80px) !important; }
.home2 .tm-slider { overflow: visible; }
.home2 .tm-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: auto;
  user-select: text;
  touch-action: pan-x pan-y;
  transform: none !important;
  transition: none;
  /* bleed to the panel's right edge */
  margin-right: calc((100vw - 48px - var(--shell)) / -2);
  padding-right: calc((100vw - 48px - var(--shell)) / 2);
  scroll-padding-left: 0;
}
.home2 .tm-track::-webkit-scrollbar { display: none; }
.home2 .tm-card {
  flex: 0 0 min(400px, 80vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 32px;
  background: #EEF2F7;
  border: 0;
  border-radius: var(--r-card);
  box-shadow: none;
  cursor: auto;
  transition: none;
}
.home2 .tm-card:hover { background: #EEF2F7; transform: none; box-shadow: none; }
.home2 .tm-stars { display: flex; gap: 3px; color: #FFB400; }   /* classic review-star gold */
.home2 .tm-stars svg path { fill: currentColor; }
.home2 .tm-text { color: var(--navy); margin: 0; font-size: 16px; line-height: 1.65; }
/* person row pinned to the bottom so cards of different lengths line up */
.home2 .tm-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  min-height: 88px;              /* 20px pad + room for a 2-line credit, so dividers align across cards */
  padding-top: 20px;
  border-top: 1px solid rgba(0, 33, 104, 0.1);
}
.home2 .tm-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.home2 .tm-card:nth-child(3n+2) .tm-avatar { background: var(--green); color: var(--navy); }
.home2 .tm-card:nth-child(3n+3) .tm-avatar { background: var(--navy); }
.home2 .tm-who { min-width: 0; }
.home2 .tm-headline {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
}
.home2 .tm-author {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 33, 104, 0.55);
}
.home2 .tm-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.home2 .tm-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(0, 33, 104, 0.16);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.home2 .tm-arrow:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.home2 .tm-arrow:active:not(:disabled) { transform: scale(0.96); }
.home2 .tm-arrow:disabled { opacity: 0.35; cursor: default; }
.home2 .tm-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- 9 + 10. finale: final CTA + footer over the footer globe ----------
   The globe (HeroGlobe variant="footer") fills the finale and rises in from
   below as it scrolls into view; the CTA sits in the dark sky above its rim,
   the footer sits on the globe's dark body under a soft scrim. */
.canvas.home2 > .finale {
  position: relative;
  width: 100%;
  margin-top: var(--sec-gap);
  padding-bottom: 40px;
  isolation: isolate;
  overflow: hidden;
}
.home2 .finale > .hero-globe--footer { position: absolute; inset: 0; z-index: 0; }
.home2 .finale > .cta-sec,
.home2 .finale > .site-footer { position: relative; z-index: 1; left: auto; top: auto; margin-left: auto; margin-right: auto; }
.home2 .finale > .cta-sec .cta-card { left: auto; top: auto; }
.home2 .finale > .cta-sec { margin-top: 0; }
/* footer legibility over the globe's dots */
.home2 .finale::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 10, 36, 0) 0%, rgba(1, 10, 36, 0.8) 40%, rgba(1, 10, 36, 0.95) 100%);
}

/* CTA: no box, content straight on the sky */
.home2 .cta-card {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.home2 .cta-card::before { display: none; }
/* wider than the content column so the title sits in 3 roomy lines */
@media (min-width: 761px) {
  /* photo + copy as one group, centred on the page (body shrinks to its
     text, so the visible content is what gets centred, not empty column) */
  .home2 .finale .cta-card { width: min(1400px, 94vw) !important; justify-content: center; }
  .home2 .finale .cta-card-body { flex: 0 1 auto; padding: 0 0 0 clamp(16px, 2vw, 32px); }
  .home2 .finale .cta-card-h { white-space: nowrap; }
  /* the photo box has empty space left of the arch; cancel it so the arch's
     edge (not the box) is what centres against the title's right edge */
  .home2 .finale .cta-card-photo { margin-left: -53px; }
}
/* photo + arch dissolve at the bottom instead of cutting a hard edge over the globe */
.home2 .cta-card-photo {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.home2 .cta-card-photo,
.home2 .cta-card-body { position: relative; z-index: 1; }
.home2 .cta-card-arch { opacity: .55; }
.home2 .cta-card-h { color: var(--text-hi); font-size: var(--fs-display); line-height: var(--lh-display); }  /* same scale as every section title */
.home2 .cta-card-h-accent { color: var(--accent-text); }
.home2 .cta-card-p { color: var(--text-mid); }

/* footer: brand column | nav | newsletter, then a quiet legal row */
.home2 .site-footer {
  color: var(--text-mid);
  margin-top: clamp(200px, 28vh, 300px) !important;
  margin-bottom: 0 !important;
}
.home2 .footer-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.home2 .footer-brandcol { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.home2 .footer-brand { display: block; line-height: 0; }
.home2 .footer-brand img { width: 180px; height: auto; }
.home2 .footer-tagline {
  margin: 24px 0 28px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text-hi);
}
.home2 .footer-social { display: flex; gap: 12px; margin: 0; }
.home2 .footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: #fff;
  transition: background .2s ease;
}
.home2 .footer-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.home2 .footer-social svg { width: 20px; height: 20px; }
.home2 .footer-nav {
  display: grid;
  grid-auto-rows: min-content;
  gap: 14px;
  justify-self: center;
}
.home2 .footer-nav a { color: var(--text-mid); font-size: 16px; transition: color .2s ease; }
.home2 .footer-nav a:hover { color: #fff; }
.home2 .footer-news { margin: 0; width: 100%; max-width: 360px; justify-self: end; gap: 14px; }
.home2 .footer-news-label { text-align: left; font-size: 16px; color: var(--text-hi); font-weight: 500; }
.home2 .footer-news-field input {
  height: 52px;
  padding: 0 60px 0 20px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--text-hi);
}
.home2 .footer-news-field input::placeholder { color: var(--text-lo); }
.home2 .footer-news-field input:focus { outline: none; border-color: var(--accent-text); }
.home2 .footer-news-field button {
  right: 6px;
  width: 40px;
  height: 40px;
  background: var(--blue);
  color: #fff;
}
.home2 .footer-news-field button:hover { background: #fff; color: var(--navy); }
.home2 .footer-news-field button svg { width: 18px; height: 18px; transform: none; }
.home2 .footer-divider { margin: 48px 0 24px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); background: none; }
.home2 .site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--text-lo);
}
.home2 .footer-byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-lo);
  transition: color .2s ease;
}
.home2 .footer-byline:hover { color: #fff; }
.home2 .footer-mascot { width: 18px; height: auto; }

/* ---------- mobile (≤760px) ----------
   The legacy mobile rules in home2.css target markup that no longer exists and
   leave section headings/copy absolutely positioned, so sections overlapped.
   This is the phone layout for everything below the hero: one column, 20px-ish
   gutters (the canvas's 6vw padding), content left-aligned. */
@media (max-width: 760px) {
  .canvas.home2 { gap: 0; padding-bottom: 6vh; }
  .canvas.home2 > .flow-sec,
  .canvas.home2 > .white-wrap { margin-top: 88px; }

  /* every section: a simple left-aligned column */
  .home2 .flow-sec > .wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    text-align: left;
  }
  .home2 .flow-sec > .wrap > * { margin: 0; }
  .home2 .h-section,
  .home2 .txt-section,
  .home2 .eyebrow,
  .home2 .plate-row,
  .home2 .cost-stack,
  .home2 .svc-pin,
  .home2 .enter-atlas,
  .home2 .enter-divider,
  .home2 .who-left,
  .home2 .who-card,
  .home2 .stats-panel,
  .home2 .steps-head,
  .home2 .steps-list,
  .home2 .tm-slider,
  .home2 .get-started-pill,
  .home2 .cta-card {
    position: relative !important;
    left: auto !important; right: auto !important; top: auto !important;
    transform: none;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    text-align: left;
  }
  .home2 .plate-row,
  .home2 .cost-stack,
  .home2 .svc-pin,
  .home2 .feature-grid,
  .home2 .tm-slider { margin-top: 12px !important; }

  /* 1 · white panel + plate cards */
  /* cancel the canvas's 6vw side padding so the panel sits 12px from the edges */
  .canvas.home2 > .sec-intro {
    width: auto !important;
    max-width: none !important;
    margin: 24px calc(12px - 6vw) 0 !important;
    padding: 56px 20px;
    border-radius: 22px;
  }
  .canvas.home2 > .sec-intro > .wrap { padding: 0; }
  .home2 .plate-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home2 .plate-card-title { font-size: 16px; overflow-wrap: anywhere; }
  .home2 .feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .home2 .feature-card:first-child,
  .home2 .feature-card:last-child { grid-column: auto; }
  .home2 .plate-card { min-height: 0; padding: 18px; gap: 24px; }
  .home2 .plate-card-art img { width: 64px; }

  /* 2 · quote band: full-bleed, frame + pills fit the phone */
  .canvas.home2 > .quote-circle-sec {
    width: auto !important; max-width: none !important;
    align-self: stretch;
    margin: 24px calc(12px - 6vw) 0 !important;
    padding: 40px 0;
    border-radius: 22px;
    position: relative !important;   /* contain the dot layer (legacy rule sets static) */
  }
  /* pills sit in a row here even if the page was loaded at desktop width */
  .home2 .qc-stage.is-riding .qc-tag { position: static; transform: none; }
  .home2 .qc-stage {
    width: auto; margin: 0 6vw; padding: 48px 20px; height: auto; border-radius: 22px;
    flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px;
  }
  .home2 .qc-center { max-width: 100%; flex-basis: 100%; order: -1; margin-bottom: 20px; }

  /* 3 · cost cards: photo on top, text below, no sticky deck */
  .home2 .stack-card {
    position: relative; top: auto;
    flex-direction: column;
    height: auto !important;
    padding: 12px;
    margin-bottom: 14px;
    gap: 0;
    transform: none !important;
  }
  .home2 .sc-photo { width: 100% !important; height: 46vw !important; padding: 0; }
  .home2 .stack-card { padding: 0 !important; }
  .home2 .sc-photo { padding: 12px 12px 0 !important; }
  .home2 .sc-body { padding: 24px 20px 28px; }
  .home2 .sc-h::before { margin-bottom: 18px; width: 38px; height: 38px; font-size: 15px; }
  .home2 .sc-photo video { border-radius: 12px; }
  .home2 .sc-h { font-size: 24px; }
  .home2 .cost-sec .wrap > .cost-stack { margin-top: 28px !important; }
  .canvas.home2 > .cost-sec {
    max-width: none !important;
    position: relative !important;
    margin: 24px calc(12px - 6vw) 0 !important;
    padding: 56px 20px 48px;
    border-radius: 22px;
  }
  .home2 .sc-body { padding: 22px 12px 14px; }
  .home2 .enter-atlas { font-size: 20px; line-height: 1.45; margin-top: 16px !important; }

  /* 4 · services */
  .home2 .svc-head { display: flex; flex-direction: column; gap: 14px; }
  .home2 .svc-head .h-section { margin-top: 10px; }
  .home2 .feature-card { padding: 24px; }

  /* 5 · who we work with */
  .home2 .who-wrap { flex-direction: column; gap: 24px; }
  .home2 .who-left { padding-top: 0; }
  .home2 .who-left p { font-size: 16px; }
  .home2 .who-card { padding: 24px; background: #EEF2F7; }
  .canvas.home2 > .light-panel {
    width: auto !important; max-width: none !important;
    position: relative !important;
    margin: 88px calc(12px - 6vw) 0 !important;
    padding: 56px 20px 40px;
    border-radius: 22px;
  }
  .home2 .light-panel .stats-sec { margin-top: 48px; }
  .home2 .light-panel .steps-sec,
  .home2 .light-panel .tm-sec { margin-top: 72px; }
  .home2 .who-row { display: flex; gap: 16px; align-items: flex-start; }
  .home2 .who-ico { flex-basis: 56px; width: 56px; height: 56px; }
  .home2 .who-ico img { width: 56px; height: 56px; }
  .home2 .who-row { gap: 16px; flex-direction: column; }
  .home2 .who-divider { margin: 28px 0; }

  /* 6 · stats: 2 × 2 */
  .home2 .stats-panel {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 28px 12px; padding: 32px 16px;
  }
  .home2 .stat .num { font-size: 40px; }
  .home2 .stat .label { font-size: 13px; margin-top: 14px; padding-top: 14px; }
  .home2 .stat + .stat::before { display: none; }
  .home2 .stat { padding: 0 8px; }

  /* 7 · steps */
  .home2 .steps-wrap { flex-direction: column; gap: 28px; }
  .home2 .steps-head .get-started-pill { display: flex; justify-content: space-between; width: 100% !important; margin-top: 20px; padding: 14px 14px 14px 20px; text-align: left; border-radius: 16px; }
  .home2 .step-row-body p { max-width: 100%; }
  .home2 .step-row { padding: 22px 0; gap: 16px; }

  /* 8 · testimonials: one card at a time */
  .home2 .tm-card { flex: 0 0 82% !important; padding: 24px; }
  .home2 .tm-text { font-size: 15px; }
  .home2 .tm-track { margin-right: -20px; padding-right: 20px; }
  .home2 .light-panel .tm-sec { margin-top: 72px; }

  /* 9 · CTA card */
  .home2 .cta-card { width: 100% !important; }
  .home2 .cta-card-body { padding: 8px 24px 8px; }

  .home-hero::after { height: 10vh; }

  .canvas.home2 > .finale {
    position: relative !important;
    width: 100vw !important; max-width: none !important;
    align-self: center;
    margin: 88px 0 0 !important;
    padding: 0 6vw 32px;
  }
  .home2 .finale > .site-footer { margin-top: 72px !important; width: 100% !important; }
  .home2 .finale > .cta-sec { width: 100%; }
  .home2 .site-footer-bottom { font-size: 13px; }
  .home2 .footer-main { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .home2 .footer-brandcol { grid-column: 1 / -1; }
  .home2 .footer-nav { justify-self: start; }
  .home2 .footer-news { grid-column: 1 / -1; justify-self: stretch; max-width: none; }
  .home2 .site-footer-bottom { flex-direction: column; align-items: flex-start; }
  .home2 .finale::after { height: 60%; }

  /* the fixed nav lives inside the hero; without this the hero's stacking
     context (z-index 1) traps it under every later section */
  .home2 .home-hero { z-index: auto !important; }
  .home2 .home-hero .nav { z-index: 100 !important; }

  /* fixed top bar on phones: dark glass to match the page */
  .nav { background: rgba(1, 10, 36, 0.78) !important; border-bottom: 1px solid var(--hairline); }
}

@media (max-width: 480px) {
  .home2 .plate-row { grid-template-columns: minmax(0, 1fr); }
  .home2 .plate-card { flex-direction: row; align-items: center; justify-content: space-between; }
  .home2 .plate-card-art { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home2 .home-hero-inner,
  .hero-stars { transform: none; opacity: 1; }
}