:root {
  --ink: #11324D;
  --ocean: #1E5F8B;
  --mint: #25B37A;

  --brand-green-text: #0F6B46;
  --amber: #F2A65A;
  --cloud: #F5F8FB;
  --slate: #273444;
  --text: #1B2733;
  --muted: #5A6B7B;
  --line: #DCE5EE;
  --bg: #FFFFFF;
  --max: 1080px;


  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.5vw, 3.25rem);

  /* ── Spacing rhythm. Everything is a multiple of 4, so vertical
   * spacing lands on a grid instead of being eyeballed per section. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --sp-9: 104px;

  /* ── Depth. Layered, low-alpha shadows read as "expensive"; a single
   * hard shadow reads as "bootstrap default". Tinted with the brand ink
   * rather than pure black so surfaces feel part of one palette. */
  --shadow-1: 0 1px 2px rgba(17, 50, 77, 0.05),
              0 1px 3px rgba(17, 50, 77, 0.04);
  --shadow-2: 0 2px 4px rgba(17, 50, 77, 0.05),
              0 6px 16px -4px rgba(17, 50, 77, 0.09);
  --shadow-3: 0 4px 8px rgba(17, 50, 77, 0.06),
              0 16px 40px -8px rgba(17, 50, 77, 0.14);

  --radius-1: 10px;
  --radius-2: 14px;
  --radius-3: 22px;

  --deck-face: #FFFFFF;
  --deck-edge: #CBD5E1;
  --deck-depth: 5px;
  --deck-radius: 24px;
  --deck-radius-sm: 18px;
  --emerald: #58B681;

  /* One easing curve for the whole site. Mixed easings are a tell. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;

  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  /* Premium type detail: kern/ligature control + optical smoothing. Cheap,
   * and the difference is visible at heading sizes. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

a { color: var(--ocean); }
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
/* The wordmark and the tagline stack, so the mark sits beside BOTH rather
 * than beside the name alone -- that vertical relationship is what makes a
 * lockup read as one object. */
.brand-text {
  display: flex;
  flex-direction: column;

  line-height: 1.1;
}
.brand-name {
  font-weight: 800;
  /* ~22px on a phone, ~28px on a desktop: a real step above the 16-17px
   * nav without making the sticky header taller than it needs to be. */
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);
  /* Large, heavy type needs its tracking pulled IN; the default spacing
   * that suits 16px body text reads loose and amateurish at 28px. */
  letter-spacing: -0.015em;
}


.brand-tagline {
  /* Own line, guaranteed: `.brand-text` is a column flex container, so this
   * cannot share a line with the wordmark no matter how much room there is. */
  display: block;
  /* CLAIM 3: one more pixel of separation, cheap and asked for. */
  margin-top: 5px;

  font-size: clamp(0.7rem, 0.66rem + 0.12vw, 0.75rem);
  /* 🔴 NOT italic. Italic was doing the delineation work that SIZE and
   * TRACKING should do; at 12px, italic in a UI sans is the least legible
   * option available. */
  font-style: normal;
  /* 500 against the wordmark 800: enough weight to lift a small line
     off a white ground while keeping the hierarchy. */
  font-weight: 500;
  /* Tracking OPENS as size comes down -- the opposite of the wordmark's
   * tight -0.015em. Held at 0.02em because this line cannot wrap (see the
   * width table above). */
  letter-spacing: 0.02em;
  line-height: 1.25;

  color: var(--brand-green-text);
  white-space: nowrap;
}


