/* zhauler.com — single stylesheet, no external fonts or CDNs (keeps LCP fast). */ *,*::before,*::after{box-sizing:border-box} :root{ --ink:#0d1b2a; --ink-2:#3d4f61; --muted:#6b7c8f; --line:#e2e8f0; --bg:#fff; --bg-2:#f6f9fc; --brand:#0f2f4f; --brand-2:#1a6bb5; --accent:#f4a024; --ok:#128a5a; --warn:#b7791f; --bad:#b91c1c; --radius:12px; --shadow:0 1px 3px rgba(13,27,42,.07),0 8px 24px rgba(13,27,42,.05); } html{-webkit-text-size-adjust:100%} /* overflow-x:clip, not hidden — hidden on silently kills the sticky header. */ body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink);background:var(--bg);overflow-x:clip;overflow-wrap:break-word} img,video{max-width:100%;height:auto;display:block} input[type=file]{max-width:100%} a{color:var(--brand-2);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{line-height:1.22;margin:0 0 .5em;color:var(--ink);letter-spacing:-.02em} h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800} h2{font-size:clamp(1.35rem,2.6vw,2rem);font-weight:750} h3{font-size:1.06rem;font-weight:700} p{margin:0 0 1em} .wrap{max-width:1140px;margin:0 auto;padding:0 20px} .muted{color:var(--muted)} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:#fff;padding:8px 14px;z-index:99;border-radius:8px} /* header */ .site-head{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50} .head-in{display:flex;align-items:center;gap:22px;height:68px} .brand{font-weight:800;font-size:1.3rem;color:var(--brand);display:flex;align-items:center;gap:7px} .brand:hover{text-decoration:none} .brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px; background:var(--brand);color:#fff;font-size:1rem} .brand-mark-img{width:32px;height:32px;display:block;flex-shrink:0} .foot-brand .brand-mark-img{width:30px;height:30px} /* Real logo lockups (see /assets/logo-zhauler*.png — cropped from the brand sheet). */ .brand-logo{height:42px;width:auto;display:block} .brand-logo-foot{height:60px;width:auto;display:block} .foot-brand{display:block} .nav{display:flex;gap:20px;margin-left:8px} .nav a{color:var(--ink-2);font-weight:550;font-size:.94rem} .head-cta{margin-left:auto;display:flex;align-items:center;gap:10px} .tel{font-weight:700;color:var(--ink);white-space:nowrap} /* Tap-to-call button — replaces the written number once the header gets tight. */ .tel-icon{display:none;width:42px;height:42px;border-radius:9px;border:1px solid var(--line); color:var(--brand);place-items:center;flex-shrink:0} .tel-icon svg{display:block} /* Mobile menu (CSS-only

) */ .menu{display:none} .menu-btn{list-style:none;width:42px;height:42px;border-radius:9px;border:1px solid var(--line); display:grid;place-items:center;cursor:pointer;background:#fff;flex-shrink:0} .menu-btn::-webkit-details-marker{display:none} .menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{ display:block;width:19px;height:2px;background:var(--ink);border-radius:2px} .menu-btn .bars{position:relative} .menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0} .menu-btn .bars::before{top:-6px} .menu-btn .bars::after{top:6px} .menu[open] .menu-btn .bars{background:transparent} .menu[open] .menu-btn .bars::before{top:0;transform:rotate(45deg)} .menu[open] .menu-btn .bars::after{top:0;transform:rotate(-45deg)} .menu-panel{position:absolute;top:100%;left:0;right:0;background:#fff; border-top:1px solid var(--line);border-bottom:1px solid var(--line); box-shadow:0 18px 34px rgba(13,27,42,.14);padding:8px 20px 14px;z-index:60} .menu-panel a{display:block;padding:13px 2px;font-weight:600;color:var(--ink); border-bottom:1px solid var(--line)} .menu-panel a:last-child{border-bottom:none} .menu-tel{color:var(--brand-2) !important} .lbl-short{display:none} .btn{display:inline-block;padding:10px 18px;border-radius:9px;font-weight:650;font-size:.94rem; border:1px solid transparent;cursor:pointer;text-align:center;white-space:nowrap} .head-cta .btn{flex-shrink:0} .btn:hover{text-decoration:none} .btn-primary{background:var(--accent);color:#22160a} .btn-primary:hover{background:#e5920f} .btn-ghost{border-color:var(--line);color:var(--ink)} .btn-ghost:hover{background:var(--bg-2)} .btn-dark{background:var(--brand);color:#fff} .btn-lg{padding:14px 26px;font-size:1.03rem} .btn-block{display:block;width:100%} /* hero — brand photo behind a scrim. ::before is the photo, ::after the scrim, content sits above both. Keep the scrim dark on the left or the h1 loses contrast. */ .hero{position:relative;overflow:hidden;background:#0f2f4f;color:#fff; padding:76px 0 84px} .hero::before{content:"";position:absolute;inset:0;background:#0f2f4f url(/assets/hero-crew.jpg?v=4) 55% 45%/cover no-repeat} .hero::after{content:"";position:absolute;inset:0;background: linear-gradient(100deg,rgba(8,26,45,.92) 0%,rgba(10,34,58,.86) 32%,rgba(13,42,71,.66) 58%,rgba(15,47,79,.48) 100%)} .hero .wrap{position:relative;z-index:2} @media(max-width:900px){ .hero::after{background:linear-gradient(180deg,rgba(8,26,45,.93) 0%,rgba(12,40,68,.9) 60%,rgba(15,47,79,.9) 100%)}} /* Only phones get the 760px file — a tablet is wide enough to show it soft. */ @media(max-width:600px){.hero::before{background-image:url(/assets/hero-crew-sm.jpg?v=4)}} .hero h1{color:#fff;max-width:16ch} .hero p.lede{font-size:1.14rem;color:#cfe2f2;max-width:56ch} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .hero .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff} .trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;padding-top:22px; border-top:1px solid rgba(255,255,255,.16)} .trust div{font-size:.88rem;color:#bcd6ec} .trust b{display:block;font-size:1.35rem;color:#fff} /* quote card in hero */ .qcard{background:#fff;border-radius:16px;padding:26px;box-shadow:0 20px 50px rgba(0,0,0,.25);color:var(--ink)} .qcard h2{font-size:1.2rem;margin-bottom:4px} /* sections */ .sec{padding:64px 0} .sec-alt{background:var(--bg-2);border-block:1px solid var(--line)} .sec-brand{background:var(--brand);color:#cfe2f2;padding-bottom:48px} .sec-brand h2{color:#fff} .cta-mark{height:76px;width:auto;margin:0 auto 18px} .sec-head{max-width:62ch;margin-bottom:34px} .grid{display:grid;gap:22px} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)} .card h3{margin-bottom:.35em} .card p{margin:0;color:var(--ink-2);font-size:.95rem} .step-n{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff; display:grid;place-items:center;font-weight:700;font-size:.9rem;margin-bottom:12px} /* forms */ /* min-width:0 everywhere a grid/flex child could refuse to shrink — without it a file input's intrinsic width blows the page out sideways on a 320px phone.

is the worst offender: it defaults to min-width:min-content. */ .form-row{display:grid;gap:16px;margin-bottom:16px;min-width:0} .form-row > *{min-width:0} .f2{grid-template-columns:1fr 1fr} .f3{grid-template-columns:1fr 1fr 1fr} label{display:block;font-size:.85rem;font-weight:650;color:var(--ink-2);margin-bottom:5px} input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date], input[type=number],select,textarea{ width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font:inherit; font-size:.95rem;color:var(--ink);background:#fff} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(26,107,181,.12)} textarea{min-height:110px;resize:vertical} fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0 0 22px;min-width:0} legend{font-weight:700;padding:0 8px;font-size:.95rem} .check{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--ink);margin-bottom:0} .check input{width:17px;height:17px;accent-color:var(--brand-2)} .hint{font-size:.82rem;color:var(--muted);margin-top:5px} .radio-row{display:flex;gap:10px;flex-wrap:wrap} .radio-row label{display:flex;align-items:center;gap:7px;border:1px solid var(--line);padding:9px 14px; border-radius:9px;cursor:pointer;font-weight:550;margin:0;color:var(--ink)} .radio-row input{accent-color:var(--brand-2)} /* Honeypot. Kept out of the layout and out of the accessibility tree rather than display:none — some bots skip fields that are display:none. */ .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .captcha-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .captcha-row img{border:1px solid var(--line);border-radius:8px;flex-shrink:0} .captcha-row input{width:110px} .captcha .hint a{white-space:nowrap} .drop{border:2px dashed #c3d3e3;border-radius:var(--radius);padding:26px;text-align:center; background:var(--bg-2);min-width:0} .drop input[type=file]{margin-top:10px;width:100%;font-size:.9rem} /* alerts */ .alert{padding:13px 16px;border-radius:9px;margin-bottom:18px;font-size:.93rem} .alert-err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b} .alert-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534} .alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af} /* tables & status */ table.tbl{width:100%;border-collapse:collapse;background:#fff} .tbl th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em; color:var(--muted);border-bottom:2px solid var(--line);padding:11px 12px} .tbl td{padding:13px 12px;border-bottom:1px solid var(--line);font-size:.94rem} .tbl tr:hover td{background:var(--bg-2)} .tag{display:inline-block;padding:4px 11px;border-radius:99px;font-size:.76rem;font-weight:700} .st-pending{background:#fef3c7;color:#92400e} .st-quoted{background:#ede9fe;color:#5b21b6} .st-confirmed{background:#dbeafe;color:#1e40af} .st-transit{background:#cffafe;color:#155e75} .st-done{background:#dcfce7;color:#166534} .st-cancelled{background:#f1f5f9;color:#64748b} /* portal */ .panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px; box-shadow:var(--shadow);margin-bottom:22px} .auth-wrap{max-width:430px;margin:56px auto} /* Full lockup — the only places with room for the tagline at a legible size. */ .auth-logo{height:72px;width:auto;margin:0 auto 22px} .timeline{list-style:none;padding:0;margin:0} .timeline li{position:relative;padding:0 0 20px 26px;border-left:2px solid var(--line)} .timeline li:last-child{border-left-color:transparent;padding-bottom:0} .timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px; border-radius:50%;background:var(--brand-2);border:2px solid #fff} .timeline time{font-size:.8rem;color:var(--muted);display:block} .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px} .media-grid figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-2)} .media-grid img,.media-grid video{width:100%;height:130px;object-fit:cover;background:#000} .media-grid figcaption{font-size:.75rem;padding:7px 9px;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kv{display:grid;grid-template-columns:150px 1fr;gap:9px 16px;font-size:.94rem} .kv dt{color:var(--muted);font-size:.85rem} .kv dd{margin:0;font-weight:550} /* route pages */ .route-hero{background:var(--bg-2);border-bottom:1px solid var(--line);padding:52px 0} .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0} .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px} .stat b{display:block;font-size:1.5rem;color:var(--brand)} .stat span{font-size:.82rem;color:var(--muted)} .link-cols{columns:3;column-gap:26px} .link-cols a{display:block;padding:5px 0;font-size:.93rem;break-inside:avoid} .crumbs{font-size:.85rem;color:var(--muted);padding:14px 0} .crumbs a{color:var(--muted)} .faq details{border-bottom:1px solid var(--line);padding:15px 0} .faq summary{cursor:pointer;font-weight:650;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+";float:right;font-size:1.25rem;line-height:1;color:var(--brand-2)} .faq details[open] summary::before{content:"–"} .faq p{margin:11px 0 0;color:var(--ink-2)} /* footer */ /* No margin-top: the last section owns its own bottom padding, and the home page ends on a .sec-brand band that must butt straight up against the footer. */ .site-foot{background:var(--brand);color:#c8dcee;padding:52px 0 0} .foot-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px} .site-foot h3{color:#fff;font-size:.83rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px} .site-foot a{display:block;color:#c8dcee;padding:4px 0;font-size:.92rem} /* Links inside a footer paragraph stay inline, or the " · " separator between the phone and email ends up stranded on a line of its own. */ .site-foot p a{display:inline;padding:0} .site-foot a:hover{color:#fff} .foot-brand{color:#fff;margin-bottom:10px} .site-foot .muted{color:#93b3cd;font-size:.9rem} .foot-bot{border-top:1px solid rgba(255,255,255,.14);padding:18px 0;font-size:.85rem;color:#93b3cd} /* ── responsive ───────────────────────────────────────────────────────── Three tiers, not two: ≥901 desktop, 601–900 tablet (two columns — an iPad in portrait is 768px and a single column there wastes half the screen), ≤600 phone (one column). Anything that must stay side by side on a phone is listed explicitly rather than left to the cascade. */ /* tablet */ @media(max-width:900px){ .hero-grid,.g2,.showcase-in,.mediaband-in{grid-template-columns:1fr} .g3,.g4,.f3,.foot-in,.stat-row{grid-template-columns:1fr 1fr} .link-cols{columns:2} .kv{grid-template-columns:130px 1fr} .head-in{height:60px;gap:10px} .nav,.tel,.hide-sm{display:none} .tel-icon{display:grid} .menu{display:block} .hero{padding:52px 0 58px} .hero-grid{gap:32px} .sec{padding:52px 0} .route-hero{padding:44px 0} /* Photo heroes get a vertical scrim on narrow screens — the horizontal one leaves white text sitting over the bright side of the photo. */ .route-hero.has-photo::after{background: linear-gradient(180deg,rgba(8,26,45,.9) 0%,rgba(11,37,63,.86) 55%,rgba(15,47,79,.86) 100%)} /* 16px minimum, or iOS Safari zooms the page when a field is focused. */ input[type=text],input[type=email],input[type=tel],input[type=password], input[type=date],input[type=number],select,textarea{font-size:16px} /* Footer and nav links need a real touch target, not a 24px one. */ .site-foot a{padding:9px 0} } /* phone */ @media(max-width:600px){ .g3,.g4,.f2,.f3,.foot-in,.stat-row{grid-template-columns:1fr} .link-cols{columns:1} .kv{grid-template-columns:1fr;gap:2px 0} .kv dd{margin-bottom:8px} .wrap{padding:0 16px} .menu-panel{padding-left:16px;padding-right:16px} .brand-logo{height:34px} .sec{padding:40px 0} .sec-head{margin-bottom:24px} .hero{padding:40px 0 46px} .hero-grid{gap:26px} .route-hero{padding:34px 0} .stat-row{margin:18px 0} .qcard,.panel{padding:20px} .card{padding:20px} fieldset{padding:16px} .btn-lg{padding:14px 20px} .foot-in{gap:22px} .cta-mark{height:60px} .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .faq summary{padding:7px 0} /* Tables scroll inside their panel instead of squashing to unreadable. On /routes the trailing "Details" button only repeats the destination link, so drop it and the table fits a phone without scrolling at all. The portal/staff tables keep theirs — there it's the only way in. */ .tbl{min-width:540px} .tbl th,.tbl td{padding:10px 9px} .tbl-routes{min-width:0} .tbl-routes th:last-child,.tbl-routes td:last-child{display:none} .radio-row label{padding:11px 14px} } /* very small phones: shorten the header CTA so the row never wraps */ @media(max-width:359px){ .lbl-long{display:none} .lbl-short{display:inline} .head-cta{gap:7px} .btn{padding:10px 14px} .tel-icon,.menu-btn{width:40px;height:40px} } /* Don't leave a stuck :hover state on touch devices. */ @media(hover:hover){ .gal figure:hover img{transform:scale(1.04)} } /* ── showcase band ────────────────────────────────────────────────────── The is a flat SVG illustration today. To swap in a real photograph of your own trucks/crew, drop the file in /assets and point the at it — the .showcase-art rules below (fixed aspect, object-fit:cover, rounded, shadow) already treat a photo correctly, so no CSS change is needed. */ .showcase{background:var(--bg-2);border-block:1px solid var(--line);padding:60px 0} .showcase-in{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center} .showcase-art{width:100%;height:auto;aspect-ratio:1000/565;object-fit:cover; border-radius:16px;box-shadow:0 10px 34px rgba(13,27,42,.13);background:#EEF4F9} .showcase-copy h2{margin-bottom:.4em} .showcase-stats{display:flex;gap:30px;flex-wrap:wrap;margin:22px 0 26px; padding-top:20px;border-top:1px solid var(--line)} .showcase-stats b{display:block;font-size:1.5rem;color:var(--brand);line-height:1.1} .showcase-stats span{font-size:.84rem;color:var(--muted)} @media(max-width:900px){ .showcase-in{grid-template-columns:1fr;gap:28px} .showcase{padding:44px 0} } /* ── photo gallery ────────────────────────────────────────────────────── Crew/job photography. Tiles are fixed-ratio so a mixed-aspect set still lines up; swap the src in views/home.php to change the shots. */ .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gal figure{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--bg-2); box-shadow:0 6px 22px rgba(13,27,42,.10)} .gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block; transition:transform .35s ease} .gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px; color:#fff;font-size:.85rem;font-weight:600; background:linear-gradient(to top,rgba(8,26,45,.82),rgba(8,26,45,0))} /* Stay 2-up on phones — six full-width tiles is an interminable scroll. Only the narrowest handsets drop to one column, where a half-width tile stops reading. */ @media(max-width:900px){.gal{grid-template-columns:1fr 1fr;gap:12px}} @media(max-width:600px){.gal{gap:10px} .gal figcaption{font-size:.72rem;padding:18px 9px 8px;line-height:1.3}} @media(max-width:360px){.gal{grid-template-columns:1fr} .gal figcaption{font-size:.85rem;padding:22px 14px 11px}} /* ── media band: one photo beside a block of copy, alternating sides ──── */ .mediaband{padding:60px 0} .mediaband-in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .mediaband img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px; box-shadow:0 10px 34px rgba(13,27,42,.13);background:var(--bg-2)} .mediaband-flip .mediaband-media{order:2} @media(max-width:900px){ .mediaband-in{grid-template-columns:1fr;gap:26px} .mediaband-flip .mediaband-media{order:0} .mediaband{padding:44px 0} } /* ── page hero with a photo strip (service + how-it-works pages) ──────── */ .route-hero.has-photo{background:#0f2f4f;border-bottom:none;color:#fff;position:relative;overflow:hidden} .route-hero.has-photo::before{content:"";position:absolute;inset:0; background-image:var(--hero-photo); background-position:center 40%;background-size:cover;background-repeat:no-repeat} .route-hero.has-photo::after{content:"";position:absolute;inset:0;background: linear-gradient(100deg,rgba(8,26,45,.94) 0%,rgba(11,37,63,.9) 40%,rgba(15,47,79,.6) 100%)} .route-hero.has-photo .wrap{position:relative;z-index:2} .route-hero.has-photo h1{color:#fff} .route-hero.has-photo .lede,.route-hero.has-photo .muted{color:#cfe2f2} .route-hero.has-photo .crumbs,.route-hero.has-photo .crumbs a{color:#9dc0dd} /* :not(.btn) matters — .btn-primary's background IS --accent, so recolouring every link in the hero turned the CTA into gold text on a gold button. */ .route-hero.has-photo p a:not(.btn){color:var(--accent)} .route-hero.has-photo .stat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)} .route-hero.has-photo .stat b{color:#fff} .route-hero.has-photo .stat span{color:#a9c8e2}