/* Antelum website layer, built on antelum.css tokens. */

:root { --measure: 58ch; }

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

.ant-page { line-height: 1.72; font-size: 1.09375rem; }
.ant-page img { max-width: 100%; height: auto; display: block; }
.ant-page a:focus-visible,
.ant-page button:focus-visible { outline: 3px solid var(--ant-beam); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .75rem 1rem; background: var(--ant-white); color: var(--ant-action); border-radius: var(--ant-radius-control); }
.skip-link:focus { top: 1rem; }

/* Header */
.site-header { position: absolute; inset: 0 0 auto; z-index: 5; }
.site-header .ant-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem; }
.brand { display: inline-flex; align-items: center; flex: none; margin-right: .5rem; }
/* Horizontal W2c lockup, 40 px tall (steps for small screens sit after the language switch).
   Clear space is the counter height, 0.14 of the symbol width: about 16 px at 40 px tall. The
   80 px header and the margin keep it. */
.brand img { width: auto; height: 40px; }
.nav { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .875rem; color: #fff; text-decoration: none; font-family: var(--ant-font-display); font-weight: 500; font-size: .9375rem; border-radius: var(--ant-radius-control); transition: color var(--ant-duration) var(--ant-ease); }
.nav a:hover { color: var(--ant-sky); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; text-decoration-color: var(--ant-sky); }
@media (max-width: 560px) { .nav .nav-optional { display: none; } }

/* Hero: the one horizon curve on each page lives here. */
.hero { position: relative; overflow: hidden; padding-top: clamp(8rem, 18vw, 11rem); padding-bottom: clamp(6rem, 14vw, 10rem); }
.hero::after { content: ""; position: absolute; inset: auto -10% -2px; height: 38%; background: url("horizon-transparent.svg") center bottom / 100% 100% no-repeat; pointer-events: none; }
.hero--compact { padding-bottom: clamp(5rem, 10vw, 7rem); }
.hero .ant-container { position: relative; z-index: 1; }
.hero .ant-eyebrow { color: var(--ant-sky); margin: 0 0 1.25rem; }
.hero .ant-title { max-width: 16ch; }
.hero-lead { max-width: 52ch; color: #A9C2DA; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); margin: 0 0 2.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.ant-theme-dark .ant-button--secondary { color: #fff; border-color: #45627E; background: transparent; }
.ant-theme-dark .ant-button--secondary:hover { border-color: var(--ant-sky); background: transparent; }

/* Sections */
.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head .ant-eyebrow { display: block; margin-bottom: 1rem; }
.section-head p { color: var(--ant-muted); max-width: var(--measure); margin: 0; }
.ant-heading { max-width: 22ch; }
.band-white { background: var(--ant-white); }
.band-wash { background: var(--ant-wash); position: relative; overflow: hidden; }
.band-wash::before { content: ""; position: absolute; inset: 0 0 0 55%; background: url("pattern-contours.svg") right bottom / cover no-repeat; pointer-events: none; }
.band-wash .ant-container { position: relative; }

/* Belief statement */
.belief { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.belief-quote { font-family: var(--ant-font-display); font-weight: 400; font-size: clamp(1.75rem, 3.4vw, 2.625rem); line-height: 1.2; letter-spacing: -.025em; margin: 0; color: var(--ant-ink); }
.belief-body p { margin: 0 0 1.25rem; color: var(--ant-slate); max-width: var(--measure); }
.belief-body p:last-child { margin: 0; }
.belief-body strong { color: var(--ant-ink); font-weight: 600; }
@media (max-width: 860px) { .belief { grid-template-columns: 1fr; } }

/* Cards */
.grid-2, .grid-3 { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card { background: var(--ant-white); border: 1px solid var(--ant-line); border-radius: var(--ant-radius-card); padding: clamp(1.5rem, 3vw, 2.25rem); }
.card h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .75rem; color: var(--ant-ink); }
.card p { margin: 0; color: var(--ant-slate); }
.card-label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ant-action); margin-bottom: 1rem; }
.card-rule { border-top: 2px solid var(--ant-action); }
.card-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.card-meta li { font-size: .8125rem; font-weight: 500; color: var(--ant-action); background: var(--ant-wash); border-radius: 999px; padding: .25rem .75rem; }
.spine { margin: 2rem 0 0; max-width: var(--measure); color: var(--ant-slate); }

/* Layers */
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ant-line); }
.layer { padding: 2rem 2rem 0 0; }
.layer + .layer { padding-left: 2rem; border-left: 1px solid var(--ant-line); }
.layer h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.5rem; margin: 0 0 .25rem; }
.layer .layer-sub { display: block; color: var(--ant-action); font-weight: 500; font-size: .9375rem; margin-bottom: .875rem; }
.layer p { margin: 0; color: var(--ant-slate); }
@media (max-width: 860px) {
  .layers { grid-template-columns: 1fr; }
  .layer, .layer + .layer { padding: 1.75rem 0; border-left: 0; border-bottom: 1px solid var(--ant-line); }
}

/* Method: five steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; counter-reset: step; }
.step { position: relative; padding-top: 3.25rem; }
.step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: 0; left: 0; font-family: var(--ant-font-display); font-weight: 500; font-size: .875rem; color: var(--ant-action); }
.step::after { content: ""; position: absolute; top: 2rem; left: 0; right: -1rem; height: 1px; background: var(--ant-line); }
.step:last-child::after { right: 0; }
.step-dot { position: absolute; top: calc(2rem - 4px); left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ant-beam); z-index: 1; }
.step h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 .5rem; }
.step p { margin: 0; color: var(--ant-slate); font-size: 1rem; line-height: 1.6; }
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 0 0 1.75rem 2.5rem; }
  .step::before { position: static; display: block; margin-bottom: .25rem; }
  .step::after { top: .5rem; bottom: -.5rem; left: 4px; right: auto; width: 1px; height: auto; }
  .step:last-child::after { display: none; }
  .step-dot { top: .5rem; }
}

/* Principles */
.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
.principles li { padding-left: 1.25rem; border-left: 2px solid var(--ant-action); }
.principles strong { display: block; font-family: var(--ant-font-display); font-weight: 500; font-size: 1.1875rem; color: var(--ant-ink); margin-bottom: .25rem; }
.principles span { color: var(--ant-slate); }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }

/* Audience */
.audience { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; }
.audience .card--quiet { background: transparent; }
.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li { padding: .625rem 0; border-bottom: 1px solid var(--ant-line); color: var(--ant-slate); }
.plain-list li:last-child { border-bottom: 0; }
@media (max-width: 860px) { .audience { grid-template-columns: 1fr; } }

