/* Benita's Roll Off Dumpsters — component styles. Every colour, size and radius
   is a token from tokens.css. Layout follows Phase 4.1b: backgrounds bleed,
   content sits in one shared .inner. */

*,*::before,*::after{box-sizing:border-box}
img,picture{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:var(--space-3);top:-100px;background:var(--red);color:var(--paper);padding:var(--space-2) var(--space-3);border-radius:var(--radius-btn);z-index:100}
.skip-link:focus{top:var(--space-3)}

/* ---------- layout ---------- */
.section{padding-inline:var(--gutter);padding-block:var(--section-pad)}
.section>.inner{max-width:var(--container);margin-inline:auto}
.section--wide>.inner{max-width:var(--container-wide)}
.section--bleed{padding-inline:0}
.section--bleed>.inner{padding-inline:var(--gutter)}
.section--band{padding-block:var(--band-pad)}
.section--flush{padding-block:0}
.section--tint{background:var(--tint)}
.section--paper{background:var(--paper)}
.section--black{background:var(--black);color:var(--paper)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--gradient-top{background:var(--gradient-top)}
.section--photo{background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
@media (width >= 1025px) and (hover:hover){.section--photo{background-attachment:fixed}}
.prose{max-width:var(--measure)}
.center{text-align:center}
.stack>*+*{margin-top:var(--space-4)}
.stack--tight>*+*{margin-top:var(--space-2)}
.grid{display:grid;gap:var(--card-gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (width <= 1024px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (width <= 767px){.section{padding-block:var(--section-pad-mobile)}.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ---------- type ---------- */
.eyebrow{font-size:var(--fs-nav);text-transform:uppercase;color:var(--grey-600);font-weight:var(--fw-regular);line-height:var(--lh-tight)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-tight);text-transform:uppercase;font-weight:var(--fw-regular);color:var(--ink)}
.h2 .accent,.hero .accent{text-transform:none}
.h2 .accent{color:var(--red)}
.h2--sm{font-size:var(--fs-h2-sm)}
.h3{font-size:var(--fs-xl);line-height:var(--lh-tight);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--ink)}
.h4{font-size:var(--fs-lg);line-height:var(--lh-tight);color:var(--ink);font-weight:var(--fw-regular)}
.lead{font-size:var(--fs-md);color:var(--grey-600)}
.body{color:var(--grey-600)}
.body strong,.body b{color:var(--ink)}
.kicker{font-family:var(--font-accent);color:var(--red);font-size:var(--fs-xl);line-height:var(--lh-tight)}
.on-dark{color:var(--paper)}
.on-dark .body,.on-dark .lead,.on-dark .eyebrow{color:var(--paper)}
.on-dark .h2{color:var(--paper)}
.on-dark .accent{color:var(--grey-300)}
.body a:not(.btn),.prose a:not(.btn){color:var(--link);text-decoration:underline}
.body a:not(.btn):hover,.prose a:not(.btn):hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--btn-w);height:var(--btn-h);padding-inline:var(--space-4);border-radius:var(--radius-btn);background:var(--red);color:var(--paper);font-weight:var(--fw-bold);font-size:var(--fs-base);line-height:1;text-align:center;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--grey-300);color:var(--black)}
.btn:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
.btn--secondary{background:var(--grey-300);color:var(--black)}
.btn--secondary:hover{background:var(--red);color:var(--paper)}
.btn--secondary:focus-visible{outline-color:var(--red)}
@media (width <= 767px){.btn{min-width:var(--btn-w-mobile)}.btn--wide-mobile{width:100%}}

/* ---------- promo bar ---------- */
.promo-bar{background:var(--grey-300);color:var(--ink);text-align:center;padding:12.5px var(--gutter);font-size:var(--fs-md);font-weight:var(--fw-medium);line-height:var(--lh-body)}
.promo-bar p{margin:0}
@media (width <= 767px){.promo-bar{font-size:var(--fs-base);padding-block:var(--space-2)}}

/* ---------- header + nav (live 2026-09-07: logo 230 | nav 22px | "Free Quote! Call:" 24 over phone 30 | BBB badge 209x83; row 129px on the wide container) ---------- */
.site-header{background:var(--paper)}
.site-header .inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.utility-bar{display:none;font-size:var(--fs-base);color:var(--ink)}
.utility-bar .inner{display:flex;justify-content:space-between;align-items:center;padding-block:var(--space-2)}
.utility-bar a{color:var(--ink);font-weight:var(--fw-bold)}
.logo-row--mobile{display:none}
.logo-row .inner{display:flex;justify-content:center;padding-block:var(--space-4)}
.logo-row img{width:var(--logo-w-mobile);height:auto}
.logo-desktop img{width:var(--logo-w);height:auto}
.site-header .nav-row{max-width:var(--container-wide);padding-inline:var(--space-4) var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:0}
.nav-row nav{display:flex;align-items:center;gap:var(--space-4)}
.nav-list{display:flex;gap:0}
.nav-list a{display:inline-block;padding:var(--space-2) var(--space-3);font-size:var(--fs-nav);letter-spacing:var(--ls-nav);color:var(--ink);font-weight:var(--fw-regular)}
.nav-list a:hover{font-weight:var(--fw-bold)}
.nav-list a[aria-current="page"]{font-weight:var(--fw-bold);text-decoration:underline}
.nav-cta{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);line-height:var(--lh-tight);white-space:nowrap;margin:0}
.nav-cta .label{font-size:var(--fs-lg)}
.nav-cta a{font-size:var(--fs-xl);color:var(--ink);font-weight:var(--fw-regular);margin-top:var(--space-1)}
.nav-cta a:hover{color:var(--red)}
.badge--header{width:209px;height:auto;flex:none}
.badge--header img{width:100%;height:auto}
.menu-btn{display:none;align-items:center;gap:var(--space-2);height:44px;padding-inline:var(--space-2);font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--ink);border-radius:var(--radius-btn)}
.menu-btn svg{width:28px;height:28px}
.drawer{display:none}
.menu-btn--row{display:none}
.hero-badge{display:none}
@media (width <= 1024px){
  /* live mobile (iPhone UA, 2026-09-07): promo bar first, then logo + hamburger on one row; no utility bar; the BBB badge sits in the hero */
  .site-header{display:flex;flex-direction:column}
  .promo-bar{order:-1}
  .utility-bar{display:none}
  .logo-row--mobile{display:block}
  .logo-row .inner{justify-content:center;position:relative}
  .menu-btn--row{display:inline-flex;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);width:44px;justify-content:center}
  .logo-desktop{display:none}
  .site-header .nav-row{display:none}
  .nav-list,.nav-cta--desktop,.badge--header{display:none}
  .hero-badge{display:block;width:209px;max-width:60%}
  .hero-badge img{width:100%;height:auto;border-radius:var(--radius-img)}
  .drawer{display:block;background:var(--ink);padding:var(--space-3) var(--gutter);overflow:hidden;max-height:0;transition:max-height var(--dur-base) var(--ease);padding-block:0}
  .drawer.is-open{max-height:600px;padding-block:var(--space-3)}
  .drawer a{display:block;padding:var(--space-4) 0;font-size:var(--fs-md);letter-spacing:var(--ls-nav);color:var(--paper)}
  .drawer a[aria-current="page"]{text-decoration:underline}
  .drawer .btn{margin-top:var(--space-3);width:100%}
}
@media (width >= 1025px){.nav-cta--mobile{display:none}}

