/* Armstrong Enterprises - Rentals
   Palette pulled from the client's own logo: sunset orange, weathered wood,
   cream. Light theme only, on purpose. */

:root {
  --ink:        #1f1a15;
  --ink-soft:   #574c40;
  --ink-faint:  #8b7d6d;
  --cream:      #fdfaf5;
  --card:       #ffffff;
  --sand:       #f5eee3;
  --line:       #e6dccc;
  --line-soft:  #f0e8db;
  --rust:       #b8460e;
  --rust-dark:  #8f3509;
  --gold:       #e2941a;
  --forest:     #2f5d3f;

  /* Where the rentals tab bar sticks. This is written by site.js from the
     header's measured height, because the header grows when the brand wraps or
     a longer business name is set from the dashboard, and a hard-coded value
     was leaving the bar overlapping the header on a phone. The value here is
     only the starting guess used before the measurement lands.

     Nothing may set the header's own height from this, or the observer that
     writes it would feed itself and the header would grow on every frame. */
  --header-h: 88px;
  --danger:     #a51f1f;
  --danger-bg:  #fdf2f2;
  --ok-bg:      #f0f7f2;

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(31,26,21,.05), 0 8px 24px -12px rgba(31,26,21,.18);
  --shadow-lg:  0 2px 4px rgba(31,26,21,.06), 0 24px 48px -20px rgba(31,26,21,.28);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--rust); }
