/* ============================================================================
   styles.css — WinMing IT · v2 "route line" direction (03-design.md, 2026-10-08)
   Layers: 1 tokens · 2 reset · 3 base · 4 layout · 5 components · 6 patterns · 7 motion · 8 utilities · 9 print
   ============================================================================ */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --color-primary: #FF5F1F;        /* signal orange: actions, route pulses, hubs */
  --color-primary-hover: #FF7A45;
  --color-primary-soft: #2A150C;
  --color-accent: #86C0FF;         /* review placeholders only ([NEEDS INPUT]) */
  --color-text: #EEEAE1;           /* bone */
  --color-text-muted: #A39E93;
  --color-on-primary: #0B0B0A;
  --color-bg: #0B0B0A;             /* warm black */
  --color-surface: #151513;
  --color-line: #2B2A26;           /* hairlines, decorative */
  --color-line-strong: #6F6B62;    /* input borders, UI >= 3:1 */
  --color-success: #4CC38A;
  --color-error: #FF7A8A;

  --font-heading: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --stretch-display: 75%;          /* Archivo width axis: condensed headings */
  --stretch-ui: 87.5%;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --text-4xl: clamp(2.875rem, 1.4rem + 5.6vw, 6.5rem);
  --text-display: clamp(3.25rem, 2.2rem + 4vw, 5.75rem);
  --leading-tight: 0.98;
  --leading-normal: 1.55;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section-y: clamp(4rem, 9vw, 8rem);
  --container: 76rem;
  --container-narrow: 44rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 4.25rem;

  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 4px;
  --radius-full: 999px;
  --shadow-sm: none;
  --shadow: 0 24px 48px -16px rgb(0 0 0 / 0.7);
  --ease: 200ms cubic-bezier(.2, .7, .2, 1);
}

/* 2. RESET ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }
body { min-height: 100vh; line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
address { font-style: normal; }
:target { scroll-margin-block-start: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* 3. BASE ------------------------------------------------------------------ */
body.nav-open { overflow: hidden; }
body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); }
::selection { background: var(--color-primary); color: var(--color-on-primary); }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-heading); font-stretch: var(--stretch-display); font-weight: 650; line-height: var(--leading-tight); letter-spacing: -0.012em; text-wrap: balance; }
h1, .h1 { font-size: var(--text-4xl); font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); font-weight: 600; line-height: 1.08; }
p, li { text-wrap: pretty; }
a { color: var(--color-text); text-decoration-color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--color-primary); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.lead { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); }
.muted { color: var(--color-text-muted); }
.mono { font-family: var(--font-mono); font-stretch: var(--stretch-ui); font-variant-numeric: tabular-nums; }
.accent { color: var(--color-primary); }

/* 4. LAYOUT ---------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-surface); }
.section--tight { padding-block-start: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); }

/* Section head: a route line (hairline + origin node) that draws in, title left, intro right */
.sec-head { position: relative; display: grid; gap: var(--space-6); padding-block-start: var(--space-8); margin-block-end: clamp(2.5rem, 5vw, 4rem); border-block-start: 1px solid var(--color-line); }
.sec-head::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); }
.sec-head::after { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--color-primary); transform-origin: left; transform: scaleX(0.12); }
.sec-head h2 { max-width: 14ch; }
.sec-head .lead { max-width: 46ch; }
@media (min-width: 64em) {
  .sec-head { grid-template-columns: 7fr 5fr; align-items: end; column-gap: var(--space-12); }
  .sec-head h2 { max-width: 16ch; }
}

/* Split: heading column left, content right (why, faq, method) */
.split { display: grid; gap: var(--space-8); }
.split > .sec-head { margin: 0; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 64em) {
  .split { grid-template-columns: 5fr 7fr; column-gap: var(--space-16); }
  .split > .sec-head { align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-8)); }
}

/* 5. COMPONENTS ------------------------------------------------------------ */
.skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100%; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--color-text); color: var(--color-bg); }
.skip-link:focus { inset-block-start: var(--space-4); }