/* ---------- hero (live: 1200x430 overlay panel, everything centred, no button) ---------- */
.hero{position:relative;background-size:cover;background-position:50% 50%;color:var(--paper);padding-block:0}
@media (width >= 1025px) and (hover:hover){.hero{background-attachment:fixed}}
/* Phone backgrounds (hero inline, other sections once site.js applies data-bg): a 960w AVIF/WebP set in --bg-sm (inline, per page) replaces the 1920w/2880w image-set. !important because the inline style would otherwise win. Preloaded from <head> with fetchpriority=high (Phase 7 LCP fix). */
@media (width <= 767px){[style*="--bg-sm"]{background-image:var(--bg-sm) !important}}
.hero>.inner{max-width:var(--container);margin-inline:auto}
@media (width >= 1025px){.hero>.inner{padding-inline:0}} /* live: the 1200px overlay panel sits at x=120 on every template; the phone keeps the gutter (round 2) */
.hero .copy{background:var(--overlay);padding:var(--space-6) var(--space-4);min-height:430px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--space-4)}
.hero--short .copy{min-height:326px;max-width:600px;align-items:flex-start;text-align:left;padding:65px var(--space-4)}
.hero--services .copy{min-height:232px}
.hero--short.hero--services h1{font-size:clamp(2rem,1.2rem + 2vw,2.5rem)} /* services carries both classes; this must beat the short-hero floor */ /* live: 40px both lines (round 2); literal clamp for the design check */
.hero--short.hero--services h1 .accent{display:block;font-size:clamp(2rem,1.2rem + 2vw,2.5rem)}
.hero--city h1{font-size:clamp(2.25rem,1rem + 5vw,4.375rem)} /* live city H1 keeps a 36px phone floor (round 2) */
.hero--short .copy{justify-content:flex-start} /* live: copy hangs from the 65px top pad, not centred (round 2) */
.hero--short h1{font-size:clamp(3.25rem,1rem + 4vw,4.0625rem);line-height:var(--lh-tight)} /* live: 65/65 on gallery + reviews (round 2) */
.hero--short .pre-line{line-height:normal;margin-bottom:var(--space-3)} /* live: the script line keeps Rock Salt's natural 83px box; H1 top lands 166px into the row (round 2) */
.copy h1{font-weight:var(--fw-bold);color:var(--paper);margin:0}
.copy h1 .accent{font-weight:var(--fw-regular)}
.sub-line{font-size:var(--fs-lg);text-transform:uppercase;color:var(--paper);max-width:var(--measure)}
.pre-line{font-family:var(--font-accent);font-size:var(--fs-h2-sm);line-height:var(--lh-tight)}
@media (width <= 767px){.hero .copy{min-height:331px;padding:var(--space-5) var(--space-3)}}

