/* ============================================================================
   Dumpster Rental HQ — brand system
   ----------------------------------------------------------------------------
   Safety orange on steel. The palette is deliberately the jobsite's own:
   hi-vis orange, steel grey, asphalt black. Competitors occupy blue (Docket),
   near-black navy (iCans), green (Bin Boss) — orange is unclaimed in the
   category and carries the highest contrast for calls to action.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------- */
  --hi-vis:        #FF6A13;  /* primary — safety orange */
  --hi-vis-deep:   #E2540A;  /* hover / pressed */
  --hi-vis-dark:   #B53F04;  /* text on light orange washes */
  --hi-vis-wash:   #FFF3EB;  /* tinted section background */
  --hi-vis-line:   #FFD2B5;  /* border on washes */

  /* --- neutrals: asphalt → steel → concrete ------------------------------ */
  --asphalt:       #0E1116;  /* near-black, page ink and dark sections */
  --asphalt-2:     #171C23;  /* raised surface on dark */
  --steel-900:     #232A33;
  --steel-700:     #3A444F;
  --steel-500:     #6B7684;  /* secondary text */
  --steel-300:     #A8B2BE;
  --steel-200:     #D6DCE3;  /* borders */
  --steel-100:     #E9EDF1;
  --concrete:      #F5F7F9;  /* page background */
  --white:         #FFFFFF;

  /* --- support ----------------------------------------------------------- */
  --go:            #16874A;  /* confirmations, "included" ticks */
  --go-wash:       #E8F5ED;
  --warn:          #B45309;
  --stop:          #B4231C;
  --stop-wash:     #FDEDEC;

  /* --- type -------------------------------------------------------------- */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- rhythm ------------------------------------------------------------ */
  --maxw: 1140px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(14, 17, 22, .06);
  --shadow-md: 0 8px 24px rgba(14, 17, 22, .08);
  --shadow-lg: 0 24px 60px rgba(14, 17, 22, .14);
}

/* ------------------------------------------------------------------ reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--asphalt);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--hi-vis-dark); }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.025em; font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--hi-vis); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------------- layout --- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 76px 0; }
.section--tight { padding: 52px 0; }
.section--wash { background: var(--concrete); }
.section--dark { background: var(--asphalt); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--hi-vis-dark);
  background: var(--hi-vis-wash); border: 1px solid var(--hi-vis-line);
  border-radius: 99px; padding: 6px 13px;
}
.section--dark .eyebrow {
  color: var(--hi-vis); background: rgba(255, 106, 19, .12); border-color: rgba(255, 106, 19, .35);
}

h1, .h1 { font-size: clamp(34px, 5.4vw, 60px); }
h2, .h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3, .h3 { font-size: 19px; }
.lede { font-size: clamp(16px, 1.9vw, 19px); line-height: 1.6; color: var(--steel-500); }
.section--dark .lede { color: var(--steel-300); }
.muted { color: var(--steel-500); }
.mono { font-family: var(--font-mono); }

/* -------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 800; font-size: 15px;
  padding: 14px 26px; border-radius: var(--r-md); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background .15s ease, transform .05s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--hi-vis); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--hi-vis-deep); color: var(--white); }
.btn--ghost { background: var(--white); color: var(--asphalt); border-color: var(--steel-200); }
.btn--ghost:hover { border-color: var(--steel-500); color: var(--asphalt); }
.section--dark .btn--ghost { background: transparent; color: var(--white); border-color: var(--steel-700); }
.section--dark .btn--ghost:hover { border-color: var(--steel-300); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--lg { padding: 16px 32px; font-size: 16.5px; }

/* ---------------------------------------------------------------- cards --- */
.card {
  background: var(--white); border: 1px solid var(--steel-200);
  border-radius: var(--r-lg); padding: 24px;
}
.section--dark .card { background: var(--asphalt-2); border-color: var(--steel-900); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--steel-200);
}
.site-header__inner { display: flex; align-items: center; gap: 14px; padding: 13px 20px; max-width: var(--maxw); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--asphalt); font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--hi-vis); color: var(--white);
  display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: -.03em; flex: none;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a { color: var(--steel-700); text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 9px 13px; border-radius: var(--r-sm); }
.site-nav a:hover { color: var(--asphalt); background: var(--steel-100); }

/* --------------------------------------------------------------- footer --- */
.site-footer { background: var(--asphalt); color: var(--steel-300); padding: 56px 0 28px; }
.site-footer h4 { color: var(--white); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; font-weight: 800; }
.site-footer a { color: var(--steel-300); text-decoration: none; font-size: 14.5px; display: block; padding: 5px 0; }
.site-footer a:hover { color: var(--white); }
.site-footer__bar { border-top: 1px solid var(--steel-900); margin-top: 36px; padding-top: 20px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }

/* ----------------------------------------------------------------- misc --- */
.tick { color: var(--go); font-weight: 800; }
.cross { color: var(--stop); font-weight: 800; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 99px; }
.pill--go { background: var(--go-wash); color: var(--go); }
.pill--stop { background: var(--stop-wash); color: var(--stop); }

table.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--white); }
table.cmp th, table.cmp td { padding: 13px 14px; border-bottom: 1px solid var(--steel-200); text-align: left; vertical-align: top; }
table.cmp thead th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--steel-500); background: var(--concrete); }
table.cmp tbody th { font-weight: 700; }
table.cmp .is-us { background: var(--hi-vis-wash); }

details.faq { border-bottom: 1px solid var(--steel-200); padding: 4px 0; }
details.faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px; padding: 16px 0; list-style: none; display: flex; align-items: center; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 400; color: var(--hi-vis); }
details.faq[open] summary::after { content: "\2013"; }
details.faq p { padding-bottom: 18px; color: var(--steel-500); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--asphalt); color: var(--white);
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 56px 0; }
  .site-nav a.nav-hide { display: none; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .site-nav { gap: 2px; }
  .btn { padding: 13px 20px; }
  table.cmp { font-size: 13px; }
  table.cmp th, table.cmp td { padding: 10px 9px; }
}

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