/* ============================================================
   Cybax Systems — shared stylesheet
   Design concept: engineering blueprint / schematic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink: #0F2A43;
  --ink-soft: #43506B;
  --paper: #EDEEE7;
  --paper-raised: #F6F6F1;
  --white: #FFFFFF;
  --accent: #E0932E;
  --accent-ink: #7A4E10;
  --teal: #2F6F5E;
  --line: #CBCFC4;
  --line-strong: #0F2A43;

  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1160px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

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

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

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

/* ---------- Top utility bar: scrolling ticker ---------- */
.topbar{
  background:var(--ink);
  overflow:hidden;
  padding:9px 0;
}
.ticker-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  min-height:16px;
}
.ticker-item{
  display:inline-block;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:#C9D2DE;
  transform:translateX(100vw);
  animation:ticker-scroll 45s linear infinite;
}
@keyframes ticker-scroll{
  from{ transform:translateX(100vw); }
  to{ transform:translateX(-100%); }
}

/* ---------- Nav ---------- */
header.site{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
nav.main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  gap:24px;
}
.logo{
  display:flex;
  align-items:baseline;
  gap:8px;
  text-decoration:none;
  color:var(--ink);
}
.logo .mark{
  font-family:var(--serif);
  font-weight:600;
  font-size:24px;
  letter-spacing:-0.01em;
}
.logo .mark em{
  font-style:normal;
  color:var(--accent);
}
.logo .sub{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:.04em;
  display:none;
}
@media (min-width:640px){
  .logo .sub{ display:inline; }
}

