@charset "utf-8";
/* ===========================================================================
   sspallets.com - the whole stylesheet.

   This replaces the CMS's publicstyle.css AND mbcsmbmcp.css (the menu skin).
   The palette is lifted straight off the original artwork so the rebuild reads
   as the same site: red #bf1e2e, ink #1c1c1c, the grey #696969 the headings and
   the menu text used, and the 1px #cacaca + 3px red rule that was baked into
   graphics/menubg.png.

   Mobile-first: the base rules are the phone layout, and the two min-width
   queries add the wider ones. Nothing here needs a max-width query, which is
   what kept the earlier flatpack sites' layers so delicate.
   =========================================================================== */

:root {
  --red:        #bf1e2e;
  --red-dark:   #9d1624;
  /* The brand red on the near-black footer is 2.79:1 - the CMS shipped it that
     way and it fails WCAG AA for 13px text (4.5:1). This tint is the same hue
     at 4.98:1 on #1c1c1c. */
  --red-on-dark: #f0555f;
  --ink:        #1c1c1c;
  --grey:       #696969;
  --rule:       #cacaca;
  --paper:      #ffffff;
  --sand:       #f6f5f3;
  --wrap:       980px;
  --gutter:     clamp(16px, 5vw, 28px);
  --nav-h:      56px;
  --radius:     4px;
  --font: Verdana, Geneva, "DejaVu Sans", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  /* the CMS set 14px/22px. 16px/1.6 is the modern floor for body copy and
     Verdana's large x-height makes it read comfortably at that size. */
  font-size: 16px;
  line-height: 1.6;
}

img, picture, svg, iframe { max-width: 100%; }
img { border: 0; }

a { color: var(--red); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

.sspWrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sspSkip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--red);
  color: #fff;
  padding: 12px 18px;
  font-weight: bold;
}
.sspSkip:focus { left: 0; }

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.sspHeader { background: var(--paper); }

.sspHeaderInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.sspLogo { display: block; flex: 0 1 auto; }
.sspLogo img {
  display: block;
  width: clamp(170px, 42vw, 304px);
  height: auto;
}

.sspHeaderRight {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sspPhone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;              /* a tap target you can actually hit */
  color: var(--grey);
  font-size: 20px;
  white-space: nowrap;
}
.sspPhone:hover, .sspPhone:focus-visible { color: var(--red); text-decoration: none; }
.sspPhoneIcon { width: 22px; height: 22px; fill: var(--red); flex: none; }

/* Narrowest phones: the logo, the number and a labelled burger do not fit on
   one 320px line, so the number becomes an icon-only call button and the full
   number moves into the menu (.sspNavCta). */
@media (max-width: 559px) {
  .sspPhoneNum { display: none; }
  .sspBurgerLabel { display: none; }
  .sspBurger { padding: 12px; }
}

.sspHeaderArt { display: none; }
.sspHeaderRight > .sspBtnQuote { display: none; }
.sspHeaderArt img { display: block; width: 61px; height: auto; }

/* ---------------------------------------------------------------------------
   Buttons - these were flat PNGs of text (QuoteButton.png, 215x60, and
   home_button_readmore.png). Real buttons scale, stay crisp, are readable by a
   screen reader, and translate.
   --------------------------------------------------------------------------- */
.sspBtn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease;
  font-family: inherit;
}
.sspBtn:hover, .sspBtn:focus-visible {
  background: var(--red-dark);
  color: #fff;
  text-decoration: none;
}
.sspBtnQuote { white-space: nowrap; }

/* The header's quote button and phone number, relocated to the foot of the
   open menu on anything narrower than the desktop bar. */
.sspNavCta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px var(--gutter) 22px;
  background: var(--sand);
}
.sspNav:not(.is-open) .sspNavCta { display: none; }
.sspNavCtaTel {
  color: var(--grey);
  font-size: 17px;
  font-weight: bold;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Burger
   --------------------------------------------------------------------------- */
.sspBurger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--grey);
  font: inherit;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 13px;
  min-height: 44px;
  cursor: pointer;
  flex: none;
}
.sspBurgerBox { display: block; position: relative; width: 20px; height: 14px; }
.sspBurgerBox span,
.sspBurgerBox::before,
.sspBurgerBox::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.sspBurgerBox::before { top: 0; }
.sspBurgerBox span    { top: 6px; }
.sspBurgerBox::after  { top: 12px; }

.sspBurger[aria-expanded="true"] .sspBurgerBox::before { top: 6px; transform: rotate(45deg); }
.sspBurger[aria-expanded="true"] .sspBurgerBox span    { opacity: 0; }
.sspBurger[aria-expanded="true"] .sspBurgerBox::after  { top: 6px; transform: rotate(-45deg); }

/* ---------------------------------------------------------------------------
   Navigation

   Was: four PNGs of words (Home / About / Products & Services / Contact Us),
   swapped on mouseover by a script, inside a <ul> the CMS never closed, over a
   66x61 background tile. No text, no keyboard path into the submenu, nothing
   below 875px, and on a touch device the "Products & Services" item did
   nothing at all because it had no href and its submenu only opened on hover.
   --------------------------------------------------------------------------- */
.sspNav {
  border-top: 1px solid var(--rule);
  border-bottom: 3px solid var(--red);
  background: var(--paper);
}

/* phone: collapsed until the burger says otherwise. `hidden` is not used, so
   the panel still animates, and it is display:none so nothing in it is
   focusable while closed. */
.sspNav:not(.is-open) .sspNavList { display: none; }

.sspNavList {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.sspNavItem { position: relative; }

.sspNavLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 14px var(--gutter);
  background: none;
  border: 0;
  border-bottom: 1px solid #ececec;
  color: var(--grey);
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sspNavLink:hover,
.sspNavLink:focus-visible { color: var(--red); text-decoration: none; }
.sspNavLink.is-active,
.sspNavLink[aria-current="page"] { color: var(--red); }

.sspCaret {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
  flex: none;
}
.sspHasSub.is-open > .sspNavLink .sspCaret { transform: rotate(-135deg) translate(-2px, -2px); }

.sspSub { list-style: none; margin: 0; padding: 0; background: var(--sand); }
.sspHasSub:not(.is-open) > .sspSub { display: none; }
.sspSub a {
  display: block;
  padding: 12px var(--gutter) 12px calc(var(--gutter) + 18px);
  border-bottom: 1px solid #e4e2de;
  color: var(--grey);
  font-size: 14px;
  text-decoration: none;
}
.sspSub a:hover,
.sspSub a:focus-visible,
.sspSub a[aria-current="page"] { color: var(--red); background: #efedea; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Hero

   Was LayerSlider: jQuery + GreenSock + two plugins + a skin, configured
   `responsive: false`, fetching each of five 700 KB PNGs twice. Now five
   <picture> elements and one keyframe. 5 slides x 8s = the 40s cycle.
   --------------------------------------------------------------------------- */
.sspHero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  height: clamp(130px, 25vw, 360px);
}
.sspHeroSlide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: sspHeroFade 40s linear infinite;
  animation-delay: calc(var(--i) * 8s);
}
.sspHeroSlide img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes sspHeroFade {
  0%   { opacity: 0 }
  2%   { opacity: 1 }
  18%  { opacity: 1 }
  20%  { opacity: 0 }
  100% { opacity: 0 }
}

/* ---------------------------------------------------------------------------
   Main content
   --------------------------------------------------------------------------- */
.sspMain { padding-block: clamp(26px, 5vw, 44px); }

.sspH1 {
  margin: 0 0 .7em;
  color: var(--grey);
  font-size: clamp(23px, 4.2vw, 32px);
  font-weight: normal;
  line-height: 1.25;
}
.sspH2 {
  margin: 0 0 .6em;
  color: var(--grey);
  font-size: clamp(19px, 3vw, 23px);
  font-weight: normal;
  line-height: 1.3;
}

.sspCentre { text-align: center; }

/* FlexSite's multi-column rows: real cells with fixed-width spacer cells
   between them. The spacers are gone; `gap` does that job now. */
.sspCols { display: grid; gap: clamp(24px, 4vw, 44px); align-items: start; }
.sspCol { min-width: 0; }
.sspCol > picture > img { display: block; height: auto; }

.sspChecks { list-style: none; margin: 0; padding: 0; }
.sspChecks li {
  position: relative;
  padding: 4px 0 4px 34px;
  background: url("/img/HomePage/img_bullet_pallet.png") 0 6px / 22px 22px no-repeat;
}

/* Google Maps embed: a fixed 320x225 iframe that overflowed a 375px phone
   once the page gutter was taken off it. */
.sspMap {
  position: relative;
  /* A DEFINITE width, not 100%. These sit in an `auto` grid track, and a
     percentage width against an auto track is circular - the track asks the
     child how wide it wants to be, the child answers "100% of the track", and
     both resolve to zero. max-width then does the shrinking on a phone. */
  width: 360px;
  max-width: 100%;
  aspect-ratio: 320 / 225;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.sspMap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------------
   Homepage product tiles

   The caption used to exist only inside the rollover image, so on any touch
   device these were three unlabelled photographs.
   --------------------------------------------------------------------------- */
.sspTiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 3vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.sspTile a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  text-decoration: none;
}
.sspTile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 208;
  object-fit: cover;
  transition: transform .3s ease, opacity .3s ease;
}
.sspTileCap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 11px 14px;
  background: rgba(28, 28, 28, .82);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sspTile a:hover img,
.sspTile a:focus-visible img { transform: scale(1.05); opacity: .9; }
.sspTile a:hover .sspTileCap,
.sspTile a:focus-visible .sspTileCap { background: var(--red); }

/* ---------------------------------------------------------------------------
   Three-photo crossfade (was richhtmlticker.js: jQuery, a cookie to remember
   the frame, and a window 'unload' handler that disqualified the page from the
   back/forward cache). Works with JS off - the first frame just stays up.
   --------------------------------------------------------------------------- */
.sspFade {
  position: relative;
  width: 250px;            /* definite - see the note on .sspMap */
  max-width: 100%;
  aspect-ratio: 1;
}
.sspFadeItem {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.sspFadeItem.is-on { opacity: 1; }
.sspFadeItem img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.sspFormBox { max-width: 420px; }

.sspField { margin: 0 0 14px; }
.sspField label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  color: var(--ink);
}
.sspReq { color: var(--red); }

.sspField input,
.sspField textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;             /* < 16px makes iOS Safari zoom on focus */
  line-height: 1.4;
}
.sspField textarea { resize: vertical; min-height: 96px; }
.sspField input:focus, .sspField textarea:focus { border-color: var(--red); }

.sspFormActions { margin: 0; }
.sspBtnSubmit { width: 100%; padding-block: 13px; font-size: 15px; }

/* Honeypot. Off-screen rather than display:none - some bots skip hidden
   fields, and a screen reader is kept out by aria-hidden + tabindex -1. */
