/* Multi-Weigh Technologies: the line.
   Floor (navy) is where the machines live: header, page heads, the 3D journey, the closing band, the footer.
   Record (label white) is where the data is written: everything you read.
   One structural device: a process line with nodes and the traceability thread. It only draws real sequences. */

:root {
  --floor: #0B1633;
  --floor-2: #13224A;
  --floor-3: #20315E;
  --record: #FAFBFC;
  --steel: #E9EEF3;
  --ink: #0B1633;
  --slate: #48566E;
  --mist: #A9B8CE;
  --cloud: #D3DDEA;
  --trace: #00ADEE;
  --trace-deep: #0077B3;
  --cabinet: #F58027;
  --cabinet-hover: #FF9340;
  --rule: #D3DAE3;
  --rule-floor: rgba(169, 184, 206, 0.22);
  --sa-accent: #F58027;
  --sa-accent-ink: #0B1633;

  --display: 'Zalando Sans Expanded', 'Zalando Sans', system-ui, sans-serif;
  --label: 'Zalando Sans SemiExpanded', 'Zalando Sans', system-ui, sans-serif;
  --body: 'Zalando Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1296px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --sec: clamp(72px, 9vw, 128px);
  --sec-plain: clamp(48px, 5.6vw, 80px);
  --top-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0; background: var(--record); color: var(--ink);
  font: 400 18px/1.62 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--trace-deep); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 200; letter-spacing: -0.015em; line-height: 1.08; }
