/*
  Centra Limited (centra-one.com) site styles
  Direction: "Software house you can verify". Neo-Swiss grid, brand tokens shared with the Centra One product.
  Fonts are self-hosted (Inter variable, JetBrains Mono); no third-party requests.
*/

/* ============ Fonts ============ */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.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: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 500;
  src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

/* ============ Tokens ============ */
:root {
  --paper: #F4F6FF;
  --paper-2: #E8EBF7;
  --card: #FFFFFF;
  --ink: #05060A;
  --ink-2: #0A0C14;
  --text-2: #4B5268;
  --line: rgba(5, 6, 10, .12);
  --line-2: rgba(5, 6, 10, .22);
  --blue: #1A1AFF;
  --blue-hover: #3333FF;
  --blue-2: #5B6CFF;
  --blue-3: #8B9BFF;
  --on-dark: #F4F6FF;
  --on-dark-2: #B9C0D6;
  --on-dark-3: #8E96AE;
  --line-dark: rgba(255, 255, 255, .10);
  --line-dark-2: rgba(255, 255, 255, .18);
  --red: #C4261A;
  --red-bg: #FDECEA;
  --amber: #8A5200;
  --amber-bg: #FFF3DC;
  --amber-graphic: #F2A626;
  --green: #0E7A4F;
  --green-dark: #46D69A;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step-5: clamp(2.9rem, 1.2rem + 6.6vw, 6.5rem);
  --step-4: clamp(2.6rem, 1.4rem + 5vw, 5.5rem);
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --step-1: clamp(1.15rem, 1.05rem + .45vw, 1.375rem);
  --step-0: 1.0625rem;
  --step-minus-1: .875rem;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3rem, 6vw, 4.5rem);
  --space-6: clamp(5rem, 10vw, 9rem);
  --gutter: clamp(1rem, 2.2vw, 2rem);
  --pad: clamp(1.25rem, 4vw, 3rem);
  --container: 1320px;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 18px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 68px;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.55; letter-spacing: -.011em;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 750; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 1rem; top: 1rem; padding: .75rem 1rem; translate: 0 -300%;
  background: var(--ink); color: var(--on-dark); border-radius: var(--radius-m); }
.skip-link:focus { translate: none; }
main:focus { outline: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; font-size: .92em; }
.nowrap { white-space: nowrap; }