/* Buttons: sharp, condensed label, arrow that moves on hover */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 3.25rem; padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-heading); font-stretch: var(--stretch-ui); font-size: var(--text-base); font-weight: 600; letter-spacing: 0.005em; line-height: 1.1; text-decoration: none; text-align: center; white-space: nowrap; transition: background-color var(--ease), color var(--ease), border-color var(--ease); }
.btn::after { content: "→" / ""; display: inline-block; transition: transform var(--ease); }
.btn:hover::after { transform: translateX(4px); }
.btn--plain::after { content: none; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-line-strong); }
.btn--secondary:hover { color: var(--color-text); border-color: var(--color-text); }
.btn--dark { background: var(--color-bg); color: var(--color-text); }
.btn--dark:hover { background: #1F1E1B; color: var(--color-text); }
.btn--small { min-height: 2.5rem; padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: 3.5rem; padding: 0 var(--space-8); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* Text link with arrow */
.arrow-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; font-weight: 650; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.arrow-link::after { content: "→" / ""; color: var(--color-primary); transition: transform var(--ease); }
.arrow-link:hover { text-decoration-color: var(--color-primary); color: var(--color-text); }
.arrow-link:hover::after { transform: translateX(4px); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(11 11 10 / 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block-end: 1px solid var(--color-line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--header-h); }

/* Logo (proposed, pure CSS): origin node (orange) → line → destination node (bone) + wordmark */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--color-text); font-family: var(--font-heading); font-stretch: var(--stretch-ui); font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--color-text); }
.brand__mark { position: relative; flex: none; display: block; width: 1em; height: 1em; font-size: 1.5rem; }
.brand__mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8em; height: max(2px, 0.08em); background: var(--color-text); transform: translate(-50%, -50%) rotate(-45deg); }
.brand__mark::after { content: ""; position: absolute; left: 0.03em; top: 0.67em; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--color-primary); box-shadow: 0.64em -0.64em 0 -0.04em var(--color-text); }
.brand__it { color: var(--color-primary); }

.nav-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.nav-toggle__bar { position: relative; display: block; width: 1.375rem; height: 2px; background: var(--color-text); transition: background-color var(--ease); }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-text); transition: transform var(--ease); }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }
.nav { display: none; position: absolute; inset-inline: 0; top: 100%; height: calc(100dvh - var(--header-h)); overflow-y: auto; padding: var(--space-6) var(--gutter) var(--space-8); background: var(--color-bg); }
.nav.is-open { display: flex; flex-direction: column; }
.nav__list { display: flex; flex-direction: column; }
.nav__link { display: flex; align-items: center; min-height: 3.5rem; border-block-end: 1px solid var(--color-line); color: var(--color-text); font-family: var(--font-heading); font-stretch: var(--stretch-display); font-size: var(--text-2xl); font-weight: 650; text-decoration: none; }
.nav__link:hover { color: var(--color-primary); }
.nav__link[aria-current="page"] { color: var(--color-primary); }
.nav__cta { width: 100%; margin-block-start: var(--space-8); }
@media (min-width: 64em) {
  .nav-toggle { display: none; }
  .nav { display: flex; position: static; height: auto; overflow: visible; align-items: center; gap: var(--space-6); padding: 0; background: transparent; }
  .nav__list { flex-direction: row; gap: var(--space-1); }
  .nav__link { position: relative; min-height: 2.75rem; padding: 0 0.625rem; border: 0; font-family: var(--font-body); font-stretch: 100%; font-size: var(--text-sm); font-weight: 500; }
  .nav__link:hover { color: var(--color-text); }
  .nav__link::after { content: ""; position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0.5rem; height: 1px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--ease); }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { color: var(--color-text); }
  .nav__cta { width: auto; margin: 0; }
}

/* Breadcrumb */
.breadcrumb { padding-block: var(--space-6) 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.breadcrumb__list li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--color-line-strong); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text); }

/* Review placeholder ([NEEDS INPUT]): an annotation, deliberately off-palette so it never passes as content */
.ni { color: var(--color-accent); font-family: var(--font-mono); font-stretch: var(--stretch-ui); font-size: 0.78em; font-weight: 400; letter-spacing: 0; text-decoration: underline dashed var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.25em; white-space: normal; overflow-wrap: anywhere; }
a .ni, a.ni { color: var(--color-accent); }