/* ---------- about (live: centred heading, two 600px text columns) ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap);margin-top:var(--space-4)}
.two-col .stack>*+*{margin-top:var(--space-4)}
@media (width <= 767px){.two-col{grid-template-columns:1fr}}
.about .tail{font-size:var(--fs-lg);font-weight:var(--fw-bold);font-style:italic;text-transform:uppercase;text-align:center;margin-top:var(--space-4);color:var(--ink)}
.lead-copy .body{font-size:var(--fs-md)}

/* ---------- aspect ratios for measured photo frames ---------- */
.ar-676-249 img{aspect-ratio:676/249}.ar-676-284 img{aspect-ratio:676/284}.ar-483-684 img{aspect-ratio:483/684}.ar-300-466 img{aspect-ratio:300/466}.ar-300-675 img{aspect-ratio:300/675}.ar-300-402 img{aspect-ratio:300/402}.ar-600-521 img{aspect-ratio:600/521}
[class*="ar-"] img{width:100%;object-fit:cover}

/* ---------- services industries (live: 600px photo | three white rows, red line icon 52px, shadow) ---------- */
.industry-split{display:grid;grid-template-columns:600px 1fr;gap:0;align-items:start}
.industry-photo{max-width:600px}
.industry-list{display:grid;gap:var(--space-3);padding-block:var(--space-2) 0;position:relative;z-index:1;margin-left:-100px;margin-right:-20px} /* live: 720px rows overlap the photo by 100px and run 20px past the container (measured 2026-09-07) */
.industry-row{display:grid;grid-template-columns:117px 1fr;align-items:center;background:var(--paper);border:1px solid var(--grey-600);border-radius:var(--radius-img);box-shadow:var(--shadow-card);padding:0 var(--space-3) 0 0;min-height:149px}
.industry-icon{display:grid;place-items:center;color:var(--red)}
.industry-icon svg{width:52px;height:69px}
.industry-row .h4{font-size:var(--fs-md);font-weight:var(--fw-bold);text-transform:uppercase;line-height:var(--lh-tight)}
.industry-row .caption{color:var(--red);font-size:var(--fs-sm);font-weight:var(--fw-bold);font-style:italic;text-transform:uppercase;line-height:var(--lh-tight);margin-top:var(--space-1)}
.industry-row .body{margin-top:var(--space-2);line-height:var(--lh-tight)}
@media (width <= 1024px){.industry-split{grid-template-columns:1fr}.industry-photo{max-width:none}.industry-list{margin:0}}
@media (width <= 767px){.industry-row{grid-template-columns:1fr;justify-items:center;text-align:center;padding:var(--space-3);row-gap:var(--space-2)}.industry-row .h4{font-size:var(--fs-nav)}.industry-photo{max-width:none;margin-inline:calc(-1 * var(--gutter))}.industry-photo img{aspect-ratio:39/10;object-fit:cover;width:100%}} /* live phone: centred cards with the icon on top, 390x100 photo strip (measured 2026-09-07) */

/* ---------- column groups (live city "go-to for": four 300px columns, 24px headings) ---------- */
.col-groups{margin-top:var(--space-5)}
.col-groups .h4{text-transform:uppercase}

/* ---------- before/after compare (live: Duda before-and-after widget, drag to reveal) ---------- */
.baf{margin:0;position:relative}
.baf-frame{position:relative;overflow:hidden;aspect-ratio:520/408}
.baf-frame picture,.baf-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.baf-frame .baf-after{clip-path:inset(0 0 0 var(--pos,50%))}
.baf-handle{position:absolute;top:50%;left:var(--pos,50%);width:45px;height:45px;border:4px solid var(--paper);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none} /* live: 45px ring, 4px white, two white arrows, no split line (measured 2026-09-07) */
.baf-handle::before,.baf-handle::after{content:"";position:absolute;top:50%;width:0;height:0;border:7px solid transparent;transform:translateY(-50%)}
.baf-handle::before{right:calc(50% + 4px);border-left:0;border-right:9px solid var(--paper)}
.baf-handle::after{left:calc(50% + 4px);border-right:0;border-left:9px solid var(--paper)}
.baf:has(.baf-range:focus-visible) .baf-handle{outline:3px solid var(--focus);outline-offset:3px}
.baf-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y} /* the whole frame is the drag target; the ring above shows the position */

