/* R&L Beale Log Transport — shared stylesheet (industrial / heavy-haulage) */
:root{
  --ink:#0c0d0f; --steel:#15171b; --steel-2:#1d2026; --panel:#23272e; --line:rgba(255,255,255,.10);
  --red:#D11A2A; --red-hot:#ee2b3b; --blue:#5fa8da; --blue-deep:#2f7cb5; --chrome:#cfd6dd;
  --white:#eef2f6; --dim:#98a1ac;
  --maxw:1300px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink); color:var(--white); font-family:'Inter',system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,.display{font-family:'Anton',sans-serif; font-weight:400; line-height:.96; letter-spacing:.01em; text-transform:uppercase}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.red{color:var(--red)} .blue{color:var(--blue)}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* NAV */
.nav{position:sticky; top:0; z-index:50; background:rgba(12,13,15,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand img{height:54px; width:auto}
.brand .bt{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.05rem; line-height:.9; letter-spacing:.02em}
.brand .bt small{display:block; font-size:.6rem; letter-spacing:.22em; color:var(--dim); font-family:'Inter',sans-serif; font-weight:700; margin-top:3px}
.nav-links{display:flex; gap:28px; align-items:center}
.nav-links a{font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); transition:color .2s; position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-27px; height:3px; background:var(--red)}
.nav-cta{display:flex; align-items:center; gap:12px; flex:none}
.btn{display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:4px; font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s; cursor:pointer; border:none}
.btn-red{background:var(--red); color:#fff; box-shadow:0 6px 22px rgba(209,26,42,.35)}
.btn-red:hover{background:var(--red-hot); transform:translateY(-2px); box-shadow:0 10px 28px rgba(209,26,42,.5)}
.btn-ghost{border:1px solid var(--line); color:var(--white)}
.btn-ghost:hover{border-color:var(--red); color:var(--red)}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--white); padding:9px 14px; border-radius:4px; font-weight:700; font-size:.78rem; cursor:pointer}
.mobile-menu{display:none; flex-direction:column; padding:14px clamp(20px,5vw,56px) 20px; border-bottom:1px solid var(--line); background:var(--steel)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 0; font-weight:700; text-transform:uppercase; font-size:.88rem; letter-spacing:.05em; border-bottom:1px solid var(--line); color:var(--white)}

/* TAGLINE BAR */
.tagbar{background:var(--red); color:#fff; text-align:center; padding:11px; font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:clamp(.7rem,1.6vw,.95rem)}
.tagbar span{opacity:.6; padding:0 8px}

/* HERO */
.hero{position:relative; min-height:90vh; display:flex; align-items:flex-end; overflow:hidden}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); animation:zoom 16s ease-out forwards}
@keyframes zoom{to{transform:scale(1)}}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,13,15,.7) 0%, rgba(12,13,15,.25) 40%, rgba(12,13,15,.82) 80%, var(--ink) 100%), linear-gradient(90deg, rgba(12,13,15,.6), transparent 60%)}
.hero-in{position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,7vw,90px)}
.badge5{display:inline-flex; align-items:center; gap:12px; background:rgba(209,26,42,.14); border:1px solid rgba(209,26,42,.5); border-radius:6px; padding:10px 16px; margin-bottom:24px}
.badge5 .stars{color:var(--red); letter-spacing:3px; font-size:1rem}
.badge5 .bt{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--white)}
.hero h1{font-size:clamp(3rem,9vw,7.6rem); color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.55)}
.hero h1 .red{color:var(--red)}
.hero-tag{font-size:clamp(1.05rem,2.3vw,1.5rem); color:var(--white); font-weight:500; margin-top:20px; max-width:44ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:13px; margin-top:32px}
.hero-actions .btn{padding:15px 28px; font-size:.9rem}

/* SECTIONS */
.section{padding:clamp(72px,10vw,128px) 0}
.eyebrow{font-size:.78rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:16px}
.sec-head{max-width:64ch}
.sec-head h2{font-size:clamp(2.1rem,5vw,3.6rem)}
.sec-head p{color:var(--dim); font-size:1.08rem; margin-top:18px; max-width:56ch}

