/* ============================================================
   SKIP HIRE — SHARED COMPONENTS
   Reusable page sections: nav, footer, page header, waste types,
   how it works, areas covered, final CTA, reveal animations.
   Loaded on every page.
============================================================ */

/* ============================================================
   NAV
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--charcoal);
  z-index: 200;
  transition: box-shadow var(--t-base) var(--ease);
}
.nav.scrolled {
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 32px rgba(0,0,0,0.5);
}
.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav__logo img {
  height: 28px;
  width: auto;
  display: block;
}

/* Centre links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav__link {
  font-family: var(--f-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 0.5rem 0.875rem;
  transition: color var(--t-fast);
  text-decoration: none;
}
.nav__link:hover { color: var(--white); }
.nav__link.active { color: var(--yellow); }

/* Right actions */
.nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
/* Mobile toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  transition: all var(--t-base) var(--ease);
}
.nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; width: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--charcoal-2);
  padding: 1.5rem var(--pad) 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
  z-index: 199;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nav__drawer.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.nav__drawer-link {
  font-family: var(--f-head);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color var(--t-fast);
  text-decoration: none;
}
.nav__drawer-link:hover { color: var(--yellow); }
.nav__drawer .btn { margin-top: 1.5rem; justify-content: center; }

/* ============================================================
   PAGE HEADER
============================================================ */
.page-header {
  background: var(--charcoal);
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 3rem;
  position: relative;
  overflow: hidden;
}
.page-header__texture {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255,255,255,0.02) 79px, rgba(255,255,255,0.02) 80px),
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255,255,255,0.02) 79px, rgba(255,255,255,0.02) 80px);
  pointer-events: none;
}
.page-header__bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 5px;
  background: var(--yellow);
}
.page-header__inner {
  position: relative;
  z-index: 2;
}
.page-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.page-header__crumb {
  font-family: var(--f-head);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  transition: color var(--t-fast);
}
.page-header__crumb:hover { color: rgba(255,255,255,0.6); }
.page-header__crumb.current { color: var(--yellow); }
.page-header__sep { color: rgba(255,255,255,0.15); font-size: 0.75rem; }
.page-header__title {
  font-family: var(--f-head);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--white);
  margin-bottom: 0.875rem;
}
.page-header__sub {
  font-family: var(--f-body);
  font-size: 1rem;
  color: rgba(255,255,255,0.4);
  max-width: 480px;
  line-height: 1.6;
}

/* ============================================================
   SECTION 1 — HERO
   Background: Charcoal
============================================================ */
.hero {
  background: var(--charcoal);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
  background-image: url('../images/pexels-planka-27607949.jpg');
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
  background-blend-mode: luminosity;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,0.72);
  pointer-events: none;
}
.hero__bar,
.hero__texture,
.hero__inner {
  position: relative;
  z-index: 1;
}

/* Industrial background texture */
.hero__texture {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 79px,
      rgba(255,255,255,0.025) 79px,
      rgba(255,255,255,0.025) 80px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 79px,
      rgba(255,255,255,0.025) 79px,
      rgba(255,255,255,0.025) 80px
    );
  pointer-events: none;
}

