/* ==========================================================================
   Computer Recycling LLC — Homepage 2026
   Mobile-first engagement layer. Loads AFTER eco-styles.css and reuses its
   brand tokens (--green, --paper, --ink, …) so the palette is unchanged.
   Everything here is namespaced `h26-` to avoid touching the other 180 pages.
   ========================================================================== */

.h26 {
  --h26-gutter: clamp(16px, 5vw, 40px);
  --h26-max: 1220px;
  --h26-pad-y: clamp(56px, 9vw, 104px);
  --h26-card: var(--paper);
  --h26-ring: color-mix(in srgb, var(--green) 14%, transparent);
  --h26-ease: cubic-bezier(.16, 1, .3, 1);
  --h26-spring: cubic-bezier(.34, 1.56, .64, 1);
  --h26-bar-h: 68px;

  /* Accent colours used for TEXT must flip with the theme. --green (#146b2f)
     is an ink colour: fine on paper (6.4:1) but only 2.6:1 on a dark card.
     Every value below is measured to clear WCAG AA (4.5:1) on the surface it
     actually sits on, in both themes. */
  --h26-accent:      var(--green);        /* links & accent text  */
  --h26-star:        #9a6200;             /* rating stars         */
  --h26-tag-home-fg: var(--green);
  --h26-tag-biz-fg:  #7a5200;
}
[data-theme="dark"] .h26 {
  --h26-accent:      var(--green-bright); /* 8.5:1 on the dark card */
  --h26-star:        #f5a623;             /* 8.4:1 — gold is fine on dark */
  --h26-tag-home-fg: var(--green-glow);
  --h26-tag-biz-fg:  #ffd68a;
}

.h26-wrap {
  width: 100%;
  max-width: var(--h26-max);
  margin-inline: auto;
  padding-inline: var(--h26-gutter);
}

.h26-sec { padding-block: var(--h26-pad-y); position: relative; }
.h26-sec--paper { background: var(--paper); }
.h26-sec--bg    { background: var(--bg); }
.h26-sec--deep  { background: var(--green-deep); color: #fff; }
.h26-sec--tight { padding-block: clamp(36px, 6vw, 64px); }

/* ---------- Shared type ---------- */
.h26-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--h26-accent);
  padding: 7px 14px;
  border: 1px solid var(--h26-ring);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--green-bright) 8%, transparent);
  margin-bottom: 18px;
}
.h26-sec--deep .h26-eyebrow,
.h26-final .h26-eyebrow {
  color: var(--green-glow);
  border-color: rgba(94, 248, 138, .26);
  background: rgba(45, 210, 91, .12);
}
.h26-eyebrow svg { width: 14px; height: 14px; flex: none; }

.h26-h2 {
  font-family: var(--heading);
  font-weight: 800;
  font-size: clamp(28px, 5.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.h26-lede {
  font-size: clamp(15.5px, 3.6vw, 18px);
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.h26-sec--deep .h26-lede { color: rgba(255, 255, 255, .8); }

.h26-sec-head { margin-bottom: clamp(28px, 5vw, 52px); }
@media (min-width: 900px) {
  .h26-sec-head--split {
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: 48px; align-items: end;
  }
  .h26-sec-head--split .h26-lede { padding-bottom: 6px; }
}

/* ==========================================================================
   1. HERO — compact on mobile so the CTA is above the fold
   ========================================================================== */
.h26-hero {
  position: relative;
  isolation: isolate;
  background: var(--green-deep);
  color: #fff;
  /* The nav is position:sticky, so it already occupies flow above the hero —
     no offset needed here, only breathing room. */
  padding-top: clamp(26px, 5vw, 56px);
  padding-bottom: clamp(28px, 6vw, 64px);
  overflow: hidden;
}
.h26-hero-media {
  position: absolute; inset: 0; z-index: -2;
}
.h26-hero-media img,
.h26-hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.h26-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 32, 14, .90) 0%, rgba(6, 32, 14, .74) 42%, rgba(6, 32, 14, .93) 100%),
    radial-gradient(120% 80% at 12% 0%, rgba(45, 210, 91, .22), transparent 60%);
}

.h26-hero-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-bottom: 16px;
}
/* Three chips would stack three-deep on a 375px screen and push the CTA
   below the fold — the "no appointment" promise is repeated in the sub, so
   it only earns its place once there's room. */
@media (max-width: 439px) { .h26-hero-chips > :nth-child(3) { display: none; } }
.h26-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.h26-chip svg { width: 13px; height: 13px; flex: none; }
.h26-chip--live { border-color: rgba(94, 248, 138, .4); }
.h26-chip--live .h26-dot { background: var(--green-glow); }
.h26-chip--shut .h26-dot { background: var(--amber); animation: none; }
.h26-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-glow);
  animation: h26-pulse 2.2s infinite;
  flex: none;
}
@keyframes h26-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94, 248, 138, .6); }
  70%      { box-shadow: 0 0 0 7px rgba(94, 248, 138, 0); }
}