/* Forms (contact and due-diligence pages) */
.form { display: grid; gap: var(--space-6); }
.form__row { display: grid; gap: var(--space-6); }
@media (min-width: 40em) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); align-content: start; }
.field__label { font-size: var(--text-sm); font-weight: 600; }
.field__input { width: 100%; min-height: 3rem; padding: 0.625rem var(--space-3); background: transparent; border: 0; border-block-end: 1px solid var(--color-line-strong); border-radius: 0; transition: border-color var(--ease); }
.field__input::placeholder { color: var(--color-text-muted); opacity: 1; }
textarea.field__input { min-height: 7rem; resize: vertical; border: 1px solid var(--color-line-strong); }
select.field__input { appearance: none; padding-inline-end: 2.5rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A39E93' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right var(--space-3) center; }
select.field__input option { background: var(--color-bg); }
.field__input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 1px 0 0 var(--color-primary); }
.field__input:focus-visible { outline: none; }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-3); }
.field--check input { width: 1.25rem; height: 1.25rem; margin-block-start: 0.2rem; accent-color: var(--color-primary); }
.field--check .field__label { font-weight: 400; }
.field--check .field__error { grid-column: 1 / -1; }
.field__help { font-size: var(--text-sm); color: var(--color-text-muted); }
.field__error { display: none; font-size: var(--text-sm); color: var(--color-error); }
.field.is-invalid .field__input { border-color: var(--color-error); }
.field.is-invalid .field__error { display: block; }
.form__status { display: none; padding: var(--space-4); border: 1px solid; }
.form__status.is-success { display: block; border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg)); }
.form__status.is-error { display: block; border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 10%, var(--color-bg)); }
.form__mailto { display: inline-block; margin-block-start: var(--space-2); font-weight: 600; overflow-wrap: anywhere; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Route request bar: From —— To → button (hero) */
.route-form { display: grid; margin-block-start: var(--space-8); border: 2px solid var(--color-line-strong); background: var(--color-bg); }
.route-form__field { position: relative; display: grid; padding: var(--space-3) var(--space-4) var(--space-2); }
.route-form__field + .route-form__field { border-block-start: 2px solid var(--color-line-strong); }
.route-form__field label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; color: var(--color-text-muted); }
.route-form__field input { width: 100%; min-height: 2.25rem; padding: 0; background: transparent; border: 0; font-size: var(--text-lg); font-weight: 500; }
.route-form__field input::placeholder { color: #6F6B62; }
.route-form__field input:focus { outline: none; }
.route-form__field:focus-within { box-shadow: inset 0 -2px 0 var(--color-primary); }
.route-form .btn { min-height: 3.5rem; border-radius: 0; font-weight: 700; }
@media (min-width: 40em) {
  .route-form { grid-template-columns: 1fr 1fr; }
  .route-form .btn { grid-column: 1 / -1; }
  .route-form__field + .route-form__field { border-block-start: 0; border-inline-start: 2px solid var(--color-line-strong); }
  /* the link between the two fields: a short route segment with two nodes */
  .route-form__field + .route-form__field::before { content: ""; position: absolute; top: 50%; left: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); transform: translateY(-50%); }
}
@media (min-width: 64em) {
  .route-form { grid-template-columns: 1fr 1fr auto; }
  .route-form .btn { grid-column: auto; height: 100%; }
}

/* FAQ */
.faq { border-block-end: 1px solid var(--color-line); }
.faq-list .faq:first-child summary { padding-block-start: 0; }
.faq summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-6); font-family: var(--font-heading); font-stretch: var(--stretch-ui); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; list-style: none; cursor: pointer; transition: color var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.875rem; height: 0.875rem; background: linear-gradient(var(--color-primary) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--color-primary) 0 0) center / 2px 100% no-repeat; transition: transform var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-primary); }
.faq__body { max-width: 62ch; padding-block: 0 var(--space-8); color: var(--color-text-muted); }
.faq__body > * + * { margin-block-start: var(--space-3); }
.faq__body a { color: var(--color-text); }

/* Footer */
.site-footer { padding-block: clamp(3.5rem, 7vw, 6rem) var(--space-8); border-block-start: 1px solid var(--color-line); font-size: var(--text-sm); }
.site-footer__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12) var(--space-8); }
.site-footer a { color: var(--color-text); text-decoration: none; }
.site-footer a:hover { color: var(--color-primary); }
.site-footer__brand > * + * { margin-block-start: var(--space-6); }
.site-footer__brand p { max-width: 22ch; font-family: var(--font-heading); font-stretch: var(--stretch-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.05; color: var(--color-text); }
.site-footer__heading { margin-block-end: var(--space-4); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-muted); }
.site-footer__list { display: grid; gap: var(--space-2); }
.site-footer__list a { display: inline-block; padding-block: 0.125rem; }
.site-footer__contact > * + * { margin-block-start: var(--space-1); }
.site-footer__contact .site-footer__heading:not(:first-child) { margin-block-start: var(--space-6); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-line); color: var(--color-text-muted); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.site-footer__brand, .site-footer__bottom, .site-footer__contact { grid-column: 1 / -1; }
@media (min-width: 40em) { .site-footer__contact { grid-column: auto; } }
@media (min-width: 64em) {
  .site-footer__inner { grid-template-columns: 2.4fr 1fr 1fr 1fr 1.5fr; }
  .site-footer__brand, .site-footer__contact { grid-column: auto; }
}