h3, h4 { font-family: var(--label); font-weight: 500; line-height: 1.3; letter-spacing: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--trace-deep); outline-offset: 3px; }
.top :focus-visible, .head :focus-visible, .journey :focus-visible, .close :focus-visible, .foot :focus-visible, .menu :focus-visible, .band--floor :focus-visible { outline-color: var(--trace); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cabinet); color: var(--ink); padding: 12px 16px; font: 500 15px var(--label); border-radius: 2px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------------ buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  background: var(--cabinet); color: var(--ink); border: 0; border-radius: 2px; cursor: pointer;
  font: 500 15px/1.1 var(--label); text-decoration: none; letter-spacing: 0.005em;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: var(--cabinet-hover); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn--floor { background: var(--floor-3); color: #fff; }
.btn--floor:hover { background: #2B4079; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #1C2C59; }
.tel {
  font: 500 17px/1.2 var(--label); color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--trace-deep); text-underline-offset: 6px; text-decoration-thickness: 1.5px; white-space: nowrap;
}
.head .tel, .close .tel, .journey .tel, .menu .tel, .tel--floor { color: #fff; text-decoration-color: var(--trace); }
.textlink { font: 500 15px/1.3 var(--label); color: var(--trace-deep); text-decoration: underline; text-underline-offset: 5px; }
.textlink--floor { color: var(--trace); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }

/* ------------------------------------------------------------------ header and the line nav */
.top {
  position: sticky; top: 0; z-index: 40; height: var(--top-h); display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter); background: var(--floor); color: #fff; border-bottom: 1px solid var(--rule-floor);
}
.brand { flex: none; display: block; line-height: 0; }
.brand img { width: 193px; height: auto; }
.top__actions { margin-left: auto; display: flex; align-items: center; gap: 18px; flex: none; }
.top__tel { font: 500 15px var(--label); color: #fff; text-decoration: none; white-space: nowrap; }
.top__tel:hover { text-decoration: underline; text-decoration-color: var(--trace); }
.menu-btn {
  min-height: 44px; padding: 0 16px; background: transparent; color: #fff; border: 1px solid rgba(169, 184, 206, 0.5);
  border-radius: 2px; font: 500 14px var(--label); cursor: pointer;
}
.menu-btn:hover { border-color: #fff; }

.linenav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.linenav ol {
  list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  width: min(620px, 100%); padding-top: 18px;
}
.linenav ol::before, .linenav ol::after { content: ""; position: absolute; top: 22px; left: 10%; height: 1px; }
.linenav ol::before { right: 10%; background: rgba(169, 184, 206, 0.36); }
.linenav ol::after { width: calc(80% * var(--p, 0)); height: 2px; top: 21.5px; background: var(--trace); box-shadow: 0 0 10px rgba(0, 173, 238, 0.7); transition: width 0.25s linear; }
.linenav.is-off ol::after { display: none; }
.linenav li { position: relative; text-align: center; }
.linenav a {
  display: block; padding: 16px 4px 6px; color: var(--mist); text-decoration: none; font: 500 13px/1.2 var(--label); white-space: nowrap;
}
.linenav a::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--floor); border: 1.5px solid var(--mist); transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.linenav a:hover { color: #fff; }
.linenav a:hover::before { border-color: #fff; }
.linenav li.is-passed a::before { background: var(--trace); border-color: var(--trace); }
.linenav a[aria-current="page"], .linenav li.is-live a { color: #fff; }
.linenav a[aria-current="page"]::before, .linenav li.is-live a::before {
  background: var(--trace); border-color: var(--trace); box-shadow: 0 0 0 4px rgba(0, 173, 238, 0.22), 0 0 14px rgba(0, 173, 238, 0.8);
}

/* home: the header floats over the journey, then settles */
.home .top { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background-color 0.3s, border-color 0.3s; }
.home .top.is-solid { background: rgba(11, 22, 51, 0.92); border-bottom-color: var(--rule-floor); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ------------------------------------------------------------------ the menu */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--floor); color: #fff; overflow-y: auto; overscroll-behavior: contain; }
.menu[hidden] { display: none; }
.menu__inner { max-width: var(--wrap); margin: 0 auto; padding: 88px var(--gutter) 64px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; position: relative; }
.menu__close { position: absolute; top: 16px; right: var(--gutter); min-height: 44px; padding: 0 16px; background: transparent; color: #fff; border: 1px solid rgba(169, 184, 206, 0.5); border-radius: 2px; font: 500 14px var(--label); cursor: pointer; }
.menu h2 { font: 500 14px var(--label); color: var(--mist); letter-spacing: 0; margin-bottom: 20px; }
.menu__line { list-style: none; position: relative; }
.menu__line::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1px; background: rgba(169, 184, 206, 0.36); }
.menu__line a { position: relative; display: block; padding: 10px 0 14px 30px; color: #fff; text-decoration: none; }
.menu__line a::before { content: ""; position: absolute; left: 0; top: 17px; width: 11px; height: 11px; border-radius: 50%; background: var(--floor); border: 1.5px solid var(--trace); }
.menu__line a[aria-current="page"]::before, .menu__line a:hover::before { background: var(--trace); }
.menu__line b { display: block; font: 200 30px/1.15 var(--display); letter-spacing: -0.01em; }
.menu__line span { display: block; font: 400 15px/1.4 var(--body); color: var(--mist); margin-top: 2px; }
.menu__company ul { list-style: none; }
.menu__company a { display: block; padding: 8px 0; color: #fff; text-decoration: none; font: 400 19px var(--body); }
.menu__company a:hover, .menu__company a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--trace); }
.menu__contact address, .menu__contact p { color: var(--cloud); font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
.menu__contact a:not(.tel) { color: #fff; }
body.menu-open { overflow: hidden; }

/* ------------------------------------------------------------------ page head (floor) */
.head { background: var(--floor); color: #fff; padding: 36px 0 clamp(64px, 8vw, 104px); position: relative; }
.head__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.head h1 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.6rem); margin: 28px 0 24px; }
.head .lede { font-size: 19px; line-height: 1.6; color: var(--cloud); max-width: 58ch; }
.head__facts { margin-top: 18px; font: 500 15px/1.6 var(--label); color: var(--mist); max-width: 60ch; }
.head__photo { margin: 0; }
.head__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.head__photo figcaption { margin-top: 12px; font: 400 14px/1.5 var(--body); color: var(--mist); }
.head--portrait .head__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); }
.head--portrait .head__photo img { aspect-ratio: 3 / 4; }
.head--text .head__grid { grid-template-columns: minmax(0, 1fr); }
.head--text h1 { max-width: 16ch; }
.head--text .lede { max-width: 64ch; }
.head--article h1 { max-width: 22ch; font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.8rem); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 14px var(--label); color: var(--mist); }
.crumbs li + li::before { content: "/"; padding: 0 10px; color: rgba(169, 184, 206, 0.6); }
.crumbs a { color: var(--mist); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }

/* NutLogger's own chain, drawn in the head */
.head__chain { margin: 0; align-self: center; }
.head__chain ol { list-style: none; position: relative; counter-reset: c; }
.head__chain ol::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: rgba(169, 184, 206, 0.36); }
.head__chain ol::after { content: ""; position: absolute; left: 6.5px; top: 12px; width: 2px; height: calc(100% - 24px); background: var(--trace); box-shadow: 0 0 12px rgba(0, 173, 238, 0.8); transform-origin: top; animation: draw-y 2.4s var(--ease) 0.3s both; }
.head__chain li { position: relative; padding: 8px 0 8px 40px; font: 200 clamp(1.25rem, 0.9rem + 1vw, 1.75rem)/1.25 var(--display); color: #fff; }
.head__chain li::before { content: ""; position: absolute; left: 0; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; border-radius: 50%; background: var(--floor); border: 1.5px solid var(--trace); }
.head__chain li:first-child::before, .head__chain li:last-child::before { background: var(--trace); }
.head__chain figcaption { margin-top: 16px; font: 400 14px/1.5 var(--body); color: var(--mist); max-width: 44ch; }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ------------------------------------------------------------------ record sections */
section { position: relative; }
.flow, .pricing, .chainsec, .caps, .reports, .benefits, .served, .faq, .intro, .history, .people, .work, .editions, .connect, .insights, .roster, .case, .matrixsec, .feature, .sols, .plugs, .specs, .weighlink, .swad, .said, .online, .articles, .formsec, .proof, .footprint, .letter, .clientsband, .map, .prose { padding: var(--sec-plain) 0; }
.band--steel, .band--floor, .said, .pricing, .chainsec { padding: var(--sec) 0; }
.band--steel { background: var(--steel); }
.band--floor { background: var(--floor); color: #fff; }
.sechead { max-width: 64ch; margin-bottom: clamp(36px, 4vw, 56px); }
.sechead h2 { font-size: clamp(1.9rem, 1.25rem + 2vw, 3rem); margin-bottom: 18px; }
.sechead p { color: var(--slate); }
.band--floor .sechead p { color: var(--cloud); }
.list { list-style: none; }
.list li { position: relative; padding: 6px 0 6px 22px; }
.list li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--trace-deep); }
.list--cols { columns: 2 280px; column-gap: 40px; }
.list--cols li { break-inside: avoid; }

/* the workflow ledger: a real sequence, the thread drawn down its nodes */
.ledger { list-style: none; position: relative; }
.ledger::before, .ledger::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 44px; width: 1px; background: var(--rule); }
.ledger::after { width: 2px; left: 20.5px; background: var(--trace-deep); transform-origin: top; transform: scaleY(0); transition: transform 1.8s var(--ease); }
.ledger.is-drawn::after { transform: scaleY(1); }
.ledger__step {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 0.9fr);
  column-gap: clamp(20px, 3vw, 48px); padding: 28px 0; border-top: 1px solid var(--rule); align-items: start;
}
.ledger__step:last-child { border-bottom: 1px solid var(--rule); }
.ledger__node {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--record); border: 1.5px solid var(--trace-deep); color: var(--trace-deep); font: 500 15px var(--label);
  transition: background-color 0.4s ease, color 0.4s ease; transition-delay: calc(var(--i, 0) * 110ms);
}
.ledger.is-drawn .ledger__node { background: var(--trace-deep); color: #fff; }
.ledger__step h3 { font: 300 clamp(1.25rem, 1rem + 0.6vw, 1.55rem)/1.2 var(--display); letter-spacing: -0.01em; padding-top: 8px; }
.ledger__step p { color: var(--slate); padding-top: 8px; max-width: 56ch; }
.ledger__step:not(.has-photo) p { grid-column: 3 / -1; }
.ledger__photo { margin: 0; padding-top: 8px; }
.ledger__photo img { width: 100%; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 2px; }
.ledger__photo figcaption { margin-top: 8px; font: 400 14px/1.45 var(--body); color: var(--slate); max-width: 320px; }

/* a short real sequence, left to right */
.steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 32px; }
.steps::before, .steps::after { content: ""; position: absolute; top: 20px; left: 20px; right: calc(100% / var(--n) - 20px); height: 1px; background: var(--rule); }
.steps::after { height: 2px; top: 19.5px; background: var(--trace-deep); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease); }
.steps.is-drawn::after { transform: scaleX(1); }
.steps > li { position: relative; }
.steps__node {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px;
  background: var(--record); border: 1.5px solid var(--trace-deep); color: var(--trace-deep); font: 500 14px var(--label);
  transition: background-color 0.4s ease, color 0.4s ease; transition-delay: calc(var(--i, 0) * 180ms);
}
.band--steel .steps__node { background: var(--steel); }
.steps.is-drawn .steps__node { background: var(--trace-deep); color: #fff; }
.steps h3 { font: 300 1.35rem/1.25 var(--display); letter-spacing: -0.01em; margin-bottom: 12px; }
.steps p, .steps li li { color: var(--slate); font-size: 17px; }
.steps ul { list-style: none; }
.steps li li { position: relative; padding: 4px 0 4px 18px; }
.steps li li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 8px; height: 1.5px; background: var(--slate); }

