/* ==================================================================
   CSRA Testing & Engineering — SPA stylesheet
   Brand: #e11f27 (red) · #610e12 (maroon) · #4a4b4c / #a6a8aa (greys)
================================================================== */

:root{
  --red:#e11f27;
  --red-600:#c4161d;
  --red-700:#a01218;
  --maroon:#610e12;
  --maroon-deep:#3d080b;
  --ink:#16090b;
  --grey:#4a4b4c;
  --grey-400:#a6a8aa;
  --grey-200:#d9dade;
  --line:#e7e8ec;
  --surface:#f5f6f8;
  --surface-2:#eceef2;
  --white:#fff;

  --shadow-sm:0 1px 2px rgba(22,9,11,.06), 0 2px 8px rgba(22,9,11,.05);
  --shadow-md:0 8px 24px rgba(22,9,11,.09), 0 2px 6px rgba(22,9,11,.05);
  --shadow-lg:0 24px 60px rgba(22,9,11,.16), 0 6px 18px rgba(22,9,11,.07);
  --shadow-red:0 14px 34px rgba(225,31,39,.28);

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --head:'Barlow Condensed', 'Inter', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --wrap:1240px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--body); color:var(--ink); background:var(--white);
  font-size:16.5px; line-height:1.65; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
::selection{background:var(--red); color:#fff}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:200;
  background:linear-gradient(90deg,var(--red),#ff6b47); transition:width .1s linear;
}

/* ==================================================================
   HEADER
================================================================== */
.site-header{position:sticky; top:0; z-index:150}

.topbar{background:var(--maroon-deep); color:#e3d7d8; font-size:12.5px; letter-spacing:.01em}
.topbar-in{display:flex; align-items:center; gap:26px; height:38px; overflow:hidden}
.topbar-item{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.topbar-item svg{width:13px; height:13px; fill:var(--red); flex:none}
.topbar-flag{
  margin-left:auto; white-space:nowrap; font-weight:600; color:#fff;
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; opacity:.75;
}

.nav-in{
  display:flex; align-items:center; gap:28px; height:78px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid var(--line);
  transition:height .3s var(--ease), box-shadow .3s var(--ease);
  max-width:none; padding-inline:max(28px,calc((100vw - var(--wrap))/2));
}
.site-header.stuck .nav-in{height:66px; box-shadow:var(--shadow-md)}

.brand img{height:46px; width:auto; transition:height .3s var(--ease)}
.site-header.stuck .brand img{height:38px}

.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav-link{
  position:relative; padding:10px 14px; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:600; color:var(--grey);
  transition:color .2s, background .2s;
}
.nav-link:hover{color:var(--ink); background:var(--surface)}
.nav-link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--red); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--ink)}
.nav-feed{color:var(--ink)}
.nav-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--red);
  vertical-align:2px; margin-left:5px; box-shadow:0 0 0 0 rgba(225,31,39,.55);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(225,31,39,.5)}
  70%{box-shadow:0 0 0 8px rgba(225,31,39,0)}
  100%{box-shadow:0 0 0 0 rgba(225,31,39,0)}
}
.nav-cta{margin-left:12px}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; margin-left:auto}
.burger span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==================================================================
   BUTTONS / ATOMS
