/* Home page */

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--gradient-forest);
}

.hero-media {
  position: absolute;
  inset: -10% -5% -5%;
  z-index: 0;
  height: auto;
  border-radius: 0;
}

/* Same file as the About hero, deliberately — one download serves both pages
   and the two heroes read as a pair. */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lowered from 0.8/0.6/0.7 to match .about-hero-media::after, since both heroes
   now carry the same photograph exported at 50% exposure. Measured against the
   lightest 5% of that image, the 75%-white hero lead reads 5.4:1. The photo and
   this scrim are a matched pair — change one, re-measure the other. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(20, 32, 12, 0.55) 0%, rgba(28, 44, 20, 0.42) 50%,
    rgba(34, 52, 24, 0.48) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: clamp(120px, 22vh, 160px) var(--gutter) clamp(60px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero-content h1 {
  color: var(--color-white);
}

.hero-tagline {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-accent);
}

.hero-lead {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 38px;
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-feature {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  padding: 22px 26px;
}

.hero-feature-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.hero-feature-icon {
  display: flex;
  align-items: center;
  height: 26px;
  font-size: 26px;
  font-weight: 900;
  color: var(--color-accent);
}

.hero-feature-icon svg {
  width: 20px;
  height: 20px;
}

.hero-feature-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
}

.hero-feature p {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

/* Only shown once there's room for it beside the content. On a phone the hero
   stacks and this absolutely-positioned hint landed inside the last feature
   card, so it comes off entirely below the two-column breakpoint. */
.hero-scroll {
  display: none;
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-scroll span:first-child {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.45);
}

.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  animation: hero-scroll-hint 2s ease-in-out infinite;
}

@keyframes hero-scroll-hint {
  0% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

@media (min-width: 1024px) {
  .hero-scroll {
    display: flex;
  }

  .hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
  }
}

/* ---------- outlook stats ---------- */

.outlook {
  background: var(--color-ink);
  padding: var(--space-section-sm) var(--gutter);
}

.outlook-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
  margin-bottom: 34px;
}

/* Four stats, so the column count is set explicitly rather than left to auto-fit.
   Auto-fit was picking three columns in the middle of the range and orphaning the
   fourth stat on a row of its own. */
.outlook-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 480px) {
  .outlook-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .outlook-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.outlook-stat {
  text-align: center;
  padding: 18px 16px;
}

.outlook-value {
  font-size: clamp(2.125rem, 4.4vw, 3.375rem);
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -1.5px;
}

.outlook-label {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-top: 12px;
}

/* One per line on a phone — three of these side by side wrapped into an uneven
   2+1 and read as a mistake. The rows are left-aligned to each other inside a
   block that is itself centred: centring each row individually instead left the
   icons in a zigzag, because Deloitte's second line is longer than "Award". */
.recognition {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  gap: 14px;
  margin: 42px auto 0;
  padding-top: 34px;
}

@media (min-width: 768px) {
  .recognition {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 14px 40px;
  }
}

.recognition-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recognition-dot {
  display: flex;
  align-items: center;
  color: var(--color-accent);
}

.recognition-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-white);
}

.recognition-type {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 1px;
}

/* ---------- trusted strip ---------- */

.trusted-strip {
  background: var(--color-cream);
  padding: 52px var(--gutter);
}

.trusted-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--color-accent-text);
  text-align: center;
  margin-bottom: 26px;
}

/* How many names sit across the strip at once. JS reads this value back so the
   carousel always steps by exactly one screenful, whatever the breakpoint. */
.trusted-viewport {
  --per-view: 2;
  max-width: 1180px;
  margin: 0 auto;
}

/* The no-JS state, and what crawlers read: every name on the page at once,
   wrapped into rows. The carousel is an enhancement on top of this, never the
   only way to see the list. */
.trusted-names {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
}

.trusted-names li {
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height, not height: "Maple Leaf Sports & Entertainment" wraps to three
     lines on a narrow phone and a fixed 54px would clip the last one. */
  min-height: 54px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--color-ink);
}

