/* ============================================================
   ZENCOVEX — shared stylesheet
   Design language: "integration blueprint" — a systems-integration
   consultancy rendered like precise architectural drafting.
   ============================================================ */

:root{
  /* -- palette -- */
  --paper:      #F6F4EE;   /* warm off-white page background */
  --paper-2:    #EEEAE0;   /* deeper warm section background  */
  --white:      #FFFFFF;
  --navy-900:   #0D1B2E;   /* deep navy — ink, dark sections   */
  --navy-700:   #1B3358;   /* secondary navy — headings        */
  --steel-600:  #48607A;   /* muted blue — body/secondary text */
  --brass-500:  #A67C3D;   /* bronze accent — CTAs, connectors */
  --brass-600:  #8A6631;   /* bronze hover/darker              */
  --line:       #DBD5C6;   /* warm hairline border             */
  --line-dark:  rgba(255,255,255,.14);
  --muted:      #64758A;

  /* -- type -- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --maxw: 1180px;
  --radius: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--navy-900);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0;
  color:var(--navy-900);
  letter-spacing:-0.01em;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

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

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass-500); outline-offset:3px; border-radius:2px;
}

.eyebrow-label{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brass-600);
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.eyebrow-label::before{
  content:"";
  width:16px; height:1px;
  background:var(--brass-500);
  display:inline-block;
}

/* ============ HEADER / NAV ============ */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,244,238,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--navy-900); }
.logo-mark{
  width:30px; height:30px; flex:none; border:1.5px solid var(--navy-900); border-radius:2px;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.logo-mark::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--brass-500); }
.logo-mark::after{
  content:""; position:absolute; width:14px; height:14px; border:1px solid var(--brass-500);
  border-radius:50%; opacity:.55;
}

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a:not(.nav-cta){
  font-size:14px; font-weight:500; color:var(--steel-600); transition:color .15s;
}
.nav-links a:not(.nav-cta):hover{ color:var(--navy-900); }
.nav-cta{
  background:var(--navy-900); color:var(--white) !important; padding:10px 20px;
  border-radius:2px; font-size:13.5px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--navy-900); transition:background .15s, color .15s;
}
.nav-cta:hover{ background:transparent; color:var(--navy-900) !important; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); width:38px; height:38px;
  border-radius:2px; align-items:center; justify-content:center;
}
.nav-toggle svg{ width:17px; height:17px; color:var(--navy-900); }

/* ============ BUTTONS ============ */
.btn{
  padding:13px 24px; border-radius:2px; font-size:14px; font-weight:600;
  border:1px solid transparent; display:inline-flex; align-items:center; gap:9px;
  transition:background .15s, color .15s, border-color .15s, transform .15s;
  letter-spacing:.01em;
}
.btn-primary{ background:var(--brass-500); color:var(--white); border-color:var(--brass-500); }
.btn-primary:hover{ background:var(--brass-600); border-color:var(--brass-600); }
.btn-dark{ background:var(--navy-900); color:var(--white); border-color:var(--navy-900); }
.btn-dark:hover{ background:var(--navy-700); border-color:var(--navy-700); }
.btn-ghost{ background:transparent; color:var(--navy-900); border-color:var(--navy-900); }
.btn-ghost:hover{ background:var(--navy-900); color:var(--white); }
.btn-ghost-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.btn-ghost-light:hover{ background:var(--white); color:var(--navy-900); }
.btn svg{ width:15px; height:15px; }

/* ============ PAGE HERO (interior pages) ============ */
.page-hero{ padding:64px 0 60px; border-bottom:1px solid var(--line); }
.page-hero .eyebrow-label{ margin-bottom:18px; }
.page-hero h1{ font-size:clamp(30px,4.4vw,48px); max-width:760px; }
.page-hero p{ color:var(--steel-600); font-size:17px; max-width:600px; margin-top:18px; }
.breadcrumb{
  font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-bottom:22px;
  display:flex; gap:8px; align-items:center;
}
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--navy-900); }