================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px; border-radius:999px; border:1px solid transparent;
  font-size:15px; font-weight:650; letter-spacing:.005em; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn svg{width:16px; height:16px; fill:currentColor; transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn-sm{padding:11px 20px; font-size:14px}

.btn-primary{background:var(--red); color:#fff; box-shadow:var(--shadow-red)}
.btn-primary:hover{background:var(--red-600); box-shadow:0 18px 40px rgba(225,31,39,.34)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--grey-200)}
.btn-ghost:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.btn-light{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(8px)}
.btn-light:hover{background:#fff; color:var(--maroon)}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 18px;
}
.eyebrow::before{content:''; width:26px; height:2px; background:var(--red); border-radius:2px}
.eyebrow.on-dark{color:#ff8a8f}
.eyebrow.on-dark::before{background:#ff8a8f}

h1,h2,h3,h4{font-family:var(--head); font-weight:700; line-height:1.04; letter-spacing:-.015em; margin:0}
h2.section-title{font-size:clamp(2.3rem,4.4vw,3.5rem); margin-bottom:18px}
.section-sub{font-size:1.06rem; color:var(--grey); max-width:62ch; margin:0}

section{position:relative}
.pad{padding:118px 0}
.pad-sm{padding:84px 0}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ==================================================================
   HERO
================================================================== */
.hero{position:relative; min-height:min(92vh,860px); display:flex; align-items:center; overflow:hidden; background:var(--maroon-deep)}
.hero-bg{position:absolute; inset:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.06) translate3d(0,0,0)} to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(30,7,9,.93) 0%, rgba(61,8,11,.72) 40%, rgba(22,9,11,.3) 70%, rgba(22,9,11,.55) 100%),
    radial-gradient(120% 90% at 6% 100%, rgba(225,31,39,.3), transparent 55%);
}
.hero-grid-lines{
  position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:88px 88px; mask-image:radial-gradient(80% 70% at 70% 40%,#000,transparent);
}
.hero-in{position:relative; z-index:2; padding:120px 0 96px; color:#fff}
.hero-in h1{
  font-size:clamp(3rem,6.6vw,5.9rem); color:#fff; max-width:17ch;
  text-transform:uppercase; letter-spacing:-.02em;
}
.hero-in h1 em{font-style:normal; color:#ff7d82; display:block}
.hero-lede{
  margin:26px 0 38px; max-width:56ch; font-size:1.14rem; line-height:1.72;
  color:rgba(255,255,255,.82);
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}

.hero-badges{
  position:relative; z-index:2; margin-top:64px; display:flex; align-items:center; gap:34px;
  flex-wrap:wrap; padding-top:28px; border-top:1px solid rgba(255,255,255,.16);
}
.hero-badges img{height:58px; filter:brightness(0) invert(1); opacity:.75}
.hero-badges span{font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:600}

/* stats strip */
.stats{background:var(--ink); color:#fff; padding:0}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:46px 26px; border-right:1px solid rgba(255,255,255,.09); text-align:center}
.stat:last-child{border-right:0}
.stat b{display:block; font-family:var(--head); font-size:3.3rem; line-height:1; color:#fff}
.stat b i{font-style:normal; color:var(--red)}
.stat span{display:block; margin-top:9px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-400)}

/* ==================================================================
   SERVICES
================================================================== */
.services{background:var(--white)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px; flex-wrap:wrap}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.svc{
  position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:560px;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff; isolation:isolate;
  box-shadow:var(--shadow-md); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.svc:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg)}
.svc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s var(--ease)}
.svc:hover img{transform:scale(1.07)}
.svc::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(22,9,11,.12) 0%, rgba(22,9,11,.5) 34%, rgba(35,10,12,.88) 62%, rgba(22,9,11,.97) 100%);
  transition:background .5s;
}
.svc:hover::after{background:linear-gradient(180deg, rgba(97,14,18,.25) 0%, rgba(97,14,18,.62) 34%, rgba(130,15,20,.93) 64%, rgba(160,18,24,.98) 100%)}
.svc-body{padding:34px 30px 32px}
.svc-num{
  font-family:var(--head); font-size:13px; letter-spacing:.2em; color:#ff8a8f;
  display:block; margin-bottom:12px; font-weight:700;
}
.svc h3{font-size:2rem; text-transform:uppercase; margin-bottom:12px}
.svc p{font-size:.95rem; color:rgba(255,255,255,.78); margin:0 0 18px; line-height:1.62}
.svc ul{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.svc ul li{
  font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.9);
}
.svc-link{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#fff}
.svc-link svg{width:15px; height:15px; fill:var(--red); transition:transform .3s var(--ease)}
.svc:hover .svc-link svg{transform:translateX(5px); fill:#fff}

/* ==================================================================
   APPROACH
================================================================== */
.approach{background:var(--surface); overflow:hidden}
.approach-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:76px; align-items:center}
.approach-media{position:relative}
.approach-media img{border-radius:var(--r-lg); box-shadow:var(--shadow-lg); aspect-ratio:4/3.4; object-fit:cover}
.approach-media::before{
  content:''; position:absolute; inset:-22px -22px 40px 40px; border-radius:var(--r-xl);
  border:1px solid var(--grey-200); z-index:-1;
}
.approach-chip{
  position:absolute; right:-26px; bottom:44px; background:var(--red); color:#fff;
  padding:24px 28px; border-radius:var(--r); box-shadow:var(--shadow-red); max-width:230px;
}
.approach-chip b{display:block; font-family:var(--head); font-size:2.9rem; line-height:1}
.approach-chip span{font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; opacity:.92}

.steps{list-style:none; margin:34px 0 0; padding:0; display:grid; gap:2px}
.step{display:flex; gap:22px; padding:24px 0; border-top:1px solid var(--grey-200)}
.step:last-child{border-bottom:1px solid var(--grey-200)}
.step-n{
  flex:none; width:44px; height:44px; border-radius:12px; background:var(--white);
  border:1px solid var(--grey-200); display:grid; place-items:center;
  font-family:var(--head); font-size:1.2rem; color:var(--red); font-weight:700;
  transition:.3s var(--ease);
}
.step:hover .step-n{background:var(--red); color:#fff; border-color:var(--red); transform:rotate(-6deg)}
.step h4{font-size:1.35rem; margin-bottom:6px}
.step p{margin:0; font-size:.94rem; color:var(--grey); line-height:1.6}

/* ==================================================================
   INDUSTRIES
================================================================== */
.industries{background:var(--ink); color:#fff; overflow:hidden}
.industries .section-sub{color:var(--grey-400)}
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); overflow:hidden; margin-top:52px}
.ind{
  background:var(--ink); padding:40px 32px; position:relative; overflow:hidden;
  transition:background .4s var(--ease);
}
.ind::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red);
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);
}
.ind:hover{background:#1f0c0f}
.ind:hover::before{transform:scaleY(1)}
.ind svg{width:30px; height:30px; fill:var(--red); margin-bottom:20px}
.ind h4{font-size:1.5rem; text-transform:uppercase; margin-bottom:9px}
.ind p{margin:0; font-size:.92rem; color:var(--grey-400); line-height:1.6}

/* ==================================================================
   FEED TEASER (home)
================================================================== */
.teaser{background:var(--white)}
.teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}

