:root {
  --navy-950:#020c17;
  --navy-925:#03111f;
  --navy-900:#061a30;
  --blue:#3ea6ff;
  --blue-soft:#78beff;
  --heading:#dde2e7;
  --text:#c4cad1;
  --text-soft:#9da7b2;
  --line:rgba(92,169,236,.27);
  --border:rgba(107,181,245,.38);
  --container:1460px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--text);
  background:var(--navy-950);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

.container {
  width:min(calc(100% - 48px),var(--container));
  margin-inline:auto;
}

/* one and only one sticky header */
.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(6,26,48,.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(62,166,255,.38);
  box-shadow:0 8px 28px rgba(0,0,0,.20);
}

.nav-wrap {
  min-height:82px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:30px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:14px;
}

.brand-mark {
  width:58px;
  height:52px;
  object-fit:contain;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.35));
}

.brand-text {
  display:grid;
  line-height:1;
  color:var(--heading);
}

.brand-text strong {
  font-size:clamp(1.12rem,1.45vw,1.65rem);
  font-weight:500;
  letter-spacing:.115em;
  white-space:nowrap;
}

.brand-text span {
  margin-top:6px;
  justify-self:center;
  color:#a6afb8;
  font-size:.72rem;
  letter-spacing:.48em;
  padding-left:.48em;
}

.site-nav {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(28px,3.2vw,56px);
}

.site-nav a {
  position:relative;
  padding:31px 0 27px;
  color:#c7cdd4;
  font-size:.93rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:color .2s ease;
}

.site-nav a:hover,
.site-nav a.active { color:var(--blue-soft); }

.site-nav a.active::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:18px;
  width:46px;
  height:2px;
  transform:translateX(-50%);
  background:var(--blue);
  box-shadow:0 0 14px rgba(62,166,255,.32);
}

.header-cta,
.primary-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(120,190,255,.78);
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:.04em;
  transition:.2s ease;
}

.header-cta {
  min-width:158px;
  min-height:46px;
  padding:10px 22px;
  color:#d9dfe5;
  font-size:.9rem;
}

.header-cta:hover,
.primary-btn:hover {
  color:#fff;
  background:rgba(53,148,238,.13);
  border-color:var(--blue-soft);
  box-shadow:0 0 22px rgba(62,166,255,.13);
  transform:translateY(-1px);
}

.nav-toggle { display:none; }

/* hero */
.hero {
  position:relative;
  overflow:hidden;
  min-height:650px;
  display:grid;
  align-items:center;
  background:
    radial-gradient(ellipse at 82% 35%, rgba(170,220,255,.24) 0%, rgba(70,145,205,.12) 18%, transparent 42%),
    radial-gradient(ellipse at 66% 56%, rgba(85,165,225,.18) 0%, transparent 38%),
    radial-gradient(ellipse at 94% 62%, rgba(185,225,255,.18) 0%, transparent 36%),
    linear-gradient(115deg,#03111f 0%,#05213d 48%,#083a68 100%);
  border-bottom:1px solid rgba(62,166,255,.22);
}

/* Optional old hero video remains supported. If present it sits below all content. */
.hero-bg-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
  opacity:.28;
}

/* Animated cloud atmosphere. Add <div class="hero-clouds"></div> inside .hero. */
.hero-clouds {
  position:absolute;
  inset:-8%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 78% 34%,rgba(225,242,255,.32) 0 8%,rgba(112,181,231,.18) 16%,transparent 35%),
    radial-gradient(ellipse at 91% 46%,rgba(210,238,255,.27) 0 9%,rgba(86,157,215,.16) 18%,transparent 39%),
    radial-gradient(ellipse at 65% 58%,rgba(151,207,244,.24) 0 10%,rgba(52,118,177,.12) 24%,transparent 45%),
    radial-gradient(ellipse at 84% 74%,rgba(113,183,230,.18) 0 12%,transparent 40%);
  filter:blur(2px);
  transform:scale(1.12);
  animation:stringwalkerCloudDrift 24s ease-in-out infinite alternate;
}

.hero-clouds::before {
  content:"";
  position:absolute;
  inset:-6%;
  background:
    radial-gradient(ellipse at 70% 42%,rgba(255,255,255,.13),transparent 24%),
    radial-gradient(ellipse at 88% 57%,rgba(83,176,255,.17),transparent 31%),
    radial-gradient(ellipse at 58% 30%,rgba(43,116,191,.14),transparent 30%);
  animation:stringwalkerCloudFloat 32s linear infinite alternate;
}

@keyframes stringwalkerCloudDrift {
  from { transform:scale(1.12) translate3d(-1.5%,0,0); }
  to   { transform:scale(1.18) translate3d(2.5%,-1.5%,0); }
}

