@import url("./snq-variables.css");

/* ==========================================================================
   Global site base
   ========================================================================== */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: visible; /* don't trap scroll container */
  overflow-y: visible;
}

html,
body {
  margin: 0;
  padding: 0;
  /* background: var(--snq-blue); */
  /* so any “extra” space matches footer */
}

body {
  font-size: 1.8rem;
  font-weight: 400;
  color: #000;
  overflow-x: visible; /* don't trap scroll container */
  overflow-y: visible;
}

/* Apply gutters to the main content area */
.snq-site .wrapper.row3 {
  padding-left: var(--snq-gutter);
  padding-right: var(--snq-gutter);
  box-sizing: border-box;
}

/* All SNQ form inputs */
.snq-home-main input,
.snq-home-main select,
.snq-home-main textarea {
  font-size: 1.6rem !important;
}

h1 {
  font-size: 3rem;
  margin-bottom: 3rem;
  color: var(--snq-blue);
}

h2 {
  font-size: 2.4rem;
  /* color: var(--snq-h2-light-blue); */
  /* color: var(--snq-green-link-color); */
  /* color: #3a4a2e; */
  color: #000;

  line-height: 1.2;
  margin-bottom: 2rem;
}

h3 {
  font-size: 2rem;
  color: var(--snq-blue-light);
}

.snq-site ol,
.snq-site ul {
  margin-left: 2rem;
  padding-left: 2rem;
  margin-bottom: 3rem;
}

/* ==========================================================================
   REUSABLE STYLES
   ========================================================================== */

.snq-static-page {
  max-width: 1100px;
  margin: 4.8rem auto;
}

.marginT0 {
  margin-top: 0 !important;
}

.marginT10 {
  margin-top: 1rem !important;
}

.marginT14 {
  margin-top: 1.4rem !important;
}

.marginT24 {
  margin-top: 2.4rem !important;
}

.marginT36 {
  margin-top: 3.6rem !important;
}

.marginT48 {
  margin-top: 4.8rem !important;
}

.marginB48 {
  margin-bottom: 4.8rem !important;
}

.marginB24 {
  margin-bottom: 2.4rem !important;
}

.marginB20 {
  margin-bottom: 2rem !important;
}

.marginB14 {
  margin-bottom: 1.4rem !important;
}

.marginB10 {
  margin-bottom: 1rem !important;
}

.padding14 {
  padding: 1.4rem;
}

.paddingT14 {
  padding-top: 1.4rem !important;
}

.paddingB20 {
  padding-bottom: 2rem !important;
}

.background-light-blue {
  background-color: var(--snq-blue-extra-lite);
  border: 1px solid var(--snq-border-lighter-blue);
}

hr {
  border: none;
  height: 0.2rem;
  background-color: var(--snq-h2-light-blue);
  margin-bottom: 2rem;
}

