/* ==========================================================================
   Roxboro Precision Machining — shared design system
   Used by index.html, capability-statement.html, and all landing/ pages.
   ========================================================================== */

:root{
  --navy:#163A7A;
  --navy-deep:#0E2A5C;
  --navy-soft:#2A4F8F;
  --red:#D21F26;
  --red-dark:#B3181E;
  --chalk:#F7F6F3;
  --chalk-warm:#EFEDE7;
  --graphite:#1C1E22;
  --graphite-soft:#4B4E55;
  --line:#C9C5BA;
  --star-white:rgba(247,246,243,0.12);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--chalk);
  color:var(--graphite);
  font-family:'Source Sans 3',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Barlow Condensed',sans-serif;
  color:var(--navy);
  line-height:1.05;
  font-weight:700;
  letter-spacing:0.01em;
  text-transform:uppercase;
}

.mono{font-family:'IBM Plex Mono',monospace;}

a{color:inherit;}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 32px;
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ---------- Stars on navy ---------- */
.navy-stars{
  background-color:var(--navy);
  background-image:
    radial-gradient(circle at 8% 18%, var(--star-white) 1.2px, transparent 1.4px),
    radial-gradient(circle at 22% 72%, var(--star-white) 1px, transparent 1.2px),
    radial-gradient(circle at 41% 12%, var(--star-white) 1.1px, transparent 1.3px),
    radial-gradient(circle at 63% 81%, var(--star-white) 1.2px, transparent 1.4px),
    radial-gradient(circle at 78% 24%, var(--star-white) 1px, transparent 1.2px),
    radial-gradient(circle at 91% 58%, var(--star-white) 1.1px, transparent 1.3px),
    radial-gradient(circle at 14% 48%, var(--star-white) 0.9px, transparent 1.1px),
    radial-gradient(circle at 52% 42%, var(--star-white) 1px, transparent 1.2px);
}

/* ---------- Nav ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(247,246,243,0.94);
  backdrop-filter:blur(8px);
  border-bottom:3px solid var(--navy);
  box-shadow:0 3px 0 var(--red);
}
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 32px;
  max-width:1120px;
  margin:0 auto;
  gap:24px;
}
.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}
.logo img{
  height:64px;
  width:auto;
  display:block;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:0.95rem;
  font-weight:600;
}
.nav-links a{
  text-decoration:none;
  color:var(--navy);
  transition:color 0.15s ease;
}
.nav-links a:hover{color:var(--red);}
.nav-cta{
  background:var(--red);
  color:var(--chalk);
  padding:10px 20px;
  border-radius:2px;
  text-decoration:none;
  font-weight:700;
  font-size:0.9rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  font-family:'Barlow Condensed',sans-serif;
  transition:background 0.15s ease;
}
.nav-cta:hover{background:var(--red-dark); color:var(--chalk);}
.nav-toggle{display:none;}

/* Landing-page nav: no section links, phone is the second action */
.nav-phone{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.95rem;
  font-weight:500;
  color:var(--navy);
  text-decoration:none;
  white-space:nowrap;
}
.nav-phone:hover{color:var(--red);}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--red);
  color:var(--chalk);
  padding:15px 28px;
  border-radius:2px;
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-family:'Barlow Condensed',sans-serif;
  border:1px solid var(--red-dark);
  transition:background 0.15s ease, transform 0.1s ease;
  display:inline-block;
}
.btn-primary:hover{background:var(--red-dark); transform:translateY(-1px);}
.btn-secondary{
  background:transparent;
  color:var(--navy);
  padding:15px 28px;
  border-radius:2px;
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-family:'Barlow Condensed',sans-serif;
  border:1px solid var(--navy);
  transition:background 0.15s ease, color 0.15s ease;
  display:inline-block;
}
.btn-secondary:hover{background:var(--navy); color:var(--chalk);}

