/* Transport & Logistics Hub — site styles.
   Taken from the approved design file (tlh-homepage_2.html).
   Blue/white, Barlow + Barlow Condensed.

   Only additions below the marked line: honeypot hiding, form error state,
   and the folded-in "Driving with us" note. Nothing in the approved design
   has been restyled. */

:root{
  --bg:#ffffff; --panel:#f3f6fa; --panel2:#e7edf4; --line:#dde3ea; --line2:#cbd6e2;
  --ink:#16222f; --mut:#42536a; --dim:#5b6c80; --faint:#77879a; --ghost:#9aa9ba;
  --accent:#1f5fa8; --accent-hi:#2d74c9;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Barlow','Helvetica Neue',Arial,sans-serif; font-size:16px; line-height:1.55;}
img{max-width:100%; height:auto;}
h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif; margin:0; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance;}
a{color:var(--accent); text-decoration:none;} a:hover{color:var(--accent-hi);}
.wrap{max-width:1180px; margin:0 auto; padding-inline:24px;}
.btn{display:inline-block; background:var(--accent); color:#ffffff; font-weight:600; border-radius:3px; padding:14px 30px; font-size:16px;}
.btn:hover{background:var(--accent-hi); color:#ffffff;}
.kick{display:flex; gap:10px; align-items:center; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600;}
.kick::before{content:""; width:32px; height:4px; background:var(--accent); flex:none;}

header{border-bottom:1px solid var(--line); position:sticky; top:env(safe-area-inset-top,0px); background:var(--bg); z-index:5;}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:18px; flex-wrap:wrap;}
.logo{font-family:'Barlow Condensed',Arial,sans-serif; font-weight:700; font-size:23px; text-transform:uppercase; color:var(--ink);}
.logo b{color:var(--accent); font-weight:700;}
.nav-links{display:flex; gap:26px; align-items:center; font-size:15px; font-weight:500; flex-wrap:wrap;}
.nav-links a{color:var(--mut);} .nav-links a:hover{color:var(--ink);}
.nav-links .btn{padding:10px 20px; font-size:15px;}

.hero{display:flex; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.hero-copy{flex:1 1 480px; padding-block:84px; display:flex; flex-direction:column; gap:26px; justify-content:center;}
.hero-copy h1{font-size:clamp(42px,6vw,74px); line-height:.98; font-weight:700;}
.hero-copy h1 b{color:var(--accent); font-weight:700;}
.hero-copy p{font-size:19px; color:var(--mut); max-width:560px; margin:0;}
.hero-cta{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.hero-photo{flex:1 1 380px; min-height:340px; background:var(--panel2); border-left:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ghost); text-align:center;}
.ph-label{font-size:13px; margin-top:10px; letter-spacing:.08em; text-transform:uppercase;}

.trust{display:flex; justify-content:space-between; gap:24px; padding-block:28px; border-bottom:1px solid var(--line); background:var(--panel); flex-wrap:wrap;}
.trust > div{display:flex; flex-direction:column; gap:2px; min-width:150px;}
.trust .big{font-family:'Barlow Condensed',Arial,sans-serif; font-size:28px; font-weight:700; color:var(--accent); text-transform:uppercase;}
.trust .small{font-size:12.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em;}

section{padding-block:80px;}
.sec-h{margin-bottom:38px; display:flex; flex-direction:column; gap:12px;}
.sec-h h2{font-size:clamp(30px,4vw,42px); font-weight:700;}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
.svc{border:1px solid var(--line2); border-radius:4px; padding:26px; background:var(--panel); display:flex; flex-direction:column; gap:11px;}
.svc:hover{border-color:var(--accent);}
.svc h3{font-size:21px;}
.svc p{font-size:15px; color:var(--dim); margin:0;}
.svc svg{width:28px; height:28px; stroke:var(--accent); fill:none; stroke-width:1.8;}

.band-photo{height:340px; background:var(--panel2); border-block:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ghost);}
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
.g-tile{aspect-ratio:4/3; max-width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--ghost); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:10px;}
.why{background:var(--panel); border-block:1px solid var(--line);}
.why-inner{display:flex; gap:48px; flex-wrap:wrap;}
.why-copy{flex:1 1 380px; display:flex; flex-direction:column; gap:14px;}
.why-copy h2{font-size:clamp(28px,3.5vw,38px);}
.why-copy p{color:var(--dim); margin:0;}
.why-list{flex:1 1 380px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.why-item{display:flex; gap:12px; align-items:flex-start;}
.why-item::before{content:""; width:8px; height:8px; background:var(--accent); margin-top:7px; flex:none;}
.why-item b{color:var(--ink); font-size:16px; display:block;}
.why-item span{font-size:14px; color:var(--dim);}

.quote{display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap;}
.quote-copy{flex:1 1 340px; display:flex; flex-direction:column; gap:12px;}
.quote-copy h2{font-size:clamp(28px,3.5vw,40px);}
.quote-copy p{color:var(--dim); margin:0;}
.quote-form{flex:1 1 380px; background:var(--panel); border:1px solid var(--line2); border-radius:4px; padding:28px; display:flex; flex-direction:column; gap:14px;}
.quote-form label{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:600; display:flex; flex-direction:column; gap:6px;}
.quote-form input, .quote-form textarea{background:var(--bg); border:1px solid var(--line2); border-radius:3px; color:var(--ink); font-family:inherit; font-size:15px; padding:12px;}
.quote-form input:focus, .quote-form textarea:focus{outline:2px solid var(--accent); outline-offset:0;}
.contact-line{font-size:15px; color:var(--dim);}
.contact-line b{color:var(--ink);}

footer{border-top:1px solid var(--line); padding-block:36px 48px; display:flex; justify-content:space-between; gap:24px; font-size:14px; color:var(--faint); flex-wrap:wrap;}
.f-brand{display:flex; flex-direction:column; gap:6px;}
.f-brand .logo{font-size:18px;}
.f-links{display:flex; gap:28px; flex-wrap:wrap;}
.f-links a{color:var(--faint);} .f-links a:hover{color:var(--ink);}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }

/* ============ ADDITIONS (not in the approved design) ============ */

/* Honeypot. Moved off-screen rather than display:none - bots skip
   display:none fields, which defeats the point. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Form failure message - only shown when the relay cannot be reached. */
.q-error{
  margin:0; padding:12px 14px; border-radius:3px;
  background:#fdecec; border:1px solid #e0b4b4; border-left-width:4px;
  color:#8c2f2f; font-size:14px;
}

/* "Driving with us" - the folded-in Join Us copy. */
.join-note{padding-top:6px; border-top:1px solid var(--line2); font-size:15px;}
.join-note b{color:var(--ink);}

/* The [hidden] attribute must beat the author display rules below, or the form
   stays visible next to the "Request received" panel after submitting. */
[hidden]{display:none !important;}

/* Photos filling the approved design's image slots. The slot boxes keep their
   original dimensions; the images cover them so nothing is letterboxed. */
.hero-photo{padding:0; overflow:hidden;}
.hero-photo img{width:100%; height:100%; min-height:340px; object-fit:cover; display:block;}
.band-photo{padding:0; overflow:hidden;}
.band-photo img{width:100%; height:340px; object-fit:cover; display:block;}
.g-tile{padding:0; overflow:hidden;}
.g-tile img{width:100%; height:100%; object-fit:cover; display:block;}

/* Skip link for keyboard users. */
.skip{position:absolute; left:-9999px; background:var(--accent); color:#fff; padding:10px 16px; z-index:100;}
.skip:focus{left:8px; top:8px;}