/* =============================================================================
   Lummus Inc. — lummusinc.com
   =============================================================================

   ONE stylesheet, shared by all four pages (index, about, products, contact).
   Keep the ?v= on every <link> in step across all four, or a returning visitor
   gets whichever copy their cache happened to keep under the older key.

   ⚠️ BUMP THE ?v= ONCE, AS THE LAST EDIT OF A BATCH. Bumping it before the CSS
   is finished pins a half-written file to the new key, and every later edit is
   then invisible to any browser that already fetched it — which looks exactly
   like the edits never landed.

   ⚠️ NO INLINE STYLES ANYWHERE IN THE HTML. Not one style="..." attribute.
   That is what lets .htaccess ship `style-src 'self'` with no 'unsafe-inline',
   which is the strictest a stylesheet policy gets. The moment one inline style
   appears, that directive has to be weakened and most of the protection goes
   with it. If something needs a one-off look, give it a class.

   There is also zero JavaScript on this site. The nav wraps instead of using a
   hamburger; the contact form posts to PHP. Keeping it that way is why the CSP
   can be as tight as it is.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Palette
   -----------------------------------------------------------------------------
   Turf equipment, not software. Deep green does the structural work, and the
   orange is the accent the brands on the floor already share — Scag and Wright
   are both orange machines, so it reads as "this is a dealership" rather than
   as decoration. Used sparingly: calls to action and rules, nothing else.
-------------------------------------------------------------------------------- */
:root {
  --ink:        #15191b;   /* near-black — headings, header bar */
  --ink-soft:   #3d474b;   /* body copy */
  --steel:      #6b7780;   /* secondary/meta text */
  --turf:       #1d6b35;   /* deep equipment green */
  --turf-dark:  #14512a;
  --blaze:      #d95c0a;   /* accent — CTAs, rules */
  --blaze-dark: #b64a05;
  --paper:      #ffffff;
  --shell:      #f4f6f3;   /* page background, alternating bands */
  --line:       #dbe0da;

  --wrap: 1100px;

  /* System stack. No webfont, so no extra request, no layout shift, and
     font-src can stay 'self' with nothing in the folder. If a display face is
     ever added, self-host it in fonts/ — do NOT put it on a CDN, that means
     widening two CSP directives and handing Google every visitor's IP. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   Reset / base
-------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  /* Room for the fixed mobile call bar, so the footer is never trapped under
     it. Zeroed again at the desktop breakpoint where the bar is hidden. */
  padding-bottom: 64px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--turf); }
a:hover { color: var(--turf-dark); }

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.8vw, 2rem);   font-weight: 750; }
h3 { font-size: 1.12rem; font-weight: 700; }

p { margin: 0 0 1.1em; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}

/* An uppercase kicker above a heading. Tracking is opened up because small
   uppercase text set tight is the single most common way to make a business
   site look like a template. */
.eyebrow {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blaze);
  margin-bottom: 0.85em;
}

.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; }

/* Running body copy. Capped in ch rather than px so the measure stays readable
   at any root font size, including a visitor who has bumped theirs up. */
.prose { max-width: 62ch; margin-bottom: 1.8em; }
.prose p:last-child { margin-bottom: 0; }

.optional { font-weight: 400; color: var(--steel); }

/* -----------------------------------------------------------------------------
   Header
   -----------------------------------------------------------------------------
   No hamburger and no JavaScript. Four links fit across a 320px screen once
   they shrink, so the nav simply wraps under the wordmark on narrow viewports.
   A menu button would mean script on every page to toggle one list.
-------------------------------------------------------------------------------- */
.site-header {
  background: var(--ink);
  border-bottom: 3px solid var(--blaze);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
  margin-right: auto;
}

.brand-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}

