/* Redline Rolloffs — hand-rolled, BEM naming, no framework */
:root { --rl-red: #c8102e; --rl-red-deep: #7d0a1d; --rl-coal: #1b1b1f; --rl-smoke: #f4f2f0; --rl-line: #d9d4cf; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--rl-coal); background: #fff; line-height: 1.55; }
a { color: var(--rl-red-deep); }
img, svg { vertical-align: middle; }

.topbar { display: flex; align-items: center; gap: 1.2rem; padding: .65rem 1.2rem; min-height: 64px; background: var(--rl-coal); position: sticky; top: 0; z-index: 40; }
.topbar__brand { display: flex; min-width: 0; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.12rem; letter-spacing: .02em; }
.topbar__links { display: flex; flex-wrap: wrap; gap: .95rem; margin-left: auto; }
.topbar__links a { color: #cfcbc7; text-decoration: none; font-size: .93rem; }
.topbar__links a:hover { color: #fff; }
.topbar__phone { display: inline-flex; align-items: center; gap: .45rem; background: var(--rl-red); color: #fff; text-decoration: none; font-weight: 800; font-size: 1.05rem; padding: .7rem 1.2rem; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 10px rgba(200,16,46,.45); }
.topbar__phone:hover { background: var(--rl-red-deep); }

.pagehead { background: var(--rl-smoke); border-bottom: 3px solid var(--rl-red); padding: 2.4rem 1.2rem; }
.pagehead__title { max-width: 62rem; margin: 0 auto; font-size: 1.9rem; }

.band { padding: 3rem 1.2rem; }
.band--tint { background: var(--rl-smoke); }
.band__inner { max-width: 68rem; margin: 0 auto; }
.band__title { font-size: 1.7rem; margin: 0 0 .4rem; }
.band__kick { color: var(--rl-red); font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; margin: 0 0 .3rem; }

.cardrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
.card { border: 1px solid var(--rl-line); border-top: 4px solid var(--rl-red); border-radius: 4px; padding: 1.1rem; background: #fff; }
.card__name { font-size: 1.08rem; margin: 0 0 .45rem; }
.card__name a { color: var(--rl-coal); text-decoration: none; }
.card__name a:hover { color: var(--rl-red); }
.card__text { margin: 0; font-size: .95rem; color: #4a4a4a; }
.card__meta { font-size: .85rem; color: #6b6b6b; margin: .6rem 0 0; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.steps__item { position: relative; padding: 1rem 1rem 1rem 3.4rem; background: #fff; border: 1px solid var(--rl-line); border-radius: 4px; }
.steps__item::before { counter-increment: step; content: counter(step); position: absolute; left: .9rem; top: .9rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--rl-red); color: #fff; font-weight: 800; display: grid; place-items: center; }
.steps__item h3 { margin: 0 0 .3rem; font-size: 1rem; }
.steps__item p { margin: 0; font-size: .92rem; color: #4a4a4a; }

.qa { margin-top: 1.2rem; }
.qa__pair { border-bottom: 1px solid var(--rl-line); padding: .9rem 0; }
.qa__q { font-weight: 700; margin: 0 0 .3rem; }
.qa__a { margin: 0; color: #444; }

.ratetable { width: 100%; border-collapse: collapse; margin-top: 1.3rem; }
.ratetable th { text-align: left; background: var(--rl-coal); color: #fff; padding: .6rem .8rem; font-size: .9rem; }
.ratetable td { border-bottom: 1px solid var(--rl-line); padding: .65rem .8rem; font-size: .95rem; }
.ratetable tr:nth-child(even) td { background: var(--rl-smoke); }
.ratetable .ratetable__price { font-weight: 800; color: var(--rl-red-deep); }

.prose { max-width: 46rem; }
.prose p { margin: 0 0 1rem; }
.prose h2 { font-size: 1.35rem; margin: 1.8rem 0 .6rem; }

.closer { background: var(--rl-red); text-align: center; padding: 2.6rem 1.2rem; }
.closer__line { color: #fff; font-size: 1.9rem; margin: 0 0 .5rem; }
.closer__sub { color: #ffe3e7; margin: 0 0 1.3rem; font-size: 1.05rem; }
.closer__btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 56px; background: var(--rl-coal); color: #fff; font-weight: 800; font-size: 1.25rem; text-decoration: none; padding: .9rem 2rem; border-radius: 6px; }
.closer__btn:hover { background: #000; }

.basefoot { background: var(--rl-coal); color: #b9b5b1; padding: 2.6rem 1.2rem 1.2rem; }
.basefoot__grid { max-width: 68rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.6rem; }
.basefoot__brand { color: #fff; font-weight: 800; font-size: 1.1rem; margin: 0 0 .4rem; }
.basefoot__head { color: #fff; font-weight: 700; margin: 0 0 .5rem; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; }
.basefoot__col p { margin: 0 0 .4rem; font-size: .9rem; }
.basefoot__col a { color: #b9b5b1; text-decoration: none; }
.basefoot__col a:hover { color: #fff; }
.basefoot__legal { max-width: 68rem; margin: 1.8rem auto 0; border-top: 1px solid #33333a; padding-top: 1rem; font-size: .85rem; }
.basefoot__legal a { color: #b9b5b1; }


/* ── icons (CSS masks, colour = currentColor) ───────────────────────────── */
.i { display: inline-block; width: 1.1em; height: 1.1em; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.i-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5zm-1.5 16-4-4 1.4-1.4 2.6 2.6 6.1-6.1L18 9.5z'/%3E%3C/svg%3E"); }
.i-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.i-truck { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 4h14v12H1zM15 8h4l4 4v4h-8z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); }
.i-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9-6.2-3.2-6.2 3.2L7 14.1 2 9.3l6.9-1z'/%3E%3C/svg%3E"); }
.i-box { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 9h20l-2.5 11h-15zM4 7l2-3h12l2 3z'/%3E%3C/svg%3E"); }
.i-team { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M1 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3Ccircle cx='17.5' cy='8' r='3'/%3E%3Cpath d='M18.5 13.2c2.7.6 4.5 3 4.5 5.8h-4.3c-.2-2.3-1.1-4.3-2.6-5.7z'/%3E%3C/svg%3E"); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 800; text-decoration: none; border-radius: 6px; padding: .7rem 1.2rem; line-height: 1.2; }
.btn--call { background: var(--rl-red); color: #fff; }
.btn--call:hover { background: var(--rl-red-deep); }
.btn--ghost { background: #fff; color: var(--rl-coal); }
.btn--ghost:hover { background: var(--rl-smoke); }
.btn--lg { min-height: 54px; padding: .9rem 1.7rem; font-size: 1.1rem; }
.btn--xl { min-height: 64px; padding: 1rem 2.2rem; font-size: 1.6rem; }

/* ── hero: full-bleed image, dark overlay, text on top ─────────────────── */
.hero { position: relative; overflow: hidden; background: var(--rl-coal); color: #fff; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,16,.85) 0%, rgba(12,12,16,.62) 60%, rgba(12,12,16,.45) 100%); }
.hero__inner { position: relative; z-index: 1; max-width: 70.4rem; margin: 0 auto; padding: 5rem 1.2rem 4.5rem; min-height: 560px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero__pill { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 1.1rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); font-size: .85rem; font-weight: 700; letter-spacing: .03em; }
.hero__h1 { font-size: 3rem; line-height: 1.1; margin: 0 0 1rem; max-width: 46rem; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hero__sub { font-size: 1.2rem; margin: 0 0 1.1rem; max-width: 40rem; color: #eee; }
.hero__urgent { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.5rem; font-weight: 800; color: #ffd54a; font-size: 1.05rem; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__badges { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; padding: 0; margin: 1.8rem 0 0; font-weight: 700; font-size: .98rem; }
.hero__badges li { display: inline-flex; align-items: center; gap: .45rem; }
.hero__badges .i { color: #4ade80; }

/* ── service cards ──────────────────────────────────────────────────────── */
.svcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.4rem; }
.svc { padding: 0; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid var(--rl-line); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.svc__img { display: block; width: 100%; height: 240px; object-fit: cover; border-radius: 10px 10px 0 0; }
.svc__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.svc__body .card__text { flex: 1; }
.svc__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.1rem; margin-top: 1rem; }
.svc__more { font-weight: 700; font-size: .92rem; }

/* ── why choose us ──────────────────────────────────────────────────────── */
.whygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.why { background: #fff; border: 1px solid var(--rl-line); border-radius: 10px; padding: 1.4rem; }
.why__ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #fbe7ea; color: var(--rl-red); font-size: 1.35rem; margin-bottom: .8rem; }
.why__title { margin: 0 0 .4rem; font-size: 1.1rem; }
.why__text { margin: 0; color: #4a4a4a; font-size: .95rem; }

/* ── images kept from the 2026-09-25 image pass ─────────────────────────── */
.shot { display: block; width: 100%; height: auto; border-radius: 10px; object-fit: cover; }
.shot--wide { margin: 0 0 1.6rem; aspect-ratio: 2/1; }

/* ── contact call block ─────────────────────────────────────────────────── */
.callblock { text-align: center; max-width: 48rem; margin: 0 auto; padding: 2.4rem 1.4rem; border: 2px solid var(--rl-coal); border-radius: 12px; box-shadow: 6px 6px 0 var(--rl-red); }
.callblock__title { font-size: 1.9rem; margin: 0 0 .5rem; }
.callblock__sub { margin: 0 0 1.4rem; color: #444; }
.callblock__urgent { font-weight: 800; color: var(--rl-red-deep); margin: 1.1rem 0 0; }
.callblock__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.2rem; margin-top: 2rem; text-align: left; border-top: 1px solid var(--rl-line); padding-top: 1.4rem; }
.callblock__grid h3 { margin: 0 0 .35rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.callblock__grid p { margin: 0; overflow-wrap: anywhere; }

/* ── nav toggle + mobile call bar (hidden on desktop) ───────────────────── */
.navtoggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.burger { display: none; }
.callbar { display: none; }

@media (max-width: 1024px) {
  .svcgrid, .whygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar__links { gap: .7rem; }
}

@media (max-width: 768px) {
  body { padding-bottom: 78px; }
  .topbar { position: sticky; height: 64px; min-height: 0; padding: 0 1rem; gap: .6rem; }
  .topbar__brand { flex: 1; font-size: 1rem; }
  .topbar__mark { width: 28px; height: 28px; flex: none; }
  .topbar__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar__phone { display: none; }
  .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer; flex: none; }
  .burger span { display: block; height: 3px; background: #fff; border-radius: 2px; }
  .topbar__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--rl-coal); border-top: 1px solid #33333a; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
  .topbar__links a { padding: .95rem 1.2rem; border-bottom: 1px solid #2a2a30; font-size: 1rem; }
  .navtoggle:checked ~ .topbar__links { display: flex; }
  .navtoggle:focus-visible + .burger { outline: 2px solid #fff; }

  .hero__inner { min-height: 0; padding: 3rem 1.1rem 2.8rem; align-items: center; text-align: center; }
  .hero::after { background: rgba(12,12,16,.72); }
  .hero__h1 { font-size: 2rem; }
  .hero__sub { font-size: 1.05rem; }
  .hero__urgent { display: block; font-size: .98rem; }
  .hero__urgent .i { display: none; }
  .hero__btns { flex-direction: column; width: 100%; }
  .hero__btns .btn { width: 100%; min-height: 54px; }
  .hero__badges { justify-content: center; gap: .5rem 1.1rem; font-size: .9rem; }

  .svcgrid, .whygrid { grid-template-columns: 1fr; }
  .svc__img { height: 220px; }
  .pagehead__title { font-size: 1.55rem; }
  .band__title { font-size: 1.45rem; }
  .closer__line { font-size: 1.5rem; }
  .closer__btn { width: 100%; font-size: 1.15rem; }
  .btn--xl { width: 100%; font-size: 1.35rem; }
  .ratetable { display: block; overflow-x: auto; }

  .callbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; min-height: 68px; padding: .55rem .8rem .55rem 1.1rem; background: var(--rl-red); color: #fff; text-decoration: none; box-shadow: 0 -4px 16px rgba(0,0,0,.25); }
  .callbar__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .callbar__txt small { font-size: .74rem; font-weight: 600; opacity: .95; }
  .callbar__txt b { font-size: 1.3rem; letter-spacing: .01em; }
  .callbar__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--rl-red); font-size: 1.35rem; flex: none; }
}