.h26-hero h1 {
  font-family: var(--heading);
  font-weight: 900;
  font-size: clamp(34px, 9.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.h26-hero h1 em {
  font-style: normal;
  color: var(--green-glow);
  position: relative;
}
.h26-hero-sub {
  font-size: clamp(15.5px, 3.9vw, 19px);
  line-height: 1.58;
  color: rgba(255, 255, 255, .84);
  margin: 0 0 22px;
  max-width: 48ch;
}
.h26-hero-sub b { color: #fff; font-weight: 600; }

/* Google rating pill */
.h26-gpill {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-full);
  padding: 10px 15px 10px 12px;
  min-height: 44px;
  margin-bottom: 18px;
  color: #fff;
  transition: background .22s var(--h26-ease), transform .22s var(--h26-ease);
}
.h26-gpill:hover { background: rgba(255, 255, 255, .17); transform: translateY(-1px); }
.h26-gpill svg { width: 16px; height: 16px; flex: none; }
.h26-gpill-stars { color: #ffc107; font-size: 13px; letter-spacing: 1px; }
.h26-gpill-score { font-family: var(--heading); font-weight: 800; font-size: 15px; }
.h26-gpill-txt { font-size: 12.5px; color: rgba(255, 255, 255, .74); }
@media (max-width: 400px) { .h26-gpill-txt { display: none; } }

/* Hero CTAs — primary full-width on mobile, then a 3-up icon row */
.h26-hero-cta { display: grid; gap: 10px; margin-bottom: 20px; }
@media (min-width: 720px) {
  .h26-hero-cta { grid-auto-flow: column; justify-content: start; gap: 12px; }
}

.h26-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 15px 26px;
  border-radius: var(--r-full);
  font-family: var(--body);
  font-size: 16px; font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--h26-spring), box-shadow .22s var(--h26-ease),
              background .22s var(--h26-ease), border-color .22s var(--h26-ease);
  -webkit-tap-highlight-color: transparent;
}
.h26-btn:active { transform: scale(.975); }
.h26-btn svg { width: 18px; height: 18px; flex: none; }

.h26-btn--go {
  background: var(--green-bright); color: #04220e;
  box-shadow: 0 6px 20px rgba(45, 210, 91, .34);
}
.h26-btn--go:hover { background: var(--green-glow); box-shadow: 0 10px 28px rgba(45, 210, 91, .44); transform: translateY(-2px); }
.h26-btn--solid { background: var(--green); color: #fff; box-shadow: var(--shadow-cta, 0 4px 16px rgba(20,107,47,.3)); }
.h26-btn--solid:hover { background: var(--green-mid); transform: translateY(-2px); }
.h26-btn--white { background: #fff; color: var(--green-deep); }
.h26-btn--white:hover { background: var(--cream); transform: translateY(-2px); }
.h26-btn--ghost {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.h26-btn--ghost:hover { background: rgba(255, 255, 255, .15); }
.h26-btn--line { background: transparent; border-color: var(--rule); color: var(--ink); }
.h26-btn--line:hover { border-color: var(--green-mid); color: var(--h26-accent); }
.h26-btn--sm { min-height: 44px; padding: 11px 18px; font-size: 14.5px; }
.h26-btn--block { width: 100%; }

/* Quick-action row (call / text / hours) under the hero CTAs */
.h26-quick {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 18px;
}
.h26-quick a {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .2s var(--h26-ease), transform .2s var(--h26-spring);
  min-height: 66px;
  justify-content: center;
}
.h26-quick a:active { transform: scale(.97); }
.h26-quick a:hover { background: rgba(255, 255, 255, .14); }
.h26-quick svg { width: 19px; height: 19px; color: var(--green-glow); }
.h26-quick .k { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.h26-quick .v { font-size: 11px; color: rgba(255, 255, 255, .66); line-height: 1.2; text-align: center; }

/* Hero stat strip */
.h26-hero-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 24px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 720px) { .h26-hero-stats { grid-template-columns: repeat(4, 1fr); } }
.h26-hero-stats > div {
  background: rgba(6, 32, 14, .55);
  padding: 14px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.h26-hero-stats .n {
  font-family: var(--heading); font-weight: 900;
  font-size: clamp(22px, 6vw, 32px); line-height: 1;
  color: var(--green-glow);
  letter-spacing: -.02em;
}
.h26-hero-stats .n small { font-size: .48em; font-weight: 600; }
.h26-hero-stats .l {
  font-size: 11.5px; color: rgba(255, 255, 255, .68);
  margin-top: 5px; line-height: 1.3;
}

/* ==========================================================================
   2. "CAN I RECYCLE THIS?" — the interactive answer engine
   ========================================================================== */
.h26-check {
  background: var(--bg);
  border-block: 1px solid var(--rule);
}
.h26-check-inner {
  max-width: 780px; margin-inline: auto; text-align: center;
}
.h26-check .h26-h2 { font-size: clamp(26px, 5.4vw, 42px); }

.h26-search {
  position: relative;
  margin: 22px 0 12px;
}
.h26-search-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  border: 2px solid var(--rule);
  border-radius: var(--r-full);
  padding: 6px 6px 6px 18px;
  transition: border-color .2s var(--h26-ease), box-shadow .2s var(--h26-ease);
}
.h26-search-field:focus-within {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-bright) 18%, transparent);
}
.h26-search-field > svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
#h26-q {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-family: var(--body); font-size: 16px; color: var(--ink);
  padding: 13px 0;
  min-height: 46px;
}
#h26-q::placeholder { color: var(--muted); }
.h26-search-clear {
  display: none;
  width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  cursor: pointer; font-size: 20px; line-height: 1;
  align-items: center; justify-content: center;
}
.h26-search-clear.on { display: inline-flex; }
.h26-search-clear:hover { background: var(--rule); color: var(--ink); }

/* Suggestion chips */
.h26-sugg {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  margin-bottom: 6px;
}
.h26-sugg button {
  font-family: var(--body);
  font-size: 13px; font-weight: 600;
  padding: 10px 15px;
  min-height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--rule);
  background: transparent; color: var(--ink-soft);
  cursor: pointer;
  transition: all .18s var(--h26-ease);
  -webkit-tap-highlight-color: transparent;
}
.h26-sugg button:hover {
  border-color: var(--green-mid); color: var(--h26-accent);
  background: color-mix(in srgb, var(--green-bright) 8%, transparent);
}