.brand-suffix {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blaze);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.site-nav a {
  color: #d5dbd6;
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: #fff; border-bottom-color: var(--blaze); }

/* Set on the current page's own link in each file, so a visitor always knows
   where they are without any script reading location.pathname. */
.site-nav a.is-current { color: #fff; border-bottom-color: var(--blaze); }

/* Header phone number. Hidden on narrow screens because the fixed bottom call
   bar covers that case better — two call targets on one small screen is noise. */
.header-call {
  display: none;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--blaze);
  border-radius: 4px;
  padding: 6px 14px;
}

.header-call:hover { background: var(--blaze); color: #fff; }

/* -----------------------------------------------------------------------------
   Hero
-------------------------------------------------------------------------------- */
.hero {
  background: var(--shell);
  border-bottom: 1px solid var(--line);
  padding: clamp(44px, 7vw, 80px) 0;
}

.hero h1 { max-width: 20ch; }
.hero .lede { margin-bottom: 1.8em; }

/* Single column by default; the two-column split arrives at the desktop
   breakpoint below. Mobile-first, so the phone case needs no override. */
.hero-grid { display: grid; gap: 34px; align-items: center; }

.hero-photo {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.page-head {
  background: var(--shell);
  border-bottom: 1px solid var(--line);
  padding: clamp(34px, 5vw, 56px) 0;
}

.page-head h1 { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   Buttons
-------------------------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary { background: var(--blaze); color: #fff; }
.btn-primary:hover { background: var(--blaze-dark); color: #fff; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: #fff; }

/* -----------------------------------------------------------------------------
   Sections and info cards
-------------------------------------------------------------------------------- */
section { padding: clamp(40px, 6vw, 68px) 0; }
section.band { background: var(--shell); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--turf);
  border-radius: 4px;
  padding: 24px;
}

.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }

.card-figure { font-size: 1.24rem; font-weight: 700; color: var(--ink); }
.card-figure a { text-decoration: none; }

/* Hours read as a small table so the lunch closure cannot be misread as a
   typo — it is the detail a customer most needs to get right before driving. */
.hours { margin: 0; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.hours div:last-child { border-bottom: 0; }
.hours dt { font-weight: 600; color: var(--ink); margin: 0; }
.hours dd { margin: 0; text-align: right; }
.hours .closed { color: var(--steel); }
.hours-note { font-size: 0.9rem; color: var(--steel); margin: 10px 0 0; }

/* -----------------------------------------------------------------------------
   Brands
   -----------------------------------------------------------------------------
   Logos are supplied by the manufacturers and vary wildly in aspect ratio, so
   each sits in a fixed-height flex box and scales inside it rather than being
   forced to a common width. object-fit: contain means a tall logo and a wide
   one still read as the same visual weight.
-------------------------------------------------------------------------------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 22px;
  text-decoration: none;
  text-align: center;
  min-height: 168px;
}

.brand-tile:hover { border-color: var(--blaze); }

.brand-tile img {
  max-height: 66px;
  width: auto;
  object-fit: contain;
}

.brand-tile span {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--steel);
}

/* Stand-in for a brand with no logo file yet.
   ⚠️ A tile whose <img> 404s renders as a broken-image icon, which reads as a
   bug rather than as a missing asset — and it 404s in the server log on every
   single page view. A wordmark occupies the same 66px slot the logos are
   normalised to, so the row stays even, and swapping the real logo back in is
   one line. Set in the same weight and tracking as .brand-name so it reads as
   deliberate typography, not as a placeholder. */
/* ⚠️ Selector must outspecify `.brand-tile span` above, which is (0,1,1) — a
   bare `.brand-wordmark` is (0,1,0) and LOSES, silently inheriting the small
   grey caption styling meant for the domain line. Caught only by reading the
   computed font-weight back out of a real browser; it looks nearly right. */
.brand-tile .brand-wordmark {
  display: flex;
  align-items: center;
  height: 66px;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
}

.brand-tile:hover .brand-wordmark { color: var(--blaze); }

.brand-tile:hover span { color: var(--blaze); }

/* -----------------------------------------------------------------------------
   Contact form
-------------------------------------------------------------------------------- */
.form-wrap { max-width: 560px; }

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--steel);
  border-radius: 4px;
  padding: 11px 13px;
}

.field input:focus,
.field textarea:focus {
  outline: 3px solid rgba(217, 92, 10, 0.35);
  outline-offset: 1px;
  border-color: var(--blaze);
}

.field textarea { min-height: 150px; resize: vertical; }

/* The honeypot. Must be reachable by nothing a human sees, but NOT
   display:none — some bots skip hidden inputs specifically because that is the
   obvious tell. Pushed off-screen instead, with tabindex="-1" and
   autocomplete="off" on the input itself so a keyboard user or a password
   manager never lands in it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Result banners, shown by send.php redirecting back with ?sent=1 / ?error=... */
.notice {
  border-radius: 4px;
  padding: 15px 18px;
  margin-bottom: 26px;
  font-weight: 600;
}
.notice-ok   { background: #e8f3ea; border: 1px solid var(--turf);  color: var(--turf-dark); }
.notice-bad  { background: #fdeee4; border: 1px solid var(--blaze); color: var(--blaze-dark); }

/* -----------------------------------------------------------------------------
   Footer
-------------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #aeb8b1;
  padding: 44px 0 34px;
  font-size: 0.94rem;
}

.site-footer h3 {
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px;
}

.site-footer a { color: #d5dbd6; }
.site-footer a:hover { color: var(--blaze); }

.site-footer address { font-style: normal; }

.footer-base {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid #2b3234;
  font-size: 0.86rem;
  color: var(--steel);
}

/* -----------------------------------------------------------------------------
   Fixed mobile call bar
   -----------------------------------------------------------------------------
   This is a dealership. On a phone, the single most likely useful action on
   any page is placing a call, and it should never require scrolling to find.
-------------------------------------------------------------------------------- */
.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: block;
  background: var(--blaze);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 15px 10px;
  padding-bottom: calc(15px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.22);
}

.call-bar:hover { background: var(--blaze-dark); color: #fff; }

/* -----------------------------------------------------------------------------
   Accessibility
-------------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--blaze);
  color: #fff;
  padding: 10px 16px;
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* -----------------------------------------------------------------------------
   Desktop
-------------------------------------------------------------------------------- */
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .call-bar { display: none; }
  .header-call { display: inline-block; }

  /* Copy left, the lot photo right. Text gets the wider column — the photo is
     supporting evidence, not the message. */
  .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 48px; }
}