/* ============================================================
   ACX INDUSTRIES — SHARED STYLESHEET
   Design tokens
   Color:
     --navy        #0A1F3D  primary brand navy (header/footer/bands)
     --navy-deep   #071733  near-black navy, deepest bands
     --blue        #1C7ED6  electric engineering blue (links, accents)
     --blue-pale   #E8F1FC  pale blue tint (cards on light bg)
     --red         #D8232A  ACX mark red, used as a sparing signal color
     --paper       #F3F6FA  light neutral page background
     --white       #FFFFFF
     --ink         #17202E  primary text on light backgrounds
     --slate       #5B6474  secondary / muted text
     --line        #DCE3EC  hairline border on light backgrounds
   Type:
     display -> 'Space Grotesk' (technical, geometric — headlines only)
     body    -> 'IBM Plex Sans' (engineering-documentation clarity — body/UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --navy:#0A1F3D;
  --navy-deep:#071733;
  --blue:#1C7ED6;
  --blue-pale:#E8F1FC;
  --red:#D8232A;
  --paper:#F3F6FA;
  --white:#FFFFFF;
  --ink:#17202E;
  --slate:#5B6474;
  --line:#DCE3EC;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.3rem,4.4vw,3.6rem); font-weight:700;}
h2{font-size:clamp(1.7rem,3vw,2.4rem);}
h3{font-size:1.28rem;}
p{margin:0 0 1em; color:var(--slate); max-width:62ch;}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0;}
.container{max-width:var(--container); margin:0 auto; padding:0 28px;}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.section{padding:88px 0;}
.section--tight{padding:64px 0;}
.section--light{background:var(--paper);}
.section--white{background:var(--white);}
.section--navy{background:var(--navy); color:var(--white);}
.section--navy p{color:#C4D2E6;}
.section--navy h2,.section--navy h3{color:var(--white);}
.section--deep{background:var(--navy-deep); color:var(--white);}
.section--deep p{color:#B7C6DC;}

.kicker{
  display:inline-block; font-family:var(--font-body); font-weight:600;
  font-size:.82rem; letter-spacing:.06em; color:var(--blue);
  text-transform:uppercase; margin-bottom:14px; position:relative; padding-left:18px;
}
.kicker::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:11px; height:3px; background:var(--red);
}
.section--navy .kicker,.section--deep .kicker{color:#79B9F5;}

.lede{font-size:1.14rem; color:var(--slate); max-width:60ch;}
.section--navy .lede{color:#C4D2E6;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  padding:13px 26px; border-radius:2px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--red); color:var(--white);}
.btn--primary:hover{background:#B71B21;}
.btn--outline{border-color:rgba(255,255,255,.55); color:var(--white); background:transparent;}
.btn--outline:hover{background:rgba(255,255,255,.12);}
.btn--outline-dark{border-color:var(--navy); color:var(--navy); background:transparent;}
.btn--outline-dark:hover{background:var(--navy); color:var(--white);}
.btn-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:8px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:34px; width:auto;}
.main-nav{display:flex; align-items:center; gap:34px;}
.main-nav a{
  color:#DCE6F5; font-weight:500; font-size:.97rem; text-decoration:none;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.main-nav a:hover{color:var(--white); text-decoration:none;}
.main-nav a.is-active{color:var(--white); border-bottom-color:var(--red);}
.nav-phone{
  display:flex; align-items:center; gap:8px; color:var(--white); font-weight:600;
  font-size:.95rem; white-space:nowrap;
}
.nav-phone svg{flex:none;}
.nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:6px;
}
.nav-toggle span{
  display:block; width:24px; height:2px; background:var(--white); margin:5px 0;
}
.nav-right{display:flex; align-items:center; gap:28px;}

@media (max-width:880px){
  .nav-right .nav-phone{display:none;}
  .main-nav{
    position:absolute; top:78px; left:0; right:0; background:var(--navy);
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .main-nav.is-open{max-height:360px;}
  .main-nav a{width:100%; padding:14px 28px; border-bottom:1px solid rgba(255,255,255,.06);}
  .main-nav a.is-active{border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.05);}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--navy); color:var(--white); overflow:hidden;
}
.hero .hero-inner{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px;
  padding-top:76px; padding-bottom:76px; min-height:560px;
}
.hero-copy .eyebrow{
  font-size:.85rem; letter-spacing:.08em; color:#8FBFF2; font-weight:600;
  text-transform:uppercase; margin-bottom:16px;
}
.hero-copy h1{margin-bottom:20px;}
.hero-copy p.lede{margin-bottom:30px;}
.material-tags{display:flex; flex-wrap:wrap; gap:10px 22px; margin:30px 0 34px;}
.material-tags span{
  font-size:.9rem; font-weight:500; color:#C7D6EC;
  display:flex; align-items:center; gap:8px;
}
.material-tags span::before{
  content:""; width:7px; height:7px; background:var(--red); border-radius:50%; flex:none;
}
.hero-figure{position:relative; display:flex; justify-content:center;}
.hero-figure img{
  width:auto; max-width:100%; height:auto; max-height:480px; border-radius:2px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
.hero-tagline-strip{
  border-top:1px solid rgba(255,255,255,.14);
  padding:20px 0; font-family:var(--font-display); font-weight:600;
  letter-spacing:.02em; font-size:1rem; color:#DCE6F5;
}
@media (max-width:880px){
  .hero .hero-inner{grid-template-columns:1fr; padding-top:48px; padding-bottom:40px;}
  .hero-figure{order:-1; max-width:420px; margin:0 auto;}
}

/* ---------- Page header (non-home hero band) ---------- */
.page-header{background:var(--navy); color:var(--white); padding:64px 0 54px;}
.page-header p{color:#C4D2E6; margin-bottom:0;}
.page-header .kicker{color:#79B9F5;}

/* ---------- Pillars / numbered process ---------- */
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:36px;}
@media (max-width:720px){.pillars{grid-template-columns:1fr;}}
.pillar{
  display:flex; gap:18px; padding:22px 22px 22px 0; border-top:1px solid var(--line);
}
.section--navy .pillar,.section--deep .pillar{border-top-color:rgba(255,255,255,.14);}
.pillar-num{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--white); background:var(--blue); width:38px; height:38px; flex:none;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.pillar h3{margin-bottom:6px; font-size:1.1rem;}
.pillar ul{margin-top:6px;}
.pillar li{color:var(--slate); font-size:.94rem; padding-left:14px; position:relative; margin-bottom:3px;}
.section--navy .pillar li,.section--deep .pillar li{color:#B7C6DC;}
.pillar li::before{content:"–"; position:absolute; left:0; color:var(--blue);}

/* ---------- Two column layout ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.split--wide-left{grid-template-columns:1.15fr .85fr;}
.split--wide-right{grid-template-columns:.85fr 1.15fr;}
@media (max-width:900px){.split,.split--wide-left,.split--wide-right{grid-template-columns:1fr;}}
.split img{border-radius:2px;}

/* ---------- Cards ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
@media (max-width:900px){.card-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.card-grid{grid-template-columns:1fr;}}
.card{
  background:var(--white); border:1px solid var(--line); padding:28px;
}
.card .num{font-family:var(--font-display); font-weight:700; color:var(--blue); font-size:1rem; margin-bottom:10px; display:block;}
.card h3{margin-bottom:8px;}
.card p{margin-bottom:0; font-size:.95rem;}

.photo-card{background:var(--white); border:1px solid var(--line);}
.photo-card img{width:100%; height:210px; object-fit:cover;}
.photo-card .photo-card-body{padding:20px 22px 22px;}
.photo-card h3{font-size:1.05rem; margin-bottom:6px;}
.photo-card p{font-size:.92rem; margin-bottom:0;}

.photo-card--row{display:grid; grid-template-columns:260px 1fr;}
.photo-card--row img{height:100%; min-height:160px;}
.photo-card--row .photo-card-body{display:flex; flex-direction:column; justify-content:center;}
@media (max-width:640px){
  .photo-card--row{grid-template-columns:1fr;}
  .photo-card--row img{height:200px;}
}

/* ---------- Stat band ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:34px;}
@media (max-width:900px){.stat-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.stat-grid{grid-template-columns:1fr;}}
.stat-box{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  padding:24px 20px; text-align:left;
}
.section--light .stat-box{background:var(--white); border-color:var(--line);}
.stat-box .value{
  font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--white); display:block;
}
.section--light .stat-box .value{color:var(--navy);}
.stat-box .value.accent{color:#7FC4FF;}
.section--light .stat-box .value.accent{color:var(--blue);}
.stat-box .label{font-size:.82rem; letter-spacing:.03em; color:#B7C6DC; text-transform:uppercase; font-weight:600;}
.section--light .stat-box .label{color:var(--slate);}

.value-strip{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between;
  background:var(--navy-deep); color:var(--white); padding:34px 36px; margin-top:40px;
}
.value-strip div{flex:1; min-width:180px;}
.value-strip h4{font-family:var(--font-display); color:#7FC4FF; font-size:1rem; margin-bottom:4px;}
.value-strip p{color:#B7C6DC; font-size:.88rem; margin:0;}

.banner{background:var(--navy-deep); color:var(--white); padding:40px 0; text-align:center;}
.banner h2{margin-bottom:0; font-size:clamp(1.4rem,2.6vw,1.9rem);}
.banner p{color:#B7C6DC; margin:10px 0 0;}

/* ---------- Timeline (roadmap) ---------- */
.timeline{position:relative; margin-top:40px; padding-left:38px;}
.timeline::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line);}
.timeline-item{position:relative; padding-bottom:44px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute; left:-38px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--blue); border:4px solid var(--paper);
}
.timeline-item:nth-child(2) .timeline-dot{background:#3FB6C4;}
.timeline-item:nth-child(3) .timeline-dot{background:#2F9E6E;}
.timeline-when{font-size:.8rem; font-weight:700; letter-spacing:.04em; color:var(--blue); text-transform:uppercase; margin-bottom:4px;}
.timeline-item h3{margin-bottom:8px;}
.timeline-item p{font-size:.95rem;}

/* ---------- Table ---------- */
.data-table{width:100%; border-collapse:collapse; margin-top:24px; font-size:.95rem;}
.data-table th,.data-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line);}
.data-table thead th{background:var(--navy); color:var(--white); font-weight:600; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase;}
.data-table tbody tr:nth-child(even){background:var(--blue-pale);}
.data-table td.hl{font-weight:700; color:var(--navy);}