/* ---------- photos with the live red edge (right + bottom 3px, 10px radius) ---------- */
.photo-edge img,.photo.photo-edge{border-right:var(--photo-edge);border-bottom:var(--photo-edge);border-radius:var(--radius-img)}

/* ---------- pricing cards (live: image 282x160 cover, size 30/700, kind 22/400, price Rock Salt 30 + 20/500 unit, subhead 20/700 italic) ---------- */
.pricing{padding-top:0;padding-bottom:var(--space-4)}
.card{padding-right:var(--card-gap)}
.card picture{width:100%;max-width:282px}
.card img{width:100%;aspect-ratio:282/160;object-fit:cover}
.card .size{font-size:var(--fs-xl);font-weight:var(--fw-bold);text-transform:uppercase;line-height:var(--lh-tight);color:var(--ink);margin-top:var(--space-4)}
.card .kind{font-size:var(--fs-nav);text-transform:uppercase;line-height:var(--lh-tight);color:var(--ink)}
.card .price{margin-top:var(--space-4);line-height:var(--lh-body);color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-1)}
.card .price .amt{font-family:var(--font-accent);color:var(--red);font-size:var(--fs-xl)}
.card .price small{font-size:var(--fs-md);font-weight:var(--fw-medium);text-transform:uppercase;white-space:nowrap}
.card .sub{font-size:var(--fs-md);font-weight:var(--fw-bold);font-style:italic;color:var(--black);margin-top:var(--space-4)}
.card .body{margin-top:var(--space-2)}
.card .btn{margin-top:var(--space-4)}
@media (width <= 767px){.card{padding-right:0}.card .btn{width:100%}}

/* ---------- call cta band (live: "Call for a Free Quote:" Rock Salt red, number Red Rose 50 bold) ---------- */
.call-cta{text-align:center;padding-block:var(--band-pad)}
.call-cta .h2{color:var(--ink)}
.phone-link{color:var(--ink)}
.call-cta .h2 .phone-link{color:var(--grey-600);font-weight:var(--fw-regular)}
.contact .phone-link,.on-dark .phone-link{color:var(--grey-300)}
.phone-link:hover{color:var(--red)}

/* ---------- image band ---------- */
.image-band{min-height:329px;padding-block:var(--image-band-pad);background-position:50% 100%}
@media (width <= 767px){.image-band{min-height:130px;padding-block:var(--space-3);background-position:50% 0}} /* live phone: the band shows the top of the photo (measured 2026-09-07) */

/* ---------- tips (live: centred heading, four columns; 61px red hexagon with the Rock Salt number over its top edge) ---------- */
.tips .head{margin-bottom:var(--space-5)}
.tips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--card-gap)}
.tip-badge{position:relative;display:block;width:61px;height:96px}
.tip-badge svg{position:absolute;left:0;bottom:0;width:61px;height:61px;color:var(--red)}
.tip-badge .num{position:absolute;left:16px;top:0;font-family:var(--font-accent);font-size:var(--fs-h2);line-height:1;color:var(--black)}
.tip .h4{margin-top:var(--space-3);text-transform:uppercase}
.tip .body{margin-top:var(--space-2)}
@media (width <= 1024px){.tips-grid{grid-template-columns:1fr 1fr}}
@media (width <= 767px){.tips-grid{grid-template-columns:1fr}}

/* ---------- black band (live: heading 32/400 + line left, one 212x52 red button right) ---------- */
.black-band .inner{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5)}
.black-band .copy{max-width:882px}
.black-band .h3{color:var(--paper);font-weight:var(--fw-regular)}
.black-band .body{color:var(--paper)}
.black-band .btn{flex:none}
@media (width <= 767px){.black-band .inner{flex-direction:column;align-items:center;text-align:center}}

/* ---------- safety (live: centred H2; 467px text column; 676x249 photo with the red "Reserve" shape at its top-right, 37px overhang) ---------- */
.safety .head{margin-bottom:var(--space-4)}
.safety-grid{display:grid;grid-template-columns:467px 1fr;gap:var(--space-5);align-items:start}
.safety .lead-in{font-weight:var(--fw-bold);font-style:italic;color:var(--ink)}
.safety .photo-wrap{position:relative;padding-right:var(--space-4);margin-top:var(--space-4)}
.safety picture{max-width:676px}
.safety img{width:100%;object-fit:cover}
.reserve-badge{position:absolute;right:-17px;top:-40px;width:149px;height:155px;padding:var(--space-4) var(--space-3);display:grid;place-items:center;isolation:isolate;color:var(--paper);font-size:var(--fs-md);font-weight:var(--fw-bold);font-style:italic;line-height:var(--lh-tight);text-align:center}
.reserve-badge svg{position:absolute;inset:0;width:100%;height:100%;color:var(--red);z-index:-1;transition:color var(--dur-fast) var(--ease-out)}
.reserve-badge:hover svg{color:var(--black)}
.reserve-badge:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.safety-grid--photo-left{grid-template-columns:1fr 467px}
.safety-grid--w483{grid-template-columns:1fr calc(483px + var(--space-4))} /* city sizes-copy: 660px copy | 483x684 photo, paragraphs 16/32 (measured live 2026-09-07) */
.safety-grid--w483 .body{line-height:var(--lh-loose)}
.safety-grid--photo-left .photo-wrap{padding-right:0;padding-left:var(--space-4)}
.reserve-badge--tl{right:auto;left:-15px;top:-10px}
.contact .body--lg{font-size:var(--fs-nav)}
@media (width <= 1024px){.safety-grid,.safety-grid--photo-left{grid-template-columns:1fr}.safety .photo-wrap{padding:0}.reserve-badge{right:0}.reserve-badge--tl{left:0}}