hr.workshop {
  margin-bottom: 0;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a,
a:link,
a:visited,
span.link {
  color: var(--snq-green-link-color);
  font-weight: 600;
  text-decoration: none;
}

a:hover,
span.link:hover {
  color: var(--snq-green-link-color);
  text-decoration: underline;
  cursor: pointer;
}
a:focus,
span.link:focus {
  box-shadow: inset 0 0 0 1px rgb(192, 192, 192) !important;
  color: var(--snq-green-link-color);
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-primary,
.btn-primary:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  padding: 1.4rem 2rem;
  margin-top: 1.6rem;
  border: 2px solid var(--snq-blue);
  background: var(--snq-green-accent);
  color: var(--snq-blue) !important;
  font-weight: var(--snq-font-bold);
  letter-spacing: 1px;
  text-decoration: none !important;
  text-transform: uppercase;
  border-radius: var(--snq-border-radius-sm);
  transition: all 180ms ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-primary:hover,
.btn-primary:active {
  border-color: var(--snq-green-accent);
  background: var(--snq-blue);
  color: var(--snq-green-accent) !important;
}

.btn-primary-admin,
.btn-primary-admin:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  padding: 1.2rem 1.8rem;
  margin-top: 2.4rem;
  border: 2px solid var(--snq-blue);
  background: var(--snq-green-accent);
  color: var(--snq-blue) !important;
  font-weight: var(--snq-font-bold);
  letter-spacing: 1px;
  text-decoration: none !important;
  text-transform: uppercase;
  border-radius: var(--snq-border-radius-sm);
  transition: all 180ms ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-primary-admin:hover,
.btn-primary-admin:active {
  border-color: var(--snq-green-accent);
  background: var(--snq-blue);
  color: var(--snq-green-accent) !important;
}

.btn-secondary,
.btn-secondary:link,
.btn-secondary:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem !important;
  padding: 1.2rem 1.8rem;
  margin-top: 2.4rem;
  border: 2px solid var(--snq-blue);
  background: #fff;
  color: var(--snq-blue);
  font-weight: var(--snq-font-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: var(--snq-border-radius-sm);
  transition: all 180ms ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary:active {
  background: #97e7f3;
}

.btn-primary-no-margin {
  margin-top: 0 !important;
}

.btn-secondary-admin-no-margin {
  margin-top: 0 !important;
  margin-left: 2.4rem;
}

.btn--no-top-margin {
  margin-top: 0 !important;
}

/* ==========================================================================
   Base typography + sticky header safety (targeted)
   ========================================================================== */

/* Keep global type defaults */
p,
li {
  font-size: 1.8rem;
  line-height: 3rem;
  margin-bottom: 1.6rem;
  padding: 0;
  color: #000;
}

/* ==========================================================================
   Site base (relevant to header)
   ========================================================================== */

.snq-site {
  font-family: var(--snq-font-sans);

  /* JS can set this if you need it elsewhere */
  --snq-sticky-header-h: 0px;
}

/* ==========================================================================
     Sticky header safety overrides (targeted)
     Sticky breaks if an ancestor has overflow != visible
     or creates a containing block via transform/filter/contain.
     ========================================================================== */

/* Keep this as small as possible: only ancestors of the header row */
.snq-site,
.snq-site > form,
.wrapper,
.wrapper.row1,
#container {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  font-size: 1.8rem !important;
}

/* ==========================================================================
     Sticky header: single source of truth
     - Sticky is owned by the ROW wrapper (.wrapper.row1)
     - The <header> stays normal flow inside it
     ========================================================================== */

/* Sticky the OUTER row that contains the header */
/* normal row */
.snq-site .wrapper.row1 {
  position: relative;
  z-index: 9999;
  background: var(--snq-blue);
}

/* fixed state */
.snq-site .wrapper.row1.snq-row1--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* reserve space globally while header is fixed */
.snq-site.snq-header-is-fixed {
  padding-top: var(--snq-sticky-header-h);
}

/* do not also push the image band down */
.snq-site .wrapper.row1.snq-row1--fixed + .snq-imageband {
  margin-top: 0;
}
/* ==========================================================================
     Sticky header "scrolled" state (JS toggles .snq-header--scrolled)
     ========================================================================== */

.snq-site .snq-header.snq-header--scrolled .snq-header-main {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.snq-site .snq-header.snq-header--scrolled .snq-header-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

.snq-site .snq-header.snq-header--scrolled .snq-header-logo {
  transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .snq-site .snq-header-main,
  .snq-site .snq-header-inner,
  .snq-site .snq-header-logo {
    transition: none !important;
  }
}

/* ==========================================================================
   Skip Link (Accessibility)
   ========================================================================== */

.snq-site .snq-skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 9999;
  background: #ffffff;
  color: #000000;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.snq-site .snq-skip-link:focus {
  left: 10px;
}

/* ==========================================================================
   Header (global) — aligned with slider + band using a shared gutter
   ========================================================================== */

.snq-site {
  /* One knob for left/right “page margins” everywhere */

  /* Fallback content width on non-home pages */
  --snq-max-content: 1100px;
}

/* Main header bar */
.snq-site .snq-header-main {
  width: 100%;
  background-color: var(--snq-blue);
  transition: box-shadow 200ms ease, background-color 200ms ease;
}

/*
    IMPORTANT:
    - We center using the SAME “snap window” width concept as the bands.
    - We also add the SAME horizontal gutter padding as the slider/band viewports.
  */
.snq-site .snq-header-inner {
  width: min(
    100%,
    calc(
      var(--snq-snap-width, var(--snq-max-content)) + (2 * var(--snq-gutter))
    )
  );
  margin: 0 auto;

  /* uniform left/right breathing room */
  padding: 18px var(--snq-gutter);

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 20px;

  box-sizing: border-box;
  transition: padding 200ms ease;
}

/* ==========================================================================
   Left: Brand / Logo
   ========================================================================== */

.snq-site .snq-header-brand {
  display: flex;
  align-items: center;
}

.snq-site .snq-header-home-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.snq-site .snq-header-logo {
  max-height: 70px;
  height: auto;
  width: auto;
  display: block;

  /* Scroll animation hooks */
  transform-origin: left center;
  transition: transform 200ms ease;
}

/* ==========================================================================
   Center: Institution Name
   ========================================================================== */

.snq-site .snq-header-center {
  text-align: center;
  color: #ffffff;
  font-weight: var(--snq-font-semibold);
  letter-spacing: 0.08em;
  font-size: 14px;
  text-transform: uppercase;

  /* Allows it to compress gracefully if needed */
  min-width: 0;
}

/* ==========================================================================
   Right: CTA Button
   ========================================================================== */

.snq-site .snq-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 2px solid var(--snq-green-light);
  color: var(--snq-green-light);
  font-weight: var(--snq-font-bold);
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  background: transparent;
  border-radius: var(--snq-border-radius-sm);
  transition: all 180ms ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.snq-site .snq-header-cta:hover,
.snq-site .snq-header-cta:focus-visible {
  background-color: var(--snq-green-light);
  color: var(--snq-blue);
}

/* ==========================================================================
   HOME ONLY: fallback when sticky refuses to stick on SurveyHome.aspx
   (keeps non-home pages on sticky; home uses fixed)
   ========================================================================== */

/* Pin the row that contains the header */
.snq-site.snq-is-home .wrapper.row1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--snq-blue);
}

