/* Home. Base styles = static layout (reduced motion, no WebGL, Save-Data, no JS).
   .stage--3d (set by an inline script before first paint) = sticky canvas + scroll story. */

/* ---------- Stage ---------- */
.stage { position: relative; background: var(--deep); isolation: isolate; }
.stage__sticky { position: absolute; inset: 0 0 auto 0; height: 100vh; height: 100svh; pointer-events: none; z-index: 0; }
/* Shared stage (pillar and service pages build on it): the scene sits on the right. */
.stage__viz { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; }
.stage__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 600ms var(--ease);
  /* Fade the square's edges so the poster melts into the navy stage. */
  -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
}
/* Home: the 3D world fills the stage; on wide screens the camera frames its subject right of centre.
   The canvas is transparent, so the corporate backdrop (brand navy, a soft Sky glow and the diamond
   lattice) shows behind the floating board. */
.hstage { background: var(--navy); }
.hstage .stage__viz { left: 0; width: auto; background: radial-gradient(ellipse 60% 55% at 68% 42%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 70%), var(--navy); }
/* Home's lattice fills the whole stage (no top and bottom fade) and is a touch stronger; the mouse
   light comes from the shared .lattice rule in layout.css. */
.hstage .stage__viz::before {
  --lat-base: rgba(0, 0, 0, 0.1);
  -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle var(--lr, 0px) at var(--lx, -999px) var(--ly, -999px), rgba(0, 0, 0, 0.6), var(--lat-base) 100%);
  mask-image: linear-gradient(#000, #000), radial-gradient(circle var(--lr, 0px) at var(--lx, -999px) var(--ly, -999px), rgba(0, 0, 0, 0.6), var(--lat-base) 100%);
}
.hstage .stage__poster { object-fit: cover; object-position: 66% center; -webkit-mask-image: none; mask-image: none; }
.story__poster { -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); }
.stage__poster.is-active { opacity: 1; }
.stage__poster:not([data-poster="0"]) { display: none; }
.stage__viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms var(--ease); }
.stage__viz.is-live canvas { opacity: 1; }
.stage__viz.is-live .stage__poster { opacity: 0; }
.stage__content { position: relative; z-index: 1; }

@media (max-width: 899.98px) {
  .stage__viz { width: 100%; opacity: 0.45; }
}
@media (min-width: 900px) {
  /* Shared stage: fade the canvas's left edge into the navy, so its glow never shows a seam. */
  .stage__viz canvas { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
  /* Home: no edge fade; a soft shade on the left keeps the hero text and story cards readable. */
  .hstage .stage__viz canvas { -webkit-mask-image: none; mask-image: none; }
  .hstage .stage__viz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--navy) 85%, transparent) 0, color-mix(in srgb, var(--navy) 45%, transparent) 30%, transparent 52%); pointer-events: none; }
}

/* Hero */
.home-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding-top: var(--header-h); }
.home-hero__inner { align-self: center; padding-block: var(--sp-7); }
.home-hero__inner > * { max-width: 560px; }
@media (min-width: 900px) { .home-hero__inner .lead { max-width: 44ch; } }
.home-hero .display { margin-top: var(--sp-4); }
.home-hero .lead { margin-top: var(--sp-5); color: var(--navy-text-muted); }
.home-hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); padding-bottom: var(--sp-6); }
.trust { display: flex; align-items: center; gap: var(--sp-4); max-width: 560px; font-size: var(--fs-small); color: var(--navy-text-muted); }
.trust strong { color: var(--white); display: block; }
.trust__num { display: flex; align-items: flex-start; gap: 4px; flex: none; font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--white); letter-spacing: -0.02em; }
.trust__num .spark--dot { width: 9px; height: 9px; }
.scroll-cue { display: none; flex-direction: column; align-items: center; gap: var(--sp-2); color: var(--navy-text-muted); text-decoration: none; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-overline); text-transform: uppercase; }
.scroll-cue i { position: relative; width: 2px; height: 44px; background: var(--navy-line); overflow: hidden; border-radius: 2px; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--sky); animation: cue 1.8s var(--ease-in-out) infinite; }
@keyframes cue { to { top: 100%; } }
@media (min-width: 900px) { .scroll-cue { display: flex; } }

