/* Economy Waste Services theme: base styles ported from the HTML prototype. */
/* Layout: full-screen landing strip (giant headline + bin + scattered junk) with the nav docked at its base;
   the nav sticks to the top and the site scrolls up over the pinned hero. Sections alternate concrete / white / navy bands. */
:root {
  --navh: 76px;
  --bg: #f3f6fa;            /* page, cool concrete */
  --hero: #e4ebf5;
  --grid: rgba(20, 70, 214, .07);
  --surface: #ffffff;
  --ink: #0e1a2b;
  --muted: #4a5a70;
  --blue: #1446d6;          /* bin blue */
  --blue-soft: #e3eafc;
  --hiviz: #f6c90e;         /* the yellow bin lettering */
  --hiviz-hover: #ffd83a;
  --hiviz-ink: #1a1400;
  --band: #0e1a2b;          /* navy band */
  --band-ink: #eef2f8;
  --band-muted: #a9b6c9;
  --band-line: #26354f;
  --rv-bg: #1446d6;          /* reviews band, bin blue */
  --line: #d6dde8;
  --shadow: rgba(14, 26, 43, .2);
  --drop: rgba(255, 255, 255, .42);
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --logo-color: block;
  --logo-white: none;
  --hl: 246, 201, 14;      /* brand yellow as RGB for the highlighter */
  --hl-body: .55; --hl-mid: .75; --hl-end: .9;
  --hl-ink: #0e1a2b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --hero: #0f1a2e; --grid: rgba(120, 160, 255, .07); --surface: #121c2f;
    --ink: #e8eef7; --muted: #9aa9be; --blue: #5b86ff; --blue-soft: #1a2950;
    --band: #060c18; --band-ink: #e8eef7; --band-muted: #93a3ba; --band-line: #1d2a42; --rv-bg: #1b3a9c;
    --line: #24324c; --shadow: rgba(0, 0, 0, .55); --drop: rgba(255, 255, 255, .22);
    --logo-color: none; --logo-white: block;
    --hl-body: .9; --hl-mid: .95; --hl-end: 1; --hl-ink: #1a1400;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220; --hero: #0f1a2e; --grid: rgba(120, 160, 255, .07); --surface: #121c2f;
  --ink: #e8eef7; --muted: #9aa9be; --blue: #5b86ff; --blue-soft: #1a2950;
  --band: #060c18; --band-ink: #e8eef7; --band-muted: #93a3ba; --band-line: #1d2a42; --rv-bg: #1b3a9c;
  --line: #24324c; --shadow: rgba(0, 0, 0, .55); --drop: rgba(255, 255, 255, .22);
  --logo-color: none; --logo-white: block;
  --hl-body: .9; --hl-mid: .95; --hl-end: 1; --hl-ink: #1a1400;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--navh) + 16px); }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: 6px; }
.skip:focus { top: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: 11px 20px; border: 2px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.btn-quote { background: var(--hiviz); color: var(--hiviz-ink); }
.btn-quote:hover { background: var(--hiviz-hover); }
.btn-ghost { background: transparent; color: inherit; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-sm { font-size: 15px; padding: 7px 12px; }

/* ---------- Landing strip ---------- */
.hero { position: sticky; top: 0; z-index: 0; height: calc(100svh - var(--navh)); min-height: 520px; overflow: hidden;
  background-color: var(--hero);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; }
.stage { position: absolute; inset: 0; container-type: size; container-name: stage; user-select: none; -webkit-user-select: none; }
.headline { position: absolute; left: 4.5%; top: 12%; z-index: 5; margin: 0; pointer-events: none;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.005em;
  font-size: min(11.5cqw, 19cqh); color: var(--ink); }
.headline .line { display: block; white-space: nowrap; }
.headline em { font-style: normal; color: var(--blue); }
.cap { display: inline-block; width: 0; height: .7em; vertical-align: baseline; }
.subline { position: absolute; left: 4.6%; z-index: 5; margin: 0; max-width: min(30em, 44cqw); color: var(--muted); font-size: clamp(15px, 1.5cqw, 19px); line-height: 1.45; }
/* highlighter pen: uneven yellow stroke, darker at the ends where the pen pauses, drawn on once after load */
.try { color: var(--hl-ink); font-weight: 600; padding: .08em .38em .12em; margin: 0 -.2em;
  border-radius: .6em .25em .7em .3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(100deg, rgba(var(--hl), 0) .8%, rgba(var(--hl), var(--hl-end)) 2.6%, rgba(var(--hl), var(--hl-mid)) 6%, rgba(var(--hl), var(--hl-body)) 92%, rgba(var(--hl), var(--hl-end)) 96.5%, rgba(var(--hl), 0) 98.5%),
    linear-gradient(182deg, rgba(var(--hl), 0) 0%, rgba(var(--hl), .35) 8%, rgba(var(--hl), 0) 17%),
    linear-gradient(178deg, rgba(var(--hl), 0) 82%, rgba(var(--hl), .3) 92%, rgba(var(--hl), 0) 100%);
  background-size: 100% 100%;
  animation: highlight .9s cubic-bezier(.45,.05,.3,1) .7s both; }
@keyframes highlight { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.try svg { width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-right: .3em; }
@container stage (orientation: portrait) {
  .headline { left: 5.5%; top: 9%; font-size: min(16.5cqw, 10.5cqh); }
  .subline { left: 5.5%; right: 5.5%; max-width: none; font-size: 15px; }
}
.bin { position: absolute; left: 0; top: 0; width: 40%; aspect-ratio: 870 / 536; pointer-events: none; }
.bin .shadow { position: absolute; left: 17%; width: 82%; top: 82%; height: 20%; background: radial-gradient(closest-side, var(--shadow), transparent); transform: rotate(-20deg); opacity: .5; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.bin-back { z-index: 1; }
.bin-front { z-index: 50; }
.mouth { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.mouth polygon { fill: var(--drop); opacity: 0; transition: opacity .15s ease; }
.stage.over .mouth polygon { opacity: 1; }
.item { position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; background: none; cursor: grab; touch-action: none; z-index: 60; transform-origin: 50% 60%; -webkit-tap-highlight-color: transparent; }
.item img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; animation: float var(--fd, 4s) ease-in-out var(--fdel, 0s) infinite; }
@keyframes float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 calc(var(--fy, 6) * -1px); rotate: var(--fr, 2deg); } }
.item.dragging { cursor: grabbing; z-index: 100 !important; }
.item.dragging img { animation-play-state: paused; filter: drop-shadow(0 14px 10px var(--shadow)); }
.item.flying img, .item.inbin img { animation: none; }
.item.inbin { cursor: default; pointer-events: none; }
.item:focus-visible { outline: 3px solid var(--hiviz); outline-offset: 2px; border-radius: 8px; z-index: 100 !important; }
/* the wiggle runs on the image so it pivots on the item itself, not on the stage corner */
.item.wiggle img { animation: wiggle 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes wiggle { 0%, 72%, 100% { rotate: 0deg; } 77% { rotate: -6deg; } 82% { rotate: 5deg; } 87% { rotate: -3deg; } 92% { rotate: 1.5deg; } 96% { rotate: 0deg; } }
.item.flying img, .item.inbin img { animation: none; }
.meter { position: absolute; z-index: 75; left: 0; top: 0; display: flex; align-items: center; gap: 12px; }
.meter .label { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { flex: 1 1 auto; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0%; background: var(--blue); border-radius: inherit; transition: width .45s cubic-bezier(.3,.8,.3,1); }
.done { position: absolute; z-index: 76; left: 0; top: 0; translate: 0 -100%; display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; background: var(--surface); border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 22px var(--shadow); font-size: 15px; }
.done p { margin: 0; flex: 1 1 180px; min-width: 0; }
.done .row { display: flex; gap: 8px; }
.done:not([hidden]) { animation: pop .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; height: var(--navh); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 -6px 24px var(--shadow); }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: block; line-height: 0; flex: none; }
.brand img { height: 58px; width: auto; }
.logo-color { display: var(--logo-color) !important; }
.logo-white { display: var(--logo-white) !important; }
.nav .links { display: flex; gap: 24px; font-weight: 500; }
.nav .links a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav .links a:hover { color: var(--blue); }
.nav .right { display: flex; align-items: center; gap: 18px; }
.nav .tel { font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--ink); text-decoration: none; white-space: nowrap; user-select: all; }

/* ---------- Site ---------- */
.site { position: relative; z-index: 1; background: var(--bg); }
section { padding-block: 88px; }
.band { background: var(--band); color: var(--band-ink); }
.band .muted, .band .lede { color: var(--band-muted); }
.white { background: var(--surface); }
.eyebrow { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; }
.band .eyebrow { color: var(--hiviz); }
h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 4.6vw, 58px); line-height: .96; margin: 0 0 18px; text-wrap: balance; letter-spacing: -.003em; }
h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 25px; line-height: 1.02; margin: 0 0 8px; letter-spacing: .01em; }
p { margin: 0; }
.lede { color: var(--muted); font-size: 18.5px; max-width: 38em; }
.muted { color: var(--muted); }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: 40px; }
.head > div { min-width: 0; max-width: 44em; }
.phone { display: flex; flex-direction: column; line-height: 1.15; }
.phone small { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.band .phone small { color: var(--band-muted); }
.phone a { font-family: var(--display); font-weight: 700; font-size: 26px; color: inherit; text-decoration: none; user-select: all; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 28px; }

/* intro */
.intro .split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.photo { margin: 0; min-width: 0; position: relative; }
.photo img { display: block; width: 100%; height: auto; border-radius: 12px; }
.photo .stamp { position: absolute; left: -14px; bottom: 22px; background: var(--hiviz); color: var(--hiviz-ink); font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .95; padding: 12px 16px; border-radius: 8px; box-shadow: 0 6px 18px var(--shadow); font-size: 15px; letter-spacing: .04em; }
.photo .stamp b { display: block; font-size: 34px; letter-spacing: 0; }
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.promises h3 { font-size: 22px; }
.promises p { color: var(--muted); font-size: 16px; }

/* bins */
.bins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sheet { min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.sheet .pic { background: #ffffff; border-bottom: 1px solid var(--line); position: relative; }
.sheet .pic img { display: block; width: 100%; height: auto; }
.sheet .flag { position: absolute; top: 14px; left: 14px; background: var(--hiviz); color: var(--hiviz-ink); font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.sheet .body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.sheet .title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sheet .title h3 { font-size: 30px; margin: 0; }
.sheet .yd { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.sheet .yd small { font-size: 18px; font-weight: 700; margin-left: 2px; }
.specs { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 1px solid var(--line); }
.specs dt, .specs dd { padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0; }
.specs dt { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-right: 20px; padding-top: 13px; }
.specs dd { font-variant-numeric: tabular-nums; }
.trucks { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; color: var(--blue); }
.trucks svg { width: 26px; height: 16px; }
.trucks svg.maybe { opacity: .32; }
.bestfor { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.bestfor li { font-size: 14px; background: var(--blue-soft); color: var(--ink); padding: 3px 10px; border-radius: 99px; }
.sheet .btn { align-self: flex-start; margin-top: auto; }
.bins-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 28px; }
.note { border: 1px dashed var(--line); border-radius: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.note h3 { font-size: 20px; margin: 0; }
.note p { color: var(--muted); font-size: 15.5px; }
.note a { color: var(--blue); font-weight: 600; }

/* projects */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.use { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.use img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.use p { color: var(--muted); }
.jobs { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.jobs span.lbl { font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; color: var(--muted); margin-right: 6px; }
.jobs span.chip { border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: 15px; background: var(--surface); }

/* how it works */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step; position: relative; }
.steps li { counter-increment: step; padding: 0 24px 0 0; position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--hiviz); color: var(--hiviz-ink); font-family: var(--display); font-weight: 800; font-size: 28px; position: relative; z-index: 1; margin-bottom: 10px; }
.steps li::after { content: ""; position: absolute; top: 28px; left: 56px; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--band-line) 0 8px, transparent 8px 14px); }
.steps li:last-child::after { display: none; }
.steps p { color: var(--band-muted); font-size: 16px; max-width: 18em; }
.features { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-top: 88px; padding-top: 56px; border-top: 1px solid var(--band-line); }
.features img { width: 100%; height: auto; border-radius: 12px; display: block; }
.flist { display: grid; gap: 28px; }
.flist div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; }
.flist svg { width: 40px; height: 40px; color: var(--hiviz); grid-row: span 2; }
.flist h3 { margin: 4px 0 0; }
.flist p { color: var(--band-muted); }

/* about */
.about .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.about figure { margin: 0; min-width: 0; }
.about figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.about figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 32px 0 0; border-block: 1px solid var(--line); }
.facts div { padding: 18px 16px 18px 0; min-width: 0; }
.facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.facts dt { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.facts dd { margin: 6px 0 0; font-size: 15px; color: var(--muted); }

/* reviews: blue band with a row of review cards that scrolls sideways (arrows in site.js) */
.reviews-band { background: var(--rv-bg); color: #fff; }
.reviews-band .eyebrow { color: var(--hiviz); }
.reviews-band h2 { color: #fff; }
.reviews-band .lede { color: rgba(255, 255, 255, .86); }
.reviews-band .head { align-items: end; }
.rv-nav { display: flex; gap: 10px; }
.rv-btn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease, opacity .15s ease; }
.rv-btn:hover:not(:disabled) { background: #fff; color: var(--rv-bg); border-color: #fff; }
.rv-btn:disabled { opacity: .35; cursor: default; }
.rv-btn:focus-visible { outline: 3px solid var(--hiviz); outline-offset: 2px; }
.rv-btn svg { width: 22px; height: 22px; }
.rv-btn[data-rv="-1"] svg { transform: scaleX(-1); }
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px 0 10px; }
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track:focus-visible { outline: 3px solid var(--hiviz); outline-offset: 4px; border-radius: 14px; }
.review { scroll-snap-align: start; min-width: 0; margin: 0; background: var(--surface); color: var(--ink); border-radius: 14px; padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 28px rgba(6, 20, 70, .22); }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.rv-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 22px; }
.rv-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rv-who b { font-weight: 600; font-size: 17px; }
.rv-who span { font-size: 14px; color: var(--muted); }
.rv-stars { display: flex; gap: 3px; color: #f5b400; }
.rv-stars svg { width: 20px; height: 20px; }
.review blockquote { margin: 0; font-size: 17px; line-height: 1.5; }
@media (max-width: 960px) { .reviews-track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 560px) { .reviews-track { grid-auto-columns: 86%; gap: 14px; } .rv-btn { width: 40px; height: 40px; } }

/* areas */
.areas .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.towns { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.towns li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.towns li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--blue); flex: none; }
.hours { margin-top: 20px; display: flex; gap: 12px 28px; flex-wrap: wrap; color: var(--muted); font-size: 16px; }
.hours b { color: var(--ink); font-weight: 600; }

/* faq */
.faq .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-weight: 600; font-size: 18px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.qa details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa .a { padding: 0 0 20px; color: var(--muted); max-width: 40em; display: flex; flex-direction: column; gap: 12px; }
.qa .tosses { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.qa .tosses li { font-size: 14px; background: var(--blue-soft); color: var(--ink); padding: 3px 10px; border-radius: 99px; }

/* quote */
.quote .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.quote .contact { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.quote .contact .k { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--band-muted); }
.quote .contact .v { font-family: var(--display); font-weight: 700; font-size: 26px; user-select: all; }
form.qf { background: var(--surface); color: var(--ink); border-radius: 14px; padding: 28px; display: grid; gap: 18px; min-width: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend, label.f { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; display: block; padding: 0; }
.choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: flex; flex-direction: column; gap: 2px; height: 100%; border: 2px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.choice b { font-family: var(--display); font-weight: 700; font-size: 19px; text-transform: uppercase; line-height: 1.05; }
.choice small { color: var(--muted); font-size: 14px; }
.choice input:checked + span { border-color: var(--blue); background: var(--blue-soft); }
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.qf input[type=text], .qf input[type=email], .qf input[type=tel], .qf textarea { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; }
.qf textarea { min-height: 96px; resize: vertical; }
.qf input:focus, .qf textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.qf .send { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.qf .fine { font-size: 13.5px; color: var(--muted); flex: 1 1 260px; }
.sent { background: var(--blue-soft); border-radius: 8px; padding: 12px 14px; font-size: 15px; }

/* blog */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.post { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 3px solid var(--blue); color: var(--ink); text-decoration: none; }
.post h3 { font-size: 23px; }
.post p { color: var(--muted); font-size: 16px; }
.post .more { font-weight: 600; color: var(--blue); margin-top: auto; }
.post:hover h3 { color: var(--blue); }

footer { background: var(--band); color: var(--band-ink); }
footer .wrap { padding-block: 56px 36px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
footer .foot-logo { height: 64px; width: auto; display: block; }
footer .tag { font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: .95; margin-top: 16px; }
footer .k { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--band-muted); margin-bottom: 6px; }
footer p { color: var(--band-ink); font-size: 15.5px; }
footer .v { user-select: all; }
footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--band-line); padding-top: 20px; font-size: 13.5px; color: var(--band-muted); }

@media (max-width: 1100px) { .nav .links { display: none; } }
@media (max-width: 960px) {
  section { padding-block: 64px; }
  .intro .split, .about .split, .areas .split, .faq .split, .quote .split, .features { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .bins-grid, .bins-foot { grid-template-columns: minmax(0, 1fr); }
  .posts { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .uses { gap: 20px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
  .steps li:nth-child(2)::after { display: none; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  footer .wrap > :first-child { grid-column: 1 / -1; }
  .features { margin-top: 64px; }
}
@media (max-width: 560px) {
  :root { --navh: 64px; }
  .wrap { padding-inline: 16px; }
  .brand img { height: 48px; }
  .nav .tel { display: none; }
  .btn { font-size: 16px; padding: 9px 14px; }
  .promises { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 48px; }
  .facts div { padding: 14px 10px 14px 0; }
  .facts div + div { padding-left: 12px; }
  .facts dt { font-size: 30px; }
  .facts dd { font-size: 13.5px; line-height: 1.3; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 0; }
  .steps li::before { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 22px; margin: 0; }
  .steps li::after { display: none; }
  .steps h3 { margin: 8px 0 0; }
  .uses { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .photo .stamp { left: 10px; }
  form.qf { padding: 20px; }
  footer .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .item img, .item.wiggle img, .done:not([hidden]), .try { animation: none; }
  .bar i { transition: none; }
}