/* ============================================================
   CuBins — hero variant B (index-b.html)
   The price list lives in the hero instead of a photo with chips.
   Loaded only on the variant page so it can't affect the live homepage.
   ============================================================ */

.hero-b .hero-b-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:56px; align-items:center;
}
@media (max-width:1020px){
  .hero-b .hero-b-grid{ grid-template-columns:1fr; gap:40px; }
}

.hero-b-copy h1{ margin-bottom:20px; }
.hero-b-copy .lead{ max-width:44ch; font-size:1.12rem; color:#DCE4EC; }

/* ---------------------------------------------------- truck illustration */
.hero-b-truck{
  margin:26px 0 4px;
  max-width:360px;
}
.hero-b-truck img{
  display:block; width:100%; height:auto;
  /* lift it off the navy without a box: soft glow behind, subtle drop shadow */
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.45));
}
@media (max-width:1020px){
  .hero-b-truck{ max-width:300px; margin:22px auto 6px 0; }
}
@media (max-width:520px){
  .hero-b-truck{ max-width:250px; margin:18px 0 2px; }
}

/* trust row — smaller and tighter than the badge strip below */
.hero-b-trust{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:34px;
}
.hero-b-trust span{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.92rem; font-weight:600; color:#C6D1DB;
}
.hero-b-trust svg{ width:18px; height:18px; color:var(--orange-hot); flex:none; }

/* The Google rating. His strongest proof by a distance — 107 reviews at 5.0 —
   so it gets its own line above the trust pills rather than becoming one. */