/* ============ HOME HERO ============ */
.hero{ position:relative; padding:76px 0 30px; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero-copy h1{ font-size:clamp(34px,4.6vw,58px); }
.hero-copy .hero-sub{ color:var(--steel-600); font-size:17.5px; max-width:520px; margin-top:22px; }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

/* Blueprint schematic (signature element) */
.schematic{ position:relative; }
.schematic svg{ width:100%; height:auto; }
.schematic-caption{
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted); text-align:center;
  margin-top:10px; letter-spacing:.03em;
}

/* ============ TRUST / CAPABILITY STRIP ============ */
.strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2); }
.strip-track{
  display:flex; gap:0; flex-wrap:wrap; padding:0;
}
.strip-track span{
  font-family:var(--font-mono); font-size:12.5px; color:var(--steel-600);
  padding:16px 20px; border-right:1px solid var(--line); white-space:nowrap;
}
.strip-track span:last-child{ border-right:none; }

/* ============ SECTION SHARED ============ */
section{ padding:96px 0; }
.section-head{ max-width:640px; margin:0 0 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(26px,3.2vw,40px); margin-top:16px; }
.section-head p{ margin-top:16px; color:var(--steel-600); font-size:16px; }
.section-alt{ background:var(--paper-2); }

/* ============ SERVICE CARDS ============ */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card{ background:var(--paper); padding:36px 30px; }
.service-index{ font-family:var(--font-mono); font-size:12.5px; color:var(--brass-500); margin-bottom:18px; display:block; }
.service-card h3{ font-size:21px; margin-bottom:10px; }
.service-card > p{ color:var(--steel-600); font-size:14.5px; margin-bottom:20px; }
.service-card ul{ display:flex; flex-direction:column; gap:10px; }
.service-card li{ font-size:13.5px; display:flex; gap:10px; align-items:baseline; color:var(--navy-700); }
.service-card li::before{ content:"—"; color:var(--brass-500); flex:none; font-family:var(--font-mono); }
.service-card .btn{ margin-top:22px; }

/* ============ INDUSTRIES ============ */
.industries-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.industry-card{
  background:var(--paper); padding:26px 20px; display:flex; flex-direction:column; gap:14px; min-height:132px; justify-content:space-between;
}
.industry-icon{ width:24px; height:24px; color:var(--brass-500); }
.industry-card span{ font-size:14px; font-weight:600; color:var(--navy-900); }
.industry-card p{ font-size:12.5px; color:var(--steel-600); }

/* ============ PROCESS ============ */
.process-list{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.process-step{ background:var(--paper); padding:26px 20px; }
.process-num{ font-family:var(--font-mono); font-size:13px; color:var(--brass-500); margin-bottom:14px; }
.process-step h4{ font-size:16px; margin-bottom:8px; }
.process-step p{ font-size:13px; color:var(--steel-600); }

/* ============ WHY / VALUE GRID ============ */
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.why-item{ background:var(--paper); padding:30px; display:flex; gap:18px; }
.why-num{
  font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--white);
  background:var(--navy-900); width:32px; height:32px; flex:none; display:flex;
  align-items:center; justify-content:center; border-radius:2px;
}
.why-item h4{ font-size:17px; margin-bottom:8px; }
.why-item p{ color:var(--steel-600); font-size:14.5px; }

/* ============ QUOTE / STAT BAND ============ */
.stat-band{ background:var(--navy-900); color:var(--white); }
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.stat-item .num{ font-family:var(--font-display); font-size:clamp(32px,3.6vw,46px); color:var(--white); }
.stat-item .label{ font-family:var(--font-mono); font-size:12.5px; color:rgba(255,255,255,.6); margin-top:10px; letter-spacing:.02em; }