/* Yellow edge bar */
.hero__bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 5px;
  background: var(--yellow);
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(3rem, 6vw, 5rem) var(--pad);
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__content {}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.hero__kicker-line {
  width: 32px; height: 2px;
  background: var(--yellow);
  flex-shrink: 0;
}
.hero__kicker-text {
  font-family: var(--f-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
}

.hero__headline {
  font-family: var(--f-head);
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.hero__headline em {
  font-style: normal;
  color: var(--yellow);
}

.hero__copy {
  font-family: var(--f-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255,255,255,0.62);
  max-width: 480px;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   SECTION 3 — WASTE TYPES
   Background: White
============================================================ */
.waste-section {
  background: var(--white);
  padding: var(--sv) 0;
}

.waste-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.waste-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: var(--mid-gray);
}
.waste-card {
  background: var(--white);
  padding: 1.75rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  cursor: default;
  transition: background var(--t-base) var(--ease);
  overflow: hidden;
}
.waste-card:hover { background: var(--off-white); }
.waste-card__stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.waste-card__icon {
  width: 36px; height: 36px;
  margin-bottom: 1.25rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.waste-card__icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--charcoal);
  stroke-width: 1.5;
}
.waste-card__cat {
  font-family: var(--f-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.waste-card__name {
  font-family: var(--f-head);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.625rem;
  line-height: 1.2;
}
.waste-card__desc {
  font-family: var(--f-body);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.industries-section__body {
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.waste-card__stripe--yellow { background: #F5C800; }
.waste-card__stripe--blue   { background: #2196F3; }
.waste-card__stripe--green  { background: #4CAF50; }
.waste-card__stripe--red    { background: #F44336; }
.waste-card__stripe--gray   { background: #9E9E9E; }

/* ============================================================
   SIZE CARD — skip size grid
   Promoted from pages.css (Home-only) when Skip Sizes became a
   second consumer of the same card pattern.
============================================================ */
.sizes-section {
  background: var(--yellow);
  padding: var(--sv) 0;
}
.sizes-section .section-intro__label { color: rgba(26,26,26,0.45); }
.sizes-section .section-intro__sub   { color: rgba(26,26,26,0.6); }

.sizes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(0,0,0,0.12);
}
.size-card {
  background: var(--yellow);
  padding: 1.75rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: background var(--t-base) var(--ease);
  overflow: hidden;
}
.size-card:hover { background: var(--charcoal); }
.size-card:hover .size-card__num  { color: var(--yellow); }
.size-card:hover .size-card__unit { color: rgba(255,255,255,0.4); }
.size-card:hover .size-card__name { color: var(--white); }
.size-card:hover .size-card__use  { color: rgba(255,255,255,0.55); }
.size-card:hover .size-card__comp-item { color: rgba(255,255,255,0.45); }
.size-card:hover .size-card__divider  { background: rgba(255,255,255,0.1); }
.size-card:hover .size-card__price { color: var(--yellow); }
.size-card:hover .size-card__price-label { color: rgba(255,255,255,0.35); }
.size-card:hover .size-card__link { color: rgba(255,255,255,0.5); }
.size-card:hover .size-card__visual { opacity: 0.15; }

.size-card__visual {
  position: absolute;
  top: 0; right: 0;
  opacity: 0.07;
  transition: opacity var(--t-base) var(--ease);
}
.size-card__num {
  font-family: var(--f-head);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--charcoal);
  line-height: 1;
  transition: color var(--t-base) var(--ease);
}
.size-card__unit {
  font-family: var(--f-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  transition: color var(--t-base) var(--ease);
}
.size-card__name {
  font-family: var(--f-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
  transition: color var(--t-base) var(--ease);
}
.size-card__use {
  font-family: var(--f-body);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(0,0,0,0.55);
  margin-bottom: 1.25rem;
  flex: 1;
  transition: color var(--t-base) var(--ease);
}
.size-card__comparisons {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}
.size-card__comp-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-body);
  font-size: 0.75rem;
  color: rgba(0,0,0,0.5);
  transition: color var(--t-base) var(--ease);
}
.size-card__comp-item svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  flex-shrink: 0;
}
.size-card__divider {
  height: 1px;
  background: rgba(0,0,0,0.1);
  margin-bottom: 1.25rem;
  transition: background var(--t-base) var(--ease);
}
.size-card__price-label {
  font-family: var(--f-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  margin-bottom: 0.2rem;
  transition: color var(--t-base) var(--ease);
}
.size-card__price {
  font-family: var(--f-head);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.02em;
  transition: color var(--t-base) var(--ease);
}
.size-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--f-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  margin-top: 0.875rem;
  transition: color var(--t-base) var(--ease);
}
.size-card__link svg {
  width: 12px; height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--t-fast) var(--ease);
}
.size-card:hover .size-card__link svg { transform: translateX(3px); }

.size-card__tag {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--charcoal);
  color: var(--yellow);
  font-family: var(--f-head);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  z-index: 2;
}
.size-card:hover .size-card__tag {
  background: var(--yellow);
  color: var(--charcoal);
}

.size-card__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  margin-bottom: 1.25rem;
}

/* ============================================================
   PLAIN WHITE SECTION WRAPPER
   Promoted from pages.css (Skip Sizes-only) when Areas Covered
   became a second consumer of the same flat-white section pattern.
============================================================ */
.compare-section {
  background: var(--white);
  padding: var(--sv) 0;
}
.compare-note {
  color: var(--text-secondary);
  margin-top: 1.5rem;
  max-width: 640px;
}
.compare-note a {
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   SECTION 4 — HOW IT WORKS
   Background: Charcoal
============================================================ */
.how-section {
  background: var(--charcoal);
  background-image: url('../images/pexels-khidir-26098429.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: luminosity;
  padding: var(--sv) 0;
  position: relative;
}
.how-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,0.88);
  pointer-events: none;
}
.how-section .wrap { position: relative; z-index: 1; }

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.how-steps::before {
  content: '';
  position: absolute;
  top: 2.25rem;
  left: calc(16.67% + 1.5rem);
  right: calc(16.67% + 1.5rem);
  height: 1px;
  background: var(--charcoal-4);
}
.how-step {
  padding: 0 2rem 0 0;
  position: relative;
}
.how-step:last-child { padding-right: 0; }
.how-step__num-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.how-step__num {
  width: 44px; height: 44px;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-head);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.how-step__icon {
  width: 24px; height: 24px;
}
.how-step__icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: rgba(255,255,255,0.2);
  stroke-width: 1.5;
}
.how-step__title {
  font-family: var(--f-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.how-step__body {
  font-family: var(--f-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.58);
}
.how-step__detail {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.how-step__detail-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--f-body);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
}
.how-step__detail-item svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* ============================================================
   SECTION 5 — AREAS COVERED
   Background: Yellow
============================================================ */
.areas-section {
  background: var(--yellow);
  padding: var(--sv) 0;
}
.areas-section .section-intro__label { color: rgba(26,26,26,0.45); }

.areas-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  align-items: start;
}

.areas-intro__title {
  font-family: var(--f-head);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--charcoal);
  margin-bottom: 1rem;
}
.areas-intro__sub {
  font-family: var(--f-body);
  font-size: 0.9375rem;
  color: rgba(26,26,26,0.65);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.area-item {
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  position: relative;
  cursor: default;
  transition: padding-left var(--t-fast) var(--ease);
}
.area-item:hover { padding-left: 0.5rem; }
.area-item__name {
  font-family: var(--f-head);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  transition: color var(--t-fast);
}
.area-item:hover .area-item__name { color: rgba(0,0,0,0.5); }
.area-item__tag {
  font-family: var(--f-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.35);
  margin-top: 0.125rem;
}

/* ---- Service Areas placeholder map ----
   Promoted from pages.css (About-only) when Areas Covered became
   a second consumer. --large is new: a wide banner variant for
   Areas Covered, where the map is the page's focal point rather
   than a small teaser next to text. */
.map-placeholder {
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,0.35);
  border: 1px dashed rgba(26,26,26,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.map-placeholder--large {
  aspect-ratio: 21 / 9;
}
.map-placeholder__inner {
  font-family: var(--f-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26,26,26,0.55);
}
.map-placeholder__inner span {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(26,26,26,0.48);
}

/* ============================================================
   CONFIRMATION ICON + SUMMARY ROWS
   Promoted from pages.css (Skip Selector-only) when Contact
   became a second consumer — the icon marks its success state,
   and the summary rows list phone/email/hours in its info card.
   .confirm-title/.confirm-sub/.confirm-screen stay page-scoped:
   Contact uses plain t-h3/t-body utilities instead, since it
   doesn't need a full-viewport takeover like the selector does.
============================================================ */
.confirm-icon {
  width: 64px; height: 64px;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
}
.confirm-icon svg { width: 32px; height: 32px; fill: none; stroke: var(--charcoal); stroke-width: 2.5; stroke-linecap: square; }
.confirm-summary {
  background: var(--charcoal-2);
  padding: 1.75rem;
  text-align: left;
  margin-bottom: 2rem;
}
.confirm-summary__title {
  font-family: var(--f-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  margin-bottom: 1.25rem;
}
.confirm-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.confirm-summary__row:last-child { border-bottom: none; }
.confirm-summary__key {
  font-family: var(--f-body);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.35);
}
.confirm-summary__val {
  font-family: var(--f-head);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
}
.confirm-summary__val.highlight { color: var(--yellow); }
.confirm-summary__val a { color: inherit; text-decoration: none; }

/* ============================================================
   FORM FIELDS
   Promoted from pages.css (Skip Selector-only) when Contact
   became a second consumer of the same field styles.
============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group--full { grid-column: 1 / -1; }
.form-label {
  font-family: var(--f-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.form-label span {
  color: var(--yellow-dk);
  margin-left: 0.125rem;
}
.form-input,
.form-select,
.form-textarea {
  font-family: var(--f-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--white);
  border: 2px solid var(--mid-gray);
  padding: 0.75rem 1rem;
  width: 100%;
  outline: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast) var(--ease);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--charcoal); }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }
.form-select-wrap { position: relative; }
.form-select-wrap::after {
  content: '';
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--charcoal);
  pointer-events: none;
}
.form-select { padding-right: 2.5rem; }
.form-textarea { resize: vertical; min-height: 100px; }
.form-hint {
  font-family: var(--f-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   SECTION 7 — FINAL CTA
   Background: Charcoal
============================================================ */
.cta-section {
  background: var(--charcoal);
  padding: var(--sv) 0;
  position: relative;
  overflow: hidden;
  background-image: url('../images/pexels-cottonbro-4874228.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: luminosity;
  background-attachment: fixed;
}
.cta-section__texture {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,0.75);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
}
.cta-label {
  font-family: var(--f-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1rem;
}
.cta-title {
  font-family: var(--f-head);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.cta-title em {
  font-style: normal;
  color: var(--yellow);
}
.cta-copy {
  font-family: var(--f-body);
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  max-width: 440px;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: flex-start;
  flex-shrink: 0;
}
.cta-tel {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--f-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color var(--t-fast);
}
.cta-tel:hover { color: var(--yellow); }
.cta-tel svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.footer {
  background: #0C0C0C;
  padding: 4rem 0 0;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer__brand-logo {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  text-decoration: none;
}
.footer__brand-logo img {
  height: 24px;
  width: auto;
  display: block;
}
.footer__brand-copy {
  font-family: var(--f-body);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.65;
  max-width: 240px;
  margin-bottom: 1.5rem;
}
.footer__brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.04);
  padding: 0.5rem 0.875rem;
}
.footer__brand-badge svg {
  width: 12px; height: 12px;
  fill: var(--yellow);
}
.footer__brand-badge span {
  font-family: var(--f-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.footer__col-title {
  font-family: var(--f-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  margin-bottom: 1.25rem;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer__link {
  font-family: var(--f-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer__link:hover { color: var(--yellow); }
.footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-bottom: 0.875rem;
}
.footer__contact-method {
  font-family: var(--f-head);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
}
.footer__contact-val {
  font-family: var(--f-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer__contact-val:hover { color: var(--yellow); }

.footer__bottom {
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer__legal {
  font-family: var(--f-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.02em;
}
.footer__legal-links {
  display: flex;
  gap: 1.5rem;
}
.footer__legal-link {
  font-family: var(--f-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.2);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer__legal-link:hover { color: rgba(255,255,255,0.5); }

/* ============================================================
   REVEAL ANIMATIONS
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 60ms; }
.reveal-d2 { transition-delay: 120ms; }
.reveal-d3 { transition-delay: 180ms; }
.reveal-d4 { transition-delay: 240ms; }
.reveal-d5 { transition-delay: 300ms; }

/* ============================================================
   SCALE VISUALISER — shared dark-panel measurement pattern
   Originally built page-scoped for the Skip Selector's dynamic
   single-skip readout (Step 3). Promoted here when Skip Sizes
   introduced a second, static, multi-skip use of the same
   panel/texture/item/caption treatment. Selector-only pieces
   (dim-bar, size-label, facts) remain in pages.css.
============================================================ */
.scale-vis {
  background: var(--charcoal);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}
.scale-vis__texture {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 8px,
    rgba(255,255,255,0.02) 8px, rgba(255,255,255,0.02) 9px
  );
  pointer-events: none;
}
.scale-vis__stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.5rem 0 0;
}
.scale-vis__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.scale-vis__figure {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.scale-vis__caption {
  font-family: var(--f-head);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  text-align: center;
}

/* Static bar variant — used where several sizes are compared at
   once with no JS (e.g. Skip Sizes page), instead of the
   selector's single dynamic skip figure. */
.scale-vis__bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.scale-vis__bar {
  width: 56px;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-dk) 100%);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.scale-vis__bar-val {
  position: absolute;
  top: -1.5rem;
  font-family: var(--f-head);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--white);
  white-space: nowrap;
}
.scale-vis__bar--muted {
  background: rgba(255,255,255,0.1);
}

/* ============================================================
   RESPONSIVE — shared components
============================================================ */
@media (max-width: 1024px) {
  .waste-grid { grid-template-columns: repeat(3, 1fr); }
  .waste-intro { grid-template-columns: 1fr; gap: 2rem; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .sizes-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__toggle { display: flex; }
  .nav__inner { grid-template-columns: 1fr auto; }

  .how-steps { grid-template-columns: 1fr; }
  .how-steps::before { display: none; }
  .how-step { padding: 0 0 2rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .how-step:last-child { border-bottom: none; padding-bottom: 0; }

  .areas-layout { grid-template-columns: 1fr; gap: 2rem; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }

  .cta-inner { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: row; align-items: center; }

  .scale-vis__stage { gap: 1.25rem; flex-wrap: wrap; }
}

@media (max-width: 600px) {
  :root { --sv: clamp(3rem, 6vw, 5rem); --pad: 1.25rem; }
  .waste-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .sizes-grid { grid-template-columns: 1fr; }
  .map-placeholder--large { aspect-ratio: 4 / 3; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group--full { grid-column: 1; }
}