/* Sound Networks - site styles - v3.4 (network theme: E1 colors + background graphics) */
:root {
  --navy: #0E1620;
  --navy-2: #18222E;
  --navy-line: #2C3A4A;
  --accent: #5AA2FF;
  --accent-text: #1D4ED8;
  --ground: #F3F5F7;
  --white: #FFFFFF;
  --line: #E2E8F0;
  --muted: #475569;
  --muted-dark: #B5C0CC;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--navy);
  background: var(--ground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); }
a:hover { color: var(--navy); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); }
section[id] { scroll-margin-top: 80px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.dark { background: var(--navy); color: var(--white); }
.eyebrow {
  margin: 0 0 12px; font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #3E4C5E;
}
.dark .eyebrow { color: #A9B6C4; }
.h2 {
  margin: 0 0 20px; font-size: clamp(32px, 4vw, 46px); line-height: 1.1;
  letter-spacing: -0.02em; max-width: 720px;
}
.lead { margin: 0; color: var(--muted); font-size: 18px; max-width: 640px; }
.dark .lead { color: var(--muted-dark); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px;
  border-radius: 10px; font-weight: 700; font-size: 16px; text-decoration: none;
}
.btn-accent { background: var(--accent); color: var(--navy); }
.btn-accent:hover { background: #8CC0FF; color: var(--navy); }
.btn-ghost { border: 1px solid #4A5B6E; color: var(--white); font-weight: 500; }
.btn-ghost:hover { border-color: var(--accent); color: var(--white); }

/* Header */
.site-header { background: var(--navy); border-bottom: 1px solid #1E2A37; position: sticky; top: 0; z-index: 10; }
.site-header .wrap {
  padding-top: 8px; padding-bottom: 8px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.brand:hover { color: var(--white); }
.brand img { display: block; width: 230px; height: auto; }
@media (max-width: 640px) { .brand img { width: 190px; } }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 15px; font-weight: 500; }
.nav a { color: #C9D3DE; text-decoration: none; }
.nav a:hover { color: var(--white); }
.nav .nav-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 8px; background: var(--accent); color: var(--navy); font-weight: 700;
}
.nav .nav-cta:hover { background: #8CC0FF; color: var(--navy); }

/* Hero */
.hero .wrap {
  padding-top: 96px; padding-bottom: 104px; display: flex; flex-wrap: wrap;
  gap: 56px; align-items: center;
}
.hero-copy { flex: 1 1 520px; min-width: 0; }
.hero h1 {
  margin: 0 0 24px; font-weight: 700; font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.04; letter-spacing: -0.025em;
}
.hero-copy > p.intro { margin: 0 0 36px; max-width: 560px; font-size: 19px; color: var(--muted-dark); }
.hero .eyebrow { margin-bottom: 20px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.definition { flex: 1 1 360px; min-width: 0; max-width: 460px; }
.definition-card { background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: 16px; padding: 32px; }
.definition-word { margin: 0 0 4px; font-family: var(--display); font-size: 34px; font-weight: 600; }
.definition-pos { margin: 0 0 24px; font-family: var(--mono); font-size: 13px; color: #93A1B0; }
.definition ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.definition li { display: flex; gap: 16px; color: #DDE3EA; }
.definition li b { font-family: var(--mono); font-weight: 500; color: #C9D3DE; font-size: 14px; padding-top: 2px; }

/* Proof strip */
.proof { background: var(--white); border-bottom: 1px solid var(--line); }
.proof .wrap {
  padding-top: 36px; padding-bottom: 36px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px;
}
.proof .big { margin: 0; font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1.3; }
.proof .small { margin: 0; color: var(--muted); font-size: 15px; }

/* Services */
.services { padding-top: 104px; padding-bottom: 104px; }
.services .lead { margin-bottom: 56px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 32px; }
.card h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; }
.card p { margin: 0; color: var(--muted); }
.icon {
  width: 48px; height: 48px; border-radius: 10px; background: var(--navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}

/* Healthcare */
.health .wrap {
  padding-top: 104px; padding-bottom: 104px; display: flex; flex-wrap: wrap;
  gap: 56px; align-items: flex-start;
}
.health-copy { flex: 1 1 440px; min-width: 0; }
.health-list {
  flex: 1 1 440px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.health-list li { border: 1px solid var(--navy-line); border-radius: 12px; padding: 22px; background: var(--navy-2); }
.health-list p { margin: 0; }
.health-list p:first-child { margin-bottom: 6px; font-weight: 600; }
.health-list p + p { color: #A9B6C4; font-size: 15px; }

/* Experience */
.experience { padding-top: 104px; padding-bottom: 104px; display: flex; flex-wrap: wrap; gap: 56px; }
.experience-copy { flex: 1 1 340px; min-width: 0; }
.experience-copy .lead { margin-bottom: 28px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 6px 14px; border-radius: 999px; background: #E6EAEF; font-size: 14px; font-weight: 500; }
.timeline { flex: 1 1 520px; min-width: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #D5DEE8; }
.timeline li { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 26px 0; border-bottom: 1px solid #D5DEE8; }
.timeline .yrs { flex: 0 0 120px; font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.3; }
.timeline .what { flex: 1 1 300px; min-width: 0; }
.timeline strong { display: block; font-weight: 600; }
.timeline .what span { color: var(--muted); }

/* Contact */
.contact { background: var(--white); border-top: 1px solid var(--line); }
.contact .wrap { padding-top: 104px; padding-bottom: 104px; display: flex; flex-wrap: wrap; gap: 56px; }
.contact-copy { flex: 1 1 380px; min-width: 0; }
.contact-copy .lead { margin-bottom: 32px; }
.contact-details { display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.contact-details p { margin: 0; }
.contact-details strong { font-weight: 600; }
.contact-details span { color: var(--muted); }
.badge { display: inline-block; margin-top: 32px; }
.badge img { display: block; width: 260px; height: auto; }

.contact-form {
  flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 16px; padding: 32px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; }
.field label small { font-weight: 400; font-size: 15px; color: #5B6B7C; }
.field input, .field textarea {
  font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #B8C4D1;
  border-radius: 8px; background: var(--white); color: var(--navy);
}
.field input { min-height: 48px; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: var(--accent-text); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button {
  min-height: 52px; border: 0; border-radius: 10px; background: var(--navy); color: var(--white);
  font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
}
.contact-form button:hover { background: #1E2A37; }
.notice { margin: 0; padding: 14px 16px; border-radius: 10px; font-size: 15px; }
.notice-ok { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; }
.notice-err { background: #FEE2E2; color: #7F1D1D; border: 1px solid #FCA5A5; }

/* Footer */
.site-footer { background: var(--navy); color: #A9B6C4; }
.site-footer .wrap {
  padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px; font-size: 14px;
}

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 640px) {
  .site-header { position: static; }
  .hero .wrap { padding-top: 64px; padding-bottom: 72px; }
  .services, .experience, .health .wrap, .contact .wrap { padding-top: 72px; padding-bottom: 72px; }
  .definition-card, .card, .contact-form { padding: 24px; }
}

/* =====================================================================
   NETWORK THEME (v3.0) - background graphics layered on the E1 colors
   ===================================================================== */

/* Dot grid used on dark sections */
.dark, .site-footer {
  background-image: radial-gradient(rgba(201, 211, 222, 0.07) 1px, transparent 1.2px);
  background-size: 24px 24px;
}

/* Section labels read like code comments */
.eyebrow::before { content: "// "; opacity: 0.7; }

/* ---------- Hero: live topology map ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero .wrap { position: relative; z-index: 2; }
.hero::after {               /* fade the map out behind the headline */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 78% 45%, rgba(90, 162, 255, 0.10), transparent 70%),
    linear-gradient(90deg, var(--navy) 20%, rgba(14, 22, 32, 0.75) 42%, rgba(14, 22, 32, 0.05) 72%, rgba(14, 22, 32, 0.25) 100%);
}
.net-graphic {              /* fixed size so it never scales up on wide screens */
  position: absolute; z-index: 0;
  width: 1200px; height: 640px; top: 50%; right: calc(50% - 720px);
  transform: translateY(-50%);
}
.net-graphic * { vector-effect: non-scaling-stroke; }
.net-graphic .lk { stroke: #5AA2FF; stroke-opacity: 0.26; stroke-width: 1.2; }
.net-graphic .lk-faint { stroke-opacity: 0.14; }
.net-graphic .nd { fill: #5AA2FF; fill-opacity: 0.85; }
.net-graphic .ring { fill: none; stroke: #5AA2FF; stroke-opacity: 0.30; stroke-width: 1; }
.net-graphic .nd-faint { fill-opacity: 0.35; stroke-opacity: 0.12; }
.net-graphic .pk {           /* "packets" travelling along active paths */
  fill: none; stroke: #8CC0FF; stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 6 260; animation: packet 7s linear infinite;
  filter: drop-shadow(0 0 3px rgba(90, 162, 255, 0.9));
}
.net-graphic .pk2 { animation-duration: 9s; animation-delay: -3s; }
.net-graphic .pk3 { animation-duration: 6s; animation-delay: -1s; }
.net-graphic .pk4 { animation-duration: 11s; animation-delay: -5s; }
@keyframes packet { from { stroke-dashoffset: 266; } to { stroke-dashoffset: -800; } }

/* Device symbols on the map */
.net-graphic .ic      { fill: #141E2A; stroke: #C9D3DE; stroke-opacity: 0.75; stroke-width: 1.4; }
.net-graphic .ic-unit { fill: #1B2633; stroke: #C9D3DE; stroke-opacity: 0.45; stroke-width: 1; }
.net-graphic .ic-thin { fill: none; stroke: #C9D3DE; stroke-opacity: 0.55; stroke-width: 1.1; stroke-linecap: round; }
.net-graphic .ic-acc  { fill: none; stroke: #5AA2FF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.net-graphic .led     { fill: #5AA2FF; animation: blink 2.4s steps(2, jump-none) infinite; }
.net-graphic .led.d2  { animation-duration: 1.7s; animation-delay: -0.6s; }
.net-graphic .led.d3  { animation-duration: 3.1s; animation-delay: -1.3s; }
.net-graphic .led.d4  { animation-duration: 2.0s; animation-delay: -0.2s; }
@keyframes blink { 0% { fill-opacity: 1; } 100% { fill-opacity: 0.2; } }
.net-graphic .lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em;
  fill: #93A1B0; stroke: #0E1620; stroke-width: 4px; stroke-linejoin: round; paint-order: stroke;
}

/* Router: arrows slowly turn; ping ripples out from routers and the firewall */
.net-graphic .spin   { transform-box: fill-box; transform-origin: center; animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.net-graphic .ripple {
  fill: none; stroke: #5AA2FF; stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center; animation: ripple 3.6s ease-out infinite;
}
.net-graphic .firewall .ripple { animation-delay: -1.8s; }
@keyframes ripple { 0% { transform: scale(1); stroke-opacity: 0.6; } 100% { transform: scale(2.8); stroke-opacity: 0; } }

/* Firewall: an inspection line sweeps up and down across the bricks */
.net-graphic .scan { fill: #5AA2FF; fill-opacity: 0.7; animation: scan 2.6s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateY(-8px); } to { transform: translateY(7px); } }

/* Wireless access point: signal arcs pulse outward */
.net-graphic .wave { fill: none; stroke: #5AA2FF; stroke-width: 1.6; stroke-linecap: round; stroke-opacity: 0.15;
                     animation: wave 2.4s ease-out infinite; }
.net-graphic .wave.w2 { animation-delay: 0.3s; }
.net-graphic .wave.w3 { animation-delay: 0.6s; }
@keyframes wave { 0%, 100% { stroke-opacity: 0.12; } 30% { stroke-opacity: 0.95; } }

/* Internet cloud: data dots drift; workstation cursor blinks */
.net-graphic .float  { animation: float 4s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
.net-graphic .cursor { fill: #5AA2FF; animation: blink 1.1s steps(2, jump-none) infinite; }

/* Definition card: smaller, see-through panel so the map shows around and through it */
.definition { flex: 0 1 330px; max-width: 330px; margin-left: auto; margin-right: 90px; }
.definition-card {
  padding: 22px 24px;
  background: rgba(24, 34, 46, 0.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border-color: rgba(201, 211, 222, 0.22);
}
.definition-word { font-size: 26px; }
.definition-pos { margin-bottom: 14px; font-size: 12px; }
.definition ol { gap: 10px; }
.definition li { font-size: 14px; gap: 12px; line-height: 1.45; }
.definition li b { font-size: 12px; }
@media (max-width: 1100px) { .definition { margin-right: 0; } }
@media (max-width: 640px)  { .definition { flex: 1 1 100%; max-width: none; margin-left: 0; } }

/* ---------- Proof strip: link-status lights ---------- */
.proof .big { display: flex; align-items: flex-start; gap: 12px; }
.proof .big::before {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 0.6em;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(90, 162, 255, 0.18), 0 0 10px rgba(90, 162, 255, 0.7);
}
.proof { position: relative; }
.proof::before {             /* thin "fibre" line across the top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, #C9D3DE 50%, var(--accent) 70%, transparent);
  opacity: 0.55;
}

/* ---------- Services: graph-paper background, numbered cards ---------- */
.services { position: relative; }
.services::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background-color: var(--ground);
  background-image:
    linear-gradient(rgba(29, 78, 216, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 78, 216, 0.11) 1px, transparent 1px),
    linear-gradient(rgba(14, 22, 32, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 22, 32, 0.055) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
body { overflow-x: hidden; }
main { position: relative; z-index: 0; }
.card { position: relative; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.card:hover { border-color: rgba(90, 162, 255, 0.6); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(14, 22, 32, 0.08); }
.card-num {
  position: absolute; top: 26px; right: 28px;
  font-family: var(--mono); font-size: 13px; color: #8A97A6; letter-spacing: 0.08em;
}

/* ---------- Healthcare: circuit traces ---------- */
.health {
  background-image:
    linear-gradient(180deg, rgba(14, 22, 32, 0.0), rgba(14, 22, 32, 0.6)),
    url("images/bg-circuit.svg");
  background-size: auto, 240px 240px;
}
.health-list li { background: rgba(24, 34, 46, 0.88); }

/* ---------- Experience: timeline drawn as a network path ---------- */
.timeline { border-top: 0; position: relative; padding-left: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(180deg, var(--accent), #C9D3DE);
  opacity: 0.6;
}
.timeline li { position: relative; border-bottom: 1px dashed #D5DEE8; }
.timeline li:last-child { border-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -34px; top: 34px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--white); border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(90, 162, 255, 0.15);
}

/* ---------- Contact: faint topology in the corner ---------- */
.contact {
  background-image: url("images/bg-topology-light.svg");
  background-repeat: no-repeat;
  background-position: left -260px bottom -140px;
  background-size: 1000px auto;
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .net-graphic .pk { animation: none; stroke-dasharray: none; stroke-opacity: 0.35; filter: none; }
  .net-graphic .led, .net-graphic .spin, .net-graphic .scan, .net-graphic .wave,
  .net-graphic .float, .net-graphic .cursor { animation: none; }
  .net-graphic .ripple { animation: none; stroke-opacity: 0; }
  .net-graphic .wave { stroke-opacity: 0.6; }
  .card { transition: none; }
  .card:hover { transform: none; }
}

@media (max-width: 640px) {
  .net-graphic { width: 1000px; height: 100%; top: 0; right: -320px; transform: none; }
  .hero::after {
    background: linear-gradient(180deg, rgba(14, 22, 32, 0.55), rgba(14, 22, 32, 0.92) 55%);
  }
  .contact { background-size: 600px auto; background-position: right -200px bottom -40px; }
}