/* =====================================================================
   Northline Transport — Bold Industrial / Hi-Vis design system
   Shared across all pages. Edit colours/fonts here once.
   ===================================================================== */

:root{
  --char:#17181c;      /* near-black charcoal */
  --char-2:#22242a;
  --char-3:#2c2f36;
  --orange:#FF6A00;    /* safety orange (primary accent) */
  --orange-d:#e85f00;
  --amber:#FFC400;     /* hi-vis amber */
  --white:#ffffff;
  --steel:#EEF1F4;     /* light steel background */
  --steel-2:#e2e6eb;
  --ink:#1d1f24;       /* body text */
  --muted:#6a7178;     /* secondary text */
  --line:#dde2e8;      /* hairlines */
  --shadow:0 24px 50px -26px rgba(23,24,28,.35);
  --shadow-d:0 18px 40px -16px rgba(0,0,0,.55);
  --maxw:1200px;
  --clip:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow Semi Condensed',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--white);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  text-transform:uppercase;line-height:.96;letter-spacing:.01em;font-weight:400;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;border:0;
  font-family:'Barlow Semi Condensed';text-transform:uppercase;font-weight:700;
  letter-spacing:.05em;font-size:1rem;padding:.9rem 1.6rem;transition:.2s;
  clip-path:var(--clip);
}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-d);transform:translateY(-2px)}
.btn-dark{background:var(--char);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-amber{background:var(--amber);color:var(--char)}
.btn-amber:hover{filter:brightness(.95);transform:translateY(-2px)}
.btn-line{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);clip-path:none;border-radius:2px}
.btn-line:hover{border-color:var(--amber);color:var(--amber)}
.btn-line-dark{background:transparent;color:var(--char);border:2px solid var(--char);clip-path:none}
.btn-line-dark:hover{background:var(--char);color:#fff}
.btn-lg{font-size:1.1rem;padding:1rem 2rem}

/* ---------- Eyebrow / tags ---------- */
.tag{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;color:var(--orange)}
.tag:before{content:"";width:26px;height:3px;background:var(--orange)}
.tag.light{color:var(--amber)}
.tag.light:before{background:var(--amber)}

/* ---------- Hazard stripe ---------- */
.hazard{height:8px;background:repeating-linear-gradient(45deg,var(--amber) 0 18px,var(--char) 18px 36px)}

/* ---------- Nav ---------- */
header.nav{position:sticky;top:0;z-index:60;background:var(--char)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:78px;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;font-family:'Anton';font-size:1.5rem;color:#fff;letter-spacing:.02em}
.logo .mark{width:40px;height:40px;background:var(--orange);display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,85% 100%,0 100%);flex:0 0 auto}
.logo small{display:block;font-family:'Barlow Semi Condensed';font-weight:600;font-size:.6rem;
  letter-spacing:.22em;color:#8b9099;text-transform:uppercase;margin-top:-2px}
.nav-links{display:flex;gap:1.9rem;align-items:center}
.nav-links a{color:#cfd3d8;text-transform:uppercase;font-weight:600;letter-spacing:.06em;font-size:.92rem;padding:.3rem 0;position:relative}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:var(--amber)}
.nav-links a.active:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--orange)}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-phone{color:#fff;font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.4rem}
.nav-phone:hover{color:var(--amber)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:#fff;margin:5px auto;transition:.3s}
@media(max-width:980px){
  .nav-links{position:fixed;inset:78px 0 auto 0;background:var(--char-2);flex-direction:column;
    align-items:flex-start;gap:0;padding:0 26px;max-height:0;overflow:hidden;transition:max-height .35s ease;border-top:1px solid #33363d}
  .nav-links a{width:100%;padding:1rem 0;border-bottom:1px solid #2f3239;font-size:1.05rem}
  .nav-links.open{max-height:420px}
  .nav-toggle{display:block}
  .nav-phone span.lbl{display:none}
  body.nav-open{overflow:hidden}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}
@media(max-width:520px){.nav-phone{display:none}.logo{font-size:1.3rem}}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.32s}.reveal.d4{transition-delay:.44s}

/* ---------- Page hero (sub pages) ---------- */
.pagehero{position:relative;background:var(--char);color:#fff;overflow:hidden;padding:70px 0 64px}
.pagehero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 320px at 85% -20%,rgba(255,106,0,.28),transparent 65%)}
.pagehero .wrap{position:relative;z-index:2}
.pagehero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin:.8rem 0 .6rem}
.pagehero h1 .hl{color:var(--orange)}
.pagehero p{color:#bcc2c9;max-width:560px;font-size:1.12rem}
.crumb{font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:#8b9099}
.crumb a:hover{color:var(--amber)}

/* ---------- Home hero ---------- */
.hero{position:relative;background:var(--char);color:#fff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:580px}
.hero-left{padding:74px 0 84px;position:relative;z-index:2}
.hero h1{font-size:clamp(3rem,7vw,5.6rem);margin:1.1rem 0}
.hero h1 .hl{color:var(--orange)}
.hero .lede{font-size:1.22rem;color:#bcc2c9;max-width:480px;margin-bottom:2rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-right{position:relative;align-self:stretch;min-height:580px;
  background-size:cover;background-position:center;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.hero-right:after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(255,106,0,.30),rgba(23,24,28,.45))}
.hero-right .badge{position:absolute;left:18%;bottom:30px;z-index:2;background:var(--amber);color:var(--char);
  font-family:'Anton';font-size:1.05rem;padding:.7rem 1.1rem;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-right{display:none}
  .hero-left{padding:56px 0 64px}
}

/* ---------- Marquee strip ---------- */
.strip{background:var(--orange);color:#fff;overflow:hidden;white-space:nowrap;padding:.7rem 0}
.strip .run{display:inline-block;font-family:'Anton';text-transform:uppercase;letter-spacing:.04em;
  font-size:1.15rem;animation:scroll 26s linear infinite}
.strip .run span{margin:0 1.4rem;opacity:.95}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{padding:86px 0}
.section-steel{background:var(--steel)}
.section-dark{background:var(--char);color:#fff}
.sec-head{margin-bottom:2.6rem;max-width:680px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2.1rem,4.5vw,3.3rem);margin:.6rem 0;color:var(--char)}
.section-dark .sec-head h2{color:#fff}
.sec-head p{color:var(--muted);font-size:1.08rem}
.section-dark .sec-head p{color:#bcc2c9}

/* ---------- Service cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--white);border:2px solid var(--char);padding:1.7rem;position:relative;transition:.22s}
.card:hover{background:var(--char);color:#fff;transform:translateY(-5px)}
.card:hover h3,.card:hover .num{color:var(--amber)}
.card:hover p{color:#c7ccd2}
.card:hover .card-link{color:var(--amber)}
.num{font-family:'Anton';font-size:1.1rem;color:var(--orange)}
.card .ic{width:54px;height:54px;background:var(--steel);display:grid;place-items:center;
  margin:.8rem 0 1rem;clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}
.card:hover .ic{background:var(--orange)}
.card .ic svg{width:28px;height:28px;stroke:var(--char);fill:none;stroke-width:2.2}
.card:hover .ic svg{stroke:#fff}
.card h3{font-size:1.5rem;color:var(--char);margin-bottom:.4rem}
.card p{color:var(--muted);font-size:1rem}
.card-link{display:inline-block;margin-top:.9rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:.85rem;color:var(--orange)}

/* ---------- Stats ---------- */
.stats{background:var(--char);color:#fff}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:60px 0}
.stats .s{border-right:1px solid #34373d}
.stats .s:last-child{border:0}
.stats .s b{font-family:'Anton';font-size:3rem;color:var(--amber);display:block}
.stats .s span{display:block;text-transform:uppercase;letter-spacing:.08em;color:#aeb4bb;font-size:.85rem;margin-top:.3rem}
@media(max-width:640px){.stats-in{grid-template-columns:1fr 1fr;gap:2rem}.stats .s:nth-child(2){border:0}}

/* ---------- Split / about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.split.reverse .split-media{order:2}
.split-media{position:relative}
.split-media img{width:100%;height:100%;object-fit:cover;border:3px solid var(--char)}
.split-media .frame{position:absolute;left:-16px;bottom:-16px;width:120px;height:120px;
  border-left:6px solid var(--orange);border-bottom:6px solid var(--orange);z-index:-1}
.split-media .stat-badge{position:absolute;right:-14px;top:-14px;background:var(--orange);color:#fff;
  font-family:'Anton';text-transform:uppercase;text-align:center;padding:1rem 1.2rem;line-height:1;
  clip-path:polygon(0 0,100% 0,90% 100%,0 100%)}
.split-media .stat-badge b{font-size:2.1rem;display:block}
.split-media .stat-badge span{font-size:.72rem;letter-spacing:.05em}
.split h2{font-size:clamp(2rem,4vw,3rem);color:var(--char);margin:.6rem 0 1rem}
.split p{color:var(--muted);margin-bottom:1rem}
.ticklist{list-style:none;margin:1.2rem 0}
.ticklist li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem;font-weight:500}
.ticklist svg{flex:0 0 auto;margin-top:3px}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:2rem}.split.reverse .split-media{order:0}}

/* ---------- Feature row (why us) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr}}
.feat{padding:1.6rem;background:var(--char-2);border-top:4px solid var(--orange)}
.feat .ic{width:48px;height:48px;display:grid;place-items:center;background:var(--orange);margin-bottom:1rem;
  clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}
.feat .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.2}
.feat h3{font-size:1.3rem;color:#fff;margin-bottom:.35rem}
.feat p{color:#aeb4bb;font-size:.96rem}

/* ---------- Gallery ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:185px;gap:12px}
.gal-grid figure{position:relative;overflow:hidden;background:#cdd3da;border:2px solid var(--char);cursor:pointer}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:.5s;filter:saturate(1.05)}
.gal-grid figure:hover img{transform:scale(1.08)}
.gal-grid figure:hover figcaption{transform:translateY(0)}
.gal-grid .wide{grid-column:span 2}
.gal-grid .tall{grid-row:span 2}
.gal-grid figcaption{position:absolute;left:0;bottom:0;background:var(--orange);color:#fff;
  font-family:'Anton';text-transform:uppercase;font-size:.85rem;padding:.3rem .7rem;
  clip-path:polygon(0 0,100% 0,90% 100%,0 100%);transform:translateY(110%);transition:.3s}
.gal-empty{padding:3rem;text-align:center;border:2px dashed var(--orange);color:var(--muted)}
@media(max-width:760px){.gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px}.gal-grid .wide{grid-column:span 2}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(15,16,19,.92);display:none;
  align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:84vh;border:3px solid var(--orange);object-fit:contain}
.lightbox .lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;
  font-family:'Anton';text-transform:uppercase;letter-spacing:.04em}
.lightbox .lb-close,.lightbox .lb-nav{position:absolute;background:var(--orange);color:#fff;border:0;
  cursor:pointer;font-family:'Anton';display:grid;place-items:center}
.lightbox .lb-close{top:22px;right:22px;width:46px;height:46px;font-size:1.4rem}
.lightbox .lb-nav{top:50%;transform:translateY(-50%);width:50px;height:64px;font-size:1.6rem}
.lightbox .lb-prev{left:18px}.lightbox .lb-next{right:18px}
.lightbox button:hover{background:var(--orange-d)}

/* ---------- Testimonials ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:880px){.quote-grid{grid-template-columns:1fr}}
.quote{background:#fff;border:2px solid var(--char);padding:1.7rem;position:relative}
.quote .stars{color:var(--amber);font-size:1.1rem;letter-spacing:2px;margin-bottom:.6rem}
.quote p{font-size:1.05rem;margin-bottom:1rem}
.quote .who{font-family:'Anton';text-transform:uppercase;color:var(--char);font-size:1.05rem}
.quote .who span{display:block;font-family:'Barlow Semi Condensed';font-weight:500;text-transform:none;color:var(--muted);font-size:.85rem}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;color:#fff;text-align:center;padding:84px 26px;
  background-size:cover;background-position:center}
.cta:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(23,24,28,.82),rgba(23,24,28,.9))}
.cta:after{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% 0,rgba(255,106,0,.35),transparent 70%)}
.cta>*{position:relative;z-index:2}
.cta h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.cta h2 .hl{color:var(--orange)}
.cta p{color:#c7ccd2;margin:.8rem auto 1.8rem;font-size:1.15rem;max-width:560px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;margin-bottom:.4rem;color:var(--char)}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:1rem;padding:.85rem 1rem;
  border:2px solid var(--line);background:#fff;color:var(--ink);transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--orange)}
.field textarea{min-height:130px;resize:vertical}
.form-note{font-size:.85rem;color:var(--muted);margin-top:.6rem}
.form-ok{display:none;background:#0f1013;color:#fff;padding:1rem 1.2rem;border-left:4px solid var(--amber);margin-top:1rem}
.info-card{background:var(--char);color:#fff;padding:1.8rem}
.info-card h3{color:var(--amber);font-size:1.4rem;margin-bottom:1.2rem}
.info-row{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.1rem}
.info-row .ic{flex:0 0 auto;width:40px;height:40px;background:var(--orange);display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}
.info-row .ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2}
.info-row b{display:block;font-weight:700}
.info-row span,.info-row a{color:#bcc2c9;font-size:.96rem}
.info-row a:hover{color:var(--amber)}

/* ---------- Footer ---------- */
footer.site{background:#0f1013;color:#9298a0;padding:58px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:2rem;padding-bottom:28px;border-bottom:1px solid #25272c}
footer.site h4{color:#fff;font-family:'Anton';text-transform:uppercase;font-size:1.05rem;margin-bottom:1rem;letter-spacing:.04em}
footer.site a{display:block;color:#9298a0;margin-bottom:.5rem}
footer.site a:hover{color:var(--amber)}
footer.site .blurb{margin-top:1rem;max-width:270px}
.foot-bottom{padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.85rem}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Utilities ---------- */
.center{text-align:center}
.mt-2{margin-top:2rem}
.placeholder-flag{position:fixed;bottom:14px;right:14px;z-index:120;background:var(--orange);color:#fff;
  font-family:'Barlow Semi Condensed';font-weight:700;font-size:.78rem;padding:.45rem .8rem;border-radius:3px;
  box-shadow:var(--shadow-d);text-transform:uppercase;letter-spacing:.04em;opacity:.92}