/* H1 The map. Kinetech parent site, Phase B values. */
:root {
  --navy: #102d7b; --navy-deep: #0b2361; --teal-deep: #027aa2; --teal-mid: #0391bf; --cyan: #00aee6; --cyan-light: #b3e8f7;
  --ink: #21242c; --ink-soft: #2c3e47; --ink-mute: #4f5f69; --slate: #eef8fb; --mist: #f2fafc; --rule: #dde3e9; --white: #fff;
  --sx: #0d799b; --mach: #14181d;
  --display: 'Jost', 'Futura PT', 'Century Gothic', sans-serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm: 8px; --r-md: 14px; --r-lg: 14px;
  --shadow: 0 1px 2px rgba(16,45,123,.04), 0 8px 30px -12px rgba(2,122,162,.18);
  --gutter: 40px; --section: 96px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-deep); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); color: var(--navy); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.5rem); font-weight: 700; line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }
.lede { font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons: Phase B */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 24px; border-radius: 8px;
  font: 600 15px/1.2 var(--sans); border: 1px solid var(--teal-deep); cursor: pointer; transition: background-color .18s ease, color .18s ease, transform .16s var(--ease-out); }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--teal-deep); color: #fff; }
.btn-primary:hover { background: #026b8f; border-color: #026b8f; }
.btn-ghost { background: transparent; color: var(--teal-deep); }
.btn-ghost:hover { background: var(--slate); }
.btn-white { background: #fff; color: var(--navy); border-color: #fff; }
.btn-white:hover { background: var(--cyan-light); border-color: var(--cyan-light); }
.btn-ghost-w { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-w:hover { background: rgba(255,255,255,.1); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.go { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--teal-deep); }
.go::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s var(--ease-out); }
.go:hover { text-decoration: none; }
.go:hover::after { transform: translateX(3px) rotate(45deg); }
.go-light { color: var(--cyan-light); }

/* ---------- 1. Hero + map ---------- */
.hero { padding-top: 64px; background: #fff; }
.map-band { background: linear-gradient(180deg, #fff 0, var(--mist) 120px); padding-bottom: 88px; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; padding-bottom: 56px; }
.hero-top h1 { max-width: 11ch; }
.hero-sub { font: 600 1.375rem/1.3 var(--display); color: var(--navy); letter-spacing: -0.01em; margin-bottom: 12px; }
.hero-side .lede { margin-bottom: 28px; max-width: 48ch; }

.map-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 28px 0 22px; border-top: 1px solid var(--rule); }
.map-head h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #e3f1f7; border-radius: 14px; }
.tabs button { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; border-radius: 8px; padding: 11px 16px; min-height: 44px;
  font: 600 14px/1.1 var(--sans); color: var(--ink-soft); cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .16s var(--ease-out); }
.tabs button:active { transform: scale(0.97); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(16,45,123,.08), 0 4px 14px -6px rgba(2,122,162,.35); }
@media (hover: hover) and (pointer: fine) { .tabs button:hover { color: var(--navy); } }
.tabs .sw { width: 12px; height: 8px; border: 1.5px solid var(--teal-deep); transform: skewX(-30deg); transition: background-color .18s ease; }
.tabs button[aria-selected="true"] .sw { background: var(--cyan); border-color: var(--navy); }

.map-grid { display: block; }
.map { position: relative; margin: 0; }
.map .world { width: 100%; height: auto; overflow: visible; }
.map-over { position: absolute; inset: 0 0 auto 0; width: 100%; pointer-events: none; }
.map-cap { font-size: 13px; color: var(--ink-mute); margin-top: 4px; text-align: center; }

.world .zone { transition: opacity .3s ease; }
.world .zone { cursor: pointer; }
.map[data-active] .world .zone:not(.is-active) { opacity: .62; }
.world .zone.is-active .zfloor { fill: rgba(179,232,247,.7); }
.world .zone.is-hover { opacity: 1 !important; }
.world .zone.is-hover:not(.is-active) .zfloor { fill: rgba(179,232,247,.35); }
.world .rnode { transition: opacity .3s ease; }
.map[data-active] .world .rnode:not(.is-active) { opacity: .55; }
.world .rnode.is-active .ring { animation: ring 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { 0% { transform: scale(.7); opacity: 1; } 70%, 100% { transform: scale(2.1); opacity: 0; } }

.mlabel { position: absolute; transform: translate(var(--tx, -50%), var(--ty, -50%)); white-space: nowrap; font: 600 13px/1 var(--sans); color: var(--ink-soft);
  background: rgba(255,255,255,.95); padding: 7px 10px; border-radius: 8px; box-shadow: 0 0 0 1px var(--rule), 0 4px 12px -6px rgba(16,45,123,.25); transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.mlabel.is-active { color: #fff; background: var(--navy); box-shadow: 0 6px 16px -6px rgba(16,45,123,.5); }
.pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  background: var(--navy); color: #fff; font: 700 13px/1 var(--sans); display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 3px 8px rgba(16,45,123,.35); transition: background-color .18s ease, color .18s ease, transform .16s var(--ease-out); }
.pin::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.pin:active { transform: translate(-50%, -50%) scale(0.92); }
@media (hover: hover) and (pointer: fine) { .pin:hover { background: var(--teal-deep); } }
.map[data-active] .pin:not(.in-zone) { background: #6b7d88; }
.pin.is-on { background: var(--cyan); color: var(--navy); }

.panels { position: relative; margin-top: 24px; }
.panel { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 32px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 264px); gap: 32px; align-items: start; }
.panel[hidden] { display: none; }
.panel.enter { animation: panel-in .28s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
.pz { font-size: 13px; font-weight: 600; color: var(--teal-deep); display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.pz::before { content: ""; width: 12px; height: 8px; background: var(--cyan-light); border: 1px solid var(--teal-mid); transform: skewX(-30deg); }
.panel h3 { font-size: 1.875rem; }
.pdesc { margin-top: 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.pres { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.pres a { display: grid; grid-template-columns: 24px auto; grid-template-areas: "b n" "b c"; column-gap: 12px; align-content: start; height: 100%; padding: 16px 16px 18px; border-radius: 8px; background: var(--mist); color: var(--ink-soft); transition: background-color .2s ease; }
.pres a:hover { text-decoration: none; background: var(--slate); }
.pres a.flash { background: var(--cyan-light); }
.pres b { grid-area: b; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 11px/24px var(--sans); text-align: center; margin-top: 6px; }
.pres .pn { grid-area: n; font: 700 2.5rem/1.05 var(--display); color: var(--navy); letter-spacing: -0.03em; }
.pres .pc { grid-area: c; font-size: 13.5px; line-height: 1.45; margin-top: 6px; }
.pres .pc strong { display: block; color: var(--navy); font-weight: 700; margin-bottom: 2px; }
.pgo { display: flex; flex-direction: column; gap: 12px; padding-left: 28px; border-left: 1px solid var(--rule); align-self: stretch; justify-content: center; }

/* map motion: the route draws from the crossroads to each place, once */
.js .map.armed .world .route, .js .map.armed .world .route-under { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .map.armed .world .rnode, .js .map.armed .mlabel, .js .map.armed .pin { opacity: 0; }
.js .map.armed .mlabel { transform: translate(var(--tx, -50%), calc(var(--ty, -50%) + 20%)); }
.js .map.armed .pin { transform: translate(-50%, -90%); }
.js .map.play .world .route, .js .map.play .world .route-under { animation: draw 1.15s cubic-bezier(.65,0,.35,1) .3s forwards; }
.js .map.play .world [data-route="psn"] { animation-delay: .8s; }
.js .map.play .world [data-route="csd"] { animation-delay: 1.3s; }
.js .map.play .world [data-route="sx"] { animation-delay: 1.8s; }
.js .map.play .world .rnode { animation: pop .4s var(--ease-out) forwards; }
.js .map.play .world .rnode[data-route="mfg"] { animation-delay: 1.35s; }
.js .map.play .world .rnode[data-route="psn"] { animation-delay: 1.85s; }
.js .map.play .world .rnode[data-route="csd"] { animation-delay: 2.35s; }
.js .map.play .world .rnode[data-route="sx"] { animation-delay: 2.85s; }
.js .map.play .mlabel { animation: fade .45s var(--ease-out) forwards; }
.js .map.play .mlabel[data-zone="mfg"] { animation-delay: 1.35s; }
.js .map.play .mlabel[data-zone="psn"] { animation-delay: 1.85s; }
.js .map.play .mlabel[data-zone="csd"] { animation-delay: 2.35s; }
.js .map.play .mlabel[data-zone="sx"] { animation-delay: 2.85s; }
.js .map.play .pin { animation: drop .45s var(--ease-out) forwards; animation-delay: calc(3.1s + var(--i) * 80ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade { to { opacity: 1; transform: translate(var(--tx, -50%), var(--ty, -50%)); } }
@keyframes drop { to { opacity: 1; transform: translate(-50%, -50%); } }

/* ---------- 2. Who we are ---------- */
.who { background: var(--navy); color: #d5e6f4; padding-block: var(--section); position: relative; overflow: hidden; }
.who-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px 80px; align-items: end; }
.who h2 { color: #fff; font-size: clamp(2.25rem, 4vw, 3.25rem); max-width: 14ch; }
.who-p { margin-top: 20px; font-size: 1.125rem; line-height: 1.65; max-width: 52ch; color: #d5e6f4; }
.figs { display: grid; gap: 0; margin: 0; }
.fig { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 28px; padding: 22px 0; border-top: 1px solid rgba(179,232,247,.25); }
.fig:last-child { border-bottom: 1px solid rgba(179,232,247,.25); }
.fig dt { font: 700 clamp(3rem, 5vw, 4.5rem)/1 var(--display); color: #fff; letter-spacing: -0.03em; white-space: nowrap; }
.fig dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--cyan-light); line-height: 1.4; }
.trust { margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(179,232,247,.2); display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.trust-h { font-size: 14px; font-weight: 600; color: #b9cde0; line-height: 1.4; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; }
.trust-row img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
.trust-row span { font: 600 1.125rem/1 var(--display); color: #fff; letter-spacing: -0.005em; opacity: .9; }

/* ---------- 3. Why ---------- */
.why { padding-block: var(--section); background: var(--mist); }
.why-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.why-head h2 { max-width: 16ch; }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.why-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.why-card .vig { width: 100%; height: 230px; margin-bottom: 20px; background: linear-gradient(180deg, #f6fbfd, #eaf4f8); border-radius: 8px; padding: 6px; }
.why-card .vig .dl { font-size: 15px; }
.why-card h3 { font-size: 1.3rem; }
.why-card p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

/* ---------- 4. How ---------- */
.how { padding-block: var(--section); }
.how-head { display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: end; margin-bottom: 48px; }
.loc { margin: 0; }
.loc svg { width: 132px; height: auto; }
.loc figcaption { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--teal-deep); }
.how-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.svc { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 24px; background: #fff; box-shadow: var(--shadow); position: relative; transition: border-color .2s ease, transform .2s var(--ease-out); }
.svc h3 { font-size: 1.375rem; }
.svc h3 a { color: inherit; }
.svc h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc:hover { border-color: var(--teal-mid); }
.svc h3 a:hover { text-decoration: none; }
.svc p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; }
.svc-mx { grid-row: span 2; background: var(--navy); border-color: var(--navy); color: #d5e6f4; display: flex; flex-direction: column; }
.svc-mx h3 { color: #fff; font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-top: 22px; }
.svc-mx p { color: #d5e6f4; font-size: 16px; }
.svc-mx:hover { border-color: var(--cyan); }
.mx-top { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-badge { font-size: 13px; font-weight: 600; color: #fff; padding: 7px 12px; border-radius: 8px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(179,232,247,.3); }
.svc-mx .mx-badge-2 { color: var(--navy); background: var(--cyan-light); box-shadow: none; }
.model { margin-top: auto; padding-top: 24px; width: 100%; height: auto; max-height: 230px; }
.svc-creds { background: var(--mist); box-shadow: none; display: flex; flex-direction: column; gap: 12px; }
.svc-creds:hover { border-color: var(--rule); }
.cred-list { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.cred-list li { font-size: 14px; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 9px; }
.cred-list li::before { content: ""; width: 7px; height: 7px; background: var(--cyan); transform: rotate(45deg); flex: none; }
.cred-h { font-size: 13px; color: var(--ink-mute); font-weight: 500; margin-top: 2px !important; }
.partners { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.partners li { font: 600 16px/1 var(--display); color: var(--ink-soft); }
.partners-v { gap: 6px; margin-top: auto; }
.partners-v li { font: 700 12.5px/1 var(--sans); color: var(--navy); padding: 7px 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }

/* ---------- 5. Places ---------- */
.places { padding-top: var(--section); background: #fff; }
.places-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 40px; }
.place { padding-block: 72px; border-top: 1px solid var(--rule); }
.place-alt { background: var(--slate); border-top: 0; }
.place-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.place-alt .place-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.place-alt .crop { order: 2; }
.crop { margin: 0; position: relative; }
.crop > svg { width: 100%; height: auto; }
.loc-in { position: absolute; left: 0; top: 0; background: rgba(255,255,255,.92); border-radius: 8px; padding: 8px; box-shadow: 0 0 0 1px var(--rule); }
.loc-in svg { width: 96px; }
.crop-cap { margin-top: 8px; font-size: 13px; color: var(--ink-mute); }
.place-body h3 { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.place-lede { margin-top: 14px; font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.6; max-width: 54ch; }
.res { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n who" "n c"; column-gap: 20px; align-items: center; margin-top: 28px; padding: 20px 0; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.res:hover { text-decoration: none; }
.res:hover .res-who { color: var(--teal-deep); }
.res-n { grid-area: n; font: 700 clamp(3.5rem, 6vw, 5rem)/.95 var(--display); color: var(--navy); letter-spacing: -0.035em; }
.res-who { grid-area: who; font-weight: 700; color: var(--navy); font-size: 15px; transition: color .18s ease; }
.res-who::after { content: " ↗"; color: var(--teal-deep); font-weight: 600; }
.res-c { grid-area: c; font-size: 14.5px; line-height: 1.5; margin-top: 4px; }
.res-row { display: grid; gap: 0; margin-top: 28px; }
.res-row .res { margin-top: 0; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 0; }
.res-row .res:first-child { border-top: 2px solid var(--navy); }
.res-row .res-n { font-size: clamp(2.5rem, 4vw, 3.5rem); min-width: 4.2ch; }
.res-row-2 .res-n { min-width: 4ch; }
.place-body > .go { margin-top: 24px; }

.door { margin-top: 28px; border-radius: var(--r-md); overflow: hidden; }
.door-mach { background: var(--mach); display: grid; grid-template-columns: 1fr 1.05fr; align-items: stretch; }
.door-mach > img { clip-path: inset(0 3% 0 0); }
.door-mach img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; object-position: 0 50%; }
.door-copy { padding: 22px 22px 22px 4px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.door-copy p { color: #c9d3da; font-size: 14px; line-height: 1.5; }
.door-name { font: 700 1.5rem/1 var(--display); color: #fff !important; letter-spacing: .02em; }
.door-mach .go-light { color: var(--cyan); font-size: 14px; }

.screen-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; margin-top: 56px; }
.browser { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -30px rgba(16,45,123,.45); }
.browser-bar { height: 30px; background: #e9f0f4; display: flex; align-items: center; gap: 6px; padding-left: 12px; border-bottom: 1px solid var(--rule); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c4d3dd; }
.browser img { width: 100%; height: auto; }
.door-name-c { color: var(--navy) !important; font-size: 1.75rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.screen-side > p { color: var(--ink-soft); }
.solutions { margin: 18px 0 22px; border-top: 1px solid var(--rule); }
.solutions li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: 14.5px; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.solutions li::before { content: ""; width: 6px; height: 6px; background: var(--cyan); transform: rotate(45deg); }

.door-sx { background: #fff; border: 1.5px solid var(--sx); padding: 24px; box-shadow: var(--shadow); position: relative; }
.sx-mark { font: 700 1.75rem/1 var(--sans); letter-spacing: -0.03em; color: var(--sx); }
.sx-mark span { color: #2c3e47; font-weight: 600; }
.door-sx > p:not(.sx-mark) { margin-top: 12px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chips li { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 6px 10px; border-radius: 8px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--rule); }
.door-sx .chips li { color: var(--sx); background: #eef7fa; box-shadow: inset 0 0 0 1px #cfe3ea; }
.door-sx .go { margin-top: 18px; }
.go-sx { color: var(--sx); }
.served { margin-top: 22px; }
.served-h { font-size: 13px; font-weight: 600; color: var(--ink-mute); }
.served .chips { margin-top: 8px; }
.place-alt .chips li { background: #fff; }

/* crop motion: the place's node rings once when the block is reached */
.crop .rnode .ring { transform-box: fill-box; transform-origin: center; }
.place.seen .crop .rnode .ring { animation: ring 2.4s ease-out 2; }

/* ---------- 6. Ontology (removable block) ---------- */
\.onto { padding-block: var(--section); background: var(--mist); border-top: 1px solid var(--rule); }
.onto-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: 32px 64px; align-items: start; }
.onto h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.onto-sub { margin-top: 10px; font: 600 1.125rem/1.35 var(--display); color: var(--ink-soft); }
.onto-copy > p:not(.onto-sub) { margin-top: 14px; font-size: 15px; color: var(--ink-soft); }
.onto-copy .go { margin-top: 18px; }
.sss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); counter-reset: none; }
.sss li { padding: 20px 22px 0 0; }
.sss li + li { padding-left: 22px; border-left: 1px solid var(--rule); }
.sss-n { font: 600 13px/1 var(--sans); color: var(--teal-deep); }
.sss h3 { font-size: 1.15rem; margin-top: 8px; }
.sss p:not(.sss-n) { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- 7. Start ---------- */
.start { padding-block: var(--section); }
.start-band { background: var(--navy); border-radius: var(--r-lg); padding: 56px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px 56px; align-items: center; overflow: hidden; }
.start h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.75rem); }
.start-copy > p { margin: 18px 0 28px; color: #d5e6f4; font-size: 1.0625rem; max-width: 50ch; }
.start-map { margin: 0; }
.start-map svg { width: 100%; height: auto; }
.start-map figcaption { margin-top: 14px; color: var(--cyan-light); font-size: 14px; line-height: 1.5; }
.start .iso .ft, .start .iso .fl, .start .iso .fr { stroke: #6f9fd8; stroke-width: .6; }
.start .iso .base.ft { fill: #16378c; } .start .iso .base.fl { fill: #0b2361; } .start .iso .base.fr { fill: #081a4a; }
.start .iso .road { fill: #1c3d93; }
.start .iso .lot.ft, .start .iso .mz.on .lot.ft { fill: #1f4296; } .start .iso .lot.fl { fill: #16378c; } .start .iso .lot.fr { fill: #0b2361; }
.start .iso .mz.on .m.ft { fill: #2a4fa8; } .start .iso .mz.on .m.fl { fill: #1c3d93; } .start .iso .mz.on .m.fr { fill: #12307e; }
.start .iso .route { stroke-width: 2.6; }
.start .iso .rnode .dot { fill: #fff; stroke: #00aee6; }
.start-map.armed .route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.start-map.play .route { animation: draw 1.1s var(--ease-out) forwards; }
.start-map.play .route[data-route="psn"] { animation-delay: .25s; }
.start-map.play .route[data-route="csd"] { animation-delay: .5s; }
.start-map.play .route[data-route="sx"] { animation-delay: .75s; }

/* ?newcopy */
.show-new [data-new-copy] { outline: 2px solid #f5c400 !important; outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .pgo { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 16px; flex-direction: row; flex-wrap: wrap; gap: 12px 28px; }
  .how-grid { grid-template-columns: 1fr 1fr; }
  .svc-mx { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 860px) {
  :root { --gutter: 20px; --section: 64px; }
  .hero { padding-top: 40px; }
  .map-band { padding-bottom: 64px; }
  .hero-top, .who-grid, .why-head, .places-head, .place-grid, .place-alt .place-grid, .screen-row, .onto-grid, .start-band { grid-template-columns: 1fr; }
  .how-head { grid-template-columns: 1fr; }
  .place-alt .crop { order: 0; }
  .hero-top { padding-bottom: 36px; }
  .why-grid { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .trust-row { justify-content: flex-start; }
  .sss { grid-template-columns: 1fr; }
  .sss li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 20px; }
  .start-band { padding: 36px 24px; }
  .place { padding-block: 56px; }
}
@media (max-width: 600px) {
  .map { margin-inline: calc(-1 * var(--gutter) + 6px); }
  .map-cap { padding-inline: calc(var(--gutter) - 6px); }
  .mlabel:not(.is-active) { opacity: 0 !important; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tabs button { padding: 11px 12px; font-size: 13.5px; }
  .map-head { padding-top: 22px; }
  .mlabel { font-size: 12px; padding: 5px 7px; }
  .pin { width: 24px; height: 24px; font-size: 12px; }
  \.panel { padding: 24px; grid-template-columns: 1fr; gap: 18px; }
  .pres { grid-auto-flow: row; }
  .pgo { flex-direction: column; }
  .how-grid { grid-template-columns: 1fr; }
  .svc-mx { grid-column: auto; }
  .fig { grid-template-columns: 1fr; gap: 6px; }
  .door-mach { grid-template-columns: 1fr; }
  .door-copy { padding: 20px; }
  .res { column-gap: 16px; }
  .res-row .res-n { min-width: 3.6ch; }
  .why-card .vig { height: 205px; }
  .loc-in svg { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- STORY order (round 2b) ---------- */
.hero { padding-bottom: 72px; }
.hero-top { padding-bottom: 0; }
.chips3 { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; }
.chips3 li { display: inline-flex; align-items: center; gap: 9px; font: 600 14px/1.2 var(--sans); color: var(--navy); }
.chips3 li::before { content: ""; width: 12px; height: 8px; border: 1.5px solid var(--teal-deep); background: var(--cyan-light); transform: skewX(-30deg); }

.who .trust { margin: 0 auto 64px; padding: 0 0 32px; border-top: 0; border-bottom: 1px solid rgba(179,232,247,.25); }
.who-copy .go { margin-top: 24px; }

/* industries: the world sits under the section head */
.map-in { background: linear-gradient(180deg, #fff 0, var(--mist) 140px, var(--mist) calc(100% - 80px), #fff 100%); padding: 24px 0 72px; }
.mlabel { pointer-events: auto; cursor: pointer; }
.mlabel:hover { text-decoration: none; color: var(--navy); box-shadow: 0 0 0 1.5px var(--teal-deep), 0 4px 12px -6px rgba(16,45,123,.25); }
.mlabel.is-active:hover { color: #fff; }
a.pin { text-decoration: none; }
.place:first-of-type { border-top: 0; }
.go-row { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 14px; }
.place-note { margin-top: 24px; font-weight: 600; color: var(--navy); }

/* 5. results: one card per pin */
.results { padding-block: var(--section); background: #fff; border-top: 1px solid var(--rule); }
.results-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: 40px; }
.rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rcard > a, .rc-all { display: flex; flex-direction: column; height: 100%; padding: 20px 22px 24px; border-radius: var(--r-md); background: var(--mist); color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--rule); transition: background-color .2s ease, box-shadow .2s ease; }
.rcard > a:hover { text-decoration: none; background: var(--slate); box-shadow: inset 0 0 0 1.5px var(--teal-deep); }
.rcard.flash > a { animation: flash 1.4s var(--ease-out); }
@keyframes flash { 0%, 35% { background: var(--cyan-light); box-shadow: inset 0 0 0 2px var(--teal-deep); } 100% { background: var(--mist); } }
.rc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.rc-top b { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 12px/26px var(--sans); text-align: center; flex: none; }
.rc-place { font-size: 13px; font-weight: 600; color: var(--ink-mute); }
.rc-loc { width: 58px; margin-left: auto; }
.rc-n { font: 700 clamp(2.75rem, 4vw, 3.5rem)/1 var(--display); color: var(--navy); letter-spacing: -0.03em; }
.rc-who { margin-top: 10px; font-weight: 700; color: var(--navy); font-size: 15px; }
.rcard > a .rc-who::after { content: " ↗"; color: var(--teal-deep); font-weight: 600; }
.rcard > a[target="_top"] .rc-who::after { content: ""; }
.rc-c { margin-top: 6px; font-size: 14px; line-height: 1.5; }
.rc-all { background: var(--navy); box-shadow: none; color: #d5e6f4; justify-content: flex-end; }
.rc-all .rc-n { color: #fff; }
.rc-all .rc-who { color: var(--cyan-light); font-weight: 500; margin-bottom: 22px; }
.rc-all .btn { align-self: flex-start; }
.wall { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
.wall-h { font-size: 14px; font-weight: 600; color: var(--ink-mute); margin-bottom: 16px; }
.wall-row { display: flex; flex-wrap: wrap; gap: 10px 36px; }
.wall-row li { font: 600 1.0625rem/1.3 var(--display); color: #5d6e79; letter-spacing: -0.005em; }

@media (max-width: 1080px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .results-head { grid-template-columns: 1fr; }
  .hero { padding-bottom: 56px; }
  .map-in { padding-bottom: 48px; }
}
@media (max-width: 600px) {
  .rgrid { grid-template-columns: 1fr; }
  .mlabel:not(.is-active) { opacity: 1 !important; }
  .mlabel { font-size: 12px; padding: 4px 6px; }
  .wall-row { gap: 8px 22px; }
  .wall-row li { font-size: 0.9375rem; }
}
.rc-all .btn { flex: 0 0 auto; height: auto; min-height: 48px; }

/* ---------- round 2c: critic fixes ---------- */
/* 1. hero opens on the drawn world */
.hero { padding-top: 48px; padding-bottom: 64px; background: radial-gradient(70% 90% at 78% 55%, var(--mist) 0, #fff 70%); }
.hero-top { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 24px 48px; }
.hero-side h1 { max-width: 11ch; font-size: clamp(2.6rem, 4.6vw, 4.25rem); margin-bottom: 22px; }
.hero-map { margin: 0 -24px 0 0; position: relative; pointer-events: none; }
.hero-map .world { width: 100%; height: auto; overflow: visible; }
.hero-map .mlabel { font-size: 12px; padding: 6px 9px; }
.hero-map .mlabel[data-zone="mfg"] { color: #fff; background: var(--navy); box-shadow: none; }

/* 3. why drawings: labels sized for the card */
.why-card .vig .dl { font-size: 13px; }

/* 4. MACH screen, large and framed like Conductor */
.browser-mach { background: var(--mach); box-shadow: 0 0 0 1px #2a3138, 0 30px 60px -30px rgba(20,24,29,.6); }
.browser-mach .browser-bar { background: #20262d; border-bottom-color: #2a3138; }
.browser-mach .browser-bar i { background: #3b444d; }
.door-name-m { color: var(--mach) !important; font-size: 1.75rem; letter-spacing: .04em; margin-bottom: 10px; }
.place:not(.place-alt) .screen-row { margin-top: 48px; }
.place-body > .go { margin-top: 20px; }

/* 5. no white gap before the map */
.places { background: linear-gradient(180deg, var(--mist) 0, var(--mist) 100%); padding-top: 72px; }
.places-head { margin-bottom: 0; }
.map-in { background: none; padding-top: 0; margin-top: 28px; }
.places .place { background: #fff; }
.places .place-alt { background: var(--slate); }

/* 7. tonal panel behind the expertise cards */
.how-grid { background: #e4f1f7; padding: 20px; border-radius: var(--r-lg); }
.svc-creds { background: #fff; }

@media (max-width: 860px) {
  .hero-top { grid-template-columns: 1fr; }
  .hero-side h1 { max-width: none; }
  .hero-map { margin: 8px calc(-1 * var(--gutter) + 6px) 0; }
  .how-grid { padding: 12px; }
}
@media (max-width: 600px) {
  .hero-map .mlabel { font-size: 12px; padding: 4px 6px; }
  /* 2. phone map: keep labels off pins, pins inside the edge */
  .map .mlabel[data-zone="mfg"] { --ty: -165%; }
  .map .mlabel[data-zone="psn"] { --tx: -78%; --ty: -40%; }
  .map .mlabel[data-zone="csd"] { --tx: -60%; --ty: 70%; }
  .map .pin[data-case="6"] { margin-left: -10px; }
  .map .pin { width: 22px; height: 22px; font-size: 12px; border-width: 1.5px; }
  .map { margin-inline: calc(-1 * var(--gutter) + 12px); }
}

/* MACH: a drawn board at every width (the photo was too soft) */
.mach-board { display: block; padding: 20px 22px 22px; background: var(--mach); color: #c9d3dc; font: 500 13px/1.3 var(--sans); }
.mb-cap { display: block; font-size: 13px; color: var(--ink-mute); margin: -4px 0 10px; }
.mb-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #2a3138; }
.mb-head b { color: var(--cyan); font: 700 16px/1 var(--display); letter-spacing: .06em; }
.mb-head span { color: #fff; font-weight: 600; }
.mb-head em { margin-left: auto; font-style: normal; color: #8b98a4; font-size: 12px; }
.mb-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; }
.mb-rows li { display: grid; grid-template-columns: 58px 96px 1fr; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid #2a3138; }
.mb-m { color: #fff; font-weight: 600; white-space: nowrap; }
.mb-s { justify-self: start; padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.s-run { background: rgba(46,204,113,.16); color: #5be08f; }
.s-chg { background: rgba(0,174,230,.18); color: #59cdf3; }
.s-idle { background: #2a3138; color: #9aa6b1; }
.s-down { background: rgba(240,82,82,.18); color: #ff8080; }
.mb-t { position: relative; height: 14px; background: #1d2329; border-radius: 3px; }
.mb-t i { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; background: #3f8fd9; }
.mb-t i.chg { background: repeating-linear-gradient(135deg, #59cdf3 0 3px, transparent 3px 6px); }
.mb-t i.idle { background: #3b444d; }
.mb-t i.down { background: repeating-linear-gradient(135deg, #ff8080 0 3px, transparent 3px 6px); }
.mb-side { display: grid; gap: 10px; align-content: start; padding-top: 12px; }
.mb-job, .mb-sum { padding: 12px; border-radius: 8px; background: #1d2329; }
.mb-jt { color: #fff; font-weight: 600; margin-bottom: 10px; }
.mb-pa { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 8px; margin-top: 6px; color: #9aa6b1; font-size: 12px; }
.mb-bar { position: relative; height: 10px; background: #2a3138; border-radius: 3px; }
.mb-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.mb-bar i.plan { background: #6b7a87; }
.mb-bar i.act { background: #f0a43a; }
.mb-bar i.ok { background: #5be08f; }
.mb-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; }
.mb-sum ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12px; color: #c9d3dc; }
.mb-sum li { display: flex; align-items: center; gap: 7px; }
.mb-sum i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.d-run { background: #5be08f; } .d-chg { background: #59cdf3; } .d-idle { background: #6b7a87; } .d-down { background: #ff8080; } .d-ok { background: #3f8fd9; } .d-late { background: #f0a43a; }
@media (max-width: 600px) {
  .mach-board { padding: 16px 16px 18px; }
  .mb-body { grid-template-columns: 1fr; gap: 0; }
  .mb-wide { display: none !important; }
  .mb-rows li { grid-template-columns: 54px 92px 1fr; }
  .mb-side { padding-top: 14px; }
}

/* ---------- Drawing: one isometric world ---------- */
.iso polygon, .iso path, .iso line, .iso ellipse, .iso circle { stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.iso .ft, .iso .fl, .iso .fr { stroke: #102d7b; stroke-width: .7; }
.iso .ft { fill: #fff; } .iso .fl { fill: #eef4f8; } .iso .fr { fill: #d6e4ee; }
.iso .base.ft { fill: #e6eef3; } .iso .base.fl { fill: #c9d6df; } .iso .base.fr { fill: #b2c3cf; }
.iso .base { stroke: #102d7b; stroke-width: .8; }
.iso .road { fill: #d3dde4; stroke: none; }
.iso .lane { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 10 9; }
.iso .zebra { fill: #fff; stroke: none; }
.iso .island { fill: #fff; stroke: #102d7b; stroke-width: .7; }
.iso .lot.ft { fill: #f7fbfd; } .iso .lot.fl { fill: #e4ecf1; } .iso .lot.fr { fill: #cfdce5; }
.iso .lot { stroke-width: .5; }
.iso .zfloor { fill: transparent; stroke: none; transition: fill .25s ease; }
.iso .shadow { fill: rgba(16,45,123,.08); stroke: none; }
.iso .trunk { stroke: #2c3e47; stroke-width: 1.3; }
.iso .canopy { fill: #cfeaf3; stroke: #102d7b; stroke-width: .7; }
.iso .canopy-hi { fill: #ecf8fc; stroke: none; }
.iso .slab.ft { fill: #f9fcfd; } .iso .slab.fl, .iso .slab.fr { fill: #dde3e9; }
.iso .wall.ft { fill: #c9d6df; } .iso .wall.fl { fill: #f4f8fa; } .iso .wall.fr { fill: #eaf1f5; }
.iso .win { fill: #b3e8f7; stroke: #102d7b; stroke-width: .5; }
.iso .door { fill: #e3ebf0; stroke: #102d7b; stroke-width: .6; }
.iso .slat { stroke: #9fb3c0; stroke-width: .5; }
.iso .screen { fill: #102d7b; stroke: #102d7b; stroke-width: .6; }
.iso .scr-hd { fill: #027aa2; stroke: none; }
.iso .bar-run { fill: #00aee6; stroke: none; }
.iso .bar-micro { fill: #fff; stroke: none; }
.iso .aisle { fill: none; stroke: #0391bf; stroke-width: .9; stroke-dasharray: 5 4; opacity: .7; }
.iso .upright.ft, .iso .upright.fl, .iso .upright.fr { fill: #102d7b; stroke-width: .4; }
.iso .beam.fl { fill: #0391bf; } .iso .beam.fr { fill: #027aa2; } .iso .beam.ft { fill: #b3e8f7; }
.iso .load.ft { fill: #fff; } .iso .load.fl { fill: #f1eee8; } .iso .load.fr { fill: #dcd7cc; }
.iso .pallet.ft, .iso .pallet.fl, .iso .pallet.fr { fill: #c9d6df; stroke-width: .5; }
.iso .machine.ft { fill: #fff; } .iso .machine.fl { fill: #e8f0f5; } .iso .machine.fr { fill: #cddbe5; }
.iso .cab.ft { fill: #eef3f6; } .iso .cab.fl { fill: #dde6ec; } .iso .cab.fr { fill: #c4d3dd; }
.iso .ram.fl { fill: #a9bcc8; } .iso .ram.fr { fill: #93a9b6; } .iso .ram.ft { fill: #c9d6df; }
.iso .coil.fl { fill: #dfe7ec; stroke: #102d7b; stroke-width: .7; } .iso .coil.ft { fill: #eef3f6; stroke: #102d7b; stroke-width: .7; }
.iso .ink-hole { fill: #2c3e47; stroke: #102d7b; stroke-width: .5; }
.iso .conv.ft { fill: #f4f8fa; } .iso .conv.fl { fill: #c9d6df; } .iso .conv.fr { fill: #b3c4cf; }
.iso .roller { stroke: #9fb3c0; stroke-width: .6; }
.iso .glass-d { fill: #2c3e47; stroke: #102d7b; stroke-width: .4; opacity: .8; }
.iso .hmi { fill: #102d7b; stroke: #102d7b; stroke-width: .4; }
.iso .post, .iso .pole { stroke: #102d7b; stroke-width: .9; }
.iso .pole { stroke-width: 1.2; }
.iso .lamp-off.ft { fill: #fff; } .iso .lamp-off.fl, .iso .lamp-off.fr { fill: #e3e9ed; }
.iso .lamp { stroke-width: .5; }
.iso .s-run .lamp.ft { fill: #6fd3f2; } .iso .s-run .lamp.fl { fill: #0391bf; } .iso .s-run .lamp.fr { fill: #027aa2; }
.iso .s-micro .lamp.ft { fill: #fff; } .iso .s-micro .lamp.fl { fill: #b3e8f7; } .iso .s-micro .lamp.fr { fill: #00aee6; }
.iso .s-idle .lamp.ft { fill: #dde3e9; } .iso .s-idle .lamp.fl { fill: #c4cdd3; } .iso .s-idle .lamp.fr { fill: #aab5bc; }
.iso .fork-body.ft { fill: #fff; } .iso .fork-body.fl { fill: #0391bf; } .iso .fork-body.fr { fill: #027aa2; }
.iso .bench.ft { fill: #fff; } .iso .bench.fl { fill: #e8f0f5; } .iso .bench.fr { fill: #cddbe5; }
.iso .granite.ft { fill: #e9edf0; } .iso .granite.fl { fill: #b9c4cb; } .iso .granite.fr { fill: #9eabb4; }
.iso .gauge.ft { fill: #b3e8f7; } .iso .gauge.fl { fill: #0391bf; } .iso .gauge.fr { fill: #027aa2; }
.iso .glass { fill: rgba(179,232,247,.22); stroke: #0391bf; stroke-width: .7; }
.iso .trailer.ft { fill: #fff; } .iso .trailer.fl { fill: #f4f8fa; } .iso .trailer.fr { fill: #dde6ec; }
.iso .seam { stroke: #c9d6df; stroke-width: .6; }
.iso .cabin.ft { fill: #fff; } .iso .cabin.fl { fill: #0391bf; } .iso .cabin.fr { fill: #027aa2; }
.iso .tyre.fl, .iso .tyre.ft { fill: #2c3e47; stroke: #21242c; }
/* agency */
.iso .stone.ft { fill: #f4f6f8; } .iso .stone.fl { fill: #dfe5ea; } .iso .stone.fr { fill: #c9d3da; }
.iso .civic.ft { fill: #fff; } .iso .civic.fl { fill: #f2f6f9; } .iso .civic.fr { fill: #dbe6ee; }
.iso .roof { fill: #c9d6df; } .iso .roof-b { fill: #e3ebf0; }
.iso .drum.fl { fill: #eef3f6; stroke: #102d7b; stroke-width: .7; } .iso .drum.ft { fill: #dbe6ee; stroke: #102d7b; stroke-width: .7; }
.iso .dome { fill: #b3e8f7; stroke: #102d7b; stroke-width: .7; }
.iso .col.ft { fill: #fff; } .iso .col.fl { fill: #fbfcfd; } .iso .col.fr { fill: #e6edf2; }
.iso .ent.ft { fill: #f4f6f8; } .iso .ent.fl { fill: #eef3f6; } .iso .ent.fr { fill: #dfe7ec; }
.iso .ped { fill: #eaf1f5; }
.iso .step.ft { fill: #fff; } .iso .step.fl { fill: #eef3f6; } .iso .step.fr { fill: #dfe7ec; }
.iso .step { stroke-width: .5; }
.iso .annex.ft { fill: #fff; } .iso .annex.fl { fill: #eef4f8; } .iso .annex.fr { fill: #d6e4ee; }
.iso .park { fill: #dfe7ec; stroke: none; }
.iso .stripe { fill: none; stroke: #fff; stroke-width: 1.2; }
.iso .car.ft { fill: #fff; } .iso .car.fl { fill: #e8eef2; } .iso .car.fr { fill: #c9d6df; }
.iso .car-b.fl { fill: #0391bf; } .iso .car-b.fr { fill: #027aa2; } .iso .car-b.ft { fill: #b3e8f7; }
.iso .car-c.fl { fill: #4f5f69; } .iso .car-c.fr { fill: #2c3e47; } .iso .car-c.ft { fill: #8a9aa4; }
.iso .car { stroke-width: .5; }
.iso .cabin-c.ft { fill: #b3e8f7; }
.iso .flag { fill: #00aee6; stroke: #102d7b; stroke-width: .6; }
/* office */
.iso .plaza { fill: #eef3f6; stroke: none; }
.iso .tower.ft { fill: #e9f1f5; } .iso .tower.fl { fill: #cdeaf5; } .iso .tower.fr { fill: #9fcfe2; }
.iso .mull { fill: none; stroke: #102d7b; stroke-width: .5; opacity: .55; }
.iso .mull-v { fill: none; stroke: #fff; stroke-width: .7; opacity: .7; }
.iso .canopy-b.ft { fill: #102d7b; } .iso .canopy-b.fl { fill: #102d7b; } .iso .canopy-b.fr { fill: #0b2361; }
.iso .board { fill: #fff; stroke: #102d7b; stroke-width: .6; }
.iso .note { fill: #b3e8f7; stroke: none; } .iso .note-b { fill: #00aee6; }
.iso .desk.ft { fill: #fff; } .iso .desk.fl { fill: #e8f0f5; } .iso .desk.fr { fill: #cddbe5; }
.iso .monitor.ft { fill: #2c3e47; } .iso .monitor.fl { fill: #102d7b; } .iso .monitor.fr { fill: #102d7b; }
.iso .chair.ft { fill: #b3e8f7; } .iso .chair.fl { fill: #0391bf; } .iso .chair.fr { fill: #027aa2; }
.iso .chair { stroke-width: .4; }
/* jobsite */
.iso .dirt { fill: #ece9e2; stroke: none; }
.iso .pit { fill: #dcd7cc; stroke: #9fb3c0; stroke-width: .6; stroke-dasharray: 3 3; }
.iso .pile { fill: #dcd7cc; stroke: #102d7b; stroke-width: .6; }
.iso .deck.ft { fill: #f4f6f8; } .iso .deck.fl, .iso .deck.fr { fill: #c9d3da; }
.iso .steel.ft, .iso .steel.fl, .iso .steel.fr { stroke-width: .4; }
.iso .steel.ft { fill: #4f6b9f; } .iso .steel.fl { fill: #2a4a8f; } .iso .steel.fr { fill: #102d7b; }
.iso .beam-s.ft { fill: #6f88b6; } .iso .beam-s.fl { fill: #2a4a8f; } .iso .beam-s.fr { fill: #102d7b; }
.iso .beam-s { stroke-width: .35; }
.iso .lattice { stroke: #0391bf; stroke-width: .7; }
.iso .mast { stroke: #027aa2; stroke-width: 1.3; }
.iso .jib.ft { fill: #b3e8f7; } .iso .jib.fl { fill: #00aee6; } .iso .jib.fr { fill: #0391bf; }
.iso .cab-c.ft { fill: #fff; } .iso .cab-c.fl { fill: #00aee6; } .iso .cab-c.fr { fill: #0391bf; }
.iso .weight.ft { fill: #8a9aa4; } .iso .weight.fl { fill: #4f5f69; } .iso .weight.fr { fill: #2c3e47; }
.iso .tie { stroke: #027aa2; stroke-width: .6; }
.iso .cable { stroke: #2c3e47; stroke-width: .7; }
.iso .trolley.ft, .iso .trolley.fl, .iso .trolley.fr { fill: #2c3e47; stroke-width: .4; }
.iso .beam-load.ft { fill: #8aa0ad; } .iso .beam-load.fl { fill: #4f6b9f; } .iso .beam-load.fr { fill: #2a4a8f; }
.iso .beam-load { stroke-width: .4; }
.iso .site.ft { fill: #fff; } .iso .site.fl { fill: #f4f8fa; } .iso .site.fr { fill: #dde6ec; }
.iso .blocks.fl, .iso .blocks.fr { fill: #8aa0ad; }
.iso .tyre-b.ft, .iso .tyre-b.fl, .iso .tyre-b.fr { fill: #2c3e47; stroke: #21242c; }
.iso .exc.ft { fill: #b3e8f7; } .iso .exc.fl { fill: #0391bf; } .iso .exc.fr { fill: #027aa2; }
.iso .exc-cab.ft { fill: #fff; } .iso .exc-cab.fl { fill: #2c3e47; } .iso .exc-cab.fr { fill: #21242c; }
.iso .arm { fill: none; stroke: #027aa2; stroke-width: 4; }
.iso .fence { fill: none; stroke: #8aa0ad; stroke-width: .8; }
.iso .fpost { stroke: #8aa0ad; stroke-width: .8; }
.iso .cone { fill: #0391bf; stroke: #102d7b; stroke-width: .5; }
/* the route */
.iso .route { fill: none; stroke: #00aee6; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.iso .route-under { fill: none; stroke: #fff; stroke-width: 7; opacity: .9; }
.iso .rnode .ring { fill: rgba(0,174,230,.18); stroke: #00aee6; stroke-width: 1.2; }
.iso .rnode .dot { fill: #102d7b; stroke: #fff; stroke-width: 1.2; }
/* locator */
.iso .m.ft { fill: #fff; } .iso .m.fl { fill: #e4ecf1; } .iso .m.fr { fill: #cfdce5; }
.iso .mz.on .m.ft { fill: #00aee6; } .iso .mz.on .m.fl { fill: #027aa2; } .iso .mz.on .m.fr { fill: #102d7b; }
.iso .mz.on .lot.ft { fill: #b3e8f7; }
.iso .p.ft { fill: #2c3e47; } .iso .p.fl { fill: #102d7b; } .iso .p.fr { fill: #0b2361; }
.iso .p-b.ft { fill: #00aee6; } .iso .p-b.fl { fill: #0391bf; } .iso .p-b.fr { fill: #027aa2; }
.iso .p { stroke-width: .3; }
.iso .head { fill: #f1eee8; stroke: #102d7b; stroke-width: .6; }
.iso .head.hat { fill: #00aee6; }
.iso .carrier.ft { fill: #fff; } .iso .carrier.fl { fill: #e8f0f5; } .iso .carrier.fr { fill: #cddbe5; }
.iso .boom-o { fill: none; stroke: #102d7b; stroke-width: 6.5; }
.iso .boom { fill: none; stroke: #00aee6; stroke-width: 4.4; }
.iso .isle.ft { fill: #fff; } .iso .isle.fl { fill: #e4ecf1; } .iso .isle.fr { fill: #cfdce5; }
.iso .slot { fill: #102d7b; stroke: none; }
.iso .scr-lite { fill: #b3e8f7; stroke: none; }
.iso .sheet { fill: #fff; stroke: #102d7b; stroke-width: .7; }
.iso .grid-l { fill: none; stroke: #9fb3c0; stroke-width: .5; }
.iso .cell-hi { fill: #b3e8f7; stroke: none; }
.iso .link-x { fill: none; stroke: #4f5f69; stroke-width: 1.2; stroke-dasharray: 5 4; }
.iso .gapm circle { fill: #fff; stroke: #4f5f69; stroke-width: 1; }
.iso .gapm path { stroke: #4f5f69; stroke-width: 1.3; fill: none; }
.iso .paper.ft { fill: #fff; } .iso .paper.fl { fill: #f1eee8; } .iso .paper.fr { fill: #dcd7cc; }
.iso .paper { stroke-width: .4; }
.iso .env { fill: none; stroke: #102d7b; stroke-width: .7; }
.iso .ghost { fill: none; stroke: #4f5f69; stroke-width: 1; stroke-dasharray: 2.5 2; }
.iso .trail { fill: none; stroke: #9fb3c0; stroke-width: 1; stroke-dasharray: 2 4; }
.iso .org-l { fill: none; stroke: #102d7b; stroke-width: 1; }
.iso .orgbox.ft { fill: #fff; } .iso .orgbox.fl { fill: #e4ecf1; } .iso .orgbox.fr { fill: #cfdce5; }
.iso .work { fill: none; stroke: #00aee6; stroke-width: 2.4; stroke-dasharray: 6 4; }
.iso .work-n { fill: #00aee6; stroke: #102d7b; stroke-width: .8; }
.iso .dl { font: 600 13px/1 Montserrat, sans-serif; fill: #2c3e47; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.iso.model .dl { font-size: 11px; stroke: none; }
.iso .dl-c { fill: #027aa2; }
.iso .dl-w { fill: #fff; stroke: none; }
.iso .assoc { fill: none; stroke: #00aee6; stroke-width: 1.4; }
.iso .ent-b.ft { fill: #1c3d93; } .iso .ent-b.fl { fill: #0b2361; } .iso .ent-b.fr { fill: #081a4a; }
.iso .ent-b { stroke: #b3e8f7; stroke-width: .6; }
.iso .attr { fill: none; stroke: #b3e8f7; stroke-width: 1; opacity: .7; }
.iso .doorway { fill: #dfe7ec; stroke: #102d7b; stroke-width: .6; }