/* ==========================================================================
   Recycle Pay — sections.css
   Styles for individual page sections, in page order.
   ========================================================================== */

/* ---------- Home: banner ---------- */

.banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92vh, 780px);
  overflow: hidden;
  background: linear-gradient(180deg, #e4f6d2 0%, #dcedfb 55%, #fdedc8 100%);
  border-bottom: 1px solid var(--line);
}

.banner-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* City skyline layer: high-rises across the whole banner, faded on the
   left so the headline stays easy to read */
.skyline {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(78%, 560px);
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    #000 70%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    #000 70%
  );
}

/* Animated handover scene (assets/images/illustrations/handover-scene.svg) */
.handover {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(62%, 940px);
  height: auto;
  max-height: 72%;
  opacity: 0.88;
  filter: none;
}

.banner-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* Keep "Sort. Recycle. Earn." on one line; shrink with the screen on phones */
.banner-copy h1 {
  white-space: nowrap;
  font-size: min(4.3rem, 1.4rem + 3.6vw, 8.4vw);
}

/* Search phrase shown as a small line above the slogan, inside the <h1> so
   search engines read "Sell scrap online in Bhubaneswar & Cuttack" as the
   page's main heading */
.h1-kicker {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--brand-dark);
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: normal;
}

@media (max-width: 900px) {
  .banner-inner {
    grid-template-columns: 1fr;
  }

  .skyline {
    height: 62%;
    opacity: 0.6;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .handover {
    width: 100%;
    max-height: 45%;
    opacity: 0.38;
  }
}

/* ---------- Home: impact numbers ---------- */

.impact {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}

.impact-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.impact-top h2 {
  margin: 0 0 0.35rem;
}

.impact-top p {
  margin: 0;
}

.impact-date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4em 0.9em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 0.88rem;
}

.impact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(31, 45, 61, 0.04);
}

