/* ESU Rentals — design system
   Industrial safety aesthetic: charcoal ink, safety yellow, engineered detailing.
   Animation policy: interaction feedback only (hover/focus/open) — nothing
   scroll-triggered, nothing autoplaying. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/poppins-700.woff2") format("woff2"); }

:root {
  --yellow: #FFC20E;
  --yellow-dark: #E0A800;
  --ink: #14181D;
  --ink-2: #1D232B;
  --body: #343B44;
  --muted: #5C646E;
  --line: #E3E2DA;
  --bg: #F7F6F2;
  --card: #FFFFFF;
  --on-dark-muted: #A8B0BA;
  --radius: 8px;
  --wrap: 1140px;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --shadow: 0 1px 2px rgba(16, 20, 24, .06), 0 8px 24px -12px rgba(16, 20, 24, .18);
  --t: 160ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 400 16.5px/1.65 "Poppins", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.18; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -.015em; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
strong { color: var(--ink); font-weight: 600; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--yellow); color: var(--ink);
  padding: .5rem 1rem; z-index: 100; font-weight: 600; }
.skip-link:focus { left: 0; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink);
  border-bottom: 1px solid #262d36; }
.header-row { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.brand img { width: 200px; height: auto; }
.site-nav { flex: 1; }
.site-nav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.site-nav a { color: #E8ECF1; text-decoration: none; font-size: .92rem; font-weight: 500;
  padding: .55rem .8rem; border-radius: 6px; display: block; transition: background var(--t), color var(--t); }
.site-nav a:hover, .site-nav a:focus-visible { background: rgba(255, 194, 14, .13); color: var(--yellow); }
.has-sub { position: relative; }
.has-sub > a::after { content: " ▾"; font-size: .7em; opacity: .7; }
.has-sub .sub { position: absolute; left: 0; top: 100%; flex-direction: column; gap: 0; min-width: 220px;
  background: var(--ink-2); border: 1px solid #2A323C; border-radius: var(--radius); padding: .4rem;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; translate: 0 4px;
  transition: opacity var(--t), visibility var(--t), translate var(--t); }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; translate: 0 0; }
.header-cta { display: flex; align-items: center; gap: 1rem; }
.header-phone { color: var(--yellow); text-decoration: none; font-weight: 600; font-size: .95rem;
  font-family: var(--mono); letter-spacing: .01em; }
.header-phone:hover { text-decoration: underline; }
.nav-toggle { display: none; }

/* ---------- buttons / chips ---------- */
.btn { display: inline-block; background: var(--yellow); color: var(--ink); font-weight: 600;
  font-size: .98rem; padding: .8rem 1.6rem; border-radius: 6px; text-decoration: none; border: 1px solid var(--yellow);
  white-space: nowrap; transition: background var(--t), border-color var(--t), transform var(--t); cursor: pointer; }
.btn:hover, .btn:focus-visible { background: var(--yellow-dark); border-color: var(--yellow-dark); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .55rem 1.2rem; font-size: .88rem; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-ghost.on-light { color: var(--ink); border-color: #B9B6AA; }
.btn-ghost.on-light:hover { background: rgba(20, 24, 29, .06); border-color: var(--ink); }
.chip { display: inline-block; font-family: var(--mono); font-size: .78rem; color: #F2D98D;
  border: 1px solid rgba(255, 194, 14, .4); border-radius: 4px; padding: .3rem .65rem; letter-spacing: .02em; }
.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow-dark); margin: 0 0 .9rem; }
.on-dark .eyebrow, .hero .eyebrow, .page-head .eyebrow { color: var(--yellow); }