/* ---------- Hero ---------- */
.hero{
  padding:72px 0 56px;
  background:linear-gradient(180deg, var(--chalk) 0%, var(--chalk-warm) 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:start;
}
.eyebrow-line{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;
  color:var(--red);
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.hero h1{
  font-size:3.35rem;
  max-width:14ch;
  margin-bottom:22px;
  color:var(--navy);
}
.hero-sub{
  font-size:1.15rem;
  color:var(--graphite-soft);
  max-width:48ch;
  margin-bottom:32px;
}
.hero-ctas{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* Landing hero runs wider headlines than the homepage */
.hero-lp h1{max-width:18ch; font-size:3rem;}

/* ---------- Spec block ---------- */
.spec-block{
  background:var(--navy-deep);
  color:var(--chalk);
  border:1px solid var(--navy);
  padding:0;
  position:relative;
}
.spec-block::before{
  content:"";
  display:block;
  height:4px;
  background:var(--red);
}
.spec-block-header{
  padding:14px 20px;
  border-bottom:1px solid rgba(247,246,243,0.15);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.spec-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.spec-brand img{
  height:36px;
  width:36px;
  object-fit:cover;
  background:#fff;
  border:1px solid rgba(247,246,243,0.25);
}
.spec-block-header .mono{
  font-size:0.72rem;
  color:var(--chalk);
  letter-spacing:0.06em;
}
.spec-rev{color:rgba(247,246,243,0.55) !important;}
.spec-rows{padding:8px 0;}
.spec-row{
  display:flex;
  justify-content:space-between;
  padding:14px 24px;
  border-bottom:1px solid rgba(247,246,243,0.08);
  font-size:0.92rem;
  gap:16px;
}
.spec-row:last-child{border-bottom:none;}
.spec-label{color:rgba(247,246,243,0.6);}
.spec-value{
  font-family:'IBM Plex Mono',monospace;
  text-align:right;
  max-width:56%;
}

/* ---------- Section shell ---------- */
section{padding:64px 0;}
.section-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;
  color:var(--red);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.section-title{
  font-size:2.25rem;
  max-width:22ch;
  margin-bottom:20px;
}
.section-body{
  color:var(--graphite-soft);
  max-width:62ch;
  font-size:1.05rem;
}

/* ---------- Trust bar ---------- */
.trust-bar{
  background:var(--navy-deep);
  color:var(--chalk);
  padding:0;
  border-bottom:3px solid var(--red);
}
.trust-inner{
  max-width:1120px;
  margin:0 auto;
  padding:16px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.trust-item{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.82rem;
  letter-spacing:0.04em;
  color:rgba(247,246,243,0.92);
  display:flex;
  align-items:center;
  gap:8px;
}
.trust-item::before{
  content:"";
  width:8px;height:8px;
  background:var(--red);
  flex-shrink:0;
}

/* ---------- Audience / card grids ---------- */
.audience{padding:0 0 64px;}
.audience-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.audience-card{
  background:var(--chalk);
  padding:24px 22px;
}
.audience-card .mono{
  font-size:0.72rem;
  color:var(--red);
  display:block;
  margin-bottom:10px;
  letter-spacing:0.08em;
}
.audience-card h3{
  font-size:1.15rem;
  margin-bottom:8px;
  text-transform:uppercase;
}
.audience-card p{
  color:var(--graphite-soft);
  font-size:0.92rem;
}
.audience-grid.cols-3{grid-template-columns:repeat(3,1fr);}

/* ---------- Problem band ---------- */
.problem{color:var(--chalk);}
.problem .section-label{color:rgba(247,246,243,0.7);}
.problem .section-title{color:var(--chalk);}
.problem .section-body{color:rgba(247,246,243,0.82);}

/* ---------- Process ---------- */
.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:36px;
}
.process-step{
  border-top:3px solid var(--navy);
  padding-top:20px;
}
.process-step .mono{
  font-family:'Barlow Condensed',sans-serif;
  font-size:2rem;
  font-weight:700;
  color:var(--red);
  display:block;
  line-height:1;
  margin-bottom:10px;
  letter-spacing:0.04em;
}
.process-step h3{
  font-size:1.25rem;
  margin-bottom:8px;
}
.process-step p{
  color:var(--graphite-soft);
  font-size:0.98rem;
}
.process-grid.cols-4{grid-template-columns:repeat(4,1fr);}

/* ---------- Capability table ---------- */
.cap-table{
  margin-top:36px;
  border-top:1px solid var(--line);
}
.cap-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.cap-row .cap-name{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--navy);
}
.cap-row .cap-desc{
  color:var(--graphite-soft);
  font-size:0.98rem;
}

/* ---------- Why grid ---------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  margin-top:36px;
  border:1px solid var(--line);
}
.why-card{
  background:var(--chalk);
  padding:28px;
}
.why-card .mono{
  font-size:0.72rem;
  color:var(--red);
  display:block;
  margin-bottom:10px;
  letter-spacing:0.08em;
}
.why-card h3{
  font-size:1.25rem;
  margin-bottom:8px;
}
.why-card p{
  color:var(--graphite-soft);
  font-size:0.95rem;
}

/* ---------- Checklist ---------- */
.checklist{
  list-style:none;
  margin-top:24px;
  display:grid;
  gap:12px;
}
.checklist li{
  position:relative;
  padding-left:30px;
  color:var(--graphite-soft);
  font-size:1.02rem;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:0.55em;
  width:12px;height:12px;
  background:var(--red);
}
.checklist.on-navy li{color:rgba(247,246,243,0.88);}

/* ---------- Portfolio ---------- */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:36px;
}
.portfolio-item{
  aspect-ratio:4/3;
  background:var(--chalk-warm);
  border:1px solid var(--line);
  border-top:3px solid var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--graphite-soft);
  font-family:'IBM Plex Mono',monospace;
  font-size:0.8rem;
  text-align:center;
  padding:16px;
  overflow:hidden;
}
.portfolio-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.portfolio-item figure{
  margin:0;width:100%;height:100%;
  display:flex;flex-direction:column;
}
.portfolio-item figcaption{
  padding:8px 10px;
  background:var(--navy-deep);
  color:var(--chalk);
  font-size:0.72rem;
  text-align:left;
}

/* ---------- Testimonials ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:36px;
}
.testimonial{
  background:var(--chalk-warm);
  border:1px solid var(--line);
  border-top:3px solid var(--red);
  padding:26px;
}
.testimonial blockquote{
  font-size:1rem;
  color:var(--graphite);
  margin-bottom:16px;
  line-height:1.55;
}
.testimonial cite{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;
  font-style:normal;
  color:var(--graphite-soft);
  display:block;
}
.testimonial.placeholder{
  border-top-color:var(--line);
  background:transparent;
  border-style:dashed;
}
.testimonial.placeholder blockquote{color:var(--graphite-soft); font-style:italic;}

/* ---------- FAQ ---------- */
.faq-list{margin-top:36px; border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer;
  padding:20px 0;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--navy);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  font-family:'IBM Plex Mono',monospace;
  color:var(--red);
  font-size:1.4rem;
  flex-shrink:0;
}
.faq-item[open] summary::after{content:"\2212";}
.faq-item summary:hover{color:var(--red);}
.faq-item .faq-answer{
  padding:0 0 22px;
  color:var(--graphite-soft);
  max-width:70ch;
}