/* JS on: same list, now a track that slides one bucket at a time. */
.trusted-viewport.is-ready {
  overflow: hidden;
}

.trusted-viewport.is-ready .trusted-names {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  transition: transform 0.6s ease;
}

.trusted-viewport.is-ready .trusted-names li {
  flex: 0 0 calc(100% / var(--per-view));
  padding: 0 14px;
}

@media (min-width: 768px) {
  .trusted-viewport { --per-view: 3; }
}

@media (min-width: 1024px) {
  .trusted-viewport { --per-view: 5; }
}

/* ---------- who we serve ---------- */

.serve {
  background: var(--color-white);
  padding: var(--space-section-lg) var(--gutter);
}

.serve-intro {
  max-width: 1180px;
  margin: 0 auto 48px;
}

.serve-intro .eyebrow {
  margin-bottom: 16px;
}

.serve-intro h2 {
  max-width: 740px;
}

.serve-lead {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 620px;
}

.serve-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}

.serve-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  padding-bottom: 24px;
}

.serve-card-business { background: linear-gradient(135deg, var(--color-forest-1), var(--color-forest-3)); }
.serve-card-dealer { background: linear-gradient(135deg, var(--color-navy-1), var(--color-navy-3)); }
.serve-card-charity { background: linear-gradient(135deg, #1c1c1c, #383838); }

.serve-card-media {
  height: 176px;
  position: relative;
  border-radius: 0;
}

/* The card band is a fixed 176px tall and the cards themselves change width at
   every breakpoint, so the photo has to crop rather than squash. Applies to the
   img and to the gradient placeholder still standing in on the dealer card. */
img.serve-card-media {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* Colour wash over each photo, taken from the card's own gradient via
   `background: inherit` — green on the business card, navy on the dealer card,
   near-black on the charity card, with no per-variant rule to keep in sync. If
   a card's gradient is ever retuned, its wash follows automatically.
   The height matches .serve-card-media exactly; if that 176px ever changes,
   change it here too. */
.serve-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 176px;
  z-index: 1;
  pointer-events: none;
  background: inherit;
  opacity: 0.55;
}

/* The icon straddles the bottom edge of the photo, so it has to sit above the
   wash rather than under it. */
.serve-card-icon {
  z-index: 2;
}

.serve-card-icon {
  position: absolute;
  left: 26px;
  top: 150px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  /* Dark ink on the lime circle, not white — white on #83c340 is 2.13:1 and fails
     the 3:1 minimum for meaningful graphics. This pairing measures 7.13:1. */
  color: var(--color-forest-1);
  box-shadow: var(--shadow-sm);
}

.serve-card-body {
  padding: 44px 30px 26px;
}

.serve-card-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent);
}

.serve-card h3 {
  font-size: 22px;
  color: var(--color-white);
  margin: 12px 0;
}

.serve-card-body p {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
}

/* This used to be absolutely positioned at bottom: 24px inside 64px of reserved
   card padding — but the button is 44px tall, so 24 + 44 needed 68 and it sat on
   the last line of copy at almost every width. In normal flow with margin-top:
   auto it still hangs at the bottom-right of the card and can't collide. */
.serve-card-cta {
  align-self: flex-end;
  margin-top: auto;
  margin-right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(131, 195, 64, 0.14);
  border: 1px solid var(--color-accent-tint-border);
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 900;
  color: var(--color-accent);
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast);
}

/* The card itself is no longer a link — only this button is — so the hover state
   has to carry the whole affordance. Fills solid, flips to dark ink for contrast,
   lifts slightly, and the arrow slides. The global reduced-motion rule in base.css
   already zeroes these transitions. */

.serve-card-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.serve-card-cta:hover,
.serve-card-cta:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-forest-1);
  transform: translateY(-2px);
}

.serve-card-cta:hover .serve-card-arrow,
.serve-card-cta:focus-visible .serve-card-arrow {
  transform: translateX(4px);
}

