/* V7: shared, local website refinements. Legacy page layouts remain in app.css. */
:root {
  --signal-ink: #526519;
  --on-light-2: #505851;
  --on-light-3: #626a62;
  --cold: #356b78;
  --text-2: #505851;
  --text-3: #626a62;
  --paper: #fafaf6;
  --line: rgba(20, 23, 26, .16);
  --line-strong: rgba(20, 23, 26, .3);
}
html { background: var(--paper); scroll-padding-top: 6rem; }
html body { background: var(--paper); }
[hidden] { display: none !important; }
.js-only { display: none !important; }
/* Reserve the form's natural height before its handlers are ready so the
   mobile contact column never jumps down as the deferred script finishes. */
.js .form.js-only { display: flex !important; visibility: hidden; pointer-events: none; }
.forms-ready .form.js-only { visibility: visible; pointer-events: auto; }
.js .js-only:not(.form) { display: block !important; }
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
main { min-width: 0; }
html body .grid > * { min-width: 0; }
html body .dlist { min-width: 0; max-width: 100%; }
html body .dlist :is(dt, dd) { min-width: 0; overflow-wrap: anywhere; }
html body :is(p, li, dd, .lede) { overflow-wrap: break-word; }
html body :is(h1,h2,h3) { text-wrap: balance; }
html body :is(.page-head h1 .lime, .page-head .lime, .lede a) { color: var(--signal-ink) !important; }
html body :is(.svc-bulk, .stats, .cta-band) .italic { color: var(--signal-ink) !important; }
html body .kicker { color: var(--signal-ink); }
html body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--signal-ink) !important;
  outline-offset: 4px !important;
}
html body :is(.bg-ink,.bg-ink-2) :focus-visible { outline-color: var(--signal) !important; }
html body :is(main, .cta-band) a:not(.btn) { text-underline-offset: .22em; }

/* One light navigation surface, including the home page. */
html body .nav, html body .nav.scrolled {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body .nav :is(.logo-text, .nav-toggle) { color: var(--text) !important; }
html body .nav .logo-text em { color: var(--signal-ink) !important; }
html body .nav :is(.nav-links a, .nav-sub-toggle) { color: var(--on-light-2) !important; }
html body .nav-links a[aria-current="page"] { color: var(--signal-ink) !important; }
html body .nav-mobile { background: var(--paper) !important; }
html body .nav-mobile a { color: var(--text) !important; letter-spacing: 0 !important; text-transform: none !important; font-family: var(--f-text) !important; font-size: 1rem !important; }
html body .nav-mobile-head { color: var(--signal-ink) !important; }
html body .nav-toggle { min-width: 44px; min-height: 44px; border-color: var(--line-strong) !important; }
.nav-mobile.open { max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1023px) {
  html:not(.js) .nav { position: relative; }
  html:not(.js) .nav-toggle { display: none !important; }
  html:not(.js) .nav-mobile { display: block; }
  html:not(.js) .nav-mobile ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
  html:not(.js) .nav-mobile-head { grid-column: 1 / -1; }
  html:not(.js) .nav-mobile a.btn { width: auto !important; }
}
@media (min-width: 1024px) {
  html:not(.js) .nav-has-sub:hover .nav-sub,
  html:not(.js) .nav-has-sub:focus-within .nav-sub { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
}

/* Static photography alongside the message puts the service in view sooner. */
.home-hero { padding: 0 !important; background: #f1f1e8; border-bottom: 1px solid var(--line); }
.home-hero__inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); padding-block: 2.5rem; gap: 3.25rem; align-items: center; }
.home-hero__copy { padding-block: 1.75rem; min-width: 0; }
html body .home-hero h1 { color: var(--text); font-size: clamp(2.6rem, 4vw, 4.25rem) !important; line-height: 1.04 !important; max-width: 17ch; letter-spacing: -.055em !important; margin-top: 1.5rem !important; }
html body .home-hero h1 .lime { color: var(--signal-ink) !important; }
html body .home-hero h1 .italic { font-size: 1em !important; line-height: inherit; }
.home-hero .lede { color: var(--on-light-2); font-size: 1.0625rem; line-height: 1.65; max-width: 46ch; }
html body .home-hero .hero-ctas { margin-top: 1.75rem !important; gap: .75rem; }
.home-hero__photo { margin: 0; min-width: 0; }
.home-hero__photo picture { display: block; }
.home-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.home-hero__photo figcaption { font-family: var(--f-mono); color: var(--on-light-3); font-size: .6875rem; letter-spacing: .06em; padding: .875rem 0 0; }
.home-hero__facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.25rem; }
.home-hero__facts strong { display: block; font-size: .9rem; font-weight: 600; }
.home-hero__facts span { display: block; font-size: .75rem; color: var(--on-light-2); margin-top: .3rem; }
@media (max-width: 1023px) {
  .home-hero__inner { grid-template-columns: 1fr; gap: 1.75rem; padding-top: 2rem; }
  .home-hero__copy { padding: 0; }
  html body .home-hero h1 { font-size: clamp(2.5rem, 6.5vw, 4rem) !important; }
  .home-hero__photo img { aspect-ratio: 16 / 8; object-position: center 55%; }
}
@media (max-width: 480px) {
  .home-hero__facts { gap: .5rem; }
  .home-hero__facts strong { font-size: .8rem; }
  .home-hero__facts span { font-size: .7rem; }
  .home-hero__photo img { aspect-ratio: 4 / 3; }
  html body .home-hero .hero-ctas { flex-direction: column !important; align-items: stretch; }
  .home-hero .hero-ctas a { justify-content: space-between; }
}