/* Story (static layout): text card beside its poster. */
.story { position: relative; }
.story__panel { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.story__panel--finale { display: none; }
.stage--3d .story__panel--finale { display: block; min-height: 70vh; min-height: var(--story-finale-h, 70svh); padding: 0; }
.story__panel .container { display: grid; gap: var(--sp-6); align-items: center; }
.story__card { display: grid; gap: var(--sp-4); max-width: 480px; }
.story__card h2 { font-size: var(--fs-h2); }
.story__card h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); letter-spacing: -0.02em; line-height: 1.05; color: var(--white); }
.story__card p:not(.eyebrow) { color: var(--navy-text-muted); }
.story__card .diamond-list { color: var(--white); font-weight: 700; }
.story__poster { width: 100%; max-width: 520px; justify-self: center; border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  .story__panel .container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.story-dots { display: none; }

/* ---------- 3D layout ---------- */
.stage--3d .stage__sticky { position: sticky; top: 0; }
.stage--3d .stage__content { margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.stage--3d .stage__content a, .stage--3d .stage__content button, .stage--3d .story__card { pointer-events: auto; }
.stage--3d .stage__poster:not([data-poster="0"]) { display: block; }
.stage--3d .story__poster { display: none; }
/* Story speed (Settings › Home hero): taller panels = more scrolling per stage. "normal" is the original design. */
.hstage { --story-panel-h: 92svh; --story-finale-h: 70svh; --story-card-t: 500ms; }
.hstage[data-pace="slow"] { --story-panel-h: 125svh; --story-finale-h: 95svh; --story-card-t: 750ms; }
.hstage[data-pace="slower"] { --story-panel-h: 160svh; --story-finale-h: 120svh; --story-card-t: 950ms; }
.stage--3d .story__panel { min-height: 92vh; min-height: var(--story-panel-h); display: flex; align-items: center; padding-block: var(--sp-7); }
.stage--3d .story__panel .container { display: block; }
.stage--3d .story__card {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius-lg);
  background: var(--scrim); border: 1px solid var(--navy-line);
  opacity: 0.4; transform: translateY(12px);
  transition: opacity var(--story-card-t, 500ms) var(--ease), transform var(--story-card-t, 500ms) var(--ease);
}
.stage--3d .story__panel.is-active .story__card { opacity: 1; transform: none; }
@media (max-width: 899.98px) {
  .stage--3d .story__panel { align-items: flex-end; }
  .stage--3d .stage__viz { opacity: 0.9; transition: opacity 600ms var(--ease); }
  .stage--3d:not(.is-story) .stage__viz { opacity: 0.45; }
}

.stage--3d .story-dots {
  display: grid; gap: 14px; list-style: none; margin: 0; padding: 0;
  position: absolute; right: var(--margin); top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none;
}
.stage--3d.is-story .story-dots { opacity: 1; pointer-events: auto; }
.story-dots button {
  position: relative; display: block; width: 14px; height: 14px; padding: 0; border: 0; background: transparent;
}
.story-dots button::before {
  content: ""; position: absolute; inset: 3px; transform: rotate(45deg);
  background: var(--navy-line); transition: background-color var(--dur) var(--ease), inset var(--dur) var(--ease);
}
.story-dots button.is-active::before { background: var(--sky); inset: 0; }
.story-dots button:hover::before { background: var(--white); }

/* "Skip intro" (feature story_skip): only while the 3D story runs; hidden once the story is over (home.js). */
.story-skip { display: none; }
.stage--3d .story-skip {
  position: fixed; z-index: 50;   /* above the story cards; below the header, WhatsApp button and cookie banner */
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-capsule);
  border: 1.5px solid var(--sky); background: color-mix(in srgb, var(--navy) 70%, transparent); color: var(--white);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; text-decoration: none;
  pointer-events: auto; transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease), bottom var(--dur) var(--ease), visibility 0s;
}
/* Corner (Settings › Home hero › "Skip intro" button position). */
.stage--3d .story-skip--top-right, .stage--3d .story-skip--top-left { top: calc(var(--header-h) + 16px); }
.stage--3d .story-skip--bottom-right, .stage--3d .story-skip--bottom-left { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.stage--3d .story-skip--top-right, .stage--3d .story-skip--bottom-right { right: var(--margin); }
.stage--3d .story-skip--top-left, .stage--3d .story-skip--bottom-left { left: var(--margin); }
/* Stay clear of the floating WhatsApp button (bottom left) … */
.stage--3d .story-skip--bottom-left.story-skip--wa { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
/* Top left: the hero text starts a little lower, so the button never sits on its first line. */
.stage--3d[data-skip-pos="top-left"] .home-hero { padding-top: calc(var(--header-h) + 64px); }
/* Hero screen: bottom right lifts over the Scroll cue (that side is only 3D). Bottom left would sit on the
   hero text, so it appears once the visitor starts scrolling into the story. */
.stage--3d:not(.is-story) .story-skip--bottom-right { bottom: 128px; }
.stage--3d:not(.is-story) .story-skip--bottom-left { opacity: 0; visibility: hidden; pointer-events: none; }
.stage--3d .story-skip:hover { background: var(--sky); color: var(--navy); }
.stage--3d .story-skip:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.stage--3d .story-skip.is-done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease), visibility 0s var(--dur); }
/* Phones: the story cards fill the bottom, so every position shows at the top of its side. */
@media (max-width: 899.98px) {
  .stage--3d .story-skip, .stage--3d:not(.is-story) .story-skip, .stage--3d .story-skip.story-skip--wa { top: calc(var(--header-h) + 12px); bottom: auto; padding: 7px 13px; }
  .stage--3d[data-skip-pos="bottom-left"] .home-hero { padding-top: calc(var(--header-h) + 56px); }
  .stage--3d:not(.is-story) .story-skip--bottom-left { opacity: 1; visibility: visible; pointer-events: auto; }   /* at the top on phones */
  .stage--3d[data-skip-pos="top-left"] .home-hero { padding-top: calc(var(--header-h) + 56px); }
}