/* 6. PATTERNS -------------------------------------------------------------- */

/* Hero (Home): headline + lead | schematic, request bar full width below.
   Phones: text, then the request bar, then the schematic. */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__grid { display: grid; gap: var(--space-8); grid-template-areas: "text" "form" "media"; }
.hero__text { grid-area: text; }
.hero__form { grid-area: form; }
.hero__media { grid-area: media; }
.hero h1 { max-width: 13ch; }
.hero__text .lead { max-width: 44ch; margin-block-start: var(--space-8); color: var(--color-text); font-weight: 500; }
.hero__form .route-form { margin: 0; }
.hero__form .arrow-link { margin-block-start: var(--space-3); }
@media (min-width: 64em) {
  .hero__grid { grid-template-columns: 7fr 6fr; grid-template-areas: "text media" "form form"; column-gap: var(--space-8); row-gap: var(--space-12); align-items: center; }
  .hero__media { margin-inline-end: calc(-1 * var(--space-8)); }
  .hero__form { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-8); }
  .hero__form .arrow-link { margin: 0; }
}

/* Page hero (inner pages): left-aligned, big, one action */
.page-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.page-hero h1 { max-width: 16ch; }
.page-hero__row { display: grid; gap: var(--space-8); margin-block-start: var(--space-8); }
.page-hero__row .lead { max-width: 48ch; color: var(--color-text); }
@media (min-width: 64em) { .page-hero__row { grid-template-columns: 7fr 5fr; align-items: end; column-gap: var(--space-12); } .page-hero__row .actions { justify-content: flex-end; } }