.hero-b-reviews{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  text-decoration:none;
}
.hero-b-reviews .stars{ display:inline-flex; gap:2px; flex:none; }
.hero-b-reviews svg{ width:17px; height:17px; color:var(--orange-hot); }
.hero-b-reviews b{ color:#fff; font-weight:800; }
.hero-b-reviews span.txt{
  font-size:.95rem; font-weight:600; color:#C6D1DB;
  border-bottom:1px solid rgba(255,216,77,.35);
}
.hero-b-reviews:hover span.txt{ border-bottom-color:var(--orange-hot); }

.hero-b-call{
  margin-top:24px; font-size:.95rem; color:#8C99A6;
}
.hero-b-call a{
  color:var(--orange-hot); font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(255,216,77,.4);
}
.hero-b-call a:hover{ border-bottom-color:var(--orange-hot); }

/* ---------------------------------------------------- the rate card */
.rate-card{
  background:var(--white); border-radius:var(--r-lg);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  overflow:hidden;
}
.rate-head{
  padding:26px 28px 20px;
  background:linear-gradient(160deg,#F8FAFB,#EEF2F5);
  border-bottom:1px solid var(--line);
}
.rate-head .eyebrow{ color:var(--orange-deep); }
.rate-head .eyebrow::before{ background:var(--orange-deep); }
.rate-head h2{
  font-size:1.5rem; margin:8px 0 6px; color:var(--ink);
}
.rate-head p{ font-size:.9rem; color:var(--steel); margin:0; }

.rate-list{ display:flex; flex-direction:column; }

.rate-row{
  display:flex; align-items:center; gap:16px;
  padding:15px 28px; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; position:relative;
  transition:background .18s ease, padding-left .18s ease;
}
.rate-row:last-of-type{ border-bottom:none; }
.rate-row:hover{ background:#FFFBEC; padding-left:32px; }
.rate-row:focus-visible{ outline:3px solid var(--orange); outline-offset:-3px; }

/* the most-booked size gets a quiet marker, not a shouty badge */
.rate-row.is-popular{ background:#FFFDF5; }
.rate-row.is-popular::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--grad-orange);
}

.rate-yd{
  font-family:var(--font-display); font-weight:800; font-size:1.6rem;
  line-height:1; flex:none; min-width:52px; color:var(--ink);
}
.rate-yd small{
  display:block; font-family:var(--font-mono); font-weight:500;
  font-size:.56rem; letter-spacing:.2em; color:var(--orange-deep); margin-top:3px;
}
.rate-meta{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.rate-meta strong{ font-size:1rem; font-weight:700; }
.rate-meta em{
  font-style:normal; font-family:var(--font-mono);
  font-size:.72rem; color:var(--steel);
}
.rate-price{
  font-family:var(--font-display); font-weight:800; font-size:1.25rem;
  flex:none; text-align:right; color:var(--ink);
}
.rate-price small{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:.65rem; color:var(--steel-lt);
}
.rate-go{ flex:none; color:var(--steel-lt); display:flex; transition:transform .18s ease, color .18s ease; }
.rate-go svg{ width:18px; height:18px; }
.rate-row:hover .rate-go{ color:var(--orange-deep); transform:translateX(3px); }

.rate-foot{
  margin:0; padding:16px 28px 20px;
  background:var(--paper); border-top:1px solid var(--line);
  font-size:.82rem; color:var(--steel); line-height:1.6;
}

@media (max-width:520px){
  .rate-head{ padding:22px 20px 16px; }
  .rate-head h2{ font-size:1.3rem; }
  .rate-row{ padding:14px 20px; gap:12px; }
  .rate-row:hover{ padding-left:22px; }
  .rate-yd{ font-size:1.35rem; min-width:44px; }
  .rate-meta em{ display:none; }
  .rate-price{ font-size:1.1rem; }
  .rate-go{ display:none; }
  .rate-foot{ padding:14px 20px 18px; }
}

/* ---------------------------------------------------- the photo behind it all
   Joey's truck tipping a 20 yard, with the rest of the fleet lined up
   (img/Pictures/40418.jpg -> img/hero-bin.webp).

   The overlay is deliberately lighter than it was: the point of putting a real
   photo of his own truck back here is that people can see it. It is still
   heaviest on the left, where the headline needs the contrast, and eases off
   across the middle where the truck and the bins are. The rate card on the
   right is opaque, so nothing behind it has to stay readable. */
.hero.hero-b{
  background:
    linear-gradient(100deg,
      rgba(8,20,36,.74) 0%,
      rgba(8,20,36,.58) 34%,
      rgba(8,20,36,.20) 62%,
      rgba(8,20,36,.28) 100%),
    url("../img/hero-bin.webp") center 42% / cover no-repeat;
}
/* the blueprint grid fights a real photo - drop it here only */
.hero.hero-b::after{ display:none; }
.hero.hero-b::before{ opacity:.45; }

/* A soft pool of shade behind the copy column only.
   The alternative was darkening the whole gradient again, which would have
   undone the point of showing the truck. This keeps the picture bright and
   buys contrast exactly where the words are. */
.hero-b-copy{ position:relative; isolation:isolate; }
.hero-b-copy::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-36px -64px -32px -40px;
  background:radial-gradient(115% 85% at 22% 50%,
    rgba(5,12,22,.72) 0%, rgba(5,12,22,.48) 48%, rgba(5,12,22,0) 100%);
}
@media (max-width:1020px){
  /* the flat wash already covers it when stacked */
  .hero-b-copy::before{ display:none; }
}

/* With less overlay the white text is sitting on a brighter picture, so it
   carries its own shadow rather than relying on the wash behind it. */
.hero-b-copy h1{ text-shadow:0 2px 10px rgba(5,12,22,.75), 0 1px 36px rgba(5,12,22,.55); }
.hero-b-copy .lead{ text-shadow:0 1px 8px rgba(5,12,22,.7); }
.hero-b-copy .eyebrow{ text-shadow:0 1px 6px rgba(5,12,22,.7); }
.hero-b-trust span{ text-shadow:0 1px 6px rgba(5,12,22,.75); color:#D7E0E8; }
.hero-b-call{ text-shadow:0 1px 6px rgba(5,12,22,.7); }

@media (max-width:1020px){
  /* stacked: the text runs the full width over the photo, so go back to a
     heavier, flatter wash - legibility wins over showing the truck */
  .hero.hero-b{
    background:
      linear-gradient(180deg, rgba(8,20,36,.80) 0%, rgba(8,20,36,.74) 100%),
      url("../img/hero-bin.webp") center 42% / cover no-repeat;
  }
}