/* Result card */
.h26-result {
  margin-top: 18px;
  text-align: left;
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--bg);
  overflow: hidden;
  display: none;
}
.h26-result.on { display: block; animation: h26-pop .34s var(--h26-spring) both; }
@keyframes h26-pop {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.h26-result-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  font-family: var(--heading); font-weight: 800;
  font-size: clamp(17px, 4.4vw, 22px);
  letter-spacing: -.01em;
}
.h26-result[data-verdict="yes"] .h26-result-head { background: var(--green); color: #fff; }
.h26-result[data-verdict="no"]  .h26-result-head { background: var(--amber); color: #2b1c00; }
.h26-result[data-verdict="ask"] .h26-result-head { background: var(--sky); color: #04202e; }
.h26-result-head .ic {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: grid; place-items: center;
}
.h26-result-head .ic svg { width: 19px; height: 19px; }
.h26-result-body { padding: 16px 18px 18px; }
.h26-result-body p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.h26-result-links { display: flex; flex-wrap: wrap; gap: 8px; }
.h26-result-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700;
  padding: 10px 15px; min-height: 42px;
  border-radius: var(--r-full);
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--h26-accent);
  text-decoration: none;
  transition: all .18s var(--h26-ease);
}
.h26-result-links a:hover { border-color: var(--green-mid); background: color-mix(in srgb, var(--green-bright) 10%, transparent); }

.h26-check-foot {
  margin-top: 16px;
  font-size: 13.5px; color: var(--muted);
}
.h26-check-foot a { color: var(--h26-accent); font-weight: 700; }

/* ==========================================================================
   3. AUDIENCE SPLIT — households vs. businesses
   ========================================================================== */
.h26-split { display: grid; gap: 16px; }
@media (min-width: 860px) { .h26-split { grid-template-columns: 1fr 1fr; gap: 22px; } }

.h26-lane {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--h26-card);
  display: flex; flex-direction: column;
  transition: transform .28s var(--h26-ease), box-shadow .28s var(--h26-ease), border-color .28s var(--h26-ease);
}
.h26-lane:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 61, 26, .13); border-color: var(--green-mid); }
.h26-lane-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
.h26-lane-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--h26-ease); }
.h26-lane:hover .h26-lane-img img { transform: scale(1.04); }
.h26-lane-body { padding: clamp(20px, 4.5vw, 30px); flex: 1; display: flex; flex-direction: column; }
.h26-lane-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-full);
  margin-bottom: 12px;
}
.h26-lane--home .h26-lane-tag { background: color-mix(in srgb, var(--green-bright) 16%, transparent); color: var(--h26-tag-home-fg); }
.h26-lane--biz  .h26-lane-tag { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--h26-tag-biz-fg); }
.h26-lane h3 {
  font-family: var(--heading); font-weight: 800;
  font-size: clamp(21px, 4.6vw, 28px); line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink);
}
.h26-lane p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.h26-lane ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.h26-lane li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.45;
}
.h26-lane li svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--h26-accent); }
.h26-lane-cta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 9px; }

/* ==========================================================================
   4. HOW IT WORKS — snap-scroll on mobile, grid on desktop
   ========================================================================== */
/* Was a horizontal snap rail below 900px, which meant the four steps needed
   swiping (only two ever visible) and the third service card sat clipped at
   the right edge. Now a plain responsive grid on the same cadence as
   .steps-grid on items.html: everything is visible, nothing to swipe. */
.h26-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1000px) { .h26-rail { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 560px)  { .h26-rail { grid-template-columns: 1fr; gap: 14px; } }

/* The three service cards carry a heading, a paragraph and a bullet list, so
   they need more width before they read as cramped — drop to one column
   earlier than the step cards do. */
.h26-rail--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .h26-rail--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .h26-rail--3 { grid-template-columns: 1fr; } }

.h26-step {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--h26-card);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transition: transform .28s var(--h26-ease), box-shadow .28s var(--h26-ease);
}
.h26-step:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -14px rgba(11, 61, 26, .22); }
.h26-step-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); }
.h26-step-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s var(--h26-ease); }
.h26-step:hover .h26-step-img img { transform: scale(1.05); }
.h26-step-n {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
  font-family: var(--heading); font-weight: 800; font-size: 21px;
  box-shadow: 0 4px 12px rgba(20, 107, 47, .34);
}
[data-theme="dark"] .h26-step-n {
  background: var(--green-bright); color: var(--green-deep);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.h26-step-body { padding: 20px 22px 24px; }
.h26-step-body h3 {
  font-family: var(--heading); font-weight: 800;
  font-size: 20px; margin: 0 0 7px; color: var(--ink);
  letter-spacing: -.01em;
}
.h26-step-body p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }


/* ==========================================================================
   5. IMPACT ESTIMATOR
   ========================================================================== */