/* ---------- faq (live: centred intro; 72px #333 bars, radius 0, 25px question, white circle with red chevron; all closed) ---------- */
.faq-intro{padding-block:var(--band-pad)}
.faq-intro .h2{text-transform:none;line-height:normal} /* live: Rock Salt's normal line box (119px at 50px) makes the row 184px (round 2) */
.faq{padding-top:0;padding-bottom:var(--space-7)}
.accordion>li+li{margin-top:var(--space-2)}
.accordion h3{font-size:var(--fs-lg);font-weight:var(--fw-regular);line-height:var(--lh-tight)}
.accordion button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--space-3);text-align:left;background:var(--ink);color:var(--paper);padding:18px var(--space-4);min-height:72px}
.accordion button:focus-visible{outline:3px solid var(--red);outline-offset:-4px}
.accordion .arrow{width:24px;height:24px;flex:none;border-radius:50%;background:var(--paper);color:var(--red);display:grid;place-items:center;transition:transform var(--dur-base) var(--ease)}
.accordion button[aria-expanded="true"] .arrow{transform:rotate(180deg)}
.accordion .panel{background:var(--paper);padding:var(--space-4);color:var(--ink)}
.accordion .panel[hidden]{display:none}


/* ---------- cities band (live: photo under a 36% ink veil, solid red 1200px panel, centred heading, four centred columns) ---------- */
.cities{background-color:var(--grey-300);background-position:50% 50%;position:relative;isolation:isolate}
.cities::before{content:"";position:absolute;inset:0;background:var(--overlay-light);z-index:-1}
.cities>.inner{background:var(--red);padding:var(--space-6) var(--space-4);border-radius:0;text-align:center}
.cities .h2,.cities .h2 .accent{color:var(--paper)}
.cities .h2 .accent{font-size:var(--fs-h2);font-weight:var(--fw-medium)}
.cities .sub{font-size:var(--fs-nav);color:var(--paper);margin-top:var(--space-3)}
.city-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-1) var(--space-4);margin-top:var(--space-5);padding-inline:var(--space-5)}
.city-list li{color:var(--paper);text-align:center}
.city-list a{color:var(--paper);font-weight:var(--fw-bold);font-style:italic}
.city-list a:hover{text-decoration:underline}
@media (width <= 767px){.city-list{grid-template-columns:1fr;padding-inline:0}}

/* ---------- testimonials / reviews ---------- */
.testimonials .inner{text-align:center}
.testimonials .ndrsl-widget{margin-top:var(--space-5);min-height:268px}
.reviews-wall .ndrsl-widget{min-height:400px}

/* ---------- industries / services ---------- */
.industry{background:var(--paper);padding:var(--space-4)}
.industry picture,.industry img{border-radius:var(--radius-img);aspect-ratio:16/9;object-fit:cover;width:100%}
.industry .h4{margin-top:var(--space-3)}
.industry .caption{color:var(--red);font-size:var(--fs-md);margin-top:var(--space-1)}
.industry .body{margin-top:var(--space-2)}
.sizes .size-item .h3{font-size:var(--fs-nav)}
.sizes .size-item .h3 .accent{font-size:var(--fs-xl);color:var(--red);text-transform:none}

