/* ==========================================================================
   Coastal Clearing & Debris LLC
   Shared stylesheet — four pages, one cached file.

   Inlining would save one request on the first page and cost one on every
   page after it. This site is built to be browsed (home -> services ->
   gallery -> contact), so the cache wins.

   Rev 2 — the patriotic direction, the exact palette the client chose from
   the rev 1 A/B (index-patriot): deep navy field, flag red as the action
   colour, weathered bone for type. The red sits within a couple of points of
   the sunlit cab of his own dump truck (truck.jpg). Red is spent where it
   means something — buttons, rules, emphasis. No stars, no stripes: the flag
   is a texture, not a theme.

   The amber token names are kept and repointed rather than renamed, so every
   structural rule from rev 1 shifts palette without being touched.
   ========================================================================== */

:root {
  --black:      #070c14;   /* navy-black rather than neutral black */
  --coal:       #0d1725;
  --panel:      #142031;
  --steel:      #1e2f45;
  --steel-lite: #2c4260;

  --gold:       #c1272d;
  --gold-bright:#e0453b;
  --gold-deep:  #841a1f;

  --bone:       #f0eae0;
  --bone-dim:   #bcc6d4;
  --muted:      #8395ab;

  --flag-red:   #c1272d;
  --flag-navy:  #16304d;

  --maxw: 1180px;
  --pad: 1.15rem;

  --shadow-lift: 0 0.6rem 1.6rem rgba(0,0,0,.55);
  --inset-deboss: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.7);
}

/* Base font is deliberately 20px, not 16. Every site in this fleet gets the
   same first note otherwise, and this customer's audience reads on a phone in
   a truck cab. */
html {
  font-size: 20px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
* , *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .012em;
  margin: 0 0 .5em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.35rem, 7.5vw, 4.1rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 4.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
p  { margin: 0 0 1.05em; }
a  { color: var(--gold-bright); }

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

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 3.4rem 0; }
.section--tight { padding: 2.2rem 0; }
.center { text-align: center; }
.lede { font-size: 1.08rem; color: var(--bone-dim); max-width: 46rem; }
.eyebrow {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  color: #e8eef6;
  margin: 0 0 .85rem;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #fff6f5; padding: .6rem 1rem; font-weight: 700;
}
.skip-link:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