/* capability groups */
.group { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); padding: 36px 0; border-top: 1px solid var(--rule); }
.group:last-child { border-bottom: 1px solid var(--rule); }
.group__title { font: 200 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.2 var(--display); letter-spacing: -0.01em; }
.group__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.group__item h4 { font: 500 17px/1.35 var(--label); margin-bottom: 8px; }
.group__item p { color: var(--slate); font-size: 16.5px; }

/* pricing */
.pricing__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); }
.pricing__lead h2 { font-size: clamp(1.9rem, 1.25rem + 2vw, 3rem); margin-bottom: 20px; }
.pricing__lead p { color: var(--slate); }
.pricing__figure { font: 200 clamp(2.3rem, 1.6rem + 2vw, 3.4rem)/1.1 var(--display) !important; color: var(--ink) !important; letter-spacing: -0.02em; margin: 8px 0 14px !important; }
.pricing__figure small { font: 500 15px var(--label); letter-spacing: 0; color: var(--slate); }
.pricing__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; align-content: start; }
.pricing__lists h3 { font: 500 16px var(--label); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.pricing__note { grid-column: 1 / -1; color: var(--slate); font-size: 16px; }
.ticks, .dashes { list-style: none; }
.ticks li, .dashes li { position: relative; padding: 6px 0 6px 24px; font-size: 16.5px; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 10px; border-radius: 50%; background: var(--trace-deep); }
.dashes li { color: var(--slate); }
.dashes li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 1.5px; background: var(--slate); }
.packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 28px 0 8px; }
.package { border-top: 2px solid var(--ink); padding-top: 16px; }
.package h3 { font: 500 16px var(--label); }
.package .pricing__figure { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem) !important; }