/* ---------- Urgent banner (downtime page) ---------- */
.urgent-banner{
  background:var(--red);
  color:var(--chalk);
  text-align:center;
  padding:12px 32px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.88rem;
  letter-spacing:0.04em;
}
.urgent-banner a{
  color:var(--chalk);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--navy-deep);
  color:var(--chalk);
  padding:48px 0;
  text-align:center;
  border-top:4px solid var(--red);
}
.cta-band h2{color:var(--chalk); font-size:2rem; margin-bottom:14px;}
.cta-band p{
  color:rgba(247,246,243,0.82);
  max-width:56ch;
  margin:0 auto 26px;
}

/* ---------- Contact / form ---------- */
.contact{color:var(--chalk);}
.contact .section-label{color:rgba(247,246,243,0.7);}
.contact .section-title{color:var(--chalk);}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:56px;
  margin-top:32px;
  align-items:start;
}
.contact-info h3{color:var(--chalk); font-size:1.5rem; margin-bottom:14px;}
.contact-info p{color:rgba(247,246,243,0.82); margin-bottom:20px;}
.contact-detail{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.88rem;
  color:#F2C9CB;
  display:block;
  margin-bottom:8px;
  text-decoration:none;
}
a.contact-detail:hover{color:var(--chalk);}

form{
  background:var(--navy-deep);
  padding:32px;
  border:1px solid rgba(247,246,243,0.15);
  border-top:4px solid var(--red);
}
.form-row{margin-bottom:18px;}
.form-row label{
  display:block;
  font-size:0.85rem;
  color:rgba(247,246,243,0.7);
  margin-bottom:6px;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  background:var(--navy);
  border:1px solid rgba(247,246,243,0.2);
  color:var(--chalk);
  padding:12px 14px;
  font-family:'Source Sans 3',sans-serif;
  font-size:0.95rem;
  border-radius:2px;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:2px solid var(--red);
  outline-offset:1px;
}
.form-row textarea{resize:vertical; min-height:100px;}
.form-row-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-hint{
  font-size:0.78rem;
  color:rgba(247,246,243,0.55);
  margin-top:6px;
}
.form-submit{
  width:100%;
  background:var(--red);
  color:var(--chalk);
  border:none;
  padding:15px;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-family:'Barlow Condensed',sans-serif;
  border-radius:2px;
  cursor:pointer;
  transition:background 0.15s ease;
}
.form-submit:hover{background:var(--red-dark);}
.form-reassure{
  text-align:center;
  font-size:0.8rem;
  color:rgba(247,246,243,0.6);
  margin-top:14px;
  font-family:'IBM Plex Mono',monospace;
}
/* Spam honeypot — must stay invisible to humans */
.hp-field{
  position:absolute;
  left:-9999px;
  opacity:0;
  height:0;
  overflow:hidden;
}