/* PAGE HERO (subpages) */
.phero{position:relative; padding:clamp(116px,15vw,176px) 0 clamp(52px,7vw,80px); overflow:hidden; border-bottom:1px solid var(--line)}
.phero-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.30}
.phero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,13,15,.72), rgba(12,13,15,.86) 60%, var(--ink))}
.phero .wrap{position:relative; z-index:2}
.phero .crumb{font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-bottom:18px}
.phero h1{font-size:clamp(2.6rem,7vw,5.2rem); color:#fff}
.phero h1 .red{color:var(--red)}
.phero p{color:var(--dim); font-size:clamp(1.05rem,2vw,1.3rem); margin-top:20px; max-width:56ch}

/* STAT STRIP */
.statstrip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:54px}
.statstrip .st{background:var(--steel); padding:34px 24px; text-align:center}
.statstrip .n{font-family:'Anton',sans-serif; font-size:clamp(2.2rem,4.5vw,3.4rem); color:var(--red); line-height:1}
.statstrip .l{font-size:.82rem; color:var(--dim); font-weight:600; margin-top:8px; text-transform:uppercase; letter-spacing:.05em}

/* CARDS (services / nav-into-pages) */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px}
.card{position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--steel); transition:transform .3s, border-color .3s; display:flex; flex-direction:column}
.card:hover{transform:translateY(-6px); border-color:var(--red)}
.card .ch{height:200px; background-size:cover; background-position:center; position:relative}
.card .ch::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, rgba(21,23,27,.85))}
.card .cb{padding:28px; display:flex; flex-direction:column; flex:1}
.card h3{font-size:1.5rem}
.card p{color:var(--dim); margin-top:12px; font-size:.96rem; flex:1}
.card .clink{margin-top:20px; font-weight:800; color:var(--red); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px}
.card:hover .clink{gap:13px}

/* SPLIT (image + text) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; margin-top:54px}
.split.rev .split-img{order:2}
.split-img{border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.split-img img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.split-txt h2{font-size:clamp(1.9rem,4vw,3rem)}
.split-txt p{color:var(--dim); margin-top:18px; font-size:1.06rem}
.split-txt .checks{margin-top:24px; display:grid; gap:13px}
.checks li{list-style:none; display:flex; gap:13px; align-items:flex-start; color:var(--white); font-size:1rem}
.checks li svg{width:21px;height:21px;flex:none;margin-top:2px;stroke:var(--red);fill:none;stroke-width:2.4}
.checks li b{color:#fff}

/* SAFETY BADGE BIG */
.safehero{display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,60px); align-items:center; padding:clamp(34px,4vw,52px); border:1px solid rgba(209,26,42,.4); border-radius:14px; background:radial-gradient(120% 140% at 0% 0%, rgba(209,26,42,.14), transparent 55%), var(--steel); margin-top:48px}
.shield{width:clamp(130px,17vw,180px); height:clamp(130px,17vw,180px); flex:none; border:4px solid var(--red); border-radius:14px; display:grid; place-items:center; text-align:center; background:rgba(209,26,42,.08)}
.shield .stars{color:var(--red); letter-spacing:4px; font-size:1.4rem}
.shield .lab{font-family:'Anton',sans-serif; text-transform:uppercase; color:#fff; font-size:clamp(.78rem,1.5vw,1rem); line-height:1.1; margin-top:10px; letter-spacing:.02em}
.shield .sub{font-size:.62rem; color:var(--dim); letter-spacing:.14em; text-transform:uppercase; margin-top:8px; font-weight:700}
.safehero-txt h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.safehero-txt p{color:var(--dim); margin-top:14px; font-size:1.06rem; max-width:54ch}

/* AUDIT GRID */
.audit{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px}
.audit .a{border:1px solid var(--line); border-radius:8px; padding:26px; background:var(--steel)}
.audit .a .num{font-family:'JetBrains Mono',monospace; color:var(--red); font-weight:800; font-size:.95rem; margin-bottom:12px}
.audit .a h4{font-size:1.05rem; font-family:'Inter',sans-serif; font-weight:800; text-transform:none; letter-spacing:0; margin-bottom:7px}
.audit .a p{color:var(--dim); font-size:.9rem}

/* FLEET */
.fleet{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px}
.tcard{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--steel); transition:transform .3s, border-color .3s}
.tcard:hover{transform:translateY(-6px); border-color:var(--blue)}
.tcard .ti{aspect-ratio:4/3; background-size:cover; background-position:center}
.tcard .tb{padding:22px}
.tcard .tn{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.3rem; letter-spacing:.02em}
.tcard .tm{color:var(--blue); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; margin-top:4px}
.tcard .td{color:var(--dim); font-size:.9rem; margin-top:10px}