.tagline-bubble {
  display: inline-block;
  /* Asymmetric by 2px so it does not read as a machined pill.
     Vertical padding stays 3px: the header is sticky, so every pixel
     is taken from every screenful of every page. */
  padding: 3px 13px 3px 11px;

  border-radius: 26px 9px 22px 12px / 10px 5px 8px 6px;

  background: linear-gradient(105deg,
    #11324D 0%, #1E5F8B 52%, #0F6B46 100%);
  color: #fff;
  /* An inset top highlight + a barely-there drop shadow: this is what makes
   * it look printed/moulded rather than like a flat coloured rectangle. */
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.18),
              0 1px 3px rgba(17, 50, 77, 0.16);

  transform: rotate(-0.45deg);
  /* White on a saturated gradient renders heavy without this. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 🔴 The header is `position: sticky`, so every pixel it gains is taken
 * from every screenful of every page. Below ~900px the nav already wraps
 * and the tagline would either wrap with it or force a horizontal
 * squeeze, so the lockup degrades to mark + wordmark -- which is the part
 * that carries the brand. The tagline still appears on that page, in the
 * footer signature.
 * ⚠️ `display: none`, not `visibility`/opacity: a hidden-but-present line
 * would still occupy height, which is the thing being reclaimed. */
@media (max-width: 900px) {
  .brand-tagline { display: none; }
}

/* 52px matches the height of the name + tagline stack beside it, and costs no
 * header height because that stack already sets it. Below 900px the tagline
 * is gone, so the mark returns to 44px. */
.brand-mark {
  width: 52px;
  height: 52px;
  display: block;
  flex: none;
}
@media (max-width: 900px) {
  .brand-mark { width: 44px; height: 44px; }
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.site-header nav a {
  text-decoration: none;
  color: var(--slate);
  font-weight: 600;
}
.site-header nav a:hover { text-decoration: underline; }
.site-header nav a[aria-current="page"] {
  color: var(--ocean);
  text-decoration: underline;
}
.site-header nav a.cta {
  background: var(--mint);
  color: #fff;
  padding: 6px 12px 6px 13px;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.3;
  white-space: nowrap;
}
/* The two chevrons say "go to the app" without the words. */
.site-header nav a.cta .cta-chev {
  margin-left: 4px;
  font-weight: 800;
  letter-spacing: -0.06em;
}
/* On a phone the button joins the row above instead of wrapping onto a row of
 * its own, which is what made the sticky header so tall. */
@media (max-width: 620px) {
  .site-header nav { gap: 8px 14px; }
}
/* 360px-wide phones are ~20px short of fitting "Careers  Support  EN|SW  App"
 * on one row, so the gaps and the capsule's padding give up a few pixels. */
@media (max-width: 380px) {
  .site-header nav { gap: 8px 10px; }
  header.site-header nav .lang-switch a,
  header.site-header nav .lang-switch .lang-seg { padding: 4px 11px; }
}


.footer-tagline {
  margin: 2px 0 10px;
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
  max-width: 24ch;
}


.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1.5px solid var(--slate);
  border-radius: 999px;
  background: var(--cloud);
  box-shadow: inset 0 2px 3px rgba(17, 50, 77, 0.12);
}
.site-header nav .lang-switch a,
.site-header nav .lang-switch .lang-seg {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  color: var(--slate);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.site-header nav .lang-switch a:hover {
  background: rgba(17, 50, 77, 0.08);
  text-decoration: none;
}
.site-header nav .lang-switch .lang-seg.is-active {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}


.hero {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;

  padding: clamp(40px, 7vw, 104px) var(--sp-5) clamp(28px, 4vw, 48px);
  isolation: isolate;          /* keeps the canvas behind the text */
  /* Structural guard: even if a future decorative child overflows, it can
   * never add to the page's scroll width. `clip` (not `hidden`) because it
   * does not create a scroll container. */
  overflow: clip;
}
.narrow-hero { padding-bottom: var(--sp-2); }
.hero h1 {
  margin: 0 0 var(--sp-4);
  font-size: var(--step-4);
  line-height: 1.08;
  color: var(--ink);
  /* Tighter tracking at display sizes is the single biggest "designed vs
   * default" tell in a headline. */
  letter-spacing: -0.028em;
  font-weight: 760;
  text-wrap: balance;          /* no lonely last word */
}
.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 var(--sp-5);
  text-wrap: pretty;
}
.lede.narrow { max-width: 54ch; }
.hero-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 13px 22px;
  border-radius: var(--radius-1);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  margin: 0 var(--sp-2) var(--sp-2) 0;
  box-shadow: var(--shadow-1);
  /* ⚠️ Transition named properties, never `all`: `all` animates layout
   * properties too and causes jank on low-end phones. */
  transition: transform 180ms var(--ease),
              box-shadow 180ms var(--ease),
              border-color 180ms var(--ease),
              background-color 180ms var(--ease);
}
.btn:hover {
  border-color: var(--ocean);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.btn.primary {
  background: var(--ocean);
  border-color: var(--ocean);
  color: #fff;
  box-shadow: 0 1px 2px rgba(17, 50, 77, 0.12),
              0 8px 20px -6px rgba(30, 95, 139, 0.45);
}
.btn.primary:hover {
  background: #17507a;
  box-shadow: 0 2px 4px rgba(17, 50, 77, 0.14),
              0 14px 30px -8px rgba(30, 95, 139, 0.55);
}

/* ---------- panels ---------- */
.panel {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5);
}
.panel.alt {
  background: var(--cloud);
  max-width: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.panel.alt > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.panel.centred { text-align: center; }
.panel h2 {
  margin: 0 0 var(--sp-5);
  font-size: var(--step-3);
  line-height: 1.2;
  letter-spacing: -0.022em;
  font-weight: 720;
  color: var(--ink);
  text-wrap: balance;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: var(--sp-5);
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease),
              border-color 220ms var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: #C9D8E8;
}
.card h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-1);
  line-height: 1.3;
  letter-spacing: -0.014em;
  font-weight: 680;
  color: var(--ocean);
}
.card p { margin: 0; color: var(--muted); }
.card.contact .contact-value {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Company-details table on /about/. Two columns, label + value. */
.doc-table { border-collapse: collapse; width: 100%; margin: 18px 0; }
.doc-table th, .doc-table td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.doc-table th {
  background: var(--cloud);
  width: 34%;
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 520px) {
  /* Stack on small screens so a long address never forces a sideways
     scroll — the site is read on phones more than on desktops. */
  .doc-table th, .doc-table td { display: block; width: auto; }
  .doc-table th { border-bottom: 0; }
}

.roles { padding-left: 20px; margin: 0 0 18px; }
.roles li { margin-bottom: 8px; }

.note {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 4px solid var(--amber);
  background: #FFF8F0;
  border-radius: 0 8px 8px 0;
}
.panel.alt .note { background: #fff; }

/* ---------- FAQ / long-form documents ---------- */
.faq h3 {
  margin: 26px 0 6px;
  font-size: 19px;
  color: var(--ink);
}
.faq p { margin: 0 0 6px; color: var(--muted); max-width: 72ch; }

.doc { max-width: 78ch; }
.doc h1 { color: var(--ink); }
.doc h2 { margin: 28px 0 8px; color: var(--ink); font-size: 22px; }
.doc h3 { margin: 20px 0 6px; color: var(--slate); font-size: 18px; }
.doc table { border-collapse: collapse; width: 100%; margin: 16px 0; }
.doc th, .doc td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.doc th { background: var(--cloud); }
.doc code {
  background: var(--cloud);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
}
.doc blockquote {
  margin: 16px 0;
  padding: 8px 16px;
  border-left: 4px solid var(--ocean);
  color: var(--muted);
}
.updated { color: var(--muted); font-size: 15px; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--slate);
  color: #E6ECF2;
  padding: 40px 24px 20px;
}
.footer-cols {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px;
}
.site-footer h4 { margin: 0 0 10px; font-size: 15px; color: #fff; }
.site-footer a {
  display: block;
  color: #CFE0EE;
  text-decoration: none;
  margin-bottom: 7px;
}
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer .muted { color: #A9BCCD; margin: 0; }
.copyright {
  max-width: var(--max);
  margin: 28px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #A9BCCD;
  font-size: 14px;
}


.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Fade the field out behind the text so contrast is never reduced. */
  mask-image: radial-gradient(120% 100% at 70% 35%,
              rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%,
              transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 70% 35%,
              rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%,
              transparent 78%);
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.hero-canvas.is-ready { opacity: 1; }


@media (max-width: 620px) {

  .hero-canvas.is-ready { opacity: 0.7; }
  .hero-canvas {
    mask-image: radial-gradient(95% 62% at 82% 12%,
                rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 42%,
                transparent 70%);
    -webkit-mask-image: radial-gradient(95% 62% at 82% 12%,
                rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 42%,
                transparent 70%);
  }
  /* The wash is also proportionally stronger on a tall narrow hero. */
  .hero::before { opacity: 0.7; }
}

/* Dark mode keeps full strength on a phone: against #0F1720 the
   limiting factor is visibility, not dominance. */
@media (max-width: 620px) and (prefers-color-scheme: dark) {
  .hero-canvas.is-ready { opacity: 1; }
}

/* A soft brand wash under the hero, pure CSS, no JS. This alone lifts the
 * page out of "white default" territory even if the canvas never loads. */
.hero::before {
  content: "";
  position: absolute;

  inset: 0;
  z-index: -2;
  /* Gradient centres moved inboard (was 18%/82%, now 25%/78%) and radii
   * widened, so the wash still feels edge-to-edge now that it can no
   * longer physically extend past the hero. */
  background:
    radial-gradient(60% 70% at 25% 18%,
      rgba(37, 179, 122, 0.11) 0%, transparent 72%),
    radial-gradient(65% 75% at 78% 8%,
      rgba(30, 95, 139, 0.14) 0%, transparent 74%),
    radial-gradient(55% 65% at 58% 92%,
      rgba(242, 166, 90, 0.09) 0%, transparent 76%);
  pointer-events: none;
}

/* ---------- scroll reveal ----------
   Default state is VISIBLE; script opts elements into the hidden
   state, so a script failure can never leave content invisible. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}




body > svg[aria-hidden="true"]:not(.ico),
svg.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ico {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  vertical-align: -0.14em;
  /* Slightly thinner than the text it sits beside, so the icon supports
   * the label instead of competing with it. */
  opacity: 0.92;
}

/* A card heading that leads with an icon. */
.card h3 .ico,
.panel h2 .ico { margin-right: 0.42em; }


.card.contact h3 {
  display: flex;
  align-items: center;
}
.card.contact .contact-value .ico {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  color: var(--mint);
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cloud);
  text-decoration: none;
  color: var(--ink);
  font-weight: 650;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease),
              border-color 180ms var(--ease);
}
.contact-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  border-color: var(--ocean);
}