/* Header itself stays normal flow inside the fixed row */
.snq-site.snq-is-home .snq-header {
  position: static;
  background: transparent;
}

/* Push MAIN CONTENT down (this is where the home slider lives) */
.snq-site.snq-is-home .wrapper.row3 {
  padding-top: var(--snq-sticky-header-h, 0px);
}

/* ==========================================================================
   Static Image Band (non-home pages) — NO partial tiles + aligned gutters
   ========================================================================== */

.snq-site {
  --snq-band-tile: 150px;
  --snq-band-gap: 22px;

  /* Default visible tiles on widest screens */
  --snq-band-visible: 9;

  /* Computed “snap” width for exactly N whole tiles (no gutters) */
  --snq-band-snap: calc(
    (var(--snq-band-visible) * var(--snq-band-tile)) +
      ((var(--snq-band-visible) - 1) * var(--snq-band-gap))
  );

  /*
      Set the global snap width so header/footer can match non-home pages too.
      This one includes ONLY the tiles+gaps (NOT gutters). Header adds gutters.
    */
  --snq-snap-width: var(--snq-band-snap);
}

/* ==========================================================================
   Static Image Band (non-home pages)
   ========================================================================== */
/* ==========================================================
   STATIC BAND (non-home): full-bleed background + snapped tiles
   ========================================================== */

