/* ==========================================================================
   Marquee Restrooms — production stylesheet
   Converted from the approved Claude Design export. Every colour, size, and
   spacing value below is carried over from the original inline styles.
   Additions are limited to: responsive behaviour, focus states, and the
   rebuilt hero. Nothing was restyled for taste.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --cream:        #FAF7F1;
  --cream-alt:    #F2ECE1;
  --panel:        #EDE3D1;
  --panel-rule:   rgba(25,21,16,0.14);
  --card:         #FFFDFA;
  --ink:          #191510;
  --ink-deep:     #100D09;
  --ink-hover:    #241D15;
  --gold:         #A9884E;
  --gold-bright:  #D9C287;
  --gold-hover:   #C4A468;
  --gold-cta-hi:  #E6D3A0;
  --rule:         #E2D9C9;
  --rule-alt:     #DCD2C0;
  --muted:        #6B6255;
  --muted-soft:   #8A8173;
  --placeholder:  #A79E90;

  --on-dark:        #FAF7F1;
  --on-dark-mid:    #C4B9A6;
  --on-dark-dim:    #9E937F;
  --on-dark-faint:  #7A7161;
  --on-dark-body:   #B6AA97;

  --hair:      rgba(214,187,143,0.22);
  --hair-16:   rgba(214,187,143,0.16);
  --hair-24:   rgba(214,187,143,0.24);
  --hair-28:   rgba(214,187,143,0.28);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  Jost, Helvetica, Arial, sans-serif;

  --maxw: 1280px;
  --gut: 32px;

  /* Hero geometry, measured from the approved hero band (1645×818). */
  /* Shows ~87% of the master frame so the whole trailer, its wheels and the
     ground line resolve. A wider ratio crops through the wheels and reads as a
  /* The hero master is 1460x1078. --hero-ratio is its NATIVE ratio, so the
     whole photograph shows with no crop at all. --hero-photo steps the plate
     back from the viewport edge: it is the only way to make the trailer read
     smaller, because there is no photograph beyond the frame to zoom out to. */
  --hero-ratio: 1.3543;
  --hero-photo: 80%;
  --hero-left: 3.95%;
}

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

/* `hidden` must win over component display rules (.quote__status is a grid,
   .mnav is a block). Without this the success panel renders on page load. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
/* Keep anchored sections clear of the sticky header (measured: 104px desktop,
   100px tablet, 92px phone) plus a little breathing room. */
section[id], [id]:target { scroll-margin-top: var(--anchor-offset, 120px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img, picture, svg { max-width: 100%; }
img { border-style: none; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold); }

input, select, textarea, button { font-family: var(--sans); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; margin: 0; }

/* ---------------------------------------------------------- focus + a11y -- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.on-dark :focus-visible, .site-footer :focus-visible, .sec--dark :focus-visible {
  outline-color: var(--gold-bright);
}
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 12px 20px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.skip-link:focus { top: 8px; color: var(--cream); }

/* ------------------------------------------------------------ primitives -- */
.container { max-width: var(--maxw); margin: 0 auto; }

.sec { padding: 104px var(--gut); }
.sec--tight { padding: 88px var(--gut); }
.sec--dark { background: var(--ink); color: var(--on-dark); }
.sec--cream { background: var(--cream); }
.sec--alt { background: var(--cream-alt); border-top: 1px solid var(--rule); }
.sec--dark a { color: inherit; }

.eyebrow {
  font-size: 11px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}
.eyebrow--sm { font-size: 10.5px; letter-spacing: .24em; margin-bottom: 18px; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.arrow-link:hover { color: var(--ink); }
.sec--dark .arrow-link:hover { color: var(--on-dark); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 30px;
  font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--dark:hover { background: var(--gold); border-color: var(--gold); color: var(--cream); }
.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 500; letter-spacing: .22em; height: 58px; padding: 0 36px; }
.btn--gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--ink); }
.btn--tall { height: 54px; padding: 0 32px; font-size: 11.5px; letter-spacing: .22em; }
.btn--lg { height: 58px; padding: 0 36px; }

.sec--intro { padding: 92px var(--gut) 0; }

.notfound { max-width: 640px; margin: 0 auto; text-align: center; padding: 72px 0; }
.notfound__title { font-size: 44px; line-height: 1.1; margin: 0 0 20px; color: var(--ink); }
.notfound__body { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--muted); margin: 0 auto 32px; }