/* ---------- hero / page head ---------- */
.hero { background-color: var(--ink); background-size: cover; background-position: center right;
  color: #DDE3EA; padding: clamp(4rem, 9vw, 7.5rem) 0; }
.hero-photo { display: none; }
.hero h1 { color: #fff; max-width: 15em; }
.hero-sub { font-size: 1.08rem; max-width: 44em; color: inherit; }
.hero .hero-sub { color: #C6CDD6; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 2rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-head { background-color: var(--ink); color: #C6CDD6; padding: clamp(2.8rem, 6vw, 4.5rem) 0; }
.page-head.has-img { background-size: cover; background-position: center; }
.page-head h1 { color: #fff; }
.page-head .hero-sub { margin-bottom: 0; }

/* ---------- sections ---------- */
section.band { padding: clamp(3rem, 6vw, 5rem) 0; }
section.band.tight { padding: clamp(2.2rem, 4vw, 3.2rem) 0; }
.band.on-dark { background: var(--ink); color: var(--on-dark-muted); }
.band.on-dark h2, .band.on-dark h3, .band.on-dark strong { color: #fff; }
.band.on-dark a { color: #E8ECF1; text-decoration-color: var(--yellow); }
.band.on-dark a:hover { color: var(--yellow); }
.band.alt { background: #EFEDE6; }
.section-head { max-width: 62ch; margin-bottom: 2.2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
a.card { text-decoration: none; display: block; }
a.card:hover, a.card:focus-visible { border-color: var(--yellow-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.card .card-more { display: inline-block; margin-top: .9rem; font-size: .88rem; font-weight: 600; color: var(--ink); }
a.card:hover .card-more { color: var(--yellow-dark); }
.card-img { margin: -1.6rem -1.6rem 1.2rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.card-img img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.card-num { font-family: var(--mono); font-size: .8rem; color: var(--yellow-dark); letter-spacing: .08em; }

figure.photo { margin: 0; }
figure.photo img { border-radius: var(--radius); box-shadow: var(--shadow); }
figure.photo figcaption { font-size: .82rem; color: var(--muted); margin-top: .6rem; font-family: var(--mono); }

/* ---------- spec list / tables ---------- */
.spec-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec-table th, .spec-table td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--ink); font-weight: 600; white-space: nowrap; width: 38%; }
.spec-table td { font-family: var(--mono); font-size: .88rem; color: var(--body); }
ul.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
ul.ticks li { padding: .3rem 0 .3rem 1.7rem; position: relative; }
ul.ticks li::before { content: ""; position: absolute; left: 0; top: .72em; width: .85em; height: .85em;
  background: var(--yellow); clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 16%, 84% 4%, 38% 72%); }
.band.on-dark ul.ticks li::before { background: var(--yellow); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.stat { border-left: 3px solid var(--yellow); padding-left: 1.1rem; }
.stat b { display: block; font-size: 1.7rem; font-weight: 700; color: var(--ink); font-family: var(--mono); letter-spacing: -.02em; }
.band.on-dark .stat b { color: #fff; }
.stat span { font-size: .85rem; color: var(--muted); }
.band.on-dark .stat span { color: var(--on-dark-muted); }

/* ---------- FAQ (native details — interactive, no JS) ---------- */
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); margin-bottom: .7rem; }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--ink);
  padding: 1.05rem 3rem 1.05rem 1.3rem; position: relative; transition: color var(--t); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; translate: 0 -50%;
  font-family: var(--mono); font-size: 1.25rem; color: var(--yellow-dark); transition: rotate var(--t); }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--yellow-dark); }
.faq details > div { padding: 0 1.3rem 1.15rem; color: var(--muted); font-size: .96rem; }

/* ---------- notice (events / not-for-recreation) ---------- */
.notice { display: flex; gap: 1rem; align-items: flex-start; background: #FFF8E4;
  border: 1px solid #EAD48A; border-left: 4px solid var(--yellow); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; font-size: .95rem; }
.notice b { color: var(--ink); }
.notice p { margin: 0; }

/* ---------- forms ---------- */
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow); scroll-margin-top: 84px; /* clears the sticky header on anchor jumps */ }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--yellow-dark); }
.field input, .field select, .field textarea { font: inherit; font-size: .95rem; color: var(--ink);
  border: 1px solid #CFCDC2; border-radius: 6px; padding: .7rem .85rem; background: #FDFDFB;
  transition: border-color var(--t), box-shadow var(--t); width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none;
  border-color: var(--yellow-dark); box-shadow: 0 0 0 3px rgba(255, 194, 14, .25); }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.form-success { display: none; background: #EDF7EC; border: 1px solid #B9DcB6; border-radius: var(--radius);
  padding: 1.1rem 1.3rem; color: #22551F; font-weight: 500; }
.form-success.show { display: block; }

/* ---------- hazard stripe + footer ---------- */
.hazard-stripe { height: 8px; background: repeating-linear-gradient(-45deg,
  var(--yellow) 0 14px, var(--ink) 14px 28px); }
.site-footer { background: var(--ink); color: var(--on-dark-muted); font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding: 3.2rem 24px 2.2rem; }
.site-footer h3 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--t); }
.site-footer a:hover { color: var(--yellow); }
.footer-brand img { margin-bottom: 1rem; }
.footer-contact a { color: #DDE3EA; }
.footer-note { font-size: .8rem; color: #7C8794; border-top: 1px solid #262D36; padding-top: 1rem; margin-top: 1.2rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid #262D36; padding-top: 1.4rem; padding-bottom: 1.6rem; font-size: .82rem; color: #7C8794; }
.footer-bottom p { margin: 0; }

/* ---------- dev ribbon (removed automatically on prod domain by site.js) ---------- */
.dev-ribbon { position: fixed; bottom: 14px; left: 14px; z-index: 90; background: var(--ink); color: var(--yellow);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; padding: .45rem .8rem;
  border: 1px solid var(--yellow); border-radius: 4px; opacity: .92; }

/* ---------- mobile call button (header phone number hides below 980px) ---------- */
.call-fab { display: none; }

/* honeypot form field — hidden from humans, bots fill it and get dropped */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- responsive ---------- */
/* Stat values are words as often as numbers ("Class I Division 2"). In the
   four-across regime the columns get tight enough to wrap them, so the type
   gives way with the viewport. Below 981px the row drops to two (then one)
   columns and the full size fits again. */
@media (min-width: 981px) {
  .stat b { font-size: clamp(1.2rem, 1.75vw, 1.7rem); }
}

@media (max-width: 980px) {
  .grid-3, .grid-4, .stat-row { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .header-phone { display: none; }

  /* the header phone number is gone at this width, so a pinned call button
     replaces it — always reachable while scrolling, thumb-friendly corner */
  .call-fab { display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 54px; height: 54px;
    background: var(--yellow); color: var(--ink); border-radius: 50%; box-shadow: var(--shadow);
    text-decoration: none; }
  .call-fab:hover, .call-fab:focus-visible { background: var(--yellow-dark); }
  .call-fab:active { transform: translateY(1px); }
  .call-fab svg { width: 24px; height: 24px; }

  /* nav compacts to the menu button here too — the old 760px handoff left a
     squeezed middle zone (760-980px) where the full nav no longer fit but
     hadn't collapsed yet, wrapping dropdown carets and the Rent Now button */
  .nav-toggle { display: block; background: none; border: 1px solid #3A434E; color: #E8ECF1;
    font: 600 .85rem "Poppins", sans-serif; padding: .5rem .9rem; border-radius: 6px; cursor: pointer; }
  .site-nav ul#nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; background: var(--ink-2); border-bottom: 1px solid #2A323C; padding: .6rem 1rem 1rem; }
  .site-nav.open ul#nav-menu { display: flex; }
  .site-nav { position: static; }
  .has-sub .sub { position: static; opacity: 1; visibility: visible; translate: none; box-shadow: none;
    border: none; background: none; padding-left: 1rem; display: none; }
  .has-sub.open .sub { display: block; }

  /* full, uncropped fleet photo up top instead of a cover-cropped background —
     faded into the dark header/text above and below so it reads as one piece,
     not a bright slab wedged between two flat bars. Synced to the same
     breakpoint as the nav collapse so "mobile mode" flips together. */
  .hero { background-image: none !important; padding-top: 0; }
  .hero-photo { display: block; width: 100%; aspect-ratio: 1600 / 901; object-fit: cover;
    object-position: center; filter: brightness(.88) saturate(.94);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
  .hero .wrap { padding-top: 1rem; }
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; gap: 1.8rem; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4, .stat-row, .footer-grid { grid-template-columns: 1fr; }
  .brand img { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}