/* ---------- case studies (hidden — client hasn't cleared these images) ---------- */

.cases {
  background: var(--color-cream);
  padding: var(--space-section-lg) var(--gutter);
}

.cases-intro {
  max-width: 1180px;
  margin: 0 auto 48px;
}

.cases-intro .eyebrow {
  margin-bottom: 16px;
}

.cases-intro h2 {
  max-width: 700px;
}

.cases-lead {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 560px;
}

.case-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.case-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}

.case-card-media {
  height: 168px;
  position: relative;
  border-radius: 0;
}

.case-card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.case-card-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent-text);
}

.case-card-body h3 {
  font-size: 21px;
  color: var(--color-ink);
  margin: 10px 0 8px;
}

.case-card-body p {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-muted);
  flex: 1;
}

.case-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.case-stat {
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.case-stat-value {
  font-size: 17px;
  font-weight: 900;
  color: var(--color-accent-text);
  line-height: 1;
}

.case-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-muted);
  margin-top: 5px;
}

/* ---------- process ---------- */

.process-intro {
  background: var(--color-white);
  padding: clamp(72px, 13vh, 140px) var(--gutter) clamp(40px, 6vh, 70px);
  display: flex;
  justify-content: center;
}

.process-intro-inner {
  max-width: 860px;
  text-align: center;
}

.process-intro-inner .eyebrow {
  margin-bottom: 20px;
}

/* Wayfinding dots for the four-step story below. site.js toggles opacity and
   .is-active as the matching step scrolls through the middle of the viewport. */
.step-rail {
  display: none;
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

.step-rail-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.step-rail-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(51, 51, 51, 0.2);
  transition: var(--transition-base);
}

.step-rail-dot.is-active::before {
  background: var(--color-accent);
  transform: scale(1.3);
}

@media (min-width: 1024px) {
  .step-rail {
    display: flex;
  }
}

.step {
  padding: clamp(72px, 10vh, 120px) var(--gutter);
}

.step-discovery { background: var(--color-white); }
.step-sorting { background: var(--color-cream); }
.step-divert { background: var(--color-accent-soft); }

.step-report {
  background: var(--color-ink);
  color: var(--color-white);
}

.step-report h2 {
  color: var(--color-white);
}

.step-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
  align-items: center;
}

.step-number {
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -2px;
  color: rgba(131, 195, 64, 0.5);
}

.step-eyebrow {
  margin: 22px 0 14px;
}

.step-report .step-eyebrow {
  color: var(--color-accent);
}

.step-text p {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-size: 1.09375rem;
  line-height: 1.75;
  color: var(--color-muted);
  max-width: 440px;
}

.step-report .step-text p {
  color: rgba(255, 255, 255, 0.7);
}

.step-divert .step-text p {
  color: var(--color-accent-text);
}

.step-text .button {
  margin-top: 28px;
}

.step-visual-discovery,
.step-visual-sorting {
  position: relative;
}

.step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.step-visual-discovery {
  flex-direction: column;
  gap: 16px;
  background: var(--color-white);
  border: 1px solid rgba(51, 51, 51, 0.1);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  text-align: center;
  width: 100%;
  max-width: 440px;
}

.step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.step-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-white);
  border: 1px solid rgba(90, 138, 42, 0.25);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.step-visual-caption {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent-text);
}

.step-visual-sorting {
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.step-visual-sorting img {
  width: min(60%, 300px);
  height: auto;
  margin: 0 auto;
}

.step-tags-overlay {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.step-visual-divert {
  flex-direction: column;
  gap: 13px;
  width: 100%;
  max-width: 460px;
}

.divert-bar {
  width: 100%;
  background: var(--color-white);
  border: 1px solid rgba(90, 138, 42, 0.16);
  border-radius: var(--radius-md);
  padding: 17px 20px;
  box-shadow: var(--shadow-sm);
}

.divert-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--color-ink);
}