.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  counter-reset: flowstep;
}
.flow li {
  position: relative;
  counter-increment: flowstep;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
  box-shadow: var(--shadow-1);
}
.flow li::before {
  content: counter(flowstep);
  position: absolute;
  top: calc(-1 * var(--sp-3));
  left: var(--sp-4);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ocean);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.flow .ico {
  width: 26px;
  height: 26px;
  color: var(--mint);
  margin-bottom: var(--sp-2);
  opacity: 1;
}
.flow strong { display: block; margin-bottom: 4px; color: var(--ink); }
.flow p { margin: 0; color: var(--muted); font-size: var(--step--1); }

/* ---------- careers: the level ladder ----------
 * 🔑 Presented as an ORDERED list because the order is the point — these
 * are the six rungs of users/access_control.py's LEVEL_RANK, and the page
 * says so. Numbered by CSS counters (same technique as `.flow`) so the
 * numerals are never part of the copy and cannot drift from the list. */
.ladder {
  list-style: none;
  margin: var(--sp-5) 0 var(--sp-4);
  padding: 0;
  counter-reset: rung;
  display: grid;
  gap: var(--sp-3);
}
.ladder li {
  counter-increment: rung;
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 62px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
  box-shadow: var(--shadow-1);
}
.ladder li::before {
  content: counter(rung);
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Rising weight reads as a ladder without needing six colours. */
  background: var(--ocean);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ladder li strong { display: block; color: var(--ink); margin-bottom: 2px; }
.ladder li span { color: var(--muted); font-size: var(--step--1); }

/* ---------- careers: a department and its positions ---------- */
.dept {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
}
.dept:first-of-type { border-top: 0; padding-top: var(--sp-4); }
.dept-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.dept-head .ico {
  width: 24px;
  height: 24px;
  color: var(--mint);
  flex: none;
  opacity: 1;
}
.dept-head h3 {
  margin: 0;
  font-size: var(--step-2);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.dept-count {

  margin-left: auto;
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--muted);
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.dept-blurb {
  margin: var(--sp-3) 0 0;
  color: var(--muted);
  max-width: 66ch;
}
.roles-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  /* One column on a phone, two where there is genuinely room. 320px is
   * above the widest role title, so a title never wraps mid-word. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-3);
}
.roles-list > li {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease),
              transform 180ms var(--ease);
}
.roles-list > li:hover {
  border-color: var(--ocean);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.role-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.role-head strong {
  color: var(--ocean);
  font-size: var(--step-0);
  letter-spacing: -0.012em;
}
.role-level {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}
.role-sum {
  margin: var(--sp-2) 0 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.55;
}
.role-req {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--step--1);
}
.role-req-k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 2px;
}

/* ---------- role list with icons ---------- */
ul.roles.iconic { list-style: none; padding: 0; }
ul.roles.iconic li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
ul.roles.iconic li:last-child { border-bottom: 0; }
ul.roles.iconic .ico {
  width: 22px;
  height: 22px;
  color: var(--ocean);
  margin-top: 2px;
  opacity: 1;
}

/* ---------- video section ----------
 * 🔴 W-2: these are PUBLIC marketing videos. Private staff-training video
 * lives behind auth in the app and must never appear here. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.video-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-1);
}
/* 16:9 without a wrapper hack. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cloud);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}
.video-frame video,
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.video-placeholder {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  color: var(--muted);
  text-align: center;
  padding: var(--sp-4);
}
.video-placeholder .ico {
  width: 38px;
  height: 38px;
  color: var(--ocean);
  opacity: 1;
}

#promo-reel[hidden],
.promo-card[hidden] { display: none; }
.promo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
}

.video-body { padding: var(--sp-4); }
.video-body h3 {
  margin: 0 0 6px;
  font-size: var(--step-1);
  letter-spacing: -0.014em;
  color: var(--ocean);
}
.video-body p { margin: 0; color: var(--muted); font-size: var(--step--1); }



.tablist { display: none; }
.tabs-ready .tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  /* 6px so the 21px chip corners nest inside the 27px frame corners. */
  padding: 6px;
  background: var(--cloud);
  border: 1px solid var(--line);
  /* Concentric by construction: chip radius (21px) + padding (6px). Holds
   * at ONE row and at FIVE, because it never depends on the box height. */
  border-radius: 27px;
  width: fit-content;
  max-width: 100%;
}
/* The pill shape is correct while the strip is a single row;
   `.is-wrapped` is set when it measures more than one. */
.tabs-ready .tablist:not(.is-wrapped) { border-radius: 999px; }
/* Once wrapped, stretch to the container so the rows are not floating
 * inside an over-wide pill sized by the longest row. */
.tabs-ready .tablist.is-wrapped { width: 100%; }
.tablist button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  font-size: var(--step--1);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.tablist button:hover { color: var(--ink); }
.tablist button[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.tablist .ico { width: 16px; height: 16px; }

/* Panels: visible by default (no-JS), hidden only once tabs are active. */
.tabs-ready .tabpanel[hidden] { display: none; }
.tabs-ready .tabpanel {
  animation: tabfade 380ms var(--ease);
}
@keyframes tabfade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* The per-panel heading is redundant once the tab strip labels it. */
.tabs-ready .tabpanel > h3.tab-heading { display: none; }

/* ---------- stat strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}
.stats li {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
  box-shadow: var(--shadow-1);
}
.stats .ico { width: 24px; height: 24px; color: var(--mint); opacity: 1; }
.stats strong {
  display: block;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--sp-2) 0 2px;
}
.stats span { color: var(--muted); font-size: var(--step--1); }

/* ---------- section eyebrow ----------
 * Small caps label above a heading; a cheap, very effective "considered
 * layout" signal. */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--sp-3);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint);
}