/* named lists and specs */
.specs__grid, .plugs__grid, .served__grid, .faq__grid, .intro__grid, .footprint__grid, .weighlink__grid, .letter__grid, .swad__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 88px); }
.specs__grid .sechead, .plugs__grid .sechead, .served__grid .sechead, .faq__grid .sechead, .intro__grid .sechead, .footprint__grid .sechead, .weighlink__grid .sechead, .letter__grid .sechead, .swad__grid .sechead { margin-bottom: 0; }
.spec { margin: 0; border-top: 1px solid var(--rule); }
.spec__row { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font: 500 16px/1.45 var(--label); }
.spec dd { margin: 0; color: var(--slate); }
.spec--tight .spec__row { padding: 12px 0; }
.spectable { width: 100%; border-collapse: collapse; margin-bottom: 36px; }
.spectable th, .spectable td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spectable thead th { font: 500 15px var(--label); color: var(--slate); border-bottom: 2px solid var(--ink); }
.spectable tbody th { font: 500 16px var(--label); }
.spectable td { font: 300 17px/1.4 var(--display); letter-spacing: -0.005em; }
.plugs__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--rule); }
.plugs__list li { position: relative; padding: 16px 0 16px 26px; border-bottom: 1px solid var(--rule); font: 500 16.5px/1.4 var(--label); }
.plugs__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; border: 1.5px solid var(--trace-deep); background: transparent; }
.served__list { list-style: none; border-top: 1px solid var(--rule); }
.served__list li { padding: 16px 0; border-bottom: 1px solid var(--rule); font: 300 clamp(1.2rem, 1rem + 0.6vw, 1.5rem)/1.3 var(--display); letter-spacing: -0.01em; }

.reports__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--rule); }
.reports__list li { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.reports__list h3 { font: 500 17px var(--label); margin-bottom: 6px; }
.reports__list p { color: var(--slate); font-size: 16.5px; }
.benefits__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--rule); }
.benefits__list li { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.benefits__list h3 { font: 300 clamp(1.15rem, 1rem + 0.4vw, 1.35rem)/1.3 var(--display); letter-spacing: -0.01em; }
.benefits__list p { color: var(--slate); font-size: 16.5px; margin-top: 8px; }
.benefits__note { margin-top: 28px; color: var(--slate); max-width: 72ch; }

/* quotes */
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { font: 200 clamp(1.3rem, 1rem + 0.9vw, 1.85rem)/1.42 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.quote figcaption { margin-top: 20px; display: flex; flex-direction: column; gap: 2px; }
.quote figcaption b { font: 500 16px var(--label); }
.quote figcaption span { color: var(--slate); font-size: 15.5px; }
.quote--inline { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--rule); }
.said { background: var(--steel); }
.said__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.said__side p { color: var(--slate); font-size: 17px; }
.said__side .textlink { display: inline-block; margin-top: 16px; }

/* editions */
.editions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.edition { border-top: 2px solid var(--ink); padding-top: 24px; }
.edition h3 { font: 200 clamp(1.6rem, 1.2rem + 1vw, 2.2rem)/1.15 var(--display); letter-spacing: -0.01em; margin-bottom: 16px; }
.edition > p { color: var(--slate); }
.edition dl { margin: 20px 0 0; }
.edition dt { font: 500 15px var(--label); margin-bottom: 4px; }
.edition dd { margin: 0; color: var(--slate); font-size: 16.5px; }
.editions .actions { margin-top: 40px; }

/* weighing link, swad */
.swad__tables { min-width: 0; }

/* elsewhere on the line */
.online { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--rule); }
.online h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); margin-bottom: 36px; }
.online__line { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.online__line::before { content: ""; position: absolute; left: 6px; right: calc(20% - 6px); top: 6px; height: 1px; background: var(--rule); }
.online__line li { position: relative; padding-top: 30px; }
.online__line li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--record); border: 1.5px solid var(--trace-deep); }
.online__line li.is-here::before { background: var(--trace-deep); box-shadow: 0 0 0 5px rgba(0, 119, 179, 0.16); }
.online__line a, .online__line li > span { display: block; font: 300 1.35rem/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.online__line a:hover { text-decoration: underline; text-decoration-color: var(--trace-deep); }
.online__line small { display: block; margin-top: 6px; color: var(--slate); font-size: 15px; line-height: 1.45; }

/* questions */
.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative; padding: 20px 44px 20px 0; font: 500 17.5px/1.45 var(--label);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%;
  border: 1.5px solid var(--trace-deep); transition: background-color 0.2s;
}
.faq__item[open] summary::after { background: var(--trace-deep); }
.faq__item summary:hover { color: var(--trace-deep); }
.faq__a { padding: 0 44px 22px 0; color: var(--slate); max-width: 70ch; }

/* closing band and footer (floor) */
.close { background: var(--floor); color: #fff; padding: clamp(72px, 9vw, 120px) 0; }
.close__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.close h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); margin-bottom: 20px; max-width: 18ch; }
.close p { color: var(--cloud); max-width: 58ch; }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.foot { background: var(--floor); color: var(--cloud); border-top: 1px solid var(--rule-floor); padding: 64px 0 40px; font-size: 16px; }
.foot__chain { padding-bottom: 48px; border-bottom: 1px solid var(--rule-floor); margin-bottom: 48px; }
.foot__chainlabel { font: 500 14px var(--label); color: var(--mist); margin-bottom: 22px; }
.foot__chain ol { list-style: none; position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.foot__chain ol::before { content: ""; position: absolute; left: 5px; right: calc(12.5% - 5px); top: 5px; height: 2px; background: linear-gradient(90deg, var(--trace), rgba(0, 173, 238, 0.35)); box-shadow: 0 0 10px rgba(0, 173, 238, 0.5); }
.foot__chain li { position: relative; padding-top: 24px; font: 200 clamp(0.95rem, 0.7rem + 0.6vw, 1.3rem)/1.2 var(--display); color: #fff; }
.foot__chain li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--floor); border: 1.5px solid var(--trace); }
.foot__chain li:first-child::before, .foot__chain li:last-child::before { background: var(--trace); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; }
.foot__brand img { width: 219px; margin-bottom: 20px; }
.foot__brand p { color: var(--mist); max-width: 34ch; font-size: 15.5px; }
.foot h2 { font: 500 14px var(--label); color: var(--mist); margin-bottom: 14px; letter-spacing: 0; }
.foot ul { list-style: none; }
.foot ul li { padding: 4px 0; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--trace); }
.foot address, .foot__contact p { line-height: 1.75; font-size: 15.5px; }
.foot__contact p { margin-top: 14px; }
.foot__base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule-floor); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: 14px; color: var(--mist); }
.foot__base a { color: var(--cloud); text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; }
.foot__social a { margin: 0 14px 0 0; }