.container { width: min(100% - 2 * var(--pad), var(--container)); margin-inline: auto; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ============ Sections ============ */
.section { padding-block: var(--space-6); }
.section--line { border-top: 1px solid var(--line); }
.section--tint { background: var(--paper-2); }
.section--dark { background: var(--ink); color: var(--on-dark); overflow-x: clip; }
.section--blue { background: var(--blue); color: #fff; }
.section--tight { padding-block: var(--space-5); }
.section-title { font-size: var(--step-4); line-height: .95; letter-spacing: -.05em; }
.section-title--m { font-size: var(--step-3); line-height: 1; letter-spacing: -.045em; }
.section-head { row-gap: var(--space-3); align-items: end; }
.section-head .section-title { grid-column: 1 / span 6; }
.section-head__intro { grid-column: 8 / span 5; color: var(--text-2); font-size: var(--step-1); line-height: 1.45; }
.section--dark .section-head__intro { color: var(--on-dark-2); }
.label { font-size: .9375rem; font-weight: 600; color: var(--blue); margin-bottom: var(--space-2); }
.section--dark .label { color: var(--blue-3); }
.lead { font-size: var(--step-1); line-height: 1.45; color: var(--text-2); max-width: 40ch; }
.section-foot { margin-top: var(--space-4); }
@media (max-width: 899px) {
  .section-head .section-title, .section-head__intro { grid-column: 1 / -1; }
}

/* ============ Buttons and links ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .75rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--radius-m);
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--on-dark { background: transparent; color: var(--on-dark); border-color: var(--line-dark-2); }
.btn--on-dark:hover { border-color: var(--on-dark); }
.btn--white { background: #fff; color: var(--blue); }
.btn--white:hover { background: var(--paper); }
.btn--on-blue { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn--on-blue:hover { border-color: #fff; }
.btn[disabled] { cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.text-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.text-link:hover { text-decoration: underline; }
.section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--blue-3); }
.section--blue :focus-visible { outline-color: #fff; }

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 246, 255, .97);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .25s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: var(--space-2); }
.brand {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  color: var(--ink); text-decoration: none; font-weight: 750; font-size: 1.125rem; letter-spacing: -.035em;
}
.site-nav__list { display: flex; gap: .125rem; list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem;
  color: var(--text-2); text-decoration: none; font-size: .9375rem; font-weight: 500;
}
.site-nav__link:hover { color: var(--ink); }
.site-nav__link[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; text-decoration-color: var(--blue); }
.site-header__cta { min-height: 42px; padding: .55rem 1rem; margin-left: var(--space-1); }
.site-header__menu {
  display: none; align-items: center; min-height: 44px; padding: 0 1rem;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius-m);
  font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 auto 0; width: 100%; max-width: none; margin: 0;
  max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  padding: var(--space-2) var(--pad) var(--space-4);
  background: var(--paper); color: var(--ink); border: 0; border-bottom: 1px solid var(--line);
}
.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__link {
  display: block; padding: .8rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em;
}
.mobile-menu .btn { margin-top: var(--space-3); width: 100%; }
@media (max-width: 1099px) {
  .site-nav { display: none; }
  .site-header__menu { display: inline-flex; }
}
@media (max-width: 479px) {
  .site-header__cta { display: none; }
}

/* ============ Home hero ============ */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) var(--space-6); }
.hero__title { font-size: var(--step-5); line-height: .94; letter-spacing: -.055em; max-width: 15ch; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero__accent { color: var(--blue); }
.hero__grid { row-gap: var(--space-4); align-items: start; }
.hero__intro { grid-column: 1 / span 6; }
.hero__lead { font-size: var(--step-1); line-height: 1.45; color: var(--text-2); max-width: 38ch; margin-bottom: var(--space-4); }
.hero__lead strong { color: var(--ink); font-weight: 600; }
.factsheet { grid-column: 8 / span 5; margin: 0; border-top: 1.5px solid var(--ink); }
.factsheet__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-2); padding: .85rem 0; border-bottom: 1px solid var(--line); }
.factsheet dt { font-size: var(--step-minus-1); color: var(--text-2); padding-top: .1em; }
.factsheet dd { margin: 0; font-weight: 500; }
.factsheet a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.65rem; }
@media (max-width: 899px) {
  .hero__intro, .factsheet { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title, .js .page-hero__title { animation: rise .9s var(--ease-out) both; }
  .js .hero__grid, .js .page-hero__body { animation: lift .8s .25s var(--ease-out) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(.25em); } }
@keyframes lift { from { opacity: 0; transform: translateY(14px); } }

/* ============ Page hero (sub-pages) ============ */
.page-hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-5); border-bottom: 1px solid var(--line); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; padding: 0; margin: 0 0 var(--space-3); font-size: .875rem; color: var(--text-2); }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--line-2); }
.breadcrumb a { color: var(--text-2); }
.page-hero__title { font-size: clamp(2.75rem, 1.3rem + 5.6vw, 6rem); line-height: .94; letter-spacing: -.055em; max-width: 16ch; }
.page-hero__body { margin-top: var(--space-4); row-gap: var(--space-3); align-items: start; }
.page-hero__lead { grid-column: 1 / span 7; font-size: var(--step-1); line-height: 1.45; color: var(--text-2); max-width: 46ch; }
.page-hero__aside { grid-column: 9 / span 4; }
@media (max-width: 899px) {
  .page-hero__lead, .page-hero__aside { grid-column: 1 / -1; }
}

/* ============ Jump links ============ */
.jump { margin-top: var(--space-4); }
.jump__list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.jump__link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem;
  border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 500;
}
.jump__link:hover { border-color: var(--ink); }
.jump__link .mono { color: var(--blue); font-size: .8125rem; }