.snq-imageband {
  background: var(--snq-blue);
  border-bottom: 2px solid var(--snq-border-light-blue);
  padding: 10px 0 14px;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.snq-imageband__viewport {
  width: 100%;
  max-width: calc(var(--snq-snap-width) + (2 * var(--snq-gutter)));
  margin: 0 auto;

  padding: 6px var(--snq-gutter);
  box-sizing: border-box;

  overflow: hidden;
  position: relative;
}

.snq-imageband__track {
  display: flex;
  gap: var(--snq-band-gap);
  align-items: center;
  transform: translateZ(0);
}

.snq-imageband__item {
  flex: 0 0 auto;
  width: var(--snq-band-tile);
  height: var(--snq-band-tile);
  box-sizing: border-box;
  overflow: hidden;
}

.snq-site .snq-imageband__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive visible counts (whole-tile snapping) */
@media (max-width: 1600px) {
  .snq-site {
    --snq-band-visible: 8;
  }
}
@media (max-width: 1300px) {
  .snq-site {
    --snq-band-visible: 6;
  }
}
@media (max-width: 1100px) {
  .snq-site {
    --snq-band-visible: 5;
  }
}
@media (max-width: 900px) {
  .snq-site {
    --snq-band-visible: 4;
  }
}
@media (max-width: 720px) {
  .snq-site {
    --snq-band-visible: 3;
  }
}
@media (max-width: 520px) {
  .snq-site {
    --snq-band-visible: 2;
  }
}
@media (max-width: 360px) {
  .snq-site {
    --snq-band-visible: 1;
  }
}

/* Responsive: reduce how many tiles are fully visible by shrinking snap-width */

/* 8 visible: 8*150 + 7*22 = 1200 + 154 = 1354 */
@media (max-width: 1600px) {
  .snq-site {
    --snq-snap-width: 1354px;
  }
}

/* 7 visible: 7*150 + 6*22 = 1050 + 132 = 1182 */
@media (max-width: 1400px) {
  .snq-site {
    --snq-snap-width: 1182px;
  }
}

/* 6 visible: 6*150 + 5*22 = 900 + 110 = 1010 */
@media (max-width: 1300px) {
  .snq-site {
    --snq-snap-width: 1010px;
  }
}

/* 5 visible: 5*150 + 4*22 = 750 + 88 = 838 */
@media (max-width: 1100px) {
  .snq-site {
    --snq-snap-width: 838px;
  }
}

/* 4 visible: 4*150 + 3*22 = 600 + 66 = 666 */
@media (max-width: 900px) {
  .snq-site {
    --snq-snap-width: 666px;
  }
}

/* 3 visible: 3*150 + 2*22 = 450 + 44 = 494 */
@media (max-width: 720px) {
  .snq-site {
    --snq-snap-width: 494px;
  }
}

/* 2 visible: 2*150 + 1*22 = 300 + 22 = 322 */
@media (max-width: 520px) {
  .snq-site {
    --snq-snap-width: 322px;
  }
}

/* 1 visible: 150 */
@media (max-width: 360px) {
  .snq-site {
    --snq-snap-width: 150px;
  }
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

/* .snq-home-main {
  margin-top: 4.8rem;
  margin-bottom: 4.8rem;
} */

/* ==========================================================================
   Main content width (all non-home pages)
   Match header/footer "snap window" gutters + width
   ========================================================================== */

/* Row3 (the legacy main-content wrapper) spans full width, but we center the inner container */
.snq-site .wrapper.row3 {
  width: 100%;
}

/* Center the legacy #container and give it the same side padding as header/footer */
.snq-site .wrapper.row3 #container {
  width: min(100%, calc(var(--snq-snap-width) + (2 * var(--snq-gutter))));
  margin: 0 auto;
  box-sizing: border-box;
}

/* ==========================================================================
   Responsive Refinements
   ========================================================================== */

@media (max-width: 900px) {
  .snq-site .snq-header-main {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .snq-site .snq-header-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 14px; /* base vertical spacing */
  }

  .snq-site .snq-header-brand {
    justify-content: center;
  }

  .snq-site .snq-header-logo {
    max-width: 360px;
  }

  .snq-site .snq-header-center {
    white-space: normal;
    max-width: 90%;
    margin: 0;
  }

  /* Add extra space specifically between the center text and the CTA */
  .snq-site .snq-header-cta {
    margin-top: 6px;
    justify-self: center;
  }
}

@media (max-width: 520px) {
  .snq-site .snq-header-logo {
    max-width: 300px;
  }

  .snq-site .snq-header-center {
    font-size: 13px;
    letter-spacing: 0.07em;
  }
}

/* ==========================================================================
   SURVEY STYLES NOT IN REMLAYOUT.CSS
   ========================================================================== */

.margin-top-main {
  margin-top: 4.8rem;
}

h1.questionText {
  font-size: 3rem;
  line-height: 1.2;
}

#cphMainContent_ddlSelectLbl {
  font-size: 1.8rem;
}