/* Route schematic (inline SVG, no panel) */
.schematic { margin: 0; }
.schematic svg { width: 100%; height: auto; overflow: visible; }
.schematic figcaption { margin-block-start: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.net-route { fill: none; stroke: var(--color-text); stroke-width: 2.5; stroke-opacity: 0.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.net-pulse { fill: none; stroke: var(--color-primary); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 0 100; opacity: 0; }
.net-node { fill: var(--color-bg); stroke: var(--color-text); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.net-node--core { fill: var(--color-primary); stroke: none; }
.net-ring { fill: none; stroke: var(--color-primary); stroke-width: 2; opacity: 0.45; vector-effect: non-scaling-stroke; }
.net-code { fill: var(--color-text); font-family: var(--font-mono); font-stretch: var(--stretch-ui); font-size: 17px; font-weight: 500; letter-spacing: 0.02em; paint-order: stroke; stroke: var(--color-bg); stroke-width: 4px; }
.net-city { fill: var(--color-text-muted); font-family: var(--font-body); font-size: 15px; }
@media (max-width: 39.99em) { .net-code { font-size: 23px; } .net-city { font-size: 19px; } }

/* Facts strip: big condensed words, hairline columns */
.facts { border-block: 1px solid var(--color-line); }
.facts__list { display: grid; grid-template-columns: 1fr 1fr; }
.facts__item { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-8) var(--space-4) var(--space-8) 0; }
.facts__item:nth-child(even) { padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--color-line); }
.facts__item:nth-child(-n+2) { border-block-end: 1px solid var(--color-line); }
.facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; padding-inline-start: 0; border-inline-start: 0; }
.facts__big { font-family: var(--font-heading); font-stretch: var(--stretch-display); font-size: var(--text-display); font-weight: 700; line-height: 0.9; letter-spacing: -0.02em; }
.facts__big .accent { font-weight: 700; }
.facts__label { max-width: 22ch; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (min-width: 64em) {
  .facts__list { grid-template-columns: repeat(3, 1fr); }
  .facts__list > .facts__item:nth-child(n) { grid-column: auto; padding: var(--space-12) var(--space-6); border-block-end: 0; border-inline-start: 1px solid var(--color-line); }
  .facts__list > .facts__item:first-child { padding-inline-start: 0; border-inline-start: 0; }
}

/* Route board (data table): code · cities joined by a route segment · columns · request link */
.board { width: 100%; border-collapse: collapse; }
.board thead th { padding: 0 var(--space-4) var(--space-3) 0; border-block-end: 1px solid var(--color-line-strong); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-align: start; color: var(--color-text-muted); white-space: nowrap; }
.board td, .board tbody th { position: relative; padding: var(--space-6) var(--space-4) var(--space-6) 0; border-block-end: 1px solid var(--color-line); text-align: start; vertical-align: middle; font-weight: 400; }
.board tbody th { font-weight: 400; }
.board td { color: var(--color-text-muted); font-size: var(--text-sm); }
.board .num { text-align: end; padding-inline-end: 0; white-space: nowrap; }
.board tbody tr { transition: background-color var(--ease); }
.board tbody tr:hover { background: linear-gradient(90deg, var(--color-surface), transparent 85%); }
.board tbody tr:hover .rt__line { background: var(--color-primary); }
.rt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-6); row-gap: var(--space-1); }
.rt__code { flex: none; min-width: 8.5ch; font-family: var(--font-mono); font-stretch: var(--stretch-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.02em; color: var(--color-primary); }
.rt__name { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); font-family: var(--font-heading); font-stretch: var(--stretch-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.1; color: var(--color-text); }
.rt__line { position: relative; display: inline-block; width: clamp(1.5rem, 3vw, 2.75rem); height: 1px; background: var(--color-line-strong); transition: background-color var(--ease); }
.rt__line::before, .rt__line::after { content: ""; position: absolute; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: inherit; }
.rt__line::before { left: -3px; } .rt__line::after { right: -3px; }
.req-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; font-weight: 600; color: var(--color-text); text-decoration: none; }
.req-link::after { content: "→" / ""; color: var(--color-primary); transition: transform var(--ease); }
.req-link:hover { color: var(--color-primary); }
.req-link:hover::after { transform: translateX(4px); }
.board-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-8); margin-block-start: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (min-width: 64em) { .board thead th { position: sticky; top: var(--header-h); z-index: 1; padding-block-start: var(--space-3); background: var(--color-bg); } }
/* Phones: each row becomes a block — code + route on top, columns as label/value, link bottom-right */
@media (max-width: 47.99em) {
  .board thead { display: none; }
  .board, .board tbody { display: block; }
  .board tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-4); padding-block: var(--space-6); border-block-end: 1px solid var(--color-line); }
  .board tbody tr:first-child { border-block-start: 1px solid var(--color-line-strong); }
  .board td, .board tbody th { display: block; grid-column: 1 / -1; padding: 0; border: 0; }
  .board td[data-label]::before { content: attr(data-label); display: block; margin-block-end: 0.125rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-muted); }
  .board .num { text-align: start; }
  .board td.cell-cta { grid-column: 2; align-self: end; }
  .board td.cell-cta::before { display: none; }
  .board td:has(+ td.cell-cta) { grid-column: 1; }
  .board tbody tr:hover { background: none; }
  .rt { flex-direction: column; }
}

/* Index rows (products): big title · description · arrow; whole row is the link */
.index-list { border-block-start: 1px solid var(--color-line); }
.index-row { position: relative; display: grid; gap: var(--space-3) var(--space-8); padding-block: var(--space-8); border-block-end: 1px solid var(--color-line); transition: background-color var(--ease); }
.index-row h3 { font-size: var(--text-3xl); }
.index-row h3 a { color: var(--color-text); text-decoration: none; transition: color var(--ease); }
.index-row h3 a::after { content: ""; position: absolute; inset: 0; }
.index-row p { max-width: 52ch; color: var(--color-text-muted); }
.index-row__go { display: none; }
.index-row:hover h3 a { color: var(--color-primary); }
.index-row:focus-within { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.index-row h3 a:focus-visible { outline: none; }
@media (min-width: 48em) {
  .index-row { grid-template-columns: 6fr 5fr auto; align-items: center; padding-block: var(--space-12); }
  .index-row__go { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid var(--color-line-strong); border-radius: 50%; color: var(--color-primary); font-size: 1.25rem; transition: transform var(--ease), background-color var(--ease), color var(--ease), border-color var(--ease); }
  .index-row:hover .index-row__go { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); transform: translateX(6px); }
}

/* Stacked points (why, principles): title + text, hairline between */
.points { display: grid; }
.point { display: grid; gap: var(--space-3); padding-block: var(--space-8); border-block-end: 1px solid var(--color-line); }
.point:first-child { padding-block-start: 0; }
.point:last-child { border: 0; padding-block-end: 0; }
.point h3 { font-size: var(--text-2xl); }
.point p { max-width: 54ch; color: var(--color-text-muted); }

