/* ===========================================================================
   GRONOMIX — site stylesheet
   ---------------------------------------------------------------------------
   Changes from the original single-page build are marked [FIX].
   Visual language (palette, type, layout, motion) is unchanged.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   [FIX] Self-hosted variable fonts.
   Was: @import from fonts.googleapis.com inside <style>, which serialises the
   request behind CSS parsing and delays first text paint — and sends every
   visitor's IP to a third party, which is a poor look for a company whose
   proposition is data sovereignty.
   Now: two local variable font files (~68 KB total) covering every weight.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans.woff2') format('woff2-variations');
  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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope.woff2') format('woff2-variations');
  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;
}

/* ---------------------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------------------- */
:root {
  --ink: #182532;
  --paper: #faf9f6;
  --muted: #5e5f68;          /* [FIX] was #686971 — nudged for small-text comfort */
  --line: #dedee2;
  --lime: #c9d9cd;
  --purple: #526b85;
  --peach: #dfd2c2;

  /* [FIX] Type floor. Nothing on the site may render below this. */
  --micro: 11px;
  --micro-lg: 12px;

  /* [FIX] Vertical rhythm, pulled in from the original 100px, and now fluid
     so it scales smoothly between a 320px phone and a 2560px display instead
     of stepping at breakpoints. */
  --section-y: clamp(44px, 5.4vw, 76px);
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 1340px;

  /* Fluid block heights — these were fixed px and did not adapt. */
  --h-stage: clamp(320px, 34vw, 460px);
  --h-card-art: clamp(190px, 19vw, 250px);
  --h-product-art: clamp(260px, 27vw, 390px);
  --h-fabric-map: clamp(370px, 31vw, 450px);
  --h-wordart: clamp(130px, 15vw, 210px);
}

* { box-sizing: border-box; }
*, *::before, *::after { min-width: 0; }   /* keeps grid/flex children from forcing overflow */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', Arial, sans-serif;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;                 /* belt and braces against sideways scroll */
}

img, svg, video, canvas { max-width: 100%; height: auto; }

/* Long unbroken words (URLs, compounds) must not push the layout sideways. */
h1, h2, h3, h4, p, li, summary, td, th { overflow-wrap: break-word; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 5px;
}

