/* Self-hosted DM Sans and Stack Sans Headline. These faces were served from
   fonts.googleapis.com until 2026-08-18; hosting them here removes two DNS +
   TLS handshakes that sat on the critical path ahead of the preloaded hero
   photo, and keeps the page free of third-party requests.

   Rules below are Google's own css2 output with the gstatic URLs rewritten to
   local files — same unicode-ranges, same font-display, same per-weight faces.
   Only the latin and latin-ext subsets are shipped: the page is EN + PT-BR.
   Google serves one variable file per subset, so the four weights of each
   family share a file and cost one request each.

   To refresh, re-fetch the css2 URL with a desktop-Chrome User-Agent (older
   agents get woff/ttf), download the four .woff2 into assets/fonts/, and
   rewrite the src URLs. */

/* latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/stack-sans-headline-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/stack-sans-headline-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/stack-sans-headline-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/stack-sans-headline-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/stack-sans-headline-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/stack-sans-headline-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/stack-sans-headline-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/stack-sans-headline-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --night: #091b43;
  --night-raised: #0c255c;
  --night-soft: #113477;
  --blue: #326ff7;
  /* --blue is a fill: at 0.74-0.76rem on any of the page's near-white grounds it
     lands at 3.9-4.4:1, under AA. --blue-ink is the same brand blue taken down to
     a legible weight (>=4.9:1 everywhere it is used) and is the only blue allowed
     to carry text on light. It was already in the file twice, unnamed, as the
     button label and the focus ring. */
  --blue-ink: #1f5fe1;
  --blue-bright: #5894ff;
  --blue-pale: #e8f1ff;
  --cyan: #94d8ff;
  --ink: #101828;
  --muted: #536179;
  --line: #dfe5ef;
  --paper: #fbfdff;
  --white: #ffffff;
  --workspace: #ffffff;
  --workspace-line: #e4e9f2;
  --ws-rail: #f8fafd;
  --ws-text: #0f172a;
  --ws-muted: #64748b;
  --ws-faint: #94a3b8;
  --ws-blue: #2563eb;
  --max: 1180px;
  --radius: 9px;
  --shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
  --focus-ring: var(--blue-ink);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The header is fixed, so anchored sections need to clear it. */