/* ==================================================================
   CTA
================================================================== */
.cta{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(115deg,var(--maroon-deep),var(--maroon) 46%,var(--red-700));
}
.cta::before{
  content:''; position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:70px 70px; mask-image:radial-gradient(70% 100% at 85% 50%,#000,transparent);
}
.cta-in{position:relative; display:flex; align-items:center; justify-content:space-between; gap:56px; flex-wrap:wrap}
.cta h2{font-size:clamp(2.2rem,4.2vw,3.4rem); text-transform:uppercase; max-width:16ch}
.cta p{margin:16px 0 0; color:rgba(255,255,255,.78); max-width:48ch}

/* ==================================================================
   CONTACT
================================================================== */
.contact{background:var(--surface)}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start}
.contact-cards{display:grid; gap:14px; margin-top:34px}
.ccard{
  display:flex; gap:18px; align-items:flex-start; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r); padding:22px 24px;
  transition:.35s var(--ease);
}
.ccard:hover{border-color:var(--red); transform:translateX(6px); box-shadow:var(--shadow-sm)}
.ccard-ico{flex:none; width:42px; height:42px; border-radius:11px; background:rgba(225,31,39,.09); display:grid; place-items:center}
.ccard-ico svg{width:19px; height:19px; fill:var(--red)}
.ccard small{display:block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-400); font-weight:600; margin-bottom:3px}
.ccard b{font-size:1.02rem; font-weight:600; font-family:var(--body); color:var(--ink)}

