/* Steve R. Rauch Inc. - rebuilt front-end.
   Palette taken from the CMS: red #ed1c24, blue #00648d, grey band #dbdbdb,
   body ink #444. No webfonts: the CMS declared 24 @font-face families and used
   none of them, while its headings asked for Montserrat, which was never
   loaded - so a system stack is what the live site already rendered. */

:root {
  /* The brand red stays the ACCENT (rules, borders, the hero emphasis). White
     on it measures 4.38:1, just under the 4.5 AA floor for normal text, so
     anything with white LABELS on a red fill uses --red-ink instead: 5.89:1.
     Measured by walking the DOM, not chosen by eye. */
  --red: #ed1c24;
  --red-ink: #c8151c;          /* red dark enough for text on white (AA) */
  --blue: #00648d;
  --ink: #333;
  --ink-soft: #555;
  --band: #f2f6f8;
  --grey: #dbdbdb;
  --black: #111;
  --white: #fff;
  --line: #e2e6e9;
  --shell: 1180px;
  --gut: clamp(16px, 4vw, 32px);
  --head-real: 96px;           /* JS overwrites with the measured height */
  --sans: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
  --shadow: 0 2px 10px rgba(0,0,0,.10);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--white);
}

img { max-width: 100%; height: auto; }

a { color: var(--red-ink); }
a:hover, a:focus { color: var(--black); }

.sr-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }

.sr-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--red-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.sr-skip:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------- masthead */

.sr-head {
  position: sticky; top: 0; z-index: 1200;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
/* The masthead carries more than the content column can hold: three brand
   logos (314px), six nav items (597px), a phone number and a CTA (323px), plus
   gaps - 1288px measured, against a 1180px content shell. Capped at the content
   width the bar wrapped to two rows at EVERY desktop size. So the header gets
   its own wider shell; the content column stays at 1180. */
.sr-head .sr-shell { max-width: 1400px; }
.sr-head-in {
  display: flex; align-items: center; gap: 18px;
  min-height: 84px; padding-top: 8px; padding-bottom: 8px;
}
.sr-brands { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.sr-brands img { display: block; height: 46px; width: auto; }
.sr-brands a { display: block; line-height: 0; }

.sr-head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.sr-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--blue); text-decoration: none; white-space: nowrap;
}
.sr-tel:hover, .sr-tel:focus { color: var(--red-ink); }
.sr-tel svg { width: 18px; height: 18px; flex: 0 0 auto; }