/* ============ Spec table ============ */
.spec-table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); }
.spec-table thead th {
  text-align: left; font-size: .8125rem; font-weight: 600; color: var(--text-2);
  padding: 0 1.5rem .75rem 0; border-bottom: 1.5px solid var(--ink);
}
.spec-table tbody th, .spec-table td { padding: 1.6rem 1.5rem 1.6rem 0; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); }
.spec-table tbody th { width: 32%; font-size: var(--step-2); line-height: 1.08; letter-spacing: -.035em; font-weight: 750; }
.spec-table tbody th a { color: inherit; text-decoration: none; }
.spec-table tbody th a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.spec-table td { width: 38%; color: var(--text-2); }
.spec-table td.spec-table__get { width: 30%; color: var(--ink); }
.spec-table__num { display: block; font-family: var(--font-mono); font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--blue); margin-bottom: .5rem; }
@media (max-width: 899px) {
  .spec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: auto !important; }
  .spec-table tr { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
  .spec-table tbody th, .spec-table td { padding: 0; border: 0; }
  .spec-table tbody th { margin-bottom: .75rem; }
  .spec-table td + td { margin-top: .75rem; }
  .spec-table td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; color: var(--text-2); margin-bottom: .15rem; }
}

/* ============ Detail blocks (services, standards, approach) ============ */
.detail { row-gap: var(--space-3); padding-block: var(--space-5); border-top: 1.5px solid var(--ink); }
.detail:first-child { border-top-width: 1.5px; }
.detail__head { grid-column: 1 / span 5; }
.detail__num { display: block; font-family: var(--font-mono); font-size: .875rem; color: var(--blue); margin-bottom: .6rem; }
.detail__title { font-size: var(--step-3); line-height: 1; letter-spacing: -.045em; }
.detail__body { grid-column: 7 / span 6; }
.detail__body > p { color: var(--text-2); font-size: var(--step-1); line-height: 1.45; max-width: 46ch; }
.detail__body > p + p { margin-top: 1rem; }
.detail__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--gutter); margin-top: var(--space-4); }
.detail__cols h3 { font-size: .9375rem; font-weight: 650; letter-spacing: -.01em; margin-bottom: .6rem; }
@media (max-width: 899px) {
  .detail__head, .detail__body { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .detail__cols { grid-template-columns: 1fr; }
}

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.25rem; color: var(--text-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--blue); border-radius: 1px; }
.section--dark .ticks li { color: var(--on-dark-2); }
.section--dark .ticks li::before { background: var(--blue-3); }

/* ============ Case study (signature) ============ */
.case__facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gutter); margin: var(--space-5) 0 0; border-top: 1.5px solid var(--ink); }
.case__fact { padding: .9rem 0; }
.case__fact dt { font-size: .8125rem; color: var(--text-2); }
.case__fact dd { margin: .2rem 0 0; font-weight: 600; font-size: .9375rem; }
.story__layout { margin-top: var(--space-4); }
.story__figure {
  grid-column: 1 / span 7;
  position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start;
  height: calc(100svh - var(--header-h) - 3rem); max-height: 50rem; min-height: 34rem;
  display: grid; place-items: center; align-content: center; gap: var(--space-3);
}
.story__steps { grid-column: 9 / span 4; list-style: none; margin: 0; padding: 0; }
.story__step { min-height: 70svh; display: grid; align-content: center; padding-block: var(--space-4); }
.story__step:first-child { min-height: 52svh; align-content: start; padding-top: 4rem; }
.story__num { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-2); transition: color .3s; }
.story__step.is-active .story__num { color: var(--blue); }
.story__step h3 { font-size: var(--step-2); line-height: 1.08; letter-spacing: -.035em; margin: .6rem 0 1rem; }
.story__step p { color: var(--text-2); max-width: 38ch; }

.board { width: 100%; max-width: 44rem; }
.board__frame {
  border: 1px solid var(--line-2); border-radius: var(--radius-l); padding: 1rem;
  background: var(--card); box-shadow: 0 40px 80px -44px rgba(5, 6, 10, .4);
  transition: background-color .6s var(--ease-out), border-color .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.record__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; padding: .25rem .25rem 1rem; transition: opacity .5s .25s; }
