/**
 * SIT Recycling evidence-led brand system.
 *
 * Presentation only. Operational state, permissions, validation and customer
 * data remain owned by the parent theme and companion plugins.
 */

:root {
  --sit-deep: #032f2a;
  --sit-deep-2: #075b4b;
  --sit-ink: #10231f;
  --sit-green: #075b4b;
  --sit-lime: #c7f53f;
  --sit-lime-hover: #d5fa61;
  --sit-paper: #f5f7f1;
  --sit-cream: #eef2ea;
  --sit-muted: #5f6e68;
  --sit-line: #d8e1db;
  --sit-orange: #9a4515;
  --sit-orange-on-dark: #ffb36b;
  --sit-text-on-dark: #fff;
  --sit-text-on-dark-muted: #dbeae2;
  --sit-shell: 1180px;
  --sit-radius-sm: .5rem;
  --sit-radius-md: .75rem;
  --sit-radius-lg: 1rem;
  --sit-shadow-soft: 0 1.25rem 3.75rem rgba(3, 47, 42, .08);
  --sit-shadow-card: 0 .8rem 2.4rem rgba(3, 47, 42, .065);
  --sit-page-hero-title-size: clamp(2.5rem, 3.35vw, 3.375rem);
  --sit-page-hero-title-measure: 18ch;
  --sit-hero-panel-width: 22.65rem;
  --sit-hero-column-gap: 4.125rem;
}

html {
  scroll-padding-top: 7rem;
}

body.sit-recycle-site {
  background: var(--sit-paper);
  color: var(--sit-ink);
  font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.sit-recycle-site :where(h1, h2, h3, h4, .sit-brand__name) {
  color: var(--sit-ink);
  font-family: Poppins, Inter, Aptos, "Segoe UI", Arial, sans-serif;
  text-wrap: balance;
}

body.sit-recycle-site :where(h1, h2) {
  letter-spacing: -.045em;
}

body.sit-recycle-site :where(p, li) {
  text-wrap: pretty;
}

body.sit-recycle-site :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--sit-lime);
  outline-offset: 3px;
}

body.sit-recycle-site .sit-shell {
  width: min(calc(100% - 48px), var(--sit-shell));
  max-width: var(--sit-shell);
}

/* One trust strip and one consistent navigation bar. */
body.sit-recycle-site .sit-site-header,
body.home.sit-recycle-site .sit-site-header {
  position: relative;
  inset: auto;
  z-index: 50;
  background: var(--sit-deep);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
}

/* Keep the office call link in the top strip on every screen size. */
body.sit-recycle-site .sit-site-header,
body.home.sit-recycle-site .sit-site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
body.sit-recycle-site .sit-site-header > .sit-announcement {
  grid-column: 1;
  min-width: 0;
  padding-left: max(24px, calc((100vw - var(--sit-shell)) / 2));
}
body.sit-recycle-site .sit-site-header .sit-announcement__inner {
  width: 100%;
  margin: 0;
  justify-content: flex-start;
}
body.sit-recycle-site .sit-site-header > .sit-inner-utility {
  display: flex;
  grid-column: 2;
  align-items: center;
  background: var(--sit-lime);
  color: var(--sit-ink);
  padding: 0 max(24px, calc((100vw - var(--sit-shell)) / 2)) 0 24px;
}
body.sit-recycle-site .sit-inner-utility > .sit-shell {
  display: flex;
  width: auto;
  margin: 0;
  padding: 0;
}
body.sit-recycle-site .sit-inner-utility p,
body.sit-recycle-site .sit-inner-utility nav > a:not([href^="tel:"]) {
  display: none;
}
body.sit-recycle-site .sit-inner-utility nav {
  display: flex;
  margin: 0;
  padding: 0;
}
body.sit-recycle-site .sit-inner-utility a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .35rem;
  color: var(--sit-ink);
  font-size: .875rem;
  font-weight: 750;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: .2em;
  white-space: nowrap;
}
body.sit-recycle-site .sit-inner-utility a[href^="tel:"]:hover {
  color: var(--sit-deep-2);
}
body.sit-recycle-site .sit-inner-utility a[href^="tel:"]:focus-visible {
  outline: 2px solid var(--sit-ink);
  outline-offset: -2px;
}
body.sit-recycle-site .sit-site-header > .sit-main-header {
  grid-column: 1 / -1;
  min-width: 0;
}
@media (max-width: 1050px) {
  body.sit-recycle-site .sit-site-header .sit-announcement__inner > span {
    display: none;
  }
}
@media (max-width: 640px) {
  body.sit-recycle-site .sit-site-header,
  body.home.sit-recycle-site .sit-site-header {
    grid-template-columns: minmax(0, 1fr);
  }
  body.sit-recycle-site .sit-site-header > .sit-announcement {
    display: flex;
    grid-column: 1;
    padding: .4rem 16px 0;
  }
  body.sit-recycle-site .sit-site-header .sit-announcement__inner {
    justify-content: center;
  }
  body.sit-recycle-site .sit-site-header > .sit-inner-utility {
    grid-column: 1;
    justify-content: center;
    padding: 0 16px;
  }
}