/* ================================================================ header == */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream); border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px var(--gut);
  display: flex; align-items: center; gap: 24px;
}

.logo { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.logo:hover { color: var(--ink); }
.logo__crown { display: block; width: 34px; height: auto; }
.logo__word {
  font-family: var(--serif); font-weight: 500; font-size: 31px;
  letter-spacing: .14em; color: var(--ink); line-height: 1;
}
.logo__sub {
  font-family: var(--sans); font-weight: 300; font-size: 9.5px;
  letter-spacing: .42em; color: var(--gold); line-height: 1; padding-left: .42em;
}
.logo--sm .logo__crown { width: 30px; margin-bottom: 2px; }
.logo--sm { align-items: flex-start; gap: 6px; }
.logo--sm .logo__word { font-size: 24px; color: var(--on-dark); }
.logo--sm .logo__sub { padding-left: 0; }

.nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav__link {
  font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.nav__link:hover { color: var(--gold); }
.nav__link.is-current { color: var(--gold); border-bottom-color: var(--gold); }
.nav__caret {
  display: inline-block; width: 0; height: 0; margin-left: 8px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--gold); vertical-align: middle;
}
.nav__group { position: relative; display: flex; align-items: center; }
.nav__trigger { display: inline-flex; align-items: center; }

/* Occasions panel — opens on hover and on focus-within, both without JS. */
.menu {
  position: absolute; top: 100%; left: -22px; padding-top: 18px; width: 340px; z-index: 60;
  visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility .12s ease;
}
.nav__group:hover > .menu,
.nav__group:focus-within > .menu,
.nav__trigger[aria-expanded="true"] + .menu { visibility: visible; opacity: 1; }
.menu__list {
  list-style: none; margin: 0; padding: 0; display: grid;
  background: var(--ink); border: 1px solid var(--hair-28);
  box-shadow: 0 26px 60px rgba(20,15,10,.4);
}
.menu__item {
  display: grid; gap: 4px; padding: 15px 22px;
  border-bottom: 1px solid var(--hair-16); color: var(--on-dark);
}
.menu__list li:last-child .menu__item { border-bottom: 0; }
.menu__item:hover { background: var(--ink-hover); color: var(--on-dark); }
.menu__title { font-family: var(--serif); font-size: 18px; color: var(--on-dark); }
.menu__blurb { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--on-dark-body); }