.impact-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--tint);
  border-right: 1px solid var(--line);
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric {
  padding: 1.5rem clamp(1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.metric:nth-child(3n + 1) {
  border-left: 0;
}

.metric:nth-child(-n + 3) {
  border-top: 0;
}

.metric p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.m-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 0.9rem;
  border-radius: 10px;
  background: var(--tint);
  color: var(--brand);
  font-size: 1rem;
}

.m-icon.lg {
  width: 48px;
  height: 48px;
  margin: 0;
  background: #fff;
  font-size: 1.25rem;
}

.m-label {
  margin: 1.2rem 0 0.3rem;
  color: var(--ink);
  font-weight: 500;
}

.m-sub {
  margin: 0.8rem 0 0;
  font-size: 0.92rem;
}

.m-val {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.m-val strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
}

.m-val small {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.m-val.big strong {
  color: var(--brand-dark);
  font-size: clamp(2.6rem, 1.8rem + 3vw, 3.8rem);
}

.m-val.big small {
  font-size: 1.2rem;
}

@media (max-width: 900px) {
  .impact-panel {
    grid-template-columns: 1fr;
  }

  .impact-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric:nth-child(n) {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .metric:nth-child(2n + 1) {
    border-left: 0;
  }

  .metric:nth-child(-n + 2) {
    border-top: 0;
  }
}

/* ---------- Home: clean, quiet pickups ---------- */

.clean-points {
  display: grid;
  gap: 0.8rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.clean-points li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.clean-points svg {
  width: 22px;
  color: var(--brand);
}

.air-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 20px 40px -28px rgba(45, 58, 76, 0.55);
}

.air {
  display: block;
  width: 100%;
  height: auto;
}

.drift-leaf {
  position: absolute;
  color: #5fb33a;
  font-size: 1.2rem;
  animation: leafy 9s ease-in-out infinite;
}

.l1 {
  left: 8%;
  top: 30%;
}
.l2 {
  left: 46%;
  top: 22%;
  animation-delay: -3s;
  color: #3cb8a6;
}
.l3 {
  left: 76%;
  top: 42%;
  animation-delay: -6s;
  color: #74c045;
}

.air-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 20px -14px rgba(45, 58, 76, 0.6);
}

.air-badge > svg {
  color: #3cb8a6;
  font-size: 1.3rem;
}

.air-badge strong {
  display: block;
  font-family: var(--font-display);
  line-height: 1.1;
}

.air-badge span {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- Recycle Pay and Bintix service cards ---------- */

.program {
  display: flex;
  flex-direction: column;
}

.program p {
  margin: 0 0 0.7rem;
}

.program .rate {
  margin: 0 0 0.4rem;
  color: var(--green);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
}

.program .btn {
  align-self: flex-start;
  margin-top: 0.6rem;
}

.program .give {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: #ffdbe7;
  color: var(--ink);
  font-size: 0.95rem;
}

.program .give svg {
  margin-top: 0.2rem;
  color: #f06aa0;
}

/* ---------- Bintix: blue bags and bag rules ---------- */

.bintix-bags {
  padding: 1.8rem;
  border-radius: 26px;
  background: linear-gradient(160deg, #dbeaff, #e6ddfb);
  text-align: center;
}

.bintix-bags p {
  margin: 0 auto;
  color: var(--ink);
}

/* ---------- Bintix: "how to use a bag" scene ----------
   Markup: the .bx-scene SVG on the Bintix page (index.html), set in the
   corner of a home. One 21 s loop:
     - 7 trips, one per accepted item (cold drink bottle, chips wrapper, milk packet, tetra pack, online-order wrapper, empty medicine strip, shampoo bottle):
       she faces the basket (.bx-body flipped), picks the item (.bx-held in
       her hand, .bx-pile loses one, .bx-label names it), turns to the bag in
       the corner and drops it (.bx-item falls; .bx-heap rises). Items leave
       her hand at 1.5s, 3.7s, 5.9s, 8.1s, 10.3s, 12.5s, 14.7s;
     - the full bag is gathered (.bx-open -> .bx-closed) and she ties it with
       both hands (.bx-arm-f twists the tie, .bx-arm-b holds the neck) while
       the tag pops on (15.7-17.4s);
     - "Ready for pickup" (.bx-ready), then everything resets.
   .bx-steps highlight 1 (fill), 2 (tie), 3 (hand over) in time.
   These keyframes were generated from that timeline; to change the pace,
   change the times together. */

.bintix-bags .bx-scene {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto 0.8rem;
  border-radius: 22px;
  box-shadow: 0 18px 36px -26px rgba(45, 58, 76, 0.6);
}

/* Arms pivot at the shoulder: the top centre of each arm's invisible box */
.bx-arm-f,
.bx-arm-b {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

/* The item in her hand turns opposite to her arm (around the hand) */
.bx-upright {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(90deg);
}

/* She turns on the spot, around her own centre line */
.bx-body {
  transform-box: view-box;
  transform-origin: 245px 0;
}

/* Resting state (also what reduced-motion visitors see): facing the bag,
   hand over it, bag open and full, nothing in the air, not yet tied */
.bx-arm-f {
  transform: rotate(-90deg);
}

.bx-item,
.bx-held,
.bx-label,
.bx-closed,
.bx-ready {
  opacity: 0;
}

.bx-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.bx-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.85em 0.4em 0.45em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.bx-step span {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #fff;
  color: #2a62c0;
  font-size: 0.85em;
  font-weight: 800;
}

/* "6 QR-coded blue bags for every household" with six tiny bags */
.bx-six {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.mini-bags {
  display: inline-flex;
  gap: 4px;
}

.mini-bags i {
  width: 12px;
  height: 15px;
  border-radius: 3px 3px 4px 4px;
  background: linear-gradient(160deg, #5a9cf5, #3f7fe0);
}

@media (prefers-reduced-motion: no-preference) {
  .bx-body { animation: bx-body 21s linear infinite; }
  .bx-arm-f { animation: bx-arm-f 21s ease-in-out infinite; }
  .bx-arm-b { animation: bx-arm-b 21s ease-in-out infinite; }
  .bx-upright { animation: bx-upright 21s ease-in-out infinite; }
  .bx-heap { animation: bx-heap 21s ease-out infinite; }
  .bx-held.h1 { animation: bx-held1 21s linear infinite; }
  .bx-pile .p1 { animation: bx-pile1 21s linear infinite; }
  .bx-label.l1 { animation: bx-label1 21s linear infinite; }
  .bx-held.h2 { animation: bx-held2 21s linear infinite; }
  .bx-pile .p2 { animation: bx-pile2 21s linear infinite; }
  .bx-label.l2 { animation: bx-label2 21s linear infinite; }
  .bx-held.h3 { animation: bx-held3 21s linear infinite; }
  .bx-pile .p3 { animation: bx-pile3 21s linear infinite; }
  .bx-label.l3 { animation: bx-label3 21s linear infinite; }
  .bx-held.h4 { animation: bx-held4 21s linear infinite; }
  .bx-pile .p4 { animation: bx-pile4 21s linear infinite; }
  .bx-label.l4 { animation: bx-label4 21s linear infinite; }
  .bx-held.h5 { animation: bx-held5 21s linear infinite; }
  .bx-pile .p5 { animation: bx-pile5 21s linear infinite; }
  .bx-label.l5 { animation: bx-label5 21s linear infinite; }
  .bx-held.h6 { animation: bx-held6 21s linear infinite; }
  .bx-pile .p6 { animation: bx-pile6 21s linear infinite; }
  .bx-label.l6 { animation: bx-label6 21s linear infinite; }
  .bx-held.h7 { animation: bx-held7 21s linear infinite; }
  .bx-pile .p7 { animation: bx-pile7 21s linear infinite; }
  .bx-label.l7 { animation: bx-label7 21s linear infinite; }

  .bx-item {
    transform-box: fill-box;
    transform-origin: center;
    animation: bx-drop 21s ease-in infinite;
  }

  /* When each item leaves her hand, and how it tumbles into the bag */
  .bx-i1 { --dx: 4px; --rot: 160deg; animation-delay: 1.50s; }
  .bx-i2 { --dx: 10px; --rot: -140deg; animation-delay: 3.70s; }
  .bx-i3 { --dx: 6px; --rot: 120deg; animation-delay: 5.90s; }
  .bx-i4 { --dx: 12px; --rot: -170deg; animation-delay: 8.10s; }
  .bx-i5 { --dx: 2px; --rot: 150deg; animation-delay: 10.30s; }
  .bx-i6 { --dx: 8px; --rot: -120deg; animation-delay: 12.50s; }
  .bx-i7 { --dx: 5px; --rot: 140deg; animation-delay: 14.70s; }

  .bx-open { animation: bx-open 21s linear infinite; }
  .bx-closed { animation: bx-closed 21s linear infinite; }

  .bx-tag {
    transform-box: fill-box;
    transform-origin: 20% 10%;
    animation: bx-tag 21s ease-out infinite;
  }

  .bx-tag-swing {
    transform-box: view-box;
    transform-origin: 326px 169px;
    animation: bx-swing 1.6s ease-in-out infinite;
  }

  .bx-ready { animation: bx-ready 21s ease-out infinite; }

  .bx-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: bx-blink 4.2s ease-in-out infinite;
  }

  .bx-step.s1 { animation: bx-step1 21s linear infinite; }
  .bx-step.s2 { animation: bx-step2 21s linear infinite; }
  .bx-step.s3 { animation: bx-step3 21s linear infinite; }
}

@keyframes bx-arm-f {
  0.000% { transform: rotate(-55deg); }
  2.857% { transform: rotate(-55deg); }
  3.810% { transform: rotate(-20deg); }
  5.714% { transform: rotate(-20deg); }
  6.429% { transform: rotate(-90deg); }
  7.381% { transform: rotate(-90deg); }
  8.333% { transform: rotate(-30deg); }
  10.476% { transform: rotate(-30deg); }
  11.429% { transform: rotate(-55deg); }
  13.333% { transform: rotate(-55deg); }
  14.286% { transform: rotate(-20deg); }
  16.190% { transform: rotate(-20deg); }
  16.905% { transform: rotate(-90deg); }
  17.857% { transform: rotate(-90deg); }
  18.810% { transform: rotate(-30deg); }
  20.952% { transform: rotate(-30deg); }
  21.905% { transform: rotate(-55deg); }
  23.810% { transform: rotate(-55deg); }
  24.762% { transform: rotate(-20deg); }
  26.667% { transform: rotate(-20deg); }
  27.381% { transform: rotate(-90deg); }
  28.333% { transform: rotate(-90deg); }
  29.286% { transform: rotate(-30deg); }
  31.429% { transform: rotate(-30deg); }
  32.381% { transform: rotate(-55deg); }
  34.286% { transform: rotate(-55deg); }
  35.238% { transform: rotate(-20deg); }
  37.143% { transform: rotate(-20deg); }
  37.857% { transform: rotate(-90deg); }
  38.810% { transform: rotate(-90deg); }
  39.762% { transform: rotate(-30deg); }
  41.905% { transform: rotate(-30deg); }
  42.857% { transform: rotate(-55deg); }
  44.762% { transform: rotate(-55deg); }
  45.714% { transform: rotate(-20deg); }
  47.619% { transform: rotate(-20deg); }
  48.333% { transform: rotate(-90deg); }
  49.286% { transform: rotate(-90deg); }
  50.238% { transform: rotate(-30deg); }
  52.381% { transform: rotate(-30deg); }
  53.333% { transform: rotate(-55deg); }
  55.238% { transform: rotate(-55deg); }
  56.190% { transform: rotate(-20deg); }
  58.095% { transform: rotate(-20deg); }
  58.810% { transform: rotate(-90deg); }
  59.762% { transform: rotate(-90deg); }
  60.714% { transform: rotate(-30deg); }
  62.857% { transform: rotate(-30deg); }
  63.810% { transform: rotate(-55deg); }
  65.714% { transform: rotate(-55deg); }
  66.667% { transform: rotate(-20deg); }
  68.571% { transform: rotate(-20deg); }
  69.286% { transform: rotate(-90deg); }
  70.238% { transform: rotate(-90deg); }
  71.190% { transform: rotate(-30deg); }
  72.857% { transform: rotate(-30deg); }
  74.762% { transform: rotate(-88deg); }
  75.952% { transform: rotate(-80deg); }
  77.143% { transform: rotate(-90deg); }
  78.333% { transform: rotate(-80deg); }
  79.524% { transform: rotate(-90deg); }
  80.714% { transform: rotate(-80deg); }
  81.905% { transform: rotate(-90deg); }
  84.286% { transform: rotate(-6deg); }
  97.143% { transform: rotate(-6deg); }
  99.286% { transform: rotate(-55deg); }
  100.000% { transform: rotate(-55deg); }
}

/* Exactly the reverse of bx-arm-f, so what she holds stays upright */
@keyframes bx-upright {
  0.000% { transform: rotate(55deg); }
  2.857% { transform: rotate(55deg); }
  3.810% { transform: rotate(20deg); }
  5.714% { transform: rotate(20deg); }
  6.429% { transform: rotate(90deg); }
  7.381% { transform: rotate(90deg); }
  8.333% { transform: rotate(30deg); }
  10.476% { transform: rotate(30deg); }
  11.429% { transform: rotate(55deg); }
  13.333% { transform: rotate(55deg); }
  14.286% { transform: rotate(20deg); }
  16.190% { transform: rotate(20deg); }
  16.905% { transform: rotate(90deg); }
  17.857% { transform: rotate(90deg); }
  18.810% { transform: rotate(30deg); }
  20.952% { transform: rotate(30deg); }
  21.905% { transform: rotate(55deg); }
  23.810% { transform: rotate(55deg); }
  24.762% { transform: rotate(20deg); }
  26.667% { transform: rotate(20deg); }
  27.381% { transform: rotate(90deg); }
  28.333% { transform: rotate(90deg); }
  29.286% { transform: rotate(30deg); }
  31.429% { transform: rotate(30deg); }
  32.381% { transform: rotate(55deg); }
  34.286% { transform: rotate(55deg); }
  35.238% { transform: rotate(20deg); }
  37.143% { transform: rotate(20deg); }
  37.857% { transform: rotate(90deg); }
  38.810% { transform: rotate(90deg); }
  39.762% { transform: rotate(30deg); }
  41.905% { transform: rotate(30deg); }
  42.857% { transform: rotate(55deg); }
  44.762% { transform: rotate(55deg); }
  45.714% { transform: rotate(20deg); }
  47.619% { transform: rotate(20deg); }
  48.333% { transform: rotate(90deg); }
  49.286% { transform: rotate(90deg); }
  50.238% { transform: rotate(30deg); }
  52.381% { transform: rotate(30deg); }
  53.333% { transform: rotate(55deg); }
  55.238% { transform: rotate(55deg); }
  56.190% { transform: rotate(20deg); }
  58.095% { transform: rotate(20deg); }
  58.810% { transform: rotate(90deg); }
  59.762% { transform: rotate(90deg); }
  60.714% { transform: rotate(30deg); }
  62.857% { transform: rotate(30deg); }
  63.810% { transform: rotate(55deg); }
  65.714% { transform: rotate(55deg); }
  66.667% { transform: rotate(20deg); }
  68.571% { transform: rotate(20deg); }
  69.286% { transform: rotate(90deg); }
  70.238% { transform: rotate(90deg); }
  71.190% { transform: rotate(30deg); }
  72.857% { transform: rotate(30deg); }
  74.762% { transform: rotate(88deg); }
  75.952% { transform: rotate(80deg); }
  77.143% { transform: rotate(90deg); }
  78.333% { transform: rotate(80deg); }
  79.524% { transform: rotate(90deg); }
  80.714% { transform: rotate(80deg); }
  81.905% { transform: rotate(90deg); }
  84.286% { transform: rotate(6deg); }
  97.143% { transform: rotate(6deg); }
  99.286% { transform: rotate(55deg); }
  100.000% { transform: rotate(55deg); }
}

@keyframes bx-arm-b {
  0.000% { transform: rotate(4deg); }
  72.857% { transform: rotate(4deg); }
  74.762% { transform: rotate(-64deg); }
  75.952% { transform: rotate(-68deg); }
  77.143% { transform: rotate(-60deg); }
  78.333% { transform: rotate(-68deg); }
  79.524% { transform: rotate(-60deg); }
  80.714% { transform: rotate(-68deg); }
  81.905% { transform: rotate(-60deg); }
  84.286% { transform: rotate(4deg); }
  100.000% { transform: rotate(4deg); }
}

@keyframes bx-body {
  0.000% { transform: scaleX(-1); }
  4.762% { transform: scaleX(-1); }
  5.476% { transform: scaleX(1); }
  9.762% { transform: scaleX(1); }
  10.476% { transform: scaleX(-1); }
  15.238% { transform: scaleX(-1); }
  15.952% { transform: scaleX(1); }
  20.238% { transform: scaleX(1); }
  20.952% { transform: scaleX(-1); }
  25.714% { transform: scaleX(-1); }
  26.429% { transform: scaleX(1); }
  30.714% { transform: scaleX(1); }
  31.429% { transform: scaleX(-1); }
  36.190% { transform: scaleX(-1); }
  36.905% { transform: scaleX(1); }
  41.190% { transform: scaleX(1); }
  41.905% { transform: scaleX(-1); }
  46.667% { transform: scaleX(-1); }
  47.381% { transform: scaleX(1); }
  51.667% { transform: scaleX(1); }
  52.381% { transform: scaleX(-1); }
  57.143% { transform: scaleX(-1); }
  57.857% { transform: scaleX(1); }
  62.143% { transform: scaleX(1); }
  62.857% { transform: scaleX(-1); }
  67.619% { transform: scaleX(-1); }
  68.333% { transform: scaleX(1); }
  97.143% { transform: scaleX(1); }
  97.857% { transform: scaleX(-1); }
  100.000% { transform: scaleX(-1); }
}

@keyframes bx-heap {
  0.000% { transform: translateY(44px); }
  9.476% { transform: translateY(44.0px); }
  10.238% { transform: translateY(37.6px); }
  19.952% { transform: translateY(37.6px); }
  20.714% { transform: translateY(31.1px); }
  30.429% { transform: translateY(31.1px); }
  31.190% { transform: translateY(24.7px); }
  40.905% { transform: translateY(24.7px); }
  41.667% { transform: translateY(18.3px); }
  51.381% { transform: translateY(18.3px); }
  52.143% { transform: translateY(11.9px); }
  61.857% { transform: translateY(11.9px); }
  62.619% { transform: translateY(5.4px); }
  72.333% { transform: translateY(5.4px); }
  73.095% { transform: translateY(-1.0px); }
  97.619% { transform: translateY(-1px); }
  99.524% { transform: translateY(44px); }
  100.000% { transform: translateY(44px); }
}

@keyframes bx-held1 {
  0.000% { opacity: 0; }
  2.571% { opacity: 0; }
  2.619% { opacity: 1; }
  7.143% { opacity: 1; }
  7.190% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-pile1 {
  0.000% { opacity: 1; }
  2.571% { opacity: 1; }
  2.619% { opacity: 0; }
  97.619% { opacity: 0; }
  99.048% { opacity: 1; }
  100.000% { opacity: 1; }
}

@keyframes bx-label1 {
  0.000% { opacity: 0; }
  2.571% { opacity: 0; }
  3.190% { opacity: 1; }
  8.810% { opacity: 1; }
  9.524% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-held2 {
  0.000% { opacity: 0; }
  13.048% { opacity: 0; }
  13.095% { opacity: 1; }
  17.619% { opacity: 1; }
  17.667% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-pile2 {
  0.000% { opacity: 1; }
  13.048% { opacity: 1; }
  13.095% { opacity: 0; }
  97.619% { opacity: 0; }
  99.048% { opacity: 1; }
  100.000% { opacity: 1; }
}

@keyframes bx-label2 {
  0.000% { opacity: 0; }
  13.048% { opacity: 0; }
  13.667% { opacity: 1; }
  19.286% { opacity: 1; }
  20.000% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-held3 {
  0.000% { opacity: 0; }
  23.524% { opacity: 0; }
  23.571% { opacity: 1; }
  28.095% { opacity: 1; }
  28.143% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-pile3 {
  0.000% { opacity: 1; }
  23.524% { opacity: 1; }
  23.571% { opacity: 0; }
  97.619% { opacity: 0; }
  99.048% { opacity: 1; }
  100.000% { opacity: 1; }
}

@keyframes bx-label3 {
  0.000% { opacity: 0; }
  23.524% { opacity: 0; }
  24.143% { opacity: 1; }
  29.762% { opacity: 1; }
  30.476% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-held4 {
  0.000% { opacity: 0; }
  34.000% { opacity: 0; }
  34.048% { opacity: 1; }
  38.571% { opacity: 1; }
  38.619% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-pile4 {
  0.000% { opacity: 1; }
  34.000% { opacity: 1; }
  34.048% { opacity: 0; }
  97.619% { opacity: 0; }
  99.048% { opacity: 1; }
  100.000% { opacity: 1; }
}

@keyframes bx-label4 {
  0.000% { opacity: 0; }
  34.000% { opacity: 0; }
  34.619% { opacity: 1; }
  40.238% { opacity: 1; }
  40.952% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-held5 {
  0.000% { opacity: 0; }
  44.476% { opacity: 0; }
  44.524% { opacity: 1; }
  49.048% { opacity: 1; }
  49.095% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-pile5 {
  0.000% { opacity: 1; }
  44.476% { opacity: 1; }
  44.524% { opacity: 0; }
  97.619% { opacity: 0; }
  99.048% { opacity: 1; }
  100.000% { opacity: 1; }
}

@keyframes bx-label5 {
  0.000% { opacity: 0; }
  44.476% { opacity: 0; }
  45.095% { opacity: 1; }
  50.714% { opacity: 1; }
  51.429% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-held6 {
  0.000% { opacity: 0; }
  54.952% { opacity: 0; }
  55.000% { opacity: 1; }
  59.524% { opacity: 1; }
  59.571% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-pile6 {
  0.000% { opacity: 1; }
  54.952% { opacity: 1; }
  55.000% { opacity: 0; }
  97.619% { opacity: 0; }
  99.048% { opacity: 1; }
  100.000% { opacity: 1; }
}

@keyframes bx-label6 {
  0.000% { opacity: 0; }
  54.952% { opacity: 0; }
  55.571% { opacity: 1; }
  61.190% { opacity: 1; }
  61.905% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-held7 {
  0.000% { opacity: 0; }
  65.429% { opacity: 0; }
  65.476% { opacity: 1; }
  70.000% { opacity: 1; }
  70.048% { opacity: 0; }
  100.000% { opacity: 0; }
}

@keyframes bx-pile7 {
  0.000% { opacity: 1; }
  65.429% { opacity: 1; }
  65.476% { opacity: 0; }
  97.619% { opacity: 0; }
  99.048% { opacity: 1; }
  100.000% { opacity: 1; }
}

@keyframes bx-label7 {
  0.000% { opacity: 0; }
  65.429% { opacity: 0; }
  66.048% { opacity: 1; }
  71.667% { opacity: 1; }
  72.381% { opacity: 0; }
  100.000% { opacity: 0; }
}

/* From her hand into the bag (hidden behind the bag's front once inside) */
@keyframes bx-drop {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  2.381% { opacity: 1; transform: translate(var(--dx), 116px) rotate(var(--rot)); }
  2.581%, 100% { opacity: 0; transform: translate(var(--dx), 116px) rotate(var(--rot)); }
}

@keyframes bx-open {
  0%, 72.857% { opacity: 1; }
  74.286%, 97.143% { opacity: 0; }
  98.810%, 100% { opacity: 1; }
}

@keyframes bx-closed {
  0%, 72.857% { opacity: 0; }
  74.286%, 97.143% { opacity: 1; }
  98.810%, 100% { opacity: 0; }
}

@keyframes bx-tag {
  0%, 78.095% { opacity: 0; transform: scale(0.4); }
  79.524% { opacity: 1; transform: scale(1.15); }
  80.238%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes bx-swing {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

@keyframes bx-ready {
  0%, 84.762% { opacity: 0; transform: translateY(8px); }
  86.190%, 93.810% { opacity: 1; transform: translateY(0); }
  95.000%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes bx-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

/* Steps: the current one is highlighted in Bintix blue */
@keyframes bx-step1 {
  0%, 72.381% { background: #2f6fd6; color: #fff; }
  72.619%, 100% { background: rgba(255, 255, 255, 0.7); color: var(--muted); }
}

@keyframes bx-step2 {
  0%, 72.381% { background: rgba(255, 255, 255, 0.7); color: var(--muted); }
  72.619%, 84.048% { background: #2f6fd6; color: #fff; }
  84.286%, 100% { background: rgba(255, 255, 255, 0.7); color: var(--muted); }
}

@keyframes bx-step3 {
  0%, 84.048% { background: rgba(255, 255, 255, 0.7); color: var(--muted); }
  84.286%, 94.762% { background: #2f6fd6; color: #fff; }
  95.000%, 100% { background: rgba(255, 255, 255, 0.7); color: var(--muted); }
}

.bag-rules {
  padding: 1.5rem;
  border-radius: var(--radius);
}

.bag-rules h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
}

.bag-rules.yes {
  background: #e0f2d1;
}

.bag-rules.yes h3 svg {
  color: #4aa83a;
}

.bag-rules.no {
  background: #ffdcd5;
}

.bag-rules.no h3 svg {
  color: #e0503f;
}

.bag-rules ul {
  display: grid;
  gap: 0.6rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.bag-rules li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  background: #fff;
  font-weight: 500;
}

.bag-rules li svg {
  width: 18px;
  color: #e0503f;
}

/* ---------- Recycle Pay: donation ---------- */

.donate-card {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.8rem;
  border-radius: 26px;
  background: linear-gradient(160deg, #ffdbe7, #e6ddfb);
  box-shadow: 0 20px 40px -28px rgba(45, 58, 76, 0.55);
}

.donate-figure {
  width: min(150px, 40%);
  height: auto;
  transform-origin: 50% 100%;
  animation: breathe 5s ease-in-out infinite;
}

.give-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
}

.give-item svg {
  width: 20px;
  color: #8f7bea;
}

.give-item.muted {
  color: var(--muted);
  font-weight: 500;
}

.give-item.muted svg {
  color: #f06aa0;
}

/* ---------- Partner: three ways to partner ---------- */

.partner-ways {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.card-link .more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.95rem;
}

.card-link:hover .more {
  text-decoration: underline;
}

.eyebrow-num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.6rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--brand-dark);
  font-weight: 700;
}

/* ---------- Sustainability: circular loop ---------- */

.loop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin: 2rem 0 1rem;
}

.loop div {
  padding: 1.4rem 0.6rem;
  border-radius: var(--radius);
  text-align: center;
  transition: transform 0.3s ease;
}

.loop div:hover {
  transform: translateY(-6px) rotate(-2deg);
}

.loop svg {
  margin-bottom: 0.6rem;
  font-size: 1.6rem;
}

.loop b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

@media (max-width: 900px) {
  .loop {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Price list ---------- */

.ticket {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1.5px dashed #cdc4ae;
  border-radius: 26px;
  background: #fff;
}

.ticket table {
  width: 100%;
  border-collapse: collapse;
}

.ticket th,
.ticket td {
  padding: 0.85rem 0.3rem;
  border-bottom: 1px dashed var(--line);
  text-align: left;
}

.ticket th {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.ticket .rate {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ticket td.rate {
  color: var(--green);
  font-size: 1.1rem;
  font-weight: 700;
}

/* Live price list (js/prices.js) */

.price-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

/* City switcher */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 1.05em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.seg-btn:hover {
  color: var(--ink);
}

.seg-btn[aria-checked="true"] {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(47, 122, 39, 0.8);
}

.price-search {
  position: relative;
  flex: 1 1 220px;
  max-width: 340px;
}

.price-search > svg,
.price-search > i {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.price-search input {
  width: 100%;
  margin: 0;
  padding: 0.7em 1em 0.7em 2.6em;
  border-radius: 999px;
}

/* Category filter */
.price-cats {
  display: flex;
  gap: 0.5rem;
  margin: 1.1rem 0 0.4rem;
  padding-bottom: 0.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.cat-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.6em 0.45em 0.85em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.cat-chip svg {
  color: var(--brand);
}

.cat-chip small {
  min-width: 1.6em;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.cat-chip:hover {
  border-color: #b9c6b2;
}

.cat-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.cat-chip[aria-pressed="true"] svg {
  color: var(--leaf);
}

.cat-chip[aria-pressed="true"] small {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Groups and rows */
.price-body {
  min-height: 12rem;
}

.price-group {
  margin-top: 1.4rem;
}

.pg-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.3rem;
}

.pg-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.pg-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 1.05rem;
}

.pg-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
}

.price-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  column-gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Row: [item icon] [name + tag] ........ [rate] */
.price-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px dashed var(--line);
}

/* Small tile with the item's icon, tinted with its category colour */
.pr-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 1rem;
}

.pr-name {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  font-weight: 500;
}

.pr-tag {
  padding: 0.1em 0.55em;
  border-radius: 999px;
  background: var(--sky);
  color: #2d6fb0;
  font-size: 0.72rem;
  font-weight: 600;
}

.pr-rate {
  flex: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pr-rate strong {
  color: var(--green);
  font-size: 1.08rem;
}

.pr-rate small {
  margin-left: 0.25em;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Loading, empty and error states */
.price-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.9rem 2rem;
  margin-top: 1.4rem;
}

.price-skeleton span {
  height: 1.6rem;
  border-radius: 8px;
  background: linear-gradient(90deg, #eef2ea 0%, #f7f9f5 50%, #eef2ea 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.price-empty {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 2.5rem 1rem;
  color: var(--muted);
  text-align: center;
}

.price-empty > svg {
  font-size: 1.8rem;
  color: var(--brand);
}

.price-empty.is-error > svg {
  color: #c2410c;
}

.price-empty p {
  margin: 0;
}

@media (max-width: 640px) {
  .seg,
  .price-search {
    width: 100%;
    max-width: none;
  }

  .seg-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-skeleton span {
    animation: none;
  }
}

/* ---------- Download app: phone mockup ---------- */

.phone {
  width: min(290px, 80%);
  aspect-ratio: 9 / 18.5;
  margin: 0 auto;
  padding: 14px;
  border-radius: 42px;
  background: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(45, 58, 76, 0.6);
}

.screen {
  height: 100%;
  overflow: hidden;
  padding: 1.3rem 1.1rem;
  border-radius: 30px;
  background: var(--paper);
}

.screen .hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-weight: 700;
}

.screen .box {
  margin-bottom: 0.8rem;
  padding: 1rem;
  border-radius: 18px;
  color: var(--ink);
}

.screen .box small {
  display: block;
  opacity: 0.8;
}

.screen .box strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

/* ---------- Contact ---------- */

.info {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.info a,
.info div {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

.info svg {
  width: 20px;
  color: var(--green);
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
}

.form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.form .full {
  grid-column: 1 / -1;
}

.form .btn {
  justify-self: start;
}

.ok {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--mint);
  color: var(--ink);
}

.ok.show {
  display: block;
}

.form-error {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: #fde8ec;
  color: #8a1c33;
}

.form-error.show {
  display: block;
}

.form altcha-widget {
  grid-column: 1 / -1;
  --altcha-max-width: 100%;
}

.form .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 560px) {
  .form {
    grid-template-columns: 1fr;
  }
}

/* ---------- Home: client logo marquee ---------- */

.clients {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.clients-title {
  max-width: none;
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Two identical tracks slide together, so the loop never shows a gap */
.marquee-track {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee 72s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

.client {
  display: grid;
  flex: none;
  place-items: center;
  height: 92px;
  padding: 0 clamp(1.8rem, 4vw, 3.2rem);
}

.client img {
  display: block;
  width: auto;
  max-width: none;
  height: 34px;
  /* All client logos are shown in grayscale */
  filter: grayscale(1) contrast(1.1);
  opacity: 0.6;
  transition: opacity 0.25s;
}

/* Round emblems need more height to read at the same visual weight */
.client.emblem img {
  height: 62px;
}

/* Short, chunky wordmarks sit between the two */
.client.mid img {
  height: 44px;
}

/* Stacked logos with small type (e.g. Tata Housing Ariana) */
.client.tall img {
  height: 88px;
}

/* Pale brand colours turn very light in grayscale, so darken them a little */
.client.light img {
  filter: grayscale(1) brightness(0.7) contrast(1.4);
}

.client img:hover {
  opacity: 0.9;
}

@media (max-width: 640px) {
  .client img {
    height: 26px;
  }

  .client.emblem img {
    height: 50px;
  }

  .client.mid img {
    height: 36px;
  }

  .client.tall img {
    height: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
  }

  .marquee-track {
    animation: none;
  }

  .marquee-track[aria-hidden="true"] {
    display: none;
  }
}

/* Bintix: "All bags are monitored…" rule under the keep-out list */
.bag-trace {
  margin-top: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
}

.bag-trace svg {
  flex: none;
  margin-top: 0.15em;
  font-size: 1.15rem;
}

/* ---------- Trust points (home and careers) ---------- */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}

.trust-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  align-items: start;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.trust-card .ic {
  grid-row: span 2;
  margin: 0;
}

.trust-card h3 {
  margin: 0.2rem 0 0;
  font-size: 1.12rem;
}

.trust-card p {
  margin: 0;
  font-size: 0.95rem;
}

/* Compact row of the same points on the Careers tab */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
  padding: 0;
  list-style: none;
}

.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: var(--tint);
  color: var(--brand-dark);
  font-size: 0.92rem;
  font-weight: 600;
}

/* ---------- Careers: apply ---------- */

/* Job cards: keep every Apply button on the bottom edge */
.card:has(.apply-btn) {
  display: flex;
  flex-direction: column;
}

.card:has(.apply-btn) .chips {
  margin-bottom: 1.2rem;
}

.apply-btn {
  align-self: flex-start;
  margin-top: auto;
}

.apply-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 26px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(31, 45, 61, 0.55);
}

.apply-dialog::backdrop {
  background: rgba(31, 45, 61, 0.45);
  backdrop-filter: blur(3px);
}

.apply-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.3rem, 3vw, 1.8rem) clamp(1.4rem, 3vw, 2rem) 0;
}

.apply-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
}

.apply-kicker {
  margin: 0 0 0.2rem;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.icon-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.15rem;
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--tint);
}

/* The form sits inside the dialog card, so drop its own frame */
.apply-form {
  border: 0;
  border-radius: 0;
}

/* .form sets display: grid, which would otherwise override [hidden] */
.apply-form[hidden] {
  display: none;
}

.field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.form .file-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.4rem 1rem;
  border: 1.5px dashed #b9c6b2;
  border-radius: 16px;
  background: var(--paper);
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}

/* The real input covers the whole zone, so clicks, drops and keyboard work */
.file-drop input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-drop > svg {
  font-size: 1.6rem;
  color: var(--brand);
}

.file-drop small {
  color: var(--muted);
}

.file-drop:hover,
.file-drop.is-over {
  border-color: var(--brand);
  background: #eaf4e3;
}

.file-drop:focus-within {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.file-drop.has-file {
  border-style: solid;
  border-color: var(--brand);
  background: #eaf4e3;
}

.file-drop.has-file .file-drop-text {
  color: var(--brand-dark);
  font-weight: 600;
  word-break: break-word;
}

.file-drop.is-invalid {
  border-color: #c2410c;
}

.apply-safe {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: none;
  margin: 0;
  font-size: 0.9rem;
}

.apply-safe svg {
  margin-top: 0.2em;
  color: var(--green);
}

.apply-done {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 2rem clamp(1.4rem, 3vw, 2rem) 2.2rem;
  text-align: center;
}

.apply-done[hidden] {
  display: none;
}

.apply-done-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 0.4rem;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green);
  font-size: 1.9rem;
}

.apply-done p {
  margin: 0 0 0.8rem;
}

/* Careers: open roles in rows of three (two rows for six roles).
   Two per row on tablets, one per row on phones. */
.jobs-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px) {
  .jobs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .jobs-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Home: FAQ ---------- */

.faq-list {
  display: grid;
  gap: 0.7rem;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Plus sign that turns into a minus when open */
.faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--brand);
  font-size: 1.4rem;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  margin: 0;
  padding: 0 1.2rem 1.1rem;
}

.faq-item a {
  color: var(--brand-dark);
  font-weight: 600;
}

/* ---------- Page titles (one <h1> per page) ---------- */

/* Inner pages use <h1> for their title but keep the section-heading size */
h1.page-title {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- 404 page ("This page got recycled") ----------
   Markup and drawing: renderNotFound() in pages.js */

.not-found {
  display: grid;
  justify-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem);
  text-align: center;
}

.not-found .lede {
  margin-inline: auto;
}

.not-found .ctas {
  justify-content: center;
}

.nf-art {
  width: min(320px, 80vw);
  height: auto;
  margin-bottom: 0.4rem;
  overflow: visible;
}

.nf-kicker {
  margin: 0 0 0.4rem;
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* "Scrap value of this page: ₹0.00 / kg" */
.nf-rate {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 1.4rem;
  padding: 0.5em 1.1em;
  border: 1.5px dashed #cdc4ae;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
}

.nf-rate strong {
  color: #c2410c;
}

/* Motion: the page bobs above the bin, the lid rattles, the bin sweats */
@media (prefers-reduced-motion: no-preference) {
  .nf-ball {
    transform-box: fill-box;
    transform-origin: center;
    animation: nf-float 3.2s ease-in-out infinite;
  }

  .nf-lid {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    animation: nf-lid 3.2s ease-in-out infinite;
  }

  .nf-sweat {
    animation: nf-sweat 2.4s ease-in infinite;
  }

  .nf-scraps {
    animation: nf-drift 6s ease-in-out infinite;
  }

  .nf-whoosh {
    animation: nf-whoosh 1.2s linear infinite;
  }
}

@keyframes nf-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

@keyframes nf-lid {
  0%, 100% { transform: rotate(-14deg); }
  45% { transform: rotate(-24deg); }
  55% { transform: rotate(-10deg); }
}

@keyframes nf-sweat {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(26px); opacity: 0; }
}

@keyframes nf-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes nf-whoosh {
  to { stroke-dashoffset: -24; }
}