/* ============================================================
   TEMPORARY header + footer, copied from https://spslink.com/ (2026-10-14).
   Purpose: show the real site chrome around the homepage while we design it.
   NOT part of the homepage and NOT delivered: see tmp-chrome/README.md for removal.

   Rules for this file:
   - Everything is scoped to .tmp-header, .tmp-footer or html.tmp-chrome, so deleting the
     tmp-chrome/ folder (and the one marked line in index.html) removes every trace.
   - It never edits the homepage's own CSS files. The few homepage tweaks it needs (hero height,
     sticky bar) are the "Homepage adjustments" block at the bottom, also scoped to html.tmp-chrome.
   - Font: Nunito Sans, the project font, which the homepage itself loads (assets/css/styles.css). The live site currently uses IBM Plex Sans + Saira; we do not.
   - Values (sizes, colours, shadows, breakpoints) were read from the live site: desktop >= 1024px, mobile below.
   ============================================================ */

html.tmp-chrome {
  --tmp-ink: #1e2126;
  --tmp-text: #4a525c;
  --tmp-border: #e3e6ea;
  --tmp-surface: #f4f5f7;
  --tmp-primary: #d30f18;
  --tmp-primary-dark: #b20d15;
  --tmp-font: "Nunito Sans", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --tmp-header-h: 56px; /* 92px from 1024px up (set below) */
}
@media (min-width: 1024px) { html.tmp-chrome { --tmp-header-h: 92px; } }

/* ---------- shared reset (the homepage CSS must not leak in). :where() keeps these at zero specificity, so the component
   classes below always win over them. ---------- */
.tmp-header, .tmp-footer { font-family: var(--tmp-font); font-size: 1rem; line-height: 1.5; font-weight: 400; color: var(--tmp-text); text-align: left; -webkit-font-smoothing: antialiased; }
:where(.tmp-header, .tmp-footer) *, :where(.tmp-header, .tmp-footer) *::before, :where(.tmp-header, .tmp-footer) *::after { box-sizing: border-box; }
:where(.tmp-header, .tmp-footer) a { color: inherit; text-decoration: none; }
:where(.tmp-header, .tmp-footer) ul { margin: 0; padding: 0; list-style: none; }
:where(.tmp-header, .tmp-footer) :is(p, span) { margin: 0; }
:where(.tmp-header, .tmp-footer) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.tmp-header, .tmp-footer) svg { display: block; flex: none; }
:where(.tmp-header, .tmp-footer) img { display: block; max-width: none; }
:where(.tmp-header, .tmp-footer) :focus-visible { outline: 2px solid var(--tmp-primary); outline-offset: 2px; }