.site-header__actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.site-header__phone { font-size: 13px; font-weight: 400; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.site-header__phone:hover { color: var(--gold); }

/* burger — hidden on desktop */
.burger {
  display: none; width: 48px; height: 48px; margin-left: auto;
  background: transparent; border: 1px solid var(--rule); padding: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger__box { position: relative; display: block; width: 20px; height: 12px; }
.burger__bar, .burger__bar::before, .burger__bar::after {
  position: absolute; left: 0; width: 20px; height: 1px; background: var(--ink);
  transition: transform .18s ease, opacity .18s ease;
}
.burger__bar { top: 5.5px; }
.burger__bar::before { content: ''; top: -5.5px; }
.burger__bar::after  { content: ''; top: 5.5px; }
.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* mobile nav panel */
.mnav {
  display: none; background: var(--ink); color: var(--on-dark);
  border-top: 1px solid var(--hair-16);
  max-height: calc(100dvh - 76px); overflow-y: auto;
}
.mnav__list, .mnav__sublist { list-style: none; margin: 0; padding: 0; }
.mnav__item { border-bottom: 1px solid var(--hair-16); }
.mnav__link {
  display: flex; align-items: center; width: 100%;
  padding: 20px var(--gut); background: none; border: 0; text-align: left;
  font-size: 13px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-dark); cursor: pointer;
}
.mnav__link:hover, .mnav__link.is-current { color: var(--gold-bright); }
.mnav__disclosure .nav__caret { margin-left: 10px; transition: transform .18s ease; }
.mnav__disclosure[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.mnav__sublist { background: var(--ink-deep); }
.mnav__sublink {
  display: block; padding: 15px var(--gut) 15px calc(var(--gut) + 16px);
  font-size: 15px; font-weight: 300; color: var(--on-dark-mid);
  border-bottom: 1px solid var(--hair-16);
}
.mnav__sublist li:last-child .mnav__sublink { border-bottom: 0; }
.mnav__sublink:hover { color: var(--gold-bright); }
.mnav__foot { display: grid; gap: 16px; padding: 24px var(--gut) 30px; }
.mnav__phone { font-family: var(--serif); font-size: 26px; color: var(--on-dark); }
.mnav__cta { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.mnav__cta:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--ink); }

/* ================================================================== hero == */
.hero { position: relative; background: #100c08; overflow: hidden; isolation: isolate; }
.hero__media { display: block; }
.hero__media img {
  display: block; width: var(--hero-photo); height: auto;
  margin-left: auto; margin-right: 0;
  aspect-ratio: var(--hero-ratio);
  object-fit: contain;
  /* Dissolves the left edge into the plate so there is no seam where the
     photograph starts, and the headline sits on near-solid ink. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%);
}
/* Legibility scrim. The approved band had naturally dark foliage behind the
   headline; the clean plate is brighter there, so a soft gradient stands in. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* The hero photograph is a close product shot, so the type sits over the
     trailer's near-white flank rather than dark foliage. This scrim is
     deliberately heavy on the left so the white headline, subheadline and rule
     keep an accessible contrast ratio; it fades out well before the right of
     the frame so the trailer itself stays bright. */
  background:
    linear-gradient(90deg,
      rgba(16,12,8,.80) 0%,
      rgba(16,12,8,.76) 24%,
      rgba(16,12,8,.66) 38%,
      rgba(16,12,8,.40) 52%,
      rgba(16,12,8,.14) 68%,
      rgba(16,12,8,0) 82%),
    linear-gradient(180deg, rgba(16,12,8,.26) 0%, rgba(16,12,8,0) 32%);
}
.hero__inner { position: absolute; inset: 0; z-index: 2; }
/* Vertical rhythm below is calibrated so the rendered cap-heights land on the
   approved band's measured positions (title cap 25.43%, rule 45.48%,
   sub 50.73%, CTA 62.84% of hero height). Verified by build-tmp/herogeom.mjs. */
.hero__content {
  position: absolute; left: var(--hero-left); top: 23.23%;
  width: 46%; max-width: 720px;
}
.hero__title {
  margin: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 4.38vw, 96px);
  line-height: 1.06; letter-spacing: .012em; text-transform: uppercase;
  color: var(--on-dark);
  text-shadow: 0 2px 28px rgba(10,7,4,.42);
}
.hero__rule {
  display: block; width: 3.47vw; min-width: 38px; max-width: 76px;
  height: 2px; background: var(--gold-bright); margin-top: 1.78vw;
}
.hero__sub {
  margin: 1.81vw 0 0;
  font-size: clamp(14px, 1.31vw, 27px); font-weight: 300; line-height: 1.75;
  color: var(--on-dark);
  /* The approved break after "weddings," is explicit in the markup; the
     max-width is only a safety net. The <br> is dropped once the hero stacks. */
  max-width: 34vw;
  text-shadow: 0 2px 20px rgba(10,7,4,.42);
}
.hero__cta {
  margin-top: 2.10vw;
  min-width: 18.84vw; height: clamp(46px, 4.62vw, 96px);
  padding: 0 1.6vw;
  background: var(--gold-bright); color: #241C12; border-color: var(--gold-bright);
  font-size: clamp(11px, .79vw, 16px); font-weight: 500; letter-spacing: .22em;
}
.hero__cta:hover { background: var(--gold-cta-hi); border-color: var(--gold-cta-hi); color: #241C12; }

/* ============================================================ experience == */
.experience { padding: 112px var(--gut); }
.experience__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: center; }
.experience__media { display: block; }
.experience__media img { display: block; width: 100%; height: auto; object-fit: cover; }
.experience__eyebrow { font-size: 11px; letter-spacing: .28em; margin-bottom: 22px; }
.experience__title { font-size: 52px; line-height: 1.1; margin: 0 0 26px; color: var(--ink); }
.experience__lede { font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--muted); margin: 0 0 38px; max-width: 46ch; }
.experience__note { font-size: 14px; font-weight: 300; line-height: 1.7; color: #8C8375; margin: 18px 0 0; max-width: 44ch; }
.experience__link { margin-top: 34px; }

.speclist { display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: 420px; margin: 0; }
.speclist__row { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.speclist dt { font-size: 15px; font-weight: 300; color: var(--muted); }
.speclist dd { font-size: 15px; color: var(--ink); margin: 0; text-align: right; }

/* ======================================================== what we handle == */
.handle { background: var(--panel); padding: 44px 40px; align-self: stretch; display: flex; flex-direction: column; }
.handle__eyebrow { margin-bottom: 26px; }
.handle__list { display: grid; gap: 0; border-top: 1px solid var(--panel-rule); margin: 0; }
.handle__row { display: flex; justify-content: space-between; gap: 20px; padding: 21px 0; border-bottom: 1px solid var(--panel-rule); }
.handle dt { font-size: 15px; font-weight: 300; color: var(--muted); }
.handle dd { font-size: 15px; color: var(--ink); margin: 0; text-align: right; }
.handle__title { font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.2; color: var(--ink); margin: auto 0 14px; padding-top: 40px; }
.handle__body { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--muted); margin: 0; }

/* ================================================================= fleet == */
.fleet__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; margin-bottom: 54px; flex-wrap: wrap;
}
.fleet__title { font-size: 50px; line-height: 1.1; margin: 0 0 20px; color: var(--ink); max-width: 560px; }
.fleet__note { font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var(--muted); max-width: 400px; margin: 0; }
/* Three products in the lineup. */
.fleet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  border: 1px solid var(--rule); background: var(--card);
  display: flex; flex-direction: column; transition: border-color .15s ease;
}
.card:hover { border-color: var(--gold); color: var(--ink); }
.card__media { display: block; }
.card__media img { display: block; width: 100%; height: auto; object-fit: cover; }
.card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 8px; color: var(--ink); }
.card__meta {
  font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.card__blurb { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--muted); margin: 0; }

