/*
Theme Name: CrossField Infrastructure Solutions
Author: CrossField Infrastructure Solutions
Description: Civil engineering, infrastructure development, and construction management — Kansas City, MO. Steel blue, safety orange, industrial strength.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: crossfield-infrastructure-solutions
*/
:root{
  --stl:#0B1829;--stl2:#0F2035;--stl3:#152840;--panel:#1A3250;--panel2:#1E3A5C;
  --org:#E86A1A;--org-l:#FF7D2E;--org-pale:rgba(232,106,26,.08);
  --sky:#3B9EE8;--sky-pale:rgba(59,158,232,.08);
  --wh:#fff;--off:#F4F8FF;
  --text:#7AA5C8;--muted:#1E3A55;--border:rgba(59,158,232,.16);--border2:rgba(255,255,255,.07);
  --font:'Inter',system-ui,sans-serif;--display:'Barlow Condensed',system-ui,sans-serif;--mono:'Roboto Mono',monospace;
  --r:3px;--sh:0 20px 60px rgba(0,0,0,.65);--sh-o:0 8px 28px rgba(232,106,26,.22);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--stl);color:var(--text);overflow-x:hidden;line-height:1.65}
img{max-width:100%;display:block;object-fit:cover}
a{text-decoration:none;color:inherit}ul{list-style:none}
input,select,textarea,button{font-family:var(--font)}
.wrap{max-width:1220px;margin:0 auto;padding:0 40px}
.c{text-align:center}.fw{width:100%}