.form{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:38px; box-shadow:var(--shadow-sm)}
.form h3{font-size:1.9rem; text-transform:uppercase; margin-bottom:6px}
.form > p{margin:0 0 26px; font-size:.94rem; color:var(--grey)}
.field{margin-bottom:16px}
.field label{display:block; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--grey); margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--grey-200); border-radius:10px;
  font:inherit; font-size:15px; color:var(--ink); background:var(--white);
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{resize:vertical; min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,31,39,.13);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-note{margin:14px 0 0; font-size:12.5px; color:var(--grey-400)}
.form-sent{
  display:none; margin-top:16px; padding:14px 16px; border-radius:10px;
  background:rgba(225,31,39,.07); border:1px solid rgba(225,31,39,.22);
  color:var(--maroon); font-size:14px; font-weight:600;
}
.form-sent.show{display:block}

/* ==================================================================
   FEED PAGE
================================================================== */
.feed-hero{
  background:linear-gradient(120deg,var(--maroon-deep),var(--maroon) 55%,var(--red-700));
  color:#fff; padding:74px 0 84px; position:relative; overflow:hidden;
}
.feed-hero::before{
  content:''; position:absolute; inset:0; opacity:.15;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:76px 76px; mask-image:radial-gradient(80% 90% at 20% 20%,#000,transparent);
}
.feed-hero-in{position:relative}
.feed-hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem); text-transform:uppercase; max-width:16ch}
.feed-hero p{margin:18px 0 0; max-width:56ch; color:rgba(255,255,255,.8); font-size:1.06rem}

/* toolbar — matches reference layout */
.feed-toolbar{
  position:sticky; top:104px; z-index:60; background:var(--surface);
  border-bottom:1px solid var(--line); padding:18px 0;
}
.site-header.stuck ~ #app .feed-toolbar{top:92px}
.toolbar-in{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  padding:11px 24px; border-radius:999px; background:var(--white);
  border:1px solid var(--grey-200); font-size:14.5px; font-weight:600; color:var(--grey);
  transition:.28s var(--ease);
}
.chip:hover{border-color:var(--red); color:var(--red)}
.chip.active{background:var(--maroon); border-color:var(--maroon); color:#fff; box-shadow:var(--shadow-sm)}
.chip .cnt{opacity:.55; font-size:12.5px; margin-left:5px}

.search{position:relative; margin-left:auto; min-width:330px; flex:1; max-width:430px}
.search svg{position:absolute; left:17px; top:50%; transform:translateY(-50%); width:17px; height:17px; fill:var(--grey-400)}
.search input{
  width:100%; padding:13px 18px 13px 44px; border-radius:999px;
  border:1px solid var(--grey-200); background:var(--white); font:inherit; font-size:15px;
  transition:border-color .2s, box-shadow .2s;
}
.search input:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,31,39,.12)}

.feed-body{background:var(--surface); padding:38px 0 110px; min-height:60vh}
.feed-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}

/* post card — mirrors the reference screenshot */
.pcard{
  background:var(--white); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pcard:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg)}