.divert-bar-head span:last-child {
  font-size: 15px;
  color: var(--color-accent-text);
}

.divert-bar-track {
  margin-top: 12px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(90, 138, 42, 0.13);
  overflow: hidden;
}

.divert-bar-fill {
  height: 100%;
  width: 18%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.divert-bar-fill-resale { background: var(--color-accent-text); }
.divert-bar-fill-recycle { background: #a8d46a; }

.divert-bar-landfill {
  width: 100%;
  border: 1px dashed rgba(51, 51, 51, 0.22);
  border-radius: var(--radius-md);
  padding: 17px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--color-muted);
}

.step-visual-report {
  width: 100%;
}

.report-card {
  width: min(100%, 470px);
  margin: 0 auto;
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

.report-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.42);
}

.report-card-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-accent);
  border: 1px solid rgba(131, 195, 64, 0.4);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  text-transform: none;
  letter-spacing: normal;
}

.report-main {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.report-donut {
  flex: none;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent) 338deg, rgba(255, 255, 255, 0.09) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-donut-inner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #2a2a2a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.report-donut-value {
  font-size: 27px;
  font-weight: 900;
  color: var(--color-white);
  line-height: 1;
}

.report-donut-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 6px;
}

.report-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-stat {
  display: flex;
  flex-direction: column;
}

.report-stat-value {
  font-size: 19px;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
}

.report-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 5px;
}

.report-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 62px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.report-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: rgba(131, 195, 64, 0.7);
}

/* Fixed decorative sparkline — not live data, so the heights are just hardcoded per bar. */
.report-bar:nth-child(1) { height: 44%; }
.report-bar:nth-child(2) { height: 68%; }
.report-bar:nth-child(3) { height: 52%; }
.report-bar:nth-child(4) { height: 86%; }
.report-bar:nth-child(5) { height: 100%; }


/* ---------- 01 discovery: mocked floor plan ---------- */

.floorplan {
  position: relative;
  width: min(92%, 470px);
  aspect-ratio: 1.12 / 1;
  background: var(--color-cream);
  border: 1px solid rgba(51, 51, 51, 0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.1);
}

.floorplan span { position: absolute; }

.floorplan-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(90, 138, 42, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 138, 42, 0.11) 1px, transparent 1px);
  background-size: 34px 34px;
}

.floorplan-wall {
  inset: 11%;
  border: 2px solid rgba(51, 51, 51, 0.28);
  border-radius: 4px;
}

.floorplan-room { border-color: rgba(51, 51, 51, 0.28); border-style: solid; border-width: 0; }

.room-a { left: 11%; top: 11%; width: 34%; height: 40%; border-right-width: 2px; border-bottom-width: 2px; }
.room-b { left: 11%; top: 51%; width: 20%; height: 26%; border-right-width: 2px; border-bottom-width: 2px; }
.room-c { right: 11%; top: 11%; width: 26%; height: 30%; border-left-width: 2px; border-bottom-width: 2px; }
.room-d { right: 11%; bottom: 11%; width: 22%; height: 24%; border-left-width: 2px; border-top-width: 2px; }

/* Doorways are just the wall painted back out in the panel color. */
.floorplan-door { background: var(--color-cream); }

.door-a { left: 45%; top: 11%; width: 5%; height: 2px; }
.door-b { left: 11%; top: 44%; width: 2px; height: 5%; }
.door-c { right: 11%; top: 58%; width: 2px; height: 6%; }

.floorplan-desks { display: grid; }
.floorplan-desks i { background: rgba(51, 51, 51, 0.2); border-radius: 1px; }

.desks-a { left: 20%; top: 19%; grid-template-columns: repeat(4, 15px); grid-auto-rows: 11px; gap: 6px; }
.desks-b { left: 16%; bottom: 26%; grid-template-columns: repeat(3, 13px); grid-auto-rows: 13px; gap: 7px; }
.desks-d { right: 15%; bottom: 16%; grid-template-columns: repeat(2, 18px); grid-auto-rows: 12px; gap: 6px; }