.h26-calc {
  display: grid; gap: 20px;
  align-items: start;
}
@media (min-width: 940px) { .h26-calc { grid-template-columns: 1fr 1fr; gap: 48px; } }

.h26-calc-pick { display: grid; gap: 10px; }
.h26-pick {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--h26-card);
  transition: border-color .22s var(--h26-ease), background .22s var(--h26-ease),
              box-shadow .22s var(--h26-ease);
}
.h26-pick.has {
  border-color: var(--green-mid);
  background: color-mix(in srgb, var(--green-bright) 7%, var(--h26-card));
  box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--green-bright) 85%, transparent);
}
.h26-pick-ic {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--green-bright) 13%, transparent);
  color: var(--h26-accent);
  transition: background .22s var(--h26-ease);
}
.h26-pick.has .h26-pick-ic { background: color-mix(in srgb, var(--green-bright) 24%, transparent); }
/* The count springs when you tap -- the only confirmation the row needs. */
@keyframes h26-bump { 0% { transform: scale(1); } 42% { transform: scale(1.3); } 100% { transform: scale(1); } }
.h26-pick.bump .h26-stepper output { animation: h26-bump .3s var(--h26-ease); }
@media (prefers-reduced-motion: reduce) { .h26-pick.bump .h26-stepper output { animation: none; } }
.h26-pick-ic svg { width: 21px; height: 21px; }
.h26-pick-name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.h26-pick-name small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.h26-stepper { display: flex; align-items: center; gap: 4px; }
.h26-stepper button {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg); color: var(--ink);
  font-size: 20px; line-height: 1; font-weight: 600;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .16s var(--h26-ease);
  -webkit-tap-highlight-color: transparent;
}
.h26-stepper button:hover:not(:disabled) { border-color: var(--green-mid); color: var(--h26-accent); }
.h26-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.h26-stepper output {
  min-width: 30px; text-align: center;
  font-family: var(--heading); font-weight: 800; font-size: 17px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.h26-calc-out {
  border-radius: var(--r-lg);
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--green-bright) 5%, var(--green-deep)) 0%,
      var(--green-deep) 52%,
      color-mix(in srgb, #000 22%, var(--green-deep)) 100%);
  color: #fff;
  padding: clamp(24px, 5vw, 34px);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .1) inset,
    0 24px 60px -34px rgba(0, 0, 0, .75);
}
.h26-calc-out::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(115% 80% at 88% -6%, rgba(45, 210, 91, .16), transparent 60%);
  pointer-events: none;
}
.h26-calc-out > * { position: relative; }

/* --- the one number ------------------------------------------------------ */
.h26-tally { text-align: center; padding: 4px 0 24px; }
.h26-tally-k {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(255, 255, 255, .86);
}
.h26-tally-n {
  font-family: var(--heading); font-weight: 900;
  font-size: clamp(56px, 15vw, 84px); line-height: .94;
  letter-spacing: -.045em; margin-top: 12px;
  color: var(--green-glow);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  transition: color .35s var(--h26-ease);
}
.h26-tally-n small {
  font-size: .26em; font-weight: 700; letter-spacing: .02em;
  color: rgba(255, 255, 255, .78);
}
.h26-tally-sub { font-size: 12.5px; color: rgba(255, 255, 255, .86); margin-top: 13px; }
/* At zero the number goes quiet rather than green -- still legible, but it
   reads as "nothing counted yet" without hiding the card. */
.h26-calc-out[data-empty="1"] .h26-tally-n { color: rgba(255, 255, 255, .55); }

/* --- the two destinations ------------------------------------------------ */
.h26-flow {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 19px; margin-bottom: 20px;
}
.h26-flow-h {
  font-family: var(--heading); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255, 255, 255, .86); margin: 0 0 6px;
}
.h26-path {
  display: grid; grid-template-columns: 38px 1fr; gap: 13px;
  align-items: start; padding: 13px 0;
}
.h26-path + .h26-path { border-top: 1px solid rgba(255, 255, 255, .1); }
.h26-path-ic {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--green-bright) 20%, transparent);
  color: var(--green-glow);
}
.h26-path-ic svg { width: 19px; height: 19px; }
.h26-path-t { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.h26-path-t b {
  display: block; font-family: var(--heading); font-weight: 800;
  font-size: 14.5px; color: #fff; letter-spacing: -.01em; margin-bottom: 3px;
}

/* --- 100 dots = one year of the world's e-waste, one dot per percent ----- */
.h26-share {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .22);
  padding: 15px 16px 14px;
  margin-bottom: 20px;
}
.h26-share-dots {
  display: grid; grid-template-columns: repeat(20, 1fr);
  gap: 4px; margin-bottom: 13px;
}
.h26-share-dots span {
  aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .17);
}
.h26-share-dots span.on {
  transition: background .45s var(--h26-ease), box-shadow .45s var(--h26-ease);
}
.h26-share-dots.lit span.on {
  background: var(--green-glow);
  box-shadow: 0 0 7px color-mix(in srgb, var(--green-glow) 50%, transparent);
}
.h26-share-cap {
  font-size: 13px; line-height: 1.5; margin: 0;
  color: rgba(255, 255, 255, .84);
}
.h26-share-cap strong { color: var(--green-glow); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .h26-share-dots span.on { transition: none; }
}

/* ==========================================================================
   6. SERVICES
   ========================================================================== */