/* ---------- debossed metal, reproduced in CSS ---------------------------- */
.plate {
  background: linear-gradient(180deg, #33496a 0%, #1e2f45 42%, #101c2c 100%);
  box-shadow: var(--inset-deboss), 0 2px 8px rgba(0,0,0,.5);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(0,0,0,.7);
}
.deboss {
  color: #d7e0ec;
  text-shadow: 0 1px 0 rgba(255,255,255,.13), 0 -1px 1px rgba(0,0,0,.85);
}
.rule-metal {
  height: 6px; border: 0; margin: 0;
  background: linear-gradient(180deg, #40597a, #1e2f45 40%, #0a1220);
  box-shadow: var(--inset-deboss);
}
/* The one place the full flag appears: a five-stop band — red through bone to
   navy. Restrained enough to read as trim, not bunting. */
.rule-gold { height: 4px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, #8c1a1f 12%, #c1272d 28%, #ede7dc 50%, #1e3a5f 72%, #16304d 88%, transparent); }

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  font-size: 1rem;
  padding: .82rem 1.7rem;
  border-radius: 3px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  color: #fff6f5;
  box-shadow: 0 3px 0 #5e1215, 0 .5rem 1.1rem rgba(0,0,0,.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #5e1215, 0 .8rem 1.4rem rgba(0,0,0,.6); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #5e1215; }
.btn-ghost {
  background: transparent; color: var(--bone);
  border-color: rgba(236,229,216,.4);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn-lg { font-size: 1.1rem; padding: 1rem 2.1rem; }

/* ---------- header ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(7,12,20,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(193,39,45,.42);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .5rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--bone); }
.brand img { width: 58px; height: 58px; }
.brand-name {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-weight: 600; font-size: .82rem; line-height: 1.15; letter-spacing: .05em;
}
.brand-name span { display: block; color: #dfe6ef; font-size: .66rem; letter-spacing: .16em; }
.header-nav { display: none; gap: 1.4rem; }
.header-nav a {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: .82rem; letter-spacing: .1em; font-weight: 500;
  color: var(--bone); text-decoration: none; padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.header-nav a:hover, .header-nav a.active { color: var(--gold-bright); border-bottom-color: var(--gold); }
.header-cta { display: none; }

.hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 42px; padding: 0 8px;
  background: transparent; border: 1px solid rgba(236,229,216,.28); border-radius: 3px;
  cursor: pointer;
}
.hamburger span { display: block; height: 3px; background: var(--bone); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav {
  position: fixed; top: 0; right: 0; z-index: 120;
  width: min(78vw, 20rem); height: 100vh;
  background: var(--coal); border-left: 2px solid var(--gold);
  transform: translateX(100%); transition: transform .26s ease;
  padding: 5rem 1.4rem 2rem; overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a {
  display: block; padding: .85rem 0; text-decoration: none; color: var(--bone);
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .09em;
  border-bottom: 1px solid rgba(236,229,216,.12);
}
.mobile-nav a.active { color: var(--gold-bright); }
.nav-overlay {
  position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.62);
  opacity: 0; pointer-events: none; transition: opacity .26s ease;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

/* ---------- hero --------------------------------------------------------- */
.hero { position: relative; isolation: isolate; padding: 3.6rem 0 3rem; overflow: hidden; }
.hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Two overlays, not one. The vertical pass anchors the type top and bottom;
   the horizontal pass keeps the left column readable while letting the truck
   and the machine stay visible on the right, which is the whole reason that
   photograph was chosen. Tuned by eye against the actual image. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,12,20,.90) 0%, rgba(9,18,32,.48) 48%, rgba(7,12,20,.94) 100%),
    linear-gradient(90deg, rgba(7,12,20,.88) 0%, rgba(9,18,32,.52) 42%, rgba(9,18,32,.14) 78%);
}
/* The service is the headline; "Professional & Dependable" are adjectives on it.
   The em is sized in vw so it tracks the container and stays on one line, and the
   line above it steps down two sizes so it reads as a lead-in, not a title. */
.hero h1 {
  color: var(--bone); text-shadow: 0 3px 14px rgba(0,0,0,.9); margin-bottom: .35em;
  font-size: clamp(1rem, 2.5vw, 1.8rem);
}
.hero h1 em {
  font-style: normal; color: var(--gold-bright); display: block;
  font-size: clamp(1.65rem, 4.85vw, 3.5rem);
  margin-top: .12em;
}
.hero-lede {
  font-size: 1rem; line-height: 1.5; color: #e2dbcd; max-width: 40rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* On a phone the two calls to action are stacked, matched in width and centred.
   Left-aligned buttons of different widths read as an accident rather than a
   pair, and "Get a Free Estimate" is a lot longer than "See Our Work". */
@media (max-width: 49.99rem) {
  .hero-actions { flex-direction: column; align-items: center; gap: .7rem; }
  .hero-actions .btn { width: 100%; max-width: 19rem; text-align: center; }
}

/* ---------- trust strip -------------------------------------------------- */
.trust { display: grid; grid-template-columns: 1fr; gap: 0; }
.trust div {
  padding: .5rem .7rem; text-align: center;
  display: flex; align-items: center; justify-content: center; min-height: 2.15rem;
  border-right: 1px solid rgba(0,0,0,.55); border-bottom: 1px solid rgba(0,0,0,.55);
}

/* TRIAL — star separators instead of divider lines. Stars are debossed the same
   way the plate lettering is, so they read as stamped into the metal rather
   than typed on top of it.

   Only above 50rem. Below that the three badges cannot sit on one line, and a
   wrapped row leaves a star stranded at the edge with nothing to separate — so
   the stacked layout with its divider lines takes over instead. */
@media (min-width: 50rem) {
.trust.stars { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; }
/* Padding is what sets the gap between star and phrase. Clamped in vw so the
   row breathes at 1440 without overrunning the viewport at 800, where the
   stars still apply. Ceiling is the hero headline above it — that text is
   1074px at 1440, and this lands near 870. */
.trust.stars div { position: relative; border: 0; padding: .5rem clamp(1rem, 4vw, 4rem); }
.trust.stars div::before,
.trust.stars::after {
  content: "★";
  color: #b9c3cc;
  font-size: .68rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.15), 0 -1px 1px rgba(0,0,0,.9);
}
.trust.stars div::before { position: absolute; left: -.34rem; top: 50%; transform: translateY(-50%); }
}

/* Stacked, so the shared-separator trick does not apply — each phrase gets its
   own pair instead. In flow rather than absolute, so they sit as flex items
   either side of the text and stay centred with it. */
@media (max-width: 49.99rem) {
  .trust.stars div { border-right: 0; }
  .trust.stars div::before,
  .trust.stars div::after {
    content: "★";
    color: #b9c3cc;
    font-size: .68rem;
    line-height: 1;
    margin: 0 .75rem;
    text-shadow: 0 1px 0 rgba(255,255,255,.15), 0 -1px 1px rgba(0,0,0,.9);
  }
}
.trust strong {
  display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: clamp(.66rem, 1.5vw, .82rem); letter-spacing: .04em; color: var(--bone); line-height: 1.25;
}
.trust span { font-size: .78rem; color: var(--bone-dim); }

/* ---------- cards -------------------------------------------------------- */
.grid { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
.card {
  background: var(--panel); border: 1px solid rgba(255,255,255,.07);
  border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column;
}
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: 1.1rem 1.15rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.card h3 { color: var(--bone); margin-bottom: .4rem; }
.card p { color: var(--bone-dim); font-size: .9rem; margin-bottom: 0; }

/* Services run four across on desktop — there are exactly eight cards
   (seven services plus the "not sure what it needs" prompt), so 4x2 fills
   the grid squarely with no orphan on a row of its own. Type and padding
   step down to match the narrower column. */
/* .grid.services-grid, not .services-grid — the generic .grid rules live in
   later media queries, and at equal specificity the later rule wins. */
@media (min-width: 68rem) {
  .grid.services-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .grid.services-grid .card-body { padding: .95rem 1rem 1.1rem; }
  .grid.services-grid .card h3 { font-size: 1.02rem; line-height: 1.2; }
  .grid.services-grid .card p { font-size: .84rem; line-height: 1.55; }
}
.card .tag {
  align-self: flex-start; margin-bottom: .6rem;
  font-family: 'Oswald', sans-serif; font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-bright); border: 1px solid rgba(224,69,59,.5);
  padding: .16rem .5rem; border-radius: 2px;
}

/* ---------- split feature ------------------------------------------------ */
.split { display: grid; gap: 1.6rem; align-items: center; grid-template-columns: 1fr; }
.split img { border-radius: 4px; box-shadow: var(--shadow-lift); }

/* ---------- stat callout ------------------------------------------------- */
.stat {
  border-left: 4px solid var(--gold);
  background: linear-gradient(90deg, rgba(193,39,45,.12), transparent 70%);
  padding: 1rem 1.2rem; margin: 1.4rem 0;
}
/* The figure is a phrase, not a short percentage, so it is held to one line and
   scaled by viewport instead. 9vw is set by the 320px case, where the string
   can carry 1.5rem at most. */
.stat .big {
  font-family: 'Oswald', sans-serif; font-size: clamp(1rem, 9vw, 2.1rem); font-weight: 700;
  color: var(--gold-bright); line-height: 1.05; display: block; white-space: nowrap;
}
.stat p { margin: .35rem 0 0; font-size: .88rem; color: var(--bone-dim); }

/* ---------- testimonials ------------------------------------------------- */
.quotes { display: grid; gap: 1rem; grid-template-columns: 1fr; }
blockquote.quote {
  margin: 0; background: var(--coal); border: 1px solid rgba(255,255,255,.07);
  border-top: 3px solid var(--gold-deep); border-radius: 3px; padding: 1.15rem 1.2rem;
}
blockquote.quote p { font-size: .93rem; color: var(--bone); margin-bottom: .7rem; }
blockquote.quote footer { font-size: .76rem; color: var(--muted); }
blockquote.quote cite { font-style: normal; font-weight: 700; color: var(--gold); display: block; }
.stars { color: var(--gold); letter-spacing: .12em; font-size: .8rem; margin-bottom: .5rem; }

/* ---------- service area ------------------------------------------------- */
.towns { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 1.1rem 0 0; }
/* Star bullets, the same mark as the trust band so the page keeps one list
   language. Absolute rather than a list-style marker, which cannot be sized or
   shadowed independently of the text. */
.starred { list-style: none; margin: 0 0 1.05em; padding: 0; }
.starred li { position: relative; padding-left: 1.15rem; margin-bottom: .42rem; }
.starred li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: .3em;
  color: #b9c3cc;
  font-size: .74rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.15), 0 -1px 1px rgba(0,0,0,.9);
}

