:root {
  --navy: #13204a;
  --navy-deep: #0d1736;
  --blue: #2346d8;
  --blue-light: #5b7cff;
  --gray: #eef1f5;
  --gold: #e3b341;
  --text: #13204a;
  --muted: #4b5675;
  --on-dark: #f2f4f8;
  --on-dark-muted: #a9b3cc;
  --radius: 10px;
  --wrap: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--blue); }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(19, 32, 74, 0.96);
  backdrop-filter: blur(6px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark);
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.3px;
}
.brand img, .brand .live-port { width: 30px; height: 30px; }
.brand em { font-style: normal; color: var(--blue-light); }
.site-nav { display: flex; gap: 20px; }
.site-nav a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: 15px;
}
.site-nav a:hover { color: #fff; }

/* hero */
.hero {
  background: var(--navy) url("../img/stars.svg") center top / cover no-repeat;
  color: var(--on-dark);
  padding: 72px 0 80px;
  text-align: center;
}
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }
.hero-sat { position: absolute; top: 28px; left: 6%; width: 110px; height: auto; }
.contact { position: relative; overflow: hidden; }
.contact .wrap { position: relative; z-index: 1; }
.contact-dish { position: absolute; bottom: 22px; right: 7%; width: 58px; height: auto; }
@media (max-width: 640px) {
  .hero-sat { width: 72px; top: 14px; left: 3%; }
  .contact-dish { width: 40px; bottom: 12px; right: 4%; }
}
.hero-logo { width: min(420px, 90%); margin: 0 auto 32px; }
.hero h1 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 0 auto 16px;
  max-width: 18em;
}
.hero p {
  color: var(--on-dark-muted);
  font-size: clamp(16px, 2.2vw, 19px);
  max-width: 36em;
  margin: 0 auto 32px;
}
.hero p.hero-trust { font-size: 14px; letter-spacing: 0.5px; margin: 24px auto 0; }

.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid transparent;
}
.btn-primary { background: var(--blue-light); color: #fff; }
.btn-primary:hover { background: #4a6bf0; }
.btn-ghost { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-deep); }
.btn-outline { border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--gray); }