/* ============================================================= occasions == */
.occasions__title { font-size: 48px; line-height: 1.12; margin: 0 0 52px; color: var(--on-dark); max-width: 700px; }
.occasions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); }
.occ { display: block; background: var(--ink); padding: 34px var(--gut); }
.occ:hover { background: var(--ink-hover); color: var(--on-dark); }
.occ__title { font-family: var(--serif); font-size: 23px; color: var(--on-dark); margin-bottom: 11px; }
.occ__body { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--on-dark-dim); }

/* ================================================================== how === */
.how { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.how__title { font-size: 48px; line-height: 1.1; margin: 0 0 22px; color: var(--ink); }
.how__link { margin-bottom: 38px; }
.steps { display: grid; gap: 2px; background: var(--rule); }
.step { background: var(--cream); padding: 28px 0; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.step__num { font-family: var(--serif); font-size: 26px; color: var(--gold); line-height: 1.1; }
.step__title { font-family: var(--serif); font-size: 23px; color: var(--ink); margin-bottom: 9px; }
.step__body { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--muted); }
.figure { display: grid; gap: 0; }
.figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.figure__cap { background: var(--ink); padding: 26px 30px; }
.figure__title { font-family: var(--serif); font-size: 21px; color: var(--on-dark); margin-bottom: 9px; }
.figure__body { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--on-dark-dim); }

/* ========================================================== service area == */
.svc-home { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: center; }
.svc-home__title { font-size: 40px; line-height: 1.15; margin: 0 0 18px; color: var(--ink); }
.svc-home__body { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--muted); margin: 0; }
.svc-home__link { margin-top: 24px; }
.region-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 40px; }
.region-list li { font-size: 16px; font-weight: 300; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--rule); }

/* ================================================================ quote === */
.reserve { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.reserve > * { min-width: 0; }
.reserve__title { font-size: 46px; line-height: 1.1; margin: 0 0 22px; color: var(--on-dark); }
.reserve__lede { font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--on-dark-mid); margin: 0 0 36px; }
.reserve__details { border-top: 1px solid var(--hair-24); padding-top: 30px; display: grid; gap: 20px; }
.reserve__label { font-size: 10.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.reserve__phone { font-family: var(--serif); font-size: 30px; color: var(--on-dark); }
.reserve__value { font-size: 16px; font-weight: 300; color: var(--on-dark-mid); }
a.reserve__value:hover, .reserve__phone:hover { color: var(--gold-bright); }

.quote { background: var(--cream); padding: 44px; }
.quote__form { display: grid; gap: 20px; }
.quote__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: 10.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.field__opt { text-transform: none; letter-spacing: .06em; color: var(--placeholder); }
.field input, .field select, .field textarea {
  height: 50px; padding: 0 14px; border: 1px solid var(--rule-alt);
  font-size: 15px; font-weight: 300; color: var(--ink); background: var(--card);
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.field select { padding: 0 12px; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field textarea { height: auto; padding: 14px; resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: #A6402F; }
.field__error { font-size: 12.5px; font-weight: 300; color: #A6402F; }

.quote__submit {
  height: 58px; border: none; background: var(--ink); color: var(--cream);
  font-size: 12px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.quote__submit:hover:not(:disabled) { background: var(--gold); color: var(--ink); }
.quote__submit:disabled { opacity: .6; cursor: progress; }
.quote__fine { font-size: 13px; font-weight: 300; color: var(--muted-soft); text-align: center; }
.quote__status { display: grid; gap: 20px; padding: 56px 0; text-align: center; justify-items: center; }
.quote__tick { width: 60px; height: 60px; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.quote__status h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0; color: var(--ink); }
.quote__status p { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--muted); margin: 0; max-width: 420px; }
.quote__again {
  height: 50px; padding: 0 30px; border: 1px solid var(--rule-alt); background: transparent; color: var(--ink);
  font-size: 11.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
}
.quote__again:hover { border-color: var(--gold); }
.quote__alert {
  border: 1px solid #A6402F; background: #FBF1EE; color: #7E2E20;
  padding: 14px 16px; font-size: 14px; font-weight: 300; line-height: 1.6;
}
/* The Turnstile widget is a fixed 300x65 iframe, which is wider than the form
   at small viewports. `overflow:hidden` stops that fixed width becoming the
   grid track's min-content size (which otherwise widens the whole page), and
   the widget is scaled down so nothing is actually clipped. */
.quote__turnstile { display: block; overflow: hidden; min-height: 65px; }
.quote__turnstile .cf-turnstile { max-width: 100%; transform-origin: left top; }
@media (max-width: 430px) {
  .quote__turnstile { min-height: 56px; }
  .quote__turnstile .cf-turnstile { transform: scale(.84); }
}
@media (max-width: 360px) {
  .quote__turnstile { min-height: 50px; }
  .quote__turnstile .cf-turnstile { transform: scale(.74); }
}
.quote__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================== trailers == */
.fleet-intro__title { font-size: 62px; line-height: 1.07; margin: 0 0 24px; color: var(--on-dark); max-width: 820px; }
.fleet-intro__lede { font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--on-dark-mid); margin: 0 0 52px; max-width: 600px; }
.jump { display: flex; gap: 0; border-top: 1px solid var(--hair-24); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.jump a { padding: 22px 34px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-mid); display: block; }
.jump li:first-child a { padding-left: 0; }
.jump li:last-child { margin-left: auto; }
.jump li:last-child a { padding-right: 0; }
.jump a:hover { color: var(--gold); }

.unit { display: grid; grid-template-columns: .95fr 1fr .9fr; gap: 48px; align-items: start; }
.unit__media img { display: block; width: 100%; max-width: 420px; height: auto; object-fit: cover; }
.unit__eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.unit__title { font-size: 52px; line-height: 1.05; margin: 0 0 22px; color: var(--ink); }
.unit__body { font-size: 17.5px; font-weight: 300; line-height: 1.75; color: var(--muted); margin: 0 0 20px; }
.unit__body:last-of-type { margin-bottom: 0; }

.spec { width: 100%; border-collapse: collapse; }
.spec caption { text-align: left; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.spec th, .spec td { padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 15px; text-align: left; }
.spec th { font-weight: 300; color: var(--muted); }
.spec td { color: var(--ink); text-align: right; }
.sec--alt .spec th, .sec--alt .spec td { border-bottom-color: var(--rule-alt); }
/* Matches the approved 28px gap between the spec list and its button. */
.spec + .btn { margin-top: 28px; }

.compare__title { font-size: 44px; line-height: 1.12; margin: 0 0 44px; color: var(--on-dark); max-width: 620px; }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 1px; background: var(--hair); }
.compare th, .compare td { background: var(--ink); padding: 18px 24px; text-align: left; font-weight: 400; }
.compare thead th { font-family: var(--serif); font-size: 21px; color: var(--on-dark); padding: 20px 24px; }
.compare tbody th { font-size: 14px; font-weight: 300; color: var(--on-dark-dim); }
.compare td { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--on-dark-mid); }
.compare__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  margin-top: 52px; padding-top: 40px; border-top: 1px solid var(--hair-24);
}
.compare__foot p { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--on-dark-mid); margin: 0; max-width: 560px; }

/* ========================================================== how it works == */
.page-intro__title { font-size: 64px; line-height: 1.06; margin: 0 0 24px; color: var(--on-dark); max-width: 860px; }
.page-intro__lede { font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--on-dark-mid); margin: 0; max-width: 620px; }

.process { display: grid; gap: 2px; background: var(--rule); }
.process__row { background: var(--cream); padding: 38px 0; display: grid; grid-template-columns: 88px 1.1fr 1fr; gap: 36px; align-items: start; }
.process__num { font-family: var(--serif); font-size: 34px; color: var(--gold); line-height: 1; }
.process__title { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0 0 12px; color: var(--ink); }
.process__body { font-size: 16.5px; font-weight: 300; line-height: 1.75; color: var(--muted); margin: 0; }
.process__aside { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--muted); }
.process__aside .eyebrow { margin-bottom: 12px; }
.figure__body--gap { margin-bottom: 20px; }

.reqs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); }
.reqs__cell { background: var(--ink); padding: 34px 30px; }
.reqs__title { font-family: var(--serif); font-size: 23px; color: var(--on-dark); margin-bottom: 12px; }
.reqs__body { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--on-dark-dim); }

.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.incl__title { font-size: 42px; line-height: 1.12; margin: 0 0 34px; color: var(--ink); }
.incl__list { list-style: none; margin: 0; padding: 0; display: grid; }
.incl__list li { padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16px; font-weight: 300; color: var(--ink); }
.incl__sub { margin-top: 34px; }

.faq__title { font-size: 42px; line-height: 1.12; margin: 0 0 44px; color: var(--ink); max-width: 640px; }
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; }
.faq__q { font-family: var(--serif); font-size: 22px; color: var(--ink); margin: 0 0 10px; font-weight: 400; }
.faq__a { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--muted); margin: 0; }

.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.cta-band__title { font-size: 44px; line-height: 1.1; margin: 0 0 14px; }
.cta-band__body { font-size: 17px; font-weight: 300; line-height: 1.7; margin: 0; max-width: 520px; }
.sec--dark .cta-band__title { color: var(--on-dark); }
.sec--dark .cta-band__body { color: var(--on-dark-mid); }
.sec--alt .cta-band__title { color: var(--ink); }
.sec--alt .cta-band__body { color: var(--muted); }

/* ========================================================= service area === */
.svc-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: end; }
.svc-hero__title { font-size: 62px; line-height: 1.07; margin: 0 0 24px; color: var(--on-dark); }
.svc-hero__lede { font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--on-dark-mid); margin: 0; max-width: 560px; }
.zipcheck { background: var(--card); padding: 34px var(--gut); }
.zipcheck__label { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: block; }
.zipcheck__form { display: flex; gap: 12px; flex-wrap: wrap; }
.zipcheck__input {
  flex: 1; min-width: 140px; height: 52px; padding: 0 16px; border: 1px solid var(--rule-alt);
  font-size: 16px; font-weight: 300; color: var(--ink); background: #fff; border-radius: 0; -webkit-appearance: none;
}
.zipcheck__input:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.zipcheck__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.zipcheck__btn {
  height: 52px; padding: 0 26px; border: none; background: var(--ink); color: var(--cream);
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}
.zipcheck__btn:hover { background: var(--gold); color: var(--ink); }
.zipcheck__result { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule); }
.zipcheck__result:empty { display: none; }
.zipcheck__rtitle { font-family: var(--serif); font-size: 23px; color: var(--ink); margin: 0 0 8px; font-weight: 400; }
.zipcheck__rbody { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--muted); margin: 0; }

.zones__title { font-size: 44px; line-height: 1.12; margin: 0 0 44px; color: var(--ink); max-width: 640px; }
.zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.zone { border: 1px solid var(--rule); background: var(--card); padding: 34px var(--gut) 36px; }
.zone__num { font-family: var(--serif); font-size: 30px; color: var(--gold); margin-bottom: 16px; }
.zone__title { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 10px; color: var(--ink); }
.zone__label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.zone__body { font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--muted); margin: 0 0 22px; }
.zone__areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zone__areas li { font-size: 15px; font-weight: 300; color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.zone__areas li:last-child { border-bottom: 0; padding-bottom: 0; }

.venues { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.venues__title { font-size: 42px; line-height: 1.12; margin: 0 0 20px; color: var(--on-dark); }
.venues__body { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--on-dark-mid); margin: 0 0 30px; }
.venues__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); list-style: none; margin: 0; padding: 0; }
.venues__grid li { background: var(--ink); padding: 26px 24px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--on-dark-mid); }

/* ================================================================ footer == */
.site-footer { background: var(--ink-deep); padding: 64px var(--gut) 44px; color: var(--on-dark-mid); }
.site-footer__inner { max-width: var(--maxw); margin: 0 auto; }
.site-footer__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 40px; border-bottom: 1px solid var(--hair-16);
}
.site-footer__tagline { font-family: var(--serif); font-size: 19px; color: var(--on-dark-dim); margin: 18px 0 0; }
.site-footer__col { display: grid; gap: 13px; align-content: start; }
.site-footer__head { font-family: var(--sans); font-size: 10.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.site-footer__list a { font-size: 15px; font-weight: 300; color: var(--on-dark-mid); }
.site-footer__list a:hover { color: var(--gold-bright); }
.site-footer__strong { font-weight: 400; color: var(--on-dark) !important; }
.site-footer__base {
  padding-top: 26px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 13px; font-weight: 300; color: var(--on-dark-faint);
}
.site-footer__base p { margin: 0; }

/* ==================================================== responsive tiers ==== */

/* --- compact desktop: keep the desktop composition down to 1024 --- */
@media (max-width: 1180px) {
  :root { --gut: 24px; }
  .nav { gap: 18px; }
  .nav__link { font-size: 11px; letter-spacing: .16em; }
  .site-header__inner { gap: 16px; }
  .site-header__actions { gap: 12px; }
  .site-header__cta { padding: 0 20px; font-size: 11px; letter-spacing: .16em; }
  .site-header__phone { font-size: 12px; }
  .logo__word { font-size: 27px; }
  .how { gap: 48px; }
  .reserve { gap: 48px; }
  .incl, .venues, .svc-hero { gap: 48px; }
  .fleet__title { font-size: 44px; }
  .fleet-intro__title { font-size: 54px; }
  .page-intro__title { font-size: 54px; }
  .svc-hero__title { font-size: 52px; }
  .unit__title { font-size: 44px; }
  .quote { padding: 32px; }
}

/* --- tablet: nav collapses to the burger --- */
@media (max-width: 1023px) {
  :root { --anchor-offset: 116px; }
  .nav, .site-header__actions { display: none; }
  .burger { display: flex; }
  .mnav { display: none; }
  .mnav.is-open { display: block; }
  body.nav-open { overflow: hidden; }

  .fleet__grid { grid-template-columns: repeat(2, 1fr); }
  .occasions__grid { grid-template-columns: repeat(2, 1fr); }
  .zones { grid-template-columns: 1fr; }
  .reqs { grid-template-columns: repeat(2, 1fr); }

  .how { grid-template-columns: 1fr; gap: 56px; }
  .experience__grid { grid-template-columns: 1fr; gap: 44px; }
  .experience { padding: 80px var(--gut); }
  .speclist { max-width: none; }
  .reserve { grid-template-columns: 1fr; gap: 48px; }
  .incl { grid-template-columns: 1fr; gap: 48px; }
  .venues { grid-template-columns: 1fr; gap: 48px; }
  .svc-hero { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .svc-home { grid-template-columns: 1fr; gap: 40px; }

  .unit { grid-template-columns: 1fr 1fr; gap: 40px; }
  .unit__media { grid-column: 1 / -1; }
  .unit__media img { max-width: 100%; }

  .process__row { grid-template-columns: 60px 1fr; gap: 24px; }
  .process__aside { grid-column: 2; }

  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* --- large phone / small tablet --- */
@media (max-width: 820px) {
  .sec { padding: 72px var(--gut); }
  .sec--tight { padding: 64px var(--gut); }

  /* Between 641px and 1023px the text block is proportionally wider, so it
     reaches further into the bright side of the frame. Carry the scrim further
     right here to hold the same contrast as desktop. */
  .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(16,12,8,.88) 0%,
        rgba(16,12,8,.84) 38%,
        rgba(16,12,8,.72) 56%,
        rgba(16,12,8,.40) 74%,
        rgba(16,12,8,0) 90%),
      linear-gradient(180deg, rgba(16,12,8,.28) 0%, rgba(16,12,8,0) 32%);
  }
  .hero__content { width: 62%; top: 22%; }
  .hero__title { font-size: clamp(28px, 5.6vw, 54px); }
  .hero__sub { font-size: clamp(13px, 1.9vw, 19px); margin-top: 3.2vw; max-width: 52vw; }
  .hero__cta { margin-top: 4vw; min-width: 0; height: 48px; padding: 0 22px; font-size: 11px; }
  .hero__rule { margin-top: 3.2vw; }

  .fleet__title { font-size: 36px; }
  .experience__title { font-size: 36px; }
  .experience__lede { font-size: 16.5px; }
  .occasions__title { font-size: 36px; }
  .how__title, .reserve__title { font-size: 36px; }
  .fleet-intro__title, .page-intro__title, .svc-hero__title { font-size: 42px; }
  .unit__title { font-size: 38px; }
  .compare__title, .zones__title, .incl__title, .faq__title, .venues__title, .cta-band__title { font-size: 34px; }
  .svc-home__title { font-size: 32px; }

  .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .region-list { grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
  .unit { grid-template-columns: 1fr; gap: 32px; }
  .jump { display: none; }
  .quote { padding: 28px 22px; }
}

/* --- phone --- */
@media (max-width: 640px) {
  :root { --gut: 20px; }
  .sec { padding: 56px var(--gut); }
  .sec--tight { padding: 48px var(--gut); }

  /* Hero becomes a stacked block: image on top, text beneath on solid ink.
     The photograph is never covered by text at phone sizes. */
  .hero { display: block; }
  .hero__media img {
    width: 100%; margin: 0; aspect-ratio: 4 / 3; object-fit: cover;
    object-position: 58% 34%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__scrim { display: none; }
  .hero__inner { position: static; }
  .hero__content {
    position: static; width: auto; max-width: none;
    background: var(--ink); padding: 36px var(--gut) 40px;
  }
  .hero__title { font-size: 32px; line-height: 1.08; text-shadow: none; }
  .hero__rule { width: 44px; min-width: 0; margin-top: 20px; }
  .hero__sub { font-size: 15.5px; margin-top: 20px; line-height: 1.7; max-width: none; text-shadow: none; }
  .hero__sub br { display: none; }
  .hero__cta { margin-top: 28px; width: 100%; min-width: 0; height: 54px; font-size: 11.5px; }

  .fleet__grid { grid-template-columns: 1fr; gap: 20px; }
  .occasions__grid { grid-template-columns: 1fr; }
  .reqs { grid-template-columns: 1fr; }
  .venues__grid { grid-template-columns: 1fr; }
  .region-list { grid-template-columns: 1fr; }

  .fleet__head { gap: 24px; margin-bottom: 36px; }
  .fleet__title { font-size: 32px; }
  .experience__title { font-size: 30px; }
  .experience { padding: 56px var(--gut); }
  .handle { padding: 28px 22px; }
  .handle__title { font-size: 24px; padding-top: 28px; }
  .occasions__title, .how__title, .reserve__title { font-size: 30px; }
  .fleet-intro__title, .page-intro__title, .svc-hero__title { font-size: 34px; }
  .unit__title { font-size: 32px; }
  .compare__title, .zones__title, .incl__title, .faq__title, .venues__title, .cta-band__title, .svc-home__title { font-size: 28px; }
  .fleet-intro__lede, .page-intro__lede, .svc-hero__lede { font-size: 16px; }
  .unit__body { font-size: 16px; }

  .quote__grid { grid-template-columns: 1fr; }
  .quote { padding: 24px 18px; }
  .reserve__phone { font-size: 26px; }

  .step { grid-template-columns: 36px 1fr; gap: 14px; padding: 22px 0; }
  .process__row { grid-template-columns: 44px 1fr; gap: 16px; padding: 28px 0; }
  .process__aside { grid-column: 1 / -1; padding-top: 6px; }

  .site-footer { padding: 48px var(--gut) 36px; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__base { flex-direction: column; gap: 10px; }

  .cta-band { gap: 24px; }
  .cta-band .btn { width: 100%; }
  .compare { min-width: 640px; }
  .zipcheck { padding: 26px 20px; }
}

/* --- small phone --- */
@media (max-width: 400px) {
  :root { --gut: 16px; --anchor-offset: 108px; }
  .logo__word { font-size: 24px; }
  .logo__crown { width: 28px; }
  .hero__title { font-size: 28px; }
  .fleet-intro__title, .page-intro__title, .svc-hero__title { font-size: 30px; }
  .spec th, .spec td { font-size: 14px; }
  .compare { min-width: 560px; }
}

/* ---------------------------------------------------------------- print -- */
@media print {
  .site-header, .mnav, .burger, .skip-link, .quote__form { display: none !important; }
  body { background: #fff; }
}