.floorplan-racks { right: 16%; top: 17%; display: flex; flex-direction: column; gap: 5px; }

.floorplan-racks i {
  width: 46px;
  height: 9px;
  border: 1.5px solid rgba(51, 51, 51, 0.35);
  background: repeating-linear-gradient(90deg,
    rgba(51, 51, 51, 0.25) 0 1.5px, transparent 1.5px 7px);
}

.floorplan-table {
  left: 40%;
  top: 55%;
  width: 64px;
  height: 40px;
  border: 1.5px solid rgba(51, 51, 51, 0.28);
  border-radius: 20px;
}

.plan-tag,
.material-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--color-white);
  border: 1px solid rgba(90, 138, 42, 0.25);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.09);
}

.material-pill-icon {
  display: inline-flex;
}

/* ---------- 02 sorting: chair with material pills around it ---------- */

.chair-stage {
  position: relative;
  width: min(78%, 460px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chair-glow {
  position: absolute;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(131, 195, 64, 0.16), rgba(131, 195, 64, 0) 68%);
}

.chair-stage img { width: 100%; height: 100%; object-fit: contain; }

.material-pill { position: absolute; }

.pill-steel   { top: 6%;     left: 2%; }
.pill-textile { top: 20%;    right: 0; }
.pill-polymer { bottom: 24%; left: 0; }
.pill-castors { bottom: 6%;  right: 6%; }

/* The caption lives inside .chair-stage so it tracks the chair, which means it
   has to clear the castors pill sitting at bottom: 6% of that same box. A fixed
   offset below the stage does that at any size; the percentage version only
   worked on a wide screen. */
.step-visual-sorting .step-visual-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -46px;
  text-align: center;
}

.chair-stage {
  margin-bottom: 46px;
}

@media (min-width: 1024px) {
  .step-visual-sorting .step-visual-caption {
    bottom: -14%;
  }

  .chair-stage {
    margin-bottom: 0;
  }
}

/* Pinned story scenes.
   Each .step is a track taller than the viewport holding a sticky stage. site.js
   writes --p onto the stage as the track scrolls past, 0 at the top through 1 at
   the bottom, and every scene below is driven off that one number.

   The fallback in every var(--p, 1) is 1, not 0. If JavaScript never runs, the
   scenes render in their finished state — bars full, text visible — instead of
   an invisible page. The original design defaulted to 0 and went blank without JS.

   Only pinned from 1024px up. Below that the sections stack normally and --p is
   driven by the stage's own travel through the viewport, so the scene still plays. */

/* The scenes are driven entirely by --p, which site.js sets on every viewport.
   These rules used to live inside the 1024 media query along with the pinning,
   so on a phone the progress value moved and nothing listened to it — all four
   scenes sat frozen in their finished state. Only the pinning is desktop-only
   now; the animation itself runs everywhere. */

/* Full opacity by about a third of the way through the scene, not at the very
   end. The old ramp only hit 1 at p = 1, which on a phone meant the copy was
   still washed out by the time you were scrolling out of the section. */
.step-text {
  opacity: calc(0.2 + var(--p, 1) * 2.4);
  transform: translateY(calc(max(0px, (0.35 - var(--p, 1)) * 40px)));
}

/* --- 01 discovery: a scan line sweeps a mocked floor plan --- */

.step-visual-discovery {
  position: relative;
  transform: scale(calc(0.95 + var(--p, 1) * 0.05));
}