body.sit-recycle-site .sit-announcement {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  background: var(--sit-lime);
  color: var(--sit-ink);
}

body.sit-recycle-site .sit-announcement__inner {
  min-height: 2.25rem;
  gap: 1rem;
  justify-content: center;
  font-size: .76rem;
  line-height: 1.25;
}

body.sit-recycle-site .sit-announcement__inner strong {
  padding: .25rem .75rem;
  border: 1px solid rgba(16, 35, 31, .35);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.sit-recycle-site .sit-main-header {
  background: rgba(3, 47, 42, .98);
  color: #fff;
}

body.sit-recycle-site .sit-main-header__layout {
  min-height: 4.85rem;
}

body.sit-recycle-site .sit-brand {
  width: 4.1rem;
  height: 4.1rem;
  flex: 0 0 4.1rem;
  gap: 0;
  border: 1px solid rgba(199, 245, 63, .55);
  border-radius: .7rem;
  background: #f7faf7 url("https://sit-recycle.com/wp-content/uploads/2026/10/SIT-Recycling-compact-logo-responsive-asset-300x300.png") center / calc(100% - .55rem) auto no-repeat;
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .12);
  color: #fff;
}

body.sit-recycle-site .sit-brand__mark,
body.sit-recycle-site .sit-brand__name {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.sit-recycle-site .sit-primary-nav > ul > li > :where(a, button) {
  color: rgba(255, 255, 255, .86);
  font-size: .79rem;
  font-weight: 720;
}

body.sit-recycle-site .sit-primary-nav > ul > li > :where(a, button):hover,
body.sit-recycle-site .sit-primary-nav > ul > li > :where(a, button):focus-visible,
body.sit-recycle-site .sit-primary-nav > ul > li > button[aria-expanded="true"] {
  color: var(--sit-lime);
}

body.sit-recycle-site .sit-nav-panel {
  border: 1px solid rgba(3, 47, 42, .1);
  border-radius: 0 0 var(--sit-radius-md) var(--sit-radius-md);
  background: #fff;
  box-shadow: var(--sit-shadow-soft);
  color: var(--sit-ink);
}

body.sit-recycle-site .sit-nav-panel:not(.sit-nav-panel--wide) a,
body.sit-recycle-site .sit-nav-panel--wide > div :where(a, p) {
  color: var(--sit-ink);
}

body.sit-recycle-site .sit-nav-panel--wide > aside {
  border-radius: var(--sit-radius-sm);
  background: var(--sit-deep);
  color: #fff;
}

body.sit-recycle-site .sit-nav-panel--wide > aside :where(strong, p) {
  color: #fff;
}

body.sit-recycle-site .sit-nav-panel--wide > aside a {
  color: var(--sit-lime);
}

body.sit-recycle-site .sit-header-cta,
body.sit-recycle-site .sit-button,
body.sit-recycle-site :where(.sit-v63-primary, .sit-v631-wizard button[type="submit"]) {
  min-height: 3.25rem;
  border: 1px solid var(--sit-lime);
  border-radius: var(--sit-radius-sm);
  background: var(--sit-lime);
  color: var(--sit-ink);
  font-weight: 820;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

body.sit-recycle-site .sit-header-cta:hover,
body.sit-recycle-site .sit-header-cta:focus-visible,
body.sit-recycle-site .sit-button:hover,
body.sit-recycle-site .sit-button:focus-visible,
body.sit-recycle-site :where(.sit-v63-primary, .sit-v631-wizard button[type="submit"]):hover,
body.sit-recycle-site :where(.sit-v63-primary, .sit-v631-wizard button[type="submit"]):focus-visible {
  border-color: var(--sit-lime-hover);
  background: var(--sit-lime-hover);
  color: var(--sit-ink);
  transform: translateY(-1px);
}

/* Stronger, calmer hero hierarchy. */
body.sit-recycle-site :where(
  .sit-home-hero,
  .sit-page-hero,
  .sit-v63-hero,
  .sit-v631-collection-hero,
  .sit-v6311-hero,
  .sit-legal-hero
) {
  background-color: var(--sit-deep);
}

body.sit-recycle-site .sit-home-hero {
  min-height: clamp(38rem, 62vw, 45rem);
}

body.sit-recycle-site .sit-home-hero__grid {
  min-height: inherit;
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

/*
 * Shared hero geometry. Historic page generations used shells between 900px
 * and 1180px, five different copy/proof track ratios and gaps from 60px to
 * 109px. This creates a single alignment line for every public hero while
 * preserving each route's content and vertical spacing.
 */
body.sit-recycle-site :is(
  .sit-home-hero__grid,
  .sit-page-hero__grid,
  .sit-v63-hero__grid,
  .sit-v631-collection-hero__grid,
  .sit-v6311-hero__grid,
  .sit-legal-hero__grid
) {
  width: min(calc(100% - 48px), var(--sit-shell)) !important;
  max-width: var(--sit-shell) !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--sit-hero-panel-width)) !important;
  column-gap: var(--sit-hero-column-gap) !important;
  margin-inline: auto !important;
  justify-content: stretch !important;
  align-items: center;
}

body.sit-recycle-site :is(
  .sit-home-hero__grid,
  .sit-page-hero__grid,
  .sit-v63-hero__grid,
  .sit-v631-collection-hero__grid,
  .sit-v6311-hero__grid,
  .sit-legal-hero__grid
) > :is(:first-child, :nth-child(2)) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

body.sit-recycle-site :where(.sit-home-hero__copy, .sit-page-hero__copy) h1 {
  max-width: 15ch;
  color: #fff;
  font-size: clamp(2.9rem, 5vw, 4.85rem);
  font-weight: 780;
  line-height: .98;
  letter-spacing: -.058em;
}

/*
 * One canonical internal-page hero title. The explicit selector specificity is
 * intentional: the parent theme and the historic Customizer typography layer
 * contain route-specific !important rules. Keeping this single, documented
 * override here makes every internal hero predictable without changing the
 * more prominent homepage title.
 */
body.sit-recycle-site .sit-page-hero .sit-page-hero__copy h1,
body.sit-recycle-site .sit-v63-hero .sit-v63-hero__copy h1,
body.sit-recycle-site .sit-v631-collection-hero .sit-v631-collection-hero__copy h1,
body.sit-recycle-site .sit-v6311-hero .sit-v6311-hero__copy h1,
body.sit-recycle-site .sit-legal-hero .sit-legal-hero__copy h1 {
  width: min(100%, var(--sit-page-hero-title-measure)) !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  color: #fff !important;
  font-family: Poppins, Inter, Aptos, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--sit-page-hero-title-size) !important;
  font-weight: 760 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
}