.nav{position:fixed;top:0;width:100%;z-index:1000;padding:16px 0;transition:all .3s}
.nav.scrolled{background:rgba(11,24,41,.97);backdrop-filter:blur(20px);padding:10px 0;border-bottom:2px solid var(--org)}
.ni{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:11px}
.logo-cf{width:38px;height:38px;background:var(--org);display:flex;align-items:center;justify-content:center;clip-path:polygon(0 0,100% 0,100% 78%,88% 100%,0 100%);flex-shrink:0;transition:all .3s}
.logo:hover .logo-cf{background:var(--org-l)}
.logo-cf svg{width:20px;height:20px}
.logo-name{font-family:var(--display);font-size:20px;font-weight:700;color:#fff;letter-spacing:1px;text-transform:uppercase}
.logo-name em{color:var(--org);font-style:normal}
.nl{display:flex;align-items:center;gap:2px}
.nl a{font-size:12px;font-weight:600;letter-spacing:.5px;color:rgba(255,255,255,.42);padding:8px 12px;transition:all .2s}
.nl a:hover,.nl a.on{color:#fff;background:rgba(255,255,255,.08);border-radius:var(--r)}
.ncta{background:var(--org)!important;color:#fff!important;font-weight:700!important;border-radius:var(--r)!important;padding:9px 22px!important}
.ncta:hover{background:var(--org-l)!important;box-shadow:var(--sh-o)!important}
.hbg{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hbg span{display:block;width:24px;height:2px;background:rgba(255,255,255,.6)}

.btn-o{display:inline-block;background:var(--org);color:#fff;padding:13px 34px;font-weight:700;font-size:14px;border-radius:var(--r);transition:all .25s;border:none;cursor:pointer}
.btn-o:hover{background:var(--org-l);transform:translateY(-2px);box-shadow:var(--sh-o)}
.btn-o.lg{padding:16px 46px;font-size:15px}
.btn-sky{display:inline-block;background:var(--sky);color:#fff;padding:13px 34px;font-weight:700;font-size:14px;border-radius:var(--r);transition:all .25s}
.btn-sky:hover{background:#2D8ED8;transform:translateY(-2px)}
.btn-out{display:inline-block;background:transparent;color:rgba(255,255,255,.65);padding:13px 34px;font-weight:600;font-size:14px;border:1.5px solid rgba(255,255,255,.2);border-radius:var(--r);transition:all .25s}
.btn-out:hover{border-color:var(--org);color:var(--org)}
.tlink{font-size:12px;font-weight:700;color:var(--org);text-decoration:underline;text-underline-offset:4px}

/* BIG HERO with blueprint bg */
.hero{position:relative;min-height:100vh;background:var(--stl);display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:110px 0 0}
.h-bp{position:absolute;inset:0;opacity:.03;background-image:
  linear-gradient(rgba(59,158,232,.8) 1px,transparent 1px),
  linear-gradient(90deg,rgba(59,158,232,.8) 1px,transparent 1px),
  linear-gradient(rgba(59,158,232,.3) .5px,transparent .5px),
  linear-gradient(90deg,rgba(59,158,232,.3) .5px,transparent .5px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px}
.h-diag{position:absolute;top:0;right:0;width:50%;height:100%;background:linear-gradient(145deg,transparent 40%,rgba(232,106,26,.04) 100%)}
.hcont{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding-bottom:80px}
.h-tag{font-family:var(--mono);font-size:11px;color:var(--org);letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.h-tag::before{content:'';display:block;width:28px;height:2px;background:var(--org)}
.hl h1{font-family:var(--display);font-size:clamp(56px,7vw,94px);font-weight:700;color:#fff;line-height:.92;margin-bottom:22px;letter-spacing:1px;text-transform:uppercase}
.hl h1 .org{color:var(--org)}.hl h1 .sky{color:var(--sky)}
.hl p{font-size:16px;color:rgba(255,255,255,.48);line-height:1.85;margin-bottom:36px;max-width:520px}
.h-btns{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:52px}
.h-proof{display:flex;gap:36px;border-top:1px solid var(--border2);padding-top:28px}
.hp{display:flex;flex-direction:column;gap:3px}
.hpv{font-family:var(--display);font-size:38px;font-weight:700;color:#fff;line-height:1;letter-spacing:1px}
.hpv em{color:var(--org);font-style:normal}
.hpl{font-size:11px;color:var(--muted);letter-spacing:.5px}
.hp-div{width:1px;background:var(--border2)}

/* HERO PANEL */
.h-panel{background:var(--stl3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.h-panel-hdr{background:var(--stl2);padding:11px 16px;border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between}
.hph-txt{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.5px}
.h-panel-img{height:230px}
.h-panel-img img{width:100%;height:100%}
.h-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border2)}
.hm{padding:13px;text-align:center;border-right:1px solid var(--border2)}.hm:last-child{border-right:none}
.hmv{display:block;font-family:var(--display);font-size:24px;font-weight:700;color:#fff;line-height:1;letter-spacing:1px}
.hmv span{color:var(--org)}
.hml{display:block;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-top:4px}

.h-ticker{background:var(--org);overflow:hidden;padding:10px 0}
.ht-track{display:flex;gap:32px;animation:ht 24s linear infinite;width:max-content}
.ht-track span{font-family:var(--mono);font-size:11px;font-weight:600;color:#fff;white-space:nowrap;letter-spacing:2px;text-transform:uppercase}
.ht-track .s{opacity:.35}
@keyframes ht{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section{padding:110px 0}.bg-panel{background:var(--stl2)}.bg-stl3{background:var(--stl3)}
.stag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--org);background:var(--org-pale);border:1px solid rgba(232,106,26,.25);padding:4px 13px;border-radius:var(--r);margin-bottom:18px}
.stag-sky{color:var(--sky);background:var(--sky-pale);border-color:rgba(59,158,232,.2)}
.sh h2{font-family:var(--display);font-size:clamp(38px,5vw,64px);font-weight:700;color:#fff;letter-spacing:1px;text-transform:uppercase;line-height:1.0;margin-bottom:14px}
.sh h2 .org{color:var(--org)}.sh p{font-size:16px;color:var(--muted);line-height:1.75}
.sh.c{text-align:center;max-width:700px;margin:0 auto 68px}
.sh-sp{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;gap:20px}
.sh-sp h2{font-family:var(--display);font-size:clamp(32px,4.5vw,56px);font-weight:700;color:#fff;letter-spacing:1px;text-transform:uppercase}

.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.st h2{font-family:var(--display);font-size:clamp(32px,4vw,52px);font-weight:700;color:#fff;letter-spacing:1px;text-transform:uppercase;line-height:1.0;margin:0 0 18px}
.st h2 .org{color:var(--org)}.st p{font-size:15px;color:var(--muted);line-height:1.9;margin-bottom:14px}
.si-wrap{position:relative}
.si-main{width:100%;height:420px;border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--border)}
.si-float{position:absolute;bottom:-22px;right:-18px;width:52%;height:190px;border-radius:var(--r);border:2px solid var(--stl2);box-shadow:var(--sh)}
.si-badge{position:absolute;top:20px;left:-18px;background:var(--org);color:#fff;border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh-o);text-align:center}
.si-badge strong{display:block;font-family:var(--display);font-size:22px;font-weight:700;line-height:1;letter-spacing:1px}
.si-badge span{display:block;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:2px;margin-top:3px;opacity:.8}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border2)}
.svc{background:var(--panel);padding:30px;transition:all .3s;position:relative;overflow:hidden;display:flex;flex-direction:column}
.svc::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--org);transition:height .35s}
.svc:hover::before{height:100%}.svc:hover{background:var(--panel2)}
.svc-icon{font-size:28px;margin-bottom:14px;display:block}
.svc h3{font-family:var(--display);font-size:20px;font-weight:700;color:#fff;margin-bottom:9px;letter-spacing:.5px;text-transform:uppercase}
.svc p{font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:13px;flex:1}
.svc ul{display:flex;flex-direction:column;gap:5px}
.svc ul li{font-size:11px;color:rgba(255,255,255,.3);padding-left:14px;position:relative}
.svc ul li::before{content:"▹";position:absolute;left:0;color:var(--org);font-size:10px}

.card6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r);padding:22px;transition:all .3s;border-left:3px solid transparent}
.card:hover{border-left-color:var(--org);transform:translateX(3px)}
.card-icon{font-size:26px;margin-bottom:12px}
.card h3{font-family:var(--display);font-size:17px;font-weight:700;color:#fff;margin-bottom:7px;text-transform:uppercase;letter-spacing:.5px}
.card p{font-size:13px;color:var(--muted);line-height:1.6}

.cases3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;transition:all .3s}
.case:hover{border-color:var(--border);transform:translateY(-4px)}
.case-img{height:190px;background-size:cover;background-position:center}
.case-body{padding:20px}
.case-tag{display:block;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--org);margin-bottom:8px}
.case-body h3{font-family:var(--display);font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.case-body p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:12px}
.case-kpis{display:flex;border-top:1px solid var(--border2);padding-top:11px}
.ck{flex:1;text-align:center}.ck+.ck{border-left:1px solid var(--border2)}
.ckv{display:block;font-family:var(--display);font-size:22px;font-weight:700;color:var(--org);line-height:1;letter-spacing:1px}
.ckl{display:block;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-top:3px}

.team4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tm{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;transition:all .3s}
.tm:hover{border-color:var(--border);transform:translateY(-3px)}
.tm img{width:100%;height:220px}
.tm-body{padding:16px}
.tm-body h3{font-family:var(--display);font-size:16px;font-weight:700;color:#fff;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}
.tm-role{display:block;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--org);margin-bottom:8px}
.tm-body p{font-size:12px;color:var(--muted);line-height:1.6}

.tsti{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.tcol{display:flex;flex-direction:column;gap:18px}
.tstc{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r);padding:26px;transition:border-color .3s}
.tstc:hover,.tstc.ft{border-color:var(--border)}.tstc.ft{background:rgba(232,106,26,.04)}
.tq{font-family:var(--display);font-size:52px;font-weight:700;line-height:.7;color:var(--org);display:block;margin-bottom:12px;opacity:.2;letter-spacing:1px}
.tstc blockquote{font-size:14px;color:rgba(255,255,255,.58);line-height:1.88;font-style:italic;margin-bottom:18px}
.ta{display:flex;align-items:center;gap:10px}.ta img{width:40px;height:40px;border-radius:50%;border:2px solid var(--border2)}
.ta strong{display:block;font-size:13px;font-weight:700;color:#fff}
.ta em{display:block;font-style:normal;font-family:var(--mono);font-size:9px;color:var(--muted)}

.sf-full{display:flex;flex-direction:column;gap:2px;background:var(--border2)}
.sfrow{display:grid;grid-template-columns:1fr 1fr}.sfrow.rev .sfimg{order:2}
.sfimg{background-size:cover;background-position:center;min-height:460px}
.sfbody{background:var(--panel2);padding:56px}
.sfbody h2{font-family:var(--display);font-size:34px;font-weight:700;color:#fff;margin:10px 0 16px;letter-spacing:1px;text-transform:uppercase}
.sfbody h2 .org{color:var(--org)}
.sfbody p{font-size:15px;color:var(--muted);line-height:1.9;margin-bottom:13px}
.sfbody ul{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sfbody ul li{font-size:14px;color:rgba(255,255,255,.4);padding-left:16px;position:relative}
.sfbody ul li::before{content:"▹";position:absolute;left:0;color:var(--org)}

.ig6{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.igc{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;transition:all .3s}
.igc:hover{border-color:var(--border);transform:translateY(-3px)}.igc.ft{grid-column:1/3}
.igc img{width:100%;height:190px}.igc.ft img{height:280px}
.ig-body{padding:20px}
.ig-cat{display:block;font-family:var(--mono);font-size:9px;color:var(--org);margin-bottom:8px;letter-spacing:2px;text-transform:uppercase}
.ig-body h3{font-family:var(--display);font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.2;text-transform:uppercase;letter-spacing:.5px}
.igc.ft .ig-body h3{font-size:24px}
.ig-body p{font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:8px}
.ig-meta{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.2)}

.jlist{display:flex;flex-direction:column;gap:10px}
.jcard{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r);padding:20px 24px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;transition:border-color .2s}
.jcard:hover{border-color:var(--border)}
.jcard h3{font-family:var(--display);font-size:19px;font-weight:700;color:#fff;margin-bottom:3px;text-transform:uppercase;letter-spacing:.5px}
.jtag{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--org);display:block;margin-bottom:6px}
.jcard p{font-size:13px;color:var(--muted);line-height:1.5}

.cta-band{position:relative;padding:110px 0;overflow:hidden;background:var(--stl3)}
.cta-band::before{content:'';position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=1800&q=80') center/cover;opacity:.07}
.ctai{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ctax h2{font-family:var(--display);font-size:clamp(42px,5.5vw,70px);font-weight:700;color:#fff;letter-spacing:1px;text-transform:uppercase;line-height:.95;margin-bottom:16px}
.ctax h2 .org{color:var(--org)}
.ctax p{font-size:16px;color:rgba(255,255,255,.48);line-height:1.85;margin-bottom:26px}
.cta-btns{display:flex;gap:13px;flex-wrap:wrap}
.ctaim img{width:100%;height:420px;border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--sh)}

.ph{position:relative;height:420px;display:flex;align-items:flex-end;padding-bottom:60px;background-size:cover;background-position:center}
.pho{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,24,41,.5),rgba(11,24,41,.97))}
.phc{position:relative;z-index:2}
.phc h1{font-family:var(--display);font-size:clamp(50px,7vw,88px);font-weight:700;color:#fff;letter-spacing:2px;text-transform:uppercase;line-height:.9;margin-bottom:12px}
.phc h1 .org{color:var(--org)}.phc p{font-size:16px;color:rgba(255,255,255,.48)}

.cl2{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start}
.cli h2{font-family:var(--display);font-size:36px;font-weight:700;color:#fff;margin:12px 0 16px;letter-spacing:1px;text-transform:uppercase}
.cli h2 .org{color:var(--org)}
.cli p{font-size:15px;color:var(--muted);line-height:1.9;margin-bottom:14px}
.cdet{display:flex;flex-direction:column;gap:13px;margin-bottom:26px}
.cdrow{display:flex;gap:13px;align-items:flex-start}
.cdrow span:first-child{font-size:16px;flex-shrink:0;width:22px}
.cdrow strong{display:block;font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--org);margin-bottom:2px}
.cdrow em{display:block;font-style:normal;font-size:13px;color:var(--muted);line-height:1.5}
.clocimg{width:100%;height:190px;border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--border)}
.cfw{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:40px;box-shadow:var(--sh)}
.cform h3{font-family:var(--display);font-size:26px;font-weight:700;color:#fff;margin-bottom:7px;letter-spacing:1px;text-transform:uppercase}
.csub{font-size:13px;color:var(--muted);margin-bottom:20px}
.cform input,.cform select,.cform textarea{width:100%;padding:11px 14px;border:1px solid var(--border2);border-radius:var(--r);font-size:13px;background:rgba(255,255,255,.04);color:#fff;margin-bottom:12px;transition:border-color .2s;outline:none;font-family:var(--font)}
.cform input::placeholder,.cform textarea::placeholder{color:var(--muted)}
.cform select option{background:var(--stl2);color:#fff}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--org)}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fr2 input{margin-bottom:0}
.fnote{font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center;margin-top:9px}
.smsg{background:var(--org-pale);border:1px solid rgba(232,106,26,.3);color:var(--org-l);padding:20px;border-radius:var(--r);font-family:var(--mono);font-size:12px;line-height:1.7}

.footer{background:var(--stl2);border-top:2px solid var(--org);padding:76px 0 0}
.fi{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:46px;padding-bottom:52px}
.fb p{font-size:12px;color:rgba(255,255,255,.24);line-height:1.8;margin:12px 0 0;max-width:280px}
.fc h4{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:2.5px;color:var(--org);margin-bottom:16px}
.fc ul{display:flex;flex-direction:column;gap:9px}
.fc ul li,.fc ul li a{font-size:12px;color:rgba(255,255,255,.24);transition:color .2s}
.fc ul li a:hover{color:var(--org)}
.fbot{border-top:1px solid var(--border2);padding:18px 0;text-align:center;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.16);letter-spacing:.5px}

.ri{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}
.ri-l{opacity:0;transform:translateX(-22px);transition:opacity .75s ease,transform .75s ease}
.ri-r{opacity:0;transform:translateX(22px);transition:opacity .75s ease,transform .75s ease}
.ri.vis,.ri-l.vis,.ri-r.vis{opacity:1;transform:translate(0)}

@media(max-width:1100px){.svc-grid{grid-template-columns:repeat(2,1fr)}.card6{grid-template-columns:repeat(2,1fr)}.team4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .nl{display:none;position:fixed;inset:0;background:var(--stl);flex-direction:column;justify-content:center;align-items:center;gap:16px;z-index:999}.nl.o{display:flex}
  .hbg{display:flex;z-index:1000}
  .hcont,.split,.ctai,.sfrow,.sfrow.rev,.cl2{grid-template-columns:1fr}
  .sfrow.rev .sfimg{order:0}.sfimg{min-height:220px}
  .si-float,.si-badge{display:none}.si-main{height:300px!important}
  .cases3,.ig6,.tsti{grid-template-columns:1fr 1fr}.igc.ft{grid-column:auto}
  .fi{grid-template-columns:1fr 1fr}.fr2{grid-template-columns:1fr}
}
@media(max-width:600px){.fi,.team4,.cases3,.ig6,.card6,.svc-grid{grid-template-columns:1fr}}