/* Closing band (navy, no curve: the page has its one curve in the hero) */
.closing { text-align: left; }
.closing .ant-heading { color: #fff; }
.closing p { color: #A9C2DA; max-width: var(--measure); margin: 0 0 2rem; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.mail-link { display: inline-block; font-family: var(--ant-font-display); font-weight: 500; font-size: clamp(1.5rem, 3.5vw, 2.25rem); letter-spacing: -.02em; color: var(--ant-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; margin: .25rem 0 1.5rem; word-break: break-word; }
.mail-link:hover { color: var(--ant-action-hover); }
.checklist { margin: 0; padding: 0; list-style: none; counter-reset: item; }
.checklist li { position: relative; padding: .75rem 0 .75rem 2.25rem; border-bottom: 1px solid var(--ant-line); color: var(--ant-slate); }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before { counter-increment: item; content: counter(item); position: absolute; left: 0; top: .8rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ant-wash); color: var(--ant-action); font: 600 .8125rem/1.5rem var(--ant-font-body); text-align: center; }
.next-steps { list-style: none; margin: 0; padding: 0; }
.next-steps li { padding: 1rem 0; border-bottom: 1px solid var(--ant-line); }
.next-steps li:last-child { border-bottom: 0; }
.next-steps strong { display: block; font-family: var(--ant-font-display); font-weight: 500; color: var(--ant-ink); }
.next-steps span { color: var(--ant-slate); font-size: 1rem; }
.logo-band { display: flex; justify-content: center; padding: 3rem 0; background: var(--ant-white); border-top: 1px solid var(--ant-line); }
.logo-band img { width: 150px; }

/* Footer */
.site-footer { padding: 2.5rem 0; }
.site-footer .ant-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.site-footer p { margin: 0; color: #A9C2DA; font-size: .875rem; }
.site-footer a { color: var(--ant-sky); }
.footer-brand { display: inline-flex; align-items: center; gap: .75rem; }
.footer-brand img { width: 56px; height: auto; }

/* Reveal: content stays visible without JavaScript. */
.js .reveal { opacity: 0; transform: translateY(var(--ant-reveal-travel)); transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui), transform var(--ant-dur-reveal) var(--ant-ease-ui); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 480px) { .ant-container { width: calc(100% - 2rem); } }

/* Classes that replaced inline styles, so the pages run under a strict CSP. */
.site-header { background: transparent; }
.site-footer--ruled { border-top: 1px solid #45627E; }
.card-heading { font-size: 1.75rem; max-width: none; margin-bottom: .5rem; }
.card-intro { color: var(--ant-slate); margin: 0 0 1.25rem; }
.card--quiet { background: transparent; }
.hero--full { min-height: 100vh; }

/* ---------- Multilingual header ---------- */
.site-header .ant-container { gap: .5rem; }
.site-header nav[aria-label="Main"] { margin-left: auto; }
.lang-switch { display: flex; gap: .125rem; padding-left: .5rem; border-left: 1px solid #45627E; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; color: #A9C2DA; text-decoration: none; font: 500 .8125rem/1 var(--ant-font-display); border-radius: var(--ant-radius-control); }
.lang-switch a:hover { color: #fff; }
.lang-switch a[aria-current="true"] { position: relative; color: #fff; text-decoration: none; }
.lang-switch a[aria-current="true"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .55rem; height: 1px; background: var(--ant-sky); }
@media (max-width: 900px) { .nav .nav-optional { display: none; } }
/* Small screens: the lockup steps down so Contact and the three languages stay on one line.
   The space between the lockup and Contact (gap plus link padding) still clears the counter height. */
@media (max-width: 560px) {
  .brand { margin-right: 0; }
  .brand img { height: 28px; }
  .site-header .ant-container { gap: .25rem; }
  .nav a { padding: 0 .5rem; }
}
@media (max-width: 374px) { .brand img { height: 24px; } }
@media (max-width: 340px) { .brand img { height: 22px; } .lang-switch a { min-width: 32px; } }

/* ---------- Hero with WebGL landscape ---------- */
.hero { min-height: min(100vh, 860px); display: flex; align-items: center; }
.hero--compact, .hero--static { min-height: 0; display: block; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-content { position: relative; z-index: 1; }
.hero-kicker { font-family: var(--ant-font-display); font-weight: 400; font-size: 1.0625rem; color: var(--ant-sky); margin: 0 0 1.25rem; letter-spacing: .01em; }
.hero .ant-title { max-width: 15ch; font-size: clamp(2.5rem, 6.4vw, 5rem); }
.hero-lead { max-width: 46ch; }

/* ---------- Intro ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.intro-title { font-family: var(--ant-font-display); font-weight: 400; font-size: clamp(1.75rem, 3.4vw, 2.625rem); line-height: 1.2; letter-spacing: -.025em; margin: 0; }
.intro-body p { margin: 0 0 1.25rem; color: var(--ant-slate); max-width: var(--measure); }
.intro-body p:last-child { margin: 0; color: var(--ant-ink); }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } }

/* ---------- Offers: rows, not a card grid ---------- */
.offers { border-top: 1px solid var(--ant-line); }
.offer { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem 2.5rem; padding: 2.25rem 0; border-bottom: 1px solid var(--ant-line); align-items: start; }
.offer-glyph { width: 40px; height: 40px; fill: none; stroke: var(--ant-action); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.offer-name { margin: 0 0 .5rem; color: var(--ant-action); font-weight: 500; font-size: .9375rem; }
.offer h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; margin: 0; }
.offer-body p { margin: 0 0 .75rem; color: var(--ant-slate); }
.badge { display: inline-block; margin-left: .5rem; padding: .125rem .625rem; border-radius: 999px; background: var(--ant-wash); color: var(--ant-action); font-size: .75rem; font-weight: 600; vertical-align: 1px; }
@media (max-width: 860px) {
  .offer { grid-template-columns: 40px minmax(0, 1fr); }
  .offer-body { grid-column: 2; }
}

/* ---------- Journey: sticky WebGL stage beside three steps ---------- */
.journey { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
.journey-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); }
.journey-intro { margin-bottom: 4rem; }
.journey-intro p { color: #A9C2DA; max-width: 44ch; margin: 0; }
.journey-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .38; transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui); }
.journey-step.is-active, html:not(.journey-gl) .journey-step { opacity: 1; }
.journey-step:last-child { min-height: 70vh; }
.journey-index { font: 500 .875rem/1 var(--ant-font-display); color: var(--ant-sky); margin: 0 0 1rem; }
.journey-step h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -.025em; margin: 0 0 .25rem; color: #fff; }
.journey-sub { color: var(--ant-sky); margin: 0 0 1rem; font-weight: 500; }
.journey-step p:last-child { color: #A9C2DA; max-width: 42ch; margin: 0; }
.journey-stage { position: sticky; top: 0; height: 100vh; }
.journey-canvas { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .journey-step { transition: none; } }
@media (max-width: 860px) {
  .journey-grid { grid-template-columns: 1fr; }
  .journey-stage { position: sticky; top: 0; height: 100vh; grid-row: 1; grid-column: 1; opacity: .65; }
  .journey-text { grid-row: 1; grid-column: 1; position: relative; z-index: 1; }
  .journey-step { min-height: 80vh; }
}

/* ---------- Help: problem and answer pairs ---------- */
.help-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ant-line); }
.help-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; padding: 1.5rem 0; border-bottom: 1px solid var(--ant-line); }
.help-problem { margin: 0; font-family: var(--ant-font-display); font-weight: 500; font-size: 1.25rem; color: var(--ant-ink); }
.help-answer { margin: 0; color: var(--ant-slate); }
@media (max-width: 760px) { .help-list li { grid-template-columns: 1fr; gap: .375rem; } }

/* ---------- Working together ---------- */
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ant-action); }
.model { padding: 1.75rem 2rem 0 0; }
.model + .model { padding-left: 2rem; border-left: 1px solid var(--ant-line); }
.model h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.5rem; margin: 0 0 .75rem; }
.model p { margin: 0; color: var(--ant-slate); }
.starts { margin-top: clamp(3rem, 6vw, 4.5rem); }
.starts-title { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 1.25rem; }
.starts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.start { background: var(--ant-wash); border-radius: var(--ant-radius-card); padding: clamp(1.5rem, 3vw, 2rem); }
.start-meta { margin: 0 0 .5rem; color: var(--ant-action); font-size: .875rem; font-weight: 500; }
.start h4 { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 .5rem; }
.start p:last-child { margin: 0; color: var(--ant-slate); }
@media (max-width: 860px) {
  .models, .starts-grid { grid-template-columns: 1fr; }
  .model, .model + .model { padding: 1.5rem 0; border-left: 0; border-bottom: 1px solid var(--ant-line); }
}