body.sit-recycle-site .sit-page-hero .sit-page-hero__copy h1 > :where(span, strong, em),
body.sit-recycle-site .sit-v63-hero .sit-v63-hero__copy h1 > :where(span, strong, em),
body.sit-recycle-site .sit-v631-collection-hero .sit-v631-collection-hero__copy h1 > :where(span, strong, em),
body.sit-recycle-site .sit-v6311-hero .sit-v6311-hero__copy h1 > :where(span, strong, em),
body.sit-recycle-site .sit-legal-hero .sit-legal-hero__copy h1 > :where(span, strong, em) {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

body.sit-recycle-site :where(.sit-home-hero__copy, .sit-page-hero__copy) > p {
  max-width: 41rem;
  color: rgba(255, 255, 255, .74);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
}

body.sit-recycle-site :where(.sit-accounted-card, .sit-page-evidence) {
  border-radius: var(--sit-radius-lg);
  border-color: rgba(255, 255, 255, .22);
  background: rgba(3, 47, 42, .78);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .18);
  backdrop-filter: blur(14px);
}

body.sit-recycle-site .sit-principles {
  border-block-color: var(--sit-line);
  background: #fff;
}

body.sit-recycle-site .sit-principles article {
  min-height: 6.4rem;
}

/* Remove two visually repetitive homepage journeys and tighten the rest. */
body.home.sit-recycle-site :where(.sit-v62-catalogue-section, .sit-v62-value-triad) {
  display: none;
}