/* ---------- gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gutter);padding:var(--space-4) var(--space-3) var(--space-2)} /* live: 288px square tiles, 10px gutter, 15px inset (round 2) */
.gallery-grid picture{position:absolute;inset:0}
.gallery-grid button{display:block;width:100%;aspect-ratio:1;overflow:hidden;position:relative}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-fast) var(--ease-out)}
.gallery-grid button:hover img,.gallery-grid button:focus-visible img{transform:scale(var(--zoom-hover))}
.gallery-grid button:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.before-after{display:grid;grid-template-columns:repeat(2,minmax(0,520px));justify-content:center;gap:calc(var(--space-7) * 2)} /* live: two 520x408 pairs, 100px apart, centred (round 2) */
@media (width <= 1024px){.gallery-grid{grid-template-columns:repeat(3,1fr)}.before-after{grid-template-columns:1fr;gap:var(--space-5)}}
@media (width <= 767px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- lightbox + modal (native dialog) ---------- */
dialog{border:0;padding:0;background:transparent;max-width:min(92vw,960px);color:var(--paper)}
dialog::backdrop{background:var(--overlay)}
.modal-panel{background:var(--ink);border-radius:var(--radius-img);padding:var(--space-5);box-shadow:var(--shadow-modal);max-width:480px;margin:auto;text-align:center;position:relative}
.modal-panel h2{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--paper);text-transform:none;line-height:var(--lh-tight)}
.modal-panel .btn{margin-top:var(--space-4);font-family:var(--font-accent);font-weight:var(--fw-regular);font-size:var(--fs-md)}
.modal-close{position:absolute;top:var(--space-2);right:var(--space-2);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--paper);font-size:var(--fs-lg)}
.modal-close:hover{background:var(--overlay)}
.modal-close:focus-visible,.lightbox button:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
.lightbox .frame{position:relative}
.lightbox img{max-height:80vh;width:auto;max-width:100%;margin:auto}
.lightbox .nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.lightbox .nav button{pointer-events:auto;width:44px;height:44px;border-radius:50%;background:var(--overlay);color:var(--paper);font-size:var(--fs-lg)}
.lightbox .modal-close{background:var(--overlay)}
dialog[open]{animation:fade var(--dur-base) var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- contact band (live: photo under a 94% ink veil, centred copy 899px, then a full-bleed row of four 360px photo tiles) ---------- */
.contact{background-color:var(--ink-warm);background-position:50% 50%;padding-block:var(--contact-pad) 0;position:relative;isolation:isolate}
.contact::before{content:"";position:absolute;inset:0;background:var(--overlay-heavy);z-index:-1}
.contact .copy{max-width:899px;margin-inline:auto;padding-bottom:var(--contact-pad);text-align:center}
.contact .h2{color:var(--paper)}
.contact .h2 .accent{color:var(--grey-300)} /* live paints this line brand red; 2.4:1 on the dark band fails AA large text, so it stays light (round 1 rule, kept round 2) */
.contact .body a{color:var(--grey-300)}
.contact .body{color:var(--paper)}
.contact .body--xl{font-size:var(--fs-xl);line-height:var(--lh-tight)}
.contact .body--xl a{color:var(--grey-300)}
.contact .photo-strip{margin:0;gap:0}
.contact .photo-strip a{aspect-ratio:1;border-radius:0}
@media (width <= 767px){.contact{padding-block:var(--space-7) 0}}

/* ---------- legacy (live: 300px photo | copy + button | copy, 3px grey rule between the text columns, H2 32/700) ---------- */
.legacy-grid{display:grid;grid-template-columns:300px 1fr 1fr;gap:0}
.legacy-grid .photo-col{width:300px;padding-right:var(--card-gap)}
.legacy-grid .photo-col img{width:100%;object-fit:cover;object-position:100% 50%}
.legacy-grid .col-a{padding:var(--space-2) 17px var(--space-2) var(--card-gap);border-right:3px solid var(--grey-300)}
.legacy-grid .col-b{padding:var(--space-2) 0 var(--space-2) 17px}
.legacy .h2{font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.legacy-grid--photo-right{grid-template-columns:1fr 1fr calc(300px + var(--card-gap))}
.legacy-grid--photo-right .photo-col{width:auto;padding-right:0;padding-left:var(--card-gap)}
.legacy-grid--photo-right .col-a{padding-left:0}
.legacy-grid--photo-right .col-b{padding-right:var(--card-gap)}
@media (width <= 1024px){.legacy-grid,.legacy-grid--photo-right{grid-template-columns:1fr 1fr}.legacy-grid--photo-right .photo-col{padding-left:0}.legacy-grid .photo-col{grid-column:1/-1;width:100%;padding-right:0;margin-bottom:var(--space-4)}.legacy-grid .photo-col img{aspect-ratio:16/9;object-position:50% 50%}.legacy-grid .col-a{padding-left:0}}
@media (width <= 767px){.legacy-grid,.legacy-grid--photo-right{grid-template-columns:1fr}.legacy-grid .col-a{border-right:0;padding:0}.legacy-grid .col-b{padding:var(--space-4) 0 0}}

/* ---------- sticky call button (live: fixed flush bottom-right, 212x52, site-wide; post-launch ruling 2026-09-07: 25px in from both edges + iPhone safe-area, full radius, subtle shadow) ---------- */
.sticky-cta{position:fixed;right:25px;bottom:calc(25px + env(safe-area-inset-bottom,0px));z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.25)}
@media print{.sticky-cta{display:none}}

/* ---------- footer (live: four 300px columns, no gap; wordmark 183 + BBB badge 159; NAP column carries the two badge lines and the email) ---------- */
.site-footer{background:var(--ink);color:var(--paper)}
.site-footer>section:first-child{padding-top:var(--space-8);padding-inline:var(--gutter)}
.site-footer>section:first-child>.inner{max-width:var(--container);margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--card-gap);padding-bottom:var(--space-5)}
.site-footer a{color:var(--paper)}
.site-footer a:hover{text-decoration:underline}
.site-footer .nav a{display:block;padding:3px 0;letter-spacing:var(--ls-nav)}
.site-footer address{font-style:normal;line-height:var(--lh-body)}
.site-footer .badges{margin-block:var(--space-3);color:var(--paper)}
.site-footer h3{font-size:var(--fs-base);text-transform:capitalize;font-weight:var(--fw-regular);margin-bottom:var(--space-2)}
.site-footer dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3)}
.site-footer dt,.site-footer dd{margin:0}
.site-footer .brand img{width:var(--logo-w-mobile);height:auto}
.site-footer .badge--footer{margin-top:var(--space-3);width:159px}
.site-footer .badge--footer img{width:100%}
.copyright{background:var(--ink);color:var(--grey-300);font-size:var(--fs-xs);padding:var(--space-3) var(--gutter);border-top:1px solid var(--grey-600)}
.copyright .inner{max-width:var(--container);margin-inline:auto;display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;align-items:baseline}
.copyright .vgm-credit{font-size:var(--fs-xs);letter-spacing:normal}
@media (width <= 1024px){.site-footer>section:first-child>.inner{grid-template-columns:1fr 1fr}}
@media (width <= 767px){.site-footer>section:first-child{padding-top:var(--space-7)}.site-footer>section:first-child>.inner{grid-template-columns:1fr}.copyright .inner{justify-content:center;text-align:center}}