.record__name { font-weight: 700; font-size: 1.125rem; letter-spacing: -.025em; }
.record__sku { font-size: .75rem; color: var(--text-2); }
.record__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.record__alert {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
  margin-top: .75rem; padding: .9rem 1rem; border-radius: var(--radius-m);
  background: var(--ink); color: var(--on-dark); font-size: .9375rem; transition: opacity .5s .35s;
}
.record__alert strong { color: var(--amber-graphic); }
.record__alert small { color: var(--on-dark-2); font-size: .8125rem; }
.frag {
  display: grid; min-height: 9rem; padding: 1rem 1.1rem;
  background: var(--paper); border: 1px solid transparent; border-radius: var(--radius-m);
  transition: transform .9s var(--ease-out), box-shadow .6s var(--ease-out), background-color .6s, border-color .4s;
}
.frag > * { grid-area: 1 / 1; min-width: 0; }
.frag__before { opacity: 0; transition: opacity .35s; }
.frag__after { opacity: 1; transition: opacity .45s .3s; align-self: start; }
.frag__file {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: .75rem; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frag__icon { flex: none; width: 10px; height: 12px; border-radius: 2px; background: #1D7044; }
.frag__icon--app { background: var(--blue-2); }
.frag__icon--head { width: 12px; height: 12px; border-radius: 50%; background: #A78BFA; }
.frag__line { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; font-weight: 600; font-size: .9375rem; }
.frag__flag { display: inline-block; padding: .2rem .5rem; border-radius: var(--radius-s); font-size: .8125rem; font-weight: 600; background: var(--red-bg); color: var(--red); transition: background-color .4s, color .4s; }
.frag__flag--amber { background: var(--amber-bg); color: var(--amber); }
.frag__label { font-size: .8125rem; color: var(--text-2); }
.frag__value { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.2; margin: .15rem 0 .35rem; font-variant-numeric: tabular-nums; }
.frag__meta { font-size: .8125rem; color: var(--text-2); }
.frag--stock { --sx: -12%; --sy: -50%; --sr: -7deg; }
.frag--quote { --sx: 22%; --sy: -62%; --sr: 6deg; }
.frag--po { --sx: -14%; --sy: 52%; --sr: 4deg; }
.frag--head { --sx: 18%; --sy: 66%; --sr: -5deg; }
.board:is([data-step="1"], [data-step="2"]) .board__frame { background: transparent; border-color: transparent; box-shadow: none; }
.board:is([data-step="1"], [data-step="2"]) .record__head,
.board:is([data-step="1"], [data-step="2"]) .record__alert { opacity: 0; transition-delay: 0s; }
.board:is([data-step="1"], [data-step="2"]) .frag {
  transform: translate(var(--sx), var(--sy)) rotate(var(--sr));
  background: var(--card); border-color: var(--line); box-shadow: 0 24px 44px -22px rgba(5, 6, 10, .45);
}
.board:is([data-step="1"], [data-step="2"]) .frag__before { opacity: 1; transition-delay: .2s; }
.board:is([data-step="1"], [data-step="2"]) .frag__after { opacity: 0; transition-delay: 0s; }
.board[data-step="2"] .frag { border-color: rgba(196, 38, 26, .4); }
.board[data-step="2"] .frag__flag { background: var(--red); color: #fff; }
.board[data-step="2"] .frag__flag--amber { background: var(--amber); color: #fff; }
.board[data-step="4"] .board__frame { border-color: var(--blue); }
.board__caption { font-size: var(--step-minus-1); color: var(--text-2); text-align: center; min-height: 1.5em; transition: opacity .4s; }
.board:not([data-step="4"]) + .board__caption { opacity: 0; }
.story__progress { display: flex; gap: 6px; width: 8rem; }
.story__progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--line-2); transition: background-color .3s; }
.story__progress[data-step="1"] span:nth-child(-n+1),
.story__progress[data-step="2"] span:nth-child(-n+2),
.story__progress[data-step="3"] span:nth-child(-n+3),
.story__progress[data-step="4"] span { background: var(--blue); }
.case__bridge { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); row-gap: var(--space-3); align-items: end; }
.case__bridge-text { grid-column: 1 / span 8; font-size: var(--step-3); line-height: 1.04; letter-spacing: -.045em; font-weight: 700; }
.case__bridge .actions { grid-column: 9 / span 4; justify-content: flex-end; }
.figure-static { display: grid; place-items: center; gap: var(--space-2); padding: clamp(1rem, 4vw, 3rem); background: var(--paper-2); border-radius: var(--radius-l); }
@media (max-width: 899px) {
  .case__facts { grid-template-columns: 1fr 1fr; }
  .case__fact { border-bottom: 1px solid var(--line); }
  .story__layout { display: flex; flex-direction: column; }
  .story__figure { position: static; height: auto; min-height: 0; max-height: none; order: 2; margin-top: var(--space-3); }
  .story__step, .story__step:first-child { min-height: 0; padding-block: var(--space-3); padding-top: var(--space-3); }
  .story__progress { display: none; }
  .frag { min-height: 0; }
  .case__bridge-text, .case__bridge .actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 479px) {
  .record__grid { grid-template-columns: 1fr; }
  .case__facts { grid-template-columns: 1fr; }
}

/* ============ Modules list (case study) ============ */
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.module { padding: 1.25rem 0 1.75rem; border-top: 1px solid var(--line-2); }
.module h3 { font-size: var(--step-1); letter-spacing: -.025em; font-weight: 650; margin-bottom: .35rem; }
.module p { color: var(--text-2); }
@media (max-width: 899px) { .modules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .modules { grid-template-columns: 1fr; } }

.stack-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.stack-table th, .stack-table td { text-align: left; padding: .9rem 1rem .9rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.stack-table th { font-family: var(--font-mono); font-weight: 500; font-size: .875rem; letter-spacing: 0; width: 34%; }
.stack-table td { color: var(--text-2); }

/* ============ Responsible AI (dark) ============ */
.ai__grid { row-gap: var(--space-5); align-items: center; }
.ai__copy { grid-column: 1 / span 6; }
.ai__title { font-size: var(--step-3); line-height: 1; letter-spacing: -.045em; margin-bottom: var(--space-3); }
.ai__lead { color: var(--on-dark-2); font-size: var(--step-1); line-height: 1.45; max-width: 38ch; }
.ai__rules { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gutter); margin: var(--space-4) 0; }
.ai__rule { padding: 1rem 0; border-top: 1px solid var(--line-dark-2); }
.ai__rule dt { font-weight: 650; letter-spacing: -.015em; }
.ai__rule dd { margin: .3rem 0 0; color: var(--on-dark-2); font-size: .9375rem; }
.ai__visual { grid-column: 8 / span 5; display: grid; position: relative; }
.ai__visual > * { grid-area: 1 / 1; }
.binmap {
  display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; align-self: start; justify-self: end;
  width: 108%; margin-right: -14%; margin-top: -3rem; opacity: .6;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 35%, #000 40%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 70% 35%, #000 40%, transparent 78%);
}
.binmap span { aspect-ratio: 1; border-radius: 2px; background: rgba(91, 108, 255, var(--o, .4)); }
.binmap span.is-low { background: var(--amber-graphic); }
.binmap span.is-out { background: #E5484D; }
.po-figure { margin: 0; align-self: end; position: relative; z-index: 1; margin-top: 7rem; max-width: 27rem; }
.po { background: var(--ink-2); border: 1px solid var(--line-dark-2); border-radius: var(--radius-l); padding: 1.4rem; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); color: var(--on-dark); }
.po__top { display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; }
.po__id { color: var(--on-dark-2); }
.po__by { color: var(--blue-3); font-weight: 600; }
.po__supplier { font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; margin: 1rem 0 .75rem; }
.po__lines { width: 100%; border-collapse: collapse; font-size: .875rem; }
.po__lines td { padding: .6rem 0; border-top: 1px solid var(--line-dark); color: var(--on-dark-2); vertical-align: top; }
.po__lines td:last-child { text-align: right; color: var(--on-dark); padding-left: 1rem; }
.po__lines tr.po__total td { color: var(--on-dark); font-weight: 600; border-top-color: var(--line-dark-2); }
.po__actions { display: flex; align-items: center; gap: .75rem; margin-top: 1.1rem; flex-wrap: wrap; }
.po__approve { flex: 1 1 auto; }
.po__approve[disabled] { background: #10331F; color: var(--green-dark); }
.po__reset { min-height: 44px; padding: 0 .5rem; background: none; border: 0; color: var(--on-dark-2); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: .875rem; }
.po__status { margin-top: .9rem; font-size: .8125rem; color: var(--amber-graphic); display: flex; align-items: center; gap: .5rem; }
.po__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.po__status.is-sent { color: var(--green-dark); }
.po-figure figcaption { margin-top: .9rem; font-size: .8125rem; color: var(--on-dark-3); max-width: 36ch; }
@media (max-width: 899px) {
  .ai__copy, .ai__visual { grid-column: 1 / -1; }
  .binmap { width: 100%; margin-right: 0; margin-top: 0; }
  .po-figure { margin-top: 5rem; }
}
@media (max-width: 479px) {
  .ai__rules { grid-template-columns: 1fr; }
}

/* ============ Stages (approach) ============ */
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gutter); list-style: none; padding: 0; margin: var(--space-5) 0 0; counter-reset: stage; }
.stage { position: relative; padding-top: 2.25rem; }
.stage::before { content: ""; position: absolute; top: .55rem; left: 0; right: calc(-1 * var(--gutter)); height: 2px; background: var(--ink); }
.stage:last-child::before { right: 0; }
.stage::after { content: ""; position: absolute; top: 0; left: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--blue); }
.stage__num { font-family: var(--font-mono); font-size: .8125rem; color: var(--blue); }
.stage h3 { font-size: var(--step-2); letter-spacing: -.035em; line-height: 1.08; margin: .3rem 0 .6rem; }
.stage p { color: var(--text-2); }
.stage__gate { display: inline-block; margin-top: .9rem; font-size: .8125rem; font-weight: 600; color: var(--ink); padding: .25rem .6rem; border: 1px solid var(--line-2); border-radius: 999px; }
@media (max-width: 899px) {
  .stages { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .stage::before { right: 0; }
}
@media (max-width: 479px) { .stages { grid-template-columns: 1fr; } }

/* ============ Standards grid ============ */
.standards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.standard { padding: 1.5rem 0 2.25rem; border-top: 1.5px solid var(--ink); }
.standard__area { font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.standard__name { font-size: var(--step-2); line-height: 1.08; letter-spacing: -.035em; margin: .5rem 0 .9rem; }
.standard__name a { color: inherit; text-decoration: none; }
.standard__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.standard__body { color: var(--text-2); max-width: 36ch; }
.note { margin-top: var(--space-3); color: var(--text-2); font-size: var(--step-minus-1); }
@media (max-width: 899px) { .standards__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .standards__grid { grid-template-columns: 1fr; } }

/* ============ Commitments (blue field) ============ */
.commitments .section-title { max-width: 12ch; margin-bottom: var(--space-5); }
.commitments__list { list-style: none; margin: 0; padding: 0; }
.commitment { row-gap: var(--space-2); padding-block: var(--space-4); border-top: 1px solid rgba(255, 255, 255, .35); }
.commitment__claim { grid-column: 1 / span 7; font-size: var(--step-3); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; }
.commitment__proof { grid-column: 9 / span 4; color: rgba(255, 255, 255, .9); align-self: end; }
@media (max-width: 899px) { .commitment__claim, .commitment__proof { grid-column: 1 / -1; } }

/* ============ Procurement ============ */
.procurement__grid { row-gap: var(--space-5); align-items: start; }
.procurement__copy { grid-column: 1 / span 6; }
.procurement__copy .section-title { margin-bottom: var(--space-3); }
.benefits { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.benefit { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.benefit h3 { font-size: var(--step-1); letter-spacing: -.025em; font-weight: 650; margin-bottom: .3rem; }
.benefit p { color: var(--text-2); }
.pack { grid-column: 8 / span 5; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.25rem, 3vw, 2rem); position: sticky; top: calc(var(--header-h) + 2rem); }
.pack__title { font-size: var(--step-1); letter-spacing: -.025em; font-weight: 650; margin-bottom: 1rem; }
.pack__list { margin: 0 0 1.5rem; }
.pack__row { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.pack__row dt { font-size: .8125rem; color: var(--text-2); padding-top: .15em; }
.pack__row dd { margin: 0; font-weight: 500; font-size: .9375rem; }
.pack .btn { width: 100%; }
.pack__note { margin-top: .75rem; font-size: .8125rem; color: var(--text-2); text-align: center; }
@media (max-width: 899px) { .procurement__copy, .pack { grid-column: 1 / -1; position: static; } }

/* ============ FAQ ============ */
.faq { margin-top: var(--space-4); border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; padding: 1rem 0;
  cursor: pointer; list-style: none; font-size: var(--step-1); font-weight: 650; letter-spacing: -.025em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.5rem; color: var(--blue); transition: rotate .25s var(--ease-out); }
.faq details[open] summary::after { rotate: 45deg; }
.faq__answer { padding: 0 0 1.5rem; color: var(--text-2); max-width: 62ch; }
.faq__answer p + p { margin-top: .75rem; }

/* ============ Two-up columns ============ */
.split { row-gap: var(--space-4); align-items: start; }
.split__main { grid-column: 1 / span 6; }
.split__side { grid-column: 8 / span 5; }
@media (max-width: 899px) { .split__main, .split__side { grid-column: 1 / -1; } }

.dl-table { margin: 0; border-top: 1.5px solid var(--ink); }
.dl-table__row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-2); padding: .9rem 0; border-bottom: 1px solid var(--line); }
.dl-table dt { font-size: var(--step-minus-1); color: var(--text-2); padding-top: .1em; }
.dl-table dd { margin: 0; font-weight: 500; }
@media (max-width: 479px) { .dl-table__row { grid-template-columns: 1fr; gap: .2rem; } }

/* ============ CTA band ============ */
.cta-band { row-gap: var(--space-3); align-items: end; }
.cta-band__title { grid-column: 1 / span 8; font-size: var(--step-3); line-height: 1; letter-spacing: -.045em; }
.cta-band__side { grid-column: 9 / span 4; }
.cta-band__side p { color: rgba(255, 255, 255, .9); margin-bottom: var(--space-3); }
.cta-band__side a:not(.btn) { color: #fff; }
@media (max-width: 899px) { .cta-band__title, .cta-band__side { grid-column: 1 / -1; } }

/* ============ Next links ============ */
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.next__link { display: block; height: 100%; padding: 1.25rem 0 1.5rem; border-top: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; }
.next__title { display: block; font-size: var(--step-1); font-weight: 650; letter-spacing: -.025em; margin-bottom: .3rem; }
.next__desc { display: block; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) { .next__link:hover .next__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; } }
@media (max-width: 899px) { .next { grid-template-columns: 1fr; } }

/* ============ Prose (legal pages) ============ */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--step-2); letter-spacing: -.035em; line-height: 1.1; margin: var(--space-4) 0 .9rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); letter-spacing: -.02em; margin: var(--space-3) 0 .6rem; }
.prose p, .prose li { color: var(--text-2); }
.prose p + p { margin-top: 1rem; }
.prose ul { padding-left: 1.25rem; margin: .75rem 0 1rem; display: grid; gap: .4rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose__meta { font-size: var(--step-minus-1); color: var(--text-2); margin-bottom: var(--space-4); }

/* ============ Contact ============ */
.contact__grid { row-gap: var(--space-5); }
.contact__copy { grid-column: 1 / span 5; }
.contact__details { display: grid; gap: var(--space-3); }
.contact__details h2, .contact__details h3 { font-size: .8125rem; font-weight: 600; color: var(--text-2); margin-bottom: .25rem; letter-spacing: -.005em; }
.contact__email { font-size: var(--step-2); font-weight: 650; letter-spacing: -.035em; }
.contact__details p { color: var(--text-2); }
.enquiry { grid-column: 7 / span 6; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.25rem, 3vw, 2.25rem); }
.enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field { margin-bottom: .35rem; }
.field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .4rem; }
.field .opt { font-weight: 400; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-m); transition: border-color .2s;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--blue); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--red); }
.field__error { min-height: 1.4em; margin: .3rem 0 0; color: var(--red); font-size: .875rem; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry .btn { width: 100%; margin-top: .5rem; }
.enquiry__note { margin-top: .9rem; font-size: .8125rem; color: var(--text-2); text-align: center; }
.form__status { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-m); font-weight: 600; }
.form__status--ok { background: #E7F6EE; color: var(--green); }
.form__status--error { background: var(--red-bg); color: var(--red); }
.form__status--error a { color: inherit; }
@media (max-width: 899px) { .contact__copy, .enquiry { grid-column: 1 / -1; } }
@media (max-width: 599px) { .enquiry__row { grid-template-columns: 1fr; } }

/* ============ 404 / message pages ============ */
.message { padding-block: var(--space-6); min-height: 60svh; }
.message__code { font-family: var(--font-mono); color: var(--blue); font-size: .875rem; margin-bottom: var(--space-2); }
.message__title { font-size: var(--step-4); line-height: .95; letter-spacing: -.05em; max-width: 14ch; margin-bottom: var(--space-3); }
.message__lead { color: var(--text-2); font-size: var(--step-1); line-height: 1.45; max-width: 44ch; margin-bottom: var(--space-4); }

/* ============ Footer ============ */
.site-footer { background: var(--ink); color: var(--on-dark); padding-top: var(--space-5); overflow-x: clip; }
.site-footer__grid { row-gap: var(--space-4); }
.site-footer__about { grid-column: 1 / span 4; color: var(--on-dark-2); max-width: 34ch; }
.site-footer__about .brand { color: var(--on-dark); margin-bottom: var(--space-2); }
.site-footer__col { grid-column: span 2; }
.site-footer__col:first-of-type { grid-column: 5 / span 2; }
.site-footer__col h2 { font-size: .8125rem; font-weight: 600; color: var(--on-dark-3); letter-spacing: -.005em; margin-bottom: .5rem; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-dark); text-decoration: none; font-size: .9375rem; }
.site-footer__col a:hover { text-decoration: underline; }
.wordmark { margin: var(--space-5) 0 0; font-size: min(13.4vw, 12.25rem); font-weight: 800; letter-spacing: -.05em; line-height: .8; white-space: nowrap; color: var(--on-dark); user-select: none; }
.site-footer__base { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding-block: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--line-dark); font-size: .8125rem; color: var(--on-dark-3); }
@media (max-width: 1099px) {
  .site-footer__about { grid-column: 1 / -1; }
  .site-footer__col, .site-footer__col:first-of-type { grid-column: span 3; }
}
@media (max-width: 599px) {
  .site-footer__col, .site-footer__col:first-of-type { grid-column: span 6; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .mobile-menu, .site-footer .wordmark, .skip-link, .ai__visual, .story__figure { display: none !important; }
  body { background: #fff; }
  .section--dark, .section--blue { background: #fff; color: var(--ink); }
}

/* Static before/after boards on the case study page */
.figure-static { margin: 0; }
.figure-static--before { padding-block: clamp(5rem, 9vw, 7rem); overflow-x: clip; }
.figure-static--before .board__frame { padding: 0; }
.figure-static .board + .board__caption { opacity: 1; }
.section--blue .cta-band__side p, .section--blue .cta-band__side a:not(.btn) { color: #fff; }
.section--tint .cta-band__side p { color: var(--text-2); }
.stage h2 { font-size: var(--step-2); letter-spacing: -.035em; line-height: 1.08; margin: .3rem 0 .6rem; }
.page-hero .stages { margin-top: var(--space-5); }
.contact__details h2 { margin-bottom: .25rem; }
.split__side > .ticks { margin-top: .4rem; }
.pack .ticks { margin-bottom: var(--space-3); }
/* Comfortable tap targets for standalone links */
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.6rem; }
.dl-table dd > a:only-child, .ticks li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.6rem; }
/* Case study "before" board: gentler scatter so cards stay inside the panel */
.figure-static--before { padding: 3.5rem clamp(1.25rem, 3vw, 2.25rem); }
.figure-static--before .frag--stock { --sx: -3%; --sy: -12%; --sr: -5deg; }
.figure-static--before .frag--quote { --sx: 3%; --sy: -20%; --sr: 4deg; }
.figure-static--before .frag--po { --sx: -4%; --sy: 14%; --sr: 3deg; }
.figure-static--before .frag--head { --sx: 4%; --sy: 20%; --sr: -4deg; }
.figure-static .frag__line { font-size: .875rem; }
.figure-static .board__caption { margin-top: 1.25rem; }
.case__facts--big dd { font-size: var(--step-1); font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }