:root {
  --navy: #0b2048;
  --navy2: #071630;
  --copper: #0fc835;
  --green: #0fc835;
  --ink: #17201a;
  --muted: #667085;
  --bg: #f2f5f9;
  --shadow: 0 16px 42px rgba(11, 32, 72, .13);
}

body { background: #fbfdfb; }
.topbar { background: #071630; }
.header { border-bottom: 3px solid #0fc835; }
.nav nav > a, .dropdown > button { color: #0b2048; }
.nav nav > a:hover, .dropdown > button:hover { color: #0fc835; }
.eyebrow, .text-link { color: #0fc835; }
.band, .process { background: linear-gradient(135deg, #071630, #0b2048 68%, #102d63); }
.page-hero { background: linear-gradient(125deg, #071630, #0b2048 70%, #12356f); }
.alt { background: #f2f5f9; }
.card, .mini, .service-row { border: 1px solid #dce3ee; }
.mini { border-top: 3px solid #0fc835; }
.cta { background: linear-gradient(120deg, #081a3a, #0b2048 62%, #0c6e2c 140%); }
footer { background: #06132b; border-top: 5px solid #0fc835; }

.logo img { width: 205px; height: 56px; }

.contact-dock svg { width: 25px; height: 25px; fill: currentColor; flex: 0 0 auto; }
.contact-dock span { display: none; line-height: 1.1; }
.contact-dock small { display: block; font-size: .65rem; font-weight: 700; opacity: .8; margin-bottom: 2px; }
.contact-dock .dock-wa { background: #25d366; }
.contact-dock .dock-call { background: #0b2048; }

.service-slider {
  position: relative;
  overflow: hidden;
  margin-bottom: 34px;
  border-radius: 14px;
  background: #071630;
  box-shadow: var(--shadow);
}
.service-slider-track { position: relative; height: clamp(260px, 32vw, 420px); }
.service-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .45s ease, transform .65s ease;
}
.service-slide.active { opacity: 1; transform: scale(1); }
.service-slide { margin: 0; }
.service-slide > img { width: 100%; height: 100%; object-fit: cover; }
.slide-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  max-width: 560px;
  padding: 16px 19px;
  border-left: 4px solid #0fc835;
  border-radius: 0 9px 9px 0;
  background: rgba(7, 22, 48, .86);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  backdrop-filter: blur(8px);
}
.slide-caption span { display: block; font-size: 1.18rem; font-weight: 900; line-height: 1.2; }
.slide-caption p { margin: 5px 0 0; color: rgba(255,255,255,.85); font-size: .9rem; }
.cards .card img { width: 100%; height: 235px; aspect-ratio: auto; object-fit: cover; object-position: center; }
.blog-grid .card img { width: 100%; height: 220px; aspect-ratio: auto; object-fit: cover; object-position: center; }
.cards .card, .blog-grid .card { border-radius: 12px; }
.cards .card > div, .blog-grid .card > div { padding: 20px 22px 24px; }
.card-image-link { display: block; overflow: hidden; }
.card-image-link img { transition: transform .35s ease, filter .35s ease; }
.card-image-link:hover img, .card-image-link:focus-visible img { transform: scale(1.045); filter: brightness(.92); }
.blog-grid .card h2 { font-size: 1.35rem; line-height: 1.28; margin: .45em 0; }
.blog-grid .card p { font-size: .95rem; }
.accepted-scrap { margin: 54px 0; padding: 30px; border-radius: 13px; background: #f2f5f9; border: 1px solid #dce3ee; }
.accepted-scrap .section-label { color: #0fc835; font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.accepted-scrap h2 { margin-top: .25em; }
.scrap-type-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.scrap-type-list li { position: relative; padding: 11px 12px 11px 31px; border: 1px solid #d9e3ee; border-radius: 8px; background: #fff; color: #0b2048; font-size: .9rem; font-weight: 800; }
.scrap-type-list li::before { content: "↻"; position: absolute; left: 10px; color: #0fc835; font-weight: 900; }
.customer-blog-grid { grid-template-columns: repeat(3,1fr); }
.blog-cover { width: 100%; height: min(470px,45vw); object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 35px; }
.blog-article h2 { margin-top: 1.4em; }
.article-cta { margin-top: 45px; padding: 28px; border-radius: 12px; background: #0b2048; color: #fff; }
.article-cta h2 { margin-top: 0; color: #fff; }
.side-cta { min-width: 0; overflow: hidden; }
.side-cta h2 {
  max-width: 100%;
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.16;
  overflow-wrap: anywhere;
  word-break: normal;
}
.side-cta h3 { margin-top: 26px; font-size: 1.05rem; }
.side-cta p { margin: 0 0 18px; font-size: .94rem; }
.side-cta .btn { width: 100%; padding-inline: 14px; text-align: center; }
.side-cta > a:not(.btn) { overflow-wrap: anywhere; }
.slider-prev, .slider-next {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(7, 22, 48, .86);
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}
.slider-prev { left: 16px; }
.slider-next { right: 16px; }
.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 15px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
.slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
}
.slider-dots button.active { background: #25d366; border-color: #25d366; }

@media (min-width: 601px) {
  .contact-dock a { transition: width .25s ease, border-radius .25s ease; overflow: hidden; }
  .contact-dock a:hover { width: 178px; border-radius: 28px; gap: 10px; padding: 0 16px; justify-content: flex-start; }
  .contact-dock a:hover span { display: block; white-space: nowrap; }
}

@media (max-width: 600px) {
  body { padding-bottom: 66px; }
  .floating.contact-dock {
    left: 10px;
    right: 10px;
    bottom: 9px;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 17px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 30px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
  }
  .floating.contact-dock a {
    width: auto;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: none;
  }
  .contact-dock span { display: block; text-align: left; font-size: .85rem; }
  .to-top { bottom: 82px; }
  .service-slider-track { height: 235px; }
  .slider-prev, .slider-next { width: 38px; height: 38px; }
  .slide-caption { left: 12px; right: 12px; bottom: 12px; padding: 11px 13px; }
  .slide-caption span { font-size: 1rem; }
  .slide-caption p { display: none; }
  .cards .card img, .blog-grid .card img { height: 210px; }
  .scrap-type-list { grid-template-columns: 1fr 1fr; }
  .accepted-scrap { padding: 22px 18px; }
  .customer-blog-grid { grid-template-columns: 1fr; }
  .blog-cover { height: 240px; }
}

.home-slider { position: relative; min-height: 690px; overflow: hidden; }
.home-slider-track, .home-slide { position: absolute; inset: 0; }
.home-slide { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s ease; }
.home-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.home-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-slide .overlay { background: linear-gradient(90deg,rgba(4,16,38,.96) 0%,rgba(4,16,38,.76) 48%,rgba(4,16,38,.12) 82%); }
.home-slide .hero-content { position: relative; z-index: 2; }
.home-slide h2 { max-width: 720px; color: #fff; font-size: clamp(2.6rem,5vw,4.7rem); line-height: 1.06; margin: .3em 0; }
.home-prev, .home-next {
  position: absolute; z-index: 5; top: 50%; width: 48px; height: 48px;
  transform: translateY(-50%); border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
  background: rgba(7,22,48,.72); color: #fff; font-size: 2rem; cursor: pointer;
}
.home-prev { left: 22px; } .home-next { right: 22px; }
.home-dots { position: absolute; z-index: 5; right: 78px; bottom: 28px; display: flex; gap: 9px; }
.home-dots button { width: 10px; height: 10px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.home-dots button.active { width: 30px; border-radius: 8px; border-color: #0fc835; background: #0fc835; }
@media(max-width:600px) {
  .home-slider { min-height: 690px; }
  .home-prev, .home-next { top: auto; bottom: 17px; width: 38px; height: 38px; }
  .home-prev { left: 15px; } .home-next { right: 15px; }
  .home-dots { right: auto; left: 50%; bottom: 30px; transform: translateX(-50%); }
}