/* ---------- Audience ---------- */
.audience h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 .75rem; }
.audience-not { padding-left: 2rem; border-left: 1px solid var(--ant-line); }
@media (max-width: 860px) { .audience-not { padding-left: 0; border-left: 0; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid #45627E; }
.footer-brand span { font-family: var(--ant-font-display); font-weight: 500; color: #fff; }
.footer-langs a, .footer-mail a { color: var(--ant-sky); margin-right: 1rem; font-size: .875rem; }
.footer-copy { font-size: .875rem; }

/* ---------- Split-flap board in the hero headline ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero .ant-title.hero-title { max-width: none; }
.hero-title-start { display: block; max-width: 20ch; }
/* Sized so the full board always fits on one line: 22 tiles (the longest phrase) at .77em each is about 17em. */
.flap { display: inline-flex; flex-wrap: nowrap; gap: .07em; margin-top: .28em; font-size: min(.62em, calc((100vw - 2.5rem) / 17)); letter-spacing: 0; }
.flap-cell { position: relative; display: inline-block; width: .7em; height: 1.22em; perspective: 5em; border-radius: .09em; background: #0B2D4F; box-shadow: inset 0 0 0 1px rgb(111 195 247 / 10%); }
.flap-cell.is-blank { background: rgb(11 45 79 / 45%); }
.flap-half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: inherit; backface-visibility: hidden; }
.flap-top { top: 0; border-radius: .09em .09em 0 0; transform-origin: 50% 100%; }
.flap-bottom { bottom: 0; border-radius: 0 0 .09em .09em; transform-origin: 50% 0; background: color-mix(in srgb, var(--ant-navy) 94%, var(--ant-sky)); }
.flap-cell.is-blank .flap-bottom { background: transparent; }
.flap-half > span { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ant-font-display); font-weight: 500; line-height: 1; }
.flap-top > span { top: 0; }
.flap-bottom > span { bottom: 0; }
.flap-leaf { z-index: 2; background: #0B2D4F; }
.flap-leaf.flap-bottom { background: color-mix(in srgb, var(--ant-navy) 94%, var(--ant-sky)); }
/* The hinge line across the middle of each tile. */
.flap-cell::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: var(--ant-ink); z-index: 3; }
.flap.is-settled .flap-cell:not(.is-blank) { box-shadow: inset 0 0 0 1px rgb(111 195 247 / 22%); transition: box-shadow var(--ant-dur-reveal) var(--ant-ease-ui); }

/* No text cursor on the page. Some browsers show one after a click (caret
   browsing); the site has no editable text, so it only looks like a glitch. */
.ant-page { caret-color: transparent; }
.ant-page input, .ant-page textarea, .ant-page [contenteditable="true"] { caret-color: auto; }

/* Blank tiles disappear: the board reads as words, not as an empty grid. */
.flap-cell.is-blank { background: transparent; box-shadow: none; }
.flap-cell.is-blank::after { display: none; }
.flap.is-settled .flap-cell.is-blank { box-shadow: none; }

/* With WebGL running, the hero draws its own horizon line so the rising sun lines up with it. */
html.hero-gl .hero:not(.hero--static)::after { display: none; }

/* ---------- Contact form ---------- */
.contact-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.contact-side { display: grid; gap: 1.5rem; align-content: start; }
.side-title { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 .5rem; }
.mail-alt { margin: 0; color: var(--ant-slate); }
.mail-alt a { color: var(--ant-action); }
.contact-form { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-weight: 500; color: var(--ant-ink); padding: 0; }
.optional { font-weight: 400; color: var(--ant-slate); font-size: .875rem; }
.help { margin: -.25rem 0 0; color: var(--ant-slate); font-size: .9375rem; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  width: 100%; min-height: 48px; padding: .75rem .875rem; font: inherit; font-size: 1rem; color: var(--ant-ink);
  background: var(--ant-white); border: 1px solid #718398; border-radius: var(--ant-radius-control);
  transition: border-color var(--ant-duration) var(--ant-ease), box-shadow var(--ant-duration) var(--ant-ease);
}
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: none; border-color: var(--ant-action); box-shadow: 0 0 0 3px rgb(0 107 199 / 25%); }
.contact-form [aria-invalid="true"] { border-color: #B42318; }
.choice-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; min-height: 40px; padding: .5rem .875rem; border: 1px solid var(--ant-line); border-radius: 999px; background: var(--ant-white); color: var(--ant-ink); font-size: .9375rem; transition: border-color var(--ant-duration) var(--ant-ease), background var(--ant-duration) var(--ant-ease); }
.choice:hover span { border-color: #718398; }
.choice input:checked + span { background: var(--ant-wash); border-color: var(--ant-action); color: var(--ant-action); font-weight: 500; }
.choice input:focus-visible + span { outline: 3px solid var(--ant-beam); outline-offset: 2px; }
.form-status { margin: 0; min-height: 1.5em; font-weight: 500; }
.form-status.is-success { color: #176B4B; }
.form-status.is-error { color: #B42318; }
.contact-form .ant-button { justify-self: start; }
.contact-form .ant-button:disabled { opacity: .6; cursor: progress; }
/* Spam trap: invisible to people, filled in by bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- The idea: keep your tools, we connect them ---------- */
.idea-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.idea-title { font-family: var(--ant-font-display); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.1; letter-spacing: -.03em; margin: 0; }
.idea-body p { margin: 0 0 1rem; color: var(--ant-slate); max-width: var(--measure); font-size: 1.125rem; }
.idea-body p:last-child { margin: 0; color: var(--ant-ink); }
@media (max-width: 860px) { .idea-grid { grid-template-columns: 1fr; } }

/* Footer logo links home; the email card on the contact page. */
a.footer-brand { color: inherit; text-decoration: none; }
a.footer-brand:hover span { color: var(--ant-sky); }
.mail-card .mail-link { margin: .25rem 0 0; font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
.mail-card .mail-link { white-space: nowrap; word-break: normal; font-size: clamp(1.125rem, 2vw, 1.5rem); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.hero-mail { margin: -1rem 0 0; color: #A9C2DA; }
.hero-mail a { color: var(--ant-sky); font-weight: 500; }

/* Footer: who Antelum is, in one short paragraph. */
.site-footer .ant-container { align-items: flex-start; }
.footer-about { flex: 1 1 22rem; max-width: 30rem; display: grid; gap: .375rem; }
.footer-about .footer-brand { margin-bottom: .5rem; }
.footer-tagline { color: var(--ant-sky) !important; font-family: var(--ant-font-display); font-size: .9375rem !important; }
.footer-label { color: #fff !important; font-weight: 500; }
.footer-desc { color: #A9C2DA; line-height: 1.6; }

/* ---------- Workflows you describe in plain words ---------- */
.wf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.wf-lead { color: var(--ant-slate); max-width: var(--measure); font-size: 1.125rem; margin: 0 0 1.5rem; }
.wf-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.wf-points li { position: relative; padding-left: 1.75rem; color: var(--ant-ink); }
.wf-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: .75rem; height: 2px; background: var(--ant-action); }
.wf-demo { margin: 0; background: var(--ant-white); border: 1px solid var(--ant-line); border-radius: var(--ant-radius-card); padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--ant-shadow); }
.wf-label { font-size: .8125rem; font-weight: 500; color: var(--ant-slate); margin-bottom: 1rem; }
.wf-ask { margin: 0 0 1rem auto; max-width: 88%; background: var(--ant-action); color: #fff; padding: .75rem 1rem; border-radius: 14px 14px 4px 14px; font-size: .9375rem; line-height: 1.5; }
.wf-reply { background: var(--ant-wash); border-radius: 14px 14px 14px 4px; padding: 1rem 1.125rem; max-width: 94%; }
.wf-reply > p { margin: 0 0 .5rem; font-weight: 500; color: var(--ant-ink); font-size: .9375rem; }
.wf-steps { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: .375rem; color: var(--ant-ink); font-size: .9375rem; line-height: 1.45; }
.wf-steps li::marker { color: var(--ant-action); font-weight: 600; }
.wf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding-top: .75rem; border-top: 1px solid var(--ant-line); font-size: .8125rem; }
.wf-status { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; color: #176B4B; }
.wf-dot { width: 8px; height: 8px; border-radius: 50%; background: #176B4B; }
.wf-schedule { color: var(--ant-slate); }
.wf-actions { display: inline-flex; gap: .375rem; margin-left: auto; }
.wf-actions span { border: 1px solid var(--ant-line); border-radius: 999px; padding: .125rem .625rem; color: var(--ant-slate); background: var(--ant-white); }
.wf-examples-label { margin: 1.25rem 0 .5rem; font-size: .8125rem; font-weight: 500; color: var(--ant-slate); }
.wf-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wf-examples li { border: 1px solid var(--ant-line); border-radius: 999px; padding: .375rem .75rem; font-size: .875rem; color: var(--ant-ink); background: var(--ant-white); }
@media (max-width: 860px) { .wf-grid { grid-template-columns: 1fr; } }
/* One moment of motion: the steps appear as if the chat is building them. */
.js .wf-demo.is-waiting .wf-steps li, .js .wf-demo.is-waiting .wf-bar { opacity: 0; transform: translateY(6px); }
.js .wf-demo .wf-steps li, .js .wf-demo .wf-bar { transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui), transform var(--ant-dur-reveal) var(--ant-ease-ui); }
@media (prefers-reduced-motion: reduce) { .js .wf-demo.is-waiting .wf-steps li, .js .wf-demo.is-waiting .wf-bar { opacity: 1; transform: none; } }

/* ---------- Workspace page ---------- */
/* Longer boards (up to 26 tiles) use smaller tiles so they fit on one line. */
.flap.flap--long { font-size: min(.52em, calc((100vw - 2.5rem) / 20.5)); }
.ws-modules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ant-line); }
.ws-module { padding: 1.75rem 1.75rem 1.75rem 0; border-bottom: 1px solid var(--ant-line); }
.ws-module:not(:nth-child(3n + 1)) { padding-left: 1.75rem; border-left: 1px solid var(--ant-line); }
.ws-module h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.375rem; margin: 0 0 .5rem; }
.ws-module p { margin: 0; color: var(--ant-slate); }
@media (max-width: 960px) {
  .ws-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-module, .ws-module:not(:nth-child(3n + 1)) { padding: 1.5rem 1.5rem 1.5rem 0; border-left: 0; }
  .ws-module:nth-child(2n) { padding-left: 1.5rem; border-left: 1px solid var(--ant-line); }
}
@media (max-width: 600px) {
  .ws-modules { grid-template-columns: 1fr; }
  .ws-module, .ws-module:nth-child(2n) { padding: 1.5rem 0; border-left: 0; }
}

/* ---------- The OS briefing on the home page ---------- */
.os-teaser-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; }
.os-teaser .ant-heading { color: #fff; max-width: 20ch; }
.os-teaser-body { color: #A9C2DA; max-width: 60ch; margin: 0; }
.badge--dark { background: rgb(111 195 247 / 14%); color: var(--ant-sky); }
@media (max-width: 760px) { .os-teaser-grid { grid-template-columns: 1fr; } .os-teaser .ant-button { justify-self: start; } }

/* ---------- Eight building blocks: four per row ---------- */
.ws-modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ws-module, .ws-module:not(:nth-child(3n + 1)) { padding: 1.75rem 1.5rem 1.75rem 0; border-left: 0; }
.ws-module:not(:nth-child(4n + 1)) { padding-left: 1.5rem; border-left: 1px solid var(--ant-line); }
@media (max-width: 960px) {
  .ws-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-module, .ws-module:not(:nth-child(4n + 1)) { padding: 1.5rem 1.5rem 1.5rem 0; border-left: 0; }
  .ws-module:nth-child(2n) { padding-left: 1.5rem; border-left: 1px solid var(--ant-line); }
}
@media (max-width: 600px) {
  .ws-modules { grid-template-columns: 1fr; }
  .ws-module, .ws-module:nth-child(2n) { padding: 1.5rem 0; border-left: 0; }
}

/* ---------- Workflow example tabs ---------- */
.wf-tabs { display: none; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
.js .wf-tabs { display: flex; }
.wf-tabs button { font: 500 .875rem/1.2 var(--ant-font-body); color: var(--ant-slate); background: var(--ant-white); border: 1px solid var(--ant-line); border-radius: 999px; padding: .5rem .875rem; min-height: 36px; cursor: pointer; transition: border-color var(--ant-duration) var(--ant-ease), color var(--ant-duration) var(--ant-ease); }
.wf-tabs button:hover { border-color: #718398; }
.wf-tabs button[aria-selected="true"] { background: var(--ant-wash); border-color: var(--ant-action); color: var(--ant-action); }
.wf-tabs button:focus-visible { outline: 3px solid var(--ant-beam); outline-offset: 2px; }
.wf-panel + .wf-panel { margin-top: 1.25rem; }
.js .wf-panel + .wf-panel { margin-top: 0; }
.js .wf-panel[hidden] { display: none; }

/* ---------- Example dashboard on the OS page ---------- */
.dash-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: 2rem; }
.dash-head .section-head { margin-bottom: 0; }
@media (max-width: 860px) { .dash-head { grid-template-columns: 1fr; } }
.dash { margin: 0; background: #021529; border-radius: var(--ant-radius-card); padding: clamp(1rem, 2.5vw, 1.5rem); color: #fff; box-shadow: 0 24px 60px rgb(2 21 41 / 22%); }
.dash-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1rem; }
.dash-name { font-family: var(--ant-font-display); font-weight: 600; font-size: 1.125rem; }
.dash-view { color: #A9C2DA; font-size: .9375rem; }
.dash-sample { margin-left: auto; font-size: .75rem; color: #A9C2DA; border: 1px solid #45627E; border-radius: 999px; padding: .125rem .625rem; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.dash-kpi, .dash-widget { background: #0B2D4F; border-radius: 10px; padding: 1rem; }
.dash-kpi-label, .dash-widget-title { margin: 0 0 .375rem; color: #A9C2DA; font-size: .8125rem; }
.dash-kpi-value { margin: 0; font-family: var(--ant-font-display); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.625rem); letter-spacing: -.02em; }
.dash-kpi-delta { margin: .25rem 0 0; font-size: .75rem; color: #A9C2DA; }
.dash-kpi-delta.is-up { color: var(--ant-sky); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .75rem; }
.dash-widget--wide { grid-row: span 2; }
.dash-widget--full { grid-column: 1 / -1; }
.dash-line { width: 100%; height: auto; display: block; }
.dash-line text { fill: #A9C2DA; font-size: 9px; font-family: var(--ant-font-body); }
.dash-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dash-bars li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2rem; align-items: center; gap: .5rem; font-size: .8125rem; }
.dash-bar-label { color: #A9C2DA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track { height: 8px; background: rgb(255 255 255 / 8%); border-radius: 4px; overflow: hidden; }
.dash-bar-fill { display: block; height: 100%; background: var(--ant-beam); border-radius: 4px; }
.dash-bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.dash-insight p:last-child { margin: 0; font-size: .9375rem; line-height: 1.5; }
.dash-w-5 { width: 5%; } .dash-w-10 { width: 10%; } .dash-w-15 { width: 15%; } .dash-w-20 { width: 20%; } .dash-w-25 { width: 25%; }
.dash-w-30 { width: 30%; } .dash-w-35 { width: 35%; } .dash-w-40 { width: 40%; } .dash-w-45 { width: 45%; } .dash-w-50 { width: 50%; }
.dash-w-55 { width: 55%; } .dash-w-60 { width: 60%; } .dash-w-65 { width: 65%; } .dash-w-70 { width: 70%; } .dash-w-75 { width: 75%; }
.dash-w-80 { width: 80%; } .dash-w-85 { width: 85%; } .dash-w-90 { width: 90%; } .dash-w-95 { width: 95%; } .dash-w-100 { width: 100%; }
/* Client pipeline: one column per stage of the company's own process. */
.dash-pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.dash-pipeline li { position: relative; background: rgb(255 255 255 / 5%); border-radius: 8px; padding: .75rem; }
.dash-pipeline li::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .5rem; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 10%); }
.dash-pipeline li.is-done::after { background: #006BC7; }
.dash-pipeline li.is-current { background: rgb(12 145 246 / 16%); box-shadow: inset 0 0 0 1px rgb(111 195 247 / 40%); }
.dash-pipeline li.is-current::after { background: var(--ant-beam); }
.dash-stage { display: block; font-size: .75rem; color: #A9C2DA; margin-bottom: .125rem; }
.dash-count { display: block; font-family: var(--ant-font-display); font-weight: 500; font-size: 1.375rem; padding-bottom: .5rem; }
@media (max-width: 860px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-widget--wide { grid-row: auto; }
  .dash-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Project tracker on the OS page ---------- */
.track { margin: 0; background: var(--ant-paper); border: 1px solid var(--ant-line); border-radius: var(--ant-radius-card); padding: clamp(1rem, 2.5vw, 1.5rem); }
.track-sample { margin: 0 0 .75rem; font-size: .75rem; color: var(--ant-slate); }
.track-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.track-item { background: var(--ant-white); border: 1px solid var(--ant-line); border-radius: 10px; padding: 1rem 1.25rem; }
.track-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .875rem; }
.track-head h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.125rem; margin: 0; }
.track-source { font-size: .8125rem; color: var(--ant-slate); }
.track-steps { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .375rem; counter-reset: tstep; }
.track-steps li { position: relative; padding-top: .875rem; font-size: .8125rem; color: var(--ant-slate); }
.track-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--ant-line); }
.track-steps li.is-done { color: var(--ant-ink); }
.track-steps li.is-current { color: var(--ant-action); font-weight: 600; }
.track-next { margin: 0; font-size: .9375rem; color: var(--ant-ink); }
.track-next strong { color: var(--ant-action); font-weight: 600; }
@media (max-width: 600px) { .track-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .75rem; } .track-steps li { font-size: .75rem; } }

/* ---------- Tracker bars: grey track plus a fill that can grow ---------- */
.track-steps li::after { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-radius: 3px; background: var(--ant-action); transform-origin: left center; transform: scaleX(0); }
.track-steps li.is-done::before, .track-steps li.is-current::before { background: var(--ant-line); }
.track-steps li.is-done::after { transform: scaleX(1); }
.track-steps li.is-current::after { transform: scaleX(.55); }
.track-live { display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: #176B4B; vertical-align: 1px; }

/* ---------- Animated overview and tracker (once, when they scroll into view) ---------- */
.js .dash.is-waiting .dash-bar-fill { transform: scaleX(0); }
.js .dash .dash-bar-fill { transform-origin: left center; transition: transform var(--ant-dur-draw) var(--ant-ease-draw); }
.js .dash .dash-bars li:nth-child(2) .dash-bar-fill { transition-delay: 120ms; }
.js .dash .dash-bars li:nth-child(3) .dash-bar-fill { transition-delay: 240ms; }
.js .dash .dash-bars li:nth-child(4) .dash-bar-fill { transition-delay: 360ms; }
.js .dash.is-waiting .dash-line-stroke { opacity: 0; }
.js .dash.is-waiting .dash-line-area, .js .dash.is-waiting .dash-line-dot { opacity: 0; }
.js .dash .dash-line-area { transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui) 900ms; }
.js .dash .dash-line-dot { transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui) 1200ms; }
.js .dash.is-waiting .dash-pipeline li::after { transform: scaleX(0); }
.js .dash .dash-pipeline li::after { transform-origin: left center; transition: transform var(--ant-dur-scene) var(--ant-ease-ui); }
.js .dash .dash-pipeline li:nth-child(2)::after { transition-delay: 100ms; }
.js .dash .dash-pipeline li:nth-child(3)::after { transition-delay: 200ms; }
.js .dash .dash-pipeline li:nth-child(4)::after { transition-delay: 300ms; }
.js .dash .dash-pipeline li:nth-child(5)::after { transition-delay: 400ms; }
.js .dash.is-waiting .dash-insight, .js .dash.is-waiting .dash-kpi-delta { opacity: 0; }
.js .dash .dash-insight { transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui) 600ms; }
.js .dash .dash-kpi-delta { transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui) 600ms; }
.js .track.is-waiting .track-steps li::after { transform: scaleX(0); }
.js .track .track-steps li::after { transition: transform var(--ant-dur-scene) var(--ant-ease-ui); }
.js .track .track-steps li:nth-child(2)::after { transition-delay: 60ms; }
.js .track .track-steps li:nth-child(3)::after { transition-delay: 120ms; }
.js .track .track-steps li:nth-child(4)::after { transition-delay: 180ms; }
.js .track .track-steps li:nth-child(5)::after { transition-delay: 240ms; }
.js .track .track-steps li:nth-child(6)::after { transition-delay: 300ms; }
.js .track.is-waiting .track-next { opacity: 0; }
.js .track .track-next { transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui) 600ms; }
@keyframes track-pulse { from { box-shadow: 0 0 0 0 rgb(23 107 75 / 45%); } to { box-shadow: 0 0 0 5px rgb(23 107 75 / 0%); } }
.js .track .track-live { animation: track-pulse var(--ant-dur-draw) var(--ant-ease-ui) 1; }
@media (prefers-reduced-motion: reduce) {
  .js .dash.is-waiting *, .js .track.is-waiting * { transition: none !important; }
  .js .track .track-live { animation: none; }
}

/* Finished steps in green, the current step in blue. */
.track-steps li.is-done::after { background: var(--ant-success); }
.track-steps li.is-done { color: #176B4B; font-weight: 500; }
/* The line chart is drawn by JavaScript so the dot can ride the tip of the line. */
.js .dash .dash-line-stroke { transition: none; }
.js .dash .dash-line-dot { transition: none; }

/* A drop shows in red with a down arrow. */
.dash-kpi-delta.is-down { color: var(--ant-error-on-dark); }

/* Contours stay out of text sections (graphic grammar: never behind dense text). */
.band-wash::before { content: none; }

/* Six building blocks: three per row. */
.ws-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ws-module, .ws-module:not(:nth-child(4n + 1)) { padding: 1.75rem 1.75rem 1.75rem 0; border-left: 0; }
.ws-module:not(:nth-child(3n + 1)) { padding-left: 1.75rem; border-left: 1px solid var(--ant-line); }
@media (max-width: 960px) {
  .ws-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-module, .ws-module:not(:nth-child(3n + 1)) { padding: 1.5rem 1.5rem 1.5rem 0; border-left: 0; }
  .ws-module:nth-child(2n) { padding-left: 1.5rem; border-left: 1px solid var(--ant-line); }
}
@media (max-width: 600px) {
  .ws-modules { grid-template-columns: 1fr; }
  .ws-module, .ws-module:nth-child(2n) { padding: 1.5rem 0; border-left: 0; }
}

/* ---------- Sound familiar?: the problem, then what we do about it ---------- */
.help-list li { grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.help-problem, .help-answer { position: relative; padding-left: 2.25rem; }
.help-problem { color: var(--ant-slate); font-weight: 400; }
.help-problem::before, .help-answer::before { position: absolute; left: 0; top: .1em; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font: 600 .8125rem/1 var(--ant-font-body); }
.help-problem::before { content: "\2715"; color: var(--ant-error); background: color-mix(in srgb, var(--ant-error) 9%, var(--ant-white)); }
.help-answer { color: var(--ant-ink); font-weight: 500; }
.help-answer::before { content: "\2713"; color: var(--ant-success); background: color-mix(in srgb, var(--ant-success) 9%, var(--ant-white)); }
.help-arrow { height: 2px; background: var(--ant-line); position: relative; }
.help-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--ant-line); border-right: 0; }
@media (max-width: 760px) {
  .help-list li { grid-template-columns: 1fr; gap: .5rem; }
  .help-arrow { display: none; }
}

/* ---------- Scroll-in motion for the project steps and Sound familiar? ---------- */
.js .steps.is-waiting .step::after { transform: scaleX(0); }
.js .steps .step::after { transform-origin: left center; transition: transform var(--ant-dur-scene) var(--ant-ease-ui); }
.js .steps.is-waiting .step-dot { transform: scale(0); }
.js .steps .step-dot { transition: transform var(--ant-dur-reveal) var(--ant-ease-entrance); }
.js .steps.is-waiting .step h3, .js .steps.is-waiting .step p { opacity: 0; transform: translateY(var(--ant-reveal-travel)); }
.js .steps .step h3, .js .steps .step p { transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui), transform var(--ant-dur-reveal) var(--ant-ease-ui); }
.js .steps .step:nth-child(1) * , .js .steps .step:nth-child(1)::after { transition-delay: 0ms; }
.js .steps .step:nth-child(2) *, .js .steps .step:nth-child(2)::after { transition-delay: 60ms; }
.js .steps .step:nth-child(3) *, .js .steps .step:nth-child(3)::after { transition-delay: 120ms; }
.js .steps .step:nth-child(4) *, .js .steps .step:nth-child(4)::after { transition-delay: 180ms; }
.js .steps .step:nth-child(5) *, .js .steps .step:nth-child(5)::after { transition-delay: 240ms; }
.js .steps .step:nth-child(6) *, .js .steps .step:nth-child(6)::after { transition-delay: 300ms; }
.js .help-list.is-waiting li { opacity: 0; transform: translateY(var(--ant-reveal-travel)); }
.js .help-list li { transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui), transform var(--ant-dur-reveal) var(--ant-ease-ui); }
.js .help-list.is-waiting .help-arrow { transform: scaleX(0); }
.js .help-list .help-arrow { transform-origin: left center; transition: transform var(--ant-dur-scene) var(--ant-ease-ui) 100ms; }
.js .help-list li:nth-child(2) { transition-delay: 60ms; }
.js .help-list li:nth-child(3) { transition-delay: 120ms; }
.js .help-list li:nth-child(4) { transition-delay: 180ms; }
.js .help-list li:nth-child(5) { transition-delay: 240ms; }
@media (max-width: 960px) {
  .js .steps.is-waiting .step::after { transform: scaleY(0); }
  .js .steps .step::after { transform-origin: center top; }
}
@media (prefers-reduced-motion: reduce) {
  .js .steps.is-waiting *, .js .steps.is-waiting .step::after, .js .help-list.is-waiting * { transition: none !important; }
}

/* The project line is drawn in brand blue so its growth reads clearly. */
.step::after { background: linear-gradient(90deg, var(--ant-action), var(--ant-sky)); height: 2px; }
@media (max-width: 960px) { .step::after { width: 2px; background: linear-gradient(180deg, var(--ant-action), var(--ant-sky)); } }

/* Set up together, fine-tune, add what is missing: three numbered steps. */
.starts-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.starts-grid--3 .start-meta { font-family: var(--ant-font-display); font-size: 1.25rem; }
@media (max-width: 860px) { .starts-grid--3 { grid-template-columns: 1fr; } }

/* ---------- Journey: full-width particle layer behind the three steps ---------- */
.journey-bg { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; pointer-events: none; z-index: 0; }
.journey-bg .journey-canvas { width: 100%; height: 100%; display: block; }
.journey .journey-grid { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); }
.journey .journey-text { max-width: 34rem; }
@media (max-width: 860px) {
  /* The particles get their own band in the lower part of the screen, so they
     never sit behind the text. */
  .journey-bg { top: 56vh; height: 44vh; margin-bottom: -44vh; opacity: .75; }
  .journey .journey-text { max-width: none; }
  .journey-step { min-height: 92vh; justify-content: flex-start; padding-top: 14vh; }
  .journey-step:last-child { min-height: 92vh; }
}