/* sections */
section { padding: 72px 0; }
section.alt { background: var(--gray); }
.section-head { max-width: 40em; margin-bottom: 36px; }
.section-head h2 {
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.section-head p { color: var(--muted); margin: 0; font-size: 17px; }
.eyebrow {
  display: block;
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* services */
.grid { display: grid; gap: 20px; }
.services { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .services .card:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .services { grid-template-columns: 1fr; }
  .services .card:last-child:nth-child(odd) { grid-column: auto; }
}
.card {
  position: relative;
  background: linear-gradient(165deg, #ffffff 0%, #e9eeff 100%);
  border: 1px solid #d3dbf3;
  border-top: 3px solid var(--blue-light);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 500; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    border-color: var(--blue-light);
    box-shadow: 0 0 0 1px var(--blue-light), 0 12px 30px rgba(35, 70, 216, 0.2);
  }
}
#services { background: linear-gradient(180deg, #e9edf5 0%, #dfe5f1 100%); }
#how { background: #e2e7f1; }

/* steps */
.steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.step { padding-top: 8px; border-top: 3px solid var(--blue-light); }
.step h3 { font-size: 18px; font-weight: 500; margin: 12px 0 6px; }
.step h3::before {
  counter-increment: step;
  content: counter(step) ". ";
  color: var(--blue);
}
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* gallery */
section.dark { background: var(--navy); color: var(--on-dark); }
section.dark .eyebrow { color: var(--blue-light); }
section.dark .section-head p { color: var(--on-dark-muted); }
.gallery { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: filter 0.4s ease;
}
.shot {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.work-item.play[data-fx="exterior-dusk"] img { filter: grayscale(1) sepia(1) hue-rotate(55deg) saturate(3) brightness(1.35) contrast(1.15); }
.gallery figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; transition: color 0.25s ease; }
section.dark .gallery figcaption { color: var(--on-dark-muted); }
@media (hover: hover) {
  .work-item:hover .shot {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px var(--blue-light), 0 16px 36px rgba(0, 0, 0, 0.45);
  }
  .work-item:hover figcaption { color: #fff; }
}

/* area + about */
.two-col { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.towns { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 0; list-style: none; }
.towns li {
  background: #fff;
  border: 1px solid #dde2ec;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 15px;
}
.about p { color: var(--muted); font-size: 17px; }

/* home teaser + inner page hero */
.teaser { padding: 48px 0; }
.teaser .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.teaser p { margin: 0; font-size: 18px; color: var(--muted); max-width: 40em; }
.page-hero { padding: 64px 0 56px; }
.page-hero h1 { margin-bottom: 10px; }
.page-hero p { margin-bottom: 0; }

/* faq */
.faq { max-width: 46em; }
.faq details { border-bottom: 1px solid #dde2ec; padding: 16px 0; }
.faq summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); margin: 10px 0 0; }

/* contact */
.contact {
  background: var(--navy) url("../img/stars.svg") center / cover no-repeat;
  color: var(--on-dark);
  text-align: center;
}
.contact h2 { font-weight: 500; font-size: clamp(26px, 3.6vw, 34px); margin: 0 0 10px; }
.contact p { color: var(--on-dark-muted); margin: 0 auto 28px; max-width: 32em; }

/* footer */
.site-footer {
  background: var(--navy-deep);
  color: var(--on-dark-muted);
  font-size: 14px;
  padding: 24px 0;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.site-footer a { color: var(--on-dark-muted); }

/* support page */
.support-hero { padding: 56px 0 64px; }
.support-buttons { display: grid; gap: 14px; max-width: 420px; margin: 0 auto; }
.support-buttons .btn { justify-content: center; font-size: 18px; padding: 16px 22px; }
.note { width: min(36em, 100% - 32px); margin: 0 auto; color: var(--muted); }
.two-col .note { width: auto; }
.note h2 { font-size: 22px; font-weight: 500; color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .card, .shot { transition: none; }
  .card:hover, .work-item:hover .shot { transform: none; }
}

@media (max-width: 640px) {
  .site-nav { display: none; }
  section { padding: 56px 0; }
  .hero { padding: 56px 0 64px; }
}

/* rack down the left side of the home page. Gear is inline SVG from
   source/build_rack.py, effects are in assets/js/rack.js */
main > section { position: relative; }
main > section .wrap, main > section > .note { position: relative; z-index: 1; }
.rack {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(-96px, calc((100% - 1100px) / 2 - 176px));
  width: 144px;
  overflow: hidden;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 6px, #0b1430 6px 10px, transparent 10px 16px) 4px 0 / 4px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 6px, #0b1430 6px 10px, transparent 10px 16px) 120px 0 / 4px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 110px, #0d1736 110px 117px, transparent 117px 150px) 128px 0 / 16px 100% no-repeat,
    linear-gradient(to right, #16224d 0 2px, #5b7cff 2px 5px, #e3b341 5px 8px, #c9d2ea 8px 11px, #2346d8 11px 14px, #16224d 14px) 128px 0 / 16px 100% no-repeat,
    url("../img/rack/fill.svg") 0 0 / 144px auto repeat-y,
    linear-gradient(to right, #26366e 0 12px, #0b1430 12px 116px, #26366e 116px 128px) 0 0 / 128px 100% no-repeat;
}
.rack-gear { display: block; position: relative; }
.rack[data-rack="contact"] .rack-gear { position: absolute; bottom: 0; }
@media (min-width: 1460px) {
  .hero-sat { left: calc((100% - 1100px) / 2 - 10px); }
}
@media (max-width: 1459px) {
  .rack { left: max(-56px, calc((100% - 1100px) / 2 - 176px)); }
  main > section:has(> .rack) .wrap,
  main > section:has(> .rack) > .note {
    width: auto;
    max-width: 1100px;
    margin-left: max(102px, calc((100% - 1100px) / 2));
    margin-right: max(16px, calc((100% - 1100px) / 2));
  }
  main > section:has(> .rack) > .note { max-width: 36em; }
  .hero-sat { left: auto; right: 5%; }
}
/* phones: a smaller rack so more of it fits on screen */
@media (max-width: 640px) {
  .rack { left: -30px; bottom: auto; height: calc(100% / 0.72); transform: scale(0.72); transform-origin: 0 0; }
  main > section:has(> .rack) .wrap,
  main > section:has(> .rack) > .note { margin-left: 82px; margin-right: 14px; }
}

/* lights stay dim until the section scrolls into view */
.rack .led { opacity: 0.15; transition: opacity 0.4s ease; }
.rack.on .led { opacity: 1; animation: led 1.6s steps(2, jump-none) var(--o, 0s) infinite; }
.rack.on .led.f { animation-duration: 0.7s; }
.rack.on .led.p { animation: none; }
@keyframes led { to { opacity: 0.2; } }
.rack .glow { opacity: 0; transition: opacity 0.2s ease; }
.rack .unit.lit .glow { opacity: 1; }
.rack .unit.lit .led { animation-duration: 0.22s; }
.rack .lbl { transition: fill 0.2s ease; }
.rack .dl { opacity: 0; }
.rack .dead .fc { transition: fill 0.3s ease, stroke 0.3s ease; }
.rack .dead.awake .fc { fill: #1c2b5e; stroke: #5b7cff; }
.rack .dead.awake .dl { opacity: 1; animation: led 0.7s steps(2, jump-none) var(--o, 0s) infinite; }
.rack .jump { fill: none; stroke-width: 1.8; stroke-linecap: round; }

#how .step { transition: border-color 0.2s ease; }
#how .step:hover { border-top-color: var(--gold); }
#how:has(.step:nth-child(1):hover) .ru-1 .glow,
#how:has(.step:nth-child(2):hover) .ru-2 .glow,
#how:has(.step:nth-child(3):hover) .ru-3 .glow,
#how:has(.step:nth-child(4):hover) .ru-4 .glow { opacity: 1; }
#how:has(.step:nth-child(1):hover) .ru-1 .lbl,
#how:has(.step:nth-child(2):hover) .ru-2 .lbl,
#how:has(.step:nth-child(3):hover) .ru-3 .lbl,
#how:has(.step:nth-child(4):hover) .ru-4 .lbl { fill: var(--gold); }

/* cable runs from the rack out to devices, drawn by rack.js on wide screens */
.runs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.runs .cable { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.runs .dev-led { fill: #3a4470; transition: fill 0.3s ease 0.9s, filter 0.3s ease 0.9s; }
.runs.on .dev-led { fill: #3ddc84; filter: drop-shadow(0 0 3px #3ddc84); }
.runs .plug-led { fill: #3a4470; transition: fill 0.2s ease; }
.runs .plug-led.up { fill: #3ddc84; filter: drop-shadow(0 0 3px #3ddc84); }
.card.up { border-top-color: #3ddc84; }

@media (prefers-reduced-motion: reduce) {
  .rack.on .led { animation: none; }
  .runs .dev-led { transition: none; }
}

/* service card scenes, drawn by source/build_scenes.py. Steps start when the
   card gets .play (hover, or scrolled into view on touch screens) */
.scene { display: block; width: 100%; height: auto; margin: 0 0 16px; overflow: visible; }
.scene-bg { fill: #e3e9fa; }
.scene text { font: 600 9px "Helvetica Neue", Helvetica, Arial, sans-serif; }
.scene .lab { fill: #6b7698; font-weight: 500; }
.scene .lab.inv { fill: #fff; font-weight: 600; }
.scene .lab.dark { fill: var(--navy); font-weight: 600; }
.scene .lab.warn { fill: #c2410c; font-weight: 600; }
.scene .ok { fill: #15803d; font-size: 10px; font-weight: 700; }
.anim * { transform-box: fill-box; transform-origin: center; }
.anim .a-in, .anim .a-fly, .anim .a-drop, .anim .a-pkt, .anim .a-wave, .anim .a-slide, .anim .a-dark, .anim .a-ripple { opacity: 0; }
.anim .a-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .a-door { transform-origin: right center; }
.anim .a-lift { transform-origin: center bottom; }
.card, .work-item { --lead: 0.05s; }
.wired { --lead: 0.4s; }
.play .anim [class*="a-"] { animation-delay: calc(var(--t, 0s) + var(--lead)); animation-fill-mode: forwards; animation-timing-function: ease; }
.play .anim .a-in { animation-name: s-in; animation-duration: 0.35s; }
.play .anim .a-out { animation-name: s-out; animation-duration: 0.3s; }
.play .anim .a-draw { animation-name: s-draw; animation-duration: var(--dur, 0.6s); }
.play .anim .a-light { animation-name: s-light; animation-duration: 0.3s; }
.play .anim .a-lightS { animation-name: s-light-stroke; animation-duration: 0.3s; }
.play .anim .a-fly { animation-name: s-fly; animation-duration: 0.8s; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
.play .anim .a-drop { animation-name: s-drop; animation-duration: 0.45s; animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
.play .anim .a-move { animation-name: s-move; animation-duration: 0.6s; }
.play .anim .a-door { animation-name: s-door; animation-duration: 0.4s; }
.play .anim .a-lift { animation-name: s-lift; animation-duration: 0.3s; }
.play .anim .a-blip { animation-name: s-blip; animation-duration: 1.6s; }
.play .anim .a-walk { animation-name: s-walk; animation-duration: 2.4s; animation-timing-function: linear; }
.play .anim .a-scan { animation-name: s-scan; animation-duration: 1.5s; animation-timing-function: ease-in-out; }
.play .anim .a-wave { animation-name: s-wave; animation-duration: 1.4s; animation-iteration-count: infinite; animation-fill-mode: none; }
.play .anim .a-pkt { animation-name: s-pkt; animation-duration: 1.2s; animation-iteration-count: infinite; animation-fill-mode: none; }
.play .anim .a-blink { animation-name: s-blink; animation-duration: 0.9s; animation-iteration-count: infinite; }
.play .anim .a-ring { animation-name: s-ring; animation-duration: 0.25s; animation-iteration-count: 4; animation-fill-mode: none; }
.play .anim .a-signal { animation: s-signal 0.6s linear infinite; }
.play .anim .a-slide { animation-name: s-slide; animation-duration: 0.35s; }
.play .anim .a-dark { animation-name: s-dark; animation-duration: 0.5s; }
.play .anim .a-lamp { animation-name: s-out; animation-duration: 0.2s; }
.play .anim .a-ripple { animation-name: s-ripple; animation-duration: 1.4s; animation-iteration-count: infinite; animation-fill-mode: none; animation-timing-function: ease-out; }
@keyframes s-slide { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes s-dark { to { opacity: 0.32; } }
@keyframes s-ripple { from { opacity: 0.9; transform: scale(0.2); } to { opacity: 0; transform: scale(1.7); } }
@keyframes s-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes s-out { to { opacity: 0; } }
@keyframes s-draw { to { stroke-dashoffset: 0; } }
@keyframes s-light { to { fill: var(--on, #22c55e); } }
@keyframes s-light-stroke { to { stroke: var(--on, #5b7cff); } }
@keyframes s-fly { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)); } to { opacity: 1; transform: none; } }
@keyframes s-drop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes s-move { to { transform: translate(var(--mx, 0), var(--my, 0)); } }
@keyframes s-door { to { transform: scaleX(0.22); } }
@keyframes s-lift { to { transform: translate(-6px, -12px) rotate(-18deg); } }
@keyframes s-blip { 0% { fill: #e3b341; } 10%, 75% { fill: #c9cfdd; } 100% { fill: #e3b341; } }
@keyframes s-walk { 0% { transform: none; opacity: 1; } 40%, 62% { transform: translateX(var(--wx)); } 92% { transform: translateX(var(--wx2)); opacity: 1; } 100% { transform: translateX(var(--wx2)); opacity: 0; } }
@keyframes s-scan { 0% { transform: none; } 55% { transform: translateX(var(--mx)); } 75% { transform: translateX(calc(var(--mx) - 30px)); } 100% { transform: translateX(var(--mx2)); } }
@keyframes s-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s-pkt { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--mx, 0), var(--my, 0)); } }
@keyframes s-blink { 50% { opacity: 0.15; } }
@keyframes s-ring { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes s-signal { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) {
  .play .anim [class*="a-"] { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* little gear on the button cables, and the satellite over the contact banner */
.runs .pop { transform-box: fill-box; transform-origin: center; animation: r-pop 0.3s cubic-bezier(.3, 1.5, .5, 1) both; }
.runs .blink { animation: led 0.7s steps(2, jump-none) infinite; }
.runs .wave { opacity: 0; animation: s-wave 1.2s ease infinite; }
.runs .sig { animation: s-signal 0.6s linear infinite, r-fade 0.3s ease both; }
.runs .sat-fly { animation: r-sat 1.3s cubic-bezier(.2, .7, .3, 1) both; }
.btn { transition: box-shadow 0.2s ease; }
.btn.linked { box-shadow: 0 0 0 2px #3ddc84, 0 0 18px rgba(61, 220, 132, 0.45); }
@keyframes r-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes r-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes r-sat { from { opacity: 0; transform: translate(260px, -50px) rotate(20deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .runs .pop, .runs .sat-fly, .runs .sig, .runs .wave, .runs .blink { animation: none; opacity: 1; }
}

/* header quote button, shows on phones too */
.site-nav { margin-left: auto; }
.nav-cta {
  background: var(--blue-light);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-cta:hover { background: #4a6bf0; }
@media (max-width: 640px) { .nav-cta { margin-left: auto; } }

/* quote form */
.form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
@media (max-width: 860px) { .form-wrap { grid-template-columns: 1fr; } }
.quote-form { display: grid; gap: 18px; }
.quote-form label { display: grid; gap: 6px; font-weight: 500; font-size: 15px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.quote-form input, .quote-form select, .quote-form textarea {
  font: inherit;
  font-weight: 400;
  color: var(--text);
  background: #fff;
  border: 1px solid #c9d2ea;
  border-radius: 8px;
  padding: 11px 12px;
  width: 100%;
}
.quote-form textarea { resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(91, 124, 255, 0.25);
}
.quote-form fieldset { border: 0; padding: 0; margin: 0; }
.quote-form legend { font-weight: 500; font-size: 15px; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { display: block; font-weight: 400; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid #c9d2ea;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chips input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(91, 124, 255, 0.35); }
.hint { margin: -8px 0 0; font-size: 14px; color: var(--muted); }
.hp { position: absolute; left: -9999px; }
.quote-form .btn { justify-self: start; cursor: pointer; font-family: inherit; }
.quote-form .btn:disabled { opacity: 0.6; cursor: wait; }
.form-status { margin: 0; font-size: 15px; color: var(--muted); }
.form-status.bad { color: #b91c1c; }
.form-aside { width: auto; margin: 0; }
.form-aside h2 { margin-top: 0; }
.legal { padding-bottom: 8px; }
.legal h2 { margin: 28px 0 8px; }
.legal li { margin-bottom: 6px; }

/* the 13th service card gets the whole last row */
@media (min-width: 901px) {
  .services .card:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 380px) 1fr;
    column-gap: 32px;
    align-content: center;
  }
  .services .card:last-child:nth-child(3n + 1) .scene { grid-row: span 2; margin: 0; align-self: center; }
  .services .card:last-child:nth-child(3n + 1) h3 { align-self: end; }
}
.runs .ring { transform-box: fill-box; transform-origin: center; animation: s-ring 0.22s ease 0.3s 6; }
.step.up { border-top-color: #3ddc84; }

/* how it works scenes, smaller than the service cards */
.step-scene { margin: 4px 0 10px; }
.step { --lead: 0.05s; }

/* more animation steps */
.anim .a-grow { transform-origin: left center; transform: scaleX(0); }
.play .anim .a-grow { animation-name: s-grow; animation-duration: var(--dur, 0.8s); }
.play .anim .a-spin { animation-name: s-spin; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: none; }
.play .anim .a-sweep { animation-name: s-sweep; animation-duration: 2.2s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; animation-fill-mode: none; }
@keyframes s-grow { to { transform: scaleX(1); } }
@keyframes s-spin { to { transform: rotate(360deg); } }
@keyframes s-sweep { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* footer links get watched by a little camera */
.site-footer { position: relative; }
.site-footer .wrap { position: relative; z-index: 1; }
.cam-runs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.cam-runs .cone { fill: #e3b341; fill-opacity: 0.22; transform-box: fill-box; transform-origin: top center; animation: r-fade 0.3s ease both, s-sweep 1.6s ease-in-out 0.3s infinite alternate; }
.site-footer a { transition: color 0.2s ease; }
.site-footer a.watched { color: #fff; }

/* faq: a link light on each answer */
.faq summary { position: relative; }
.faq .link-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c9d2ea; margin-right: 10px; vertical-align: middle; transition: background 0.3s ease, box-shadow 0.3s ease; }
.faq details[open] .link-led { background: #3ddc84; box-shadow: 0 0 6px #3ddc84; }

/* quote form: fields light up as they get patched in */
.quote-form input, .quote-form select, .quote-form textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.quote-form .linked-field { border-color: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.25); }
.anim .a-enter { opacity: 0; }
.play .anim .a-enter { animation-name: s-enter; animation-duration: 1.1s; animation-timing-function: ease-out; }
@keyframes s-enter { from { opacity: 0; transform: translateX(calc(var(--wx) * -1)); } 20% { opacity: 1; } to { opacity: 1; transform: none; } }

/* about: headshot next to the heading */
.about-head { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.headshot { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--blue-light), 0 8px 20px rgba(19, 32, 74, 0.2); flex: none; }
@media (max-width: 480px) { .headshot { width: 88px; height: 88px; } }

/* the jack in the logo is a live port: link light steady, activity flickering.
   Hover it and a patch cable plugs in. */
.brand { position: relative; }
.brand .live-port { display: block; border-radius: 5px; }
.live-port .led-act { animation: port-act 1.7s steps(1) infinite; }
.live-port .led-link { animation: port-link 6s steps(1) infinite; }
.live-port .port-plug { transform: translateY(16px); opacity: 0; transition: transform 0.25s ease, opacity 0.2s ease; }
.brand:hover .port-plug, .hero-logo:hover .port-plug { transform: none; opacity: 1; }
.brand:hover .led-link, .hero-logo:hover .led-link { animation: port-up 0.9s steps(1) 1 both; }
.brand:hover .led-act, .hero-logo:hover .led-act { animation-duration: 0.3s; }
.brand-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  white-space: nowrap;
  font: 500 12px/1 Menlo, Consolas, monospace;
  color: #3ddc84;
  background: var(--navy-deep);
  border: 1px solid #33478f;
  border-radius: 6px;
  padding: 6px 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
  pointer-events: none;
}
.brand:hover .brand-tip { opacity: 1; transform: none; transition-delay: 0.9s; }
@keyframes port-act { 0%, 22%, 48%, 74% { opacity: 1; } 10%, 30%, 56%, 64%, 86% { opacity: 0.2; } }
@keyframes port-link { 0%, 96% { opacity: 1; } 97% { opacity: 0.3; } }
@keyframes port-up { 0% { opacity: 0.15; } 20% { opacity: 1; } 35% { opacity: 0.15; } 55% { opacity: 1; } 70% { opacity: 0.15; } 85%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .live-port .led-act, .live-port .led-link { animation: none; }
}
svg.hero-logo { display: block; height: auto; aspect-ratio: 273.6 / 89.1; overflow: visible; }
.linkedin { font-weight: 500; }