/* ---------- Footer ---------- */
footer{
  padding:28px 32px;
  background:var(--chalk);
  border-top:3px solid var(--navy);
  box-shadow:inset 0 3px 0 var(--red);
}
.footer-inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:var(--graphite-soft);
  font-size:0.8rem;
  font-family:'IBM Plex Mono',monospace;
  text-align:center;
  flex-wrap:wrap;
}
.footer-inner img{
  height:40px;
  width:auto;
}
.footer-inner a{color:var(--graphite-soft);}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1,
  .hero-lp h1{font-size:2.5rem; max-width:none;}
  .audience-grid,
  .audience-grid.cols-3{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr;}
  .process-grid,
  .process-grid.cols-4{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .testimonial-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    background:var(--chalk);
    border-bottom:3px solid var(--navy);
    padding:20px 32px;
    gap:18px;
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{
    display:block;
    background:none;
    border:none;
    font-size:1.5rem;
    cursor:pointer;
    color:var(--navy);
  }
  /* Landing nav has no collapsible menu — keep it always visible */
  .nav-links-lp{
    position:static;
    flex-direction:row;
    align-items:center;
    background:none;
    border:none;
    padding:0;
    gap:14px;
    display:flex;
  }
  .cap-row{grid-template-columns:1fr;}
}

@media (max-width:520px){
  .wrap{padding:0 20px;}
  nav{padding:8px 20px;}
  .logo img{height:52px;}
  .hero{padding:48px 0 40px;}
  .hero h1,
  .hero-lp h1{font-size:2.05rem;}
  .audience-grid,
  .audience-grid.cols-3{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:1fr;}
  .spec-row{flex-direction:column; gap:4px;}
  .spec-value{max-width:100%; text-align:left;}
  .form-row-split{grid-template-columns:1fr;}
  .trust-inner{flex-direction:column; align-items:flex-start; gap:10px;}
  .nav-phone{display:none;}
}

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