[id] { scroll-margin-top: 88px; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.hero, .contact-section, .site-footer, .site-header:not(.header-on-light) { --focus-ring: #a8caff; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", "Helvetica Neue", sans-serif;
  line-height: 1.5;
  /* Load-bearing, do not remove: this turns off hinting and glyph grid-fitting.
     Without it Blink snaps stems to the pixel grid and the wordmark, the h1, and
     every heading pick up ~17% more ink — visibly heavier at the tight negative
     tracking those use. */
  text-rendering: geometricPrecision;
}

/* Lucide icons are inlined into index.html, so this carries the presentation
   attributes its runtime used to stamp on each <svg>. Single class = specificity
   0,1,0, which every per-context `.lucide` rule below still overrides. */
.lucide {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button, input, textarea { font: inherit; letter-spacing: 0; }
a { color: inherit; }

.page-width {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding-right: 28px;
  padding-left: 28px;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 100;
  transform: translateY(-160%);
  border-radius: 5px;
  background: var(--white);
  padding: 9px 12px;
  color: var(--night);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(219, 234, 254, 0.2);
  background: rgba(7, 26, 73, 0.42);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.site-nav {
  display: flex;
  width: min(100%, var(--max));
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  padding-right: 28px;
  padding-left: 28px;
  color: var(--white);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
  font-family: "Stack Sans Headline", "DM Sans", sans-serif;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
}

.wordmark img { width: 27px; height: 27px; filter: invert(1); object-fit: contain; }

.nav-links { display: flex; gap: 28px; margin-right: 10px; color: #d8e6ff; font-size: 0.9rem; font-weight: 600; }
.nav-links a, .nav-cta { text-decoration: none; }
.nav-links a:hover { color: var(--white); }
.nav-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-drawer, .nav-drawer-inner { display: contents; }
.nav-toggle { display: none; }
.language-switch { display: inline-flex; align-items: center; border: 1px solid rgba(191, 219, 254, 0.42); border-radius: 5px; padding: 2px; background: rgba(6, 23, 66, 0.18); }
.language-switch a { min-width: 30px; border-radius: 3px; padding: 5px 6px; color: #caddff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-align: center; text-decoration: none; }
.language-switch a[aria-current="true"] { background: var(--white); color: #0b245b; }

.nav-cta {
  border: 1px solid rgba(219, 234, 254, 0.58);
  border-radius: 5px;
  padding: 8px 12px;
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 700;
}

.nav-cta:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.12); color: var(--white); }

.site-header.header-on-light {
  border-color: rgba(16, 24, 40, 0.1);
  background: rgba(251, 253, 255, 0.76);
  box-shadow: 0 9px 28px rgba(23, 52, 95, 0.08);
}

.site-header.header-on-light .site-nav,
.site-header.header-on-light .wordmark { color: var(--ink); }
.site-header.header-on-light .wordmark img { filter: none; }
.site-header.header-on-light .nav-links { color: #475569; }
.site-header.header-on-light .nav-links a:hover { color: var(--blue-ink); }
.site-header.header-on-light .language-switch { border-color: rgba(15, 23, 42, 0.14); background: rgba(255, 255, 255, 0.62); }
.site-header.header-on-light .language-switch a { color: #64748b; }
.site-header.header-on-light .language-switch a[aria-current="true"] { background: var(--ink); color: var(--white); }
.site-header.header-on-light .nav-cta { border-color: rgba(16, 24, 40, 0.45); color: var(--ink); }
.site-header.header-on-light .nav-cta:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }

.hero {
  position: relative;
  min-height: max(840px, calc(100svh - 74px));
  overflow: hidden;
  /* The photograph is the LCP element. Two declarations: the first is the JPEG for
     anything without image-set(), the second lets the browser pick AVIF (40 KB) or
     WebP (71 KB) over the 470 KB JPEG. Regenerate derivatives with:
       avifenc -q 50 -s 4 --min 0 --max 63 <src>.jpg <src>.avif
       cwebp -q 78 -m 6 <src>.jpg -o <src>.webp */
  background-image:
    linear-gradient(90deg, rgba(7, 26, 73, 0.94) 0%, rgba(18, 71, 196, 0.76) 52%, rgba(65, 134, 255, 0.34) 100%),
    linear-gradient(180deg, rgba(7, 19, 55, 0.08) 0%, rgba(7, 19, 55, 0.46) 100%),
    url("assets/seth-wind-turbine-unsplash.jpg");
  background-image:
    linear-gradient(90deg, rgba(7, 26, 73, 0.94) 0%, rgba(18, 71, 196, 0.76) 52%, rgba(65, 134, 255, 0.34) 100%),
    linear-gradient(180deg, rgba(7, 19, 55, 0.08) 0%, rgba(7, 19, 55, 0.46) 100%),
    image-set(
      url("assets/seth-wind-turbine-unsplash.avif") type("image/avif"),
      url("assets/seth-wind-turbine-unsplash.webp") type("image/webp"),
      url("assets/seth-wind-turbine-unsplash.jpg") type("image/jpeg")
    );
  background-position: center, center, center 49%;
  background-size: cover;
  color: var(--white);
}

.hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75), transparent 74%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: inherit;
  flex-direction: column;
  justify-content: center;
  padding-top: 112px;
  padding-bottom: 112px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-content > h1,
  .hero-content > .hero-lede,
  .hero-content > .hero-actions {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    filter: blur(14px);
    animation-name: hero-reveal;
    animation-duration: 1600ms;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-fill-mode: forwards;
  }

  .hero-content > h1 {
    filter: blur(8px);
    animation-duration: 1400ms;
    animation-delay: 160ms;
  }

  .hero-content > .hero-lede { animation-delay: 720ms; }
  .hero-content > .hero-actions { animation-delay: 920ms; }
}

@keyframes hero-reveal {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* Same reveal, triggered on scroll. Staggered per element with --reveal-delay. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] .reveal-item {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    filter: blur(10px);
    transition:
      opacity 780ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
      transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
      filter 780ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
  }

  [data-reveal].is-revealed .reveal-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: "DM Sans", "Helvetica Neue", sans-serif; letter-spacing: 0; }

/* text-wrap: balance evens the lines instead of leaving a single word stranded.
   Three h2s were breaking to a one-word second line ("product.", "you.", "work."). */
h1 { max-width: 820px; margin-bottom: 25px; color: var(--white); font-size: clamp(2.625rem, 5.2vw, 4.5rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
h2 { max-width: 730px; margin-bottom: 20px; font-size: clamp(1.875rem, 3.35vw, 3rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; }
/* 1.04 is a display leading. It was inherited by every h3/h4 too, and the ones
   that wrap ("Clearer maintenance decisions") were set far too tight. */
h3, h4 { line-height: 1.28; }
h3 { margin-bottom: 0; font-size: 1.1rem; }

.hero-lede { max-width: 720px; margin-bottom: 0; color: #d7e7ff; font-size: 1.2rem; font-weight: 400; line-height: 1.55; white-space: pre-line; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 17px;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

/* Lift on pointers only. On touch, :hover latches after the tap and the button
   stays displaced until something else is pressed. */
@media (hover: hover) {
  .button:hover { transform: translateY(-2px); }
}

.button-primary { background: var(--white); color: var(--blue-ink); }
.button-primary:hover { background: var(--blue-pale); }
.button-quiet { border-color: rgba(219, 234, 254, 0.45); color: var(--white); }
.button-quiet:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); }
.hero-bottom-rule { position: absolute; right: 0; bottom: 0; left: 0; height: 8px; background: linear-gradient(90deg, #1f5fe1, #4d89ff 50%, #94d8ff); }

.reach-section { position: relative; overflow: hidden; padding: 106px 0; background: #f7faff; color: var(--ink); }
.reach-section::before { position: absolute; inset: 0; background: radial-gradient(circle at 86% 42%, rgba(55, 127, 255, 0.12), transparent 29%); content: ""; pointer-events: none; }
.reach-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(500px, 1.1fr); gap: 56px; align-items: center; }
.reach-copy { max-width: 515px; }.reach-copy h2 { color: var(--ink); }
.reach-notes { display: grid; gap: 0; max-width: 395px; margin-top: 40px; border-top: 1px solid #d8e2f0; }.reach-notes p { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0; border-bottom: 1px solid #d8e2f0; padding: 14px 0; }.reach-notes b { color: var(--ink); font-size: 0.93rem; }.reach-notes span { color: #52709c; font-size: 0.78rem; }

.region-map { position: relative; aspect-ratio: 1.026; }.region-map::before { position: absolute; top: 36%; left: 34%; width: 76%; height: 68%; border-radius: 50%; background: radial-gradient(closest-side, rgba(50, 111, 247, 0.16), rgba(50, 111, 247, 0.05) 55%, transparent 78%); content: ""; pointer-events: none; }.map-figure { position: absolute; top: 0; left: 0; width: auto; height: 100%; }
.map-pin { position: absolute; z-index: 2; width: 12px; height: 12px; border: 2px solid var(--white); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(16, 24, 40, 0.1), 0 6px 16px rgba(16, 24, 40, 0.3); transform: translate(-50%, -50%); }.pin-north { top: 33.4%; left: 43.2%; }.pin-south { top: 73.4%; left: 74.1%; background: var(--blue); box-shadow: 0 0 0 5px rgba(50, 111, 247, 0.18), 0 6px 18px rgba(50, 111, 247, 0.5); }
.map-lead { position: absolute; z-index: 1; right: 19%; height: 1px; background: linear-gradient(90deg, rgba(16, 24, 40, 0.12), rgba(16, 24, 40, 0.5)); }.lead-north { top: 33.4%; left: 43.2%; }.lead-south { top: 73.4%; left: 74.1%; }
.map-label { position: absolute; z-index: 2; display: grid; gap: 2px; right: 1%; width: 17%; color: var(--ink); }.map-label b { font-size: 0.82rem; }.map-label span { color: var(--muted); font-size: 0.7rem; }.label-north { top: calc(33.4% - 18px); }.label-south { top: calc(73.4% - 18px); }

/* Slow halo breathing on the two market pins. */
@media (prefers-reduced-motion: no-preference) {
  .map-pin::after { position: absolute; inset: -7px; border: 1px solid rgba(16, 24, 40, 0.3); border-radius: 50%; animation: pin-halo 3.6s ease-out infinite; content: ""; }
  .pin-south::after { border-color: rgba(50, 111, 247, 0.6); }
  .pin-north::after { animation-delay: 1.8s; }
  @keyframes pin-halo { 0% { opacity: 0.7; transform: scale(0.55); } 70%, 100% { opacity: 0; transform: scale(2.1); } }
}

/* Device */
.phone {
  --bezel: 10px;
  --frame-radius: 47px;
  position: relative;
  padding: var(--bezel);
  border-radius: var(--frame-radius);
  background: linear-gradient(158deg, #454f66 0%, #10151f 38%, #0c1017 62%, #333c50 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 4px rgba(0, 0, 0, 0.55),
    0 2px 5px rgba(3, 10, 26, 0.5),
    0 26px 50px -14px rgba(3, 10, 26, 0.62),
    0 60px 110px -30px rgba(3, 10, 26, 0.7);
}

.phone-island { position: absolute; top: calc(var(--bezel) + 9px); left: 50%; z-index: 3; width: 90px; height: 25px; transform: translateX(-50%); border-radius: 99px; background: #04070d; }

.phone-screen {
  position: relative;
  display: flex;
  width: 336px;
  height: 716px;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--frame-radius) - var(--bezel) + 1px);
  background: #ffffff;
  color: #0f172a;
  line-height: 1.4;
}

.phone-home { position: absolute; bottom: 8px; left: 50%; z-index: 5; width: 112px; height: 4px; transform: translateX(-50%); border-radius: 99px; background: #0f172a; opacity: 0.26; }

.phone-status { display: flex; height: 45px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 21px 0 27px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.005em; }
.phone-signal { width: 40px; height: 11px; fill: currentColor; }

.app-bar { display: grid; height: 43px; flex: 0 0 auto; grid-template-columns: 20px minmax(0, 1fr) 20px; align-items: center; border-bottom: 1px solid #eaeef5; padding: 0 13px; text-align: center; }
.app-bar b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.app-bar .lucide { width: 18px; height: 18px; color: #2563eb; stroke-width: 2.2; }
.app-bar .lucide:last-child { width: 16px; height: 16px; color: #94a3b8; }

.app-alarm { display: grid; flex: 0 0 auto; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid #f0e6d4; background: #fff9ef; padding: 10px 14px; }
.app-alarm-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16); }
.app-alarm b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; }
.app-alarm small { display: block; margin-top: 2px; color: #8a7454; font-size: 10.5px; }

.app-body { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #f5f7fb; padding: 13px 12px 0; }
.app-body.is-deck { display: flex; flex-direction: column; padding-bottom: 0; }
.app-body.is-deck::after { display: none; }
.app-body::after { position: absolute; right: 0; bottom: 0; left: 0; height: 40px; background: linear-gradient(rgba(245, 247, 251, 0), #f5f7fb 84%); content: ""; }

/* One cause and its fix are one object. The deck swipes; it never splits them. */
.cause-deck { display: flex; height: 100%; margin-right: -12px; gap: 10px; }
.cause-card {
  display: flex;
  overflow: hidden;
  width: 284px;
  flex: 0 0 284px;
  flex-direction: column;
  border: 1px solid #dde5f2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 24px -12px rgba(15, 23, 42, 0.22);
}
.cause-card.is-next { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }

.cause-head { display: grid; flex: 0 0 auto; grid-template-columns: 21px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 14px 12px; }
.cause-rank { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 6px; background: #2563eb; color: var(--white); font-size: 10.5px; font-weight: 700; }
.cause-rank.is-quiet { border: 1px solid #dbe2ee; background: #ffffff; color: #64748b; }
.cause-head b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.26; }

.cause-evidence { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #e6eefc; background: #f4f8ff; padding: 9px 14px; }
.cause-evidence span { display: flex; align-items: center; gap: 5px; }
.cause-evidence .lucide { width: 12px; height: 12px; color: #2563eb; stroke-width: 2.4; }
.cause-evidence b { color: #1d4ed8; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cause-evidence small { color: #7f93b5; font-size: 10px; white-space: nowrap; }

.cause-steps { display: flex; flex: 1; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cause-steps li { display: grid; flex: 1; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: center; border-top: 1px solid #eef2f9; padding: 9px 14px; color: #334155; font-size: 12px; line-height: 1.35; }
.cause-steps i { color: #a4b1c6; font-size: 10.5px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.cause-steps .is-safety { background: #fff9ef; color: #1f2937; }
.cause-steps .is-safety i { color: #c2801a; }
.cause-steps em { border-radius: 3px; background: #f6dfb6; padding: 1px 4px; color: #8a5306; font-size: 8.5px; font-style: normal; font-weight: 700; letter-spacing: 0.06em; }

.cause-parts { flex: 0 0 auto; border-top: 1px solid #eaeef5; background: #fafbfe; padding: 11px 14px 12px; }
.cause-parts p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.cause-parts p:last-child { margin-bottom: 0; }
.cause-parts p b { color: #0f172a; font-size: 12px; font-weight: 600; }
.cause-parts p small { color: #7b8798; font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cause-parts-head { margin-bottom: 8px; color: #64748b; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.cause-dots { display: flex; flex: 0 0 auto; justify-content: center; padding: 11px 0 12px; gap: 5px; }
.cause-dots i { width: 5px; height: 5px; border-radius: 99px; background: #cbd5e6; }
.cause-dots i.is-on { width: 15px; background: #2563eb; }


.app-actions { position: relative; z-index: 1; display: grid; flex: 0 0 auto; border-top: 1px solid #eaeef5; background: #ffffff; padding: 9px 12px 22px; }
.app-btn { display: grid; height: 39px; place-items: center; border-radius: 10px; background: #2563eb; color: var(--white); font-size: 12.5px; font-weight: 600; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.32), 0 8px 16px -8px rgba(37, 99, 235, 0.6); }

/* Operations dashboard — light surface, cropped like a live screen. */
.workspace {
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-rows: 53px minmax(0, 1fr);
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: var(--workspace);
  color: var(--ws-text);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 18px 34px -14px rgba(16, 24, 40, 0.12),
    0 58px 100px -38px rgba(16, 24, 40, 0.2);
}

.workspace-topbar { display: flex; grid-column: 1 / -1; align-items: center; gap: 14px; border-bottom: 1px solid var(--workspace-line); border-radius: 13px 13px 0 0; background: var(--white); padding: 0 16px; }
.workspace-brand { display: flex; min-width: 178px; align-items: center; gap: 7px; color: var(--ws-text); font-family: "Stack Sans Headline", "DM Sans", sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.02em; }
.workspace-brand img { width: 16px; height: 16px; filter: none; object-fit: contain; }
.workspace-portfolio { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e1e7f1; border-radius: 6px; background: var(--white); padding: 5px 9px; color: #334155; font-size: 0.72rem; font-weight: 600; }
.workspace-portfolio .lucide { width: 12px; height: 12px; color: var(--ws-faint); stroke-width: 2; }
.workspace-search { display: inline-flex; max-width: 320px; flex: 1; align-items: center; gap: 8px; border: 1px solid #e6ebf3; border-radius: 7px; background: #f7f9fc; padding: 6px 7px 6px 10px; color: var(--ws-faint); font-size: 0.72rem; }
.workspace-search .lucide { width: 13px; height: 13px; flex: 0 0 auto; stroke-width: 2.2; }
.workspace-search b { margin-left: auto; border: 1px solid #e2e8f2; border-radius: 4px; background: var(--white); padding: 1px 5px; color: #8593a8; font-size: 0.62rem; font-weight: 600; }
.workspace-tools { display: inline-flex; margin-left: auto; align-items: center; gap: 13px; }
.workspace-tools .lucide { width: 16px; height: 16px; color: #8593a8; stroke-width: 1.9; }
.workspace-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(140deg, #9ec6fd, #2563eb); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.07); }

.workspace-nav { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--workspace-line); border-radius: 0 0 0 13px; background: var(--ws-rail); padding: 14px 10px; color: #475569; font-size: 0.775rem; }
.nav-label { margin: 2px 9px 9px; color: var(--ws-faint); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 9px; border-radius: 7px; padding: 7px 9px; font-weight: 500; }
.nav-item .lucide { width: 15px; height: 15px; flex: 0 0 auto; color: #93a1b5; stroke-width: 1.9; }
.nav-item b { margin-left: auto; color: var(--ws-faint); font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.nav-item b.is-live { border-radius: 20px; background: #fdeaea; padding: 1px 6px; color: #b91c1c; }
.nav-item.active { background: var(--white); color: #0f172a; font-weight: 600; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.07); }
.nav-item.active .lucide { color: var(--ws-blue); }
.workspace-nav-foot { margin-top: auto; border-top: 1px solid #e6ebf3; padding: 13px 9px 0; color: #334155; font-size: 0.72rem; font-weight: 600; }
.workspace-nav-foot small { display: block; margin-top: 2px; color: var(--ws-faint); font-size: 0.67rem; font-weight: 500; }

.workspace-main { position: relative; min-width: 0; max-height: 706px; overflow: hidden; border-radius: 0 0 13px; background: var(--white); padding: 22px 22px 0; }
.workspace-main::after { position: absolute; right: 0; bottom: 0; left: 0; height: 58px; background: linear-gradient(rgba(255, 255, 255, 0), var(--white) 84%); content: ""; pointer-events: none; }

.workspace-heading { position: relative; z-index: 3; display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.workspace-heading h3 { color: var(--ws-text); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; }
.workspace-heading > div > p { margin: 5px 0 0; color: var(--ws-muted); font-size: 0.75rem; }

.workspace-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.date-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e1e7f1; border-radius: 7px; background: var(--white); padding: 6px 9px; color: #334155; font-size: 0.72rem; font-weight: 600; }
.date-chip .lucide { width: 12px; height: 12px; color: var(--ws-faint); stroke-width: 2; }

.signal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.signal-card { border: 1px solid var(--workspace-line); border-radius: 10px; background: var(--white); padding: 14px 15px; }
.signal-card p { margin-bottom: 10px; color: var(--ws-muted); font-size: 0.72rem; font-weight: 500; }
.signal-card strong { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; color: var(--ws-text); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.022em; line-height: 1.05; }
.signal-card span { color: var(--ws-faint); font-size: 0.69rem; }
.delta { display: inline-flex; align-items: center; gap: 1px; border-radius: 20px; padding: 2px 7px 2px 5px; font-size: 0.64rem; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta .lucide { width: 11px; height: 11px; stroke-width: 2.8; }
.delta.is-bad { background: #fdeaea; color: #bb3a2c; }
.delta.is-good { background: #e6f6ee; color: #12784f; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: 12px; margin-top: 12px; }
.pattern-panel, .table-panel { display: flex; flex-direction: column; border: 1px solid var(--workspace-line); border-radius: 10px; background: var(--white); padding: 15px 16px 16px; }
.panel-title { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.panel-title h4 { color: var(--ws-text); font-size: 0.86rem; font-weight: 600; letter-spacing: -0.008em; }
.panel-title p { margin: 4px 0 0; color: var(--ws-faint); font-size: 0.68rem; }
.panel-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ws-blue); font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.panel-link .lucide { width: 12px; height: 12px; stroke-width: 2.2; }

.pattern-chart { margin-top: 15px; }
.chart-row { position: relative; display: grid; grid-template-columns: 134px minmax(0, 1fr) 26px; align-items: center; gap: 10px; margin: 0 -7px; border-radius: 6px; padding: 7px; color: #475569; font-size: 0.7rem; }
.chart-row i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #eef1f7; }
.chart-row b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4287f5, #2563eb); }
.chart-row strong { color: var(--ws-text); font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.chart-row.is-hover { background: #f4f7fd; }
/* Clear of the value column (26px + the 10px grid gap + the row's own 7px pad).
   At right: 18px the tip sat on top of the number in the row above and clipped
   it, which reads as a rendering bug rather than as a live hover. */
.chart-tip { position: absolute; top: -27px; right: 50px; z-index: 2; border-radius: 6px; background: #0f172a; padding: 4px 8px; color: var(--white); font-size: 0.63rem; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 16px -6px rgba(15, 23, 42, 0.45); }
.chart-tip::after { position: absolute; bottom: -3px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: #0f172a; content: ""; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 3px 0 0; padding: 0; list-style: none; }
.chart-legend li { display: inline-flex; align-items: center; gap: 5px; color: var(--ws-muted); font-size: 0.65rem; font-weight: 500; }
.chart-legend i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 2px; }
.legend-confirmed { background: #2563eb; }
.legend-gap { background: #cbd5e1; }

.pareto-chart { display: block; width: 100%; height: auto; margin: 14px 0 0; overflow: visible; }
.pareto-grid line { stroke: #f1f4f9; stroke-width: 1; }
.pareto-confirmed rect { fill: #2563eb; }
.pareto-gap rect { fill: #cbd5e1; }
.pareto-baseline { stroke: #e2e8f0; stroke-width: 1; }
.pareto-threshold { stroke: #bcc6d4; stroke-dasharray: 3 4; stroke-width: 1; }
.pareto-annotation { fill: #8593a8; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; }
.pareto-value text { fill: #0f172a; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pareto-tick text { fill: #93a1b5; font-size: 10px; font-variant-numeric: tabular-nums; }

.table-panel { margin-top: 12px; }
.ws-table { width: 100%; margin-top: 13px; border-collapse: collapse; font-size: 0.72rem; }
.ws-table th { border-bottom: 1px solid var(--workspace-line); padding: 0 10px 9px; color: var(--ws-faint); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em; text-align: left; }
.ws-table td { border-bottom: 1px solid #f1f4f9; padding: 9px 10px; color: #475569; }
.ws-table th:first-child, .ws-table td:first-child { padding-left: 0; }
.ws-table th:last-child, .ws-table td:last-child { padding-right: 0; }
.ws-table th:nth-child(4), .ws-table .num { text-align: right; }
.ws-table b { color: var(--ws-text); font-weight: 600; }
.mono { border-radius: 4px; background: #f2f5fa; padding: 2px 6px; color: #334155; font-size: 0.67rem; font-weight: 600; letter-spacing: 0.02em; }
.ws-table .num { color: var(--ws-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-table .is-empty { color: #a8b3c4; font-style: italic; }
.ws-table tr.is-hover td { background: #f4f7fd; }
.pill { display: inline-block; border-radius: 20px; padding: 2px 8px; font-size: 0.63rem; font-style: normal; font-weight: 600; }
.pill.is-done { background: #e6f6ee; color: #12784f; }
.pill.is-active { background: #fdf0d9; color: #96600d; }
.pill.is-open { background: #f1f4f9; color: #64748b; }


.data-section { padding: 114px 0; overflow: hidden; background: #f2f6fd; }.data-heading { margin-bottom: 56px; }
.data-foundation-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.7fr); gap: 66px; align-items: center; }

/* Fleet knowledge layer — the same three steps, light on light like the dashboard. */
.data-board {
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
  background: var(--workspace);
  color: var(--ws-text);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 18px 34px -14px rgba(16, 24, 40, 0.12),
    0 58px 100px -38px rgba(16, 24, 40, 0.2);
}
.flow-head { display: flex; height: 46px; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--workspace-line); background: var(--ws-rail); padding: 0 18px; }
.flow-head > span { display: inline-flex; align-items: center; gap: 8px; color: var(--ws-text); font-size: 0.78rem; font-weight: 600; }
.flow-head .lucide { width: 15px; height: 15px; color: var(--ws-blue); stroke-width: 2; }
.flow-head small { color: var(--ws-faint); font-size: 0.68rem; }

.flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow-steps article { position: relative; padding: 26px 22px 28px; }
.flow-steps article + article { border-left: 1px solid var(--workspace-line); }
.flow-steps .is-outcome { background: linear-gradient(180deg, #f6faff, rgba(246, 250, 255, 0)); }
.flow-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--workspace-line); border-radius: 9px; background: var(--ws-rail); color: #8496af; }
.flow-icon .lucide { width: 17px; height: 17px; stroke-width: 1.9; }
.is-outcome .flow-icon { border-color: #c3d9fd; background: #eaf2ff; color: var(--ws-blue); }
.flow-steps b { display: block; margin-top: 22px; color: var(--ws-text); font-size: 0.84rem; font-weight: 600; letter-spacing: -0.008em; }
.flow-steps small { display: block; margin-top: 5px; color: var(--ws-muted); font-size: 0.72rem; line-height: 1.45; }
.flow-arrow { position: absolute; top: 42px; left: -11px; z-index: 1; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--workspace-line); border-radius: 50%; background: var(--white); color: #94a3b8; }
.flow-arrow .lucide { width: 12px; height: 12px; stroke-width: 2.4; }
.is-outcome .flow-arrow { border-color: #c3d9fd; color: var(--ws-blue); }

.flow-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--workspace-line); background: var(--ws-rail); padding: 13px 18px; color: var(--ws-muted); font-size: 0.72rem; }
.flow-foot > span { display: inline-flex; align-items: center; gap: 9px; }
.flow-foot b { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }
.flow-foot .lucide { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ws-faint); }

.data-principles { border-top: 1px solid #ccd8e9; }.data-principles article { display: grid; grid-template-columns: 35px 1fr; gap: 13px; border-bottom: 1px solid #ccd8e9; padding: 20px 0; }.data-principles > article > span { color: var(--blue-ink); font-size: 0.74rem; font-weight: 700; }.data-principles h3 { margin-bottom: 5px; font-size: 1rem; }.data-principles p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.field-section { padding: 120px 0; background: var(--white); color: var(--ink); }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr); gap: 92px; align-items: center; }.field-copy h2 { color: var(--ink); }.evidence-list { display: grid; gap: 0; margin-top: 39px; border-top: 1px solid #dce4ef; }.evidence-list > div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; border-bottom: 1px solid #dce4ef; padding: 15px 0; }.evidence-list b { color: var(--blue-ink); font-size: 0.76rem; }.evidence-list span { color: var(--muted); font-size: 0.91rem; }.evidence-list strong { display: block; margin-bottom: 2px; color: var(--ink); }

.field-product { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.field-product .field-callout { margin-top: 62px; }
.field-callout { display: flex; width: min(100%, 356px); align-items: flex-start; gap: 11px; margin-top: 22px; border-top: 1px solid #dce4ef; padding: 13px 0 0; color: var(--muted); font-size: 0.8rem; }
.field-callout p { margin: 0; }
.field-callout strong { color: var(--ink); }

.operations-section { padding: 112px 0 106px; background: linear-gradient(180deg, #f7f9fd 0%, #edf1f8 100%); }.operations-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 58px; border-top: 1px solid #dbe3ed; }.operations-list article { min-height: 208px; border-right: 1px solid #dbe3ed; padding: 22px 23px 0 0; }.operations-list article + article { padding-left: 22px; }.operations-list article:last-child { border-right: 0; }.operations-list span { display: block; margin-bottom: 46px; color: var(--blue-ink); font-size: 0.75rem; font-weight: 700; }.operations-list h3 { margin-bottom: 10px; font-size: 1rem; }.operations-list p { color: var(--muted); font-size: 0.91rem; }

.trust-section { padding: 94px 0; background: var(--white); }.trust-grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.8fr); gap: 95px; }.trust-points { border-top: 1px solid var(--line); }.trust-points p { margin: 0; border-bottom: 1px solid var(--line); padding: 17px 0; color: var(--muted); font-size: 0.95rem; }.trust-points b { display: block; margin-bottom: 3px; color: var(--ink); }

.team-section { padding: 112px 0; background: linear-gradient(180deg, #f7faff 0%, #fff 75%); }.team-heading { margin-bottom: 54px; }.founder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.founder-card { position: relative; min-height: 274px; overflow: hidden; border: 1px solid #dce6f4; border-radius: 10px; background: rgba(255, 255, 255, 0.83); padding: 29px; box-shadow: 0 15px 42px rgba(28, 69, 137, 0.07); }.founder-card::after { position: absolute; right: -62px; bottom: -79px; width: 230px; height: 230px; border: 1px solid rgba(44, 111, 247, 0.13); border-radius: 50%; box-shadow: 0 0 0 28px rgba(44, 111, 247, 0.03), 0 0 0 56px rgba(44, 111, 247, 0.025); content: ""; pointer-events: none; }.founder-mark { position: relative; display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 35px; border: 1px solid #bad0ff; border-radius: 50%; background: #eef5ff; color: #1953bf; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; }.founder-mark i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #2d6af0; box-shadow: 0 0 0 3px #e6f0ff; }.founder-mark i:nth-of-type(1) { top: -3px; left: 50%; transform: translateX(-50%); }.founder-mark i:nth-of-type(2) { bottom: 5px; left: -3px; }.founder-mark i:nth-of-type(3) { right: -3px; bottom: 5px; }.founder-mark-isaac { background: #eef4ff; }.founder-role { margin-bottom: 6px; color: var(--blue-ink); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }.founder-card h3 { position: relative; z-index: 1; margin-bottom: 11px; color: #132853; font-size: 1.55rem; }.founder-card > p:last-child { position: relative; z-index: 1; max-width: 390px; margin: 0; color: var(--muted); font-size: 0.93rem; }
.founder-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 62px; border: 1px solid #dbe5f4; border-radius: 10px; overflow: hidden; background: #f3f7fe; }.founder-principles article { display: grid; grid-template-columns: 30px 1fr; gap: 11px; min-height: 132px; border-right: 1px solid #dbe5f4; padding: 25px 19px; }.founder-principles article:last-child { border-right: 0; }.founder-principles .lucide { width: 23px; height: 23px; color: var(--blue-ink); stroke-width: 1.7; }.founder-principles h3 { margin-bottom: 5px; color: #172752; font-size: 0.88rem; }.founder-principles p { margin: 0; color: #5e6d87; font-size: 0.78rem; line-height: 1.43; }

.contact-section { padding: 104px 0; background: #0b1220; color: var(--white); }.contact-grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(430px, 0.88fr); gap: 100px; align-items: start; }.contact-grid h2 { color: var(--white); }.contact-outcomes { white-space: pre-line; }.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }.contact-form label { display: grid; gap: 7px; color: #e1eaf7; font-size: 0.82rem; font-weight: 700; }/* `font: inherit` on the global input reset pulled font-weight: 700 down from the
   wrapping <label>, so everything the visitor typed came out bold. */
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #38517a; border-radius: 5px; outline: 0; background: #0f213f; padding: 11px 12px; color: var(--white); font-weight: 400; }.contact-form input { min-height: 45px; }.contact-form textarea { min-height: 132px; resize: vertical; }.contact-form input:focus, .contact-form textarea:focus { border-color: #80b7ff; box-shadow: 0 0 0 3px rgba(128, 183, 255, 0.18); }.contact-form textarea::placeholder { color: #aebfdb; }.contact-form .button { border: 0; cursor: pointer; }.full-row { grid-column: 1 / -1; }.form-note { min-height: 20px; margin: 0; color: #b7c8e2; font-size: 0.78rem; }

.data-heading h2, .operations-heading h2, .team-heading h2, .reach-copy h2, .field-copy h2, .trust-copy h2, .contact-grid h2 { margin-bottom: 0; }
.section-lede { max-width: 36rem; margin: 15px 0 0; color: var(--muted); font-size: 1rem; font-weight: 400; line-height: 1.65; }

.contact-grid > div > .section-lede { max-width: 32rem; color: #c5d2e7; font-size: 1rem; }

.site-footer { background: #060b16; color: #b8c6dd; }.site-footer > div { display: flex; min-height: 75px; align-items: center; justify-content: space-between; gap: 18px; font-size: 0.84rem; }.footer-wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-family: "Stack Sans Headline", "DM Sans", sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: -0.03em; }.footer-wordmark img { width: 19px; height: 19px; filter: invert(1); object-fit: contain; }

@media (max-width: 980px) {
  .reach-grid, .data-foundation-grid, .field-grid, .trust-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .region-map { max-width: 640px; }.data-board { max-width: 680px; }.data-principles { max-width: 620px; }
  .founder-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }.founder-principles article:nth-child(2) { border-right: 0; }.founder-principles article:nth-child(n + 3) { border-top: 1px solid #dbe5f4; }
  .workspace { grid-template-columns: 176px minmax(0, 1fr); }
  .workspace-grid { grid-template-columns: 1fr; }
  .workspace-portfolio, .workspace-search { display: none; }
  .workspace-main { max-height: 700px; }
  .operations-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.operations-list article:nth-child(2) { border-right: 0; }.operations-list article:nth-child(n + 3) { border-top: 1px solid #cbd9ee; padding-top: 24px; }.contact-form { max-width: 620px; }
}

@media (max-width: 680px) {
  .page-width, .site-nav { padding-right: 18px; padding-left: 18px; }
  .site-nav { min-height: 64px; gap: 10px; }.wordmark { min-height: 44px; gap: 7px; font-size: 1.1rem; }.wordmark img { width: 24px; height: 24px; }.nav-actions { gap: 8px; }
  .nav-cta { display: inline-flex; min-height: 44px; align-items: center; padding: 0 13px; font-size: 0.85rem; }

  /* Two section links and a language switch will not share a 360px bar with the
     CTA, so they move into a disclosure. The CTA is the conversion action and
     stays in the bar; language is a once-per-visit choice and can be a tap in. */
  .nav-toggle { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-content: center; gap: 5px; border: 1px solid rgba(219, 234, 254, 0.58); border-radius: 5px; background: none; padding: 0; cursor: pointer; }
  .nav-toggle span { display: block; width: 17px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 140ms ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .site-header.header-on-light .nav-toggle { border-color: rgba(16, 24, 40, 0.28); }

  .nav-drawer { position: absolute; top: 100%; right: 0; left: 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(0.22, 0.61, 0.36, 1); }
  .nav-drawer.is-open { grid-template-rows: 1fr; }
  .nav-drawer-inner { display: grid; min-height: 0; overflow: hidden; border-bottom: 1px solid rgba(219, 234, 254, 0.2); background: rgba(7, 26, 73, 0.92); -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%); }
  .site-header.header-on-light .nav-drawer-inner { border-bottom-color: rgba(16, 24, 40, 0.1); background: rgba(251, 253, 255, 0.96); }

  .nav-links { display: grid; gap: 0; margin: 0; padding: 4px 18px 8px; }
  .nav-links a { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid rgba(219, 234, 254, 0.16); font-size: 1rem; }
  .site-header.header-on-light .nav-links a { border-bottom-color: rgba(16, 24, 40, 0.09); }
  .language-switch { justify-self: start; margin: 4px 18px 18px; }
  .language-switch a { display: grid; min-width: 52px; min-height: 44px; place-content: center; font-size: 0.76rem; }
  /* The 780px floor was a desktop-era guard. On a 320x568 phone it made the
     hero 1.4 screens tall before anything else appeared; svh already fills. */
  [id] { scroll-margin-top: 74px; }
  .hero { min-height: max(560px, calc(100svh - 64px)); background-position: center, center, 51% center; }.hero::after { background-size: 42px 42px; }.hero-content { padding-top: 92px; padding-bottom: 76px; }.hero-lede { font-size: 1.04rem; line-height: 1.6; } h1 { font-size: 2.625rem; } h2 { font-size: 1.875rem; }
  .reach-section, .data-section, .field-section, .operations-section, .trust-section, .team-section, .contact-section { padding-top: 72px; padding-bottom: 72px; }.data-heading, .team-heading { margin-bottom: 34px; }
  .reach-notes { margin-top: 30px; }.reach-notes p { display: grid; gap: 2px; }.map-lead { display: none; }
  /* Without the leader lines the labels sit straight on the dot matrix, and a
     text-shadow alone left the dots reading through the words. */
  .map-label { right: auto; width: auto; border-radius: 6px; background: rgba(247, 250, 255, 0.93); padding: 4px 8px; }.label-north { top: calc(33.4% + 11px); left: 43.2%; }.label-south { top: calc(73.4% + 11px); right: 1%; }.flow-head { padding: 0 14px; }.flow-head small { display: none; }.flow-steps { grid-template-columns: 1fr; }.flow-steps article { padding: 18px 16px; }.flow-steps article + article { border-top: 1px solid var(--workspace-line); border-left: 0; }.flow-steps .is-outcome { background: #f6faff; }.flow-steps b { margin-top: 14px; }.flow-arrow { top: -11px; left: 16px; }.flow-arrow .lucide { transform: rotate(90deg); }.flow-foot { padding: 12px 14px; }.founder-grid { grid-template-columns: 1fr; }.founder-card { min-height: 250px; }.founder-principles { grid-template-columns: 1fr; margin-top: 34px; border-bottom: 1px solid #dbe5f4; border-radius: 10px; }.founder-principles article, .founder-principles article:nth-child(2) { min-height: 0; border-right: 0; border-bottom: 1px solid #dbe5f4; padding: 18px; }.founder-principles article:last-child { border-bottom: 0; }
  /* Switching the shell to `block` drops the grid's 53px top row, which was the
     only thing giving the bar its height. Restore it explicitly, and match the
     bar's inline padding to the main panel so the logo and the heading align. */
  .workspace { display: block; border-radius: 10px; }.workspace-topbar { min-height: 48px; gap: 10px; border-radius: 9px 9px 0 0; padding: 10px 14px; }.workspace-brand { min-width: 0; }.workspace-tools .lucide { display: none; }.workspace-nav { display: none; }.workspace-main { max-height: none; border-radius: 0 0 9px 9px; padding: 18px 14px 18px; }.workspace-main::after { display: none; }.workspace-heading { flex-direction: column; align-items: start; margin-bottom: 14px; }.workspace-heading h3 { font-size: 0.98rem; }.date-chip { padding: 5px 8px; font-size: 0.66rem; }.signal-row { grid-template-columns: 1fr; gap: 8px; }.signal-card { padding: 12px 13px; }.signal-card strong { font-size: 1.3rem; }.workspace-grid { gap: 10px; margin-top: 10px; }.pattern-panel, .table-panel { padding: 13px 14px 14px; }.chart-row { grid-template-columns: 108px minmax(0, 1fr) 22px; gap: 8px; font-size: 0.64rem; }.chart-tip { display: none; }
  /* The SVG scales with the panel, so viewBox type has to grow to hold its
     rendered size. At 320px the panel is ~226px against a 460-unit viewBox. */
  .pareto-value text { font-size: 13px; }.pareto-tick text { font-size: 13px; }.pareto-annotation { font-size: 12px; }
  .ws-table { font-size: 0.66rem; }.operations-board { margin-top: 32px; }

  /* The frame was a fixed 336x716 screen, so it overflowed the page below a
     ~340px viewport. It is now fluid, and the screen height follows its content
     rather than a fixed number: on a narrow screen the same copy wraps taller,
     and a fixed height would clip the parts list off the bottom. */
  /* The width lives on the slot, not the frame. Sizing the frame with a
     percentage of a shrink-to-fit slot is cyclic, so the slot stretched, the
     frame sat at its left edge, and the graphic hung off-centre in the column. */
  .field-product .phone-slot { width: min(100%, 356px); }
  .field-product .phone { width: 100%; }
  .field-product .phone-screen { width: 100%; height: auto; min-height: 620px; }
  /* App type stays at its native size while the frame shrinks, so the second
     card can no longer peek meaningfully. The dots carry the ranking instead. */
  .field-product .cause-deck { margin-right: 0; }
  .field-product .cause-card { width: auto; flex: 1 1 auto; }
  .field-product .cause-card.is-next { display: none; }
  .field-grid { gap: 42px; }.field-product .field-callout { width: 100%; margin-top: 40px; }.operations-list { grid-template-columns: 1fr; margin-top: 35px; }.operations-list article, .operations-list article + article { min-height: 0; border-right: 0; border-bottom: 1px solid #cbd9ee; padding: 18px 0; }.operations-list article:nth-child(n + 3) { border-top: 0; }.operations-list article:last-child { border-bottom: 0; }.operations-list span { margin-bottom: 18px; }.contact-form { grid-template-columns: 1fr; }.contact-grid { gap: 38px; }.site-footer > div { min-height: 92px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
}

/* Below this width the dashboard's five-column table and its label-beside-bar
   chart stop being columns and become stacked records. Squeezing the columns
   instead meant dropping "Confirmed cause", which is the one column the whole
   product claim rests on. */
@media (max-width: 560px) {
  .ws-table, .ws-table tbody { display: block; }
  .ws-table thead { display: none; }
  .ws-table tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline; gap: 3px 8px; border-bottom: 1px solid #f1f4f9; padding: 9px 0; }
  .ws-table tr.is-hover { margin: 0 -8px; border-radius: 6px; padding: 9px 8px; background: #f4f7fd; }
  .ws-table tr.is-hover td { background: none; }
  .ws-table td { border: 0; padding: 0; }
  .ws-table td:nth-child(1) { grid-area: 1 / 1; }
  .ws-table td:nth-child(2) { grid-area: 1 / 2; }
  .ws-table td:nth-child(5) { grid-area: 1 / 4; }
  .ws-table td:nth-child(3) { grid-area: 2 / 1 / auto / 4; line-height: 1.4; }
  .ws-table td:nth-child(4) { grid-area: 2 / 4; }

  /* A two-item legend beside a long panel title squeezes the title into two
     lines. Drop the legend to its own row and the title gets the full width. */
  .panel-title { flex-wrap: wrap; }
  .chart-legend { flex-basis: 100%; margin-top: 4px; }

  .chart-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
  .chart-row > span:first-of-type { grid-column: 1 / -1; }
  .chart-row i { grid-column: 1; }
  .chart-row strong { grid-column: 2; }

  .signal-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 12px; }
  .signal-card p { grid-area: 1 / 1; margin: 0; }
  .signal-card strong { grid-area: 1 / 2; margin: 0; font-size: 1.15rem; }
  .signal-card span { grid-area: 2 / 1 / auto / -1; }
}

@media (max-width: 420px) {
  .field-product .phone { --bezel: 8px; --frame-radius: 40px; }
  .phone-island { width: 78px; height: 22px; }
  .pareto-value text { font-size: 16px; }.pareto-tick text { font-size: 16px; }.pareto-annotation { font-size: 14px; }
}