/* ---------- header ---------- */
.tmp-header { position: relative; z-index: 40; }
.tmp-skip { position: absolute; left: -9999px; top: 0; }
.tmp-skip:focus { left: 1rem; top: 0.5rem; z-index: 60; padding: 0.5rem 0.75rem; background: #fff; color: var(--tmp-ink); border-radius: 4px; box-shadow: 0 5px 10px rgb(31 41 55 / 0.1); }

.tmp-header__bar { position: relative; background: #fff; box-shadow: 0 5px 10px rgb(31 41 55 / 0.1); }
.tmp-header__inner { display: grid; grid-template-columns: 57px 1fr 112px; align-items: center; height: 56px; width: 100%; max-width: 1600px; margin-inline: auto; }

.tmp-header__burger { display: grid; place-items: center; width: 57px; height: 56px; border-right: 1px solid var(--tmp-border); color: var(--tmp-ink); }
.tmp-header__logo { display: flex; justify-content: center; align-items: center; min-width: 0; }
.tmp-header__logo img { width: 126px; height: 20px; object-fit: contain; margin-top: 12px; } /* the live mobile logo sits 6px below centre */
.tmp-header__tools { display: flex; align-items: center; justify-content: flex-end; }
.tmp-account { position: relative; display: inline-block; }
.tmp-iconbtn { display: grid; place-items: center; width: 56px; height: 56px; color: var(--tmp-ink); border-left: 1px solid var(--tmp-border); }

.tmp-nav { display: none; }

/* account dropdown (guest state) */
.tmp-account__panel { position: absolute; right: 0; top: calc(100% + 1px); z-index: 50; width: 240px; background: #fff; border-radius: 0; box-shadow: 0 15px 30px rgb(31 41 55 / 0.1); overflow: auto; }
.tmp-account__section { display: grid; gap: 0.75rem; padding: 1.25rem 1.25rem 0.75rem; }
.tmp-account__section + .tmp-account__section { padding: 0.75rem 1.25rem 1.25rem; border-top: 1px solid var(--tmp-border); }
.tmp-account__title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--tmp-ink); }
.tmp-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; padding: 14px 32px; border-radius: 9999px; font-size: 1rem; line-height: 1.5; font-weight: 600; text-align: center; border: 1px solid transparent; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.tmp-btn--primary { background: var(--tmp-primary); color: #fff; }
.tmp-btn--primary:hover { background: var(--tmp-primary-dark); }
.tmp-btn--secondary { background: #fff; color: var(--tmp-ink); border-color: var(--tmp-ink); }
.tmp-btn--secondary:hover { background: var(--tmp-ink); color: #fff; }

/* mobile menu: full screen, two panels (list, then the Radios submenu) */
.tmp-menu { position: fixed; inset: 0; z-index: 60; background: var(--tmp-surface); overflow: hidden; }
.tmp-menu__panel { position: absolute; inset: 0; background: var(--tmp-surface); transition: transform 0.25s ease; }
.tmp-menu__panel--sub { transform: translateX(-100%); }
.tmp-menu.is-sub .tmp-menu__panel--main { transform: translateX(100%); }
.tmp-menu.is-sub .tmp-menu__panel--sub { transform: none; }
.tmp-menu__bar { display: flex; align-items: stretch; height: 56px; background: #fff; border-bottom: 1px solid var(--tmp-border); }
.tmp-menu__title { flex: 1; display: flex; align-items: center; padding-left: 1.25rem; font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: var(--tmp-ink); }
.tmp-menu__title--sub { font-size: 1rem; line-height: 1.5rem; font-weight: 700; padding-left: 1rem; }
.tmp-menu__icon { display: grid; place-items: center; width: 56px; flex: none; color: var(--tmp-ink); }
.tmp-menu__icon--close { border-left: 1px solid var(--tmp-border); }
.tmp-menu__icon--back { border-right: 1px solid var(--tmp-border); }
.tmp-menu__list { background: #fff; }
.tmp-menu__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--tmp-border); }
.tmp-menu__row > a { flex: 1; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 1rem 1.25rem; color: var(--tmp-ink); }
.tmp-menu__row > a svg { color: var(--tmp-primary); }
.tmp-menu__row .tmp-menu__icon { width: 57px; border-left: 1px solid var(--tmp-border); }

/* page dim while the Radios dropdown is open (desktop only) */
.tmp-overlay { display: none; }

/* ---------- header: desktop ---------- */
@media (min-width: 1024px) {
  .tmp-header__inner { display: flex; gap: 2rem; height: 92px; padding: 0 2rem; }
  .tmp-header__burger, .tmp-menu { display: none !important; }
  .tmp-header__logo { flex: none; }
  .tmp-header__logo img { width: 180px; height: 50px; margin-top: 0; }
  .tmp-nav { display: flex; flex: 1; justify-content: center; align-self: stretch; }
  .tmp-nav ul { display: flex; gap: clamp(1rem, calc(4vw - 0.5rem), 2.5rem); } /* the live site's fixed 40px gap overflows a 1024-1038px window with a scrollbar; this is 40px from ~1125px up */
  .tmp-nav__item { position: relative; display: flex; align-items: center; height: 92px; }
  .tmp-nav__link { display: flex; align-items: center; gap: 0.25rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: var(--tmp-ink); white-space: nowrap; transition: color 0.15s; }
  .tmp-nav__link:hover, .tmp-nav__item.is-open > .tmp-nav__link { color: var(--tmp-primary); }
  .tmp-nav__link svg { transition: transform 0.15s; }
  .tmp-nav__item.is-open > .tmp-nav__link svg { transform: rotate(180deg); }
  .tmp-nav__panel { position: absolute; left: 0; top: 100%; z-index: 50; width: 216px; background: #fff; border-radius: 0 0 4px 4px; box-shadow: 0 15px 30px rgb(31 41 55 / 0.1); opacity: 0; visibility: hidden; transition: opacity 0.12s; }
  .tmp-nav__item.is-open > .tmp-nav__panel { opacity: 1; visibility: visible; }
  .tmp-nav__panel a { display: block; padding: 0.75rem 1.25rem; font-size: 1rem; line-height: 1.5rem; color: var(--tmp-ink); }
  .tmp-nav__panel a:hover { color: var(--tmp-primary); }
  .tmp-header__tools { gap: 0.75rem; }
  .tmp-iconbtn { width: 52px; height: 52px; border-left: 0; border-radius: 9999px; transition: background-color 0.15s; }
  .tmp-iconbtn:hover, .tmp-iconbtn[aria-expanded="true"] { background: rgb(30 33 38 / 0.07); }
  .tmp-account__panel { top: calc(100% + 4px); width: 340px; border-radius: 4px; }
  .tmp-account__section { padding: 2.5rem 2.5rem 1.75rem; }
  .tmp-account__section + .tmp-account__section { padding: 1.75rem 2.5rem 2.5rem; }
  .tmp-overlay { display: block; position: fixed; left: 0; right: 0; top: 92px; height: 100svh; z-index: -1; background: rgb(30 33 38 / 0.2); opacity: 0; visibility: hidden; transition: opacity 0.15s; }
  .tmp-overlay.is-visible { opacity: 1; visibility: visible; }
}

/* ---------- footer ---------- */
.tmp-footer { background: #fff; } /* the live page is white; the homepage's own page background is a light grey */
.tmp-footer__top { max-width: 1600px; margin-inline: auto; padding: 1.5rem 1.25rem 0; } /* header, footer top and footer bottom share the live site's container: centred, 1600px max incl. 32px side padding */
.tmp-footer__brand img { width: 157px; height: 34px; }
.tmp-footer__brand p { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.625; }
.tmp-footer__cols { display: block; margin-top: 1.5rem; }
.tmp-footer__col { margin: 0 -1.25rem; }
.tmp-footer__acc { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 1.25rem; border-top: 1px solid var(--tmp-border); font-size: 1rem; line-height: 1.5rem; color: var(--tmp-ink); }
.tmp-footer__acc svg { color: var(--tmp-primary); transition: transform 0.15s; }
.tmp-footer__acc[aria-expanded="true"] svg { transform: rotate(180deg); }
.tmp-footer__heading { display: none; }
.tmp-footer__links { display: none; }
.tmp-footer__col.is-open .tmp-footer__links { display: block; }
.tmp-footer__links a { display: block; padding: 1rem 1.25rem; border-top: 1px solid var(--tmp-border); font-size: 1rem; line-height: 1.5rem; }
.tmp-footer__links a:hover { color: var(--tmp-primary); }
.tmp-footer__bottom { background: var(--tmp-surface); padding: 1rem 0; }
.tmp-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; max-width: 1600px; margin-inline: auto; padding: 0 1.25rem; font-size: 0.875rem; line-height: 1.25rem; }
.tmp-footer__credit { display: flex; align-items: center; gap: 0.25rem; }
.tmp-footer__credit svg { width: 65px; height: 18px; }

@media (min-width: 1024px) {
  .tmp-footer__top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3rem; padding: 4rem 2rem 3rem; }
  .tmp-footer__cols { display: contents; margin-top: 0; }
  .tmp-footer__col { margin: 0; }
  .tmp-footer__acc { display: none; }
  .tmp-footer__heading { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--tmp-ink); }
  .tmp-footer__links { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
  .tmp-footer__links a { display: block; width: fit-content; padding: 0; border: 0; }
  .tmp-footer__bottom-inner { padding: 0 2rem; }
}

/* ---------- Homepage adjustments (only while the temp chrome is on) ----------
   These are the only places this file touches homepage elements. They are scoped to html.tmp-chrome, so
   removing the tmp-chrome/ folder removes them too and the homepage returns to its stand-alone behaviour. */

/* The hero tucks BEHIND the header: its top edge sits at the very top of the page and the header (z-index 40) is drawn over it.
   Done with the homepage's own --hp-marquee-gap (its top margin), set to minus the header height. */
html.tmp-chrome .hp-marquee { --hp-marquee-gap: calc(var(--tmp-header-h) * -1); }
/* The hero is 100svh tall in total (less the trust strip under it, --hp-below: the strip stays on the first screen too), so the part you can see (below the header) is that minus the header and the tab strip stays on the first screen. */
html.tmp-chrome .hp-marquee { height: calc(100vh - var(--tmp-header-h) - var(--hp-marquee-gap)); height: calc(100svh - var(--tmp-header-h) - var(--hp-marquee-gap) - var(--hp-below, 0px)); min-height: 560px; }
/* Photos fill the part of the hero you can see (below the header), so nothing in a picture (a hard hat, a head) is hidden behind the header. */
html.tmp-chrome .hp-marquee__bg--photo { top: var(--tmp-header-h); }
/* The slide copy is centred in the visible part, not behind the header: add the header height to its top padding (and to the photo caption's offset). */
html.tmp-chrome .hp-marquee__content { padding-top: calc(3rem + var(--tmp-header-h)); }
html.tmp-chrome .hp-marquee__note { top: calc(1.5rem + var(--tmp-header-h)); }
/* Phones: the hero fills the first screen down to the trust strip (the homepage's own phone rule is 80vh when there is no strip to fit). */
@media (max-width: 720px) {
  html.tmp-chrome .hp-marquee.hero { height: calc(100svh - var(--hp-below, 20vh)) !important; min-height: 0; }
  html.tmp-chrome .hp-marquee__content { padding-top: calc(1.5rem + var(--tmp-header-h)); }
}

/* The homepage's sticky "Reserve yours" bar reappears after the signup form; keep it off the temp footer. */
html.tmp-chrome.tmp-footer-in-view .sl-sticky { visibility: hidden !important; }

/* Lock page scroll behind the mobile menu. */
html.tmp-chrome.tmp-menu-open { overflow: hidden; }