/* Loveland Barricade visual system — restrained industrial palette */

:root{
  --safety-orange:#f06423;
  --safety-orange-dark:#d95518;
  --industrial-black:#0e0f10;
  --industrial-charcoal:#181a1c;
  --industrial-paper:#f4f3ef;
  --industrial-gray:#e9e7e2;
}

/* --------------------------------------------------------------------------
   BRAND + LOGO
   Keep the supplied logo intact. No recolor mask or synthetic arrow overlay.
   -------------------------------------------------------------------------- */
.brand{
  position:relative;
  display:block;
  width:190px;
  height:73px;
  flex:0 0 auto;
  background:url('/assets/images/loveland-barricade-logo-white.png') left center / contain no-repeat;
  text-decoration:none;
}
.brand span{display:none!important}
.brand::after{display:none!important}
.brand-footer{
  width:215px;
  min-width:215px;
  height:83px;
  background-image:url('/assets/images/loveland-barricade-logo-white.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:left center;
}

/* --------------------------------------------------------------------------
   TOP STRIP + NAV
   -------------------------------------------------------------------------- */
.colorado-bar{
  background:#111820;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.colorado-bar-inner{
  min-height:40px;
  gap:24px;
  color:#f5f5f5;
  font-size:.72rem;
  letter-spacing:.08em;
}
.colorado-bar-inner>span:not(.co-mark):not(:last-child)::after{
  background:#a8adb3;
  width:3px;
  height:3px;
}
.co-mark{
  width:36px;
  height:22px;
  overflow:hidden;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(to bottom,#003f87 0 33.33%,#fff 33.33% 66.66%,#003f87 66.66% 100%);
}
.co-c{
  position:absolute;
  left:7px;
  top:1px;
  font-family:Arial Black,Arial,sans-serif;
  font-size:18px;
  line-height:18px;
  color:#bf0a30;
}
.co-dot{
  width:5px;
  height:5px;
  left:14px;
  top:8px;
  background:#ffd447;
}

.site-header{
  background:rgba(14,15,16,.98);
  border-top:0;
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 6px 24px rgba(0,0,0,.12);
}
.nav-wrap{min-height:88px}
.site-nav{gap:22px}
.site-nav a{
  color:#d8d8d8;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.site-nav a:hover{color:#fff}
.site-nav a[aria-current="page"]{color:#fff;position:relative}
.site-nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  height:2px;
  background:var(--safety-orange);
}
.nav-cta{
  background:transparent!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.45);
  border-radius:3px;
  padding:10px 16px;
  box-shadow:none;
}
.nav-cta:hover{
  border-color:var(--safety-orange);
  color:#fff!important;
  background:rgba(240,100,35,.08)!important;
}
.nav-cta[aria-current="page"]::after{display:none}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,.page-hero h1,.hero h1{
  font-family:Arial Narrow,Arial,Helvetica,sans-serif!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
  line-height:.94!important;
  text-transform:uppercase;
}
.hero h1 span{color:#fff}
.hero h1 span::after{
  content:"";
  display:block;
  width:90px;
  height:5px;
  margin-top:16px;
  background:var(--safety-orange);
}
.page-hero h1{font-size:clamp(2.85rem,5vw,5rem)}
.hero h1{font-size:clamp(3.25rem,6.1vw,6.25rem);max-width:860px}
h2{letter-spacing:-.045em;line-height:.98}
.stat-card strong{
  font-family:Arial Narrow,Arial,Helvetica,sans-serif!important;
  font-weight:900!important;
  letter-spacing:-.025em;
}
.eyebrow,.card-kicker,.site-footer h3{
  font-family:Inter,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.12em;
}
.eyebrow{color:#d9dde1}
.eyebrow.dark{color:#5b6167}

/* --------------------------------------------------------------------------
   BUTTONS + INTERACTION
   -------------------------------------------------------------------------- */
.btn{border-radius:3px;letter-spacing:-.01em}
.btn-primary{
  background:var(--industrial-charcoal);
  color:#fff;
  border:1px solid var(--safety-orange);
  box-shadow:none;
}
.btn-primary:hover{background:#24272a}
.btn:focus-visible,.site-nav a:focus-visible,.brand:focus-visible,.text-link:focus-visible{
  outline:2px solid var(--safety-orange);
  outline-offset:4px;
}
.text-link{color:#b34f23}

/* --------------------------------------------------------------------------
   HOMEPAGE HERO
   -------------------------------------------------------------------------- */
.hero{min-height:640px}
.hero-media{
  background-image:url('/assets/images/loveland-barricade-expo.webp');
  background-position:center 54%;
  filter:saturate(.88) contrast(1.03);
}
.hero-shade{
  background:
    linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 42%,rgba(0,0,0,.40) 70%,rgba(0,0,0,.18) 100%),
    linear-gradient(0deg,rgba(0,0,0,.54),transparent 55%);
}
.hero-copy{max-width:690px}
.hero-proof span::before{background:var(--safety-orange)}

/* --------------------------------------------------------------------------
   PAGE HEROES
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:78px 0 64px;
  border-bottom:2px solid var(--safety-orange);
}
.page-hero::after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:18px;
  width:120px;
  height:6px;
  background:var(--safety-orange);
  transform:skewX(-36deg);
  opacity:.9;
}
.page-hero .container{position:relative;z-index:1}
.page-hero p{max-width:760px}

/* --------------------------------------------------------------------------
   SECTION RHYTHM + INDUSTRIAL DETAILS
   -------------------------------------------------------------------------- */
.intro-band{
  padding:42px 0;
  background:#f2f1ed;
  border-top:1px solid #dedbd5;
  border-bottom:1px solid #dedbd5;
  color:#151719;
}
.intro-band .eyebrow.dark{color:#6b7075}
#services.section{padding-top:72px;padding-bottom:76px}
.split-heading{grid-template-columns:1.08fr .92fr;gap:58px;align-items:center;margin-bottom:32px}
.split-heading h2{font-size:clamp(2.2rem,3.8vw,3.65rem);max-width:760px}
.split-heading>p{max-width:520px;margin:0 0 6px auto;font-size:1.02rem;line-height:1.65}

.section-orange,
.work-strip{
  background:#e9e7e2!important;
  color:#16181a!important;
  border-top:1px solid #d4d0ca;
  border-bottom:1px solid #d4d0ca;
}
.work-strip .eyebrow.dark{color:#666b70}
.work-list li{
  background:#fff;
  border-color:#d0cdc7;
  border-radius:4px;
  color:#24272a;
}
.section-light,.home-resources{background:var(--industrial-paper)}
.site-footer{border-top:2px solid #2b2d30}

.service-card,.info-card,.resource-card,.contact-card,.point-card,.stat-card{border-radius:6px}
.service-card{min-height:340px}
.service-card.traffic::before{background-image:url('/assets/images/colorado-contractor-event.webp')}
.service-card.equipment::before{background-image:url('/assets/images/loveland-barricade-expo.webp')}
.service-card.marking::before{background-image:url('/assets/images/rumble-hog.webp');background-position:center 52%}
.service-card::after{background:linear-gradient(180deg,rgba(0,0,0,.08) 16%,rgba(0,0,0,.9) 94%)}
.service-card h3{letter-spacing:-.025em}
.card-kicker{color:#c7cbd0}

.stat-card{position:relative;overflow:hidden;border-color:#34363a}
.stat-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--safety-orange);
}

/* --------------------------------------------------------------------------
   REAL-WORK PHOTOGRAPHY
   -------------------------------------------------------------------------- */
.real-work-gallery{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:16px;margin-top:42px}
.real-work-card{position:relative;min-height:280px;overflow:hidden;border-radius:6px;border:1px solid #2b2b2e;background:#171719}
.real-work-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.real-work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.88) 100%)}
.real-work-copy{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.real-work-copy h3{margin:0 0 6px;color:#fff;font-size:1.18rem}
.real-work-copy p{margin:0!important;color:#d6d6d6!important;font-size:.9rem}

/* --------------------------------------------------------------------------
   RESOURCE CARDS + EDITORIAL PAGES
   -------------------------------------------------------------------------- */
.home-resources .resource-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.resource-heading-row{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:32px}
.resource-heading-row>div{max-width:760px}
.resource-heading-row .text-link{white-space:nowrap;margin-bottom:18px}
.resource-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.resource-card:hover{transform:translateY(-3px);box-shadow:0 15px 34px rgba(0,0,0,.10);border-color:#c8c4bc}
.resource-card .resource-date{font-size:.78rem;color:#7d7d7d;margin-top:10px}

.article-hero{padding-bottom:58px}
.article-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px;color:#aaa;font-size:.82rem;font-weight:700}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:62px;align-items:start}
.article-body{max-width:820px}
.article-body>p:first-of-type{font-size:1.18rem;color:#333}
.article-body p,.article-body li{color:#4f5357;font-size:1rem;line-height:1.75}
.article-body h2{font-size:clamp(1.8rem,3vw,2.85rem);margin:48px 0 16px}
.article-body h3{font-size:1.32rem;margin:32px 0 10px}
.article-body ul,.article-body ol{padding-left:24px}
.article-body li{margin:7px 0}
.article-aside{position:sticky;top:116px;display:grid;gap:16px}
.article-aside-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--safety-orange);border-radius:6px;padding:22px}
.article-aside-card h3{margin-bottom:10px}
.article-aside-card p{color:#62666a;font-size:.92rem}
.article-aside-card a:not(.btn){display:block;text-decoration:none;font-weight:800;color:#7a3a20;margin:9px 0}
.article-callout{margin:34px 0;padding:22px 24px;border-left:3px solid var(--safety-orange);background:#fff;border-radius:0 6px 6px 0}
.article-callout strong{display:block;margin-bottom:6px}
.related-resources{border-top:1px solid var(--line);margin-top:52px;padding-top:34px}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.related-link{display:block;background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px;text-decoration:none;font-weight:850}
.related-link span{display:block;color:#7a3a20;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}

.footer-grid>div:first-child>p{max-width:520px}
.section-black .feature-copy h2{font-size:clamp(2.3rem,4vw,3.9rem)}
.work-strip h2{font-size:clamp(2.25rem,4vw,3.9rem)}

@media(max-width:980px){
  .site-nav a[aria-current="page"]::after{display:none}
  .real-work-gallery{grid-template-columns:1fr 1fr}
  .real-work-card:first-child{grid-column:1/-1}
  .article-layout{grid-template-columns:1fr}
  .article-aside{position:static;grid-template-columns:1fr 1fr}
  .resource-heading-row{align-items:flex-start;flex-direction:column;gap:0}
}

@media(max-width:720px){
  .brand{width:166px;height:64px}
  .brand-footer{width:190px;min-width:190px;height:73px}
  .nav-wrap{min-height:76px}
  .site-nav{top:76px}
  .hero{min-height:600px}
  .hero-media{background-position:58% center}
  .hero h1{font-size:clamp(2.75rem,12.5vw,4.35rem)}
  .page-hero h1{font-size:clamp(2.65rem,12vw,4.25rem)}
  .split-heading h2{font-size:clamp(2.05rem,10vw,3rem)}
  .real-work-gallery,.article-aside,.related-grid{grid-template-columns:1fr}
  .real-work-card:first-child{grid-column:auto}
  .real-work-card{min-height:240px}
  .article-layout{gap:34px}
  .article-body h2{margin-top:38px}
  .page-hero::after{width:100px;height:5px;right:-28px}
  .colorado-bar-inner{gap:20px}
}