/* Line steps (process): stations on one route line; a signal travels along it */
ol.line-steps { position: relative; display: grid; gap: var(--space-8); padding-inline-start: var(--space-8); }
.line-steps::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--color-line-strong); }
.line-step { position: relative; display: grid; gap: var(--space-2); align-content: start; }
.line-step::before { content: ""; position: absolute; left: calc(-1 * var(--space-8)); top: 0.35em; width: 13px; height: 13px; border-radius: 50%; background: var(--color-bg); border: 1.5px solid var(--color-text); }
.line-step:first-child::before { background: var(--color-primary); border-color: var(--color-primary); }
.line-step:last-child::before { box-shadow: 0 0 0 5px var(--color-bg), 0 0 0 6px var(--color-text); }
.line-step h3 { font-size: var(--text-xl); }
.line-step p { max-width: 36ch; color: var(--color-text-muted); }
.line-steps::after { content: ""; position: absolute; left: 6px; top: 8px; width: 1px; height: 18%; background: linear-gradient(transparent, var(--color-primary)); opacity: 0; }
@media (min-width: 64em) {
  ol.line-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); padding: var(--space-12) 0 0; }
  .line-steps::before { left: 6px; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; }
  .line-step::before { left: 0; top: calc(-1 * var(--space-12)); }
  .line-steps::after { left: 6px; top: 6px; width: 16%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary)); }
}

/* Network map row: route list | schematic */
.map-grid { display: grid; gap: var(--space-12); }
@media (min-width: 64em) { .map-grid { grid-template-columns: 5fr 7fr; column-gap: var(--space-16); align-items: center; } }
.route-list { border-block-start: 1px solid var(--color-line); }
.route-list li { display: flex; align-items: baseline; gap: var(--space-4); padding-block: var(--space-3); border-block-end: 1px solid var(--color-line); }
.route-list .mono { flex: none; min-width: 8.5ch; font-size: var(--text-xs); font-weight: 500; color: var(--color-primary); }
.route-list span:last-child { font-family: var(--font-heading); font-stretch: var(--stretch-ui); font-size: var(--text-lg); font-weight: 500; }
@media (min-width: 40em) and (max-width: 63.99em) { .route-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); } }

/* Note (method): prose beside its heading */
.prose > * + * { margin-block-start: var(--space-4); }
.prose p, .prose li { color: var(--color-text-muted); }
.prose ul { padding-inline-start: 0; list-style: none; }
.prose ul li { position: relative; padding-inline-start: var(--space-6); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.75rem; height: 1px; background: var(--color-primary); }
.prose li + li { margin-block-start: var(--space-2); }
.prose--large p:first-child { font-size: var(--text-lg); color: var(--color-text); }

/* Cell grid (venues): shared hairlines, no floating cards */
.cell-grid { display: grid; grid-template-columns: 1fr; border-block-start: 1px solid var(--color-line); border-inline-start: 1px solid var(--color-line); }
.cell { display: grid; align-content: start; gap: var(--space-3); min-height: 11rem; padding: var(--space-6); border-block-end: 1px solid var(--color-line); border-inline-end: 1px solid var(--color-line); }
.cell__code { font-family: var(--font-mono); font-stretch: var(--stretch-ui); font-size: var(--text-xs); font-weight: 500; color: var(--color-primary); }
.cell h3 { font-size: var(--text-2xl); }
.cell p { color: var(--color-text-muted); font-size: var(--text-sm); }
.cell--note { background: var(--color-surface); }
.cell--note p { color: var(--color-text); }
@media (min-width: 40em) { .cell-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .cell-grid { grid-template-columns: repeat(4, 1fr); } }

/* CTA band: the one orange block on the page, poster-style */
.cta-band { padding-block: clamp(4rem, 9vw, 7.5rem); background: var(--color-primary); color: var(--color-on-primary); }
.cta-band h2 { max-width: 16ch; font-size: var(--text-4xl); line-height: 0.92; }
.cta-band__row { display: grid; gap: var(--space-8); margin-block-start: var(--space-12); }
.cta-band .lead { max-width: 40ch; color: rgb(11 11 10 / 0.82); }
.cta-band .ni { color: var(--color-on-primary); text-decoration-color: var(--color-on-primary); }
.cta-band :focus-visible { outline-color: var(--color-on-primary); }
.cta-band .arrow-link { color: var(--color-on-primary); text-decoration-color: rgb(11 11 10 / 0.5); }
.cta-band .arrow-link::after { color: var(--color-on-primary); }
.cta-band .arrow-link:hover { text-decoration-color: var(--color-on-primary); }
.cta-band ::selection { background: var(--color-bg); color: var(--color-text); }
@media (min-width: 64em) { .cta-band__row { grid-template-columns: 7fr 5fr; align-items: end; } .cta-band .actions { justify-content: flex-end; } }