.h26-svc {
  border-radius: var(--r-lg);
  background: var(--h26-card);
  border: 1px solid var(--rule);
  padding: clamp(22px, 4.5vw, 30px);
  display: flex; flex-direction: column;
  transition: transform .28s var(--h26-ease), box-shadow .28s var(--h26-ease), border-color .28s var(--h26-ease);
}
.h26-svc:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11, 61, 26, .12); border-color: var(--green-mid); }
.h26-svc-ic {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--green-bright) 13%, transparent);
  color: var(--h26-accent);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.h26-svc-ic svg { width: 25px; height: 25px; }
.h26-svc h3 {
  font-family: var(--heading); font-weight: 800;
  font-size: 20px; margin: 0 0 9px; color: var(--ink);
  letter-spacing: -.015em;
}
.h26-svc p { font-size: 14.8px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; }
.h26-svc ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.h26-svc li { display: flex; gap: 9px; font-size: 14px; color: var(--ink-soft); align-items: flex-start; line-height: 1.45; }
.h26-svc li svg { width: 16px; height: 16px; flex: none; margin-top: 1.5px; color: var(--h26-accent); }
.h26-svc-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; color: var(--h26-accent);
  text-decoration: none;
  min-height: 44px;
}
.h26-svc-link:hover { gap: 11px; }
.h26-svc-link { transition: gap .2s var(--h26-ease); }

/* ==========================================================================
   7. TRUST STRIP + LOGO WALL
   ========================================================================== */
.h26-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .h26-trust { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1040px) { .h26-trust { grid-template-columns: repeat(6, 1fr); } }
.h26-trust-card {
  padding: 18px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--h26-card);
  text-align: center;
  transition: border-color .22s var(--h26-ease), transform .22s var(--h26-ease);
}
.h26-trust-card:hover { border-color: var(--green-mid); transform: translateY(-2px); }
.h26-trust-card svg { width: 28px; height: 28px; color: var(--h26-accent); margin-bottom: 10px; }
.h26-trust-card .h26-trust-h {
  font-family: var(--heading); font-weight: 700;
  font-size: 14px; margin: 0 0 5px; color: var(--ink); line-height: 1.25;
}
.h26-trust-card p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.4; }

.h26-logos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 620px) { .h26-logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .h26-logos { grid-template-columns: repeat(6, 1fr); } }
/* Fixed height, not aspect-ratio: an unconstrained logo overrides
   aspect-ratio and each cell ends up a different height, which made the wall
   look ragged and pushed the caption into the last row. */
.h26-logo {
  height: clamp(84px, 11vw, 100px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  padding: 10px 14px;
  overflow: hidden;
  transition: border-color .22s var(--h26-ease), transform .22s var(--h26-ease);
}
.h26-logo:hover { border-color: var(--green-mid); transform: translateY(-2px); }

/* Logos are capped by HEIGHT so they sit on a shared baseline. The cap is
   tuned per logo shape — a 3:1 wordmark and a 1.5:1 emblem set to the same
   height read as wildly different sizes, so each bucket is chosen to land
   them on roughly equal optical area. */
.h26-logo img {
  width: auto; height: auto;
  max-height: 48px;
  max-width: 84%;
  object-fit: contain;
  filter: grayscale(100%) opacity(.72);
  transition: filter .25s var(--h26-ease);
}
.h26-logo img[data-shape="wide"]    { max-height: 40px; max-width: 88%; }  /* ratio >= 2.8 */
.h26-logo img[data-shape="midtall"] { max-height: 52px; max-width: 78%; }  /* ratio 1.7-2.0 */
.h26-logo img[data-shape="tall"]    { max-height: 58px; max-width: 74%; }  /* ratio < 1.7  */
.h26-logo:hover img { filter: none; }

[data-theme="dark"] .h26-logo { background: #eef5ef; border-color: #21402c; }
[data-theme="dark"] .h26-logo img { filter: grayscale(100%) opacity(.78); }

/* ==========================================================================
   8. REVIEWS
   ========================================================================== */
.h26-rev-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 26px;
}
.h26-rev-score { display: flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; color: inherit; }
.h26-rev-score .big {
  font-family: var(--heading); font-weight: 900;
  font-size: clamp(40px, 10vw, 58px); line-height: .9;
  letter-spacing: -.04em; color: var(--ink);
}
.h26-rev-score .stars { color: var(--h26-star); font-size: 18px; letter-spacing: 2px; }
.h26-rev-score .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

.h26-rev-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 82vw);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--h26-gutter);
  margin-inline: calc(var(--h26-gutter) * -1);
  padding-bottom: 6px;
}
.h26-rev-rail::-webkit-scrollbar { display: none; }
.h26-rev-rail > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .h26-rev-rail {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    overflow: visible; padding-inline: 0; margin-inline: 0; gap: 18px;
  }
}
.h26-rev {
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--h26-card);
  padding: 22px;
  display: flex; flex-direction: column;
}
.h26-rev .stars { color: var(--h26-star); font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.h26-rev blockquote {
  margin: 0 0 18px; font-size: 15.5px; line-height: 1.6;
  color: var(--ink); flex: 1;
}
.h26-rev figcaption {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
}
.h26-rev-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
  font-family: var(--heading); font-weight: 800; font-size: 14px;
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */
.h26-faq { display: grid; gap: 22px; }
@media (min-width: 940px) { .h26-faq { grid-template-columns: .82fr 1.18fr; gap: 56px; } }
.h26-faq-list { display: grid; gap: 10px; }
.h26-q {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--h26-card);
  overflow: hidden;
  transition: border-color .22s var(--h26-ease);
}
.h26-q[open] { border-color: var(--green-mid); }
.h26-q summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 52px 17px 18px;
  position: relative;
  font-family: var(--heading); font-weight: 700;
  font-size: 16px; color: var(--ink); line-height: 1.35;
  min-height: 56px;
  display: flex; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.h26-q summary::-webkit-details-marker { display: none; }