/* ---------- contact photo strip (source: four linked photo tiles under the CTA; live home row is 4 x 360px squares, full bleed) ---------- */
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gutter);margin-top:var(--space-5)}
.photo-strip a{display:block;aspect-ratio:4/3;background-size:cover;background-position:50% 50%;border-radius:var(--radius-img);transition:transform var(--dur-fast) var(--ease-out)}
.photo-strip a:hover,.photo-strip a:focus-visible{transform:scale(var(--zoom-hover))}
@media (width <= 767px){.photo-strip{grid-template-columns:1fr 1fr}}

/* ---------- VGM design credit (from templates/vgm-credit.html; --vgm-footer-color is set inline on the <p> so verify-design can read it) ---------- */
.vgm-credit{--vgm-footer-color:#c5c5c5;--vgm-hover-track:normal;letter-spacing:normal;--vgm-weight-hover:800;--vgm-row-gap:.35em;--vgm-ease:cubic-bezier(.23,1,.32,1);font-size:inherit;font-family:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--vgm-footer-color);margin:0;display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.vgm-bsr{position:relative;display:inline-block;cursor:default}
.vgm-bsr-brand,.vgm-bsr-rated,.vgm-bsr-label{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--vgm-footer-color)}
.vgm-bsr-brand,.vgm-bsr-label{white-space:nowrap}
.vgm-bsr-brand{text-decoration:none;line-height:1.1;transition:font-weight .22s var(--vgm-ease),letter-spacing .22s var(--vgm-ease)}
.vgm-bsr-brand:focus-visible{outline:2px solid #FBBC04;outline-offset:3px;border-radius:2px}
.vgm-bsr-top{position:absolute;bottom:100%;left:0;margin-bottom:var(--vgm-row-gap);line-height:1;display:flex;align-items:center;gap:.45em;white-space:nowrap;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .32s var(--vgm-ease),transform .32s var(--vgm-ease)}
.vgm-bsr-star{font-size:1em;line-height:1;display:inline-block;font-family:"Segoe UI Symbol","Apple Color Emoji","Noto Color Emoji",sans-serif;color:#FBBC04!important;opacity:0;transform:translateY(-8px) scale(.6);transition:opacity .28s var(--vgm-ease),transform .28s var(--vgm-ease),filter .28s}
.vgm-bsr-bottom{position:absolute;top:100%;left:0;margin-top:var(--vgm-row-gap);line-height:1;display:flex;align-items:center;gap:.4em;white-space:nowrap;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .35s var(--vgm-ease),transform .35s var(--vgm-ease)}
.vgm-bsr-dot{width:.7em;height:.7em;border-radius:50%;display:inline-block;flex-shrink:0;background:linear-gradient(135deg,#4285F4 0%,#34A853 33%,#FBBC05 66%,#EA4335 100%)!important}

/* Reveal — keyboard and touch always; pointer only where hover really exists. */
.vgm-bsr:focus-within .vgm-bsr-brand,.vgm-bsr.is-active .vgm-bsr-brand{font-weight:var(--vgm-weight-hover);letter-spacing:var(--vgm-hover-track,inherit)}
.vgm-bsr:focus-within .vgm-bsr-top,.vgm-bsr.is-active .vgm-bsr-top,.vgm-bsr:focus-within .vgm-bsr-bottom,.vgm-bsr.is-active .vgm-bsr-bottom{opacity:1;transform:translateY(0)}
.vgm-bsr:focus-within .vgm-bsr-bottom,.vgm-bsr.is-active .vgm-bsr-bottom{transition-delay:.38s}
.vgm-bsr:focus-within .vgm-bsr-star,.vgm-bsr.is-active .vgm-bsr-star{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 0 3px rgba(251,188,4,.6));transition-delay:calc(var(--i) * 70ms)}
@media (hover:hover){
.vgm-bsr:hover .vgm-bsr-brand{font-weight:var(--vgm-weight-hover);letter-spacing:var(--vgm-hover-track,inherit)}
.vgm-bsr:hover .vgm-bsr-top,.vgm-bsr:hover .vgm-bsr-bottom{opacity:1;transform:translateY(0)}
.vgm-bsr:hover .vgm-bsr-bottom{transition-delay:.38s}
.vgm-bsr:hover .vgm-bsr-star{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 0 3px rgba(251,188,4,.6));transition-delay:calc(var(--i) * 70ms)}
}
.vgm-credit[data-vgm-align="right"] .vgm-bsr-top,.vgm-credit[data-vgm-align="right"] .vgm-bsr-bottom{left:auto;right:0}
@media (max-width:480px){.vgm-bsr-top,.vgm-bsr-bottom,.vgm-bsr-label{white-space:normal}.vgm-bsr-top,.vgm-bsr-bottom{max-width:14em}}
@media (prefers-reduced-motion:reduce){.vgm-bsr-top,.vgm-bsr-bottom,.vgm-bsr-star{transform:none!important}.vgm-bsr-star,.vgm-bsr-bottom{transition-delay:0s!important}.vgm-bsr-brand{transition:none}}
@media (forced-colors:active){.vgm-bsr-star{color:CanvasText!important}.vgm-bsr-dot{background:CanvasText!important;forced-color-adjust:none}}

/* ---------- phone (round 2, measured on the live iPhone layout 2026-09-07; round 1's phone measurement never completed) ---------- */
@media (width <= 767px){
  .promo-bar{font-size:var(--fs-xs-2)}
  .promo-tail{display:none} /* live phone copy stops at "$325" (Chase 2026-09-07: match live) */
  .logo-row .inner{padding-block:var(--space-5)}
  .logo-row img{width:166px}
  .eyebrow{font-size:var(--fs-sm)}
  .about .tail{font-size:var(--fs-sm)}
  .hero--short{padding-block:var(--space-7) var(--space-9)}
  .hero--short .copy{min-height:245px;padding:var(--space-2) var(--space-3)}
  .hero--short.hero--services{padding-block:var(--space-7) var(--space-8)}
  .hero--short.hero--services .copy{min-height:192px}
  .hero--city h1 .accent{font-size:clamp(1.8125rem,1.2rem + 2vw,2.25rem)} /* literal clamp mirrors --fs-h2-sm for the design check */
  .black-band .h3{font-size:var(--fs-lg)}
  .legacy .h2{font-size:var(--fs-lg)}
  .legacy-grid .photo-col{margin-inline:calc(-1 * var(--gutter));width:auto}
  .legacy-grid .photo-col img{aspect-ratio:390/244;border-radius:var(--radius-img)}
  .safety .photo-wrap{padding-inline:var(--space-4)}
  .safety .photo-wrap img{aspect-ratio:1}
  .safety-grid--w483 .body{line-height:var(--lh-body)}
  .lead-copy .body{font-size:var(--fs-sm-2)}
  [data-section="size-guide"] .body{font-size:var(--fs-xs-2)}
  .accordion h3{font-size:var(--fs-lg)}
  .city-list{font-size:var(--fs-xs-2);line-height:var(--lh-tight);gap:0}
  .contact .body--xl{font-size:var(--fs-lg)}
  .contact .body--lg{font-size:var(--fs-sm)}
  .before-after{gap:0}
  .baf-frame{aspect-ratio:4/3}
  .gallery-grid{gap:0;padding-inline:0}
  .site-footer .brand{text-align:center}
  .site-footer .brand img{width:262px}
  .site-footer .badge--footer{width:179px;margin-inline:auto}
  .site-footer h3{font-size:var(--fs-lg)}
}

/* ---------- footer "Serving:" line (Phase 5 internal-link ruling, Chase 2026-09-07) ---------- */
.site-footer .serving{font-size:var(--fs-xs);line-height:var(--lh-body);margin:var(--space-2) 0 0;color:var(--grey-300)}
.site-footer .serving a{color:var(--grey-300)}
.site-footer .serving a:hover{text-decoration:underline}