/* ============ FAQ ============ */
.faq-list{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq-item summary{
  cursor:pointer; font-family:var(--font-display); font-size:17px; color:var(--navy-900);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--font-mono); font-size:20px; color:var(--brass-500); flex:none;
  transition:transform .2s;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--steel-600); font-size:14.5px; margin-top:14px; max-width:640px; }

/* ============ CONTACT ============ */
.contact-block{ background:var(--navy-900); border-radius:6px; padding:72px 0; }
.contact-block .wrap{ max-width:1120px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-left h2{ color:var(--white); font-size:clamp(26px,3.2vw,38px); max-width:420px; }
.contact-left > p{ color:rgba(255,255,255,.62); margin-top:16px; max-width:400px; font-size:15px; }
.contact-detail{ margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.contact-detail a, .contact-detail span{ font-size:14.5px; color:var(--white); }
.contact-detail .row{ display:flex; align-items:center; gap:11px; }
.contact-detail .ic{ width:17px; height:17px; color:var(--brass-500); flex:none; }
form{ display:flex; flex-direction:column; gap:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label{ display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:8px; }
input, textarea, select{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:var(--white);
  padding:12px 14px; border-radius:2px; font-family:var(--font-body); font-size:14.5px;
}
input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.32); }
textarea{ resize:vertical; min-height:100px; }
.form-note{ font-size:12px; color:rgba(255,255,255,.4); margin-top:2px; }

.contact-info-page{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px; }
.contact-info-card{ background:var(--paper); padding:28px 26px; }
.contact-info-card .ic{ width:20px; height:20px; color:var(--brass-500); margin-bottom:14px; }
.contact-info-card h4{ font-size:15px; margin-bottom:6px; }
.contact-info-card p, .contact-info-card a{ font-size:14px; color:var(--steel-600); }

/* ============ FOOTER ============ */
footer{ background:var(--navy-900); color:rgba(255,255,255,.7); padding:52px 0 34px; margin-top:0; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line-dark); }
.footer-top .logo{ color:var(--white); margin-bottom:14px; }
.footer-top .logo-mark{ border-color:var(--white); }
.footer-blurb{ font-size:13.5px; color:rgba(255,255,255,.55); max-width:280px; }
.footer-col h5{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:rgba(255,255,255,.45); margin-bottom:16px; font-weight:500;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:13.5px; color:rgba(255,255,255,.75); transition:color .15s; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:26px; font-size:12.5px; color:rgba(255,255,255,.4); }
.footer-bottom a{ color:rgba(255,255,255,.4); }
.footer-bottom a:hover{ color:var(--white); }

/* ============ ABOUT PAGE SPECIFIC ============ */
.timeline{ display:flex; flex-direction:column; }
.timeline-item{ display:grid; grid-template-columns:110px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--line); }
.timeline-item:last-child{ border-bottom:1px solid var(--line); }
.timeline-item .year{ font-family:var(--font-mono); font-size:13px; color:var(--brass-500); }
.timeline-item h4{ font-size:16.5px; margin-bottom:8px; }
.timeline-item p{ font-size:14.5px; color:var(--steel-600); max-width:560px; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.two-col p + p{ margin-top:14px; }
.two-col p{ color:var(--steel-600); font-size:15.5px; }

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .schematic{ order:-1; max-width:440px; margin:0 auto; }
  .services-grid{ grid-template-columns:1fr; }
  .industries-grid{ grid-template-columns:repeat(2,1fr); }
  .process-list{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .contact-info-page{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .two-col{ grid-template-columns:1fr; gap:28px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:720px){
  .nav-links{
    position:fixed; top:76px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; padding:20px 24px 26px; gap:16px;
    opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .18s, transform .18s;
  }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-toggle{ display:flex; }
  .form-row{ grid-template-columns:1fr; }
  .process-list{ grid-template-columns:1fr; }
  .industries-grid{ grid-template-columns:1fr; }
  section{ padding:64px 0; }
  .footer-top{ grid-template-columns:1fr; }
  .contact-info-page{ }
  .wrap{ padding:0 20px; }
}