.h26-q summary::after {
  content: "+";
  position: absolute; right: 16px; top: 50%; translate: 0 -50%;
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--green-bright) 13%, transparent);
  color: var(--h26-accent);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 400; line-height: 1;
  transition: rotate .25s var(--h26-ease), background .2s;
}
.h26-q[open] summary::after { content: "+"; rotate: 45deg; background: var(--green); color: #fff; }
.h26-q-a { padding: 0 18px 18px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.h26-q-a a { color: var(--h26-accent); font-weight: 700; }

/* ==========================================================================
   10. CONTACT FORM
   ========================================================================== */
.h26-contact { display: grid; gap: 28px; }
@media (min-width: 960px) { .h26-contact { grid-template-columns: .88fr 1.12fr; gap: 56px; align-items: start; } }

.h26-facts { display: grid; gap: 12px; margin: 26px 0; }
.h26-fact {
  display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: start;
}
.h26-fact-ic {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--green-bright) 13%, transparent);
  color: var(--h26-accent);
  display: grid; place-items: center;
}
.h26-fact-ic svg { width: 19px; height: 19px; }
.h26-fact strong { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.h26-fact span, .h26-fact a { font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.h26-fact a { color: var(--h26-accent); font-weight: 700; text-decoration: none; }

.h26-form {
  background: var(--h26-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px, 4.6vw, 32px);
  box-shadow: 0 12px 34px rgba(11, 61, 26, .07);
}
.h26-form-head { margin-bottom: 20px; }
.h26-form-head h3 {
  font-family: var(--heading); font-weight: 800;
  font-size: 21px; margin: 0 0 5px; color: var(--ink); letter-spacing: -.015em;
}
.h26-form-head p { font-size: 14px; color: var(--muted); margin: 0; }

.h26-field { margin-bottom: 15px; }
.h26-row { display: grid; gap: 15px; }
@media (min-width: 560px) { .h26-row { grid-template-columns: 1fr 1fr; } }
.h26-field label {
  display: block;
  font-size: 13px; font-weight: 700; color: var(--ink);
  margin-bottom: 6px;
}
.h26-field label .opt { font-weight: 400; color: var(--muted); }
.h26-field input,
.h26-field select,
.h26-field textarea {
  width: 100%;
  font-family: var(--body); font-size: 16px; /* 16px stops iOS zoom-on-focus */
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  min-height: 50px;
  transition: border-color .18s var(--h26-ease), box-shadow .18s var(--h26-ease);
  -webkit-appearance: none;
  appearance: none;
}
.h26-field textarea { min-height: 106px; resize: vertical; line-height: 1.55; }
.h26-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a7260' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
  padding-right: 40px;
}
.h26-field input:focus,
.h26-field select:focus,
.h26-field textarea:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--green-bright) 17%, transparent);
}
.h26-field input.bad, .h26-field textarea.bad { border-color: #d9483b; }
.h26-field .err { font-size: 12.5px; color: #d9483b; margin-top: 5px; font-weight: 600; }

.h26-cap { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.h26-cap-img { position: relative; flex: none; }
.h26-cap-img img {
  display: block; height: 50px; width: 150px;
  border: 1.5px solid var(--rule); border-radius: var(--r-sm);
  background: #fff; object-fit: contain;
}
.h26-cap-new {
  position: absolute; top: -8px; right: -8px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--rule); background: var(--paper);
  color: var(--ink-soft); cursor: pointer;
  font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}
.h26-cap-new:hover { border-color: var(--green-mid); color: var(--h26-accent); }
.h26-cap input { flex: 1; min-width: 150px; }

.h26-form-err {
  display: none;
  background: color-mix(in srgb, #d9483b 9%, transparent);
  border: 1px solid color-mix(in srgb, #d9483b 30%, transparent);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-size: 14px; line-height: 1.55; color: var(--ink);
  margin-bottom: 15px;
}
.h26-form-err a { color: var(--h26-accent); font-weight: 700; }
.h26-form-proof {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: 12.5px; color: var(--muted);
}
.h26-form-proof .stars { color: var(--h26-star); letter-spacing: 1.5px; }

.h26-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: h26-spin .7s linear infinite;
  display: inline-block;
}
@keyframes h26-spin { to { rotate: 360deg; } }

.h26-sent {
  display: none;
  text-align: center;
  background: var(--h26-card);
  border: 1px solid var(--green-mid);
  border-radius: var(--r-lg);
  padding: clamp(28px, 6vw, 46px) clamp(20px, 4.6vw, 32px);
}
.h26-sent.on { display: block; animation: h26-pop .38s var(--h26-spring) both; }
.h26-sent-ic {
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green-bright) 16%, transparent);
  color: var(--h26-accent);
  display: grid; place-items: center;
}
.h26-sent-ic svg { width: 32px; height: 32px; }
.h26-sent h3 { font-family: var(--heading); font-weight: 800; font-size: 24px; margin: 0 0 10px; color: var(--ink); }
.h26-sent p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; }

