/* overrides.css — our changes on top of the original build.
 *
 * Loaded AFTER site.css so these win. Kept in a separate file on purpose: site.css is their
 * compiled Tailwind and gets replaced wholesale whenever we re-harvest, so anything we edit into
 * it would be silently lost on the next build. build.mjs links this file into every page.
 */

/* ── Header logo, made ~3x larger (Adam, 8/5) ────────────────────────────────────────────────────
 * Two things were making it look tiny. The element was h-24/md:h-32 (96/128px), and the source PNG
 * was 1000x1000 with the artwork filling only 66% of the width and 55% of the height — so at 96px
 * the visible mark rendered about 53px tall. The PNG is now cropped to its opaque bounds, which
 * alone roughly doubles the apparent size, and the height below carries the rest.
 * The header has no fixed height, so it grows to fit rather than clipping.                        */
header img[alt*="Coastal Shine" i] {
  height: 116px !important;   /* phones */
  width: auto !important;
  max-width: 60vw;            /* never let it crowd the burger on a small screen */
}

@media (min-width: 768px) {
  header img[alt*="Coastal Shine" i] {
    height: 210px !important; /* 3x the old apparent artwork height (was ~70px visible) */
    max-width: none;
  }
}

/* Give the taller mark a little breathing room without shifting the nav off-centre. */
@media (min-width: 768px) {
  header > div { padding-top: 6px; padding-bottom: 6px; }
}

/* ── Gallery: the featured job block (2026-10-10) ────────────────────────────────────────────────
 * Brennan's drone video and four drone photos of a full house wash, placed at the top of /gallery as
 * one composed block: the film in a phone-shaped frame on the left, the story and a 2x2 of the photos
 * on the right; on a phone it stacks copy, film, photos. Own class names (cs-feat-*, checked against
 * site.css and the bundle: no collisions) because the compiled Tailwind only carries the classes the
 * app already used. Colours are the site's own tokens, written out so a re-harvest cannot shift them. */
.cs-feat { padding: 3.5rem 0 3.25rem; background: #fff; border-bottom: 1px solid hsl(214.3 31.8% 91.4%); }
.cs-feat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.cs-feat-copy { order: 1; }
.cs-feat-phone { order: 2; }
.cs-feat-photos { order: 3; }
@media (min-width: 1024px) {
  .cs-feat { padding: 4.5rem 0 4rem; }
  .cs-feat-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 3.5rem; row-gap: 1.75rem; align-items: start; }
  .cs-feat-phone { grid-column: 1; grid-row: 1 / 3; order: 0; align-self: center; }
  .cs-feat-copy { grid-column: 2; grid-row: 1; order: 0; }
  .cs-feat-photos { grid-column: 2; grid-row: 2; order: 0; }
}
.cs-feat-kicker { display: inline-block; margin: 0 0 .85rem; color: hsl(188 100% 35%); font: 700 .8rem/1 Poppins, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.cs-feat-copy h2 { margin: 0 0 1rem; font-family: Poppins, sans-serif; font-weight: 800; color: hsl(217 71% 13%); font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.12; letter-spacing: -.01em; }
.cs-feat-copy p { margin: 0; max-width: 40rem; color: hsl(215.4 16.3% 46.9%); font-size: 1.125rem; line-height: 1.65; }
.cs-feat-phone { position: relative; width: min(100%, 360px); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 1.6rem; overflow: hidden; background: hsl(217 71% 13%); box-shadow: 0 34px 70px -24px hsl(217 71% 13% / .5), 0 0 0 1px hsl(214.3 31.8% 91.4%); }
.cs-feat-vid { display: block; width: 100%; height: 100%; object-fit: cover; background: hsl(217 71% 13%); }
.cs-feat-tag { position: absolute; left: 1rem; top: 1rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: hsl(217 71% 13%); font: 700 .72rem/1 Poppins, sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 4px 14px -4px hsl(217 71% 13% / .4); pointer-events: none; }
.cs-feat-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; }
@media (max-width: 479px) { .cs-feat-photos { grid-template-columns: 1fr; } }
.cs-feat-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: .95rem; overflow: hidden; border: 1px solid hsl(214.3 31.8% 91.4%); box-shadow: 0 14px 34px -16px hsl(217 71% 13% / .4); background: hsl(214.3 31.8% 91.4%); }
.cs-feat-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.cs-feat-photo:hover img { transform: scale(1.045); }
.cs-feat-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem .95rem .8rem; color: #fff; font: 600 .86rem/1.35 Poppins, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); background: linear-gradient(to top, hsl(217 71% 13% / .82), hsl(217 71% 13% / 0)); }
@media (prefers-reduced-motion: reduce) { .cs-feat-photo img { transition: none; } .cs-feat-photo:hover img { transform: none; } }

/* ── Home: the drone film behind the hero + the truck photo under "Serving Maryland & Delaware" (2026-10-11,
 * Brennan's ask). The film sits under the hero's existing navy gradient, armed only after the page's load event
 * (and never under prefers-reduced-motion or data saver), so the hero's poster image is the first paint and the
 * film fades in over it once it is actually playing. The truck photo is a wide band between the Serving copy
 * and the service cards. */
.cs-hero-vid { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.cs-hero-vid.is-on { opacity: 1; }
.cs-truck { position: relative; margin: 0 auto 4rem; max-width: 64rem; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 30px 60px -28px hsl(217 71% 13% / .55), 0 0 0 1px hsl(214.3 31.8% 91.4%); background: hsl(214.3 31.8% 91.4%); }
.cs-truck img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 58%; }
@media (max-width: 767px) { .cs-truck { margin-bottom: 3rem; border-radius: 1rem; } .cs-truck img { aspect-ratio: 4 / 3; } }
.cs-truck figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.25rem .95rem; color: #fff; font: 600 .95rem/1.35 Poppins, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); background: linear-gradient(to top, hsl(217 71% 13% / .8), hsl(217 71% 13% / 0)); }