/* ---------- Bar chart (pure CSS, with y-axis) ---------- */
.chart{margin-top:30px;}
.chart-legend{display:flex; gap:22px; margin-bottom:18px; font-size:.85rem; color:var(--slate);}
.section--navy .chart-legend,.section--deep .chart-legend{color:#C4D2E6;}
.chart-legend span{display:flex; align-items:center; gap:8px;}
.chart-legend i{width:12px; height:12px; display:inline-block;}

.chart-canvas{display:flex; gap:14px;}
.chart-yaxis{
  flex:none; width:58px; height:220px;
  display:flex; flex-direction:column; justify-content:space-between;
  text-align:right; font-size:.72rem; color:var(--slate); line-height:1;
}
.section--navy .chart-yaxis,.section--deep .chart-yaxis{color:#A9BAD3;}

.chart-plot-wrap{flex:1; min-width:0; overflow-x:auto;}
.chart-plot{
  position:relative; height:220px; display:flex; align-items:flex-end; gap:18px;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:0 12px; min-width:540px;
  background-image:repeating-linear-gradient(to top, var(--line) 0, var(--line) 1px, transparent 1px, transparent calc(100%/9));
}
.section--navy .chart-plot,.section--deep .chart-plot{
  border-color:rgba(255,255,255,.25);
  background-image:repeating-linear-gradient(to top, rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 1px, transparent 1px, transparent calc(100%/9));
}
.chart-group{
  flex:1; min-width:46px; height:100%;
  display:flex; align-items:flex-end; justify-content:center; gap:5px;
}
.chart-bar{width:18px; border-radius:1px 1px 0 0; position:relative;}
.chart-bar.blue{background:var(--blue);}
.chart-bar.gold{background:#E8A526;}
.chart-bar .bar-value{
  position:absolute; top:-19px; left:50%; transform:translateX(-50%);
  font-size:.66rem; font-weight:600; color:var(--slate); white-space:nowrap;
}
.section--navy .chart-bar .bar-value,.section--deep .chart-bar .bar-value{color:#DCE6F5;}

.chart-labels-row{display:flex; gap:18px; padding:10px 12px 0; min-width:540px;}
.chart-group-label{flex:1; min-width:46px; font-size:.7rem; color:var(--slate); text-align:center; line-height:1.3;}
.section--navy .chart-group-label,.section--deep .chart-group-label{color:#B7C6DC;}

.bending-chart{display:flex; align-items:flex-end; gap:26px; height:220px; margin-top:26px; padding-left:6px; border-left:1px solid var(--line); border-bottom:1px solid var(--line);}
.bending-col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; flex:1;}
.bending-col .bar-value{font-size:.85rem; font-weight:700; color:var(--navy); margin-bottom:6px;}
.bending-col .bar{width:38px; border-radius:1px 1px 0 0;}
.bending-col.acx .bar{background:#E8752C;}
.bending-col.vendor .bar{background:#2E6E9E;}
.bending-col .cap-label{font-size:.76rem; color:var(--slate); margin-top:8px; text-align:center;}

/* ---------- Process flow strip ---------- */
.flow-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  margin:34px 0 0; font-family:var(--font-display); font-weight:600; font-size:.98rem; color:var(--blue);
}
.flow-strip .arrow{color:var(--slate); font-weight:400;}

/* ---------- Callout box ---------- */
.callout{
  background:var(--blue-pale); border-left:4px solid var(--blue); padding:22px 26px; margin-top:24px;
}
.callout h4{font-family:var(--font-body); font-weight:700; font-size:.85rem; color:var(--navy); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px;}
.callout p{margin:0; color:var(--ink); font-size:.96rem;}

.solution-tag{
  display:inline-flex; align-items:center; gap:10px; background:#EAF6EE; border:1px solid #BEE3C9;
  padding:14px 20px; font-size:.94rem; color:#1F5C3A; font-weight:600; margin-top:24px;
}
.solution-tag b{color:#1B7A46; text-transform:uppercase; font-size:.78rem; letter-spacing:.03em;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep); color:#C4D2E6; padding:56px 0 0;}
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media (max-width:800px){.footer-top{grid-template-columns:1fr 1fr; row-gap:32px;}}
.footer-brand img{height:30px; margin-bottom:14px;}
.footer-brand p{font-size:.9rem; color:#8FA0B8; max-width:32ch;}
.footer-col h5{color:var(--white); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px;}
.footer-col a{display:block; color:#B7C6DC; font-size:.92rem; margin-bottom:10px; text-decoration:none;}
.footer-col a:hover{color:var(--white); text-decoration:underline;}
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding:22px 0; font-size:.82rem; color:#77879E;
}
.footer-tagline{
  text-align:center; padding:26px 0; border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--font-display); font-weight:600; color:var(--white); letter-spacing:.02em;
}

/* ---------- Contact page ---------- */
.contact-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px;}
@media (max-width:880px){.contact-wrap{grid-template-columns:1fr;}}
.contact-info-item{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);}
.contact-info-item:first-child{padding-top:0;}
.contact-info-item .ic{
  width:44px; height:44px; border-radius:50%; background:var(--blue-pale); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-info-item h4{margin:0 0 4px; font-size:1rem; font-family:var(--font-body); font-weight:700;}
.contact-info-item p{margin:0; font-size:.94rem;}
.contact-info-item a{color:var(--ink); font-weight:600;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:560px){.form-grid{grid-template-columns:1fr;}}
.form-grid .full{grid-column:1 / -1;}
.field label{display:block; font-size:.86rem; font-weight:600; color:var(--ink); margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%; border:1px solid var(--line); background:var(--white); padding:12px 14px;
  font-family:var(--font-body); font-size:.96rem; color:var(--ink); border-radius:1px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue); outline:none;}
.field textarea{resize:vertical; min-height:130px;}
.form-note{font-size:.82rem; color:var(--slate); margin-top:14px;}
.form-status{margin-top:16px; font-size:.92rem; font-weight:600;}
.form-status.ok{color:#1B7A46;}
.form-status.err{color:var(--red);}

.map-note{
  margin-top:28px; padding:20px 22px; background:var(--paper); border:1px solid var(--line); font-size:.92rem; color:var(--slate);
}