/* Who we work with: one positive list, two columns. */
.audience-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; border-top: 1px solid var(--ant-line); }
.audience-list li { border-bottom: 1px solid var(--ant-line); padding: .875rem 0; }
@media (max-width: 760px) { .audience-list { grid-template-columns: 1fr; } }

/* Antelum OS band: a field of light points under a soft drifting light, the same
   treatment as the price block in a proposition. The field is a separate element
   because both pseudo-elements already carry the light, and it is oversized so the
   drift never uncovers an edge. Owner 2026-10-21: keep the graphic and give it slow
   motion (the field drifts, the light breathes, the hairline travels); reduced
   motion keeps it still. */
.os-teaser { position: relative; overflow: hidden; }
.os-dots { position: absolute; inset: -40px; pointer-events: none;
  background-image: radial-gradient(circle at center, rgb(111 195 247 / 26%) 1px, rgb(0 0 0 / 0%) 1.4px);
  background-size: 26px 26px; }
.os-teaser::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: -60%; height: 120%; background: radial-gradient(ellipse at center, rgb(12 145 246 / 26%), rgb(12 145 246 / 0%) 60%); pointer-events: none; } /* lint-allow B8: OS band drifting light, the band signature; owner kept it 2026-10-21 */
.os-teaser::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(111 195 247 / 55%), transparent); background-size: 50% 100%; background-position: 50% 0; background-repeat: no-repeat; pointer-events: none; }
.os-teaser .ant-container { position: relative; z-index: 1; }
@keyframes os-field-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(26px, -26px, 0); } }
@keyframes os-light-breathe { 0%, 100% { opacity: .7; transform: translateX(-4%); } 50% { opacity: 1; transform: translateX(4%); } }
@keyframes os-line-travel { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .os-dots { animation: os-field-drift 18s linear infinite; }
  .os-teaser::before { animation: os-light-breathe 14s var(--ant-ease-draw) infinite; }
  .os-teaser::after { animation: os-line-travel 9s var(--ant-ease-ui) infinite; }
}