@keyframes stringwalkerCloudFloat {
  from { transform:translate3d(-3%,1%,0); }
  to   { transform:translate3d(4%,-2%,0); }
}

.hero-bg-overlay {
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(2,12,23,.90) 0%,
      rgba(2,12,23,.72) 35%,
      rgba(2,12,23,.34) 70%,
      rgba(2,12,23,.24) 100%);
  pointer-events:none;
}

/* Animated fiber-optic SVG layer. */
.fiber-network {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
  opacity:.92;
}

.fiber-path {
  fill:none;
  stroke:url(#fiberGradient);
  stroke-width:2;
  opacity:.70;
  filter:drop-shadow(0 0 5px rgba(48,169,255,.75));
}
.fiber-path-soft { stroke-width:1.25; opacity:.42; }
.fiber-thin { stroke-width:.8; opacity:.34; }
.fiber-dot { fill:#76d4ff; filter:url(#fiberGlow); opacity:.95; }
.fiber-dot-small { fill:#3ab8ff; opacity:.82; }
.fiber-dot-bright { fill:#fff; filter:url(#fiberGlow) drop-shadow(0 0 12px #24aaff); }

.hero-grid {
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);
  align-items:center;
  gap:58px;
  padding-block:54px 66px;
}

.hero-visual {
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Smaller archer on desktop */
.hero-logo {
  width:min(100%,280px);
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 24px 28px rgba(0,0,0,.44))
    drop-shadow(0 0 18px rgba(66,166,255,.12));
}

/* Also supports the smaller-emblem markup from the newer hero version. */
.hero-emblem {
  display:block;
  width:112px;
  height:auto;
  margin-bottom:22px;
  object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));
}

.hero-copy { max-width:760px; }

.hero-kicker {
  margin-bottom:20px;
  color:#abb8c7;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.33em;
}
.hero-kicker span {
  color:var(--blue);
  padding:0 .55em;
}

.hero-copy h1 {
  margin:0 0 22px;
  color:var(--heading);
  font-size:clamp(3.25rem,5.2vw,5.85rem);
  line-height:1.04;
  font-weight:680;
  letter-spacing:-.035em;
  text-shadow:0 4px 18px rgba(0,0,0,.28);
}

.hero-copy p {
  margin:0 0 30px;
  max-width:720px;
  color:#c1c8cf;
  font-size:clamp(1.03rem,1.4vw,1.24rem);
}

.primary-btn {
  min-height:52px;
  padding:13px 24px;
  color:var(--blue-soft);
  font-weight:650;
}

/* services */
.services {
  padding:32px 0 46px;
  background:
    radial-gradient(circle at 50% 0%,rgba(32,91,143,.16),transparent 42%),
    linear-gradient(180deg,#06182b,#061425);
}

.section-heading {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  max-width:720px;
  margin:0 auto 18px;
}

.section-heading span {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--blue));
}
.section-heading span:last-child {
  background:linear-gradient(90deg,var(--blue),transparent);
}
.section-heading h2 {
  margin:0;
  color:var(--heading);
  font-size:clamp(1.95rem,2.8vw,2.7rem);
  text-transform:uppercase;
  letter-spacing:.16em;
  white-space:nowrap;
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.service-card {
  position:relative;
  padding:18px 34px 24px;
  text-align:center;
}
.service-card:not(:last-child)::after {
  content:"";
  position:absolute;
  right:0;
  top:16%;
  width:1px;
  height:72%;
  background:var(--line);
}
.service-icon {
  width:78px;
  height:78px;
  margin:0 auto 4px;
  display:grid;
  place-items:center;
}
.service-icon svg {
  width:70px;
  height:70px;
  fill:none;
  stroke:var(--blue);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 12px rgba(62,166,255,.18));
}
.service-card h3 {
  margin:6px 0 8px;
  color:var(--heading);
  text-transform:uppercase;
  font-size:1.08rem;
  letter-spacing:.05em;
}
.service-card p {
  max-width:310px;
  margin:0 auto;
  color:#bcc4cc;
  font-size:.96rem;
}

/* about */
.about {
  padding:88px 0;
  background:#071a2f;
  border-top:1px solid rgba(255,255,255,.035);
}
.about-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
}
.eyebrow {
  margin:0 0 10px;
  color:var(--blue-soft);
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.15em;
  font-size:.82rem;
}
.about h2,
.cta-strip h2,
.contact-hero h1 {
  margin:0;
  color:var(--heading);
  line-height:1.12;
}
.about h2 { font-size:clamp(2.3rem,4vw,4.2rem); }
.about-grid > div:last-child p {
  margin:0;
  color:var(--text-soft);
  font-size:1.1rem;
}