/* ------------------------------------------------------------------ home: the journey */
#world { display: none; }
.scrim, .tags { display: none; }
.journey { position: relative; background: var(--floor); color: #fff; }
.stop { position: relative; z-index: 1; padding: clamp(96px, 12vw, 160px) 0; }
.stop__copy { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.stop__copy > * { grid-column: 1; }
.stop__copy h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); margin-bottom: 20px; }
.stop__copy p { color: var(--cloud); max-width: 50ch; }
.stop__photo { grid-column: 2 !important; grid-row: 1 / span 4; margin: 0; }
.stop__photo img { border-radius: 2px; width: 100%; max-width: 466px; }
.stop__photo figcaption { margin-top: 10px; font-size: 14px; color: var(--mist); }
.stop--hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--top-h) + 48px) 0 clamp(88px, 10vh, 128px); overflow: hidden; }
.stop--hero .stop__copy { display: block; width: 100%; margin: 0; max-width: calc(600px + 2 * var(--gutter)); }
.stop--hero h1 { font-size: clamp(2.5rem, 1.4rem + 3.1vw, 4.3rem); max-width: min(14ch, 600px); margin-bottom: 26px; }
.stop--hero .lede { max-width: min(54ch, 600px); }
.stop--hero .lede { font-size: 19px; line-height: 1.6; color: var(--cloud); max-width: 54ch; }
.hero__still { position: absolute; inset: 0; background: var(--floor) url(../img/line-still.webp) 0% 50% / cover no-repeat; }
.hero__still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 22, 51, 0.9) 0%, rgba(11, 22, 51, 0.6) 38%, rgba(11, 22, 51, 0.05) 70%), linear-gradient(0deg, rgba(11, 22, 51, 0.85) 0%, rgba(11, 22, 51, 0) 45%); }
.stop--hero .stop__copy { position: relative; z-index: 1; }
.cue { position: absolute; z-index: 1; left: var(--gutter); bottom: 28px; margin: 0; font: 500 13px var(--label); color: var(--mist); }
.after { position: relative; z-index: 2; background: var(--record); }

