/* Site header and footer (shared on every page). Design System tokens only (css/design-tokens.css).
   Header: logo left, nav + CTA on desktop (>=1024), hamburger on mobile. Footer: 4 columns on desktop. */

/* =====================  HEADER  ===================== */
.sh {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ds-slate-900);
  color: var(--ds-on-dark);
  font-family: var(--ds-font-body);
  font-size: 17px;
  line-height: 1.4;
}
.sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
.sh a:focus-visible, .sh button:focus-visible { outline: 3px solid var(--ds-focus-dark); outline-offset: 2px; }
.sh__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s4);
  height: 72px;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

/* Logo: the supplied artwork, unaltered, on a white plate (the artwork is black on transparent) */
.sh__logo {
  display: flex;
  align-items: center;
  flex: none;
  height: 56px;
  padding: var(--ds-s1) var(--ds-s3);
  background: var(--ds-white);
  border-radius: var(--ds-radius-control);
}
.sh__logo img { display: block; width: auto; height: 44px; }

/* Mobile menu button */
.sh__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--ds-on-dark);
  border-radius: var(--ds-radius-control);
  color: var(--ds-on-dark);
  cursor: pointer;
}
.sh.has-js .sh__toggle { display: inline-flex; }
.sh__toggle svg { width: 24px; height: 24px; }
.sh__toggle .sh__icon-close { display: none; }
.sh.is-open .sh__toggle .sh__icon-open { display: none; }
.sh.is-open .sh__toggle .sh__icon-close { display: block; }

/* Mobile panel */
.sh__nav {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 0 var(--ds-gutter) var(--ds-s5);
  background: var(--ds-slate-900);
  border-top: 1px solid var(--ds-slate-700);
  box-shadow: var(--ds-shadow-lg);
}
.sh.has-js:not(.is-open) .sh__nav { display: none; }
.sh__list, .sh__sub { list-style: none; margin: 0; padding: 0; }
.sh__list > li { border-bottom: 1px solid var(--ds-slate-700); }
.sh__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ds-on-dark);
}
.sh__link:hover { color: var(--ds-amber-hover); }
.sh__link[aria-current="page"], .sh__has-sub.is-active > .sh__row > .sh__link { color: var(--ds-amber); }
.sh__row { display: flex; align-items: center; }
.sh__row .sh__link { flex: 1 1 auto; }
.sh__sub-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ds-on-dark);
  cursor: pointer;
}
.sh.has-js .sh__sub-toggle { display: inline-flex; }
.sh__sub-toggle svg { width: 24px; height: 24px; transition: transform 200ms ease-out; }
.sh__has-sub.is-open .sh__sub-toggle svg { transform: rotate(180deg); }
.sh.has-js .sh__has-sub:not(.is-open) .sh__sub { display: none; }
.sh__sub { padding: 0 0 var(--ds-s3) var(--ds-s4); }
.sh__sub a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  color: var(--ds-on-dark-soft);
}
.sh__sub a:hover { color: var(--ds-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.sh a.sh__cta { display: none; }
.sh__cta-mobile { padding-top: var(--ds-s5); border-bottom: 0 !important; }

/* Buttons (DS A12) */
.sh .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--ds-s5);
  border-radius: var(--ds-radius-control);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  background: var(--ds-amber);
  color: var(--ds-ink);
  transition: background-color 150ms ease-out;
}
.sh .btn:hover { background: var(--ds-amber-hover); color: var(--ds-ink); }
.sh .btn:active { background: var(--ds-amber-pressed); }
.sh__cta-mobile .btn { width: 100%; min-height: 56px; }