/* Page hero aside: the hero's key points as hairline rows (product pages) */
.page-hero--aside .page-hero__row { align-items: start; }
.dash-list { border-block-start: 1px solid var(--color-line); }
.dash-list li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-8); border-block-end: 1px solid var(--color-line); }
.dash-list li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 1rem; height: 1px; background: var(--color-primary); }
.page-hero__row .dash-list { font-weight: 500; }
.page-hero--compact { padding-block-end: var(--space-8); }
.page-hero--aside .actions { margin-block-start: var(--space-8); justify-content: flex-start; }
.lead--spaced { margin-block-start: var(--space-8); }
.form__note--spaced { margin-block-start: var(--space-6); }
@media (min-width: 64em) { .cell-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Spec list: label · value rows (service specs, contact details, entity) */
.spec { display: grid; border-block-start: 1px solid var(--color-line); }
.spec > div { display: grid; gap: var(--space-1) var(--space-6); padding-block: var(--space-4); border-block-end: 1px solid var(--color-line); }
.spec dt { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-muted); }
.spec dd { margin: 0; }
@media (min-width: 40em) { .spec > div { grid-template-columns: 11rem 1fr; align-items: baseline; } }
.spec--panel { padding: var(--space-6); background: var(--color-surface); border: 0; }
.spec--panel > div:last-child { border-block-end: 0; }

/* Service rows (Low-latency): big code word · title + text + specs */
.services { border-block-start: 1px solid var(--color-line); }
.service { display: grid; gap: var(--space-6) var(--space-12); padding-block: var(--space-12); border-block-end: 1px solid var(--color-line); }
.service__code { font-family: var(--font-heading); font-stretch: var(--stretch-display); font-size: var(--text-display); font-weight: 700; line-height: 0.85; letter-spacing: -0.02em; color: var(--color-primary); }
.service__body > * + * { margin-block-start: var(--space-4); }
.service__body > p { max-width: 56ch; color: var(--color-text-muted); }
.service__body .spec { margin-block-start: var(--space-6); }
@media (min-width: 64em) { .service { grid-template-columns: 3fr 9fr; } .service__body { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-12); align-content: start; } .service__body h3 { grid-column: 1 / -1; } .service__body .spec { margin: 0; grid-row: span 2; } .service__body > p { margin-block-start: var(--space-4); } }

/* Form + details (Contact, Company due diligence) */
.form-split { display: grid; gap: var(--space-12); }
@media (min-width: 64em) { .form-split { grid-template-columns: 7fr 5fr; column-gap: var(--space-16); align-items: start; } }
.form-panel { padding: clamp(1.5rem, 4vw, 3rem); background: var(--color-surface); }
.form-panel > h2, .form-panel > h3 { font-size: var(--text-2xl); }
.form-panel > p { margin-block-start: var(--space-3); max-width: 52ch; color: var(--color-text-muted); }
.form-panel .form { margin-block-start: var(--space-8); }
.form-panel .field__input { background: transparent; }
.form__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.form .btn { justify-self: start; }
@media (max-width: 39.99em) { .form .btn { justify-self: stretch; } }
.form.is-sent > :not(.form__status) { display: none; }
.form.is-sent .form__status { padding: var(--space-6); font-size: var(--text-lg); }
.form__status strong { display: block; margin-block-end: var(--space-2); font-family: var(--font-heading); font-stretch: var(--stretch-display); font-size: var(--text-2xl); font-weight: 650; line-height: 1; }
.details > * + * { margin-block-start: var(--space-8); }
.details h3 { font-size: var(--text-xl); margin-block-end: var(--space-4); }
.details .line-steps { gap: var(--space-6); }
@media (min-width: 64em) { .details ol.line-steps { grid-template-columns: 1fr; padding: 0 0 0 var(--space-8); } .details .line-steps::before { left: 6px; top: 8px; bottom: 8px; right: auto; width: 1px; height: auto; } .details .line-step::before { left: calc(-1 * var(--space-8)); top: 0.35em; } .details .line-steps::after { display: none; } }