.navlinks{
  display:flex;
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:14.5px;
}
.navlinks a{
  text-decoration:none;
  color:var(--ink);
  padding:6px 0;
  border-bottom:1px solid transparent;
}
.navlinks a:hover, .navlinks a.active{
  border-bottom:1px solid var(--accent);
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-phone{
  font-family:var(--mono);
  font-size:13.5px;
  text-decoration:none;
  color:var(--ink);
  display:none;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  padding:11px 20px;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  border-radius:2px;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.solid{
  background:var(--ink);
  color:var(--white);
}
.btn.solid:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}
.btn.amber{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}
.btn.amber:hover{
  background:transparent;
  color:var(--accent);
}

.hamburger{ display:none; }

/* ---------- Page header (interior pages) ---------- */
.pagehead{
  border-bottom:1px solid var(--line);
  padding:56px 0 44px;
}
.pagehead .kicker{
  font-family:var(--mono);
  font-size:17px;
  font-weight:600;
  color:var(--teal);
  letter-spacing:.03em;
  margin-bottom:14px;
}
.pagehead h1{
  font-size:clamp(32px,4vw,46px);
  max-width:760px;
}
.pagehead .lede{
  margin-top:16px;
  max-width:620px;
  color:var(--ink-soft);
  font-size:17px;
}
.pagehead.photo-bg{
  position:relative;
  background-size:cover;
  background-position:center;
  border-bottom:none;
  padding:92px 0 72px;
}
.pagehead.photo-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(9,26,43,.92) 0%, rgba(9,26,43,.72) 45%, rgba(9,26,43,.32) 80%);
}
.pagehead.photo-bg .wrap{ position:relative; }
.pagehead.photo-bg .kicker{ color:var(--accent); font-size:17px; font-weight:600; }
.pagehead.photo-bg h1{ color:var(--white); }
.pagehead.photo-bg .lede{ color:#CBD5E3; }
.pagehead.photo-bg .crumb{ color:#B9C3D2; }
.pagehead.photo-bg .crumb a:hover{ color:var(--accent); }
.crumb{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--accent); }

/* ---------- Hero ---------- */
.hero{
  padding:76px 0 64px;
  border-bottom:1px solid var(--line);
}
.hero.hero-photo{
  position:relative;
  padding:120px 0 108px;
  background:
    linear-gradient(100deg, rgba(9,26,43,.93) 0%, rgba(9,26,43,.74) 42%, rgba(9,26,43,.32) 74%, rgba(9,26,43,.08) 100%),
    url('assets/hero-network.jpg') center/cover no-repeat;
  border-bottom:none;
}
.hero-content{ max-width:640px; }
.hero .grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:center;
}
.hero .eyebrow{
  font-family:var(--mono);
  font-size:15px;
  color:var(--teal);
  letter-spacing:.03em;
  margin-bottom:18px;
}
.hero-photo .eyebrow{ color:var(--accent); }
.hero h1{
  font-size:clamp(36px,5vw,58px);
  line-height:1.08;
  max-width:640px;
}
.hero-photo h1{ color:var(--white); }
.hero p.lede{
  margin-top:22px;
  font-size:18px;
  color:var(--ink-soft);
  max-width:520px;
}
.hero-photo p.lede{ color:#CBD5E3; }
.hero .cta-row{
  margin-top:32px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.hero-photo .btn.solid{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.hero-photo .btn.solid:hover{ background:var(--white); border-color:var(--white); color:var(--ink); }
.hero-photo .btn:not(.solid){ border-color:rgba(255,255,255,.6); color:var(--white); }
.hero-photo .btn:not(.solid):hover{ background:rgba(255,255,255,.15); color:var(--white); border-color:var(--white); }
.hero .figure{ position:relative; }

/* ---------- Stat strip ---------- */
.stats{
  border-bottom:1px solid var(--line);
  background:var(--paper-raised);
}
.stats .wrap{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
}
.stat{
  padding:28px 24px;
  border-left:1px solid var(--line);
}
.stat:first-child{ border-left:none; padding-left:0; }
.stat .num{
  font-family:var(--serif);
  font-size:32px;
  color:var(--ink);
}
.stat .label{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  margin-top:4px;
}

/* ---------- Section scaffolding ---------- */
.section{ padding:80px 0; }
.section.tight{ padding:56px 0; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:44px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
}
.section-head .kicker{
  font-family:var(--mono);
  font-size:16px;
  color:var(--teal);
  letter-spacing:.03em;
  margin-bottom:10px;
}
.section-head h2{
  font-size:clamp(26px,3.4vw,36px);
}
.section-head .note{
  max-width:320px;
  color:var(--ink-soft);
  font-size:15px;
  text-align:right;
}

/* ---------- Services list (editorial rows, not card kit) ---------- */
.svc-list{ list-style:none; margin:0; padding:0; }
.svc-row{
  display:grid;
  grid-template-columns:64px 1fr 1.4fr auto;
  gap:28px;
  align-items:start;
  padding:30px 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
.svc-row:last-child{ border-bottom:1px solid var(--line); }
.svc-row .idx{
  font-family:var(--mono);
  font-size:19px;
  font-weight:600;
  color:var(--teal);
  padding-top:2px;
}
.svc-row h3{
  font-size:21px;
  padding-top:0;
}
.svc-row .desc{
  color:var(--ink-soft);
  font-size:15.5px;
}
.svc-row .go{
  font-family:var(--mono);
  font-size:12.5px;
  align-self:center;
  white-space:nowrap;
  padding-top:4px;
  color:var(--ink);
}
.svc-row:hover .idx, .svc-row:hover .go{ color:var(--accent); }
.svc-row:hover h3{ color:var(--accent-ink); }

/* ---------- Values / definition rows ---------- */
.values{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.value{
  padding:28px 26px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.value h4{
  font-size:17px;
  margin-bottom:10px;
}
.value p{
  color:var(--ink-soft);
  font-size:14.5px;
  margin:0;
}

/* ---------- Split (about / mission) ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.split.reverse .col-img{ order:2; }
.split p{ color:var(--ink-soft); font-size:16px; }
.split .col-text .kicker{
  font-family:var(--mono);
  font-size:17px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--teal);
  margin-bottom:12px;
}
.kicker-lg{
  font-size:16px !important;
  letter-spacing:.05em;
  font-weight:600;
}
.split .col-text h2{ font-size:clamp(24px,3vw,32px); margin-bottom:18px; }

.col-img img.photo{
  width:100%;
  aspect-ratio: 460 / 300;
  object-fit:cover;
  display:block;
  border:1px solid var(--line);
}

/* ---------- CTA band ---------- */
.ctaband{
  background:var(--ink);
  color:var(--white);
  padding:56px 0;
}
.ctaband .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
.ctaband h2{
  color:var(--white);
  font-size:clamp(24px,3vw,32px);
  max-width:520px;
}
.ctaband .phone{
  font-family:var(--mono);
  color:var(--accent);
  font-size:15px;
  margin-top:10px;
  display:block;
}

/* ---------- Footer ---------- */
footer.site{
  background:var(--paper-raised);
  border-top:1px solid var(--line);
  padding:64px 0 28px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
}
.foot-grid h5{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.03em;
  color:var(--ink-soft);
  margin:0 0 16px;
  font-weight:500;
}
.foot-grid ul{ list-style:none; margin:0; padding:0; }
.foot-grid li{ margin-bottom:10px; }
.foot-grid a{ text-decoration:none; font-size:14.5px; }
.foot-grid a:hover{ color:var(--accent-ink); }
.foot-about p{ color:var(--ink-soft); font-size:14.5px; max-width:280px; }
.foot-bottom{
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
}
.contact-info dl{ margin:0; }
.contact-info dt{
  font-family:var(--mono);
  font-size:12px;
  color:var(--teal);
  margin-top:26px;
}
.contact-info dt:first-child{ margin-top:0; }
.contact-info dd{
  margin:6px 0 0;
  font-size:16px;
}
.contact-info dd a{ text-decoration:none; }
.contact-info dd a:hover{ color:var(--accent-ink); }

form.contact-form{
  border:1px solid var(--line);
  padding:32px;
  background:var(--paper-raised);
}
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%;
  border:1px solid var(--line-strong);
  background:var(--white);
  padding:11px 12px;
  font-family:var(--sans);
  font-size:14.5px;
  color:var(--ink);
  border-radius:2px;
}
.field textarea{ resize:vertical; min-height:110px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ---------- Responsive ---------- */
@media (min-width:1000px){
  .nav-phone{ display:inline; }
}
@media (max-width:900px){
  .navlinks{ display:none; }
  .hero .grid{ grid-template-columns:1fr; }
  .split, .split.reverse .col-img{ order:0; }
  .split{ grid-template-columns:1fr; gap:32px; }
  .stats .wrap{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3), .stat:nth-child(5){ border-left:none; }
  .values{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .svc-row{ grid-template-columns:40px 1fr; }
  .svc-row .desc, .svc-row .go{ grid-column:2; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .values{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .two-col{ grid-template-columns:1fr; }
  .stats .wrap{ grid-template-columns:1fr 1fr; }
}