a:hover { color: var(--rust-dark); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }
.section--sand { background: var(--sand); }
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rust); margin: 0 0 .6rem;
}
.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch; }
.muted { color: var(--ink-faint); }
.small { font-size: .875rem; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(253,250,245,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 88px;
}
.brand { display: flex; align-items: center; text-decoration: none; color: inherit; }
/* The badge alone, sized to fill the bar rather than sit in it like a stamp.
   It already reads "Armstrong Enterprises", and the name is in the footer, the
   page titles and the About page, so setting it again alongside was noise. */
.brand img { width: 76px; height: 76px; object-fit: contain; display: block; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-weight: 550;
  font-size: .94rem; padding: 8px 11px; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav a:hover { background: var(--sand); color: var(--ink); }
.nav-links { display: flex; gap: 2px; align-items: center; }

/* The page you are on, said quietly. */
.nav a.is-current, .nav .nav-menu__label.is-current {
  color: var(--rust); background: var(--sand);
}

/* Sections hang off "What we rent" rather than becoming five more top-level
   links. The label stays a real link, so the menu is a shortcut and never the
   only way through. */
.nav-menu { position: relative; display: flex; align-items: center; }
.nav-menu__more {
  background: none; border: 0; cursor: pointer; padding: 8px 6px 8px 0;
  color: var(--ink-faint); line-height: 1;
}
.nav-menu__more::after {
  content: ''; display: block; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.nav-menu__more:hover { color: var(--ink); }
.nav-menu__panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 250px; padding: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 18px 44px rgba(60,42,22,.16);
}
.nav-menu:hover .nav-menu__panel,
.nav-menu.is-open .nav-menu__panel,
.nav-menu:focus-within .nav-menu__panel { display: block; }
.nav-menu__panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 11px; font-size: .92rem; font-weight: 550;
}
.nav-menu__panel em {
  font-style: normal; font-size: .76rem; color: var(--ink-faint);
  background: var(--sand); border-radius: 20px; padding: 2px 8px;
}
.nav-menu__all {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 11px !important;
  color: var(--rust) !important;
}

.nav-toggle { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Between the phone menu and a wide desktop there is not room for a legible
   logo, the business name, six links and a button. The badge already says
   "Armstrong Enterprises", so the text beside it is the thing that goes: it is
   the only part that is genuinely duplicated. */
@media (max-width: 1150px) and (min-width: 861px) {
  .nav a { padding: 8px 9px; font-size: .9rem; }
}

/* Below 860px the links become a sheet under the header. Without this a
   multi-page site is unreachable on a phone, which is most of the traffic. */
@media (max-width: 860px) {
  /* The nav drops to its own row, which it can only do if the header is
     allowed to wrap. Without this it stays on the brand's line and runs off
     the side of the screen. */
  .site-header .wrap { flex-wrap: wrap; row-gap: 0; }
  .brand { flex: 1 1 auto; min-width: 0; }

  .nav-toggle {
    display: block; order: 3; margin-left: auto; flex: none;
    background: none; border: 1px solid var(--line); cursor: pointer;
    width: 42px; height: 40px; border-radius: var(--radius-sm);
    position: relative;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    position: absolute; left: 11px; width: 18px; height: 2px;
    background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .15s ease;
  }
  .nav-toggle__bars { top: 19px; }
  .nav-toggle__bars::before { content: ''; top: -6px; left: 0; }
  .nav-toggle__bars::after  { content: ''; top: 6px;  left: 0; }
  .nav-open .nav-toggle__bars { background: transparent; }
  .nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

  .nav {
    order: 4; margin-left: 0; width: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 6px 0 16px;
  }
  .nav-open .nav { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a { padding: 12px 14px; font-size: 1rem; }
  .nav .btn { margin-top: 8px; justify-content: center; }

  /* No hover menus on touch: the sections just sit in the list, indented. */
  .nav-menu { flex-direction: column; align-items: stretch; }
  .nav-menu__more { display: none; }
  .nav-menu__panel {
    display: block; position: static; min-width: 0;
    border: 0; box-shadow: none; background: none; padding: 0 0 0 12px;
  }
  .nav-menu__panel a { padding: 9px 14px; font-size: .93rem; color: var(--ink-faint); }
  .nav-menu__all { border-top: 0; margin-top: 0; padding-top: 9px !important; }
}

@media (max-width: 430px) {
  .site-header .wrap { gap: 10px; padding: 0 14px; min-height: 62px; }
  .brand img { width: 52px; height: 52px; }
  .nav .btn { padding: 11px; font-size: .9rem; }
  .wa-long { display: none; }           /* "WhatsApp us" -> "WhatsApp" */
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-sm);
  font: inherit; font-weight: 650; font-size: .95rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--rust); color: #fff; }
.btn--primary:hover { background: var(--rust-dark); color: #fff; }
.btn--wa { background: #25D366; color: #08331a; }
.btn--wa:hover { background: #1eb956; color: #08331a; }
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--sand); color: var(--ink); }
.btn--sm { padding: 8px 14px; font-size: .875rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; pointer-events: none;
}

/* The "send this booking to us on WhatsApp" button on the confirmation page.
   Allowed to wrap: on a narrow phone the label is wider than the screen. */
.wa-send { margin: 20px 0 4px; }
.wa-send .btn { white-space: normal; text-align: center; font-size: 1.05rem; padding: 15px 18px; }
.wa-send p { margin: 8px 0 0; text-align: center; }

/* ---------- hero ---------- */

.hero { padding: 72px 0 56px; background:
  radial-gradient(120% 90% at 12% -10%, #fff5e6 0%, transparent 55%), var(--cream); }
.hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.hero h1 { margin-bottom: .4em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px;
  font-size: .9rem; color: var(--ink-soft);
}
.hero__facts span { display: inline-flex; align-items: center; gap: 7px; }
.hero__img {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: var(--sand);
}
.hero__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- item cards ---------- */

.grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
a.card:hover {
  box-shadow: var(--shadow-lg); border-color: #d9c9ad;
  transform: translateY(-2px); color: inherit;
}
.card__media { aspect-ratio: 4/3; background: var(--sand); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .25rem; }
.card__desc { color: var(--ink-soft); font-size: .9rem; margin: 0 0 14px; flex: 1; }
.card__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.price { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.price small { font-size: .8rem; font-weight: 500; color: var(--ink-faint); }
.price--ask { font-size: 1rem; font-weight: 650; color: var(--ink-soft); letter-spacing: 0; }
.card__link { font-size: .875rem; font-weight: 650; color: var(--rust); }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; background: var(--sand); color: var(--ink-soft);
}
.badge--weekend { background: #fdf0d8; color: #8a5a06; }
.badge--enquiry { background: #e8eef0; color: #3d5560; }

/* ---------- steps ---------- */

.steps { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step__n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--rust); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  margin-bottom: 12px;
}

/* ---------- item page ---------- */

.item-layout { display: grid; gap: 28px; }
@media (min-width: 940px) {
  .item-layout {
    grid-template-columns: 1fr 400px;
    grid-template-areas: "head panel" "detail panel";
    gap: 20px 48px; align-items: start;
  }
  .item-head   { grid-area: head; }
  .item-panel  { grid-area: panel; }
  .item-detail { grid-area: detail; }
}
.item-photo {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--sand);
}
/* Photos arrive in both portrait and landscape. Contain rather than crop, and
   cap the height so a tall one does not shove the calendar off the screen. */
.item-photo img {
  width: 100%; height: auto; max-height: 62vh; object-fit: contain; margin: 0 auto;
}
.rate-table { width: 100%; border-collapse: collapse; margin: 20px 0 8px; }
.rate-table th, .rate-table td {
  text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  font-size: .95rem;
}
.rate-table th { font-weight: 600; color: var(--ink-soft); }
.rate-table td { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }

.booking-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow);
}
@media (min-width: 940px) { .booking-panel { position: sticky; top: 88px; } }

/* ---------- calendar ---------- */

.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.cal__title { font-weight: 650; font-size: .98rem; }
.cal__nav {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font-size: 1rem; color: var(--ink-soft); line-height: 1;
}
.cal__nav:hover:not(:disabled) { background: var(--sand); color: var(--ink); }
.cal__nav:disabled { opacity: .35; cursor: default; }
.cal__dow, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow div {
  text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-faint); padding-bottom: 6px; text-transform: uppercase;
}
.cal__day {
  aspect-ratio: 1; border: 1px solid transparent; background: none;
  border-radius: 8px; font: inherit; font-size: .875rem;
  cursor: pointer; color: var(--ink);
  display: grid; place-items: center; padding: 0;
  font-variant-numeric: tabular-nums;
}
.cal__day:hover:not(:disabled) { background: var(--sand); }
.cal__day--blank { visibility: hidden; }
.cal__day--out {
  color: #c4b8a8; text-decoration: line-through;
  cursor: not-allowed; background: repeating-linear-gradient(
    -45deg, transparent, transparent 3px, #f3ece1 3px, #f3ece1 5px);
}
.cal__day--past { color: #cbc2b5; cursor: not-allowed; }
/* Shut for collection and return, but a rental may still run through it. */
.cal__day--closed {
  color: #b9ad9c; cursor: not-allowed; background: #f7f2ea;
}
.cal__day--closed::after {
  content: ''; position: absolute; bottom: 5px; left: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: #c9bda9; transform: translateX(-50%);
}
.cal__day { position: relative; }
.cal__day--sel, .cal__day--sel:hover:not(:disabled) {
  background: var(--rust); color: #fff; font-weight: 700;
}
.cal__day--sel:hover:not(:disabled) { background: var(--rust-dark); }
.cal__day--range, .cal__day--range:hover:not(:disabled) {
  background: #fbe6d5; color: var(--rust-dark); border-radius: 0;
}
.cal__day--range:hover:not(:disabled) { background: #f8d9c0; }
.cal__legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px;
  font-size: .78rem; color: var(--ink-faint);
}
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal__swatch {
  width: 13px; height: 13px; border-radius: 4px; display: inline-block;
  border: 1px solid var(--line);
}
.cal__swatch--out { background: repeating-linear-gradient(-45deg, #fff, #fff 3px, #f3ece1 3px, #f3ece1 5px); }
.cal__swatch--sel { background: var(--rust); border-color: var(--rust); }
.cal__swatch--closed { background: #f7f2ea; }

/* ---------- item gallery ---------- */

.item-photo iframe, .item-photo video {
  display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: #000;
}
.item-photo video { max-height: 62vh; object-fit: contain; }

.thumbs {
  display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px;
}
.thumb {
  flex: none; width: 84px; height: 64px; padding: 0; cursor: pointer;
  border-radius: 9px; overflow: hidden; position: relative;
  border: 2px solid transparent; background: var(--sand);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { border-color: #d9c9ad; }
.thumb[aria-pressed="true"] { border-color: var(--rust); }
.thumb--video::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent rgba(255,255,255,.95);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.thumb--video { background: #241d17; }
.thumb--video img { opacity: .62; }

.media-link {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  aspect-ratio: 16/9; background: #241d17; color: #f0b862;
  text-decoration: none; font-weight: 650; text-align: center; padding: 20px;
}
.media-link:hover { color: #fff; }

/* ---------- forms ---------- */

.field { margin-bottom: 15px; }
.field label {
  display: block; font-size: .84rem; font-weight: 650;
  margin-bottom: 6px; color: var(--ink-soft);
}
.input, .select, .textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--rust); outline-offset: -1px; border-color: var(--rust);
}
.textarea { resize: vertical; min-height: 84px; }
.field--check { display: flex; align-items: flex-start; gap: 10px; }
.field--check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--rust); }
.field--check label { margin: 0; font-weight: 500; color: var(--ink); font-size: .92rem; }
.row2 { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }

/* ---------- quote box ---------- */

.quote {
  background: var(--sand); border-radius: var(--radius-sm);
  padding: 15px 16px; margin: 16px 0;
}
.quote__row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .92rem; padding: 4px 0;
}
.quote__row--total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px;
  font-weight: 700; font-size: 1.02rem;
}
.quote__row span:last-child { font-variant-numeric: tabular-nums; }
.quote__note { font-size: .8rem; color: var(--ink-faint); margin: 10px 0 0; }

.notice { padding: 12px 14px; border-radius: var(--radius-sm); font-size: .9rem; margin: 14px 0; }
.notice--error { background: var(--danger-bg); color: var(--danger); border: 1px solid #f2d5d5; }
.notice--ok { background: var(--ok-bg); color: var(--forest); border: 1px solid #d3e6d9; }
.notice--warn { background: #fdf6e7; color: #8a5a06; border: 1px solid #f0e0bd; }

/* ---------- footer ---------- */

.site-footer {
  background: #241d17; color: #d9cdbd; padding: 48px 0 32px; margin-top: 24px;
}
.site-footer a { color: #f0b862; }
.site-footer h4 { color: #fff; margin: 0 0 10px; font-size: .95rem; }
.footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer__bottom {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid #3a3028;
  font-size: .82rem; color: #9b8d7d;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; font-size: .9rem; overflow-wrap: anywhere; }
.site-footer p.small { color: #a99a88; }
.footer__badge { display: inline-block; line-height: 0; border-radius: var(--radius); }
.footer__badge img {
  width: 150px; height: 150px; max-width: 100%; object-fit: contain;
  margin-bottom: 14px; transition: opacity .18s ease, transform .18s ease;
}
.footer__badge:hover img, .footer__badge:focus-visible img {
  opacity: .82; transform: translateY(-2px);
}
.footer__badge:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.footer__made { color: #8c7d6c; }
@media (max-width: 560px) {
  .footer__badge img { width: 120px; height: 120px; }
}
.footer__brand h4 { margin-bottom: 6px; }
.footer__area, .footer__addr { margin-top: 10px; line-height: 1.55; }
.footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; }

/* The signup band across the top of the footer. */
.footer__signup {
  border-bottom: 1px solid #3a2f25; padding-bottom: 26px; margin-bottom: 30px;
}
.footer__signup .signup {
  display: grid; grid-template-columns: 1fr minmax(280px, 420px);
  gap: 20px 40px; align-items: center;
}
.footer__signup .signup h3 { font-size: 1.1rem; margin: 0 0 6px; }
.footer__signup .signup p.small { margin: 0; max-width: 46ch; }
.footer__signup .signup__form { margin: 0; }
.footer__signup .signup__note { margin: 8px 0 0; }
@media (max-width: 760px) {
  .footer__signup .signup { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.skeleton {
  background: linear-gradient(90deg, var(--sand) 25%, #efe6d8 50%, var(--sand) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius);
}
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- section tiles on the home page ---------- */

.tiles {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.tile {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.tile:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-2px);
  border-color: #d9c9ad; color: inherit;
}
.tile__media { aspect-ratio: 16/10; background: var(--sand); overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__body { padding: 14px 16px 16px; }
.tile__body h3 { margin: 0 0 2px; font-size: 1.05rem; }
.tile__body p { margin: 0; font-size: .85rem; color: var(--ink-faint); }

/* ---------- featured item ---------- */

.featured {
  display: grid; gap: 28px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.featured__media { background: var(--sand); }
.featured__media img { width: 100%; height: 100%; object-fit: cover; }

/* Stacked: the photo needs a shape of its own, because nothing else gives it
   a height. */
@media (max-width: 859px) {
  .featured__media { aspect-ratio: 4/3; }
}

/* Side by side: the photo stretches to the card's height instead, and must NOT
   keep an aspect-ratio. With height:100% and a ratio, the browser derives the
   column's WIDTH from that height — on a narrow desktop that came out wider
   than its share of the grid, the two columns totalled more than the card, and
   overflow:hidden quietly clipped the text off the right rather than showing
   anything obviously broken.

   This lives after the base rule on purpose: the earlier version was inside a
   media query placed *above* it, so `aspect-ratio: 4/3` won on source order and
   the fix did nothing. */
@media (min-width: 860px) {
  .featured { grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch; }
  .featured__media { height: 100%; aspect-ratio: auto; }
  /* fr columns will not shrink below their content without this. */
  .featured > * { min-width: 0; }
}
.featured__body { padding: 8px 26px 30px; }
@media (min-width: 860px) { .featured__body { padding: 34px 34px 34px 4px; align-self: center; } }
.featured__body h2 { margin: 10px 0 6px; }
.featured__body .lede { font-size: 1.05rem; margin-bottom: 12px; }
.featured__rate {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0 22px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}

/* ---------- section tab bar ---------- */

/* An explicit display value beats the hidden attribute, and several blocks
   here set one. Without this, hiding anything with el.hidden silently does
   nothing. */
[hidden] { display: none !important; }

.page-intro {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-intro h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.page-intro p { margin: 0; }

.tabs-sticky {
  position: sticky; top: var(--header-h); z-index: 20;
  background: rgba(253, 250, 245, .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Pills wrap rather than scroll. With a growing yard the client will keep
   adding sections, and a horizontally scrolling bar quietly hides the ones past
   the edge — on a wide screen there is nothing to suggest they are there. */
.tabbar {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0;
}
@media (max-width: 700px) {
  /* On a phone wrapping would push the grid two rows down, so scroll there and
     fade the right edge to show there is more. */
  .tabbar {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .tabbar::-webkit-scrollbar { display: none; }
}
.tabbar__tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink-soft); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.tabbar__tab:hover { border-color: #d9c9ad; color: var(--ink); }
.tabbar__tab span {
  font-size: .72rem; font-weight: 700; color: var(--ink-faint);
  background: var(--sand); border-radius: 999px; padding: 1px 7px;
}
.tabbar__tab[aria-pressed="true"] {
  background: var(--rust); border-color: var(--rust); color: #fff;
}
.tabbar__tab[aria-pressed="true"] span { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- yard sections ---------- */

.section-nav {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px;
}
.section-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink-soft); text-decoration: none;
  font-size: .875rem; font-weight: 600;
}
.section-nav a:hover { border-color: #d9c9ad; background: #fffdf9; color: var(--ink); }
.section-nav a span {
  font-size: .74rem; font-weight: 700; color: var(--ink-faint);
  background: var(--sand); border-radius: 999px; padding: 1px 7px;
}

.yard-section { margin-bottom: 46px; scroll-margin-top: 88px; }
.yard-section:last-child { margin-bottom: 0; }
.yard-section__head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.yard-section__head h3 { margin: 0; font-size: 1.3rem; }
.yard-section__head p { margin: 0; }

/* ---------- the logo intro ---------- */

/* The overlay ships in the HTML but stays out of the way unless the inline head
   script has decided it should run. */
.intro { display: none; }
html.intro-on .intro { display: grid; }
html.intro-on, html.intro-on body { overflow: hidden; }
/* The wipe on the way out. The root class comes off at the same moment so the
   page underneath can scroll again, which used to switch the overlay to
   display:none in the same frame — the wipe animation never once rendered.
   It stays on screen by its own class until the script hides it. */
.intro.intro--out { display: grid; }
.intro.intro--out[hidden] { display: none; }

.intro {
  position: fixed; inset: 0; z-index: 999;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 40%, #fff8ec 0%, var(--cream) 60%, #f3e9da 100%);
  cursor: pointer;
  /* No fade-in. The overlay is on screen from the very first paint, so there is
     nothing to ease in FROM — a 260ms fade meant a quarter of a second of the
     home page showing straight through it, which is exactly the flash this
     overlay exists to prevent. The logo inside still animates in; the sheet it
     sits on does not. */
  opacity: 1;
}
.intro--out {
  animation: intro-wipe .65s cubic-bezier(.7, 0, .3, 1) both;
  pointer-events: none;
}
.intro__stage { text-align: center; }

.intro__logo {
  position: relative; display: inline-block; overflow: hidden;
  width: min(400px, 74vw); aspect-ratio: 1;
  animation: intro-logo 1.1s cubic-bezier(.16, 1, .3, 1) both;
}
.intro__logo img { width: 100%; height: 100%; object-fit: contain; }

/* The sweep: a narrow band of light travelling across the badge. */
/* Two things matter here and they are easy to get backwards.
   The travel range is deliberately tight (-68% to 68%): the band is only wide
   enough to be off the badge for the first and last 4% of the run, so nearly
   the whole animation is motion somebody can actually see. And the easing is
   almost linear on purpose — a strong ease-in-out spends its time at the two
   ends, where the band is off the badge, and rushes the middle, where it is
   not. That is what makes a sweep look fast and the logo look frozen. */
.intro__sweep {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, .05) 45%,
    rgba(255, 255, 255, .78) 50%,
    rgba(255, 255, 255, .05) 55%,
    transparent 62%);
  transform: translateX(-68%);
  animation: intro-sweep 2.8s cubic-bezier(.45, .05, .55, .95) .3s both;
  mix-blend-mode: screen;
  pointer-events: none;
}

.intro__word {
  margin: 8px 0 0;
  font-size: .8rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rust);
  animation:
    intro-word .7s ease .55s both,
    intro-word-spread 3.15s cubic-bezier(.2, .6, .3, 1) both;
}

.intro__skip {
  position: absolute; right: 22px; bottom: 20px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--ink-faint);
  padding: 8px 12px; border-radius: var(--radius-sm);
  animation: intro-word .5s ease .9s both;
}
.intro__skip:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }

@keyframes intro-wipe {
  from { clip-path: inset(0 0 0 0); opacity: 1; }
  to   { clip-path: inset(0 0 100% 0); opacity: 1; }
}
@keyframes intro-logo {
  from { opacity: 0; transform: scale(.86) translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes intro-sweep {
  from { transform: translateX(-68%); }
  to   { transform: translateX(68%); }
}
/* Covers the last fraction of a second after the band has left, so the wipe
   never lands on a completely still frame. */
@keyframes intro-word-spread {
  from { letter-spacing: .13em; }
  to   { letter-spacing: .24em; }
}
@keyframes intro-word {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Anyone who has asked for less motion never sees any of this: intro.js checks
   the same preference and skips straight past. This is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  .intro, html.intro-on .intro { display: none; }
  html.intro-on, html.intro-on body { overflow: auto; }
}

/* ---------- section page banner ---------- */

/* A section's own page opens with its cover photo, so /rentals/saws-cutting
   reads as a destination rather than a filtered list. */
.section-banner {
  border-radius: var(--radius); padding: 30px 32px; margin: 0 0 26px;
  background: var(--sand); color: var(--ink);
}
.section-banner h1, .section-banner h2 { font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin: 4px 0 0; }
.section-banner__note { font-size: .88rem; margin-top: 10px !important; opacity: .9; }
.section-banner p { margin: 8px 0 0; max-width: 56ch; color: var(--ink-soft); }
.section-banner .eyebrow { margin: 0; }

.section-banner--photo {
  background-size: cover; background-position: center;
  color: #fff; min-height: 190px; display: flex; align-items: flex-end;
  padding: 30px 32px;
}
.section-banner--photo h1, .section-banner--photo h2 { color: #fff; }
.section-banner--photo p { color: rgba(255,255,255,.86); }
.section-banner--photo .eyebrow { color: #f0b862; }

@media (max-width: 560px) {
  .section-banner, .section-banner--photo { padding: 22px 20px; }
  .section-banner--photo { min-height: 150px; }
}

/* ---------- content pages ---------- */

.page-head { padding: 52px 0 34px; background: var(--cream); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin: 6px 0 0; max-width: 20ch; }
.page-head .lede { margin: 16px 0 0; max-width: 58ch; }

.prose-wrap { padding: 44px 0 56px; display: grid; gap: 34px;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr); align-items: start; }
.prose p { max-width: 62ch; margin: 0 0 16px; font-size: 1.03rem; line-height: 1.72; }
.prose p:first-child { font-size: 1.14rem; color: var(--ink); }

.split { padding: 44px 0 56px; display: grid; gap: 38px;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .9fr); align-items: start; }
.split h2 { font-size: 1.32rem; margin: 0 0 12px; }
.split h2 + p, .split > div > h2 ~ p { max-width: 58ch; }
.split h2:not(:first-child) { margin-top: 34px; }

.callout {
  background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 24px 26px;
}
.callout h3 { margin: 0 0 12px; font-size: 1.05rem; }
.callout p { margin: 0 0 12px; font-size: .95rem; }
.callout hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

.ticks { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 28px; font-size: .97rem; line-height: 1.55; }
.ticks li::before {
  content: ''; position: absolute; left: 3px; top: .42em;
  width: 11px; height: 6px; border-left: 2px solid var(--rust);
  border-bottom: 2px solid var(--rust); transform: rotate(-45deg);
}

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 0; }
.center-narrow { text-align: center; max-width: 62ch; margin: 0 auto; }
.center-narrow .cta-row { justify-content: center; }
.center-narrow .lede { margin: 14px auto 0; }

.steps--big { list-style: none; margin: 44px 0 56px; padding: 0;
  display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.steps--big li { position: relative; padding-top: 6px; }
.steps--big h3 { margin: 14px 0 8px; font-size: 1.08rem; }
.steps--big p { margin: 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.62; }
.steps__n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--rust); color: #fff; font-weight: 700; font-size: .95rem;
}

.plain-steps { margin: 0 0 12px; padding-left: 20px; }
.plain-steps li { margin-bottom: 9px; font-size: .95rem; }

.terms__block { margin: 0 0 26px; }
.terms__block h3 { margin: 0 0 7px; font-size: 1.06rem; }
.terms__block p { margin: 0; max-width: 62ch; line-height: 1.7; color: var(--ink-soft); }

.hours { list-style: none; margin: 0 0 10px; padding: 0; }
.hours li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }

@media (max-width: 820px) {
  .prose-wrap, .split { grid-template-columns: 1fr; gap: 28px; }
  .page-head { padding: 36px 0 26px; }
}

/* Sidebar column on the content pages: the short list and the box below it are
   one column, not two separate grid children that strand each other. */
.side-stack { display: grid; gap: 22px; align-content: start; }
.side-stack .ticks { margin: 0; }

/* ---------- home: hero montage and the why band ---------- */

/* Three photos rather than one. A single hero shot of the same tool that is
   featured immediately below made the page look thin. */
.hero__montage {
  display: grid; gap: 12px;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 5 / 4;
}
.hero__shot { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--sand); min-height: 0; }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__shot--1 { grid-row: span 2; }

@media (max-width: 860px) {
  .hero__montage { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .hero__montage { aspect-ratio: 3 / 2; gap: 8px; }
}

.band-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.band-head h2 { margin: 4px 0 0; }

.why {
  margin-top: 32px; display: grid; gap: 28px 34px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.why h3 { font-size: 1.03rem; margin: 0 0 8px; }
.why p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.62; }

/* Per-day collection hours in the dashboard. */
.dayhours { display: grid; gap: 10px; }
.dayhours__row {
  display: grid; grid-template-columns: 120px 1fr auto 1fr auto;
  gap: 10px; align-items: center;
}
.dayhours__row--off { opacity: .45; }
.dayhours__pick { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; }
.dayhours__to { color: var(--ink-faint); font-size: .88rem; }
.select--sm { padding: 8px 10px; font-size: .9rem; }
@media (max-width: 620px) {
  .dayhours__row { grid-template-columns: 1fr 1fr; }
  .dayhours__pick { grid-column: 1 / -1; }
  .dayhours__to { display: none; }
}

/* ---------- search ---------- */

.searchbar { position: relative; margin: 12px 0 2px; max-width: 460px; }
.searchbar__icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); pointer-events: none;
}
.searchbar__input {
  width: 100%; padding: 11px 38px 11px 40px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font: inherit; font-size: .95rem; color: var(--ink);
}
.searchbar__input:focus {
  outline: none; border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(184, 70, 14, .13);
}
.searchbar__input::-webkit-search-cancel-button { display: none; }
.searchbar__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1;
  color: var(--ink-faint); padding: 0 10px;
}
.searchbar__clear:hover { color: var(--ink); }

/* While a search is running the section tabs are not what is on screen, so
   they step back rather than looking like they are still filtering. */
.tabs-sticky.is-searching .tabbar { opacity: .45; }

.search-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 22px;
}
.search-head h2 { font-size: 1.25rem; margin: 0; }

/* Admin: same idea, plainer. */
.admin-search { position: relative; margin: 0 0 18px; max-width: 380px; }
.admin-search input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font: inherit; font-size: .93rem;
}

/* ---------- mailing list signup ---------- */

.signup h4, .signup h3 { color: #fff; margin: 0 0 8px; font-size: .95rem; }
.signup p.small { color: #a99a88; margin: 0 0 12px; line-height: 1.55; }
.signup__form { display: flex; gap: 8px; flex-wrap: wrap; }
.signup__form input {
  flex: 1 1 160px; min-width: 0; padding: 10px 13px;
  border: 1px solid #4a3f33; border-radius: var(--radius-sm);
  background: #1b1510; color: #f2e9dc; font: inherit; font-size: .92rem;
}
.signup__form input::placeholder { color: #7d6f60; }
.signup__form input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(226, 148, 26, .18);
}
.signup__form .btn { flex: 0 0 auto; }
.signup__note { margin: 10px 0 0; font-size: .86rem; min-height: 1.2em; }
.signup__note--ok  { color: #7fd39b; }
.signup__note--bad { color: #f0a08a; }

/* On a light background — anywhere outside the footer. */
.section .signup h3, .wrap > .signup h3 { color: var(--ink); }
.section .signup p.small { color: var(--ink-soft); }
.section .signup__form input {
  background: var(--card); color: var(--ink); border-color: var(--line);
}

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

/* When it has to be back, said where the price is — the one place a customer
   is definitely looking before they commit. */
.quote__due {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: .88rem; color: var(--ink-soft); line-height: 1.55;
}
.quote__due strong { color: var(--ink); }

/* ---------- delivery fee table ---------- */

.zone-table-wrap { overflow-x: auto; }
.zone-table {
  width: 100%; border-collapse: collapse; max-width: 620px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.zone-table thead th {
  text-align: left; padding: 13px 18px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
  background: var(--sand); border-bottom: 1px solid var(--line);
}
.zone-table thead th:last-child { text-align: right; }
.zone-table td { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.zone-table tr:last-child td { border-bottom: 0; }
.zone-table strong { display: block; font-size: 1rem; }
.zone-fee {
  text-align: right; white-space: nowrap; font-weight: 650; font-size: 1.05rem;
  vertical-align: middle;
}
.zone-free { color: var(--forest); }
.delivery-extra { margin-top: 22px; max-width: 620px; }
.delivery-extra p { color: var(--ink-soft); }

/* A short list of names, not a bulleted argument: the marker adds nothing when
   every line is one link. */
.plain-list { list-style: none; padding: 0; margin: 0 0 14px; }
.plain-list li { padding: 4px 0; }

/* A button that has to read as a link, inside a sentence. */
.linkish { background:none; border:0; padding:0; font:inherit; color:inherit;
  text-decoration:underline; cursor:pointer; }