/* Aqua Water Engineering: the 2015 "topbest" look, made responsive.
   Teal page background #1fbab4, one boxed white page with a soft shadow, teal menu bar, serif text, teal footer. */

body { background: #1fbab4; color: #222; font-family: "Lora", Georgia, serif; }
.aq-box { width: min(860px, 100% - 24px); margin: 30px auto; background: #fff; box-shadow: 0 0 18px rgba(0,0,0,.35); }
.aq-header { padding: 0; }
.aq-top { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 24px; padding: 16px 30px 0; font: 400 12px/1.5 "Open Sans", sans-serif; }
.aq-top a { display: inline-flex; align-items: center; gap: 6px; color: #333; text-decoration: none; }
.aq-top a svg { width: 18px; height: 18px; color: #fff; background: #1fbab4; padding: 3px; border-radius: 3px; }
.aq-brand { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 10px 30px 12px; }
.aq-brand img { height: 64px; width: auto; }
.aq-cats { margin: 0; font: 400 15px/1.4 "Lora", serif; letter-spacing: .02em; color: #222; }
.aq-cats span { color: #999; margin: 0 4px; }
.site-header.aq-bar { position: relative; background: #1fbab4; border: 0; backdrop-filter: none; padding: 0 20px; min-height: 0; }
.aq-bar .site-nav > ul { gap: 0; }
.aq-bar .site-nav a { display: block; padding: 10px 14px; font: 700 13px/1.3 "Lora", serif; color: #fff !important; text-decoration: none; border-right: 1px solid rgba(255,255,255,.6); border-bottom: 0 !important; }
.aq-bar .site-nav a:hover, .aq-bar .site-nav a[aria-current="page"] { background: rgba(255,255,255,.25); }
.aq-bar .nav-toggle { color: #fff; }
@media (max-width: 900px) {
  .aq-bar { display: flex; justify-content: flex-end; }
  .aq-bar .site-nav { position: absolute; inset: 100% 0 auto 0; background: #1fbab4; padding: 0; }
  .aq-bar .site-nav a { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.3) !important; padding: 14px 20px; }
}

.aq-main { padding: 26px 30px 30px; }
.aq-main ul { list-style: none; padding-left: 0; margin: 0 0 1em; }
.aq-main ul li { padding-left: 14px; position: relative; font-size: 13px; margin-bottom: 6px; }
.aq-main ul li::before { content: "*"; position: absolute; left: 0; }
.aq-main hr { border: 0; border-top: 1px dashed #ddd; margin: 24px 0; }
.aq-h { color: #16a993; font: 700 15px/1.3 "Lora", serif; margin: 20px 0 6px; }
.aq-h1 { color: #3b9c9c; font: 700 22px/1.3 "Lora", serif; margin: 10px 0 16px; }
.aq-big { font-size: 17px; margin: 0 0 12px; }

/* slider */
.aq-slider { position: relative; aspect-ratio: 800 / 330; overflow: hidden; background: #eee; }
.aq-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; }
.aq-slide.is-active { opacity: 1; }
.aq-slide img { width: 100%; height: 100%; object-fit: cover; }
.aq-prev, .aq-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1fbab4; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding-bottom: 3px; }
.aq-prev { left: 10px; } .aq-next { right: 10px; }
.aq-shadow { height: 18px; margin: 4px 6% 6px; background: radial-gradient(ellipse at top, rgba(0,0,0,.28), transparent 70%); }

/* products strip */
.aq-main .aq-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aq-main .aq-strip li { padding: 0; }
.aq-main .aq-strip li::before { display: none; }
.aq-strip a { display: block; border: 1px solid #ddd; padding: 4px; box-shadow: 2px 2px 6px rgba(0,0,0,.2); background: #fff; transition: transform .2s; }
.aq-strip a:hover { transform: translateY(-3px); }
.aq-strip img { width: 100%; }

/* product page */
.aq-item { margin: 0 0 30px; }
.aq-item h2 { font: 700 20px/1.3 "Lora", serif; margin: 0 0 12px; }
.aq-item-body { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.aq-pics { display: flex; gap: 10px; flex-wrap: wrap; }
.aq-pics img { width: 140px; border: 1px solid #ddd; padding: 3px; box-shadow: 2px 2px 6px rgba(0,0,0,.2); }
.aq-benefits { margin: 0 0 30px; }
.aq-benefits img { width: 100%; }
.aq-adv { color: #16a993; font-size: 17px; margin: 10px 0 6px; }
.aq-main .aq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aq-main .aq-chips li { padding: 4px 12px; background: #e6f7f6; border-radius: 20px; margin: 0; }
.aq-main .aq-chips li::before { display: none; }

/* services, contact */
.aq-services { display: grid; gap: 14px; margin-bottom: 16px; }
.aq-services img { width: 100%; }
.aq-dl, .aq-footer dl { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; margin: 0 0 20px; font-size: 14px; }
.aq-dl dd, .aq-footer dd { margin: 0; }
.aq-dl dd::before, .aq-footer dd::before { content: ": "; }
.aq-form { background: #f2fbfa; border: 1px solid #d4efed; max-width: 520px; }

/* footer */
.aq-footer { background: #2f8f8c; color: #fff; padding: 24px 30px 0; font-size: 13px; }
.aq-foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.aq-footer h2 { color: #fff; font: 700 17px/1.3 "Lora", serif; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px dashed rgba(255,255,255,.6); display: inline-block; }
.aq-footer ul { columns: 2; column-gap: 16px; margin: 0; padding: 0; list-style: none; }
.aq-footer li { break-inside: avoid; padding-left: 12px; position: relative; margin-bottom: 6px; }
.aq-footer li::before { content: "•"; position: absolute; left: 0; }
.aq-footer a { color: #fff; }
.aq-copy { margin: 20px -30px 0; padding: 10px 30px; background: #4a4a4a; font-size: 12px; }

@media (max-width: 640px) {
  .aq-box { margin: 12px auto; }
  .aq-main, .aq-footer { padding-left: 18px; padding-right: 18px; }
  .aq-copy { margin-left: -18px; margin-right: -18px; padding-left: 18px; }
  .aq-main .aq-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aq-item-body, .aq-foot-grid { grid-template-columns: 1fr; }
  .aq-footer ul { columns: 1; }
  .aq-top, .aq-brand { padding-left: 18px; padding-right: 18px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .aq-slide { transition: none; } }