/* The particle layer never runs past the end of its section (clip keeps sticky working, unlike overflow: hidden). */
.journey { clip-path: inset(0); }

/* Services: three pillars side by side, each a card with its number, glyph and
   promise. Websites follow as one supporting line, so the pillars carry the page. */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pillar { position: relative; background: var(--ant-white, #fff); border: 1px solid var(--ant-line); border-top: 3px solid var(--ant-action); border-radius: 12px; padding: 2rem 1.75rem 2.25rem; display: flex; flex-direction: column; transition: border-color var(--ant-dur-fast) var(--ant-ease-ui), box-shadow var(--ant-dur-fast) var(--ant-ease-ui), transform var(--ant-dur-fast) var(--ant-ease-ui); }
.pillar:hover { box-shadow: 0 14px 36px -22px rgb(2 21 41 / 45%); transform: translateY(-2px); }
.pillar-index { position: absolute; top: 1.5rem; right: 1.75rem; margin: 0; font-family: var(--ant-font-display); font-size: .875rem; color: var(--ant-slate); letter-spacing: .06em; }
.pillar .offer-glyph { width: 44px; height: 44px; margin-bottom: 1.25rem; }
.pillar h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 1rem; }
.pillar-body { margin: 0; color: var(--ant-slate); }
.offers-also { margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--ant-line); color: var(--ant-slate); max-width: 72ch; }
.offers-also-label { display: inline-block; margin-right: .5rem; font-family: var(--ant-font-display); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ant-action); }
.offers-also strong { color: var(--ant-ink); font-weight: 500; }
@media (max-width: 960px) { .pillars { grid-template-columns: 1fr; } }