/* ---------- Pillars note ---------- */
.pillars-note { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-7); max-width: 760px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.45; color: var(--blue); }
.pillars-note .diamonds { flex: none; }

/* ---------- What we build ---------- */
.build-grid { display: grid; gap: 0 var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.build-grid li { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5) 0; border-top: 2px solid var(--navy); }
.build-grid strong { font-family: var(--font-display); font-size: 1.0625rem; color: var(--navy); }
.build-grid span { font-size: var(--fs-small); color: var(--text-muted); }

/* ---------- How we work: a line that draws as you scroll ---------- */
.path { position: relative; }
.path__track { position: absolute; left: 20px; right: 20px; top: 19px; height: 2px; background: var(--line); display: none; }
.path__fill { position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(var(--p, 1)); }
.path .step::after { display: none; }
.path .step::before { z-index: 1; }
@media (min-width: 900px) {
  .path__track { display: block; }
  .path__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Industries scroller ---------- */
.industries__controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-4); }
@media (min-width: 960px) { .industries__controls { justify-content: flex-end; gap: var(--sp-6); } }
.scroller-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--sky); background: transparent; color: var(--white);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.scroller-btn:hover { background: var(--sky); color: var(--navy); }
.scroller-btn:disabled { opacity: 0.35; pointer-events: none; }
.scroller {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margin); scrollbar-width: thin; scrollbar-color: var(--sky) transparent;
  padding-bottom: var(--sp-4);
}
.scroller:focus-visible { outline-offset: -3px; }
.scroller__track { display: flex; gap: var(--gutter); padding-inline: var(--margin); width: max-content; }
.ind-card {
  position: relative; scroll-snap-align: start; width: clamp(260px, 26vw, 340px); min-height: 260px;
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-lg); border: 1px solid var(--navy-line); background: var(--navy-raised);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ind-card:hover, .ind-card:focus-within { transform: translateY(-4px); box-shadow: -10px 10px 0 0 var(--sky); border-color: var(--sky); }
.ind-card__num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small); color: var(--sky); }
.ind-card h3 { font-size: 1.375rem; color: var(--white); }
.ind-card p { color: var(--navy-text-muted); font-size: var(--fs-small); }
.ind-card .link-arrow { margin-top: auto; }
.ind-card .stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Why ---------- */
.stats--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--compact .stat__value { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); }
.why-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-bottom: var(--sp-6); }
.why-grid li { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6) var(--sp-5); border-radius: var(--radius); background: var(--mist); }
.why-grid__num { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: var(--fs-small); }
.why-grid h3 { font-size: 1.1875rem; }
.why-grid p { color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- Founding partners ---------- */
.founding {
  display: grid; gap: var(--sp-7); align-items: center; padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  border-radius: var(--radius-lg); background: var(--white); box-shadow: -14px 14px 0 0 var(--sky);
}
.founding__perks { display: grid; gap: var(--sp-4); }
.founding__perks li { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-capsule); background: var(--cloud); font-weight: 700; color: var(--navy); }
.founding__perks .icon { color: var(--blue); }
@media (min-width: 960px) { .founding { grid-template-columns: 1.4fr 1fr; } }

/* ---------- Capability concepts ---------- */
.concepts { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.concept { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); border-radius: var(--radius); border: 1px solid var(--line); }
.concept .pill { align-self: flex-start; }
.concept h3 { font-size: 1.25rem; }
.concept p { color: var(--text-muted); font-size: var(--fs-small); }
/* ---------- Phones: shape in the top half, story card as a sheet below it ---------- */
@media (max-width: 899.98px) {
  .stage--3d.is-story .stage__viz { top: var(--header-h-solid); bottom: 48%; }
  .stage--3d .story-dots, .stage--3d.is-story .story-dots { display: none; }
  .stage--3d .story__card { background: var(--navy); }
}

.concept__pillars { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-xs) !important; font-weight: 700; color: var(--blue) !important; }