/* ==========================================================================
   11. MAP + FINAL CTA
   ========================================================================== */
.h26-map { position: relative; background: var(--bg); }
.h26-map-frame { height: clamp(300px, 52vw, 470px); }
.h26-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.88); }
.h26-map-card {
  background: var(--h26-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: 0 18px 44px rgba(11, 61, 26, .16);
  margin: -46px var(--h26-gutter) 0;
  position: relative; z-index: 2;
}
@media (min-width: 900px) {
  .h26-map { display: grid; }
  .h26-map-frame { grid-area: 1 / 1; height: clamp(400px, 42vw, 520px); }
  .h26-map-card {
    grid-area: 1 / 1;
    justify-self: end; align-self: center;
    width: 336px;
    margin: 0 clamp(24px, 5vw, 72px) 0 0;
  }
}
.h26-map-card .eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--h26-accent); margin-bottom: 8px;
}
.h26-map-card h3 { font-family: var(--heading); font-weight: 800; font-size: 23px; margin: 0 0 3px; color: var(--ink); }
.h26-map-card > p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; }
.h26-hours { display: grid; gap: 6px; margin-bottom: 18px; font-size: 14px; color: var(--ink-soft); }
.h26-hours div { display: flex; justify-content: space-between; gap: 12px; }
.h26-hours strong { color: var(--ink); font-weight: 600; }
.h26-map-card .h26-chip {
  background: color-mix(in srgb, var(--green-bright) 14%, transparent);
  border-color: color-mix(in srgb, var(--green-mid) 34%, transparent);
  color: var(--h26-accent);
  margin-bottom: 14px;
}

.h26-final { background: var(--green-deep); color: #fff; text-align: center; position: relative; overflow: hidden; }
.h26-final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 0%, rgba(45, 210, 91, .24), transparent 66%);
}
.h26-final > * { position: relative; }
.h26-final h2 {
  font-family: var(--heading); font-weight: 900;
  font-size: clamp(30px, 7.4vw, 60px); line-height: 1.04;
  letter-spacing: -.035em; margin: 0 0 14px;
}
.h26-final p {
  font-size: clamp(15.5px, 3.8vw, 18px); line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  max-width: 46ch; margin: 0 auto 26px;
}
.h26-final-cta { display: grid; gap: 10px; max-width: 420px; margin-inline: auto; }
@media (min-width: 620px) { .h26-final-cta { grid-auto-flow: column; justify-content: center; max-width: none; } }

/* ==========================================================================
   12. STICKY MOBILE ACTION BAR
   Height stays ≤ 68px so it clears the chat FAB (bottom:76px on mobile).
   ========================================================================== */
.h26-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  display: none;
  background: color-mix(in srgb, var(--green-deep) 96%, transparent);
  border-top: 1px solid rgba(94, 248, 138, .2);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  translate: 0 110%;
  transition: translate .32s var(--h26-ease);
}
.h26-bar.up { translate: 0; }
@media (max-width: 899px) { .h26-bar { display: block; } }
.h26-bar-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.h26-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 52px;
  border-radius: var(--r-md);
  text-decoration: none;
  font-size: 12px; font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .13);
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--h26-spring);
}
.h26-bar a:active { transform: scale(.96); }
.h26-bar a svg { width: 18px; height: 18px; }
.h26-bar a.hero-act {
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: #04220e;
}
/* Keep page content clear of the bar */
@media (max-width: 899px) { body.h26-has-bar { padding-bottom: var(--h26-bar-h); } }

/* ==========================================================================
   13. SCROLL REVEAL + MOTION SAFETY
   ========================================================================== */
.h26-rise { opacity: 0; transform: translateY(18px); }
.h26-rise.in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--h26-ease), transform .6s var(--h26-ease);
}
.h26-rise.in:nth-child(2) { transition-delay: .06s; }
.h26-rise.in:nth-child(3) { transition-delay: .12s; }
.h26-rise.in:nth-child(4) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .h26-rise, .h26-rise.in { opacity: 1; transform: none; transition: none; }
  .h26-dot { animation: none; }
  .h26-result.on, .h26-sent.on { animation: none; }
  .h26-bar { transition: none; }
  .h26-btn, .h26-lane, .h26-step, .h26-svc, .h26-trust-card, .h26-logo { transition: none; }
  .h26-lane:hover, .h26-step:hover, .h26-svc:hover, .h26-btn:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   14. DARK MODE
   ========================================================================== */