/* The free data check leads the starts, full width, on a quiet wash panel. */
.start--free { grid-column: 1 / -1; background: var(--ant-wash, #EEF4FA); border-color: transparent; border-left: 3px solid var(--ant-action); }

/* Promises about client data: a short list with a check-style rule. */
.privacy-list { list-style: none; margin: 0; padding: 0; }
.privacy-list li { position: relative; padding: .75rem 0 .75rem 1.75rem; border-bottom: 1px solid var(--ant-line); color: var(--ant-slate); font-size: 1rem; }
.privacy-list li:last-child { border-bottom: 0; }
.privacy-list li::before { content: ""; position: absolute; left: .25rem; top: 1.2rem; width: .6rem; height: .35rem; border-left: 2px solid var(--ant-action); border-bottom: 2px solid var(--ant-action); transform: rotate(-45deg); }
.privacy-list--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; border-top: 1px solid var(--ant-line); }
.privacy-list--row li { border-bottom: 0; padding-top: 1.25rem; }
.privacy-list--row li::before { top: 1.7rem; }
@media (max-width: 860px) { .privacy-list--row { grid-template-columns: 1fr; } .privacy-list--row li { border-bottom: 1px solid var(--ant-line); } }

/* Pillar detail: the concrete work as a short list, and the result in a quiet
   panel pinned to the bottom so the three cards line up. */
.pillar-body { margin: 0 0 1.5rem; }
.pillar-label { margin: 0 0 .5rem; font-family: var(--ant-font-display); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ant-action); }
.pillar-does { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.pillar-does li { position: relative; padding: .5rem 0 .5rem 1.25rem; border-top: 1px solid var(--ant-line); font-size: .96875rem; line-height: 1.55; color: var(--ant-ink); }
.pillar-does li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .5rem; height: 2px; background: var(--ant-action); }
.pillar-get { margin-top: auto; background: var(--ant-wash); border-radius: 8px; padding: 1rem 1.125rem; }
.pillar-get p:last-child { margin: 0; font-size: .96875rem; line-height: 1.55; color: var(--ant-ink); }
/* Each service line: its market name, then one plain line on what it means. */
.pillar-does strong { display: block; font-family: var(--ant-font-display); font-weight: 500; font-size: 1.0625rem; color: var(--ant-ink); margin-bottom: .125rem; }
.pillar-does li { color: var(--ant-slate); padding-top: .75rem; padding-bottom: .75rem; }
.pillar-does li::before { top: 1.5rem; }