.towns li {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: .74rem;
  letter-spacing: .08em; padding: .34rem .72rem; border-radius: 2px;
  background: var(--steel); border: 1px solid rgba(255,255,255,.08); color: var(--bone);
}

/* ---------- gallery ------------------------------------------------------ */
.gal-group { margin-bottom: 2.6rem; }
.gal-grid { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
.gal-item {
  margin: 0; position: relative; border-radius: 3px; overflow: hidden;
  background: var(--panel); border: 1px solid rgba(255,255,255,.07);
}
.gal-item button {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.gal-item button:hover img { transform: scale(1.04); }
.gal-item figcaption {
  padding: .5rem .6rem .6rem; font-size: .74rem; line-height: 1.4; color: var(--bone-dim);
}

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(6,6,8,.95); padding: 1rem;
  align-items: center; justify-content: center;
}
.lightbox[open], .lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: 1200px; width: 100%; text-align: center; }
.lightbox img { max-height: 78vh; width: auto; margin: 0 auto; border-radius: 3px; }
.lightbox figcaption { color: var(--bone-dim); font-size: .85rem; margin-top: .8rem; }
.lightbox-close {
  position: absolute; top: .9rem; right: 1rem; width: 3rem; height: 3rem;
  background: var(--steel); color: var(--bone); border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px; font-size: 1.4rem; line-height: 1; cursor: pointer;
}