/* with the 3D line: the page floats over one fixed canvas */
html.has-3d body.home { background: var(--floor); }
html.has-3d #world { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; opacity: 0; transition: opacity 1.2s ease; }
html.has-3d.world-live #world { opacity: 1; }
html.has-3d .scrim { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 22, 51, 0.86) 0%, rgba(11, 22, 51, 0.62) 26%, rgba(11, 22, 51, 0.0) 52%); transition: opacity 0.4s; }
html.has-3d .journey { background: transparent; }
html.has-3d .hero__still { background-image: none; }
html.has-3d.world-live .hero__still { display: none; }
html.has-3d .stop:not(.stop--hero) { min-height: 150vh; display: block; padding: 18vh 0 34vh; }
html.has-3d .stop:not(.stop--hero) .stop__copy { position: sticky; top: calc(var(--top-h) + 6vh); }
html.has-3d .stop__copy { display: block; margin: 0; max-width: calc(430px + 2 * var(--gutter)); }
html.has-3d .stop__copy h2 { font-size: clamp(2rem, 1.3rem + 1.4vw, 2.6rem); }
html.has-3d .stop__photo { margin: 22px 0 0; max-width: 280px; }
html.has-3d .stop__photo img { max-width: 280px; }
html.has-3d .stop--hero .stop__copy { max-width: calc(560px + 2 * var(--gutter)); }
html.has-3d .tags { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.tag {
  position: absolute; left: 0; top: 0; opacity: 0; transform: translate3d(-9999px, 0, 0); transition: opacity 0.5s ease;
  padding: 8px 12px 9px 14px; background: rgba(11, 22, 51, 0.82); border: 1px solid rgba(0, 173, 238, 0.45); border-radius: 2px;
  font: 500 13px/1.35 var(--label); white-space: nowrap;
}
.tag b { display: block; color: #fff; font-weight: 500; }
.tag span { display: block; color: var(--trace); }
.tag::after { content: ""; position: absolute; left: -5px; bottom: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--trace); box-shadow: 0 0 10px var(--trace); }
body.past-journey .scrim, body.past-journey .tags { opacity: 0; }

/* ------------------------------------------------------------------ home: the record */
.proof { padding-bottom: clamp(48px, 6vw, 80px); }
.proof__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: end; margin-bottom: clamp(56px, 7vw, 96px); }
.proof__claim { font: 200 clamp(2.1rem, 1.2rem + 3vw, 4rem)/1.1 var(--display); letter-spacing: -0.02em; margin: 0; max-width: 17ch; }
.proof__side p { color: var(--slate); }
.systems { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); position: relative; }
.systems li { border-right: 1px solid var(--rule); }
.systems li:last-child { border-right: 0; }
.systems a { display: block; padding: 22px 20px 26px 0; margin-left: 0; text-decoration: none; color: var(--ink); height: 100%; }
.systems li + li a { padding-left: 20px; }
.systems b { display: block; font: 300 1.45rem/1.2 var(--display); letter-spacing: -0.01em; margin-bottom: 8px; }
.systems span { color: var(--slate); font-size: 15.5px; line-height: 1.45; display: block; }
.systems a:hover b { color: var(--trace-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.rostertable { width: 100%; border-collapse: collapse; margin-bottom: clamp(48px, 6vw, 80px); }
.rostertable th, .rostertable td { text-align: left; vertical-align: top; padding: 18px 24px 18px 0; border-bottom: 1px solid var(--rule); }
.rostertable thead th { font: 500 14px var(--label); color: var(--slate); border-bottom: 2px solid var(--ink); padding-top: 0; }
.rostertable tbody th { font: 300 clamp(1.15rem, 1rem + 0.5vw, 1.45rem)/1.3 var(--display); letter-spacing: -0.01em; width: 34%; }
.rostertable td { color: var(--slate); }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); margin-bottom: 40px; }
.connect__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr) minmax(0, 1fr); gap: 0 clamp(16px, 2vw, 32px); align-items: center; }
.connect__side { list-style: none; display: grid; gap: 22px; }
.connect__side li { padding: 18px 0; border-top: 1px solid var(--rule); }
.connect__side h3 { font: 500 17px var(--label); margin-bottom: 6px; }
.connect__side p { color: var(--slate); font-size: 16px; }
.connect__side--in { text-align: right; }
.connect__hub { position: relative; aspect-ratio: 1; }
.connect__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.connect__track path { fill: none; stroke: var(--trace-deep); stroke-width: 1.5; stroke-dasharray: 3 5; }
.connect__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; background: var(--record); border: 1.5px solid var(--trace-deep); display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; box-shadow: 0 0 0 10px rgba(0, 119, 179, 0.07); }
.connect__core img { width: 64px; height: auto; }
.connect__core span { font: 500 12.5px/1.3 var(--label); color: var(--ink); max-width: 11ch; }
.matrix__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix { width: 100%; border-collapse: collapse; min-width: 720px; }
.matrix caption { text-align: left; color: var(--slate); font-size: 15px; margin-bottom: 18px; caption-side: top; }
.matrix th, .matrix td { padding: 16px 12px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.matrix thead th { font: 500 14.5px var(--label); border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.matrix thead a { color: var(--ink); text-decoration: none; }
.matrix thead a:hover { color: var(--trace-deep); text-decoration: underline; }
.matrix tbody th { text-align: left; font: 300 1.15rem/1.3 var(--display); letter-spacing: -0.01em; width: 32%; }
.matrix tbody th small { display: block; font: 400 14px/1.45 var(--body); color: var(--slate); letter-spacing: 0; margin-top: 4px; }
.matrix tbody th a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--trace-deep); }
.matrix td { position: relative; }
.matrix td::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.matrix td:first-of-type::before { left: 50%; }
.matrix td:last-of-type::before { right: 50%; }
.dot { position: relative; z-index: 1; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--trace-deep); box-shadow: 0 0 0 4px var(--steel); }
.matrixsec:not(.band--steel) .dot { box-shadow: 0 0 0 4px var(--record); }
.insights__list, .articles__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--rule); }
.insights__list a, .articles__list a { display: block; padding: 26px 0; text-decoration: none; color: var(--ink); }
.insights__list h3, .articles__list h2 { font: 300 1.4rem/1.25 var(--display); letter-spacing: -0.01em; margin-bottom: 12px; }
.articles__list h2 { font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem); }
.insights__list p, .articles__list p { color: var(--slate); font-size: 16.5px; }
.articles__list span { display: inline-block; margin-top: 14px; font: 500 14px var(--label); color: var(--trace-deep); }
.insights__list a:hover h3, .articles__list a:hover h2 { text-decoration: underline; text-decoration-color: var(--trace-deep); text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------ company pages */
.intro__body > p { max-width: 64ch; }
.intro__body h3 { font: 300 1.5rem/1.25 var(--display); letter-spacing: -0.01em; margin: 40px 0 16px; }
.axis { position: relative; margin: 0 0 56px; padding: 0 12px; }
.axis ol { list-style: none; position: relative; height: 64px; }
.axis ol::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: linear-gradient(90deg, var(--trace-deep), var(--trace-deep)); }
.axis li { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); }
.axis a { display: block; padding-top: 30px; font: 500 13.5px var(--label); color: var(--ink); text-decoration: none; }
.axis a::before { content: ""; position: absolute; left: 50%; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--record); border: 1.5px solid var(--trace-deep); }
.axis a:hover::before, .axis a:focus-visible::before { background: var(--trace-deep); }
.axis a span { display: inline-block; transform: translateX(var(--dx, 0px)); }
.milestones { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--rule); }
.milestones > li { padding: 26px 0 30px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--top-h) + 24px); }
.axis__year { display: block; font: 200 2.2rem/1 var(--display); letter-spacing: -0.02em; color: var(--trace-deep); margin-bottom: 12px; }
.milestones h3 { font: 500 17px var(--label); margin-bottom: 8px; }
.milestones p { color: var(--slate); font-size: 16.5px; }
.milestones figure { margin: 16px 0 0; }
.milestones figure img { max-width: 240px; border-radius: 2px; }
.milestones figcaption { margin-top: 6px; font-size: 14px; color: var(--slate); }
.people__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.founder { margin: 0; }
.founder img { width: 100%; max-width: 360px; border-radius: 2px; filter: grayscale(0.15); }
.founder figcaption { margin-top: 12px; font-size: 15px; color: var(--slate); max-width: 36ch; }
.team { list-style: none; border-top: 1px solid var(--rule); }
.team li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.team b { font: 300 1.35rem/1.3 var(--display); letter-spacing: -0.01em; font-weight: 300; }
.team span { color: var(--slate); }
.team a { font: 500 14.5px var(--label); }
.claim { font: 200 clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem)/1.2 var(--display); letter-spacing: -0.015em; margin-bottom: 28px; max-width: 20ch; }
.places { list-style: none; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); }
.places li { position: relative; padding: 14px 28px 14px 22px; font: 500 16.5px var(--label); border-bottom: 1px solid var(--rule); }
.places li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--trace-deep); }
.rating { margin-top: 28px; color: var(--slate); font-size: 16px; }
.case { border-top: 1px solid var(--rule); }
.case__head { max-width: 70ch; margin-bottom: 48px; }
.case__head h2 { font-size: clamp(1.9rem, 1.25rem + 2vw, 3rem); margin-bottom: 16px; }
.case__head p { color: var(--slate); }
.case__logo { width: 88px; height: 88px; margin-bottom: 20px; border-radius: 2px; }
.case .quote { margin-top: 56px; max-width: 900px; }
.feature__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.feature__photo { margin: 0; }
.feature__photo img { width: 100%; border-radius: 2px; }
.feature__photo figcaption { margin-top: 10px; font-size: 14px; color: var(--slate); }
.feature h2 { font-size: clamp(1.9rem, 1.25rem + 2vw, 3rem); margin-bottom: 18px; }
.feature p { color: var(--slate); max-width: 58ch; }
.sol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px clamp(32px, 5vw, 80px); padding: 36px 0; border-top: 1px solid var(--rule); }
.sol:last-child { border-bottom: 1px solid var(--rule); }
.sol h3 { font: 200 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.2 var(--display); letter-spacing: -0.01em; grid-row: span 3; }
.sol h3 a { color: var(--ink); text-decoration-color: var(--trace-deep); }
.sol > p { color: var(--slate); margin: 0; }
.sol__ideal { font-size: 16px; }
.sol__ideal b { font: 500 15px var(--label); margin-right: 6px; }
.chainline { list-style: none; position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.chainline::before { content: ""; position: absolute; left: 7px; right: calc(12.5% - 7px); top: 7px; height: 1px; background: rgba(169, 184, 206, 0.36); }
.chainline::after { content: ""; position: absolute; left: 7px; top: 6.5px; width: calc(87.5% - 14px); height: 2px; background: var(--trace); box-shadow: 0 0 12px rgba(0, 173, 238, 0.8); transform-origin: left; transform: scaleX(0); transition: transform 2s var(--ease); }
.chainline.is-drawn::after { transform: scaleX(1); }
.chainline li { position: relative; padding-top: 30px; font: 200 clamp(1rem, 0.7rem + 0.8vw, 1.45rem)/1.2 var(--display); }
.chainline li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--floor); border: 1.5px solid var(--trace); }
.band--floor .sechead { max-width: 72ch; }
.formsec__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.offices h2 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); margin-bottom: 18px; }
.offices address { font-size: 17px; line-height: 1.7; margin-bottom: 24px; }
.offices > p { color: var(--slate); margin-top: 28px; }
.offices .tel { font-size: 16px; }
.form { background: var(--steel); padding: clamp(24px, 3.4vw, 44px); border-radius: 2px; }
.form h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: 12px; }
.form > p { color: var(--slate); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 28px 0 20px; }
.form__row { display: flex; flex-direction: column; gap: 8px; }
.form__row--wide { grid-column: 1 / -1; }
.form label { font: 500 15px var(--label); }
.form input, .form select, .form textarea {
  font: 400 17px/1.4 var(--body); color: var(--ink); background: #fff; border: 1px solid #9AA8BC; border-radius: 2px; padding: 12px 14px; min-height: 48px; width: 100%;
}
.form textarea { resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--trace-deep); outline-offset: 1px; border-color: var(--trace-deep); }
.form__small { font-size: 14.5px; color: var(--slate); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 20px; }
.form__status { margin: 0; font: 500 15.5px var(--label); color: var(--ink); }
.form__status.is-err { color: #A1260E; }
.map iframe { width: 100%; height: 420px; border: 0; border-radius: 2px; filter: saturate(0.8); }
.map { padding-top: 0; }

/* long-form articles */
.prose__wrap { max-width: calc(720px + 2 * var(--gutter)); }
.prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); margin: 56px 0 18px; }
.prose h3 { font: 500 18.5px var(--label); margin: 32px 0 10px; }
.prose p, .prose li { color: #26334D; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 0; list-style: none; }
.prose li { position: relative; padding: 5px 0 5px 26px; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: 0.9em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--trace-deep); }
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; padding-left: 36px; }
.prose ol > li::before { content: counter(n); position: absolute; left: 0; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--trace-deep); color: #fff; font: 500 12.5px/24px var(--label); text-align: center; }
.prose b { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .linenav { display: none; }
  .reports__list, .benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .systems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .systems li:nth-child(3) { border-right: 0; }
  .systems li:nth-child(n + 4) { border-top: 1px solid var(--rule); }
  .menu__inner { grid-template-columns: 1fr 1fr; }
  .menu__systems { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --top-h: 64px; }
  body { font-size: 17px; }
  .brand img { width: 150px; }
  .top__tel, .top__actions .btn { display: none; }
  .head__grid, .head--portrait .head__grid, .pricing__grid, .specs__grid, .plugs__grid, .served__grid, .faq__grid, .intro__grid,
  .footprint__grid, .weighlink__grid, .letter__grid, .swad__grid, .said__grid, .close__grid, .proof__grid, .people__grid,
  .feature__grid, .formsec__grid, .sol, .group, .connect__grid, .editions__grid, .quotes { grid-template-columns: minmax(0, 1fr); }
  .head h1 { margin-top: 20px; }
  .head__photo { order: 2; }
  .head--portrait .head__photo img { aspect-ratio: 4 / 3; }
  .group__items { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ledger__step { grid-template-columns: 44px minmax(0, 1fr); row-gap: 4px; }
  .ledger__step h3, .ledger__step p, .ledger__photo, .ledger__step:not(.has-photo) p { grid-column: 2; }
  .ledger__step h3 { padding-top: 10px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps::before, .steps::after { top: 20px; bottom: 20px; left: 19.5px; right: auto; width: 1px; height: auto; }
  .steps::after { width: 2px; left: 19px; transform-origin: top; transform: scaleY(0); }
  .steps.is-drawn::after { transform: scaleY(1); }
  .steps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; padding-bottom: 28px; }
  .steps__node { grid-row: span 3; margin-bottom: 0; }
  .steps h3 { padding-top: 6px; }
  .pricing__lists, .packages, .plugs__list, .reports__list, .benefits__list, .milestones, .insights__list, .articles__list { grid-template-columns: minmax(0, 1fr); }
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .online__line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .online__line::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .online__line li { padding: 0 0 22px 30px; }
  .systems { grid-template-columns: minmax(0, 1fr); }
  .systems li { border-right: 0; border-bottom: 1px solid var(--rule); }
  .systems li + li a, .systems a { padding-left: 0; }
  .systems li:nth-child(n + 4) { border-top: 0; }
  .connect__side--in { text-align: left; }
  .connect__hub { display: none; }
  .foot__chain ol, .chainline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 24px; }
  .foot__chain ol::before, .chainline::before, .chainline::after { display: none; }
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
  .rostertable tbody th { width: 40%; }
  .menu__inner { grid-template-columns: minmax(0, 1fr); padding-top: 76px; }
  .axis { display: none; }
  .team li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .stop__copy { grid-template-columns: minmax(0, 1fr); }
  .stop__photo { grid-column: 1 !important; grid-row: auto; margin-top: 24px; }
}
@media (max-width: 560px) {
  .rostertable thead { display: none; }
  .rostertable tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .rostertable th, .rostertable td { display: block; border: 0; padding: 2px 0; width: auto !important; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__chain ol, .chainline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spectable th, .spectable td { padding-right: 10px; font-size: 15px; }
  .spectable td { font-size: 15px; }
  .actions { gap: 16px 22px; }
}

/* phones with the 3D line: the words sit in a panel under the scene */
@media (max-width: 760px) {
  html.has-3d .scrim { background: linear-gradient(0deg, rgba(11, 22, 51, 0.7) 0%, rgba(11, 22, 51, 0) 40%); }
  html.has-3d .stop:not(.stop--hero) { min-height: 150vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 14px; }
  /* the card stops 104px short of the screen's foot: the bottom-right corner is the widget's, even while scrolling */
  html.has-3d .stop:not(.stop--hero) .stop__copy { position: sticky; top: auto; bottom: 104px; }
  html.has-3d .stop__copy { max-width: none; margin: 0 12px; padding: 20px 18px 20px; background: rgba(11, 22, 51, 0.92); border: 1px solid var(--rule-floor); border-radius: 2px; }
  html.has-3d .stop--hero .stop__copy { background: linear-gradient(0deg, rgba(11, 22, 51, 0.95) 60%, rgba(11, 22, 51, 0)); border: 0; margin: 0; padding: 120px 20px 0; }
  html.has-3d .stop__photo { display: none; }
  html.has-3d .stop__copy h2 { font-size: 1.75rem; margin-bottom: 10px; }
  html.has-3d .stop__copy p { font-size: 15.5px; line-height: 1.55; }
  html.has-3d .stop__copy .textlink { font-size: 14px; }
  html.has-3d .stop__copy .actions { margin-top: 18px; }
  .stop--hero h1 { font-size: 2.35rem; }
  .stop--hero .lede { font-size: 17px; }
  .tag { font-size: 11.5px; padding: 6px 9px 7px 10px; }
  .cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
  .ledger::after, .steps::after, .chainline::after { transform: none !important; }
}

/* QA stills (?still=K): the words step aside so the scene can be captured */
.still-mode .journey, .still-mode .top, .still-mode .tags, .still-mode .scrim, .still-mode .after, .still-mode .foot, .still-mode .menu { visibility: hidden; }
@media (max-width: 760px) { .hero__still { background-image: url(../img/line-still-m.webp); background-position: center top; } }