.text--survey-progress {
  padding-top: 0.35rem;
  font-size: 1.6rem;
}

label {
  font-size: 1.8rem;
  margin-bottom: 1.4rem;
  margin-top: 2rem;
}

li label {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.one_quarter {
  margin: 0 !important;
}

.h2--survey {
  color: #000;
  font-weight: var(--snq-font-semibold);
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 4.8rem 0 0px;
}

.h2--survey-results {
  color: #000;
  font-weight: var(--snq-font-semibold);
  font-size: 2.4rem;
  line-height: 1.2;
}

.h2--review-exit {
  margin: 3.6rem 0 2.4rem;
}

.h3--survey {
  font-size: 2rem;
}

.snq-survey input[type="text"]::placeholder {
  font-size: 1.6rem;
  opacity: 1;
}

.snq-survey input[type="text"] {
  font-size: 1.6rem; /* change to whatever size you want */
  padding-left: 1rem;
}

.surveynav {
  margin-bottom: 4.8rem;
}

.custom-control-input li {
  margin-bottom: 0;
}

.surveyNewBg {
  background-color: var(--snq-green-bright);
}

/* Text in list on Survey Results page */
[type="checkbox"] + label {
  font-size: 1.8rem;
  font-weight: 500;
}

/* makes checkmark on Survey Results page green */
[type="checkbox"]:checked:disabled + label::before {
  border-right: 2px solid var(--snq-green-bright);

  border-bottom: 2px solid var(--snq-green-bright);
}

/* margin below Sign Up button on Survey Results page */
.btn--sign-up {
  margin-bottom: 4.8rem;
}

.text--workshop {
  margin-bottom: 2.4rem !important;
}

/* ==========================================================================
   CONTACT US PAGE
   ========================================================================== */

.snq-contact-page h1 {
  margin-bottom: 2rem;
}

.snq-contact-page > p {
  margin-bottom: 3rem;
}

.snq-contact-card {
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #d9e2ec;
  background: #fff;
}

.snq-contact-card div {
  margin-bottom: 0.7rem;
}

.snq-contact-card--alt {
  background: #f7fafc;
}

/* ==========================================================================
   Footer (global)
   ========================================================================== */

.snq-site .snq-footer,
.snq-site .snq-footer * {
  margin: 0;
}

.snq-site .snq-footer {
  width: 100%;
  font-family: inherit;
}

.snq-site .snq-footer {
  background: var(--snq-blue);
  border-top: 2px solid var(--snq-border-light-blue);
  padding-bottom: 24px; /* fills the “below footer” area visually */
}

.snq-site .snq-footer-top {
  width: 100%;
  background: var(--snq-blue);

  height: 92px; /* total footer height */
  display: flex;

  /* TOP align the inner row */
  align-items: flex-start; /* key change */
}

/* Align footer content to the same width as header/slider */
.snq-site .snq-footer-inner {
  width: min(100%, calc(var(--snq-snap-width) + (2 * var(--snq-gutter))));
  margin: 0 auto;

  /* Put the content near the top of the blue area */
  padding-top: 24px; /* tweak this number to taste */
  padding-bottom: 0;

  display: flex;
  align-items: flex-start; /* key change */
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
}

/* Left: copyright */
.snq-site .snq-footer-left {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Right: links */
.snq-site .snq-footer-nav {
  display: flex;
  align-items: flex-start; /* key change */
  justify-content: flex-end;
  gap: 28px;
  flex-wrap: nowrap;
  text-align: right;
}

.snq-site .snq-footer-nav a,
.snq-footer-left a {
  color: var(--snq-green-light);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.2;
}

.snq-site .snq-footer-nav a:hover,
.snq-footer-left a:hover,
.snq-site .snq-footer-nav a:focus-visible,
.snq-footer-left a:focus-visible {
  text-decoration: underline;
}

/* Mobile: allow wrapping but keep it feeling “near the top” */
@media (max-width: 900px) {
  .snq-site .snq-footer-top {
    height: auto; /* let it grow if it wraps */
  }

  .snq-site .snq-footer-inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: center;
    padding-top: 14px; /* keep the same top inset */
    padding-bottom: 14px;
  }

  .snq-site .snq-footer-left {
    white-space: normal;
    line-height: 1.4;
  }

  .snq-site .snq-footer-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    text-align: center;
  }
}