.skip {
  position: fixed;
  top: -60px;
  left: 0;
  z-index: 100;
  background: var(--lime);
  padding: 12px;
  transition: top .15s;
}
.skip:focus { top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   TYPE
   [FIX] Every letter-spacing is now in `em`, not `px`.
   The originals paired fixed px tracking with fluid clamp() sizes, so at the
   small end of each clamp the tracking became proportionally enormous — the
   company word-art was at -0.14em and the letters physically overlapped.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, p { margin-top: 0; }

h1, h2, h3, h4 {
  font-family: Manrope, Arial, sans-serif;
  line-height: 1.08;
  letter-spacing: -0.035em;    /* [FIX] was -2.5px */
  font-weight: 500;
  text-wrap: balance;
}

h1 { font-size: clamp(56px, 6.6vw, 104px); }
h2 { font-size: clamp(36px, 4.2vw, 64px); }
h3 { font-size: 28px; letter-spacing: -0.03em; }   /* [FIX] was -1px */

/* [FIX] Eyebrows are now part of the heading block (see .h-kicker) rather
   than loose spans, so headings carry meaning. Visual output is unchanged. */
.eyebrow,
.h-kicker {
  font-size: var(--micro);     /* [FIX] was 10px */
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 22px;
  font-family: 'DM Sans', Arial, sans-serif;
  line-height: 1.5;
}

.h-kicker {
  margin-bottom: 20px;
  color: inherit;
}

.lead {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.75;
}

/* ---------------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------------- */
.site-header {
  height: 92px;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  gap: 50px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fafaf8ed;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #15151b10;
}

.wordmark {
  display: flex;
  align-items: center;
  font-family: Manrope, Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.06em;     /* [FIX] was -1.8px */
  gap: 8px;
}
.wordmark svg { height: 34px; width: 34px; }
.wordmark-dot {
  height: 7px; width: 7px;
  background: var(--purple);
  border-radius: 50%;
  align-self: flex-end;
  margin-bottom: 12px;
  margin-left: -3px;
}

.site-header nav {
  display: flex;
  gap: 34px;
  margin: auto;
  font-size: 14px;
  align-items: center;
}
.site-header nav > a,
.nav-products > button { padding: 32px 0; }

.nav-products > button {
  background: none;
  border: 0;
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.chevron {
  border-right: 1px solid;
  border-bottom: 1px solid;
  width: 6px; height: 6px;
  transform: rotate(45deg);
  margin-top: -4px;
}
.nav-products > button[aria-expanded=true] .chevron {
  transform: rotate(225deg);
  margin-top: 4px;
}

nav a[aria-current=page] { color: var(--purple); }

/* ---------------------------------------------------------------------------
   BUTTONS & LINKS
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  background: var(--ink);
  color: #fff;
  padding: 17px 24px;
  border-radius: 40px;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--purple); border-color: var(--purple); transform: translateY(-2px); }
.btn span { font-size: 22px; line-height: 1; }
.btn.lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.btn.lime:hover { background: #fff; border-color: #fff; }
.header-cta { padding: 12px 21px; font-size: 13px; }

.text-link {
  display: inline-flex;
  gap: 25px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid;
  padding-bottom: 5px;
}
.text-link span { font-size: 22px; }
.text-link:hover { color: var(--purple); }

/* ---------------------------------------------------------------------------
   MEGA MENU
   --------------------------------------------------------------------------- */
.mobile-toggle { display: none; }

.mega {
  position: absolute;
  top: 91px; left: 0; right: 0;
  padding: 34px var(--gutter);
  background: var(--paper);
  box-shadow: 0 25px 30px #15151b15;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 15px;
}
.mega:not([hidden]) { display: grid; }
.mega-intro { padding: 10px 10px 5px 0; }
.mega .eyebrow { font-size: var(--micro); }   /* [FIX] was 8px */
/* [FIX] Was an <h3>, which put a level-3 heading ahead of every page's <h1>
   in document order. Now a styled <p> — visually identical, no heading. */
.mega-title {
  margin: 0 0 18px;
  font-size: 28px;
  font-family: Manrope, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.mega-intro > a { font-size: 12px; }

.mega > a {
  padding: 22px;
  background: #efeff1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  transition: background .2s;
}
.mega > a:hover { background: #e5e3ec; }

.nav-icon {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  margin-bottom: 23px;
}
.lime { background: var(--lime); }
.purple { background: var(--purple); color: #fff; }
.peach { background: var(--peach); }

.mega b { font-weight: 600; font-size: 15px; }
.mega small { font-size: 12px; color: var(--muted); margin-top: 5px; }
.mega small em {
  display: block;
  font-style: normal;
  font-size: var(--micro);      /* [FIX] was 9px */
  margin-top: 8px;
}
.mega .arrow { position: absolute; right: 20px; top: 22px; }

/* ---------------------------------------------------------------------------
   LAYOUT  [FIX] density pass
   --------------------------------------------------------------------------- */
.section { padding: var(--section-y) var(--gutter); }       /* [FIX] was 100px */
.home-hero { padding: 48px var(--gutter) 0; overflow: hidden; }  /* [FIX] was 65px */

/* [FIX] Content was uncapped until 1700px. Now capped from 1400px so line
   lengths stay readable on large monitors. */
@media (min-width: 1400px) {
  .section, .home-hero, .page-hero, .site-header, footer,
  .contact-banner, .statement, .context-band, .mega {
    padding-left: max(var(--gutter), calc((100vw - var(--measure)) / 2));
    padding-right: max(var(--gutter), calc((100vw - var(--measure)) / 2));
  }
}

/* ---------------------------------------------------------------------------
   HOME HERO
   --------------------------------------------------------------------------- */
.hero-heading {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8%;
  align-items: end;
  margin-bottom: 36px;        /* [FIX] was 48px */
}
.hero-heading h1 {
  margin: 0;
  letter-spacing: -0.045em;   /* [FIX] was -5px */
  line-height: 1.01;
}

.highlight-word {
  position: relative;
  white-space: nowrap;
  isolation: isolate;
  display: inline-block;
}
.highlight-word::after {
  content: '';
  position: absolute;
  height: 12px;
  background: var(--lime);
  left: 0; right: 0; bottom: 3px;
  z-index: -1;
  transform: rotate(-2deg);
}

.hero-intro { max-width: 350px; padding-bottom: 6px; }
.hero-intro p { font-size: 16px; color: var(--muted); margin-bottom: 24px; }
.hero-intro .btn { padding: 14px 22px; }

.hero-stage {
  position: relative;
  background: #182532;
  border-radius: 18px;
  height: var(--h-stage);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.stage-svg {
  position: absolute;
  height: 160%; width: 90%;
  left: 13%; top: -32%;
  transform: rotate(-12deg);
}
/* [FIX] Replaces an SVG feGaussianBlur(stdDeviation=55) over the hero ribbon.
   A large blur filter forces the whole SVG onto a slow rasterisation path on
   every paint; this gradient is visually equivalent and essentially free. */
.stage-glow {
  position: absolute;
  left: 53%; top: 45%;
  width: 46%; height: 37%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, #526b8533 0%, #526b8520 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.stage-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #16222ecc 0%, #16222e44 9%, transparent 20%),
    linear-gradient(0deg,   #16222ecc 0%, #16222e44 10%, transparent 24%),
    linear-gradient(90deg,  #15151b55, transparent 60%);
  pointer-events: none;
}

.stage-top {
  position: absolute;
  left: 30px; right: 30px; top: 25px;
  display: flex;
  flex-wrap: wrap;             /* [FIX] lets both labels survive on mobile */
  gap: 6px 20px;
  justify-content: space-between;
  z-index: 2;
  font-size: var(--micro);     /* [FIX] was 9px */
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.stage-top span:first-child { display: flex; align-items: center; gap: 10px; }

.live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  flex-shrink: 0;
}

.stage-bottom {
  position: absolute;
  left: 30px; bottom: 26px; right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  z-index: 2;
}
.stage-bottom p {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.025em;    /* [FIX] was -.6px */
  margin: 0;
  max-width: 250px;
}

.stage-pills { display: flex; gap: 8px; }
.stage-pills a {
  border: 1px solid #ffffff50;
  background: #15151b44;
  backdrop-filter: blur(10px);
  border-radius: 30px;
  padding: 8px 15px;
  font-size: var(--micro-lg);  /* [FIX] was 10px */
}
.stage-pills a:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }

.stage-label {
  position: absolute;
  border: 1px solid #ffffff44;
  background: #24242dd9;
  backdrop-filter: blur(10px);
  padding: 8px 15px;
  border-radius: 6px;
  font-size: var(--micro);     /* [FIX] was 10px */
  z-index: 2;
}
.sl1 { top: 34%; left: 15%; }
.sl2 { top: 26%; right: 20%; }
.sl3 { bottom: 29%; right: 30%; }
.stage-label::before { content: '+'; color: var(--lime); margin-right: 12px; }

.hero-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 21px 0;
  font-size: var(--micro);     /* [FIX] was 10px */
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.hero-caption span:last-child { color: var(--ink); }

/* ---------------------------------------------------------------------------
   INTRO
   --------------------------------------------------------------------------- */
.intro-section {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 12%;
  align-items: center;
}
.intro-section h2 { font-size: clamp(37px, 4vw, 60px); margin-bottom: 0; }
.intro-section .body-copy { padding-top: 25px; }
.body-copy p { color: var(--muted); font-size: 16px; }
.body-copy p.large { font-size: 21px; color: var(--ink); line-height: 1.5; }

/* ---------------------------------------------------------------------------
   SOLUTION CARDS
   --------------------------------------------------------------------------- */
.solutions-section { padding-top: 28px; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 32px;         /* [FIX] was 38px */
}
.section-head h2 { margin: 0; }
.section-head > p { max-width: 300px; color: var(--muted); font-size: 14px; margin: 0; }

.solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.solution-card {
  border-radius: 15px;
  overflow: hidden;
  background: #ececf0;
  display: flex;
  flex-direction: column;
  transition: transform .25s;
}
.solution-card:hover { transform: translateY(-7px); }

.card-art {
  height: var(--h-card-art);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.art-bridge { background: var(--lime); }
.art-clinical { background: #e3d7c8; }

.card-art .art-index {
  position: absolute;
  top: 19px; left: 21px;
  font-size: var(--micro);     /* [FIX] was 10px */
  letter-spacing: 0.08em;
}
.art-label {
  position: absolute;
  bottom: 18px; left: 21px;
  font-size: var(--micro);     /* [FIX] was 9px */
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.card-arrow {
  position: absolute;
  right: 17px; top: 17px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff77;
  font-size: 22px;
}
.card-art svg { height: 80%; width: 85%; }

.card-copy { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.card-copy .h-kicker {
  font-size: var(--micro);     /* [FIX] was 8px */
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.card-copy h3 { font-size: 30px; margin-bottom: 14px; }
.card-copy p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 25px; }
.card-copy .text-link { margin-top: auto; align-self: start; font-size: var(--micro-lg); }

.in-dev {
  font-size: var(--micro);     /* [FIX] was 8px, and 6px on mobile */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #fff9;
  border: 1px solid #15151b20;
  padding: 4px 9px;
  border-radius: 20px;
  position: absolute;
  bottom: 16px; right: 17px;
}

/* ---------------------------------------------------------------------------
   FABRIC
   --------------------------------------------------------------------------- */
.fabric-section {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9%;
  align-items: center;
}
.fabric-section .h-kicker { color: var(--lime); }
.fabric-section h2 { font-size: clamp(39px, 4vw, 62px); margin-bottom: 25px; }
.fabric-section p { font-size: 15px; color: #b0b0bd; max-width: 470px; }
.fabric-section .text-link { color: var(--lime); margin-top: 15px; }

.fabric-map {
  position: relative;
  min-height: var(--h-fabric-map);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }

.fabric-center {
  position: relative;
  background: var(--lime);
  color: var(--ink);
  width: 150px; height: 150px;
  border-radius: 26px;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: 0 0 100px #c9d9cd25;
  transform: rotate(-8deg);
}
.fabric-center b {
  font-family: Manrope, Arial, sans-serif;
  font-size: 25px;
  letter-spacing: -0.04em;     /* [FIX] was -1px */
}
.fabric-center small {
  font-size: var(--micro);     /* [FIX] was 8px, 6px on mobile */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 7px;
  line-height: 1.3;
}

.map-node {
  position: absolute;
  border: 1px solid #ffffff33;
  background: #233441;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: var(--micro-lg);
}
.mn1 { top: 12px; left: 8%; }
.mn2 { top: 46px; right: 0; }
.mn3 { bottom: 30px; right: 4%; }
.mn4 { bottom: 2px; left: 0; }
.mn5 { top: 48%; left: -3%; }

.map-caption {
  position: absolute;
  bottom: -22px;
  font-size: var(--micro) !important;   /* [FIX] was 8px */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a8bb !important;            /* [FIX] contrast */
}

/* ---------------------------------------------------------------------------
   DIFFERENCE
   --------------------------------------------------------------------------- */
.difference { display: grid; grid-template-columns: .9fr 1.1fr; gap: 11%; }
.difference h2 { margin-bottom: 24px; }
.difference .lead { max-width: 370px; }

.feature-row {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 15px;
}
.feature-row > span { font-size: var(--micro); color: var(--purple); padding-top: 5px; }
.feature-row h3 { font-size: 22px; letter-spacing: -0.03em; margin: 0 0 10px; }
.feature-row p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------------------
   STATEMENT & BANNER
   --------------------------------------------------------------------------- */
.statement {
  background: var(--purple);
  color: #fff;
  padding: 60px var(--gutter);    /* [FIX] was 70px */
  position: relative;
  overflow: hidden;
}
.statement .h-kicker { color: #d7e1ec; }   /* [FIX] contrast on purple */
.statement h2 {
  font-size: clamp(40px, 5vw, 76px);
  max-width: 900px;
  line-height: 1.15;
  margin-bottom: 26px;
}
.statement p { font-size: 14px; max-width: 500px; color: #e8eef3; }
.statement .text-link { color: #fff; }

.contact-banner {
  background: var(--lime);
  padding: 56px var(--gutter);    /* [FIX] was 70px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.contact-banner h2 { margin: 0; font-size: clamp(36px, 4.5vw, 68px); }
.contact-banner .h-kicker { margin-bottom: 16px; }
.contact-banner .btn { flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   PAGE HERO
   --------------------------------------------------------------------------- */
.page-hero { padding: 40px var(--gutter) 52px; }   /* [FIX] was 50px / 70px */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--micro);
  color: var(--muted);
  margin-bottom: 36px;            /* [FIX] was 55px */
  list-style: none;
  padding: 0;
}
.breadcrumbs li { display: flex; gap: 12px; align-items: center; }
.breadcrumbs a:hover { color: var(--purple); }
.breadcrumbs [aria-current=page] { color: var(--ink); }

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10%;
  align-items: center;
}
.page-hero h1 {
  font-size: clamp(52px, 6vw, 90px);
  letter-spacing: -0.042em;       /* [FIX] was -4px */
  margin: 0 0 25px;
}
.page-hero .lead { max-width: 560px; }
.page-hero .btn { margin-top: 12px; }

.product-badge {
  display: inline-flex;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: var(--micro);        /* [FIX] was 9px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.product-art {
  height: var(--h-product-art);
  border-radius: 20px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-art svg { width: 85%; height: 85%; }
.product-art .art-label { bottom: 23px; left: 25px; }
.product-art .art-index {
  position: absolute;
  top: 23px; left: 25px;
  font-size: var(--micro);
  letter-spacing: 0.08em;
}

.context-band {
  padding: 22px var(--gutter);
  border-block: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  justify-content: space-between;
  font-size: var(--micro-lg);
  list-style: none;
  margin: 0;
}
.context-band .band-label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; }

/* ---------------------------------------------------------------------------
   PRODUCT BODY
   --------------------------------------------------------------------------- */
.product-body { display: grid; grid-template-columns: 260px 1fr; gap: 8%; align-items: start; }

.page-index { position: sticky; top: 118px; }
.page-index .h-kicker { font-size: var(--micro); margin-bottom: 16px; }
.page-index ul { list-style: none; margin: 0; padding: 0; }
.page-index a {
  display: block;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.page-index a:hover { color: var(--purple); }

.content-block { padding-bottom: 44px; scroll-margin-top: 118px; }  /* [FIX] was 65px */
.content-block h2 { font-size: 38px; letter-spacing: -0.03em; margin-bottom: 22px; }
.content-block > p { font-size: 16px; color: var(--muted); max-width: 750px; }

.capability-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; margin-top: 26px; }
.capability { border-top: 1px solid var(--line); padding: 22px 0; }
.capability h3 { font-size: 19px; letter-spacing: -0.025em; margin-bottom: 12px; }
.capability p { font-size: 14px; color: var(--muted); margin-bottom: 0; }

.journey { background: #eeeef3; padding: 28px; border-radius: 12px; margin-top: 26px; }
.journey .h-kicker { font-size: var(--micro); margin-bottom: 16px; color: var(--muted); }
.journey ol { list-style: none; margin: 0; padding: 0; }
.journey-step {
  padding: 16px 0;
  border-top: 1px solid #d4d3dc;
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 15px;
}
.journey-step b { font-size: var(--micro); color: var(--purple); padding-top: 4px; }
.journey-step strong { font-weight: 600; font-size: 15px; display: block; margin-bottom: 5px; }
.journey-step p { font-size: 13px; color: var(--muted); margin: 0; }

.audiences { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; list-style: none; padding: 0; }
.audiences li { font-size: var(--micro-lg); border: 1px solid var(--line); border-radius: 30px; padding: 9px 15px; }

.note {
  padding: 18px 22px;
  border-left: 3px solid var(--purple);
  background: #edf0f3;
  font-size: 13px !important;
  color: #3e5063 !important;
  margin: 22px 0;
}

/* ---------------------------------------------------------------------------
   PLATFORM
   --------------------------------------------------------------------------- */
.platform-hero { background: var(--ink); color: #fff; padding-bottom: 32px; }
.platform-hero .breadcrumbs { color: #b4b4c2; }
.platform-hero .breadcrumbs [aria-current=page] { color: #fff; }
.platform-hero h1 { max-width: 850px; }
.platform-hero .lead { color: #bbb9c7; }
.platform-hero .hero-stage {
  margin-top: 40px;
  border: 1px solid #ffffff20;
  height: clamp(260px, 27vw, 360px);
  background: #1e2e3c;
}
.platform-hero .stage-svg { top: -50%; height: 200%; }

.architecture-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; list-style: none; margin: 0; padding: 0; }
.architecture-list article { border-top: 2px solid var(--ink); padding-top: 20px; }
.architecture-list small { font-size: var(--micro); color: var(--purple); }
.architecture-list h3 { font-size: 22px; margin: 22px 0 12px; }
.architecture-list p { font-size: 14px; color: var(--muted); }

.deploy { background: #edf0f3; }
.deploy .section-head { align-items: start; }
.deploy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; list-style: none; margin: 0; padding: 0; }
.deploy h3 { font-size: 21px; }
.deploy p { font-size: 14px; color: var(--muted); }

.faq { max-width: 900px; margin: auto; }
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq summary {
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--purple); font-size: 23px; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { font-size: 15px; color: var(--muted); margin: 16px 40px 0 0; }

/* ---------------------------------------------------------------------------
   COMPANY
   --------------------------------------------------------------------------- */
.company-hero { padding-bottom: 0; }
.company-hero h1 { max-width: 1000px; font-size: clamp(50px, 6.5vw, 100px); }

.company-word-art {
  background: var(--purple);
  color: var(--lime);
  height: var(--h-wordart);       /* [FIX] was a fixed 270px */
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 44px;               /* [FIX] was 55px */
}
.company-word-art span {
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(85px, 16vw, 230px);
  font-weight: 800;
  letter-spacing: -0.055em;       /* [FIX] was -12px — letters overlapped below ~180px */
  transform: rotate(-5deg);
}

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.value { border-top: 1px solid var(--line); padding-top: 22px; }
.value > span { color: var(--purple); font-size: var(--micro); }
.value h3 { font-size: 25px; margin: 22px 0 14px; }
.value p { font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   CONTACT
   --------------------------------------------------------------------------- */
.contact-page { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding-top: 52px; }
.contact-page h1 { font-size: clamp(45px, 5.6vw, 84px); letter-spacing: -0.04em; }
.contact-copy .lead { max-width: 420px; }

.contact-points { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; font-size: 13px; list-style: none; padding-left: 0; }
.contact-points li { margin: 8px 0; }
.contact-points li::before { content: '\2197'; color: var(--purple); margin-right: 12px; }

.contact-form { padding: 32px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.contact-form h2 { font-size: 25px; letter-spacing: -0.03em; margin-bottom: 10px; }
.contact-form > p { font-size: var(--micro-lg); color: var(--muted); }

form label { display: flex; flex-direction: column; gap: 7px; font-size: var(--micro-lg); margin: 17px 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

input, select, textarea {
  border: 1px solid #d5d5df;
  background: #fafafa;
  padding: 12px;
  border-radius: 5px;
  color: var(--ink);
  width: 100%;
  font-size: 14px;
}
textarea { resize: vertical; }
form .btn { width: 100%; margin-top: 8px; }
/* [FIX] Three states now that the form sends. Measured against the form's
   white panel: success #36511f 8.9:1, sending #5e5f68 6.3:1, error #a4231f
   7.4:1 — all clear AA at this 12px size. */
.form-status { font-size: var(--micro-lg); color: #36511f; margin: 15px 0 0; }
.form-status.is-sending { color: var(--muted); }
.form-status.is-error { color: #a4231f; }
.form-status.is-error a { color: inherit; }
form .btn[disabled] { opacity: 0.55; cursor: progress; }

/* ---------------------------------------------------------------------------
   404
   --------------------------------------------------------------------------- */
.not-found { text-align: center; padding: 100px var(--gutter); }
.not-found h1 { font-size: 70px; }
.not-found .h-kicker { margin-bottom: 18px; }

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
footer { background: var(--ink); color: #fff; padding: 56px var(--gutter) 25px; }

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  border-bottom: 1px solid #ffffff26;
  padding-bottom: 44px;
}
.footer-top .wordmark { font-size: 32px; }

/* [FIX] This was an <h2> on every page — a decorative heading competing with
   each page's real H2s. It is now a <p> with identical styling. */
.footer-claim {
  font-family: Manrope, Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}

.footer-connect {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff55;
  padding-bottom: 15px;
  margin-top: 10px;
}
.footer-connect span { color: var(--lime); font-size: 23px; }

.footer-links { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; padding: 36px 0; }
.footer-links > p { font-size: 13px; color: #aeaebc; }
.footer-links > nav > span,
.footer-links > div > span,
.footer-note > span {
  font-size: var(--micro);        /* [FIX] was 8px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9b9bad;                 /* [FIX] was #7f7f91 — failed AA at 3.9:1 */
  display: block;
  margin-bottom: 14px;
}
.footer-links a { display: block; color: #cac9d2; font-size: var(--micro-lg); margin: 8px 0; }
.footer-links a:hover { color: var(--lime); }
.footer-note p { font-size: 13px; color: #cac9d2; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  border-top: 1px solid #ffffff26;
  padding-top: 22px;
  color: #a3a3b2;                 /* [FIX] was #888897 — failed AA at 4.4:1 */
  font-size: var(--micro);        /* [FIX] was 9px */
}
.footer-base button { background: none; border: 0; font-size: var(--micro); color: #cfcfdb; }

/* ===========================================================================
   RESPONSIVE
   ---------------------------------------------------------------------------
   Breakpoint ladder, widest first:

     ≥1800px   large desktop — content stays capped, hero gains a little height
     ≤1250px   laptop — nav and card type ease down
     ≤1000px   TABLET STACK — every two-column layout becomes one column.
               The original stacked only at 760px, which left 761–1050px
               rendering desktop two-column layouts in tablet-width space
               (the four-up architecture grid was ~170px per column on an
               iPad in portrait). This is the main fix for tablets.
     ≤760px    phone — hamburger nav, mobile layout
     ≤400px    small phone
     ≤340px    very small / older Android

   Plus: coarse-pointer sizing, short-landscape, reduced motion, print.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   ≥1800px — large and very large displays
   --------------------------------------------------------------------------- */
@media (min-width: 1800px) {
  body { font-size: 17px; }
  :root { --h-stage: 500px; --measure: 1440px; }
  .hero-caption, .eyebrow, .h-kicker { font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   ≤1250px — laptop
   --------------------------------------------------------------------------- */
@media (max-width: 1250px) {
  .site-header { gap: 25px; }
  .site-header nav { gap: 23px; }
  .wordmark { font-size: 26px; }
  .header-cta { padding: 10px 17px; font-size: 12px; }
  .hero-heading { gap: 5%; grid-template-columns: 1.4fr 1fr; }
  .hero-heading h1 { font-size: clamp(54px, 6.4vw, 78px); }
  .hero-intro p { font-size: 15px; }
  .card-copy { padding: 22px; }
  .card-copy h3 { font-size: 25px; }
  .fabric-section { gap: 5%; }
  .map-node { padding: 10px 13px; font-size: var(--micro); }
  .product-body { grid-template-columns: 200px 1fr; gap: 6%; }
  .page-hero h1 { font-size: clamp(48px, 5.6vw, 72px); }
  .architecture-list { gap: 20px; }
  .architecture-list h3 { font-size: 20px; }
  .mega { grid-template-columns: .8fr 1fr 1fr; }
  .mega > a { padding: 18px; }
  .contact-page { gap: 6%; }
  .contact-form { padding: 25px; }
}

/* ---------------------------------------------------------------------------
   ≤1000px — TABLET STACK
   Everything two-column becomes one column. Grids drop to a count that
   actually fits: the 4-up architecture list becomes 2×2 rather than a
   squeezed 4-up or an orphaned 3+1.
   --------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero-heading { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .hero-heading h1 { font-size: clamp(50px, 7.6vw, 72px); }
  .hero-intro { max-width: 520px; }

  .intro-section { grid-template-columns: 1fr; gap: 26px; }
  .intro-section .body-copy { padding-top: 0; }

  .difference { grid-template-columns: 1fr; gap: 30px; }
  .difference .lead { max-width: 560px; }

  .fabric-section { grid-template-columns: 1fr; gap: 24px; }
  .fabric-map { margin: 10px auto 24px; max-width: 560px; width: 100%; }

  .page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .page-hero .lead { max-width: 620px; }
  .product-art { max-width: 620px; }

  .product-body { display: block; }
  .page-index {
    position: static;
    margin-bottom: 32px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .page-index .h-kicker { display: none; }
  .page-index ul { display: flex; gap: 10px; }
  .page-index a {
    white-space: nowrap;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 30px;
    font-size: var(--micro-lg);
  }

  .architecture-list { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .deploy-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .capability-list { grid-template-columns: 1fr 1fr; }

  .contact-page { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .contact-copy .lead { max-width: 620px; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-links { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .footer-links > p { grid-column: 1 / -1; }
}

/* Solution cards: two side by side needs ~700px of usable width. */
@media (max-width: 880px) {
  .solution-grid { grid-template-columns: 1fr; }
  .solution-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .card-art { height: 100%; min-height: 250px; border-radius: 0; }
  .card-art svg { width: 100%; height: 72%; }
}

/* ---------------------------------------------------------------------------
   ≤760px — phone: hamburger navigation and mobile layout
   [FIX] The original hid three pieces of brand messaging here to protect the
   layout — the footer conviction note, the hero strapline and the footer
   motto. All three are restored.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 86px; }

  .site-header { height: 76px; gap: 16px; }
  .site-header .wordmark { font-size: 25px; }
  .wordmark svg { width: 29px; height: 29px; }
  .wordmark-dot { margin-bottom: 10px; }
  .header-cta { margin-left: auto; font-size: var(--micro); gap: 10px; padding: 10px 14px; }

  .mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    min-width: 44px;
    min-height: 44px;
    margin-right: -10px;
  }
  .mobile-toggle span { width: 22px; height: 1px; background: var(--ink); }

  .site-header nav {
    display: none;
    position: absolute;
    top: 75px; left: 0; right: 0;
    background: var(--paper);
    padding: 12px var(--gutter) 24px;
    margin: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 15px 30px #0001;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .site-header nav.mobile-open { display: flex; }
  .site-header nav > a,
  .nav-products > button {
    padding: 16px 0;
    font-size: 16px;
    width: 100%;
    border-bottom: 1px solid var(--line);
    min-height: 52px;
  }
  .nav-products > button { justify-content: space-between; }

  .mega { position: static; box-shadow: none; padding: 10px 0; border: 0; gap: 8px; }
  .mega:not([hidden]) { display: flex; flex-direction: column; }
  .mega-intro { display: none; }
  .mega > a { padding: 16px 18px 16px 64px; min-height: 84px; justify-content: center; }
  .mega .nav-icon { position: absolute; left: 15px; top: 22px; margin: 0; }
  .mega b { font-size: 14px; }
  .mega small em { display: inline; margin-left: 5px; }
  .mega .arrow { top: 28px; }

  .home-hero { padding-top: 28px; }
  .hero-heading { margin-bottom: 24px; }
  .hero-heading h1 { font-size: clamp(40px, 10.6vw, 64px); letter-spacing: -0.04em; }
  .hero-intro p { font-size: 15px; margin-bottom: 20px; }

  .hero-stage { border-radius: 12px; }
  .stage-svg { width: 170%; left: -35%; top: -28%; height: 150%; }
  .stage-top { left: 18px; right: 18px; top: 16px; gap: 4px 14px; }
  .stage-bottom { left: 18px; right: 18px; bottom: 18px; align-items: start; flex-direction: column; gap: 16px; }
  .stage-bottom p { font-size: 19px; max-width: 240px; }
  .stage-pills { gap: 6px; }
  .stage-label { padding: 6px 11px; }
  /* On a phone the stage is too short for labels and the strapline to share
     space by eye. The three labels take the top half; the strapline and pills
     own the bottom. Both heroes use the same stage height so one set of
     positions is correct on each. */
  .platform-hero .hero-stage { height: var(--h-stage); }
  .sl1 { top: 20%; left: 5%; right: auto; }
  .sl2 { top: 32%; right: 5%; left: auto; }
  .sl3 { top: 44%; left: 12%; right: auto; bottom: auto; }

  .hero-caption { gap: 18px; align-items: start; }
  .hero-caption span:first-child { max-width: 190px; }
  .hero-caption span:last-child { text-align: right; }

  h2 { font-size: clamp(30px, 7.4vw, 38px); letter-spacing: -0.035em; }
  .intro-section h2 { font-size: clamp(30px, 7.4vw, 38px); }
  .body-copy p { font-size: 15px; }
  .body-copy p.large { font-size: 19px; }

  .section-head { align-items: start; flex-direction: column; gap: 18px; }
  .section-head > p { max-width: 420px; }

  .fabric-map { min-height: 360px; margin: 8px 0 22px; }
  .fabric-center { width: 118px; height: 118px; }
  .fabric-center b { font-size: 21px; }
  .mn1 { left: 0; }
  .mn2 { right: 0; }
  .mn5 { left: 0; }

  .feature-row { padding: 20px 0; }

  .statement h2 { font-size: clamp(32px, 8vw, 42px); letter-spacing: -0.04em; }
  .contact-banner { align-items: start; flex-direction: column; gap: 22px; }
  .contact-banner h2 { font-size: clamp(30px, 7.6vw, 40px); }
  .contact-banner .btn { padding: 13px 21px; }

  .page-hero h1 { font-size: clamp(38px, 9.4vw, 58px); letter-spacing: -0.035em; }
  .page-hero .lead { font-size: 16px; }
  .breadcrumbs { margin-bottom: 26px; }

  .context-band { gap: 10px 20px; padding-block: 16px; }
  .context-band .band-label { width: 100%; }

  .content-block { padding-bottom: 32px; scroll-margin-top: 96px; }
  .content-block h2 { font-size: clamp(27px, 6.8vw, 33px); }
  .content-block > p { font-size: 15px; }
  .capability-list { grid-template-columns: 1fr; gap: 0; }
  .capability h3 { font-size: 18px; }
  .journey { padding: 20px; }

  .architecture-list { grid-template-columns: 1fr; gap: 24px; }
  .architecture-list h3 { font-size: 20px; margin-top: 14px; }
  .deploy-grid { grid-template-columns: 1fr; gap: 20px; }
  .values-grid { grid-template-columns: 1fr; gap: 24px; }
  .value h3 { margin-top: 16px; }

  .faq summary { font-size: 16px; }
  .faq details p { font-size: 14px; margin-right: 12px; }

  .company-hero h1 { font-size: clamp(38px, 9.4vw, 54px); }
  .company-word-art { margin-top: 28px; }
  .company-word-art span { font-size: 21vw; letter-spacing: -0.05em; }

  .contact-page h1 { font-size: clamp(38px, 9.4vw, 54px); }
  .contact-form { padding: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-row label { margin: 12px 0; }

  footer { padding-top: 36px; }
  .footer-top { grid-template-columns: 1fr; gap: 20px; padding-bottom: 32px; }
  .footer-top .wordmark { font-size: 27px; }
  .footer-claim { font-size: 26px; }
  .footer-connect { max-width: 320px; margin-top: 4px; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 0; }
  .footer-note { grid-column: 1 / -1; }
  .footer-base { gap: 10px 18px; }

  .solution-card { display: flex; flex-direction: column; }
  .card-art { height: var(--h-card-art); min-height: 200px; }
  .card-art svg { width: 86%; height: 82%; }
  .card-copy { padding: 22px 20px; }
  .card-copy h3 { font-size: 26px; }
  .in-dev { bottom: 16px; right: 16px; left: auto; }

  .highlight-word::after { height: 8px; bottom: 2px; }
  .not-found { padding-block: 72px; }
  .not-found h1 { font-size: clamp(42px, 11vw, 60px); }
}

/* ---------------------------------------------------------------------------
   ≤400px — small phone
   --------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .site-header { gap: 10px; }
  .site-header .wordmark { font-size: 22px; }
  .wordmark svg { width: 25px; height: 25px; }
  .header-cta { font-size: var(--micro); padding: 9px 12px; gap: 7px; }
  .header-cta span { font-size: 17px; }
  .hero-caption { flex-direction: column; gap: 8px; }
  .hero-caption span { max-width: none !important; text-align: left !important; }
  .stage-bottom p { font-size: 18px; max-width: 210px; }
  .footer-links { grid-template-columns: 1fr; }
  .mn5 { top: 72%; left: 0; }      /* was level with the centre block */
  .journey-step { grid-template-columns: 28px 1fr; gap: 10px; }
  .contact-form { padding: 18px; }
}

/* ---------------------------------------------------------------------------
   ≤340px — very small / older Android
   --------------------------------------------------------------------------- */
@media (max-width: 340px) {
  :root { --gutter: 16px; }
  .site-header { height: 68px; }
  .site-header .wordmark { font-size: 20px; }
  .wordmark svg { width: 22px; height: 22px; }
  .header-cta { padding: 8px 10px; }
  .hero-heading h1 { font-size: 38px; }
  .sl2, .sl3 { display: none; }   /* three floating labels crowd a 340px stage */
  .stage-pills { flex-wrap: wrap; }
  .context-band { gap: 8px 14px; }
}

/* ---------------------------------------------------------------------------
   Short landscape — phones turned sideways, and split-screen windows.
   A 460px-tall viewport cannot afford a 380px hero.
   --------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1100px) {
  :root { --section-y: 36px; }
  .hero-stage { height: 300px; }
  .platform-hero .hero-stage { height: 240px; }
  .home-hero { padding-top: 22px; }
  .company-word-art { height: 120px; }
  .site-header nav { max-height: calc(100dvh - 76px); }
  .page-index { position: static; }
}

/* ---------------------------------------------------------------------------
   Touch targets
   [FIX] Measured on device sizes: the hamburger was 22×24, breadcrumb links
   18px tall, footer links 20px and the FAQ summaries 38px. Everything
   interactive now clears ~44px on a touch device. Padding is absorbed by
   matching negative margin where it would otherwise change the layout, so
   the visual design is unchanged.
   --------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 1000px) {
  .wordmark { min-height: 44px; }

  .breadcrumbs a,
  .breadcrumbs [aria-current=page] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -13px;
  }
  .breadcrumbs li { align-items: center; }

  .stage-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 16px;
  }

  .faq summary { min-height: 44px; align-items: center; padding-block: 3px; }

  .footer-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    margin: 0;
  }
  .footer-base button { min-height: 44px; padding-block: 11px; }
  .footer-connect { min-height: 44px; align-items: center; }

  .text-link { min-height: 44px; align-items: center; }
  .page-index a { min-height: 44px; display: flex; align-items: center; }
  .contact-points li { min-height: 32px; }

  /* 16px is the threshold below which iOS Safari zooms the page on focus. */
  input, select, textarea { font-size: 16px; min-height: 48px; }
  textarea { min-height: 110px; }
  form .btn { min-height: 52px; }
  .btn { min-height: 48px; }
}

/* ---------------------------------------------------------------------------
   Devices with a display cutout / rounded corners
   --------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  @media (max-width: 1000px) {
    .site-header, .home-hero, .page-hero, .section, footer,
    .contact-banner, .statement, .context-band, .not-found {
      padding-left: max(var(--gutter), env(safe-area-inset-left));
      padding-right: max(var(--gutter), env(safe-area-inset-right));
    }
    footer { padding-bottom: max(25px, env(safe-area-inset-bottom)); }
  }
}

/* ---------------------------------------------------------------------------
   MOTION / CONTRAST / PRINT
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .solution-card:hover, .btn:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --muted: #4a4b54; --line: #b9b9c2; }
  .footer-links a { color: #e4e3ea; }
  .footer-base { color: #c9c9d6; }
}

@media print {
  .site-header, footer, .contact-banner, .skip, .hero-stage,
  .page-index, .company-word-art, .mobile-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section, .page-hero { padding: 12px 0; }
  .statement { background: #fff; color: #000; }
  .solution-grid, .capability-list, .architecture-list,
  .deploy-grid, .values-grid { grid-template-columns: 1fr 1fr; }
  .faq details { break-inside: avoid; }
  .faq details p { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------------------------------------------------------------------------
   LEGAL PAGES
   Narrow measure, generous leading — these are read, not scanned.
   --------------------------------------------------------------------------- */
.legal-hero .lead { max-width: 680px; }
.legal-effective {
  font-size: var(--micro-lg);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.legal-body { display: grid; grid-template-columns: 240px 1fr; gap: 7%; align-items: start; }
.legal-index { position: sticky; top: 118px; }
.legal-copy { max-width: 720px; }
.legal-block { padding-bottom: 32px; scroll-margin-top: 118px; }
.legal-block h2 {
  font-size: 25px;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal-block:first-child h2 { border-top: 0; padding-top: 0; }
.legal-block p { font-size: 15.5px; color: #3f4049; line-height: 1.78; margin-bottom: 15px; }
.legal-list { margin: 0 0 15px; padding-left: 20px; }
.legal-list li { font-size: 15.5px; color: #3f4049; line-height: 1.78; margin-bottom: 11px; }
.legal-block a { text-decoration: underline; text-underline-offset: 3px; }
.legal-block a:hover { color: var(--purple); }
.legal-address {
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.9;
  background: #edf0f3;
  border-left: 3px solid var(--purple);
  padding: 16px 20px;
  margin: 0 0 15px;
}
.legal-colophon {
  font-size: var(--micro-lg);
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 8px;
  line-height: 1.8;
}
/* Unfilled counsel placeholders — deliberately conspicuous. */
.todo {
  background: #fdf2d0;
  color: #6b4e05;
  border-bottom: 1px dotted #b08900;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}
@media (max-width: 1000px) {
  .legal-body { display: block; }
  .legal-index { position: static; margin-bottom: 28px; }
  .legal-index .h-kicker { display: none; }
}
@media (max-width: 760px) {
  .legal-block h2 { font-size: 22px; }
  .legal-block p, .legal-list li, .legal-address { font-size: 15px; }
}

/* Inline links inside running prose cannot be 44px tall without wrecking the
   line box, but vertical padding on an inline element enlarges the hit area
   without affecting layout. Applied only where the pointer is coarse. */
@media (pointer: coarse), (max-width: 1000px) {
  .legal-block p a,
  .legal-address a { padding-block: 11px; }
}

/* Legal hero sits closer to its body than a marketing hero does. */
.legal-hero { padding-bottom: 18px; }
.legal-body { padding-top: 40px; }
@media (max-width: 760px) { .legal-body { padding-top: 30px; } }

/* ---------------------------------------------------------------------------
   INSIGHTS
   --------------------------------------------------------------------------- */
.article-list { list-style: none; margin: 0; padding: 0; }
.article-row { border-top: 1px solid var(--line); }
.article-row:last-child { border-bottom: 1px solid var(--line); }
.article-row > a { display: block; padding: 28px 0; transition: padding-left .2s; }
.article-row > a:hover { padding-left: 10px; }
.article-row h2 {
  font-size: clamp(24px, 2.6vw, 33px);
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  max-width: 820px;
}
.article-row > a:hover h2 { color: var(--purple); }
.article-meta {
  font-size: var(--micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.article-desc { font-size: 15px; color: var(--muted); max-width: 720px; margin-bottom: 16px; }
.article-row .text-link { font-size: var(--micro-lg); }

.article-hero h1 { font-size: clamp(36px, 4.6vw, 62px); letter-spacing: -0.035em; max-width: 900px; }
.article-hero .lead { max-width: 720px; }
.article-copy h2 {
  font-size: clamp(23px, 2.4vw, 28px);
  letter-spacing: -0.025em;
  margin: 34px 0 14px;
  padding-top: 0;
  border-top: 0;
}
.article-copy > h2:first-child { margin-top: 0; }

.pull-quote {
  margin: 26px 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--lime);
}
.pull-quote p {
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: var(--ink) !important;
  margin: 0;
}

.author-bio {
  margin-top: 40px;
  padding: 24px;
  background: #edf0f3;
  border-radius: 12px;
}
.author-bio .h-kicker { margin-bottom: 10px; color: var(--muted); }
.author-name { font-weight: 650; font-size: 16px; margin-bottom: 8px; color: var(--ink) !important; }
.author-bio p { font-size: 14px !important; margin-bottom: 12px; }

@media (max-width: 760px) {
  .article-row > a { padding: 22px 0; }
  .article-row > a:hover { padding-left: 0; }
  .author-bio { padding: 20px; }
}