/* ---------- form --------------------------------------------------------- */
.form-card {
  background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px; padding: 1.3rem 1.15rem 1.5rem; box-shadow: var(--shadow-lift);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .09em; color: var(--bone); margin-bottom: .35rem;
}
.field .hint { display: block; text-transform: none; letter-spacing: 0; font-family: 'Barlow', sans-serif; font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--bone);
  background: #0e0f12; border: 1px solid rgba(255,255,255,.18); border-radius: 3px;
  padding: .7rem .8rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(193,39,45,.25); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e0645a; }
.err { display: none; color: #f0938a; font-size: .8rem; margin-top: .3rem; }
.field.invalid .err { display: block; }
.req { color: var(--gold); }
.form-note { font-size: .82rem; color: var(--muted); }
.form-status { display: none; margin-top: 1rem; padding: .9rem 1rem; border-radius: 3px; font-size: .9rem; }
.form-status.ok { display: block; background: rgba(70,150,90,.16); border: 1px solid rgba(110,200,140,.45); color: #b8e8c8; }
.form-status.err-status { display: block; background: rgba(193,39,45,.16); border: 1px solid rgba(224,69,59,.5); color: #f5b7b1; }

/* ---------- CTA band (sibling of the footer, never nested) --------------- */
.cta-band { background: linear-gradient(180deg, #142031, #0a1220); border-top: 3px solid var(--gold); }
.cta-band .wrap { padding-top: 2.6rem; padding-bottom: 2.6rem; text-align: center; }
.cta-band h2 { margin-bottom: .4rem; }
.cta-band p { color: var(--bone-dim); max-width: 34rem; margin-left: auto; margin-right: auto; }

/* ---------- tour link ---------------------------------------------------- */
.tour { border-top: 1px solid rgba(255,255,255,.09); }
.tour a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem var(--pad); max-width: var(--maxw); margin: 0 auto;
  text-decoration: none; color: var(--bone);
}
.tour .label { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: block; }
.tour .next { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1.25rem; color: var(--bone); }
.tour a:hover .next { color: var(--gold-bright); }
.tour .arrow { font-size: 1.6rem; color: var(--gold); }

/* ---------- footer ------------------------------------------------------- */
.site-footer { background: #050910; border-top: 1px solid rgba(255,255,255,.08); padding: 2.4rem 0 1.6rem; }
.footer-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
/* The mark lives here rather than the header, where it was too small to read,
   or under the hero, where imagery ahead of the service and trust blocks costs
   conversions. The footer is where it can be shown at size without standing
   between a visitor and the reason they came. */
/* logo-mark.webp is cropped to the artwork, so this width is the artwork —
   no dead space to reason about. At 330 it stands 260px tall, just under the
   267px Services column beside it. Past ~338 the mark becomes the tallest
   thing in the footer and the row stops reading as a row.
   logo-480.webp is still the square version, kept for schema and OG. */
.footer-mark { width: 100%; max-width: 330px; height: auto; }
.site-footer h4 { color: var(--gold); font-size: .82rem; letter-spacing: .14em; }
.site-footer a { color: var(--bone-dim); text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright); }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.site-footer li { margin-bottom: .35rem; }
.footer-bottom {
  margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between;
  font-size: .76rem; color: var(--muted);
}
.tw-credit {
  background: linear-gradient(90deg, #E05A2B, #1E9DB8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-weight: 700; text-decoration: none;
}

/* ==========================================================================
   Wider screens
   ========================================================================== */
@media (min-width: 50rem) {
  .trust { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  /* Three cards in a 2-up band would leave an orphan; go straight to 3-up. */
  .grid.steps { grid-template-columns: repeat(3, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 5.5rem 0 4.6rem; }
  .hero-lede { font-size: 1.06rem; line-height: 1.6; }
  .section { padding: 4.4rem 0; }
}
@media (min-width: 60rem) {
  .header-nav { display: flex; }
  .header-cta { display: inline-block; }
  .hamburger { display: none; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1.05fr .95fr; gap: 2.6rem; }
  .split.flip > :first-child { order: 2; }
  .hero { padding: 7rem 0 5.6rem; }
}

/* ==========================================================================
   Accessibility preferences — house standard
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .gal-item button:hover img { transform: none; }
  .btn-primary:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --bone-dim: #e8eef6; --muted: #cdd8e5; --gold-bright: #ff8a80; }
  body { background: #000; }
  .card, .form-card, blockquote.quote { border-color: rgba(255,255,255,.5); }
  .field input, .field select, .field textarea { border-color: rgba(255,255,255,.6); }
  .header-nav a.active, .header-nav a:hover { color: #ffb3ad; }
  .hero::after {
    background: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.82) 45%, rgba(0,0,0,.98));
  }
  .btn-ghost { border-color: #fff; color: #fff; }
}

@media print {
  .site-header, .mobile-nav, .nav-overlay, .tour, .cta-band, .hamburger { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- gallery: filter bar + zoom grid ------------------------------ */
/* One flat filterable grid rather than stacked sections; the photo scales on
   hover. Captions are deliberately NOT rendered — the text lives in alt and in
   the lightbox, where it does its job without cluttering the grid. */
.gal-filter {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin-bottom: 1.8rem;
}
.filter-btn {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: .74rem; letter-spacing: .1em; font-weight: 500;
  color: var(--bone-dim); background: var(--panel);
  border: 1px solid rgba(190,205,225,.16); border-radius: 3px;
  padding: .5rem .9rem; cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.filter-btn:hover { color: var(--bone); border-color: var(--gold); }
.filter-btn.active {
  color: #fff6f5; background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  border-color: var(--gold-deep);
}
.filter-btn:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; }

.gal-item img { transition: transform .35s ease; }
.gal-item button:hover img,
.gal-item button:focus-visible img { transform: scale(1.06); }
.gal-item[hidden] { display: none; }
.gal-empty { text-align: center; color: var(--muted); padding: 2rem 0; }

@media (prefers-reduced-motion: reduce) {
  .gal-item img,
  .gal-item button:hover img,
  .gal-item button:focus-visible img { transition: none; transform: none; }
}

/* ---------- contact form: two-column layout ------------------------------ */
/* Paired short fields instead of one long column, so the form reads as less
   work to fill in. */
/* Contact is the form and nothing else. The heading is a one-line instruction
   rather than a display banner, and the form is held to a readable measure
   instead of the full content width. */
.form-only { max-width: 46rem; margin: 0 auto; }
.form-only h1 {
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 1.3rem;
}

.form-grid { display: grid; gap: 0 1rem; }
.form-grid .span-full { grid-column: 1 / -1; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 40rem) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}