/* CTA */
.cta-strip {
  padding:62px 0;
  background:linear-gradient(180deg,#061427,#04111f);
  border-top:1px solid rgba(62,166,255,.08);
}
.cta-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.cta-strip h2 { font-size:clamp(2rem,3vw,3rem); }

/* Contact */
.contact-page {
  min-height:calc(100vh - 160px);
  background:
    linear-gradient(rgba(2,12,23,.72),rgba(2,12,23,.80)),
    url("../images/hero-landscape.svg") center/cover no-repeat;
}
.contact-hero { padding:90px 0; }
.contact-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start;
}
.contact-hero h1 {
  margin-bottom:18px;
  font-size:clamp(3rem,5vw,5rem);
}
.contact-hero p {
  color:#b8c1ca;
  font-size:1.08rem;
}
.contact-card {
  padding:32px;
  background:rgba(4,18,33,.82);
  border:1px solid var(--border);
  box-shadow:0 22px 55px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
}
.contact-card label {
  display:grid;
  gap:7px;
  margin-bottom:18px;
  color:var(--heading);
  font-weight:600;
}
.contact-card input,
.contact-card textarea {
  width:100%;
  border:1px solid rgba(120,190,255,.24);
  background:rgba(3,14,27,.88);
  color:#e0e5ea;
  padding:12px 13px;
  font:inherit;
  outline:none;
}
.contact-card input:focus,
.contact-card textarea:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(62,166,255,.08);
}
.form-btn {
  border:1px solid rgba(120,190,255,.72);
  background:transparent;
  cursor:pointer;
}

/* footer */
.site-footer {
  background:#020b14;
  border-top:1px solid rgba(255,255,255,.05);
}
.footer-wrap {
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#87919b;
  font-size:.9rem;
}
.footer-wrap a:hover { color:var(--blue-soft); }


/* Visually hide accessibility-only text (keeps hamburger label available to screen readers) */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:1100px) {
  .nav-wrap {
    grid-template-columns:auto auto;
    justify-content:space-between;
  }
  .header-cta { display:none; }

  .nav-toggle {
    display:block;
    width:46px;
    height:46px;
    border:1px solid var(--border);
    border-radius:4px;
    background:rgba(6,26,48,.7);
    cursor:pointer;
    padding-top:7px;
  }
  .nav-toggle span {
    display:block;
    width:22px;
    height:2px;
    margin:5px auto;
    background:#c7d0d8;
  }

  .site-nav {
    display:none;
    grid-column:1/-1;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 0 18px;
  }
  .site-nav.open { display:flex; }
  .site-nav a { padding:12px 0; }
  .site-nav a.active::after {
    left:0;
    bottom:6px;
    width:42px;
    transform:none;
  }

  .hero-grid {
    grid-template-columns:1fr 1fr;
    gap:34px;
  }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .service-card:nth-child(2)::after { display:none; }

  .about-grid,
  .contact-grid {
    grid-template-columns:1fr;
    gap:34px;
  }
}