/* OS page: the problem, as a short list of what goes wrong today. */
.pain-list { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--ant-line); }
.pain-list li { position: relative; padding: .875rem 0 .875rem 1.5rem; border-bottom: 1px solid var(--ant-line); color: var(--ant-slate); }
.pain-list li::before { content: ""; position: absolute; left: 0; top: 1.7rem; width: .625rem; height: 2px; background: var(--ant-slate); }

/* OS page: what each team gets, four short cards. */
.teams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; }
.team { background: var(--ant-white); border: 1px solid var(--ant-line); border-top: 3px solid var(--ant-action); border-radius: 12px; padding: 1.5rem; }
.team h3 { font-family: var(--ant-font-display); font-weight: 500; font-size: 1.1875rem; line-height: 1.3; margin: 0 0 .5rem; color: var(--ant-ink); }
.team p { margin: 0; color: var(--ant-slate); font-size: 1rem; line-height: 1.6; }
/* The card for everyone sits on the quiet wash panel, set apart from the roles. */
.team--everyone { background: var(--ant-wash); border-color: transparent; border-top-color: var(--ant-action); }

/* OS page: questions that open in place, no script needed. */
.faq { max-width: 52rem; border-top: 1px solid var(--ant-line); }
.faq-item { border-bottom: 1px solid var(--ant-line); }
.faq-item summary { position: relative; cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; font-family: var(--ant-font-display); font-weight: 500; font-size: 1.1875rem; color: var(--ant-ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; color: var(--ant-action); transition: transform var(--ant-dur-fast) var(--ant-ease-ui); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:focus-visible { outline: 3px solid var(--ant-beam); outline-offset: 3px; border-radius: 4px; }
.faq-item p { margin: 0 0 1.25rem; color: var(--ant-slate); max-width: var(--measure); }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }

/* 404 pages: symbol home link, then the other languages as quiet links. */
.not-found-brand { display: inline-flex; margin-bottom: 2.5rem; border-radius: 4px; }
.not-found-brand img { width: 112px; height: 56px; }
.not-found-langs { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 2.5rem 0 0; font-size: .9375rem; }
.not-found-langs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ant-sky); text-underline-offset: .25em; }
.not-found-langs a:hover { color: #fff; }

/* ---------- Quiet UI (W-0030) ----------
   Hover, focus and press for every page outside the hero and the journey. Values come from the
   tokens (--ant-ease-ui, --ant-dur-fast). Two values are the ticket's and have no token yet: press
   100 ms and release 200 ms. Under reduced motion the token durations collapse, so state changes
   keep a 180 ms colour change (first-light.md, "Colour and opacity changes of 180 ms stay"). */
:root { --q-dur: var(--ant-dur-fast); --q-press: 100ms; --q-release: 200ms; --q-nudge: 4px; }
@media (prefers-reduced-motion: reduce) { :root { --q-dur: 180ms; } }

/* Focus rings: a transparent ring at rest, so the colour fades in. */
:is(a, button, summary):not(:is(.hero, .journey) *) { transition: outline-color var(--q-dur) var(--ant-ease-ui); }
@media (forced-colors: none) {
  :is(a, button, summary):not(:is(.hero, .journey) *) { outline: 3px solid transparent; outline-offset: 3px; }
  .wf-tabs button, .choice span { outline: 3px solid transparent; outline-offset: 2px; }
}

/* Links: the underline is a 1 px line that scales in from the left and leaves to the right
   (the origin flips on hover, so the same scale draws one way and retracts the other). */
:is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *) {
  position: relative;
  text-decoration: none;
  transition: color var(--q-dur) var(--ant-ease-ui), outline-color var(--q-dur) var(--ant-ease-ui);
}
:is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *)::before,
:is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *)::after {
  content: ""; position: absolute; left: var(--q-x, 0px); right: var(--q-x, 0px); bottom: var(--q-y, .05em); height: var(--q-h, 1px);
  background: currentColor; pointer-events: none;
}
:is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *)::before { opacity: var(--q-rest, 0); }
:is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *)::after { transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--q-dur) var(--ant-ease-ui); }
:is(.footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *) { --q-rest: .45; }
.nav a:not([aria-current]):not(:is(.hero, .journey) *) { --q-x: .875rem; --q-y: .7rem; --q-h: 2px; }
.lang-switch a:not([aria-current]):not(:is(.hero, .journey) *) { --q-x: .5rem; --q-y: .55rem; }
.mail-link.mail-link.mail-link:not(:is(.hero, .journey) *) { --q-y: .1em; }
@media (hover: hover) and (pointer: fine) {
  :is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}
:is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *):focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Buttons and chips: colour at the state duration, press 100 ms down, 200 ms back. */
:is(.ant-button, .wf-tabs button, .choice span):not(:is(.hero, .journey) *) {
  transition-property: background-color, border-color, color, transform, outline-color, box-shadow, translate;
  transition-duration: var(--q-dur), var(--q-dur), var(--q-dur), var(--q-release), var(--q-dur), var(--q-dur), var(--ant-dur-reveal);
  transition-timing-function: var(--ant-ease-ui), var(--ant-ease-ui), var(--ant-ease-ui), var(--ant-ease-ui), var(--ant-ease-ui), var(--ant-ease-ui), var(--ant-ease-spring);
}
:is(.ant-button:not(:disabled), .wf-tabs button):not(:is(.hero, .journey) *):active, .choice:active span {
  transform: scale(.98);
  transition-duration: var(--q-dur), var(--q-dur), var(--q-dur), var(--q-press), var(--q-dur), var(--q-dur), var(--ant-dur-reveal);
}

/* Inputs: border and ring at the state duration. */
.contact-form :is(input[type="text"], input[type="email"], textarea) { transition: border-color var(--q-dur) var(--ant-ease-ui), box-shadow var(--q-dur) var(--ant-ease-ui); }
.contact-form :is(input[type="text"], input[type="email"], textarea):hover:not(:focus-visible, [aria-invalid="true"]) { border-color: var(--ant-slate); }

/* Cards: the border darkens, nothing lifts. */
@media (hover: hover) and (pointer: fine) {
  .pillar:hover { border-right-color: var(--ant-control); border-bottom-color: var(--ant-control); border-left-color: var(--ant-control); }
}

/* Arrows nudge 4 px toward their direction of travel (no arrow glyph is in the markup yet). */
.ant-arrow { display: inline-block; transition: transform var(--q-dur) var(--ant-ease-ui); }
@media (hover: hover) and (pointer: fine) { :is(a, button):hover .ant-arrow { transform: translateX(var(--q-nudge)); } }