/* Desktop */
@media (min-width: 1024px) {
  .sh__toggle, .sh.has-js .sh__toggle { display: none; }
  .sh__nav, .sh.has-js:not(.is-open) .sh__nav {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border-top: 0;
    box-shadow: none;
  }
  .sh__list { display: flex; align-items: center; gap: var(--ds-s1); }
  .sh__list > li { border-bottom: 0; position: relative; }
  .sh__link { min-height: 72px; padding: 0 var(--ds-s3); font-size: 18px; box-shadow: inset 0 -3px 0 transparent; }
  .sh__link:hover { box-shadow: inset 0 -3px 0 var(--ds-amber); color: var(--ds-on-dark); }
  .sh__link[aria-current="page"], .sh__has-sub.is-active > .sh__row > .sh__link { box-shadow: inset 0 -3px 0 var(--ds-amber); color: var(--ds-on-dark); }
  .sh__row .sh__link { flex: none; padding-right: var(--ds-s1); }
  .sh__sub-toggle, .sh.has-js .sh__sub-toggle { width: 32px; height: 72px; margin-left: -4px; }
  .sh__sub-toggle svg { width: 20px; height: 20px; }
  .sh__sub, .sh.has-js .sh__has-sub:not(.is-open) .sh__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 300px;
    padding: var(--ds-s2);
    background: var(--ds-white);
    border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);
    box-shadow: var(--ds-shadow-md);
  }
  .sh__has-sub:hover > .sh__sub, .sh__has-sub:focus-within > .sh__sub, .sh.has-js .sh__has-sub:not(.is-open):hover > .sh__sub, .sh.has-js .sh__has-sub:not(.is-open):focus-within > .sh__sub, .sh.has-js .sh__has-sub.is-open > .sh__sub { display: block; }
  .sh__sub a { padding: 0 var(--ds-s4); border-radius: var(--ds-radius-control); color: var(--ds-ink); }
  .sh__sub a:hover { background: var(--ds-mist); color: var(--ds-ink); text-decoration: none; }
  .sh__sub a:focus-visible { outline-color: var(--ds-focus-light); }
  .sh a.sh__cta { display: inline-flex; flex: none; }
  .sh__cta-mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sh .btn, .sh__sub-toggle svg { transition: none; } }

/* =====================  FOOTER  ===================== */
.sf {
  background: var(--ds-slate-900);
  color: var(--ds-on-dark);
  border-top: 1px solid var(--ds-slate-700);
  font-family: var(--ds-font-body);
  font-size: 17px;
  line-height: 1.6;
  padding-block: var(--ds-s7) var(--ds-s6);
}
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
.sf__inner { max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-gutter); }
.sf a:focus-visible { outline: 3px solid var(--ds-focus-dark); outline-offset: 2px; }
.sf__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-s6); }
.sf .sf__title {
  margin: 0 0 var(--ds-s3);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: normal;
  color: var(--ds-on-dark);
}
.sf p { margin: 0 0 var(--ds-s3); color: var(--ds-on-dark-soft); }
.sf ul { list-style: none; margin: 0; padding: 0; }
.sf li { margin: 0; color: var(--ds-on-dark-soft); }
.sf__list a, .sf__phone a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ds-on-dark-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sf__list a:hover { color: var(--ds-on-dark); }
.sf__areas li { display: flex; align-items: center; min-height: 36px; }
.sf .sf__phone { margin: 0; color: var(--ds-on-dark); }
.sf .sf__phone a { color: var(--ds-link-on-dark); font-weight: 600; }
.sf .sf__phone a:hover { color: var(--ds-amber); }
.sf__legal { margin-top: var(--ds-s7); padding-top: var(--ds-s5); border-top: 1px solid var(--ds-slate-700); font-size: 15px; line-height: 1.5; }
.sf__legal p { margin: 0 0 var(--ds-s3); max-width: 80ch; }
.sf__legal p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .sf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s7) var(--ds-s6); } }
@media (min-width: 1024px) { .sf__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Social profile icons (entity reinforcement) ---------- */
.social { display: flex; flex-wrap: wrap; gap: var(--ds-s3, 12px); list-style: none; margin: var(--ds-s4, 16px) 0 0; padding: 0; }
.social li { margin: 0; }
.social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid rgba(18, 24, 31, .16); line-height: 0; text-decoration: none; }
.social__link svg { fill: currentColor; }
.social__link:hover { background: #eef2f6; }
.social__link--facebook { color: #1877F2; }
.social__link--instagram { color: #E4405F; }
.social__link--linkedin { color: #0A66C2; }
.social__link--youtube { color: #FF0000; }
.social__link--myspace { color: #030303; }
.social--context { margin-top: var(--ds-s5, 20px); margin-bottom: var(--ds-s5, 20px); }