/* ==========================================================
   GLOBAL ALIGNMENT OVERRIDES (paste LAST in the CSS cascade)
   ========================================================== */

:root {
  /* image band geometry */
  --snq-band-tile: 150px;
  --snq-band-gap: 22px;

  /* 10 visible tiles: (10*150) + (9*22) = 1698px */
  --snq-snap-width: 1698px;
}

/* If your site DOESN'T actually have .snq-site on body/wrapper,
     these rules still apply because we target the classes directly. */
.snq-header .snq-header-inner,
.snq-footer .snq-footer-inner,
.snq-footer .snq-footer__inner,
.snq-footer .footer-inner {
  /* make the inner container match the band snap width + gutters */
  max-width: calc(var(--snq-snap-width) + (2 * var(--snq-gutter)));
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  /* the actual left/right “margin” feel */
  padding-left: var(--snq-gutter);
  padding-right: var(--snq-gutter);

  box-sizing: border-box;
}

/* If your footer doesn’t have an inner wrapper, force padding on footer itself */
.snq-footer {
  padding-left: var(--snq-gutter);
  padding-right: var(--snq-gutter);
  box-sizing: border-box;
}

:root {
  --snq-band-tile: 150px;
  --snq-band-gap: 22px;

  /* 10 tiles: (10 * 150) + (9 * 22) */
  --snq-snap-width: 1698px;
}