.scan-line {
  position: absolute;
  left: 11%;
  right: 11%;
  top: calc(11% + var(--p, 1) * 78%);
  height: 2px;
  background: linear-gradient(90deg, rgba(131, 195, 64, 0), #83c340, rgba(131, 195, 64, 0));
  box-shadow: 0 0 24px rgba(131, 195, 64, 0.8);
}

.plan-tag {
  position: absolute;
  transform: translateY(calc((1 - var(--p, 1)) * 10px));
}

.plan-tag-1 { left: 14%; top: 3%;     opacity: calc(var(--p, 1) * 3 - 0.1); }
.plan-tag-2 { right: 14%; top: 45%;   opacity: calc(var(--p, 1) * 3 - 0.9); }
.plan-tag-3 { left: 38%; bottom: 13%; opacity: calc(var(--p, 1) * 3 - 1.7); }

.step-visual-discovery .step-visual-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  text-align: center;
  opacity: calc(var(--p, 1) * 2.4 - 1.2);
}

/* --- 02 sorting: chair centered, material streams disperse from it --- */

.chair-glow {
  transform: scale(calc(0.7 + var(--p, 1) * 0.9));
}

.step-visual-sorting img {
  transform: scale(calc(1 - var(--p, 1) * 0.2));
  opacity: calc(1 - var(--p, 1) * 0.35);
}

.pill-steel {
  transform: translate(calc(var(--p, 1) * -46px), calc(var(--p, 1) * -34px));
  opacity: calc(var(--p, 1) * 2.2 - 0.15);
}

.pill-textile {
  transform: translate(calc(var(--p, 1) * 54px), calc(var(--p, 1) * -22px));
  opacity: calc(var(--p, 1) * 2.2 - 0.3);
}

.pill-polymer {
  transform: translate(calc(var(--p, 1) * -58px), calc(var(--p, 1) * 20px));
  opacity: calc(var(--p, 1) * 2.2 - 0.45);
}

.pill-castors {
  transform: translate(calc(var(--p, 1) * 40px), calc(var(--p, 1) * 40px));
  opacity: calc(var(--p, 1) * 2.2 - 0.6);
}

.step-visual-sorting .step-visual-caption {
  opacity: calc(var(--p, 1) * 2 - 0.9);
}

/* --- 03 outcome: the diversion split draws itself in --- */

.divert-bar { transform: translateX(calc((1 - var(--p, 1)) * -34px)); }

.divert-bar:nth-of-type(1) { opacity: calc(var(--p, 1) * 3 - 0.05); }
.divert-bar:nth-of-type(2) { opacity: calc(var(--p, 1) * 3 - 0.5); }
.divert-bar:nth-of-type(3) { opacity: calc(var(--p, 1) * 3 - 0.95); }

.divert-bar-fill { width: calc(var(--p, 1) * 18%); }
.divert-bar-fill-resale { width: calc(var(--p, 1) * 76%); }
.divert-bar-fill-recycle { width: calc(var(--p, 1) * 6%); }

.divert-bar-landfill {
  opacity: calc(var(--p, 1) * 3 - 1.5);
  transform: translateX(calc((1 - var(--p, 1)) * -34px));
}

/* --- 04 report: the ring fills and the chart grows --- */

.report-card {
  transform: translateY(calc((1 - var(--p, 1)) * 26px));
  opacity: calc(0.35 + var(--p, 1) * 0.65);
}

.report-donut {
  background: conic-gradient(var(--color-accent) calc(var(--p, 1) * 338deg),
                             rgba(255, 255, 255, 0.09) 0);
}

.report-stat:nth-child(1) { opacity: calc(var(--p, 1) * 3 - 0.3); }
.report-stat:nth-child(2) { opacity: calc(var(--p, 1) * 3 - 0.8); }
.report-stat:nth-child(3) { opacity: calc(var(--p, 1) * 3 - 1.3); }

.report-bar:nth-child(1) { height: calc(var(--p, 1) * 44%); }
.report-bar:nth-child(2) { height: calc(var(--p, 1) * 68%); }
.report-bar:nth-child(3) { height: calc(var(--p, 1) * 52%); }
.report-bar:nth-child(4) { height: calc(var(--p, 1) * 86%); }
.report-bar:nth-child(5) { height: calc(var(--p, 1) * 100%); }