[data-theme="dark"] .h26 { --h26-card: #0f2016; }
[data-theme="dark"] .h26-sec--paper { background: #0d1c12; }
[data-theme="dark"] .h26-sec--bg { background: #0a1810; }
[data-theme="dark"] .h26-check { background: #0a1810; }
[data-theme="dark"] .h26-search-field { background: #0a1810; }
[data-theme="dark"] .h26-result { background: #0a1810; }
[data-theme="dark"] .h26-result-links a { background: #0f2016; }
[data-theme="dark"] .h26-field input,
[data-theme="dark"] .h26-field select,
[data-theme="dark"] .h26-field textarea { background: #0a1810; color: var(--ink); }
[data-theme="dark"] .h26-stepper button { background: #0a1810; }
[data-theme="dark"] .h26-form { box-shadow: none; }
[data-theme="dark"] .h26-map-card { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
[data-theme="dark"] .h26-lane:hover,
[data-theme="dark"] .h26-svc:hover,
[data-theme="dark"] .h26-step:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
[data-theme="dark"] .h26-map-frame iframe { filter: saturate(.7) brightness(.82); }

/* ==========================================================================
   15. ACCESSIBILITY
   ========================================================================== */
.h26 :focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 2px;
  border-radius: 4px;
}
.h26-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   16. ARRIVAL GUIDE (portrait dock-directions clip)
   Source footage is 9:16 phone video, so the frame is portrait and capped by
   height on desktop. It autoplays muted on loop only while in view.
   ========================================================================== */
.h26-arrive-sec { background: var(--paper); }
[data-theme="dark"] .h26-arrive-sec { background: #0d1c12; }

.h26-arrive { display: grid; gap: clamp(26px, 5vw, 56px); align-items: center; }
@media (min-width: 940px) {
  .h26-arrive { grid-template-columns: 1.05fr .95fr; }
  .h26-arrive-video { order: 2; }
}

.h26-arrive-steps {
  list-style: none;
  margin: clamp(22px, 4vw, 30px) 0;
  padding: 0;
  display: grid; gap: 14px;
  counter-reset: none;
}
.h26-arrive-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 13px;
  align-items: start;
}
.h26-arrive-steps .n {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: #fff;
  font-family: var(--heading); font-weight: 800; font-size: 14px;
  flex: none;
}
[data-theme="dark"] .h26-arrive-steps .n { background: var(--green-mid); color: #04220e; }
.h26-arrive-steps .t {
  font-size: 15.5px; line-height: 1.55; color: var(--ink-soft);
  padding-top: 3px;
}
.h26-arrive-steps .t strong { color: var(--ink); font-weight: 700; }

.h26-arrive-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- the portrait frame ---- */
.h26-vframe {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 340px;
  max-height: 74vh;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #06200e;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 44px rgba(11, 61, 26, .16);
}
[data-theme="dark"] .h26-vframe { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
@media (min-width: 940px) { .h26-vframe { max-width: 320px; } }

.h26-vframe video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown only when autoplay is refused / reduced-motion / save-data */
.h26-vplay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(6,32,14,.16) 0%, rgba(6,32,14,.44) 100%);
  -webkit-tap-highlight-color: transparent;
}
.h26-vplay[hidden] { display: none; }
.h26-play-ring {
  width: clamp(58px, 16vw, 74px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green-bright);
  color: #04220e;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(45, 210, 91, .45);
  transition: transform .25s var(--h26-spring);
}
.h26-vplay:hover .h26-play-ring { transform: scale(1.07); }
.h26-vplay:active .h26-play-ring { transform: scale(.96); }
.h26-play-ring svg { width: 40%; height: 40%; margin-left: 8%; }

.h26-vtag {
  position: absolute;
  left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  color: #fff;
  background: rgba(6, 32, 14, .66);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-full);
  padding: 6px 11px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.h26-vtag svg { width: 12px; height: 12px; }

.h26-vcap {
  text-align: center;
  font-size: 12.5px; color: var(--muted);
  margin: 12px auto 0;
  max-width: 34ch;
}

@media (prefers-reduced-motion: reduce) {
  .h26-play-ring { transition: none; }
  .h26-vplay:hover .h26-play-ring { transform: none; }
}

/* ==========================================================================
   17. CONTRAST OVERRIDES for shared eco-styles.css components
   These selectors live in eco-styles.css and are used by other pages too, so
   they are corrected here (scoped to .h26) instead of edited globally.
   ========================================================================== */
.h26 .gr-band-stars,
.h26 .gr-pill .gr-stars,
.h26 .review-stars { color: var(--h26-star); }

/* eco-styles.css sets rgba(255,255,255,.35) — 3.2:1 on the footer ground. */
.h26 .footer-bottom { color: rgba(255, 255, 255, 0.68); }

/* ==========================================================================
   11. BRAND LOGO — never let the nav squeeze it
   The brand <a> is a flex item of .eco-nav-inner / .nav-inner. When the bar
   runs out of room, flex shrinks that anchor, and the global
   `img { max-width: 100% }` then caps the logo to the squeezed box while its
   `height` stays fixed — at ~900px the logotype rendered 27x60 instead of
   151x60 and became unreadable. Two guards: keep the brand out of the shrink
   calculation, and make distortion impossible even if something else squeezes
   it (object-fit: contain letterboxes instead of stretching).
   ========================================================================== */
.eco-nav-inner > a:first-child,
.nav-inner > a:first-child { flex: 0 0 auto; min-width: -moz-max-content; min-width: max-content; }

.eco-nav-logo,
.nav-logo,
img.footer-brand-logo,
header img.h-14,
nav img.h-14 {
  flex: none;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  object-position: left center;
}
/* Below the burger breakpoint the bar has room again; keep the logo capped so
   it can never outrun a narrow phone screen. */
@media (max-width: 420px) {
  .eco-nav-logo, .nav-logo, img.footer-brand-logo { max-width: 62vw !important; }
}

/* FAQ questions are headings so they appear in the document outline (generative
   engines and heading parsers read the outline, not <summary> text). The
   heading must not disturb the summary's own typography or flex layout. */
summary .q-h {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  display: inline;
}