.sr-cta {
  display: inline-block; background: var(--red-ink); color: #fff;
  padding: 11px 20px; border-radius: var(--radius);
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
.sr-cta:hover, .sr-cta:focus { background: var(--black); color: #fff; }

/* burger - hidden above the nav breakpoint */
.sr-burger {
  display: none;
  width: 46px; height: 46px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
/* Target the ICON span by its own class, never `.sr-burger span`. That selector
   is (0,1,1) and beats `.sr-hp` (0,1,0), so the visually-hidden "Menu" label
   inside the button was given position:relative instead of absolute - staying
   in the flex flow - AND painted as a bar, with its ::before/::after adding two
   more. Six bars in two stacks, and the real icon pushed flush left. */
.sr-burger .sr-bar, .sr-burger .sr-bar::before, .sr-burger .sr-bar::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}
.sr-burger .sr-bar { position: relative; }
.sr-burger .sr-bar::before { position: absolute; left: 0; top: -7px; }
.sr-burger .sr-bar::after  { position: absolute; left: 0; top:  7px; }
html.sr-open .sr-burger .sr-bar { background: transparent; }
html.sr-open .sr-burger .sr-bar::before { transform: translateY(7px) rotate(45deg); }
html.sr-open .sr-burger .sr-bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------- nav */

.sr-nav { flex: 1 1 auto; }
.sr-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; justify-content: flex-end; }
.sr-menu > li { position: relative; }

.sr-menu > li > a, .sr-menu > li > .sr-sub-t {
  display: block; padding: 10px 12px;
  font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  border-radius: var(--radius);
}
.sr-menu > li > .sr-sub-t { display: flex; align-items: center; gap: 6px; }
.sr-menu > li > a:hover, .sr-menu > li > a:focus,
.sr-menu > li > .sr-sub-t:hover, .sr-menu > li > .sr-sub-t:focus { background: #f1f4f6; color: var(--red-ink); }
/* Current page: a soft tinted pill rather than an underline rule. */
.sr-menu > li > a[aria-current="page"] {
  color: var(--red-ink); background: #fdeced;
}

.sr-caret { width: 9px; height: 9px; flex: 0 0 auto; transition: transform .18s ease; }
.sr-has-sub[aria-expanded="true"] .sr-caret { transform: rotate(180deg); }

.sr-sub {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: 100%; left: 0; min-width: 268px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: none; z-index: 20;
}
.sr-sub a {
  display: block; padding: 9px 12px; font-size: 15px;
  color: var(--ink); text-decoration: none; border-radius: 4px;
}
.sr-sub a:hover, .sr-sub a:focus { background: #f1f4f6; color: var(--red-ink); }

/* Keyboard path with no script at all: the <button> is focusable while the
   panel is display:none, focusing it opens the panel, and the links inside then
   hold it open. :focus-within on the links alone can never fire - a
   display:none subtree is not focusable. */
.sr-menu > li:hover > .sr-sub,
.sr-menu > li:focus-within > .sr-sub,
.sr-menu > li > .sr-sub-t[aria-expanded="true"] + .sr-sub { display: block; }

.sr-backdrop { display: none; }

/* ------------------------------------------------------------------- hero */

.sr-hero { position: relative; background: #1b1b1b; }
.sr-hero picture, .sr-hero img { display: block; width: 100%; }
.sr-hero-copy {
  position: absolute; left: 0; right: 0; bottom: 8%;
}
.sr-hero-inner {
  max-width: 920px; margin: 0 auto; padding: 0 var(--gut);
}
.sr-hero-box {
  background: rgba(0,0,0,.62);
  border-left: 12px solid var(--red);
  padding: clamp(14px, 2.4vw, 26px) clamp(16px, 2.6vw, 30px);
  color: #fff;
  font-size: clamp(14px, 1.55vw, 20px);
  line-height: 1.5;
}
/* The generic `h1 { color: var(--red-ink) }` leaked into the hero and put
   #c8151c on the dark scrim at 2.89:1 - under the 3:1 AA floor even for large
   text. It was also inverted from the artwork this heading replaces, where
   "GET THE JOB" is outlined white and "DONE RIGHT." is the red. White base,
   red emphasis: 15.7:1 and 5.6:1 on the same scrim. */
.sr-hero-h1 { color: #fff; margin-bottom: .4em; }
.sr-hero-box em { color: #ff5a61; font-style: normal; font-weight: 700; }

/* ------------------------------------------------------------------ tiles */

.sr-tiles { background: var(--grey); padding: clamp(26px, 4vw, 46px) 0; }
.sr-tilegrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.sr-tilegrid a {
  display: block; line-height: 0; border-radius: var(--radius); overflow: hidden;
  background: #fff; box-shadow: var(--shadow);
}
.sr-tilegrid img { width: 100%; display: block; transition: transform .3s ease; }
.sr-tilegrid a:hover img, .sr-tilegrid a:focus img { transform: scale(1.04); }
.sr-tilegrid a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ------------------------------------------------------------------- main */

main { display: block; }
.sr-main { padding: clamp(26px, 4vw, 48px) 0 clamp(30px, 5vw, 60px); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; }
h1 {
  font-size: clamp(26px, 3.4vw, 34px); color: var(--red-ink);
  text-transform: uppercase; letter-spacing: .01em;
}
.sr-rule { width: 92px; height: 4px; background: var(--red); border: 0; margin: 0 0 26px; }
h2 { font-size: clamp(20px, 2.2vw, 24px); color: var(--blue); }
h3 { font-size: 19px; color: var(--ink); }
p { margin: 0 0 1.05em; }
.sr-main ul, .sr-main ol { margin: 0 0 1.05em; padding-left: 1.3em; }
.sr-main li { margin: .3em 0; }

.sr-prose { max-width: 78ch; }

/* A generic two-or-more-cell CMS row, un-tabled. A <table> will not render
   below its min-content width, so the row has to become a grid to stack. */
.sr-cols {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-items: start;
}

/* Video embeds. The CMS wrote a fixed 794x447 box, which is 794px of iframe on
   a 375px phone; aspect-ratio keeps the 16:9 without any padding-top trick. */
.sr-embed {
  position: relative; width: 100%; max-width: 794px;
  aspect-ratio: 794 / 447; margin: 1.6em 0;
  background: #000; border-radius: var(--radius); overflow: hidden;
}
.sr-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The CMS's viewModal() buttons, with the dead interaction removed. */
.sr-svc {
  display: block; background: var(--red-ink); color: #fff;
  padding: 14px 12px; border-radius: var(--radius);
  font-weight: 700; font-size: 15px; text-align: center; line-height: 1.3;
}
/* A FIXED track count, not auto-fit. With auto-fit a short final row spreads
   its items across the full width - 3 tiles at 364px under 4 tiles at 264px -
   so the rows visibly fail to line up. A fixed count leaves a gap instead
   (socalcityproperties). `.sr-main ul` is (0,1,1) and beats a bare
   `.sr-svcgrid` (0,1,0), so the list padding needs the same specificity or the
   grid sits 21px to the right of everything else. */
.sr-main ul.sr-svcgrid, .sr-svcgrid {
  list-style: none; margin: 0 0 1.6em; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(var(--svc-cols, 4), minmax(0, 1fr));
  /* stretch, not start: a one-line label ("RECYCLING", "RENT A DUMPSTER") next
     to two-line ones made a short button in an otherwise even row */
  align-items: stretch;
}
.sr-svcgrid > li { display: flex; }
.sr-svcgrid .sr-svc {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
}

@media (max-width: 1000px) { :root { --svc-cols: 3; } }
@media (max-width: 760px)  { :root { --svc-cols: 2; } }
@media (max-width: 460px)  { :root { --svc-cols: 1; } }

/* Each service/job button opened a modal holding a real description. As a
   <details> that content lives on the page: no script, open to search and to a
   screen reader, and still a row of buttons when closed. */
/* A CMS row that mixes service buttons with other content cannot be folded
   into the merged grid, so it keeps its own .sr-cols - give it the SAME track
   sizing or its columns come out wider than the grid directly above it. */
.sr-cols-svc {
  grid-template-columns: repeat(var(--svc-cols, 4), minmax(0, 1fr));
  gap: 12px; align-items: stretch; margin-bottom: 1.6em;
}
.sr-cols-svc > div { display: flex; }
.sr-cols-svc .sr-svc, .sr-cols-svc .sr-btn {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
}

/* Each service/job button opens its description in a modal. The button is a
   real <a> pointing at the panel further down the page, so with no script the
   copy is still reachable; script hides the panel and shows the dialog. */
a.sr-svc { text-decoration: none; }
a.sr-svc:hover, a.sr-svc:focus-visible { background: var(--black); color: #fff; }
a.sr-svc:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sr-svc-body { display: none; }

/* --------------------------------------------------------------- dialog */

.sr-dialog {
  border: 0; padding: 0; max-width: min(680px, 92vw); width: 100%;
  border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.35);
  color: var(--ink); background: #fff;
}
.sr-dialog::backdrop { background: rgba(0,0,0,.6); }
.sr-dialog-in { padding: 26px clamp(18px, 4vw, 32px) 30px; position: relative; }
.sr-dialog-x {
  position: absolute; top: 10px; right: 12px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.sr-dialog-x:hover, .sr-dialog-x:focus-visible { background: #f1f4f6; color: var(--black); }
.sr-dialog-t {
  margin: 0 44px .6em 0; color: var(--red-ink);
  font-size: clamp(19px, 2.4vw, 23px); text-transform: uppercase; line-height: 1.25;
}
.sr-dialog-b { font-size: 16px; }
.sr-dialog-b p:last-child { margin-bottom: 0; }
.sr-dialog-b ul { margin: 0; padding-left: 1.2em; }
.sr-dialog-b li { margin: .35em 0; }

/* lightbox variant: wider, dark, image-led */
.sr-dialog-media { max-width: min(1100px, 96vw); background: #111; color: #eee; }
.sr-dialog-media .sr-dialog-t { color: #fff; }
.sr-dialog-media .sr-dialog-x { color: #bbb; }
.sr-dialog-media .sr-dialog-x:hover { background: #333; color: #fff; }
.sr-shot-fig { margin: 0; text-align: center; }
/* width:auto, not 100%. The trucking photos are 160x120 ORIGINALS with no
   larger version anywhere, so forcing them to the panel width blew them up 6x.
   Show a small source at its own size, centred; let a big one fill. */
.sr-shot-fig img {
  display: inline-block; max-width: 100%; width: auto; height: auto;
  max-height: 74vh; background: #000; border-radius: 6px;
}
.sr-shot-fig figcaption { color: #bbb; font-size: 14px; padding-top: 10px; }
.sr-shot-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 14px; }
.sr-shot-nav button {
  background: var(--red-ink); color: #fff; border: 0; border-radius: var(--radius);
  padding: 11px 18px; font: inherit; font-weight: 700; cursor: pointer;
}
.sr-shot-nav button[disabled] { background: #444; color: #999; cursor: default; }
.sr-shot-nav button:not([disabled]):hover { background: #fff; color: var(--black); }

/* ---------------------------------------------------------------- button */

.sr-btn {
  display: inline-block; background: var(--red-ink); color: #fff;
  padding: 13px 24px; border-radius: var(--radius);
  font-weight: 700; text-decoration: none; text-align: center;
}
.sr-btn:hover, .sr-btn:focus-visible { background: var(--black); color: #fff; }
.sr-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ------------------------------------------------------------------ tabs */

/* /construction-and-demolition and /solid-waste-material are a PAIR: the CMS
   drew the current one as a big red icon and the other as a small grey one,
   spaced apart with stray <br>s so they never lined up. Re-emitted as two equal
   tabs that switch between the pages. */
.sr-tabs {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 660px;
}
.sr-main ul.sr-tabs { padding-left: 0; }
.sr-tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 14px; text-decoration: none; text-align: center;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink-soft); font-weight: 700;
  text-transform: uppercase; font-size: 14px; letter-spacing: .02em;
  height: 100%;
}
/* These icons are OPAQUE greyscale (mode "L") - dark line art on a white
   rectangle, with no alpha. `filter: brightness(0) invert(1)` therefore whitens
   the whole rectangle, not just the ink, and the active tab renders as a solid
   white box. Sit the artwork on its own white chip in BOTH states instead. */
.sr-tabs img {
  width: 78px; height: auto; display: block;
  background: #fff; border-radius: 4px; padding: 6px;
}
.sr-tabs a:hover, .sr-tabs a:focus-visible { border-color: var(--red); color: var(--red-ink); }
.sr-tabs a[aria-current="page"] {
  background: var(--red-ink); border-color: var(--red-ink); color: #fff;
}
.sr-center { text-align: center; }
.sr-logorow { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: center; margin: 26px 0; }

/* ---------------------------------------------------------------- gallery */

.sr-galgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
/* Equal-height cards. A caption that wraps to two lines ("Demolition West
   Carrollton") made a taller card than a one-line one ("Trucking"), so the row
   came out ragged. The li stretches, the card fills it, and margin-top:auto
   pins every caption to the bottom - so the photos line up across the row and
   the cards all end level. */
.sr-galgrid > li { display: flex; }
.sr-galgrid a {
  display: flex; flex-direction: column; width: 100%;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; box-shadow: var(--shadow);
}
.sr-galgrid picture { display: block; line-height: 0; }
.sr-galgrid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sr-galgrid span {
  display: block; padding: 12px 14px; font-weight: 700; font-size: 15px;
  text-transform: uppercase; margin-top: auto;
}
.sr-galgrid a:hover span, .sr-galgrid a:focus span { color: var(--red-ink); }

/* `.sr-main ul` is (0,1,1) and beats a bare `.sr-photos` (0,1,0), so the list
   padding survived and inset the whole grid 20.8px on the LEFT only - which
   reads as "the photos are not centred" on a phone. Same specificity trap as
   the service grid; it needs the same fix. */
.sr-main ul.sr-photos, .sr-photos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.sr-photos a { display: block; line-height: 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; }
.sr-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sr-photos a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sr-photos picture { display: block; line-height: 0; }

/* Photos the CMS laid out as per-row tables of differently sized images, so the
   gaps varied row to row. One grid, one gap, one aspect ratio. */
.sr-main ul.sr-photos-inline { padding-left: 0; margin: 0 0 1.4em; }
.sr-photos-inline li { margin: 0; }
.sr-photos-inline img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border: 1px solid var(--line); border-radius: 4px;
}

/* ------------------------------------------------------------------- team */

.sr-team {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.sr-team li { text-align: center; }
.sr-team img { width: 155px; height: 164px; object-fit: cover; border-radius: var(--radius); background: #eee; }
.sr-team .sr-name { display: block; font-weight: 700; color: var(--red-ink); font-size: 18px; margin-top: 10px; }
.sr-team .sr-role { display: block; font-style: italic; color: var(--ink-soft); }

/* ------------------------------------------------------------------ forms */

.sr-form { max-width: 640px; }
.sr-form.sr-wide { max-width: 900px; }
.sr-field { margin: 0 0 16px; }
.sr-field label { display: block; font-weight: 600; margin-bottom: 5px; }
.sr-req { color: var(--red-ink); }
.sr-field input[type=text], .sr-field input[type=email], .sr-field input[type=tel],
.sr-field input[type=file], .sr-field select, .sr-field textarea {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--ink);
  border: 1px solid #b9c1c7; border-radius: var(--radius); background: #fff;
}
.sr-field textarea { min-height: 148px; resize: vertical; }
.sr-field input:focus, .sr-field select:focus, .sr-field textarea:focus {
  outline: 3px solid rgba(0,100,141,.35); outline-offset: 1px; border-color: var(--blue);
}
.sr-two { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
.sr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-submit {
  background: var(--red-ink); color: #fff; border: 0; border-radius: var(--radius);
  padding: 13px 30px; font: inherit; font-weight: 700; cursor: pointer;
}
.sr-submit:hover, .sr-submit:focus { background: var(--black); }
.sr-note { font-size: 15px; color: var(--ink-soft); }
.sr-ok, .sr-err { padding: 14px 16px; border-radius: var(--radius); margin: 0 0 18px; }
.sr-ok  { background: #e6f4ea; border: 1px solid #9fd3ae; color: #14532d; }
.sr-err { background: #fdecec; border: 1px solid #f0a9a9; color: #8a1b1b; }
.sr-err ul { margin: 6px 0 0; padding-left: 1.2em; }

/* --------------------------------------------------------- contact layout */

.sr-split { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; align-items: start; }
.sr-mapwrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sr-mapwrap iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ----------------------------------------------------------------- footer */

.sr-sub1 { background: var(--band); padding: clamp(24px, 3.4vw, 40px) 0; }

.sr-foot { background: var(--black); color: #cfd4d8; padding: 26px 0; font-size: 15px; }
.sr-foot-in { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.sr-foot a { color: #fff; text-decoration: none; }
.sr-foot a:hover, .sr-foot a:focus { color: #ff7f85; text-decoration: underline; }
.sr-foot-links { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sr-social { display: flex; gap: 10px; align-items: center; }
.sr-social img { width: 34px; height: 34px; display: block; }

/* ============================================================ breakpoints */

/* Measured, not guessed (drauermd). At full size the bar needs 1288px of
   content box. This tier buys back ~150px - tighter nav padding and smaller
   logos - so the full bar keeps working down to the drawer breakpoint below. */
@media (max-width: 1400px) {
  .sr-menu > li > a, .sr-menu > li > .sr-sub-t { padding: 10px 8px; font-size: 14px; }
  .sr-brands img { height: 38px; }
  .sr-brands { gap: 10px; }
  .sr-head-in { gap: 12px; }
  .sr-cta { padding: 10px 14px; font-size: 15px; }
}

/* Below this the tightened bar no longer fits either, so the drawer takes over.
   The threshold is measured, not chosen: the bar holds one row down to 1190px
   and wraps at 1180. A breakpoint of 1150 left a 40px dead zone (1150-1189)
   where the bar had wrapped to two rows but the burger had not yet appeared -
   invisible unless you probe the band either side of the number. */
@media (max-width: 1189px) {
  .sr-burger { display: flex; order: 3; }
  .sr-head-right { order: 2; }

  .sr-nav {
    position: fixed;
    top: var(--head-real); left: 0; right: 0; bottom: 0;
    background: var(--white);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px var(--gut) 40px;
    z-index: 1400;
    visibility: hidden;
  }
  html.sr-open .sr-nav { transform: none; visibility: visible; }

  /* The masthead is sticky and opens a stacking context, so the nav's z-index
     resolves INSIDE it. Lift the whole header above the backdrop while the
     drawer is open or every tap on a menu item hits the backdrop and the panel
     closes - the macathletix / drauermd / kvlawf bug, three times over. */
  html.sr-open .sr-head { z-index: 1500; }

  .sr-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); opacity: 0; pointer-events: none;
    transition: opacity .25s ease; z-index: 1100;
  }
  html.sr-open .sr-backdrop { opacity: 1; pointer-events: auto; }

  /* Locking the scroll with overflow:hidden on <html> KILLS position:sticky -
     the sticky element loses its scroll container and reverts to its static
     position, so on a page scrolled 900px the masthead jumped 874px above the
     viewport and the drawer (fixed at --head-real) floated over bare content
     with the header nowhere in sight. Pin the header explicitly while open, and
     hold the scroll offset on <body> so nothing moves underneath. */
  html.sr-open, html.sr-open body { overflow: hidden; }
  html.sr-open body { position: fixed; left: 0; right: 0; width: 100%; }
  html.sr-open .sr-head { position: fixed; top: 0; left: 0; right: 0; }

  .sr-menu { display: block; }
  .sr-menu > li { border-bottom: 1px solid var(--line); }
  .sr-menu > li > a, .sr-menu > li > .sr-sub-t {
    padding: 15px 4px; font-size: 17px; width: 100%; text-align: left;
    justify-content: space-between; border-radius: 0;
  }
  .sr-menu > li > a[aria-current="page"] { box-shadow: none; }

  .sr-sub {
    position: static; display: none; border: 0; box-shadow: none;
    padding: 0 0 10px 14px; min-width: 0;
  }
  /* On the drawer, hover/focus-within must NOT open a panel - only the button */
  .sr-menu > li:hover > .sr-sub, .sr-menu > li:focus-within > .sr-sub { display: none; }
  .sr-menu > li > .sr-sub-t[aria-expanded="true"] + .sr-sub { display: block; }
  .sr-sub a { padding: 11px 8px; font-size: 16px; }

  .sr-split { grid-template-columns: 1fr; }
}

/* Three brand logos + a phone number + a quote button + the burger cannot share
   one line on a phone: measured, the masthead overflowed at every width from
   600px down. Hiding the phone and the CTA is the worst answer - this is the
   device most likely to act on them - so the row WRAPS: logos and burger on the
   first line, phone and quote button across the second. The drawer's top offset
   is read from header.offsetHeight in JS, so it follows the taller header. */
@media (max-width: 760px) {
  .sr-head-in { flex-wrap: wrap; row-gap: 8px; }
  .sr-brands { order: 1; }
  .sr-burger { order: 2; margin-left: auto; }
  .sr-head-right { order: 3; width: 100%; margin-left: 0; gap: 10px; }
  .sr-cta { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .sr-head-in { min-height: 72px; gap: 10px; }
  .sr-brands { gap: 8px; }
  .sr-brands img { height: 32px; }
  .sr-hero-copy { position: static; background: #1b1b1b; }
  .sr-hero-inner { padding: 0; }
  .sr-hero-box { border-left-width: 8px; font-size: 15px; }
  .sr-foot-in { flex-direction: column; align-items: flex-start; }
  .sr-foot-links { margin-left: 0; }
}

@media (max-width: 560px) {
  /* the CTA label is the first thing to go, never the phone number: this is
     the device most likely to act on it */
  .sr-cta { padding: 11px 14px; font-size: 15px; }
  .sr-tel span { position: absolute; left: -9999px; }
  .sr-tel { padding: 11px; border: 1px solid var(--line); border-radius: var(--radius); }
}

/* Two side-by-side name fields need ~300px of content box; below that they
   stack. Threshold picked from the measurement, not from a round number - 375
   is the commonest phone width and they fit there. */
@media (max-width: 340px) {
  .sr-two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .sr-tilegrid img { transition: none; }
}

@media print {
  .sr-head, .sr-backdrop, .sr-tiles, .sr-cta { display: none; }
  body { font-size: 12pt; }
}