/* Pinning is the desktop-only part: a tall track with a sticky stage inside it.
   On a phone the sections are ordinary height and --p comes from the stage's
   own travel through the viewport instead, so the scene plays a little faster. */
@media (min-width: 1024px) {

  .step {
    /* Longer track = the same scene spread over more scrolling, so --p climbs
       more slowly and the scene finishes well before the section leaves. At
       190vh the last of it was still animating as the panel edge came into
       view. */
    height: 260vh;
    padding: 0;
    position: relative;
  }

  .step-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    align-content: center;
    overflow: hidden;
  }
}

/* Pinning is scroll-jacking, so it comes off entirely for reduced motion:
   ordinary stacked sections, every scene in its finished state. */
@media (prefers-reduced-motion: reduce) {
  .step {
    height: auto;
    padding: clamp(72px, 10vh, 120px) var(--gutter);
  }

  .step-inner {
    position: static;
    height: auto;
    overflow: visible;
  }

  .step-text,
  .step-visual,
  .step-tag,
  .divert-bar,
  .divert-bar-landfill,
  .report-card,
  .report-stat,
  .step-visual-sorting img,
  .step-visual-caption {
    transform: none;
    opacity: 1;
  }

  .scan-line { display: none; }
  .plan-tag, .material-pill, .chair-glow { transform: none; opacity: 1; }
  .divert-bar-fill { width: 18%; }
  .divert-bar-fill-resale { width: 76%; }
  .divert-bar-fill-recycle { width: 6%; }
  .report-donut {
    background: conic-gradient(var(--color-accent) 338deg, rgba(255, 255, 255, 0.09) 0);
  }
  .report-bar:nth-child(1) { height: 44%; }
  .report-bar:nth-child(2) { height: 68%; }
  .report-bar:nth-child(3) { height: 52%; }
  .report-bar:nth-child(4) { height: 86%; }
  .report-bar:nth-child(5) { height: 100%; }
}

@media (min-width: 1024px) {
  .step-inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 6vw, 80px);
  }

  .step-sorting .step-visual,
  .step-report .step-visual {
    order: -1;
  }
}

/* ---------- global reach ---------- */

.global {
  background: var(--color-ink);
  padding: var(--space-section-lg) var(--gutter);
  color: var(--color-white);
}

.global-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(40px, 6vw, 76px);
}

.global-eyebrow {
  color: var(--color-accent);
  margin-bottom: 16px;
}

.global-intro h2 {
  color: var(--color-white);
}

.global-lead {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.66);
  max-width: 490px;
}

/* Two by two at every width. Same reason as the outlook grid: auto-fit was
   fitting three across on a wide screen and leaving the fourth on its own. */
.global-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
  margin-top: 36px;
}

.global-stat-value {
  font-size: 30px;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -1px;
}

.global-stat-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 9px;
}

.global-regions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.global-region {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.global-region-name {
  font-size: 14.5px;
  font-weight: 900;
  color: var(--color-white);
  letter-spacing: -0.2px;
}

.global-region-places {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 7px;
  line-height: 1.6;
}

/* ---------- carbon legacy / ITF ---------- */

.itf {
  background: var(--color-accent-soft);
  padding: var(--space-section-lg) var(--gutter);
}

.itf-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.itf-copy .eyebrow {
  margin-bottom: 16px;
}

.itf-copy p {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-accent-text);
  max-width: 500px;
}

.itf-checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

/* Outbound link to the International Tree Foundation — a reciprocal partner
   link, they link back to us. It sits after the legal footnote rather than
   before it so the fine print stays visually attached to the checklist it
   qualifies; .legal-footnote only carries an 8px top margin, so a button
   dropped above it would have collided with the disclaimer. */
.itf-partner-link {
  margin-top: 28px;
}

.itf-checklist li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-ink);
}

.itf-checklist li span {
  flex: none;
  display: flex;
  color: var(--color-accent-text);
  /* The tick is 20px in a 24.8px line box, so it needs a nudge to sit on the
     optical center of the first line rather than the top of it. */
  margin-top: 2px;
}