@media (max-width:760px) {
  .container {
    width:min(calc(100% - 30px),var(--container));
  }
  .nav-wrap { min-height:72px; }
  .brand-mark {
    width:50px;
    height:44px;
  }
  .brand-text strong { font-size:.96rem; }
  .brand-text span { font-size:.64rem; }

  .hero {
    min-height:auto;
    background-position:42% center;
  }
  .hero-grid {
    grid-template-columns:1fr;
    text-align:center;
    padding-block:28px 52px;
  }
  .hero-visual { order:1; }
  .hero-copy { order:2; }
  .hero-logo {
    width:min(88vw,430px);
    margin-inline:auto;
  }
  .hero-kicker {
    font-size:.72rem;
    letter-spacing:.2em;
  }
  .hero-copy h1 {
    font-size:clamp(2.5rem,12vw,4rem);
  }

  .services-grid { grid-template-columns:1fr; }
  .service-card::after { display:none !important; }

  .section-heading {
    grid-template-columns:1fr;
    gap:8px;
  }
  .section-heading span { display:none; }
  .section-heading h2 {
    white-space:normal;
    text-align:center;
  }

  .cta-wrap {
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-wrap {
    min-height:auto;
    padding:18px 0;
    flex-direction:column;
    gap:4px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display:none; }
}


/* Stringwalker contact form status + spam trap */
.contact-honeypot {
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.contact-status {
  min-height:24px;
  margin-top:14px;
  font-size:.9rem;
  line-height:1.5;
  color:var(--muted, #aebccc);
}

.contact-status.is-success {
  color:#8fd3a6;
}

.contact-status.is-error {
  color:#ff9a9a;
}

#contact-submit[disabled] {
  opacity:.65;
  cursor:wait;
}


/* =========================================================
   FINAL HERO RESPONSIVE OVERRIDES
   ========================================================= */
@media (max-width:1100px) {
  .hero-grid {
    grid-template-columns:minmax(210px,.62fr) minmax(0,1.38fr);
    gap:34px;
  }
  .hero-logo { width:min(100%,230px); }
  .hero-emblem { width:96px; }
}

@media (max-width:760px) {
  .hero {
    min-height:auto;
    background-position:center;
  }
  .hero-grid {
    grid-template-columns:1fr;
    text-align:center;
    padding-block:30px 52px;
  }
  .hero-visual { order:1; }
  .hero-copy { order:2; margin-inline:auto; }
  .hero-logo {
    width:min(56vw,210px);
    margin-inline:auto;
  }
  .hero-emblem {
    width:76px;
    margin:0 auto 18px;
  }
  .fiber-network {
    opacity:.52;
    transform:translateX(-12%) scale(1.12);
  }
  .hero-clouds { opacity:.90; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-clouds,
  .hero-clouds::before { animation:none; }
  .fiber-network { display:none; }
}
/* New Stringwalker cloud-computing hero background */
.hero {
  background:
    linear-gradient(
      90deg,
      rgba(2,12,23,.88) 0%,
      rgba(2,12,23,.62) 45%,
      rgba(2,12,23,.18) 100%
    ),
    url("../images/stringwalker-cloud-fiber-bg.jpg")
    center center / cover no-repeat;
}/* =========================================
   STRINGWALKER ANIMATED FIBER NETWORK
   ========================================= */

.fiber-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.fiber-path {
  fill: none;
  stroke: url(#fiberGradient);
  stroke-width: 2;
  opacity: .55;
  filter: drop-shadow(0 0 6px rgba(57,184,255,.75));
}

.fiber-path-soft {
  opacity: .30;
  stroke-width: 1.4;
}

.fiber-thin {
  opacity: .35;
  stroke-width: 1;
}

.fiber-dot {
  fill: #74d8ff;
  filter: url(#fiberGlow);
}

.fiber-dot-small {
  opacity: .85;
}

.fiber-dot-bright {
  fill: #ffffff;
  filter: url(#fiberGlow);
}

/* Keep hero content above animation */
.hero-grid {
  position: relative;
  z-index: 2;
}

/* Slightly soften animation on phones */
@media (max-width: 760px) {
  .fiber-network {
    opacity: .65;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-clouds {
    animation: none;
  }
}/* Desktop hero alignment + stronger fiber animation */

@media (min-width: 900px) {

  .hero-grid {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
  }

  .hero-copy {
    max-width: 620px;
    margin-left: 70px;
  }

  .fiber-network {
    opacity: 1;
  }

  .fiber-path {
    stroke-width: 2.4;
    opacity: .78;
    filter:
      drop-shadow(0 0 4px rgba(57,184,255,.95))
      drop-shadow(0 0 10px rgba(57,184,255,.60));
  }

  .fiber-path-soft {
    opacity: .48;
  }

  .fiber-thin {
    opacity: .55;
  }

  .fiber-dot {
    fill: #8ee8ff;
    filter:
      drop-shadow(0 0 6px #ffffff)
      drop-shadow(0 0 12px #38baff)
      drop-shadow(0 0 20px #168cff);
  }

  .fiber-dot-bright {
    fill: #ffffff;
  }
}
/* =========================================
   DESKTOP HERO FINAL TUNING
   Mobile remains unchanged
   ========================================= */

@media (min-width: 900px) {

  /* Make archer larger on desktop */
  .hero-emblem {
    width: 135px !important;
    max-width: 135px !important;
    height: auto;
    margin-bottom: 22px;
  }

  /* Make sure fiber layer is NOT being hidden */
  .fiber-network {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Stronger visible fiber lines */
  .fiber-path {
    opacity: .8 !important;
    stroke-width: 2.5 !important;
    filter:
      drop-shadow(0 0 5px rgba(75,200,255,1))
      drop-shadow(0 0 12px rgba(40,160,255,.8));
  }

  .fiber-path-soft {
    opacity: .6 !important;
  }

  .fiber-thin {
    opacity: .65 !important;
  }

  /* MUCH more obvious moving lights */
  .fiber-dot {
    r: 8px;
    fill: #ffffff !important;
    stroke: #6edcff;
    stroke-width: 2px;
    opacity: 1 !important;

    filter:
      drop-shadow(0 0 5px #ffffff)
      drop-shadow(0 0 10px #55d7ff)
      drop-shadow(0 0 22px #168cff) !important;
  }

  .fiber-dot-small {
    r: 6px;
  }

  .fiber-dot-bright {
    r: 10px;
  }
}