.pcard-media{position:relative; aspect-ratio:16/10.4; overflow:hidden; background:var(--surface-2)}
.pcard-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.pcard-badge{
  position:absolute; top:14px; right:14px; background:var(--maroon); color:#fff;
  font-size:12.5px; font-weight:650; padding:6px 16px; border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.24);
}
.pcard-badge.is-news{background:var(--red)}
.pcard-badge.is-services{background:var(--grey)}
.pcard-in{padding:22px 24px 20px; display:flex; flex-direction:column; flex:1}
.pcard h3{
  font-family:var(--body); font-size:1.28rem; font-weight:700; line-height:1.32;
  letter-spacing:-.012em; margin:0 0 12px;
}
.pcard h3 a{
  color:var(--maroon); text-decoration:underline; text-decoration-thickness:1.5px;
  text-underline-offset:3px; transition:color .25s;
}
.pcard:hover h3 a{color:var(--red)}
.pcard p{margin:0 0 20px; font-size:.95rem; color:var(--grey); line-height:1.62}
.pcard-foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.pcard-date{font-size:13.5px; color:var(--grey); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--grey-200)}
.pcard-more{
  font-size:13.8px; font-weight:650; color:var(--maroon);
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
  transition:color .25s, transform .25s var(--ease);
}
.pcard:hover .pcard-more{color:var(--red)}
.pcard-more:hover{transform:translateX(3px)}

.feed-empty{text-align:center; padding:90px 20px; color:var(--grey)}
.feed-empty h3{font-size:2rem; margin-bottom:10px; color:var(--ink)}
.feed-count{font-size:13.5px; color:var(--grey); margin:0 0 22px; letter-spacing:.02em}
.feed-count b{color:var(--ink)}