.sspHp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sspMsg {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: 15px;
}
.sspMsgOk  { background: #eef6ee; border-color: #2f7d32; color: #1e5620; }
.sspMsgErr { background: #fdeeef; border-color: var(--red); color: var(--red-dark); }

/* ---------------------------------------------------------------------------
   Sub-footer band ("Who We Are? / Why S&S? / Contact Us")
   --------------------------------------------------------------------------- */
.sspSubFooter {
  border-top: 1px solid var(--rule);
  padding-block: clamp(28px, 5vw, 46px);
}
.sspSubCols .sspCol > .sspBtn { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.sspFooter {
  background: var(--ink);
  color: #fff;
  padding-block: 26px;
  font-size: 14px;
}
.sspFooterInner {
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
}
.sspFooterLogo { display: block; width: 190px; height: auto; }
.sspFooterMid { min-width: 0; }

.sspFooterNav {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
}
.sspFooterNav li + li::before {
  content: "|";
  color: #5a5a5a;
  padding: 0 10px;
}
.sspFooterNav a {
  color: var(--red-on-dark);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sspFooterNav a:hover, .sspFooterNav a:focus-visible { color: #fff; }

.sspFooterMeta { margin: 0; color: #cfcfcf; font-size: 13px; line-height: 1.7; }
.sspFooterMeta a { color: #cfcfcf; }
.sspFooterMeta a:hover, .sspFooterMeta a:focus-visible { color: #fff; }

.sspFooterAddr { font-style: normal; color: #cfcfcf; font-size: 13px; line-height: 1.7; }
.sspFooterAddr a { color: var(--red-on-dark); }
.sspFooterAddr a:hover, .sspFooterAddr a:focus-visible { color: #fff; }

/* ===========================================================================
   >= 700px - the columns can sit side by side
   =========================================================================== */
@media (min-width: 700px) {
  .sspCols2 { grid-template-columns: minmax(0, 1fr) auto; }
  .sspCols3 { grid-template-columns: minmax(0, 1fr) auto auto; }
  /* two up, with the contact form across the foot: three 224px columns at
     this width would leave the form's inputs narrower than the labels. */
  .sspSubCols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sspSubCols > .sspCol:last-child { grid-column: 1 / -1; }

  /* the quote form is the point of that page, so it gets a real column */
  .ssp-request-a-quote .sspCols2 { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }

  .sspFooterInner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    text-align: left;
  }
  .sspFooterMid { text-align: center; }
  .sspFooterNav { justify-content: center; }
  .sspFooterAddr { text-align: right; justify-self: end; }
}

/* ===========================================================================
   >= 880px - the desktop menu bar
   =========================================================================== */
@media (min-width: 900px) {
  .sspSubCols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sspSubCols > .sspCol:last-child { grid-column: auto; }
}

/* ===========================================================================
   >= 880px - the desktop menu bar
   =========================================================================== */
@media (min-width: 880px) {
  .sspBurger { display: none; }
  .sspHeaderArt { display: block; }
  .sspNav .sspNavCta,
  .sspNav:not(.is-open) .sspNavCta { display: none; }
  .sspHeaderRight > .sspBtnQuote { display: inline-block; }

  .sspNav .sspNavList,
  .sspNav:not(.is-open) .sspNavList {
    display: flex;
    padding-inline: var(--gutter);
  }

  .sspNavLink {
    width: auto;
    height: var(--nav-h);
    padding: 0 clamp(14px, 2.2vw, 30px);
    border-bottom: 0;
    justify-content: center;
    position: relative;
  }
  /* the red underline the original menu images had painted into them */
  .sspNavLink::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 3px;
    background: var(--red);
    transform: scaleX(0);
    transition: transform .18s ease;
  }
  .sspNavLink:hover::after,
  .sspNavLink:focus-visible::after,
  .sspHasSub.is-open > .sspNavLink::after,
  .sspNavLink.is-active::after { transform: scaleX(1); }

  .sspHasSub.is-open > .sspNavLink .sspCaret,
  .sspCaret { transform: rotate(45deg) translate(-2px, -2px); }

  .sspSub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 220px;
    margin-top: 3px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--red);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
  }
  .sspSub a { padding: 12px 20px; }
  .sspSub li:last-child a { border-bottom: 0; }

  /* Hover opens it for a mouse. :focus-within opens it for a keyboard with no
     script at all - the script's click/Escape handling is then an enhancement
     rather than the only way in. Touch is covered by the script's click
     handler, since :hover never fires there. */
  .sspHasSub:hover > .sspSub,
  .sspHasSub:focus-within > .sspSub { display: block; }
}

/* ===========================================================================
   Motion
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* the hero would otherwise settle on whichever slide the 0.001ms animation
     left behind - pin it to the first and hide the rest */
  .sspHeroSlide { animation: none; opacity: 0; }
  .sspHeroSlide:first-child { opacity: 1; }
}

/* ===========================================================================
   Print
   =========================================================================== */
@media print {
  .sspNav, .sspBurger, .sspHero, .sspSkip, .sspForm, .sspMap { display: none !important; }
  body { font-size: 11pt; }
  .sspFooter { background: none; color: #000; }
  .sspFooterMeta, .sspFooterAddr { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}