body.home.sit-recycle-site .sit-v62-section {
  padding-block: clamp(4.5rem, 7vw, 6.75rem);
}

body.home.sit-recycle-site :where(.sit-v62-service-story, .sit-v637-missions) {
  min-height: 0;
}

body.sit-recycle-site :where(.sit-section-heading, .sit-v62-trust-head, .sit-v62-split-head, .sit-v637-mission-head) h2 {
  max-width: 19ch;
  font-size: clamp(2.35rem, 4.8vw, 4.25rem);
  font-weight: 760;
  line-height: 1.02;
}

body.sit-recycle-site :where(
  .sit-v62-journey,
  .sit-v637-mission-card,
  .sit-v62-trust-card,
  .sit-v62-stage,
  .sit-v62-dashboard,
  .sit-v62-sector-card,
  .sit-v63-outcomes,
  .sit-commercial-portal
) {
  border-radius: var(--sit-radius-md);
}

body.sit-recycle-site :where(
  .sit-v637-mission-card,
  .sit-v62-trust-card,
  .sit-v62-stage,
  .sit-v62-sector-card,
  .sit-v63-outcomes
) {
  box-shadow: var(--sit-shadow-card);
}

body.sit-recycle-site .sit-v62-final-cta {
  padding-block: clamp(3.75rem, 6vw, 5.5rem);
  background: var(--sit-deep);
}

body.sit-recycle-site .sit-v62-final-cta :where(h2, p) {
  color: #fff;
}

body.sit-recycle-site .sit-v62-final-cta p {
  color: rgba(255, 255, 255, .7);
}

/* Forms: compact without sacrificing legibility or touch size. */
body.sit-recycle-site :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: #b8c6bf;
  border-radius: var(--sit-radius-sm);
  background: #fff;
  color: var(--sit-ink);
}

body.sit-recycle-site :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--sit-green);
  outline: 3px solid rgba(7, 91, 75, .16);
  box-shadow: none;
}

body.sit-recycle-site :where(label, legend) {
  color: var(--sit-ink);
}

/* Portal becomes a restrained product workspace while retaining its controls. */
body.sit-customer-dashboard-route {
  background: #eef2ea;
}

body.sit-customer-dashboard-route :where(.sit-v63-portal-sidebar, .sit-v63-portal-nav) {
  background: var(--sit-deep);
}

body.sit-customer-dashboard-route :where(.sit-v63-portal-card, .sit-v63-outcomes, .sit-commercial-quote) {
  border-radius: var(--sit-radius-md);
  border-color: var(--sit-line);
  box-shadow: 0 .55rem 1.8rem rgba(3, 47, 42, .055);
}

body.sit-customer-dashboard-route .sit-commercial-quote__status,
body.sit-customer-dashboard-route :where(.status, [class*="status"]) {
  border-radius: 999px;
}

/* A quieter, more deliberate footer. */
body.sit-recycle-site .sit-v62-footer {
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: #022822;
  color: rgba(255, 255, 255, .72);
}

body.sit-recycle-site .sit-v62-footer__top {
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3.75rem, 6vw, 5.5rem);
}

