/* 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 {
  --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); 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); 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;
}
.sr-burger span, .sr-burger span::before, .sr-burger span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}
.sr-burger span { position: relative; }
.sr-burger span::before { position: absolute; top: -7px; }
.sr-burger span::after  { position: absolute; top:  7px; }
html.sr-open .sr-burger span { background: transparent; }
html.sr-open .sr-burger span::before { transform: translateY(7px) rotate(45deg); }
html.sr-open .sr-burger span::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); }
.sr-menu > li > a[aria-current="page"] { color: var(--red-ink); box-shadow: inset 0 -3px 0 var(--red); }

.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: 0 0 1.2em;
  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); color: #fff;
  padding: 14px 12px; border-radius: var(--radius);
  font-weight: 700; font-size: 15px; text-align: center; line-height: 1.3;
}
.sr-svcgrid {
  list-style: none; margin: 0 0 1.2em; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.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));
}
.sr-galgrid a {
  display: block; 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 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; }
.sr-galgrid a:hover span, .sr-galgrid a:focus span { color: var(--red-ink); }

.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); }
.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; }

/* ------------------------------------------------------------------- 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); 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; }
  html.sr-open, html.sr-open body { overflow: hidden; }

  .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; }
}