/* FORM */
.formwrap{border:1px solid var(--line); border-radius:12px; padding:clamp(26px,3.5vw,40px); background:var(--steel)}
.formwrap h3{font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; font-weight:800; font-size:1.4rem; margin-bottom:6px}
.formwrap .fsub{color:var(--dim); font-size:.94rem; margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:7px}
.field input,.field textarea,.field select{width:100%; background:var(--ink); border:1.5px solid var(--line); border-radius:6px; padding:13px 15px; color:var(--white); font-family:inherit; font-size:.98rem; transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--red)}
.field textarea{resize:vertical; min-height:96px}
.formwrap > .btn{width:100%; justify-content:center; padding:15px; margin-top:6px}
.fnote{font-size:.78rem; color:var(--dim); text-align:center; margin-top:13px}

/* CTA BAND */
.ctaband{position:relative; padding:clamp(56px,8vw,104px) 0; background:linear-gradient(100deg,#1a0608,#0c0d0f); border-top:1px solid rgba(209,26,42,.3); border-bottom:1px solid rgba(209,26,42,.3); text-align:center}
.ctaband h2{font-size:clamp(2rem,5vw,3.6rem)} .ctaband h2 .red{color:var(--red)}
.ctaband p{color:var(--dim); margin:16px auto 0; max-width:48ch; font-size:1.08rem}
.phone-big{font-family:'Anton',sans-serif; font-size:clamp(1.8rem,4.5vw,2.8rem); color:#fff; margin-top:30px; display:inline-block; letter-spacing:.02em}
.phone-big span{color:var(--red)}

/* prose / info */
.prose{max-width:70ch}
.prose p{color:var(--dim); font-size:1.1rem; margin-top:22px} .prose p b{color:var(--white)}
.pull{border-left:3px solid var(--red); padding:6px 0 6px 24px; margin:34px 0; font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(1.3rem,3vw,2rem); line-height:1.1; color:#fff}
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); margin-top:48px}
.infocard{border:1px solid var(--line); border-radius:10px; padding:30px; background:var(--steel)}
.infocard h3{font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; font-weight:800; font-size:1.2rem; margin-bottom:14px}
.infocard .row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); color:var(--dim)}
.infocard .row b{color:var(--white)} .infocard .row:last-child{border-bottom:none}

/* FOOTER */
footer{border-top:1px solid var(--line); padding:64px 0 40px; color:var(--dim); font-size:.9rem; background:var(--steel)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.foot-brand img{height:54px}
.foot-col h4{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white); margin-bottom:16px; font-weight:800}
.foot-col a{display:block; color:var(--dim); padding:6px 0; transition:color .2s} .foot-col a:hover{color:var(--red)}
.foot-bottom{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--line)}
.tag3{font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:var(--dim)}
.tag3 span{color:var(--red); padding:0 6px}

@media(max-width:980px){
  .cards{grid-template-columns:1fr} .fleet{grid-template-columns:1fr 1fr} .audit{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr} .statstrip{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .nav-links{display:none} .nav-toggle{display:block}
  .nav-cta .btn-ghost{display:none} /* phone is in the dropdown; declutter the mobile bar */
  .split{grid-template-columns:1fr} .split.rev .split-img{order:0}
  .safehero{grid-template-columns:1fr; text-align:center; justify-items:center}
  .cols2{grid-template-columns:1fr} .fleet{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}