/* Shared outer alignment */
.snq-header-inner,
.snq-imageband__viewport,
.snq-home .band-slider__viewport,
.wrapper.row3 #container,
.snq-footer .wrapper,
.snq-footer-inner {
  width: min(100%, calc(var(--snq-snap-width) + (2 * var(--snq-gutter))));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ==========================================================================
   FINAL ALIGNMENT OVERRIDES (paste at VERY bottom of snq-redesign.css)
   Makes header/footer/home slider/static band share identical margins
   and guarantees EXACTLY 10 visible tiles (no partial tile).
   ========================================================================== */

/* 1) SINGLE SOURCE OF TRUTH for geometry + margins */
:root {
  --snq-gutter: 18px; /* left/right “page margin” everywhere */
  --snq-band-tile: 150px; /* tile box size (includes border) */
  --snq-band-gap: 22px; /* gap between tiles */
  --snq-band-visible: 10; /* how many tiles at full width */
  --snq-snap-width: calc(
    (var(--snq-band-visible) * var(--snq-band-tile)) +
      ((var(--snq-band-visible) - 1) * var(--snq-band-gap))
  );
}

/* keep vars available on the site wrapper too (and override any older .snq-site blocks) */
/* .snq-site {
  --snq-gutter: var(--snq-gutter);
  --snq-band-tile: var(--snq-band-tile);
  --snq-band-gap: var(--snq-band-gap);
  --snq-band-visible: var(--snq-band-visible);
  --snq-snap-width: var(--snq-snap-width);
} */

/* 2) Guarantee tile math: borders do NOT increase total width */
.snq-site .band-slider__item,
.snq-site .snq-imageband__item {
  box-sizing: border-box;
  width: var(--snq-band-tile);
  height: var(--snq-band-tile);
}

.snq-site .band-slider__item img,
.snq-site .snq-imageband__item img {
  box-sizing: border-box;
}

/* 3) Shared “outer width” used by header/footer/bands */
.snq-site .snq-header-inner,
.snq-site .snq-footer-inner {
  width: min(100%, calc(var(--snq-snap-width) + (2 * var(--snq-gutter))));
  margin: 0 auto;
  padding-left: var(--snq-gutter);
  padding-right: var(--snq-gutter);
  box-sizing: border-box;
}

/* ---------------- HOME: full-bleed blue band + centered 10-tile window ---------------- */

.snq-home .snq-home-slider {
  background: var(--snq-blue);
  border-bottom: 2px solid var(--snq-border-light-blue);
  padding: 10px 0 14px; /* NO side padding on the full-bleed element */
  margin-bottom: 28px;

  /* full-bleed */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Viewport = clipped window that lines up with header/footer outer width */
.snq-home .band-slider__viewport {
  position: relative;
  overflow: hidden;

  width: min(100%, calc(var(--snq-snap-width) + (2 * var(--snq-gutter))));
  margin: 0 auto;
  padding: 6px var(--snq-gutter);
  box-sizing: border-box;
}

/* Track = EXACT snap width so you get exactly 10 tiles when there’s room */
.snq-home .band-slider__track {
  width: var(--snq-snap-width);
  margin: 0 auto;

  display: flex;
  gap: var(--snq-band-gap);
  align-items: center;
}

/* ---------------- NON-HOME: static image band uses SAME rules ---------------- */

.snq-site .snq-imageband {
  background: var(--snq-blue);
  border-bottom: 2px solid var(--snq-border-light-blue);
  padding: 10px 0 14px; /* NO side padding on the full-bleed element */

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.snq-site .snq-imageband__viewport {
  position: relative;
  overflow: hidden;

  width: min(100%, calc(var(--snq-snap-width) + (2 * var(--snq-gutter))));
  margin: 0 auto;
  padding: 6px var(--snq-gutter);
  box-sizing: border-box;
}

.snq-site .snq-imageband__track {
  width: var(--snq-snap-width);
  margin: 0 auto;

  display: flex;
  gap: var(--snq-band-gap);
  align-items: center;
}

/* 4) Responsive: reduce visible tile count by swapping snap width */
@media (max-width: 1600px) {
  :root {
    --snq-band-visible: 8;
  }
}
@media (max-width: 1300px) {
  :root {
    --snq-band-visible: 6;
  }
}
@media (max-width: 1100px) {
  :root {
    --snq-band-visible: 5;
  }
}
@media (max-width: 900px) {
  :root {
    --snq-band-visible: 4;
  }
}
@media (max-width: 720px) {
  :root {
    --snq-band-visible: 3;
  }
}
@media (max-width: 520px) {
  :root {
    --snq-band-visible: 2;
  }
}
@media (max-width: 360px) {
  :root {
    --snq-band-visible: 1;
  }
}

/* ==== Authoritative geometry values on the site wrapper (NO self-references) ==== */
.snq-site {
  --snq-gutter: 18px !important;
  --snq-band-tile: 150px !important;
  --snq-band-gap: 22px !important;
  --snq-band-visible: 10 !important;

  /* 10 tiles: (10*150) + (9*22) = 1698 */
  --snq-snap-width: calc(
    (var(--snq-band-visible) * var(--snq-band-tile)) +
      ((var(--snq-band-visible) - 1) * var(--snq-band-gap))
  ) !important;
}

/* Make sure borders don't change the math */
.snq-site .band-slider__item,
.snq-site .snq-imageband__item {
  box-sizing: border-box;
  width: var(--snq-band-tile);
  height: var(--snq-band-tile);
}

/* ==========================================================================
   FINAL OVERRIDES (keep this at the very bottom of snq-redesign.css)
   - Single source of truth for gutter + band geometry
   ========================================================================== */

:root {
  /* Page side padding (header/footer/content alignment) */
  --snq-gutter: 18px;

  /* Image tile geometry */
  --snq-band-tile: 150px;
  --snq-band-gap: 22px;

  /* How many tiles should show at full width */
  --snq-band-visible: 10;

  /* Derived: EXACT pixel width of N tiles + gaps */
  --snq-snap-width: calc(
    (var(--snq-band-visible) * var(--snq-band-tile)) +
      ((var(--snq-band-visible) - 1) * var(--snq-band-gap))
  );
}

/* Ensure .snq-site inherits the same values (no redefinition loops) */
.snq-site {
  --snq-gutter: var(--snq-gutter);
  --snq-band-tile: var(--snq-band-tile);
  --snq-band-gap: var(--snq-band-gap);
  --snq-band-visible: var(--snq-band-visible);
  --snq-snap-width: var(--snq-snap-width);
}