/* A service gateway shared by the homepage and the new overview. */
.service-choice { background: var(--paper); }
.service-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.service-choice-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; border-radius: 3px; overflow: hidden; }
.service-choice-card picture { display: block; }
.service-choice-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.service-choice-photo { display: block; }
.service-choice-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
html body .service-choice-card :is(h2,h3) { font-size: 1.625rem !important; line-height: 1.15 !important; margin-top: .875rem !important; }
.service-choice-card p { color: var(--on-light-2); font-size: .9375rem; line-height: 1.65; margin-top: .75rem; }
.service-choice-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .875rem; font-weight: 600; color: var(--signal-ink); margin-top: 1.5rem; text-decoration: none; min-height: 44px; }
.service-choice-link:hover { text-decoration: underline; }
.service-choice-link span { font-size: 1.25rem; }
.service-choice-card__body .service-choice-link { margin-top: auto; padding-top: 1rem; }
.service-choice-card__body p + .service-choice-link { margin-top: 1.5rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.enquiry-steps { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2.5rem; padding: 0; }
.enquiry-steps li { border-top: 1px solid var(--line-strong); padding-top: 1.25rem; }
html body .enquiry-steps h3 { font-size: 1.375rem !important; line-height: 1.25 !important; margin-top: 1rem; }
.enquiry-steps p { font-size: .9375rem; color: var(--on-light-2); line-height: 1.65; }
.enquiry-guide { background: #f1f1e8; }
@media (max-width: 760px) { .enquiry-steps { grid-template-columns: 1fr; gap: 1.5rem; } }
.office-location { padding: 1.5rem; margin-top: 2.5rem; background: #f0f2e7; border: 1px solid var(--line); border-radius: 3px; }
.office-location h3 { font-size: 1.5rem !important; }
.office-location p { color: var(--on-light-2); }
.office-location a { color: var(--signal-ink); }
.office-location .page-actions { margin-top: 1rem; }
@media (max-width: 760px) { .service-choice-grid { grid-template-columns: 1fr; } }

/* The homepage keeps capability details without a second wall of photos. */
html body .home-manifest { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)); border: 1px solid var(--line); background: transparent !important; border-radius: 3px; }
html body .home-manifest .manifest-cell { background: transparent !important; border-color: var(--line) !important; padding: 1.25rem !important; min-height: 130px !important; }
html body .home-manifest .manifest-label { color: var(--text) !important; font-size: 1.125rem !important; }
html body .home-manifest .manifest-sub { color: var(--on-light-2) !important; font-size: .75rem !important; }
html body .home-manifest .manifest-num { display: none; }
@media (max-width: 1023px) { html body .home-manifest { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.service-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.service-photo figcaption { margin-top: .75rem; color: var(--on-light-3); font-size: .8125rem; }
html body main .btn { margin-bottom: .5rem; max-width: 100%; }
.cta-phone { color: var(--signal-ink); font-weight: 600; padding: .5rem 0; }
/* Leftovers from when these bands were dark. `.cta-band a:not(.btn)` in
   app.css (0,3,1) paints band links cream; every band is light now, so the
   phone number was cream on cream — 1.05:1 — on the home page and on five
   others (about, fleet, containers, cold trucks, diesel). The small phone
   line and the owner-driver paragraphs on About were the old dark-section
   grey (#909090, 2.92:1). All measured, all moved to the on-light text
   colours the rest of the page uses. */
html body .cta-band a:not(.btn):not(.nav-cta) {
  color: var(--text) !important;
  text-decoration: underline;
  text-decoration-color: var(--signal-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
html body .cta-band a:not(.btn):not(.nav-cta):hover { color: var(--signal-ink) !important; }
html body .cta-band .ctas .mono { color: var(--on-light-2) !important; opacity: 1 !important; }
html body main .svc-diesel .editorial p { color: var(--on-light-2) !important; }
/* Same leftover, found by sweeping every page for text under 3:1: bright
   lime labels (#C6D72F / #AEBE24) that were written for dark sections now sit
   on cream at 1.5–2.0:1 — the About timeline years, the Vision / Mission
   labels, the desk names on Contact and the service pages, the office clock,
   "Skip the form". The darker brand green keeps them lime and readable. */
html body main :is(dt, .mono-lime, .live-time) { color: var(--signal-ink) !important; }

/* Enquiries retain their input and offer a complete copyable email draft. */
html body .field label { font-family: var(--f-text); font-size: .875rem; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 600; }
html body .field .req { color: var(--signal-ink); }
html body .field .help { color: var(--on-light-2); font-size: .8125rem; }
html body .field :is(input,select,textarea) { background-color: #fff; border: 1px solid #858c83; border-radius: 3px; padding: .75rem; min-height: 48px; }
html body .field select { background-position: right .75rem center; padding-right: 2rem; }
html body .field :is(input,select,textarea):focus { border-color: var(--signal-ink); }
html body .field [aria-invalid="true"] { border-color: #a02a24; }
html body .form-note { font-family: var(--f-text); font-size: .875rem; letter-spacing: 0; }
.form-error { color: #a02a24; font-size: .8125rem; }
.form-error-summary { padding: 1rem; border-left: 3px solid #a02a24; background: #fff1ee; color: #86221d; }
.form-error-summary ul { padding-left: 1.25rem; margin-top: .5rem; }
.form-error-summary a { color: inherit; }
.form-notice, .form-notice p { color: var(--on-light-2); font-size: .9375rem; line-height: 1.6; }
.form-notice { padding: 1.25rem; margin-bottom: 1.75rem; background: #f0f2e7; border-left: 3px solid var(--signal-ink); }
.form-notice strong { color: var(--text); }
.email-draft { border: 1px solid var(--line-strong); border-top: 3px solid var(--signal-ink); padding: 1.5rem; background: #fff; margin: 1.5rem 0; }
html body .email-draft h2 { font-size: 1.5rem !important; line-height: 1.2 !important; }
.draft-meta { color: var(--on-light-2); margin-block: 1rem; overflow-wrap: anywhere; }
.draft-meta dt { font-weight: 600; color: var(--text); }
.draft-meta dd { margin-bottom: .75rem; }
.draft-message label { display: block; font-size: .875rem; font-weight: 600; margin: .75rem 0; }
.draft-message textarea { width: 100%; min-height: 240px; font: .875rem/1.6 var(--f-text); padding: 1rem; color: var(--text); background: var(--paper); border: 1px solid #858c83; resize: vertical; border-radius: 3px; }
.draft-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.form-status { font-size: .875rem; color: var(--signal-ink); margin-top: 1rem; min-height: 1.5em; }
html body .footer a { opacity: 1 !important; }
html body .footer li[style*="opacity"], html body .footer .footer-bottom { opacity: 1 !important; color: var(--on-light-2); }
html body .footer-social a { width: 44px; height: 44px; }
html body .footer .footer-heading { font: 600 .875rem/1.4 var(--f-text); color: var(--signal-ink) !important; letter-spacing: .04em; margin-bottom: 1rem; }
html body .footer-bottom .legal { flex-wrap: wrap; }
@media (max-width: 760px) {
  html body .grid.grid-2 { grid-template-columns: 1fr; gap: 2.5rem !important; }
  main aside[style*="sticky"] { position: static !important; }
  .draft-actions { flex-direction: column; }
  html body .draft-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}