@font-face { font-family: "Inter Tight"; src: url(fonts/intertight.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/plexmono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/plexmono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #F4F2ED; --panel: #ECE9E2; --ink: #111111; --signal: #FF5A1F; --signal-deep: #E2470F;
  --rule: #C9C5BC; --muted: #57534C; --map: #E7E4DC;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --m: clamp(20px, 3.33vw, 48px);
  --gap: clamp(16px, 1.67vw, 24px);
  --sec: clamp(56px, 6vw, 88px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }
::selection { background: var(--signal); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 50; font-family: var(--mono); font-size: 13px; }
.skip:focus { top: 12px; }
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--m); }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 76px; border-bottom: 1px solid var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 24px; letter-spacing: -0.04em; text-decoration: none; }
.brand-mark { width: 9px; height: 18px; background: var(--signal); transform: skewX(-24deg); }
.site-nav { display: flex; align-items: center; gap: 40px; }
.site-nav ul { display: flex; gap: 34px; }
.site-nav ul a { font-family: var(--mono); font-size: 13px; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.site-nav ul a:hover { border-color: var(--ink); }
.site-nav ul a[aria-current="page"] { border-color: var(--ink); }
.menu-btn { display: none; font: 500 13px var(--mono); background: none; border: 1px solid var(--ink); padding: 9px 14px; color: var(--ink); cursor: pointer; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; background: var(--signal); color: #fff; border: 1px solid var(--signal); font: 500 14px/1 var(--mono); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.btn:hover { background: var(--signal-deep); border-color: var(--signal-deep); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 13px; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* hero */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 5vw, 72px); }
.hero-text { grid-column: 1 / span 6; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding-block: 24px; }
.display { font-weight: 700; font-size: clamp(3rem, 6.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance; max-width: 11ch; }
.page-operators .display { max-width: 8ch; }
.lede { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; letter-spacing: -0.01em; max-width: 30em; }
.hero-media { grid-column: 7 / span 6; position: relative; border: 1px solid var(--rule); background: var(--panel); }
.hero-media img { width: 100%; height: 100%; max-height: 720px; object-fit: cover; }
.hero-media figcaption { position: absolute; right: 0; bottom: 0; background: var(--paper); padding: 9px 14px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }

/* sections */
.sec { padding-bottom: var(--sec); }
.sec-label { font: 400 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; border-top: 1px solid var(--ink); padding-top: 18px; margin-bottom: clamp(28px, 3vw, 44px); }
.sec-label span { color: var(--ink); }
.cols { display: grid; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ruled > li { padding: 4px clamp(16px, 2vw, 32px) 8px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; }
.ruled > li:first-child { border-left: 0; padding-left: 0; }
.cols h3, .pay h3, .founders h3 { font-weight: 650; font-size: clamp(21px, 1.95vw, 28px); line-height: 1.12; letter-spacing: -0.03em; }
.cols-3 h3 { max-width: 13ch; margin-top: clamp(56px, 6vw, 88px); }
.icon { width: 46px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: square; }
.icon .fill-bg { fill: var(--paper); }
.icon-sm { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.icon-lg { width: 52px; height: 52px; fill: none; stroke: var(--ink); stroke-width: 1.1; }
.steps .num { font: 500 14px/1 var(--mono); color: var(--signal-deep); margin-bottom: 28px; }
.steps h3 { margin-top: 48px; }

/* map */
.map-frame { position: relative; border: 1px solid var(--rule); background: var(--map); }
.map-svg { display: block; width: 100%; height: auto; }
.map-svg .topo { fill: none; stroke: #CFCBC1; stroke-width: 1; }
.map-svg .river { fill: none; stroke: #BFC8CC; stroke-width: 2; }
.map-svg .rt { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.map-svg .nd { fill: var(--ink); }
.map-svg .city { font: 400 13px var(--sans); letter-spacing: 0.08em; fill: #7C776E; }
.map-svg .stn circle { fill: var(--map); stroke: var(--signal); stroke-width: 4.5; }
.map-svg .stn.is-hl circle { fill: var(--signal); }
.map-svg .sc { font: 500 15px var(--mono); fill: var(--ink); }
.map-svg .sn { font: 400 13px var(--mono); fill: var(--ink); }
.map-svg .scale path, .map-svg .north path { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.map-svg .scale text, .map-svg .north text { font: 400 11px var(--mono); fill: var(--ink); }
.map-svg .legend rect { fill: var(--paper); stroke: var(--rule); }
.map-svg .legend circle { fill: var(--map); stroke: var(--signal); stroke-width: 3; }
.map-svg .legend path { stroke: var(--ink); stroke-width: 3; }
.map-svg .legend text { font: 400 12px var(--mono); fill: var(--ink); }
.map-svg .sea { fill: #DCE3E5; }
.map-svg .land { fill: var(--map); stroke: #BFC8CC; stroke-width: 1.5; }
.map-svg .frame, .map-svg .inset { fill: none; stroke: var(--rule); }
.map-svg .inset { fill: var(--paper); }
.dxb-map + .map-note { position: static; padding: 12px 16px; border-top: 1px solid var(--rule); }
.map-svg .osm { font: 400 10px var(--mono); fill: #7C776E; }
.dxb-map .stn text, .dxb-map .halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.map-svg .grid { fill: none; stroke: #E6E2D8; stroke-width: 1; }
.map-svg .zoom { fill: none; stroke: #9C978D; stroke-width: 1; stroke-dasharray: 4 4; }
.map-svg .zoom-box { fill: none; stroke: var(--signal); stroke-width: 2; }
.map-svg .later, .map-svg .legend .lt { fill: var(--map); stroke: var(--ink); stroke-width: 2; }
.map-svg .km, .map-svg .sea-t { font: 400 11px var(--mono); letter-spacing: 0.06em; fill: #7C776E; }
.map-note { position: absolute; left: 16px; top: 14px; color: var(--muted); }
.statement { font-weight: 700; font-size: clamp(2.6rem, 5.6vw, 5.5rem); line-height: 0.98; letter-spacing: -0.04em; margin-top: clamp(32px, 3.5vw, 52px); }

/* photo cards */
.photo-grid { display: grid; gap: var(--gap); }
.cols-4g { grid-template-columns: repeat(4, 1fr); }
.cols-3g { grid-template-columns: repeat(3, 1fr); }
.photo-card { display: block; height: 100%; text-decoration: none; border: 1px solid var(--rule); background: var(--panel); }
.photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pc-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 22px; font-weight: 650; font-size: 21px; line-height: 1.15; letter-spacing: -0.025em; min-height: 84px; }
a.photo-card .icon-sm { margin-top: 5px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
a.photo-card:hover { border-color: var(--ink); }
a.photo-card:hover .icon-sm { transform: translate(2px, -2px); }

/* why */
.why-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.why-num { grid-column: 1 / span 4; font-weight: 700; font-size: clamp(6rem, 13vw, 12rem); line-height: .8; letter-spacing: -0.06em; color: #DCD8CF; }
.why-num span { color: var(--signal); }
.why-grid > div { grid-column: 6 / span 7; }
.why-text { font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -0.025em; max-width: 26em; text-wrap: pretty; }
.source { margin-top: 24px; color: var(--muted); }

/* station */
.station { display: grid; grid-template-columns: 2fr 1fr; border: 1px solid var(--rule); background: var(--panel); }
.station-drawing { border-right: 1px solid var(--rule); padding: 12px; }
.station-svg { width: 100%; height: auto; display: block; }
.station-svg .f { fill: #F7F5F0; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.station-svg .f2 { fill: #FBFAF7; stroke: var(--ink); stroke-width: 1; }
.station-svg .l { stroke: var(--ink); stroke-width: 1.3; }
.station-svg .lt { stroke: var(--ink); stroke-width: .7; fill: none; }
.station-svg .ring { fill: none; stroke: var(--signal); stroke-width: 2.2; }
.station-svg .ring.thin { stroke-width: 1.2; stroke-dasharray: 4 4; }
.station-svg .or { stroke: var(--signal); stroke-width: 2.2; }
.station-svg .blk { fill: var(--ink); }
.station-svg .dm { stroke: var(--ink); stroke-width: .9; }
.station-svg .dt { font: 500 15px var(--mono); fill: var(--ink); }
.station-svg .tag { font: 400 12px var(--mono); fill: var(--muted); }
.co line { stroke: var(--ink); stroke-width: 1; }
.co .dot { fill: var(--ink); }
.co circle:not(.dot) { fill: var(--signal); stroke: var(--panel); stroke-width: 3; transition: r .15s ease; }
.co text { font: 500 15px var(--sans); fill: #fff; pointer-events: none; }
.co.is-active circle:not(.dot) { fill: var(--ink); r: 20; }
.co.is-active line { stroke: var(--signal); stroke-width: 2; }
.callouts { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 2.5vw, 36px); }
.callouts li { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); font-weight: 650; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.02em; cursor: default; }
.callouts li:first-child { border-top: 1px solid var(--rule); }
.cnum { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--signal); color: #fff; font: 500 14px var(--sans); flex: none; transition: background-color .15s ease; }
.callouts li.is-active .cnum { background: var(--ink); }
.callouts li:focus-visible { outline-offset: -2px; }

/* split / pack */
.split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.big-para { grid-column: 1 / span 5; font-weight: 600; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.15; letter-spacing: -0.03em; }
.pack { grid-column: 7 / span 6; display: grid; grid-template-columns: 2fr 1fr; background: var(--panel); border: 1px solid var(--rule); padding: 20px; gap: 0 20px; }
.pack img { grid-row: 2; width: 100%; aspect-ratio: 422 / 256; object-fit: cover; }
.pack figcaption { display: contents; }
.pack-title { grid-column: 1 / -1; margin-bottom: 14px; }
.pack-list { grid-row: 2; grid-column: 2; display: flex; flex-direction: column; justify-content: space-around; font-size: 13px; }
.pack-list li { border-bottom: 1px solid var(--muted); padding: 12px 0; }

/* network panel */
.net { display: grid; grid-template-columns: 7fr 3fr; gap: var(--gap); align-items: stretch; }
.net .map-frame { display: flex; align-items: center; }
.stn-panel { border: 1px solid var(--rule); background: var(--panel); padding: 14px; display: flex; flex-direction: column; }
.stn-panel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.stn-panel h3 { font-size: 15px; font-weight: 500; margin: 18px 0 8px; }
.stn-panel dl > div { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 13px; }
.stn-panel dd { font-weight: 500; }
.status { border: 1px solid var(--ink); padding: 1px 8px; }

/* pay */
.pay { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pay li { display: flex; align-items: center; gap: 28px; border: 1px solid var(--rule); padding: clamp(32px, 4vw, 56px) clamp(24px, 2.5vw, 36px); }
.pay li svg { padding-right: 28px; border-right: 1px solid var(--rule); box-sizing: content-box; }

/* forms */
.fields { display: grid; gap: 24px var(--gap); margin-bottom: 28px; }
.grid-2 .fields { grid-template-columns: 1fr 1fr; }
.grid-3 .fields { grid-template-columns: repeat(3, 1fr); }
.field label { display: block; font: 400 12px var(--mono); margin-bottom: 9px; }
.field input { width: 100%; height: 56px; padding: 0 16px; font: 400 17px var(--sans); color: var(--ink); background: #FAF9F6; border: 1px solid var(--rule); border-radius: 0; caret-color: var(--signal); transition: border-color .15s ease; }
.field input::placeholder { color: #8A857C; }
.field input:hover { border-color: #9F9A90; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }
.field input[aria-invalid="true"] { border-color: #B3261E; }
.field-err { margin-top: 7px; font: 400 12px var(--mono); color: #B3261E; }
.form-status { margin-top: 18px; font: 400 13px/1.5 var(--mono); max-width: 60ch; }
.form-status:empty { display: none; }
.form-status.is-ok { color: #1F6B3A; }
.form-status.is-warn { color: var(--muted); border-left: 1px solid var(--signal); padding-left: 12px; }
.form-status.is-error { color: #B3261E; }

/* spec */
.need { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); align-items: start; }
.spec > div { display: grid; grid-template-columns: 2fr 5fr; border-bottom: 1px solid var(--rule); }
.spec > div:first-child { border-top: 1px solid var(--ink); }
.spec dt { font: 400 13px var(--mono); padding: 28px 0; }
.spec dd { font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.025em; padding: 22px 0 22px 24px; border-left: 1px solid var(--rule); }
.need img { width: 100%; border: 1px solid var(--rule); }
.need.need-solo { grid-template-columns: 1fr; }

/* founders */
.display-2 { font-weight: 700; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .95; letter-spacing: -0.04em; margin-bottom: 36px; }
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.founders li { display: flex; align-items: center; gap: 24px; border: 1px solid var(--rule); background: var(--panel); padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px); }
.silhouette { width: 140px; height: 140px; background: #DEDAD2; fill: #1E1E1E; flex: none; }
.founders p { margin-top: 8px; color: var(--muted); }
.founders-note { margin-top: 22px; font-size: 13px; }

/* footer */
.site-footer { background: var(--ink); color: var(--paper); margin-top: 24px; }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(56px, 6vw, 88px) 0 clamp(48px, 5vw, 72px); }
.footer-cta h2 { font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; max-width: 12ch; position: relative; padding-top: 28px; }
.footer-cta h2::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--signal); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid #3A3A3A; padding: 22px 0 30px; }
.footer-nav { display: flex; gap: 32px; flex-wrap: wrap; }
.footer-nav a { font: 400 13px var(--mono); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* responsive */
@media (max-width: 1080px) {
  .site-nav ul { gap: 22px; } .site-nav { gap: 24px; }
  .cols-4, .cols-4g { grid-template-columns: repeat(2, 1fr); }
  .cols-4.ruled > li:nth-child(3) { border-left: 0; padding-left: 0; }
  .cols-4.ruled > li:nth-child(n+3) { margin-top: 40px; }
  .station { grid-template-columns: 1fr; } .station-drawing { border-right: 0; border-bottom: 1px solid var(--rule); }
  .net { grid-template-columns: 1fr; } .stn-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .stn-panel img { grid-row: span 2; }
  .grid-3 .fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .site-nav { display: none; position: fixed; inset: 76px 0 0; background: var(--paper); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--m) 32px; overflow-y: auto; }
  .nav-open .site-nav { display: flex; }
  .nav-open { overflow: hidden; }
  .site-nav ul { flex-direction: column; gap: 0; margin-bottom: 28px; }
  .site-nav ul a { display: block; font: 600 30px/1.1 var(--sans); letter-spacing: -0.03em; padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .site-nav ul a[aria-current="page"] { border-color: var(--rule); color: var(--signal-deep); }
  .site-nav .btn { min-height: 52px; }
  .hero { grid-template-columns: 1fr; row-gap: 32px; }
  .hero-text, .hero-media { grid-column: 1; }
  .hero-text { padding-block: 8px; gap: 26px; }
  .display { max-width: 12ch; }
  .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .ruled > li { border-left: 0; padding: 22px 0; border-top: 1px solid var(--rule); flex-direction: row; align-items: center; gap: 20px; margin-top: 0 !important; }
  .ruled > li:first-child { border-top: 0; padding-top: 0; }
  .cols-3 h3, .steps h3 { margin-top: 0; }
  .steps .num { margin-bottom: 0; width: 26px; }
  .map-frame { overflow-x: auto; } .map-svg { min-width: 720px; }
  .map-note { position: static; padding: 12px 14px; border-top: 1px solid var(--rule); }
  .net .map-frame { display: block; }
  .why-grid, .split { grid-template-columns: 1fr; row-gap: 24px; }
  .why-num, .why-grid > div, .big-para, .pack { grid-column: 1; }
  .why-num { font-size: 6rem; }
  .need, .founders, .pay, .cols-3g, .grid-2 .fields, .grid-3 .fields { grid-template-columns: 1fr; }
  .pack { grid-template-columns: 1fr; } .pack-list { grid-row: auto; grid-column: 1; margin-top: 12px; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .cols-4g { grid-template-columns: 1fr; }
  .stn-panel { display: flex; }
  .pay li { padding: 28px 22px; gap: 20px; } .pay li svg { padding-right: 20px; }
  .silhouette { width: 104px; height: 104px; }
  .spec > div { grid-template-columns: 1fr 2fr; }
}

.hero > *, .net > *, .split > *, .why-grid > *, .need > *, .station > *, .photo-grid > * { min-width: 0; }

.pack svg { grid-row: 2; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--rule); }
.sp-sheet { fill: var(--paper); } .sp-top { fill: #fff; }
.sp-t { font: 500 11px var(--mono); letter-spacing: .06em; } .sp-s { font: 400 9px var(--mono); fill: var(--muted); letter-spacing: .06em; }
.sp-grid { stroke: #111; stroke-width: .5; opacity: .12; } .sp-road { fill: none; stroke: #fff; stroke-width: 6; } .sp-bld { fill: none; stroke: #111; stroke-width: 1; }
.sp-site { fill: none; stroke: #FF5A1F; stroke-width: 1.5; stroke-dasharray: 4 3; }
.credits-wrap { overflow-x: auto; margin-top: 40px; border-top: 1px solid var(--ink); }
.credits { width: 100%; border-collapse: collapse; font-size: 15px; }
.credits th { text-align: left; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.credits td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.credits td.mono { font-size: 12px; white-space: nowrap; }
.credits a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.credits a:hover { color: var(--signal-deep); }
@media (max-width: 860px) { .credits { min-width: 640px; } }

/* round 3: port, sizes, foot plate */
.note { margin-top: 16px; font-size: 13px; color: var(--muted); }
.cols .d, .big-col .d { margin-top: 14px; color: var(--muted); line-height: 1.45; max-width: 34ch; font-size: 16px; }
.big-col .d { max-width: 40ch; font-size: 18px; margin-top: 20px; }
.big-col { grid-column: 1 / span 5; }
.big-col .big-para { grid-column: auto; }
.parts .num { letter-spacing: .04em; }
.station-svg .grid { stroke: var(--rule); stroke-width: .8; }
.station-svg .bay { fill: #FCE6DA; stroke: var(--signal); stroke-width: 1.4; }
.station-svg .cut { fill: var(--panel); stroke: var(--ink); stroke-width: 1; }
.station-svg .rot { fill: #FBFAF7; stroke: var(--ink); stroke-width: 1; }
.station-svg .dash { fill: none; stroke: var(--signal); stroke-width: 2; stroke-dasharray: 6 5; }
.station-svg .ghost { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.sizes-h { max-width: 16ch; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
.sizes li { border: 1px solid var(--rule); background: var(--panel); padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; }
.sizes .mono { font-size: 12px; color: var(--signal-deep); margin-top: 20px; }
.sizes h3 { font-weight: 650; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.15; letter-spacing: -0.03em; margin-top: 10px; }
.sizes li > p:last-child { margin-top: 10px; color: var(--muted); line-height: 1.45; }
.size-svg { width: 100%; height: auto; background: var(--paper); border: 1px solid var(--rule); }
.sz-deck { fill: #fff; stroke: var(--ink); stroke-width: 1.2; }
.sz-grid { stroke: var(--rule); stroke-width: .7; }
.sz-bay { fill: #FCE6DA; stroke: var(--signal); stroke-width: 1.2; }
.sz-dr { stroke: var(--ink); stroke-width: 1.4; }
.fpbox { grid-column: 7 / span 6; background: var(--panel); border: 1px solid var(--rule); padding: 20px; }
.fp-svg { width: 100%; height: auto; display: block; background: var(--paper); border: 1px solid var(--rule); }
.fp-plate, .fp-wheel { fill: #fff; stroke: var(--ink); stroke-width: 1.3; }
.fp-coil { fill: none; stroke: var(--signal); stroke-width: 1.3; }
.fp-mag, .fp-dot { fill: var(--ink); }
.fp-lead { stroke: var(--ink); stroke-width: .8; fill: none; }
.fp-t { font: 500 12px var(--mono); fill: var(--ink); }
.fp-s { font: 400 11px var(--mono); fill: var(--muted); }
.pc-size { font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
@media (max-width: 860px) {
  .sizes { grid-template-columns: 1fr; }
  .big-col, .fpbox { grid-column: 1; }
}
@media (max-width: 860px) {
  .ruled > li { flex-wrap: wrap; }
  .ruled > li .d { flex-basis: 100%; margin-top: 4px; max-width: none; }
  .parts .num { width: auto; flex-basis: 100%; }
}

/* ---------- vision page ---------- */
.page-vision { --night: #0B0B0C; --night-2: #111113; --line: #2A2A2D; --fog: #8A8780; background: var(--night); color: var(--paper); }
.page-vision .site-header { background: rgba(11,11,12,.86); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); }
.page-vision .site-header .brand, .page-vision .site-nav a:not(.btn) { color: var(--paper); }
.page-vision .menu-btn { color: var(--paper); border-color: var(--paper); }
.page-vision .site-footer { background: var(--night); border-top: 1px solid var(--line); margin-top: 0; }
.page-vision .sec-label { border-top-color: var(--line); color: var(--fog); }
.page-vision .sec-label span { color: var(--signal); }
.v-light .sec-label { border-top-color: var(--ink); color: var(--muted); }
.v-light { background: var(--paper); color: var(--ink); padding: var(--sec) 0; }
.v-dark { padding: var(--sec) 0; border-top: 1px solid var(--line); }
.v-tag { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fog); }
.v-note { font-size: 12px; color: var(--fog); margin-top: 22px; letter-spacing: .04em; }

.v-hero { position: relative; min-height: min(92vh, 900px); display: flex; align-items: flex-end; overflow: hidden; background: radial-gradient(120% 90% at 70% 40%, #17110d 0%, var(--night) 60%); }
.v-hero-map { position: absolute; inset: 0 -4% 0 28%; }
.v-hero-map svg { width: 100%; height: 100%; }
.v-hero-text { position: relative; padding-bottom: clamp(48px, 7vw, 110px); padding-top: 120px; }
.v-display { font-weight: 700; font-size: clamp(3.4rem, 8.4vw, 8.6rem); line-height: .9; letter-spacing: -0.055em; max-width: 8.5ch; margin: 18px 0 26px; text-wrap: balance; }
.v-lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; max-width: 34ch; color: #CFCBC2; margin-bottom: 34px; }
.v-btn-ghost { background: transparent; border-color: #55524c; color: var(--paper); }
.v-btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.v-corner { position: absolute; right: var(--m); bottom: clamp(48px, 7vw, 110px); font-size: 12px; color: var(--fog); text-align: right; border-right: 1px solid var(--signal); padding-right: 12px; }

.v-uk .v-grid { fill: none; stroke: #1c1c1e; stroke-width: .6; }
.v-uk .v-land { fill: #141415; stroke: #3a3a3d; stroke-width: .8; }
.v-lights circle { fill: #F4F2ED; }
.v-arc { fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: v-draw 2.2s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0s); filter: drop-shadow(0 0 3px rgba(255,90,31,.7)); }
.v-arc.on { stroke-dashoffset: 0; animation: none; }
.v-pulse { fill: none; stroke: #FFD2BF; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .035 .965; stroke-dashoffset: 1; animation: v-run 3.6s linear infinite; animation-delay: var(--d, 0s); opacity: 0; filter: drop-shadow(0 0 4px #FF5A1F); }
.v-node { fill: var(--signal); }
.v-stem { stroke: var(--signal); stroke-width: 1; opacity: .6; }
.v-bath { fill: #FFB08F; }
.v-ring { fill: none; stroke: var(--signal); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: v-ping 2.8s ease-out infinite; }
.v-ring.r2 { animation-delay: 1.4s; }
.v-lbl { font: 500 11px var(--mono); fill: #D8D4CB; letter-spacing: .08em; }
.v-lbl.big { font-size: 16px; letter-spacing: .2em; fill: var(--paper); }
.v-lbl.dim { fill: var(--fog); }
.v-lead { stroke: #6b6862; stroke-width: .8; }
@keyframes v-draw { to { stroke-dashoffset: 0; } }
@keyframes v-run { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes v-ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

.v-statement { font-weight: 700; font-size: clamp(2.2rem, 5vw, 5rem); line-height: 1; letter-spacing: -0.045em; max-width: 20ch; text-wrap: balance; }
.v-statement em { font-style: normal; color: var(--signal); }
.v-three { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--ink); }
.v-three li { padding: 22px clamp(16px, 2vw, 32px) 0; border-left: 1px solid var(--rule); }
.v-three li:first-child { border-left: 0; padding-left: 0; }
.v-three h3 { font-weight: 650; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; }
.v-three p { margin-top: 8px; color: var(--muted); max-width: 30ch; }

.v-h2 { font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: .98; letter-spacing: -0.045em; text-wrap: balance; }
.v-h2.xl { font-size: clamp(2.6rem, 5.6vw, 5.8rem); }
.v-h2.ink { color: var(--ink); }
.v-ex-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gap); align-items: center; }
.v-ex-text p:not(.mono) { margin-top: 22px; color: #BDB9B0; max-width: 34ch; font-size: 18px; }
.v-ex svg, .v-ex { width: 100%; height: auto; display: block; }
.v-ex .ex-tiles { fill: #0f0f10; stroke: #3a3a3d; stroke-width: 1; }
.v-ex .ex-tl { stroke: #26262a; stroke-width: .8; }
.v-ex .ex-glass { fill: rgba(255,255,255,.03); stroke: #4a4a4e; stroke-width: 1; }
.v-ex .ex-rail { stroke: #8f8c85; stroke-width: 2; }
.v-ex .ex-puck { fill: #1b1b1d; stroke: #b9b5ac; stroke-width: 1.2; }
.v-ex .ex-dot, .v-ex .ex-dot2 { fill: var(--signal); }
.v-ex .ex-dark { fill: #121213; stroke: #45454a; stroke-width: 1; }
.v-ex .ex-coil { fill: none; stroke: var(--signal); stroke-width: 2; animation: v-glow 3s ease-in-out infinite; }
.v-ex .ex-deck { fill: #E9E6DF; stroke: #fff; stroke-width: 1; }
.v-ex .ex-side { fill: #a9a59d; } .v-ex .ex-side2 { fill: #8b877f; }
.v-ex .ex-edge { fill: none; stroke: var(--signal); stroke-width: 2.4; }
.v-ex .ex-mark { fill: none; stroke: #9b978f; stroke-width: 1.2; stroke-dasharray: 5 6; }
.v-ex .ex-drone { animation: v-hover 4s ease-in-out infinite; }
.v-ex .ex-arm { stroke: #E9E6DF; stroke-width: 4; stroke-linecap: round; }
.v-ex .ex-rotor { fill: rgba(233,230,223,.08); stroke: #E9E6DF; stroke-width: 1.2; }
.v-ex .ex-body { fill: #E9E6DF; }
.v-ex .ex-beam { stroke: var(--signal); stroke-width: 1; stroke-dasharray: 3 6; opacity: .7; }
@keyframes v-glow { 50% { opacity: .45; } }
@keyframes v-hover { 50% { transform: translateY(-10px); } }

.v-horizons { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.v-horizons li { position: relative; }
.v-th { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: var(--night-2); }
.v-th .th-b { fill: #1e1e21; stroke: #4a4a4e; } .v-th .th-t { fill: #3a3a3e; } .v-th .th-o { fill: var(--signal); filter: drop-shadow(0 0 6px var(--signal)); }
.v-th .th-r { fill: none; stroke: #4a4a4e; } .v-th .th-seg { fill: none; stroke: var(--signal); stroke-width: 5; filter: drop-shadow(0 0 5px rgba(255,90,31,.8)); }
.v-dotline { display: block; height: 1px; background: var(--signal); margin: 34px calc(var(--gap) * -1) 30px 0; position: relative; box-shadow: 0 0 8px rgba(255,90,31,.8); }
.v-horizons li:last-child .v-dotline { margin-right: 0; }
.v-dotline::before { content: ""; position: absolute; left: 0; top: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(255,90,31,.18), 0 0 14px var(--signal); }
.v-horizons .mono { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fog); }
.v-horizons h3 { font-weight: 650; font-size: clamp(21px, 1.8vw, 27px); letter-spacing: -0.03em; line-height: 1.1; margin: 8px 0 10px; }
.v-horizons p:last-child { color: #B5B1A8; font-size: 15.5px; line-height: 1.45; }

.v-hub-sec { position: relative; background: #050506; border-top: 1px solid var(--line); overflow: hidden; }
.v-hub-art svg { width: 100%; height: clamp(420px, 52vw, 760px); display: block; }
.v-hub-text { position: absolute; inset: 0; padding-top: clamp(40px, 5vw, 72px); }
.v-hub-text .v-h2 { margin-top: 18px; max-width: 13ch; }
.v-hub-text p:last-child { margin-top: 18px; color: #BDB9B0; max-width: 36ch; }
.v-hub .hb-bld { fill: #1a1a1c; stroke: #2e2e31; } .v-hub .hb-roof { fill: #cfcac1; }
.v-hub .hb-bay { fill: var(--signal); animation: v-glow 4s ease-in-out infinite; }
.v-hub .hb-seam { fill: #2a2a2d; }
.v-hub .hb-horizon { fill: var(--signal); }
.v-hub .hb-refl { opacity: .22; }

.v-fit-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); align-items: center; }
.v-fit { width: 100%; height: auto; display: block; }
.v-fit .ft-out { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 6; }
.v-fit .ft-plate { fill: #E4E0D8; stroke: var(--ink); stroke-width: 1.6; }
.v-fit .ft-coil { fill: none; stroke: var(--signal); stroke-width: 3; opacity: calc(1 - var(--i) * .035); }
.v-fit .ft-mag { fill: #1a1a1a; } .v-fit .ft-core { fill: #3a3a3a; stroke: var(--signal); stroke-width: 2; }
.v-fit .ft-bolt { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.v-fit .ft-dim { fill: none; stroke: var(--ink); stroke-width: .8; }
.v-fit .ft-t { font: 500 13px var(--mono); fill: var(--ink); letter-spacing: .08em; }
.v-kicker { margin-top: 24px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.v-body { margin-top: 20px; color: var(--muted); max-width: 34ch; font-size: 18px; }

.v-world-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: center; }
.v-world-grid > div > p:not(.mono) { margin-top: 22px; color: #BDB9B0; max-width: 32ch; font-size: 18px; }
.v-globe { width: 100%; height: auto; display: block; }
.v-globe .v-sphere { stroke: #2e2e31; stroke-width: 1; }
.v-globe .v-grat { fill: none; stroke: #222225; stroke-width: .6; }
.v-globe .v-coast { fill: none; stroke: #6a6862; stroke-width: .7; }

@media (max-width: 860px) {
  .v-hero { align-items: stretch; flex-direction: column; min-height: 0; }
  .v-hero-map { position: relative; inset: auto; height: 62vw; margin-top: 70px; }
  .v-hero-text { padding-top: 0; }
  .v-corner { display: none; }
  .v-three, .v-ex-grid, .v-fit-grid, .v-world-grid { grid-template-columns: 1fr; }
  .v-three li { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
  .v-horizons { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .v-dotline { margin-right: 0; }
  .v-hub-text { position: relative; padding-bottom: 40px; }
  .v-hub-art svg { height: 70vw; }
}
@media (max-width: 560px) { .v-horizons { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .v-arc { animation: none; stroke-dashoffset: 0; }
  .v-pulse, .v-ring { animation: none; opacity: 0; }
  .v-ex .ex-coil, .v-ex .ex-drone, .v-hub .hb-bay { animation: none; }
}
/* vision fixes */
.v-hero-text { width: 100%; }
.v-hero-map { inset: 0 -8% 0 38%; }
.v-ex .ex-body { fill: #1b1b1d; stroke: #E9E6DF; stroke-width: 1.4; }
.v-ex .ex-arm { stroke: #8f8c85; stroke-width: 3; }
.v-hub-text { position: relative; inset: auto; padding: 0 0 clamp(24px, 3vw, 40px); }
.v-hub-sec { padding-top: var(--sec); }
.v-hub-art svg { height: auto; }
.v-hub .hb-drone line { stroke: #CFCAC1; stroke-width: 2; } .v-hub .hb-drone ellipse { fill: none; stroke: #8f8c85; } .v-hub .hb-drone rect { fill: #CFCAC1; }
.v-hub .hb-drone { animation: v-hover 5s ease-in-out infinite; }
.v-hub .hb-drone:nth-of-type(2n) { animation-duration: 6.5s; }
@media (max-width: 860px) { .v-hero-map { inset: auto; } }
.v-hub-sec { display: flex; flex-direction: column; }
.v-hub-text { order: -1; padding-top: 0; padding-bottom: clamp(24px, 3vw, 40px); padding-left: var(--m); padding-right: var(--m); }
.v-hub-text { width: 100%; padding-left: var(--m); padding-right: var(--m); }

/* ---------- home polish ---------- */
.hero-port { background: #0B0B0C; border: 1px solid #0B0B0C; position: relative; display: flex; align-items: center; }
.hero-port svg { width: 100%; height: auto; display: block; padding: 4% 2% 2%; }
.hero-port figcaption { position: absolute; left: 18px; top: 16px; right: auto; bottom: auto; background: transparent; border: 0; color: #8A8780; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 0; }
.page-home .cols-3 h3 { margin-top: 28px; }
.page-home .cols-3:not(.parts) li > svg:first-child { color: var(--signal-deep); }
.parts .part-svg { margin-bottom: 22px; }
.parts .num { margin-bottom: 0; }
.parts h3 { margin-top: 14px !important; }
.pa-coil { fill: none; stroke: var(--signal); stroke-width: 2; }
.pa-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.pa-stn { fill: #fff; stroke: var(--signal); stroke-width: 3; }
.pa-pack { fill: none; stroke: var(--signal); stroke-width: 1.2; stroke-dasharray: 3 3; }
.pa-t { font: 500 7px var(--mono); fill: var(--signal-deep); letter-spacing: .08em; }
.pc-cap small { display: block; margin-top: 6px; font: 400 14.5px/1.4 var(--sans); color: var(--muted); letter-spacing: 0; }
.page-home .pc-cap { padding-bottom: 18px; }
.why-dark { background: #0B0B0C; color: var(--paper); padding: var(--sec) 0; margin-top: var(--sec); }
.why-dark .sec-label { border-top-color: #2A2A2D; color: #8A8780; }
.why-dark .sec-label span { color: var(--signal); }
.why-h { grid-column: 1 / span 5; font-weight: 700; font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: .95; letter-spacing: -0.045em; text-wrap: balance; }
.why-dark .why-grid > div { grid-column: 7 / span 6; }
.why-dark .why-text { color: #E8E4DB; }
.why-dark .source { color: #8A8780; }
.vt { background: #0B0B0C; color: var(--paper); border-top: 1px solid #2A2A2D; padding: var(--sec) 0; overflow: hidden; }
.vt-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: center; }
.vt .v-h2 { margin-top: 16px; max-width: 10ch; }
.vt-p { margin: 22px 0 32px; color: #BDB9B0; max-width: 32ch; font-size: 18px; }
.vt-map svg { width: 118%; height: auto; display: block; margin-left: -6%; }
.page-home .site-footer { background: #0B0B0C; border-top: 1px solid #2A2A2D; margin-top: 0; }
@media (max-width: 860px) {
  .vt-grid { grid-template-columns: 1fr; }
  .why-h, .why-dark .why-grid > div { grid-column: 1; }
  .vt-map svg { width: 100%; margin: 0; }
}
.hero-port .v-lbl { font-size: 17px; letter-spacing: .06em; }
.why-dark { margin-top: 0; }
.vt { padding: clamp(40px, 4vw, 64px) 0; }
.vt-map svg { margin-top: -9%; margin-bottom: -12%; }
@media (max-width: 860px) { .vt-map svg { margin: -6% 0 -10%; } }
.hero-port svg { padding: 9% 2% 2%; }

/* region switch */
.region-switch { display: inline-flex; border: 1px solid var(--rule); font: 500 12px/1 var(--mono); letter-spacing: .04em; margin: 0 4px 0 8px; }
.region-switch a { padding: 8px 10px; color: var(--muted); text-decoration: none; }
.region-switch a:hover { color: var(--ink); }
.region-switch a[aria-current] { background: var(--ink); color: var(--paper); }
.page-vision .region-switch { border-color: #2A2A2D; }
.page-vision .region-switch a { color: #8A8780; }
.page-vision .region-switch a[aria-current] { background: var(--paper); color: var(--ink); }
.parts .part-svg { height: clamp(140px, 12.5vw, 190px); }