@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1720;
    --text: #E8EEF4;
    --muted: #A9BCCD;
    --line: #24323F;
    --cloud: #16212C;
    --ink: #DCE9F5;

    --brand-green-text: #4FD6A0;

    --deck-face: #131E28;
    --deck-edge: #070C12;
  }

  .site-header nav a { color: #C6D6E5; }
  .doc h3 { color: #C6D6E5; }





  .flow li,
  .video-card { background: #131E28; border-color: #263544; }
  .video-frame { background: #16212C; border-bottom-color: #263544; }
  .contact-chip {
    background: #16212C;
    border-color: #263544;
    color: var(--text);
  }
  .contact-chip:hover { border-color: #7FC4EE; }
  .flow strong { color: var(--ink); }
  /* Card/flow/video headings use --ocean, which stays dark in :root, so
   * they need the same light treatment as `.card h3`. */
  .video-body h3 { color: #7FC4EE; }
  ul.roles.iconic .ico { color: #7FC4EE; }
  ul.roles.iconic li { border-bottom-color: #263544; }
  .video-placeholder .ico { color: #7FC4EE; }


  .ladder li,
  .roles-list > li { background: #131E28; border-color: #263544; }
  .roles-list > li:hover { border-color: #35495C; }
  .role-head strong { color: #7FC4EE; }
  .role-req { border-top-color: #263544; }
  .role-req-k { color: var(--ink); }
  .dept { border-top-color: #263544; }
  .dept-count { background: #16212C; border-color: #263544; }


  .tabs-ready .tablist { background: #16212C; border-color: #263544; }
  .tablist button[aria-selected="true"] {
    background: #1F2E3C;
    color: var(--ink);
  }
  .stats li { background: #131E28; border-color: #263544; }
  .stats strong { color: var(--ink); }

  a,
  .card h3,
  .site-header nav a[aria-current="page"] { color: #7FC4EE; }
  /* Filled controls keep the DARK brand colour behind light text, so their
   * contrast is unchanged from light mode. */
  .btn.primary { background: var(--ocean); border-color: var(--ocean); color: #fff; }
  .site-header nav a.cta { background: var(--mint); color: #06281B; }
  .site-header, .card { background: #131E28; }
  .btn { background: #131E28; color: var(--text); }
  .note { background: #1B2632; }
  .panel.alt .note { background: #131E28; }
  /* Shadows are invisible on dark surfaces, so depth has to come from a
   * lighter border instead. Keeping the same shadow vars would make every
   * card look flat in dark mode. */
  .card { border-color: #263544; box-shadow: none; }
  .card:hover { border-color: #35495C; transform: translateY(-2px); }
  .btn { box-shadow: none; }
  /* The hero wash is tuned for a white page; at these alphas on #0F1720 it
   * turns muddy, so re-weight it rather than reuse it. */
  .hero::before {
    /* Geometry kept in step with the light-mode rule above — if only one
     * copy is updated the two themes drift apart silently. */
    background:
      radial-gradient(60% 70% at 25% 18%,
        rgba(37, 179, 122, 0.16) 0%, transparent 72%),
      radial-gradient(65% 75% at 78% 8%,
        rgba(70, 150, 205, 0.18) 0%, transparent 74%),
      radial-gradient(55% 65% at 58% 92%,
        rgba(242, 166, 90, 0.10) 0%, transparent 76%);
  }
}


/* Sample application gallery on /brand/. Mock-ups of very different aspect
 * ratios, so the cards span the row and never crop: a printer is judging
 * placement. */
.sample-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.sample-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}

.sample-card img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--line);
}

.sample-card figcaption {
  padding: var(--sp-4);
  font-size: var(--step--1);
  color: var(--muted);
}

.sample-card figcaption strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--step-0);
  font-weight: 680;
  letter-spacing: -0.014em;
  color: var(--ocean);
}

/* Wide cards span the row. The files are published at 1400-1600px, wider
 * than the panel, so the browser only ever scales them down, never up. */
.decal-card { margin-top: var(--sp-4); }
.decal-preview {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: var(--sp-4) auto;
}
.sample-card.wide { grid-column: 1 / -1; }
.sample-card.wide img {
  margin: 0 auto;
  border-bottom: 0;
  border-radius: var(--radius-1);
}
.sample-card.wide figcaption { border-top: 1px solid var(--line); }



/* ---------- 3D deck surfaces ----------
 * Raised panels carry a solid bottom edge. Edge colours come from tokens, so
 * the light and dark themes share one rule. */
.card,
.flow li,
.video-card,
.pipe-step {
  background: var(--deck-face);
  border: 1px solid var(--line);
  border-radius: var(--deck-radius);
  box-shadow: 0 var(--deck-depth) 0 var(--deck-edge),
              0 18px 30px -18px rgba(17, 50, 77, 0.3);
  margin-bottom: var(--deck-depth);
}
.stats li,
.ladder li,
.roles-list > li,
.sample-card {
  background: var(--deck-face);
  border: 1px solid var(--line);
  border-radius: var(--deck-radius-sm);
  box-shadow: 0 var(--deck-depth) 0 var(--deck-edge),
              0 14px 24px -16px rgba(17, 50, 77, 0.28);
  margin-bottom: var(--deck-depth);
}
.card:hover,
.video-card:hover,
.roles-list > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 calc(var(--deck-depth) + 2px) 0 var(--deck-edge),
              0 24px 34px -18px rgba(17, 50, 77, 0.32);
}
.video-card { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }

/* ---------- keycap buttons ---------- */
.btn {
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--deck-edge);
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease),
              background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--deck-edge);
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--deck-edge);
}
.btn.primary {
  background: var(--ocean);
  border-color: var(--ocean);
  box-shadow: 0 4px 0 #123F5E, inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn.primary:hover {
  background: #17507a;
  box-shadow: 0 5px 0 #0E3047, inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn.primary:active {
  box-shadow: 0 1px 0 #0E3047, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.site-header nav a.cta {
  border-radius: 12px;
  box-shadow: 0 3px 0 #168558, inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.site-header nav a.cta:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #168558;
}

/* ---------- tablet icons ----------
 * A domed disc lit from the upper left: the same object the app uses for its
 * tool tiles. Tint variables are set per sector. */
.tablet {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: 50%;
  color: var(--t-ink, var(--ocean));
  background: radial-gradient(circle at 32% 24%, #fff 0%,
              var(--t-hi, #EAF1F8) 38%, var(--t-mid, #CFE0EE) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 0 var(--t-edge, #7FA6C4),
              0 12px 16px -8px rgba(17, 50, 77, 0.32);
}
.tablet::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 14px;
  width: 24px;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.tablet .ico {
  width: 24px;
  height: 24px;
  opacity: 1;
  margin: 0;
  vertical-align: 0;
}

/* ---------- hero ---------- */
.hero-sub {
  margin: 0 0 var(--sp-4);
  max-width: 38ch;
  font-size: var(--step-2);
  line-height: 1.3;
  font-weight: 640;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}
.hero .lede { font-size: var(--step-0); }
.nb { white-space: nowrap; }
.hero-title { width: fit-content; max-width: 100%; }
.accent-line {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  margin: 0 0 var(--sp-5);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(30, 95, 139, 0.07),
              rgba(37, 179, 122, 0.07));
  clip-path: inset(-14px 0 -14px 0);
}
.accent-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  border-radius: 2px;
  opacity: 0.6;
  background: linear-gradient(90deg, rgba(37, 179, 122, 0) 0%, #25B37A 38%,
              #7DF0C2 62%, rgba(37, 179, 122, 0) 100%);
  box-shadow: 0 0 8px 0 rgba(37, 179, 122, 0.3);
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .accent-line::after { animation: accent-run 9s ease-in-out infinite; }
}
@keyframes accent-run {
  0%   { transform: translate3d(-100%, 0, 0); }
  80%  { transform: translate3d(240%, 0, 0); }
  100% { transform: translate3d(240%, 0, 0); }
}

/* ---------- bento grid ---------- */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-5);
}
.sector {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.sector-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sector-label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--t-ink);
  box-shadow: 0 2px 0 var(--t-edge);
}
.sector-cards {
  flex: 1;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
.sector-commerce .sector-cards,
.sector-logistics .sector-cards { grid-auto-rows: 1fr; }
.sector-assets .sector-cards,
.sector-commerce .sector-cards { align-items: stretch; }

.sector-commerce  { --t-hi: #EAF7F1; --t-mid: #CDEBDC; --t-edge: #6FB495; --t-ink: #0F6B46; }
.sector-logistics { --t-hi: #E8F1F8; --t-mid: #CFE0EE; --t-edge: #7FA6C4; --t-ink: #1E5F8B; }
.sector-assets    { --t-hi: #FDF1E3; --t-mid: #F8DDBD; --t-edge: #D2A06A; --t-ink: #9A5712; }
.sector-work      { --t-hi: #FFFFFF; --t-mid: #DCE9F5; --t-edge: #7F9FBC; --t-ink: #11324D; }

.bento-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
  align-content: start;
  padding: var(--sp-5);
}
.bento-card .tablet { grid-row: 1 / span 2; }
.bento-card h3 { margin: 0 0 var(--sp-2); grid-column: 2; }
.bento-card p { grid-column: 2; }
.sector-assets .bento-card { grid-template-columns: minmax(0, 1fr); }
.sector-assets .bento-card .tablet { grid-row: auto; margin-bottom: var(--sp-4); }
.sector-assets .bento-card h3,
.sector-assets .bento-card p { grid-column: 1; }

.sector-work .bento-card {
  align-items: center;
  align-content: center;
  background: linear-gradient(135deg, #11324D 0%, #1E5F8B 60%, #0F6B46 130%);
  border-color: #11324D;
  box-shadow: 0 var(--deck-depth) 0 #0A1F30,
              0 18px 30px -18px rgba(17, 50, 77, 0.45);
}
.sector-work .bento-card h3 { color: #fff; }
.sector-work .bento-card p { color: #E6EEF6; max-width: 70ch; }
.sector-work .bento-card .tablet { width: 64px; height: 64px; }
.sector-work .bento-card .tablet .ico { width: 28px; height: 28px; }

@media (min-width: 640px) {
  .sector-assets .sector-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sector { grid-column: 1 / -1; }
  .sector-commerce, .sector-logistics { grid-column: span 6; }
}
@media (min-width: 1100px) {
  .sector-assets .sector-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- escrow pipeline ----------
 * Four raised steps joined by a pipe. Completed steps and the pipe turn
 * emerald; the active step sits pressed down. */
.pipeline {
  --pipe-on: #2F8A5B;
  --pipe-active-bg: #EEF8F2;
  --pipe-gap: 42px;
  list-style: none;
  margin: 0;
  padding: var(--sp-3) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pipe-gap);
}
.pipe-step {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  color: var(--muted);
}
.pipe-node {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: var(--deck-face);
  color: inherit;
}
.pipe-node .ico {
  width: 24px;
  height: 24px;
  opacity: 1;
  margin: 0;
  vertical-align: 0;
}
.pipe-step strong { display: block; margin: var(--sp-3) 0 4px; color: var(--ink); }
.pipe-step p { margin: 0; color: var(--muted); font-size: var(--step--1); }

.pipe-step:not(:last-child)::before,
.pipe-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-4) + 24px);
  top: 100%;
  width: 6px;
  height: calc(var(--pipe-gap) + 2px + var(--deck-depth));
  border-radius: 3px;
  pointer-events: none;
}
.pipe-step:not(:last-child)::after { background: var(--line); }
.pipe-step:not(:last-child)::before {
  z-index: 1;
  background: var(--emerald);
  transform: scaleY(0);
  transform-origin: top;
}
@media (min-width: 860px) {
  .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); --pipe-gap: 44px; }
  .pipe-step:not(:last-child)::before,
  .pipe-step:not(:last-child)::after {
    left: 100%;
    top: calc(var(--sp-5) + 24px);
    width: calc(var(--pipe-gap) + 2px);
    height: 6px;
  }
  .pipe-step:not(:last-child)::before {
    transform: scaleX(0);
    transform-origin: left;
  }
}

/* Resting state, also what reduced-motion visitors see: step 1 complete,
 * step 2 active, the rest waiting. */
.pipe-step:nth-child(1),
.pipe-step:nth-child(2) {
  color: var(--pipe-on);
  border-color: var(--emerald);
}
.pipe-step:nth-child(2) {
  transform: translateY(4px);
  background-color: var(--pipe-active-bg);
  box-shadow: 0 1px 0 var(--deck-edge), 0 8px 14px -12px rgba(17, 50, 77, 0.3);
}
.pipe-step:nth-child(1)::before { transform: scale(1, 1); }

@media (prefers-reduced-motion: no-preference) {
  .pipe-step:nth-child(1) { animation: pipe-s1 12s linear infinite; }
  .pipe-step:nth-child(2) { animation: pipe-s2 12s linear infinite; }
  .pipe-step:nth-child(3) { animation: pipe-s3 12s linear infinite; }
  .pipe-step:nth-child(4) { animation: pipe-s4 12s linear infinite; }
  .pipe-step:nth-child(1)::before { animation: pipe-c1v 12s linear infinite; }
  .pipe-step:nth-child(2)::before { animation: pipe-c2v 12s linear infinite; }
  .pipe-step:nth-child(3)::before { animation: pipe-c3v 12s linear infinite; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 860px) {
  .pipe-step:nth-child(1)::before { animation-name: pipe-c1h; }
  .pipe-step:nth-child(2)::before { animation-name: pipe-c2h; }
  .pipe-step:nth-child(3)::before { animation-name: pipe-c3h; }
}

@keyframes pipe-s1 {
  0%, 2%    { color: var(--muted); border-color: var(--line); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
  5%, 25%   { color: var(--pipe-on); border-color: var(--emerald); background-color: var(--pipe-active-bg); transform: translateY(4px); box-shadow: 0 1px 0 var(--deck-edge), 0 8px 14px -12px rgba(17, 50, 77, 0.3); }
  28%, 94%  { color: var(--pipe-on); border-color: var(--emerald); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
  100%      { color: var(--muted); border-color: var(--line); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
}
@keyframes pipe-s2 {
  0%, 24%   { color: var(--muted); border-color: var(--line); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
  27%, 50%  { color: var(--pipe-on); border-color: var(--emerald); background-color: var(--pipe-active-bg); transform: translateY(4px); box-shadow: 0 1px 0 var(--deck-edge), 0 8px 14px -12px rgba(17, 50, 77, 0.3); }
  53%, 94%  { color: var(--pipe-on); border-color: var(--emerald); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
  100%      { color: var(--muted); border-color: var(--line); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
}
@keyframes pipe-s3 {
  0%, 49%   { color: var(--muted); border-color: var(--line); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
  52%, 75%  { color: var(--pipe-on); border-color: var(--emerald); background-color: var(--pipe-active-bg); transform: translateY(4px); box-shadow: 0 1px 0 var(--deck-edge), 0 8px 14px -12px rgba(17, 50, 77, 0.3); }
  78%, 94%  { color: var(--pipe-on); border-color: var(--emerald); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
  100%      { color: var(--muted); border-color: var(--line); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
}
@keyframes pipe-s4 {
  0%, 74%   { color: var(--muted); border-color: var(--line); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
  77%, 92%  { color: var(--pipe-on); border-color: var(--emerald); background-color: var(--pipe-active-bg); transform: translateY(4px); box-shadow: 0 1px 0 var(--deck-edge), 0 8px 14px -12px rgba(17, 50, 77, 0.3); }
  95%, 97%  { color: var(--pipe-on); border-color: var(--emerald); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
  100%      { color: var(--muted); border-color: var(--line); background-color: var(--deck-face); transform: translateY(0); box-shadow: 0 var(--deck-depth) 0 var(--deck-edge), 0 18px 30px -18px rgba(17, 50, 77, 0.3); }
}
@keyframes pipe-c1h { 0%, 20% { transform: scaleX(0); } 28%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pipe-c2h { 0%, 45% { transform: scaleX(0); } 53%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pipe-c3h { 0%, 70% { transform: scaleX(0); } 78%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pipe-c1v { 0%, 20% { transform: scaleY(0); } 28%, 94% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes pipe-c2v { 0%, 45% { transform: scaleY(0); } 53%, 94% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes pipe-c3v { 0%, 70% { transform: scaleY(0); } 78%, 94% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

/* ---------- video cards ---------- */
.video-frame {
  background: linear-gradient(145deg, var(--cloud), var(--deck-face));
}
.video-placeholder { font-weight: 650; letter-spacing: 0.02em; }
.video-placeholder .ico {
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  padding: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #fff 0%, #EAF1F8 40%, #CFE0EE 100%);
  box-shadow: 0 4px 0 #7FA6C4, 0 12px 16px -8px rgba(17, 50, 77, 0.32);
}

/* An eyebrow inside a full-bleed band must line up with the h2 below it.
 * `inline-block` ignores the auto side margins that centre the other
 * children, so it sat at the far left edge of the band. */
.panel.alt > .eyebrow { display: block; }

/* ---------- buttons: a size down on the hero and call-to-action rows ---------- */
.hero-actions .btn,
.panel.centred .btn {
  padding: 10px 18px;
  font-size: var(--step--1);
  border-radius: 12px;
}
.hero-actions .btn.primary,
.panel.centred .btn.primary { box-shadow: 0 3px 0 #123F5E, inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.hero-actions .btn,
.panel.centred .btn { box-shadow: 0 3px 0 var(--deck-edge); }
.hero-actions .btn:active,
.panel.centred .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--deck-edge); }

/* ---------- balanced grids ----------
 * `auto-fit` leaves one card alone on the second row when there are 4 or 5
 * (3 + 1). Count the children and pick a column count that divides evenly. */
@media (min-width: 640px) {
  .grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .grid:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
  .grid:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: 4 / span 2; }
}

/* ---------- support: Q&A as a raised table ----------
 * Each question sits beside its answer. Stacks on a phone. */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-2) var(--sp-5);
  background: var(--deck-face);
  border: 1px solid var(--line);
  border-radius: var(--deck-radius);
  box-shadow: 0 var(--deck-depth) 0 var(--deck-edge),
              0 18px 30px -18px rgba(17, 50, 77, 0.3);
  margin-bottom: var(--deck-depth);
}
.faq h3 {
  margin: 0;
  padding: var(--sp-4) 0 0;
  font-size: var(--step-0);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq p {
  margin: 0;
  padding: var(--sp-1) 0 var(--sp-4);
  max-width: none;
  border-bottom: 1px solid var(--line);
}
.faq p:last-of-type { border-bottom: 0; }
@media (min-width: 860px) {
  .faq { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); column-gap: var(--sp-6); }
  .faq h3 { grid-column: 1; padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
  .faq p { grid-column: 2; padding: var(--sp-4) 0; }
  .faq h3:nth-last-of-type(1), .faq p:last-of-type { border-bottom: 0; }
}

/* ---------- smooth page-to-page language switch ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(root) { animation-duration: 260ms; }

@media (prefers-color-scheme: dark) {
  .lang-switch {
    border-color: #35495C;
    background: #0F1720;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  .site-header nav .lang-switch a { color: #C6D6E5; }
  .site-header nav .lang-switch a:hover { background: rgba(220, 233, 245, 0.1); }
  .sector-work { --t-ink: #7FC4EE; }
  .sector-work .tablet { --t-ink: #11324D; }
  .site-header nav .lang-switch .lang-seg.is-active { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4); }

  .card, .flow li, .video-card, .pipe-step, .stats li, .ladder li,
  .roles-list > li, .sample-card, .faq {
    box-shadow: 0 var(--deck-depth) 0 var(--deck-edge),
                0 18px 30px -18px rgba(0, 0, 0, 0.6);
  }
  .card:hover, .video-card:hover, .roles-list > li:hover {
    box-shadow: 0 calc(var(--deck-depth) + 2px) 0 var(--deck-edge),
                0 24px 34px -18px rgba(0, 0, 0, 0.65);
  }
  .btn.primary { box-shadow: 0 4px 0 #0C2A40, inset 0 1px 0 rgba(255, 255, 255, 0.18); }
  .site-header nav a.cta { box-shadow: 0 3px 0 #0F6B46, inset 0 1px 0 rgba(255, 255, 255, 0.25); }

  .tablet { border-color: rgba(255, 255, 255, 0.14); }
  .tablet::after { opacity: 0.35; }
  .sector-commerce  { --t-hi: #2A4A40; --t-mid: #1B3029; --t-edge: #070C12; --t-ink: #4FD6A0; }
  .sector-logistics { --t-hi: #2A4358; --t-mid: #1B2D3D; --t-edge: #070C12; --t-ink: #7FC4EE; }
  .sector-assets    { --t-hi: #4B3F2F; --t-mid: #332A1E; --t-edge: #070C12; --t-ink: #F2A65A; }
  .sector-work      { --t-hi: #FFFFFF; --t-mid: #DCE9F5; --t-edge: #7F9FBC; --t-ink: #11324D; }
  .sector-work .tablet::after { opacity: 1; }
  .sector-work .bento-card { box-shadow: 0 var(--deck-depth) 0 #060D14, 0 18px 30px -18px rgba(0, 0, 0, 0.6); }

  .pipeline { --pipe-on: #58B681; --pipe-active-bg: #17302D; }
  .pipe-step:nth-child(2) { box-shadow: 0 1px 0 var(--deck-edge); }
  .video-frame { background: linear-gradient(145deg, #16212C, #131E28); }
  .video-placeholder .ico {
    background: radial-gradient(circle at 32% 24%, #2E4256 0%, #1F3042 45%, #16212C 100%);
    box-shadow: 0 4px 0 #070C12, 0 12px 16px -8px rgba(0, 0, 0, 0.6);
  }
  .accent-line { background: linear-gradient(90deg, rgba(127, 196, 238, 0.1), rgba(79, 214, 160, 0.1)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .accent-line::after {
    width: 100%;
    transform: none;
    background: linear-gradient(90deg, rgba(37, 179, 122, 0) 0%, #25B37A 30%,
                #7DF0C2 70%, rgba(37, 179, 122, 0) 100%);
  }
  /* The blanket rule above disables TRANSITIONS, not the effects
     themselves, so two cases need explicit handling: the canvas is
     hidden, and .reveal elements are forced visible -- without that
     they stay at opacity 0 and the page looks broken. */
  .hero-canvas { display: none !important; }
  .reveal-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn:hover, .card:hover { transform: none !important; }
}