/* Royal Bins & Disposal - site styles */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0E0F12; --ink2:#191B20; --ink3:#24272E;
  --amber:#FFC21A; --amber2:#FFA800;
  --line:rgba(255,255,255,.10); --mut:#9AA0AB;
  --navh:105px; --logoh:87px;   /* the stacked lockup is tall - the bar sizes to it */
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--ink);color:#fff;font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.02;letter-spacing:-.03em;font-weight:900}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:#0E0F12;
      font-weight:900;padding:14px 22px}
.skip:focus{left:12px;top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* NAV - amber bar, everything in it reads as ink instead of white */
header{position:sticky;top:0;z-index:50;background:var(--amber);border-bottom:1px solid rgba(14,15,18,.16);
       box-shadow:0 10px 30px rgba(0,0,0,.35)}
header :focus-visible{outline-color:#0E0F12}
.nav{display:flex;align-items:center;gap:32px;height:var(--navh)}
.logo{display:flex;align-items:center;gap:11px;font-weight:900;font-size:19px;letter-spacing:-.02em;line-height:1.05;color:#0E0F12}
.logo .mark{width:48px;height:34px;flex:0 0 auto;display:grid;place-items:center}
.logo .mark img{display:block;width:100%;height:auto}
/* The header carries the whole stacked lockup as one piece (C10), so it needs no
   typed name beside it - unlike the footer, which still uses crown + text. */
header .logo{gap:0}
header .logo .mark{display:block;width:auto;height:var(--logoh);flex:0 0 auto}
/* The footer runs the same lockup with the phone number under it, amber on the
   dark ground. Its viewBox is 865 tall against the header mark's 785, so matching
   the header's --logoh of 87 would render the crown and wordmark 10% smaller than
   the header's. 87 x 865/785 = 96 makes the two marks the same size on screen,
   with the phone line sitting below as the extra. */
footer .logo{gap:0}
footer .logo .mark{display:block;width:auto;height:96px;flex:0 0 auto}
.logo small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;color:rgba(14,15,18,.66)}
.nav ul{display:flex;gap:28px;list-style:none;margin-left:auto;font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.nav ul a{color:rgba(14,15,18,.68);transition:color .2s}
.nav ul a:hover{color:#0E0F12}
.navcta{display:flex;align-items:center;gap:14px}
.tel{font-weight:900;font-size:17px;letter-spacing:-.01em;white-space:nowrap;color:#0E0F12}
.tel span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.18em;color:rgba(14,15,18,.62);text-transform:uppercase}
.btn{display:inline-block;background:var(--amber);color:#0E0F12;font-weight:900;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;padding:15px 26px;transform:skewX(-9deg);transition:.2s;border:none;cursor:pointer}
.btn i{display:block;transform:skewX(9deg);font-style:normal}
.btn:hover{background:#fff}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.btn.ghost:hover{background:#fff;color:#0E0F12;box-shadow:none}
/* the amber button is invisible on the amber bar - invert it there */
header .btn{background:#0E0F12;color:var(--amber)}
header .btn:hover{background:#fff;color:#0E0F12}

/* MOBILE NAV */
#navtoggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:none;width:46px;height:46px;flex:0 0 auto;cursor:pointer;
        align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px rgba(14,15,18,.30)}
.burger i{display:block;width:20px;height:2px;background:#0E0F12;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#0E0F12}
.burger i::before{top:-6px}.burger i::after{top:6px}
#navtoggle:focus-visible+.nav .burger{outline:3px solid #0E0F12;outline-offset:3px}

/* HERO */
.hero{position:relative;padding:96px 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 500px at 78% 12%,rgba(255,194,26,.16),transparent 62%),
  linear-gradient(180deg,#111318,#0E0F12)}
.stripe{position:absolute;top:0;right:-120px;width:520px;height:100%;
  background:repeating-linear-gradient(-45deg,rgba(255,194,26,.09) 0 22px,transparent 22px 44px);transform:skewX(-9deg)}
.hero .wrap{position:relative}
.hgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
h1{font-size:clamp(44px,6.4vw,84px);text-transform:uppercase}
h1 em{font-style:normal;color:var(--amber);display:block}
.lede{font-size:19px;color:#C9CDD4;max-width:520px;margin:26px 0 34px;line-height:1.55}
.lede b{color:#fff;font-weight:700}
.hcta{display:flex;gap:14px;flex-wrap:wrap}
.badges{display:flex;flex-wrap:wrap;gap:26px;margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.badge{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#D6DAE1}
.badge svg{flex:0 0 auto}
.heroart{position:relative}
.pricecard{background:var(--amber);color:#0E0F12;padding:30px 32px;transform:skewX(-6deg);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.pricecard>*{transform:skewX(6deg)}
.pricecard .k{font-size:11.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.pricecard .v{font-size:56px;font-weight:900;letter-spacing:-.04em;line-height:1;margin:6px 0 4px}
.pricecard p{font-size:13.5px;font-weight:700;line-height:1.45}
/* Hero art is a cut-out photo on the dark hero ground - no box, no radius.
   width:100% keeps it inside the narrower right-hand grid column, and the
   intrinsic width/height on the img reserves the space so the headline does
   not jump when it loads.
   The photo is trimmed to its content, unlike the SVG this replaced, which
   carried its own top padding inside the viewBox - hence a positive margin
   here. Both this and the card above it are amber, so they need the gap to
   read as two objects. */
.binart{margin-top:26px}
.binart img{display:block;width:100%;height:auto}

/* MARQUEE */
/* The strip is the same run of items twice over, and the keyframe slides it by
   exactly -50% - one copy - so the loop point is invisible. That only holds if
   every item carries its own trailing space: a flex GAP on the row puts no gap
   after the last item, which leaves 50% half a gap short of one copy and makes
   the strip visibly hitch once a cycle. Hence margin-right on the item, not gap
   on the row. Keep the two copies byte-identical.

   The band is skewed but the text inside is counter-skewed back to horizontal,
   so the clip edge rises across the width while the text does not: over 100vw
   that is 100vw x tan(1.4deg) = 2.44vw of travel, 1.22vw of it either side of
   centre. The vertical padding has to clear that or the row loses its top at
   one end and its bottom at the other - hence 1.5vw rather than a fixed px. */
.marq{background:var(--amber);color:#0E0F12;overflow:hidden;margin-top:88px;transform:skewY(-1.4deg)}
.marq div{display:flex;padding:max(18px,1.5vw) 0;white-space:nowrap;font-weight:900;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;transform:skewY(1.4deg);animation:slide 34s linear infinite}
@keyframes slide{to{transform:skewY(1.4deg) translateX(-50%)}}
.marq span{display:flex;align-items:center;gap:44px;margin-right:44px}
.marq span::after{content:"";width:7px;height:7px;background:#0E0F12;transform:rotate(45deg)}

section{padding:104px 0}
.shead{max-width:760px;margin-bottom:52px}
.shead h2{font-size:clamp(32px,4.4vw,54px);text-transform:uppercase;margin:14px 0 16px}
.shead p{color:#A8AEB8;font-size:17.5px}

/* SIZES */
/* All five sizes stay on ONE row at every width. Once five cards no longer fit
   comfortably the row scrolls sideways rather than wrapping, so the range always
   reads as a single set to compare across. */
.sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.size{background:var(--ink2);border:1px solid var(--line);padding:28px 22px 24px;position:relative;transition:.25s;overflow:hidden;
      display:flex;flex-direction:column}
.size ul{flex:1}
.size::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--amber);transition:width .3s}
.size:hover{transform:translateY(-6px);border-color:rgba(255,194,26,.4);background:#1D2027}
.size:hover::after{width:100%}
.size .n{font-size:56px;font-weight:900;letter-spacing:-.05em;line-height:.9;color:var(--amber)}
.size .n s{text-decoration:none;font-size:17px;letter-spacing:.04em;display:block;color:#fff;margin-top:6px}
.size ul{list-style:none;font-size:14px;color:#C4C9D1;
         margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.size li{padding-left:17px;position:relative;margin-bottom:6px}
.size li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--amber);transform:rotate(45deg)}
.size .p{margin-top:22px;font-size:13px;color:var(--mut);font-weight:700}
.size .p b{display:block;font-size:27px;color:#fff;letter-spacing:-.02em}
/* No prices are published, so the foot of every card is a call button instead.
   Full width so the whole thing is a tap target on a phone. */
.size .btn{display:block;width:100%;margin-top:18px;padding:14px 8px;text-align:center;
           font-size:12px;letter-spacing:.05em}
.tag{position:absolute;top:0;right:0;background:var(--amber);color:#0E0F12;font-size:10px;font-weight:900;letter-spacing:.14em;padding:7px 14px}

/* Whether a size takes heavy material is the single most useful thing on the
   card - a 40 full of concrete is not liftable, so it gets said on the card
   itself and not buried on the materials page. */
/* min-height keeps the price line level across all five cards even when a
   longer label wraps to two lines in the narrower ones. */
.heavyok,.heavyno{margin-top:18px;font-size:11.5px;font-weight:800;letter-spacing:.05em;
                  padding:8px 11px;border:1px solid;display:flex;align-items:center;min-height:40px}
.heavyok{color:var(--amber);border-color:rgba(255,194,26,.34);background:rgba(255,194,26,.07)}
.heavyno{color:#9AA0AB;border-color:var(--line);background:rgba(255,255,255,.03)}
.size .p{margin-top:18px}

/* One box under the sizes: the nudge to phone in rather than guess. */
.rule{background:var(--line);border:1px solid var(--line);margin-top:20px}
.rule>div{background:var(--ink2);padding:30px 28px}
.rule h4{font-size:17px;font-weight:900;letter-spacing:-.01em;margin-bottom:9px;color:var(--amber)}
.rule p{font-size:14.5px;color:#A8AEB8;line-height:1.6}
.rule b{color:#fff;font-weight:800}
.binlinks{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}

/* Below ~1060px five columns get too narrow to read, so the row becomes a
   swipeable track instead of wrapping. The hover lift is dropped here because a
   scroll container clips it. */
@media(max-width:1060px){
  .sizes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);
         overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
         padding-bottom:16px;scrollbar-color:var(--amber) rgba(255,255,255,.08)}
  .size{scroll-snap-align:start}
  .size:hover{transform:none}
  .sizes::-webkit-scrollbar{height:8px}
  .sizes::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
  .sizes::-webkit-scrollbar-thumb{background:var(--amber)}
}
.swipe{display:none;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.06em;
       text-transform:uppercase;color:var(--mut)}
@media(max-width:1060px){.swipe{display:block}}

/* BUNDLE */
.bundle{background:linear-gradient(135deg,#15171D,#0E0F12);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.steps{display:grid;gap:2px;background:var(--line)}
.step{background:var(--ink);padding:26px 28px;display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start}
.step .num{font-size:34px;font-weight:900;color:var(--amber);letter-spacing:-.04em;line-height:1}
.step h4{font-size:17px;font-weight:900;letter-spacing:-.01em;margin-bottom:5px}
.step p{font-size:14.5px;color:#A8AEB8}
.saveline{display:flex;align-items:center;gap:16px;margin-top:30px;padding:22px 26px;background:rgba(255,194,26,.1);border-left:4px solid var(--amber)}
.saveline b{font-size:15px;font-weight:900}
.saveline p{font-size:14px;color:#C4C9D1}

/* WHY */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.why div{background:var(--ink);padding:36px 30px}
.why svg{margin-bottom:18px}
.why h4{font-size:17px;font-weight:900;margin-bottom:8px;letter-spacing:-.01em}
.why p{font-size:14.5px;color:#A8AEB8}

/* AREAS */
.areas{background:var(--ink2);border:1px solid var(--line);padding:52px 48px;display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);padding:11px 18px;font-size:13.5px;font-weight:700;color:#D6DAE1;transition:.2s}
.chip:hover{border-color:var(--amber);color:var(--amber)}

/* CTA */
.cta{background:var(--amber);color:#0E0F12;text-align:center;padding:96px 0}
.cta h2{font-size:clamp(34px,5vw,62px);text-transform:uppercase}
.cta p{font-size:19px;font-weight:600;margin:18px auto 34px;max-width:560px}
.cta .btn{background:#0E0F12;color:var(--amber)}
.cta .btn:hover{background:#fff;color:#0E0F12}
.cta .btn.ghost{background:transparent;color:#0E0F12;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.cta .btn.ghost:hover{background:#0E0F12;color:var(--amber);box-shadow:none}
/* the form panel inside .cta is already dark - the inverted button vanishes on it */
.cta .form .btn{background:var(--amber);color:#0E0F12}
.cta .form .btn:hover{background:#fff;color:#0E0F12}
.ctagrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;text-align:left}
.ctagrid h2{margin-bottom:18px}
.ctagrid .lead{font-size:19px;font-weight:600;margin-bottom:28px;max-width:440px}
.callbox{display:inline-flex;align-items:center;gap:14px;background:#0E0F12;color:#fff;padding:18px 24px}
.callbox svg{flex:0 0 auto}
.callbox b{display:block;font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--amber)}
.callbox span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* FORM */
.form{background:var(--ink);color:#fff;padding:38px 36px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.form h3{font-size:22px;text-transform:uppercase;margin-bottom:6px}
.form>p{font-size:14px;color:#A8AEB8;margin-bottom:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
             color:var(--mut);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--ink2);color:#fff;font:inherit;font-size:15px;
      border:1px solid var(--line);padding:13px 14px;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber);background:#1D2027}
.field textarea{resize:vertical;min-height:84px}
.field select{appearance:none;cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0AB' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px}
.form .btn{width:100%;margin-top:8px;transform:none;padding:17px 26px;font-size:14px}
.form .btn i{transform:none}
.form .fine{font-size:12.5px;color:#7B818C;margin-top:14px;text-align:center}

footer{padding:72px 0 36px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.5fr .8fr 1fr .9fr 1.1fr;gap:34px}
footer h5{font-size:11.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
footer li{list-style:none;font-size:14.5px;color:#A8AEB8;margin-bottom:9px}
footer a:hover{color:#fff}
.parent{margin-top:22px;padding:16px 18px;border:1px dashed rgba(255,194,26,.35);font-size:13.5px;color:#C4C9D1;max-width:420px}
.parent b{color:var(--amber)}
.fbot{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:#7B818C}

/* The nav carries six items now, so it has to fold into the burger earlier than
   the layout grids do - below ~1150px the items wrap onto two lines. */
@media(max-width:1150px){
  .burger{display:flex;margin-left:auto}
  .nav ul{position:absolute;top:var(--navh);left:0;right:0;display:none;flex-direction:column;gap:0;
          background:var(--amber);border-bottom:1px solid rgba(14,15,18,.16);padding:8px 24px 18px;
          font-size:15px;letter-spacing:.05em;box-shadow:0 16px 30px rgba(0,0,0,.35)}
  .nav ul li+li{border-top:1px solid rgba(14,15,18,.16)}
  .nav ul a{display:block;padding:16px 0;color:#0E0F12}
  #navtoggle:checked+.nav ul{display:flex}
}
@media(max-width:980px){
  .hgrid,.bgrid,.areas,.ctagrid{grid-template-columns:1fr;gap:40px}
  .why{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid>div:first-child{grid-column:1/-1}
}
@media(max-width:600px){
  :root{--navh:76px;--logoh:59px}
  .fgrid{grid-template-columns:1fr}
  .tel span{display:none}
  .tel{font-size:15px}
  .nav{gap:14px}
  .navcta{gap:10px}
  .navcta .btn{padding:13px 17px;font-size:12px}
  section{padding:72px 0}
  .areas{padding:34px 26px}
  .frow{grid-template-columns:1fr}
  .form{padding:30px 24px}
  .cta{padding:72px 0}
}
@media(max-width:400px){
  .navcta .btn{display:none}
}

/* ── HONEYPOT (bot trap — never shown to humans) ───────────────────── */
.field.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── FORM STATUS ───────────────────────────────────────────────────── */
.formstatus{margin-top:14px;padding:0;font-size:14px;font-weight:700;line-height:1.5}
.formstatus:empty{display:none}
.formstatus{padding:13px 16px;border-left:4px solid var(--mut);background:rgba(255,255,255,.04)}
.formstatus.ok{border-color:#3FBF6A;background:rgba(63,191,106,.12);color:#8BE8AC}
.formstatus.err{border-color:#FF5A4E;background:rgba(255,90,78,.12);color:#FFA79F}
.field .fielderr{display:block;font-size:12.5px;font-weight:700;color:#FFA79F;margin-top:6px;letter-spacing:0;text-transform:none}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#FF5A4E}
.form.sending{opacity:.6;pointer-events:none}

/* ── INNER PAGES ───────────────────────────────────────────────────── */
.pagehead{position:relative;padding:72px 0 64px;background:linear-gradient(180deg,#15171D,#0E0F12);
          border-bottom:1px solid var(--line);overflow:hidden}
.pagehead::after{content:"";position:absolute;top:0;right:-140px;width:460px;height:100%;
          background:repeating-linear-gradient(-45deg,rgba(255,194,26,.07) 0 22px,transparent 22px 44px);
          transform:skewX(-9deg)}
.pagehead .wrap{position:relative}
.pagehead h1{font-size:clamp(34px,5.4vw,62px);margin-top:14px}
.pagehead p{color:#A8AEB8;font-size:18px;max-width:640px;margin-top:18px}
.crumbs{font-size:13px;font-weight:700;color:var(--mut);letter-spacing:.04em}
.crumbs a:hover{color:var(--amber)}

.prose{max-width:760px;font-size:16.5px;color:#C4C9D1}
.prose h2{font-size:29px;text-transform:uppercase;margin:52px 0 16px;color:#fff}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:34px 0 10px;color:#fff;letter-spacing:-.01em}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:#fff}
.prose .updated{font-size:13.5px;color:#7B818C;padding:14px 18px;border:1px dashed var(--line);
                display:inline-block;margin-bottom:36px}

/* two-column list of accepted / not accepted */
.yesno{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
       border:1px solid var(--line);margin:8px 0 40px}
.yesno>div{background:var(--ink);padding:30px 28px}
.yesno h4{font-size:16px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px;
          display:flex;align-items:center;gap:10px}
.yesno .y h4{color:#8BE8AC}.yesno .n h4{color:#FFA79F}
.yesno ul{list-style:none;margin:0;font-size:15px;color:#C4C9D1}
.yesno li{padding-left:18px;position:relative;margin-bottom:9px}
.yesno .y li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:#3FBF6A;transform:rotate(45deg)}
.yesno .n li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:#FF5A4E;transform:rotate(45deg)}

/* contact cards */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
        border:1px solid var(--line);margin-bottom:52px}
.ccards>div{background:var(--ink);padding:32px 28px}
.ccards h4{font-size:11.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
           color:var(--amber);margin-bottom:14px}
.ccards p,.ccards a{font-size:16px;color:#C4C9D1;line-height:1.65;display:block}
.ccards b{display:block;font-size:22px;font-weight:900;color:#fff;letter-spacing:-.02em;margin-bottom:4px}
.ccards a:hover{color:var(--amber)}

@media(max-width:820px){
  .yesno,.ccards{grid-template-columns:1fr}
  .pagehead{padding:52px 0 46px}
}

/* ── WASTE-TYPE CARDS ──────────────────────────────────────────────────
   Contractors search by what they're throwing out, not by yardage. These
   are the entry points to the per-material landing pages. */
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.types a{background:var(--ink2);padding:30px 28px;display:block;transition:.25s}
.types a:hover{background:#1D2027}
.types svg{margin-bottom:16px}
.types h4{font-size:17px;font-weight:900;margin-bottom:7px;letter-spacing:-.01em}
.types p{font-size:14.5px;color:#A8AEB8;margin-bottom:15px}
.types .go{font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}

/* ── CALLOUTS ──────────────────────────────────────────────────────────
   .warn is the red one — use it only where getting it wrong costs money
   or leaves a bin on the ground. .warn.tip is the amber advisory. */
.warn{display:flex;gap:16px;align-items:flex-start;padding:22px 26px;margin:0 0 34px;
      background:rgba(255,90,78,.09);border-left:4px solid #FF5A4E}
.warn.tip{background:rgba(255,194,26,.1);border-left-color:var(--amber)}
.warn svg{flex:0 0 auto;margin-top:2px}
.warn b{display:block;font-size:15px;font-weight:900;color:#fff;margin-bottom:5px;letter-spacing:-.01em}
.warn p{font-size:14.5px;color:#C4C9D1;margin:0!important}

/* ── FAQ ACCORDION ─────────────────────────────────────────────────────
   Native <details>: works with JS disabled, and Google can read the
   answers for the FAQPage rich result without executing anything. */
.faqs{border:1px solid var(--line);background:var(--ink2);margin-bottom:40px}
.faqs details{border-bottom:1px solid var(--line)}
.faqs details:last-child{border-bottom:none}
.faqs summary{cursor:pointer;list-style:none;padding:22px 26px;font-size:16.5px;font-weight:800;
              letter-spacing:-.01em;display:flex;gap:18px;align-items:flex-start;transition:color .2s}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";margin-left:auto;font-size:26px;font-weight:400;color:var(--amber);
                     line-height:.8;flex:0 0 auto}
.faqs details[open] summary::after{content:"\2212"}
.faqs summary:hover{color:var(--amber)}
.faqs .a{padding:0 26px 24px;font-size:15.5px;color:#A8AEB8;max-width:82ch}
.faqs .a p{margin-bottom:12px}
.faqs .a p:last-child{margin-bottom:0}
.faqs .a ul{margin:0 0 12px 20px}
.faqs .a li{margin-bottom:6px}
.faqs .a a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.faqs .a strong{color:#fff}

/* ── SPEC TABLES ───────────────────────────────────────────────────────
   Wrapped in .tblwrap so a wide table scrolls itself instead of the page. */
.tblwrap{overflow-x:auto;margin:8px 0 34px}
.tbl{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line);min-width:520px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{background:var(--ink2);font-size:11.5px;font-weight:900;letter-spacing:.14em;
        text-transform:uppercase;color:var(--amber);white-space:nowrap}
.tbl td{color:#C4C9D1}
.tbl tr:last-child td{border-bottom:none}
.tbl td b{color:#fff}

/* ── RELATED LINKS ─────────────────────────────────────────────────────*/
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
     border:1px solid var(--line);margin-top:8px}
.rel a{background:var(--ink);padding:22px 24px;font-size:14.5px;font-weight:800;
       display:flex;align-items:center;gap:10px;transition:.2s}
.rel a:hover{background:var(--ink2);color:var(--amber)}

/* ── SIZE-CARD MATERIAL GUIDANCE ───────────────────────────────────────
   A 40 yd bin filled with concrete is roughly 40 tons and cannot legally
   leave the site. The sizes have to say what they're for. */
.size .mat{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
           margin-top:16px;padding:9px 12px;line-height:1.45;
           background:rgba(255,194,26,.1);color:var(--amber);border-left:3px solid var(--amber)}
.size .mat.no{background:rgba(255,90,78,.1);color:#FFA79F;border-left-color:#FF5A4E}

@media(max-width:1180px){.types{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.types,.rel{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.types,.rel{grid-template-columns:1fr}}