/* Tom & Jerry's — site.css
   Layered on top of the kit's tokens/base/patterns. Everything here is
   client-specific structure; nothing here belongs back in the kit.

   PREVIEW NOTE: the brand ramp in tokens.css is provisional. It gets
   resampled from the real logo before launch, and every colour on the page
   follows from that one value, so the swap is a one-line change. */

/* ── placeholder blocks ────────────────────────────────────────────────
   Deliberately obvious. A gray box that says what belongs in it reads as
   "not finished yet"; a stock photo of someone else's plumber reads as
   "this is what you're buying", which is a lie. */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      var(--brand-100) 0 12px, var(--brand-050) 12px 24px);
  border: 2px dashed var(--brand-400);
  color: var(--brand-700);
  font-family: var(--font-util, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 18px;
  min-height: 190px;
  border-radius: 2px;
}
.ph span { max-width: 30ch; line-height: 1.5; }
.ph--hero { min-height: 340px; }
.ph--wide { min-height: 260px; }
.ph--sq   { aspect-ratio: 1; min-height: 0; }

/* ── shell ─────────────────────────────────────────────────────────── */
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

.topbar {
  background: var(--brand-900);
  color: var(--brand-100);
  font-size: 13.5px;
  padding: 7px 0;
}
.topbar .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.topbar a { color: #fff; font-weight: 700; text-decoration: none; }

.masthead { background: #fff; border-bottom: 1px solid var(--brand-200); }
.masthead .wrap { display: flex; align-items: center; gap: 22px; padding: 16px 0; flex-wrap: wrap; }
.brandmark { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brandmark .ph { width: 122px; min-height: 62px; padding: 8px; font-size: 9.5px; }
.brandmark b { display: block; font-size: 21px; color: var(--brand-800); line-height: 1.15; }
.brandmark small { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-500); margin-top: 3px; }

nav.main { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
nav.main a {
  padding: 9px 13px; font-size: 14px; font-weight: 600;
  color: var(--brand-800); text-decoration: none; border-radius: 3px;
}
nav.main a:hover { background: var(--brand-050); }
nav.main a[aria-current="page"] { background: var(--brand-800); color: #fff; }

.cta-call {
  background: var(--accent); color: var(--brand-950);
  padding: 11px 20px; border-radius: 3px; font-weight: 800;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 0 var(--accent-dk, #b8900f);
}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero { background: var(--brand-800); color: #fff; padding: 54px 0 60px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.hero h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; margin: 0 0 16px; text-wrap: balance; }
.hero p.lede { font-size: 18px; color: var(--brand-100); margin: 0 0 26px; max-width: 46ch; }
.est { display: inline-block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
       color: var(--accent); border: 1px solid var(--accent); padding: 5px 12px; margin-bottom: 20px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ghost { border: 2px solid var(--brand-300); color: #fff; padding: 10px 20px;
             border-radius: 3px; text-decoration: none; font-weight: 700; }

/* ── sections ──────────────────────────────────────────────────────── */
section.band { padding: 56px 0; }
section.band.alt { background: var(--brand-050); }
h2.sec { font-size: clamp(23px, 3vw, 32px); margin: 0 0 10px; color: var(--brand-900); }
p.sub { color: var(--ink-soft, #555); max-width: 62ch; margin: 0 0 30px; font-size: 16.5px; }

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

.card {
  background: #fff; border: 1px solid var(--brand-200);
  border-radius: 4px; padding: 22px; display: flex; flex-direction: column; gap: 9px;
}
.card h3 { margin: 0; font-size: 18.5px; color: var(--brand-800); }
.card p { margin: 0; color: #555; font-size: 15px; }
.card a.more { margin-top: auto; font-weight: 700; color: var(--brand-600); text-decoration: none; font-size: 14.5px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0;
         border: 1px solid var(--brand-200); background: #fff; border-radius: 4px; overflow: hidden; }
.facts div { padding: 20px 22px; border-right: 1px solid var(--brand-100); }
.facts div:last-child { border-right: none; }
.facts b { display: block; font-size: 28px; color: var(--brand-700); line-height: 1.1; }
.facts span { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; color: #777; margin-top: 5px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

/* ── footer ────────────────────────────────────────────────────────── */
footer.site { background: var(--brand-950); color: var(--brand-200); padding: 46px 0 30px; margin-top: 10px; }
footer.site .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; }
footer.site h4 { color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
footer.site a { color: var(--brand-200); text-decoration: none; display: block; padding: 3px 0; font-size: 14.5px; }
footer.site a:hover { color: #fff; }
.legal { border-top: 1px solid var(--brand-800); margin-top: 30px; padding-top: 18px; font-size: 12.5px; color: var(--brand-400); }

/* ── preview banner — REMOVE BEFORE LAUNCH ─────────────────────────── */
.previewbar {
  background: #B3261E; color: #fff; text-align: center;
  padding: 9px 16px; font-size: 13.5px; line-height: 1.5;
}
.previewbar b { color: #fff; }

@media (max-width: 860px) {
  .hero .wrap, .split { grid-template-columns: 1fr; gap: 28px; }
  nav.main { width: 100%; margin-left: 0; }
  .facts div { border-right: none; border-bottom: 1px solid var(--brand-100); }
}

/* ── photos ───────────────────────────────────────────────────────────
   Real client photography, dropped into the slots the .ph placeholders held.

   THESE DO NOT CROP, AND THAT IS THE WHOLE POINT.

   The first version of this file gave .shot--hero a height of 340px and
   .shot--wide 260px, with object-fit: cover. That silently center-cropped
   every photo to a landscape box: the three recovered crew photos are
   480x640 PORTRAIT, so forcing them into a 1.92:1 slot discarded about
   two thirds of the frame and cut people off at the shins and the
   forehead. Even the 4:3 truck shots lost ~31% of their height.

   prep-images.mjs deliberately refuses to crop for exactly this reason -
   "a script that guesses will cut someone's head off" - and putting a
   blind crop back in CSS defeats that. So: width 100%, height auto,
   natural aspect ratio, nothing thrown away. Rows end up different
   depths down the page, which is correct; the photos are different
   shapes and pretending otherwise is what broke it.

   The width/height attributes on each <img> reserve the right space
   before the image loads, so this costs no layout shift. */
.shot {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--brand-100);
}
.shot picture { display: block; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* NOTHING ON THIS SITE IS CROPPED ANY MORE.
   Every row of photos is made of frames that already share an aspect
   ratio - the three crew shots are all 480x640, the index truck row is
   three 4:3 frames - so the rows line up without object-fit doing any
   cutting. If you add a photo to a row whose ratio does not match the
   others, fix it by choosing a different photo, not by adding a crop:
   these are 480px phone photos of real people and there is no spare
   frame to throw away. */
.shot--tile { /* no aspect override - natural ratio, full frame */ }