/* ==================================================================
   POST DETAIL
================================================================== */
.post-hero{position:relative; min-height:min(66vh,600px); display:flex; align-items:flex-end; overflow:hidden; background:var(--maroon-deep)}
.post-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.post-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(22,9,11,.4) 0%,rgba(61,8,11,.82) 60%,rgba(61,8,11,.97) 100%);
}
.post-hero-in{position:relative; z-index:2; color:#fff; padding:80px 0 62px; max-width:900px}
.post-hero h1{font-size:clamp(2.1rem,4.4vw,3.7rem); line-height:1.08; margin:16px 0 0; text-transform:none; letter-spacing:-.02em}
.post-meta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; font-size:13.5px; color:rgba(255,255,255,.72)}
.post-meta .dot{width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.4)}
.post-cat{
  display:inline-block; background:var(--red); color:#fff; font-size:12px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; padding:6px 15px; border-radius:999px;
}
.back-link{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color:rgba(255,255,255,.75); margin-bottom:6px; transition:color .2s;
}
.back-link:hover{color:#fff}
.back-link svg{width:15px; height:15px; fill:currentColor}

.post-wrap{background:var(--white); padding:80px 0 40px}
.post-layout{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:64px; align-items:start; max-width:1080px; margin:0 auto}
.article{font-size:1.06rem; line-height:1.82; color:#2b2224; max-width:70ch}
.article .lead{font-size:1.24rem; line-height:1.68; color:var(--ink); font-weight:450}
.article h2{font-size:1.95rem; margin:44px 0 14px; color:var(--ink)}
.article h3{font-size:1.4rem; margin:32px 0 10px; color:var(--maroon)}
.article p{margin:0 0 20px}
.article ul,.article ol{margin:0 0 22px; padding-left:22px}
.article li{margin-bottom:10px}
.article li strong{color:var(--ink)}
.article blockquote{
  margin:32px 0; padding:24px 28px; border-left:3px solid var(--red);
  background:var(--surface); border-radius:0 var(--r) var(--r) 0;
  font-size:1.12rem; line-height:1.6; color:var(--maroon); font-weight:500;
}
.article em{font-style:italic}

.aside{position:sticky; top:130px; display:grid; gap:22px}
.aside-box{border:1px solid var(--line); border-radius:var(--r); padding:24px}
.aside-box h4{font-size:1.15rem; letter-spacing:.03em; text-transform:uppercase; margin-bottom:14px; font-family:var(--body); font-weight:700; font-size:.82rem; color:var(--grey-400)}
.tag-list{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--surface); color:var(--grey); border:1px solid var(--line)}
.aside-cta{background:linear-gradient(150deg,var(--maroon),var(--red-700)); color:#fff; border:0}
.aside-cta h4{color:rgba(255,255,255,.6)}
.aside-cta p{font-size:.92rem; color:rgba(255,255,255,.82); margin:0 0 18px; line-height:1.6}

.related{background:var(--surface); padding:80px 0 110px}
.related h2{font-size:2.2rem; text-transform:uppercase; margin-bottom:34px}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}

/* ==================================================================
   FOOTER
================================================================== */
.site-footer{background:var(--ink); color:var(--grey-400); padding:78px 0 0}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:52px; padding-bottom:56px}
.foot-logo{height:52px; width:auto; margin-bottom:22px}
.foot-brand p{margin:0 0 24px; font-size:.95rem; line-height:1.7; max-width:42ch}
.foot-aashto{height:64px; width:auto; background:#fff; padding:8px 10px; border-radius:8px}
.foot-col h4{font-family:var(--body); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:#fff; margin-bottom:18px; font-weight:700}
.foot-col a,.foot-col span{display:block; font-size:.94rem; margin-bottom:11px; line-height:1.6; transition:color .2s}
.foot-col a:hover{color:var(--red)}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding:22px 28px; border-top:1px solid rgba(255,255,255,.08); font-size:13px;
}
.foot-note{color:var(--grey)}

.to-top{
  position:fixed; right:26px; bottom:26px; z-index:120;
  width:46px; height:46px; border-radius:50%; background:var(--red); display:grid; place-items:center;
  box-shadow:var(--shadow-red); opacity:0; pointer-events:none;
  transform:translateY(14px); transition:.35s var(--ease);
}
.to-top.show{opacity:1; pointer-events:auto; transform:none}
.to-top svg{width:20px; height:20px; fill:#fff}
.to-top:hover{background:var(--red-600); transform:translateY(-3px)}

/* ==================================================================
   RESPONSIVE
================================================================== */
@media (max-width:1080px){
  .approach-grid{grid-template-columns:1fr; gap:52px}
  .approach-chip{right:20px}
  .contact-grid{grid-template-columns:1fr; gap:44px}
  .post-layout{grid-template-columns:1fr; gap:44px}
  .aside{position:static; grid-template-columns:1fr 1fr; display:grid}
  .foot-grid{grid-template-columns:1fr 1fr; gap:40px}
}
@media (max-width:920px){
  .svc-grid,.teaser-grid,.feed-grid,.related-grid,.ind-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid rgba(255,255,255,.09)}
  .stat:nth-child(2){border-right:0}
  .topbar-hide{display:none}
}
@media (max-width:860px){
  .burger{display:flex}
  .nav{
    position:fixed; inset:116px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); padding:14px 20px 26px; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg); transform:translateY(-130%); transition:transform .4s var(--ease);
    margin-left:0; max-height:calc(100vh - 116px); overflow:auto;
  }
  .nav.open{transform:none}
  .nav-link{padding:15px 6px; border-bottom:1px solid var(--line); border-radius:0; font-size:16px}
  .nav-link::after{display:none}
  .nav-cta{margin:18px 0 0; justify-content:center}
  .pad{padding:80px 0}
  .pad-sm{padding:60px 0}
  .hero-in{padding:88px 0 70px}
  .search{min-width:100%; max-width:none; margin-left:0}
  .feed-toolbar{top:78px; position:relative}
  .cta-in{flex-direction:column; align-items:flex-start; gap:28px}
}
@media (max-width:620px){
  .wrap{padding:0 20px}
  .svc-grid,.teaser-grid,.feed-grid,.related-grid,.ind-grid,.stats-grid,.field-row,.foot-grid,.aside{grid-template-columns:1fr}
  .stat{border-right:0}
  .approach-chip{position:static; margin-top:18px; max-width:none}
  .form{padding:26px 22px}
  .hero-badges{gap:20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}