/* Legal (privacy) and 404 */
.legal { max-width: var(--container-narrow); }
.legal h2 { margin-block-start: var(--space-12); font-size: var(--text-xl); }
.legal h2 + * { margin-block-start: var(--space-3); }
.legal > * + * { margin-block-start: var(--space-4); }
.legal p, .legal li { color: var(--color-text-muted); }
.legal ul { padding-inline-start: 1.25rem; }
.legal li + li { margin-block-start: var(--space-2); }
.link-list { max-width: 32rem; margin-block-start: var(--space-8); border-block-start: 1px solid var(--color-line); }
.link-list a { display: flex; justify-content: space-between; align-items: center; min-height: 3.5rem; border-block-end: 1px solid var(--color-line); font-family: var(--font-heading); font-stretch: var(--stretch-ui); font-size: var(--text-xl); font-weight: 600; text-decoration: none; }
.link-list a::after { content: "→" / ""; color: var(--color-primary); transition: transform var(--ease); }
.link-list a:hover::after { transform: translateX(4px); }

/* 7. MOTION (03-design.md §5a) — CSS only, all off under prefers-reduced-motion ------------ */
@media (prefers-reduced-motion: no-preference) {
  .net-route { stroke-dasharray: 100; stroke-dashoffset: 100; animation: net-draw 1.4s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
  .net-node, .net-code, .net-city { opacity: 0; animation: net-fade 0.6s ease-out 0.6s forwards; }
  .net-pulse { stroke-dasharray: 9 91; stroke-dashoffset: 100; animation: net-pulse var(--dur, 3.4s) linear infinite both; animation-delay: calc(1.4s + var(--delay, 0s)); }
  .net-ring { transform-box: fill-box; transform-origin: center; animation: net-ring 3s ease-out infinite; animation-delay: var(--delay, 0s); }
  .line-steps::after { animation: signal-y 3.6s cubic-bezier(.6, 0, .4, 1) infinite; }
  .hero h1, .page-hero h1 { animation: rise 0.9s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 64em) {
  .line-steps::after { animation-name: signal-x; }
}
.net-routes > :nth-child(2) { --i: 1; } .net-routes > :nth-child(3) { --i: 2; } .net-routes > :nth-child(4) { --i: 3; }
.net-routes > :nth-child(5) { --i: 4; } .net-routes > :nth-child(6) { --i: 5; } .net-routes > :nth-child(7) { --i: 6; }
.net-pulses > :nth-child(1) { --dur: 3.2s; --delay: 0s; }
.net-pulses > :nth-child(2) { --dur: 2.8s; --delay: 0.9s; }
.net-pulses > :nth-child(3) { --dur: 4.4s; --delay: 0.3s; }
.net-pulses > :nth-child(4) { --dur: 3.8s; --delay: 1.6s; }
.net-pulses > :nth-child(5) { --dur: 3s; --delay: 0.6s; }
.net-pulses > :nth-child(6) { --dur: 4s; --delay: 2.1s; }
.net-pulses > :nth-child(7) { --dur: 3.4s; --delay: 1.2s; }
.net-pulses > :nth-child(even) { animation-direction: reverse; }
.net-rings > :nth-child(2) { --delay: 1s; } .net-rings > :nth-child(3) { --delay: 2s; }
/* Scroll-driven: section route lines draw across, blocks rise in. No JS; unsupported browsers show everything. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec-head::after { animation: line-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .board tbody tr, .index-row, .point, .line-step, .faq, .facts__item, .cell, .route-list li, .map-grid .schematic, .cta-band h2, .service {
      animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes line-draw { from { transform: scaleX(0.12); } to { transform: scaleX(1); } }
@keyframes net-draw { to { stroke-dashoffset: 0; } }
@keyframes net-fade { to { opacity: 1; } }
@keyframes net-pulse { 0% { stroke-dashoffset: 100; opacity: 0; } 8%, 92% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes net-ring { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes signal-x { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 84%; opacity: 0; } }
@keyframes signal-y { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 82%; opacity: 0; } }

/* 8. UTILITIES ------------------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }

/* 9. PRINT ----------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .skip-link, .cta-band, .route-form { display: none; }
  body { background: #fff; color: #000; }
  a { color: inherit; text-decoration: none; }
  .section { padding-block: 1rem; }
}