body.sit-recycle-site .sit-v62-footer h2 {
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

body.sit-recycle-site .sit-v62-footer a,
body.sit-recycle-site .sit-v62-footer button {
  color: rgba(255, 255, 255, .72);
  text-underline-offset: .18em;
}

body.sit-recycle-site .sit-v62-footer a:hover,
body.sit-recycle-site .sit-v62-footer a:focus-visible,
body.sit-recycle-site .sit-v62-footer button:hover,
body.sit-recycle-site .sit-v62-footer button:focus-visible {
  color: var(--sit-lime);
}

body.sit-recycle-site :where(.sit-v62-footer__legal, .sit-v62-footer__bottom) {
  border-top-color: rgba(255, 255, 255, .12);
}

@media (max-width: 1024px) {
  body.sit-recycle-site .sit-main-header__layout {
    min-height: 4.5rem;
  }

  body.sit-recycle-site .sit-home-hero {
    min-height: auto;
  }

  body.sit-recycle-site .sit-home-hero__grid {
    min-height: auto;
  }

  body.sit-recycle-site :is(
    .sit-home-hero__grid,
    .sit-page-hero__grid,
    .sit-v63-hero__grid,
    .sit-v631-collection-hero__grid,
    .sit-v6311-hero__grid,
    .sit-legal-hero__grid
  ) {
    column-gap: clamp(2.5rem, 5vw, var(--sit-hero-column-gap)) !important;
  }
}

@media (max-width: 800px) {
  html {
    scroll-padding-top: 5.5rem;
  }

  body.sit-recycle-site .sit-shell {
    width: min(calc(100% - 32px), var(--sit-shell));
    max-width: calc(100% - 32px);
  }

  body.sit-recycle-site :is(
    .sit-home-hero__grid,
    .sit-page-hero__grid,
    .sit-v63-hero__grid,
    .sit-v631-collection-hero__grid,
    .sit-v6311-hero__grid,
    .sit-legal-hero__grid
  ) {
    width: min(calc(100% - 32px), var(--sit-shell)) !important;
    max-width: calc(100% - 32px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 2rem !important;
  }

  body.sit-recycle-site .sit-announcement__inner {
    flex-direction: column;
    gap: .2rem;
    padding-block: .55rem;
    text-align: center;
  }

  body.sit-recycle-site .sit-main-header__layout {
    min-height: 4.4rem;
  }

  body.sit-recycle-site .sit-brand {
    width: 3.65rem;
    height: 3.65rem;
    flex-basis: 3.65rem;
  }

  body.sit-recycle-site .sit-primary-nav {
    background: var(--sit-deep);
  }

  body.sit-recycle-site .sit-primary-nav > ul > li > :where(a, button) {
    min-height: 3rem;
  }

  body.sit-recycle-site .sit-menu-button {
    border-color: rgba(255, 255, 255, .34);
    border-radius: var(--sit-radius-sm);
  }

  body.sit-recycle-site .sit-menu-button span {
    background: #fff;
  }

  body.sit-recycle-site .sit-home-hero__grid {
    padding-block: clamp(3.5rem, 11vw, 5rem);
  }

  body.sit-recycle-site :where(.sit-home-hero__copy, .sit-page-hero__copy) h1 {
    max-width: 16ch;
    font-size: clamp(2.45rem, 9.5vw, 3.8rem);
    line-height: 1.02;
  }

  body.home.sit-recycle-site .sit-v62-section {
    padding-block: clamp(3.75rem, 11vw, 5rem);
  }
}

@media (max-width: 767px) {
  :root {
    --sit-page-hero-title-size: clamp(2.125rem, 10vw, 2.625rem);
  }
}

@media (max-width: 560px) {
  body.sit-recycle-site .sit-shell {
    width: min(calc(100% - 40px), var(--sit-shell));
    max-width: calc(100% - 40px);
  }

  body.sit-recycle-site :is(
    .sit-home-hero__grid,
    .sit-page-hero__grid,
    .sit-v63-hero__grid,
    .sit-v631-collection-hero__grid,
    .sit-v6311-hero__grid,
    .sit-legal-hero__grid
  ) {
    width: min(calc(100% - 40px), var(--sit-shell)) !important;
    max-width: calc(100% - 40px) !important;
  }

  body.sit-recycle-site .sit-announcement__inner span {
    font-size: .69rem;
  }

  body.sit-recycle-site :where(.sit-home-hero__actions, .sit-page-hero__actions) {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  body.sit-recycle-site :where(.sit-home-hero__actions, .sit-page-hero__actions) > * {
    width: 100%;
    justify-content: center;
  }

  body.sit-recycle-site :where(.sit-home-hero__copy, .sit-page-hero__copy) > p {
    font-size: 1rem;
    line-height: 1.65;
  }

  body.sit-recycle-site .sit-v62-footer__top {
    padding-block: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sit-recycle-site *,
  body.sit-recycle-site *::before,
  body.sit-recycle-site *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}