/* Panel look comes from .itf-tree-scene in base.css; only the height is local. */
.itf-visual {
  height: clamp(400px, 48vw, 560px);
}

.itf-badge-row {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.itf-badge {
  background: rgba(26, 42, 14, 0.82);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}

/* ---------- ESG reporting (hidden — lives on /esg-reporting/ instead) ---------- */

.esg {
  background: var(--color-cream);
  padding: var(--space-section-lg) var(--gutter);
}

.esg-intro {
  max-width: 800px;
  margin: 0 auto 48px;
  text-align: center;
}

.esg-intro .eyebrow {
  margin-bottom: 16px;
}

.esg-lead {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-muted);
}

.esg-grid {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.esg-card {
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  padding: 30px 30px 32px;
  box-shadow: var(--shadow-sm);
}

.esg-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 900;
}

.esg-card h3 {
  font-size: 18px;
  margin: 18px 0 10px;
  letter-spacing: -0.3px;
}

.esg-card p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-muted);
}

.esg-cta-row {
  text-align: center;
  margin-top: 44px;
}

.esg-cta {
  background: var(--color-ink);
  color: var(--color-white);
  padding: 16px 38px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
}

/* ---------- testimonials (hidden — placeholder copy) ---------- */

.testimonials {
  background: var(--color-white);
  padding: var(--space-section-lg) var(--gutter);
}

.testimonials-intro {
  max-width: 1180px;
  margin: 0 auto 44px;
  text-align: center;
}

.testimonials-intro .eyebrow {
  margin-bottom: 16px;
}

.testimonials-lead {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}

/* One quote rather than a row of three. It needs its own measure — stretched to
   the full 1180px the lines get too long to read comfortably in italic serif. */
.testimonial-single {
  max-width: 860px;
  margin: 0 auto;
}

.testimonial-card blockquote p + p {
  margin-top: 15px;
}

.testimonial-card {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
}

.testimonial-stars {
  color: var(--color-accent-text);
  font-size: 13px;
  letter-spacing: 3px;
}

.testimonial-card blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-ink);
  margin-top: 18px;
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 900;
  color: var(--color-accent-text);
  flex-shrink: 0;
}

.testimonial-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-ink);
}

.testimonial-role {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
}

/* ---------- quote CTA ---------- */

.quote-cta {
  position: relative;
  padding: var(--space-section-lg) var(--gutter);
  background: var(--gradient-forest);
  overflow: hidden;
}

/* The photo sits at full strength and the colour comes from a scrim on top,
   rather than fading the photo down over the gradient. Same look, but the
   overlay opacity is then the only thing controlling text contrast, so it can
   be reasoned about and measured instead of being a product of two blends. */
.quote-media {
  position: absolute;
  inset: -12%;
  border-radius: 0;
  z-index: 0;
}

.quote-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Green wash. The section keeps --gradient-forest as its own background, so a
   photo that fails to load degrades to exactly what this band looked like
   before rather than to bare white. */
/* Measured, not eyeballed — see the matching note on .pp-cta::after. Against
   the lightest part of this photo it holds the 74%-white body copy above the
   4.5:1 AA floor with margin to spare. Lowering it is a contrast change. */
.quote-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-forest);
  opacity: 0.82;
  z-index: 1;
}

.quote-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.quote-inner h2 {
  color: var(--color-white);
}

.quote-inner p {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.quote-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 38px;
}

.quote-note {
  margin-top: 26px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- charities banner ---------- */

.charities-banner {
  background: var(--color-accent);
  padding: clamp(44px, 7vh, 72px) var(--gutter);
}

.charities-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.charities-inner h2 {
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  color: var(--color-white);
  letter-spacing: -0.8px;
  line-height: 1.15;
}

.charities-inner p {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 540px;
}

.charities-cta {
  background: var(--color-white);
  color: var(--color-accent-text);
  padding: 16px 38px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}