/* Reduced motion: no drawing, no press, no nudge; every state is a colour change. */
@media (prefers-reduced-motion: reduce) {
  :is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *) {
    text-decoration: underline; text-underline-offset: .2em;
    text-decoration-color: color-mix(in srgb, currentColor calc(var(--q-rest, 0) * 100%), transparent);
  }
  :is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *)::before,
  :is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *)::after { content: none; }
  :is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link):not(:is(.hero, .journey) *):is(:hover, :focus-visible) { text-decoration-color: currentColor; }
  :is(.ant-button:not(:disabled), .wf-tabs button):not(:is(.hero, .journey) *):active, .choice:active span { transform: none; }
  :is(a, button):hover .ant-arrow { transform: none; }
  /* antelum.css switches every transition off under reduced motion; these states keep a 180 ms colour change. */
  :is(.nav a:not([aria-current]), .lang-switch a:not([aria-current]), .footer-langs a, .footer-mail a, .mail-link, .not-found-langs a, .ant-link, .ant-button, .wf-tabs button, .choice span, .pillar, a, button, summary, .contact-form :is(input[type="text"], input[type="email"], textarea)):not(:is(.hero, .journey) *) {
    transition-property: color, background-color, border-color, text-decoration-color, outline-color, box-shadow !important;
    transition-duration: var(--q-dur) !important;
    transition-timing-function: var(--ant-ease-ui) !important;
  }
}

/* ---------- Contact flow (W-0040): three groups, the live note, the receipt ---------- */
.contact-grid { grid-template-rows: auto auto 1fr; }
.contact-grid > .card-rule { grid-column: 1; grid-row: 1 / span 3; }
.contact-grid > .note-card { grid-column: 2; grid-row: 1; }
.contact-grid > .contact-side { grid-column: 2; grid-row: 2; }
@media (max-width: 860px) {
  .contact-grid > .card-rule, .contact-grid > .note-card, .contact-grid > .contact-side { grid-column: auto; grid-row: auto; }
}
.contact-flow { display: block; }
.form-progress { position: relative; height: 1px; background: var(--ant-line); overflow: hidden; }
.form-progress span { position: absolute; inset: 0; background: var(--ant-action); transform: scaleX(var(--progress, 0)); transform-origin: 0 50%; transition: transform var(--ant-dur-reveal) var(--ant-ease-ui); }
.form-group { display: grid; gap: 1.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.form-group legend { padding: 0; margin: 0 0 1.25rem; font-family: var(--ant-font-display); font-weight: 500; font-size: 1.1875rem; line-height: 1.3; color: var(--ant-ink); }
.note-text { margin: 0; color: var(--ant-ink); font-size: 1.0625rem; line-height: 1.6; }
.note-text.is-empty { color: var(--ant-slate); }
.receipt:focus { outline: none; }
.receipt .side-title { margin-top: 1.75rem; }
.form-error { display: grid; gap: .75rem; padding-left: 1rem; border-left: 3px solid var(--ant-light-danger); }
.form-error[hidden], .receipt[hidden], .note-card[hidden], .contact-form[hidden], .contact-side .card[hidden] { display: none; }
.form-error p { margin: 0; color: var(--ant-ink); font-weight: 500; }
.form-error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.form-error .mail-link { font-size: 1.25rem; margin: 0; }

/* Send button: hard cut to "Sent", then a check draws (ring 300 ms, tick 250 ms). */
.send-check { display: none; margin-left: .625rem; flex: none; }
.send-check circle, .send-check path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ant-button.is-sent .send-check { display: inline-block; }
.ant-button.is-sent:disabled { background: var(--ant-action); color: var(--ant-on-action); opacity: 1; cursor: default; }
.ant-button.is-drawn .send-check circle { stroke-dashoffset: 0; transition: stroke-dashoffset var(--ant-dur-reveal) var(--ant-ease-draw); }
.ant-button.is-drawn .send-check path { stroke-dashoffset: 0; transition: stroke-dashoffset 250ms var(--ant-ease-entrance) var(--ant-dur-reveal); }

/* Sent and error pages fill the viewport, so no paper shows under the footer. */
.page-result { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page-result main { flex: 1; display: flex; flex-direction: column; }
.page-result main .hero { flex: 1; }
.hero .side-title { color: #fff; margin: 0 0 .5rem; }
.hero .next-steps { max-width: 44rem; margin: 0 0 2.25rem; }
.hero .next-steps li { border-bottom-color: #45627E; }
.hero .next-steps strong { color: #fff; }
.hero .next-steps span { color: #A9C2DA; }

/* ---------- Sign-off lockup (W-0036) ----------
   The closing band builds the stacked W2c lockup once, in order: the arc draws right to left,
   the apex rises 6 px and settles, the name rises from its mask, the tagline opens its tracking.
   About 1.6 s in all, then still. Without JavaScript or with reduced motion the finished lockup shows. */
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: center; }
.sign-off { margin: 0; width: 240px; max-width: 100%; container-type: inline-size; }
.sign-off svg { display: block; width: 100%; height: auto; overflow: visible; }
.sign-tagline { margin: .75rem 0 0; text-align: center; white-space: nowrap; font: 400 4.64cqw/1.2 var(--ant-font-body); letter-spacing: .52em; text-indent: .52em; text-transform: uppercase; color: var(--ant-sky); }
@media (max-width: 760px) { .closing-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .sign-arc-reveal { transform-box: fill-box; transform-origin: 100% 50%; transition: transform var(--ant-dur-draw) var(--ant-ease-draw); }
  .sign-apex { transition: transform var(--ant-dur-reveal) var(--ant-ease-entrance) 600ms, opacity var(--ant-dur-reveal) var(--ant-ease-entrance) 600ms; }
  .sign-name-rise { transition: transform var(--ant-dur-scene) var(--ant-ease-entrance) 900ms; }
  .sign-tagline { transition: opacity var(--ant-dur-reveal) var(--ant-ease-ui) 1200ms, letter-spacing var(--ant-dur-scene) var(--ant-ease-entrance) 1200ms, text-indent var(--ant-dur-scene) var(--ant-ease-entrance) 1200ms; }
  .js .sign-off:not(.is-in) .sign-arc-reveal { transform: scaleX(0); }
  .js .sign-off:not(.is-in) .sign-apex { transform: translateY(6px); opacity: 0; }
  .js .sign-off:not(.is-in) .sign-name-rise { transform: translateY(52px); }
  .js .sign-off:not(.is-in) .sign-tagline { opacity: 0; letter-spacing: .18em; text-indent: .18em; }
}

/* ---------- Page transitions (W-0042 spine, W-0041) ----------
   Cross-document view transitions, opt-in and progressive: browsers without support navigate as
   before, reduced motion navigates instantly. The page content is a cut, never a crossfade; the
   header stays still, its bottom hairline wipes across in 300 ms (draw ease), the new page title
   rises 8 px (ui ease) and the active-language rule slides inside its control in 180 ms. Nothing
   in the homepage hero or the journey is named, so they arrive exactly as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; view-transition-name: header-wipe; pointer-events: none; }
  .page-sub main h1 { view-transition-name: page-title; }
  .lang-switch a[aria-current="true"]::after { view-transition-name: lang-rule; }

  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
  ::view-transition-old(header-wipe), ::view-transition-new(header-wipe), ::view-transition-old(page-title) { display: none; }
  ::view-transition-group(header-wipe) {
    background: var(--ant-sky);
    animation: vt-wipe var(--ant-dur-reveal) var(--ant-ease-draw) both, vt-wipe-out var(--ant-dur-fast) var(--ant-ease-ui) var(--ant-dur-reveal) both;
  }
  ::view-transition-new(page-title) { animation: vt-rise var(--ant-dur-reveal) var(--ant-ease-ui) both; }
  ::view-transition-group(lang-rule) { animation-duration: var(--ant-dur-fast); animation-timing-function: var(--ant-ease-ui); }
  @keyframes vt-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes vt-wipe-out { to { opacity: 0; } }
  @keyframes vt-rise { from { transform: translateY(var(--ant-reveal-travel)); opacity: 0; } }
}