/* ==========================================================================
   J G CLEANING LLC — gsasolutions.buzz
   Janitor Cart motif · suds-wash / duck-sun / rinse-deep
   ========================================================================== */

:root {
  --suds-wash: #EFF4F2;
  --drain-ink: #1E2B2E;
  --duck-sun: #F2A81D;
  --rinse-deep: #22424E;
  --suds-clear: #FFFFFF;
  --rinse-steel: #7E97A0;
  --scrub-line: #D7E2E0;
  --duck-sun-dark: #C4860C;
  --rinse-deep-soft: #2E5866;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: #EFF4F2;
  color: #1E2B2E;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  line-height: 1.2;
  margin: 0 0 14px;
}

p {
  margin: 0 0 14px;
}

a {
  color: #22424E;
  text-decoration: underline;
}

img {
  max-width: 100%;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   PUSH HANDLE RAIL — navigation as the janitor cart push handle
   ========================================================================== */

.pushhandle {
  background-color: #EFF4F2;
  border-bottom: 4px solid #D7E2E0;
  padding: 18px 24px 20px;
  position: relative;
  z-index: 20;
}

.pushhandle-inner {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}

/* the grip tube: thick rounded horizontal bar */
.grip-tube {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: #22424E;
  border: 4px solid #1E2B2E;
  border-radius: 24px;
  padding: 10px 22px;
  box-shadow: 0 6px 0 #1E2B2E;
}

/* end brackets bolted to the edges */
.bracket-left,
.bracket-right {
  flex: 0 0 auto;
  width: 18px;
  height: 34px;
  background-color: #7E97A0;
  border: 3px solid #1E2B2E;
  border-radius: 6px;
  position: relative;
}

.bracket-left::before,
.bracket-right::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1E2B2E;
}

.bracket-left::after,
.bracket-right::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1E2B2E;
}

/* caddy lid emblem brand */
.caddy-lid {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 14px;
  padding: 6px 14px;
  text-decoration: none;
  flex: 0 0 auto;
}

.caddy-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #F2A81D;
  border: 2px solid #1E2B2E;
  flex: 0 0 auto;
}

.caddy-name {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1E2B2E;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

/* latch plates on the bar */
.plate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.latch-plate {
  position: relative;
  display: inline-block;
  background-color: #FFFFFF;
  color: #1E2B2E;
  border: 3px solid #1E2B2E;
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.latch-plate::before,
.latch-plate::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #7E97A0;
}

.latch-plate::before {
  left: 5px;
}

.latch-plate::after {
  right: 5px;
}

.latch-plate:hover {
  background-color: #F2A81D;
  color: #1E2B2E;
}

.latch-plate.is-current {
  background-color: #F2A81D;
  color: #1E2B2E;
}

.open-chip {
  background-color: #FFFFFF;
  color: #22424E;
  border: 3px solid #1E2B2E;
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  flex: 0 0 auto;
}

/* caution stripe chip */
.caution-chip {
  width: 54px;
  height: 20px;
  border: 3px solid #1E2B2E;
  border-radius: 5px;
  background-color: #F2A81D;
  background-image: repeating-linear-gradient(
    45deg,
    #F2A81D 0px,
    #F2A81D 7px,
    #1E2B2E 7px,
    #1E2B2E 14px
  );
  flex: 0 0 auto;
}

.menu-toggle {
  display: none;
  background-color: #F2A81D;
  color: #1E2B2E;
  border: 3px solid #1E2B2E;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  padding: 8px 14px;
  cursor: pointer;
}

/* ==========================================================================
   HERO — CART BAY
   ========================================================================== */

.cartbay {
  background-color: #EFF4F2;
  border-bottom: 4px solid #D7E2E0;
  padding: 54px 0 60px;
}

.cartbay-grid {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 40px;
  align-items: center;
}

.cartbay-copy h1 {
  font-size: 46px;
  color: #1E2B2E;
  margin-bottom: 18px;
}

.hl-duck {
  color: #F2A81D;
}

.cartbay-copy p {
  font-size: 17px;
  color: #1E2B2E;
  max-width: 560px;
}

.caddy-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.caddy-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 13px 26px;
  border-radius: 10px;
  border: 3px solid #1E2B2E;
}

.caddy-btn-primary {
  background-color: #F2A81D;
  color: #1E2B2E;
  box-shadow: 0 5px 0 #C4860C;
}

.caddy-btn-secondary {
  background-color: #FFFFFF;
  color: #1E2B2E;
  box-shadow: 0 5px 0 #7E97A0;
}

.caddy-btn:hover {
  transform: translateY(2px);
}

/* ---- the three-tier cart, built purely with CSS ---- */

.cart-stage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 420px;
}

.janitor-cart {
  position: relative;
  width: 300px;
  height: 380px;
}

/* push handle rising from top shelf */
.cart-handle-post {
  position: absolute;
  top: 8px;
  right: 54px;
  width: 16px;
  height: 96px;
  background-color: #7E97A0;
  border: 3px solid #1E2B2E;
  border-radius: 6px;
}

.cart-handle-bar {
  position: absolute;
  top: 0;
  right: 40px;
  width: 74px;
  height: 18px;
  background-color: #22424E;
  border: 3px solid #1E2B2E;
  border-radius: 12px;
}

.cart-handle-left {
  position: absolute;
  top: 8px;
  left: 54px;
  width: 16px;
  height: 96px;
  background-color: #7E97A0;
  border: 3px solid #1E2B2E;
  border-radius: 6px;
}

.cart-handle-grip {
  position: absolute;
  top: 0;
  left: 40px;
  width: 74px;
  height: 18px;
  background-color: #22424E;
  border: 3px solid #1E2B2E;
  border-radius: 12px;
}

/* three shelves */
.cart-shelf {
  position: absolute;
  left: 24px;
  width: 252px;
  height: 20px;
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 5px;
}

.shelf-one {
  top: 96px;
}

.shelf-two {
  top: 186px;
}

.shelf-three {
  top: 276px;
}

/* hanging caddy latch plate on shelf two */
.cart-caddy-latch {
  position: absolute;
  top: 156px;
  left: 208px;
  width: 56px;
  height: 30px;
  background-color: #F2A81D;
  border: 3px solid #1E2B2E;
  border-radius: 6px;
}

.cart-caddy-latch::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #1E2B2E;
}

.cart-caddy-latch::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #1E2B2E;
}

/* spray bottle on top shelf */
.cart-spray-body {
  position: absolute;
  top: 44px;
  left: 52px;
  width: 30px;
  height: 52px;
  background-color: #22424E;
  border: 3px solid #1E2B2E;
  border-radius: 6px 6px 4px 4px;
}

.cart-spray-neck {
  position: absolute;
  top: 30px;
  left: 62px;
  width: 10px;
  height: 18px;
  background-color: #7E97A0;
  border: 3px solid #1E2B2E;
}

.cart-spray-head {
  position: absolute;
  top: 26px;
  left: 52px;
  width: 32px;
  height: 12px;
  background-color: #F2A81D;
  border: 3px solid #1E2B2E;
  border-radius: 6px;
}

/* folded towel stack on shelf one */
.cart-towel-a {
  position: absolute;
  top: 72px;
  left: 108px;
  width: 66px;
  height: 12px;
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 4px;
}

.cart-towel-b {
  position: absolute;
  top: 80px;
  left: 112px;
  width: 66px;
  height: 12px;
  background-color: #D7E2E0;
  border: 3px solid #1E2B2E;
  border-radius: 4px;
}

.cart-towel-c {
  position: absolute;
  top: 88px;
  left: 108px;
  width: 66px;
  height: 12px;
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 4px;
}

/* spray caddy on shelf two */
.cart-caddy-box {
  position: absolute;
  top: 150px;
  left: 48px;
  width: 84px;
  height: 36px;
  background-color: #F2A81D;
  border: 3px solid #1E2B2E;
  border-radius: 6px;
}

.cart-caddy-box::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 30px;
  width: 22px;
  height: 12px;
  border: 3px solid #1E2B2E;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background-color: #F2A81D;
}

/* folded towel stack on shelf three */
.cart-towel-d {
  position: absolute;
  top: 254px;
  left: 150px;
  width: 90px;
  height: 11px;
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 4px;
}

.cart-towel-e {
  position: absolute;
  top: 263px;
  left: 154px;
  width: 90px;
  height: 11px;
  background-color: #D7E2E0;
  border: 3px solid #1E2B2E;
  border-radius: 4px;
}

.cart-towel-f {
  position: absolute;
  top: 272px;
  left: 150px;
  width: 90px;
  height: 11px;
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 4px;
}

/* caution stripe chip on the cart frame */
.cart-caution {
  position: absolute;
  top: 322px;
  left: 40px;
  width: 76px;
  height: 18px;
  border: 3px solid #1E2B2E;
  border-radius: 5px;
  background-color: #F2A81D;
  background-image: repeating-linear-gradient(
    45deg,
    #F2A81D 0px,
    #F2A81D 7px,
    #1E2B2E 7px,
    #1E2B2E 14px
  );
}

/* wringer bucket at the base */
.cart-wringer {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 96px;
  height: 74px;
  background-color: #22424E;
  border: 4px solid #1E2B2E;
  border-radius: 6px 6px 14px 14px;
}

.cart-wringer-top {
  position: absolute;
  bottom: 96px;
  left: 4px;
  width: 88px;
  height: 14px;
  background-color: #F2A81D;
  border: 3px solid #1E2B2E;
  border-radius: 5px;
}

.cart-mop-handle {
  position: absolute;
  bottom: 34px;
  left: 62px;
  width: 12px;
  height: 168px;
  background-color: #7E97A0;
  border: 3px solid #1E2B2E;
  border-radius: 6px;
  transform: rotate(19deg);
  transform-origin: bottom center;
}

/* four casters */
.caster {
  position: absolute;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #1E2B2E;
  border: 4px solid #7E97A0;
}

.caster-a { left: 22px; }
.caster-b { left: 122px; }
.caster-c { right: 22px; }
.caster-d { right: 62px; }

/* ==========================================================================
   SEASON DEEP CLEAN STRIP
   ========================================================================== */

.season-strip {
  background-color: #22424E;
  color: #FFFFFF;
  padding: 26px 0;
  border-top: 5px solid #F2A81D;
  border-bottom: 5px solid #F2A81D;
}

.season-strip .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.season-badge {
  background-color: #F2A81D;
  color: #1E2B2E;
  border: 3px solid #1E2B2E;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}

.season-strip p {
  margin: 0;
  font-size: 16.5px;
  color: #FFFFFF;
  flex: 1 1 320px;
}

/* ==========================================================================
   ZONE MOSAIC
   ========================================================================== */

.zonemosaic {
  padding: 58px 0 62px;
  background-color: #EFF4F2;
}

.mosaic-head {
  margin-bottom: 30px;
}

.mosaic-head h2 {
  font-size: 34px;
  color: #1E2B2E;
}

.mosaic-head p {
  max-width: 760px;
  color: #22424E;
}

.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 3px solid #1E2B2E;
  background-color: #1E2B2E;
}

.zone-cell {
  position: relative;
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  padding: 24px 22px 26px;
}

.zone-cell h3 {
  font-size: 20px;
  color: #1E2B2E;
  margin-bottom: 8px;
}

.zone-cell p {
  color: #1E2B2E;
  font-size: 15px;
  margin: 0 0 12px;
}

.zone-cell a {
  font-weight: 700;
  color: #22424E;
  text-decoration: underline;
}

.zone-wide {
  grid-column: span 2;
}

.zone-deep {
  background-color: #22424E;
}

.zone-deep h3,
.zone-deep p {
  color: #FFFFFF;
}

.zone-deep a {
  color: #F2A81D;
}

.zone-plate {
  display: inline-block;
  background-color: #EFF4F2;
  border: 2px solid #1E2B2E;
  border-radius: 6px;
  padding: 2px 9px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.07em;
  color: #1E2B2E;
  margin-bottom: 10px;
}

.zone-deep .zone-plate {
  background-color: #FFFFFF;
  color: #1E2B2E;
  border-color: #F2A81D;
}

.zone-num {
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 26px;
  font-weight: 900;
  color: #F2A81D;
  letter-spacing: 0.02em;
}

.zone-caution-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 14px;
  border-left: 3px solid #1E2B2E;
  border-bottom: 3px solid #1E2B2E;
  border-radius: 0 0 0 6px;
  background-color: #F2A81D;
  background-image: repeating-linear-gradient(
    45deg,
    #F2A81D 0px,
    #F2A81D 6px,
    #1E2B2E 6px,
    #1E2B2E 12px
  );
}

/* ==========================================================================
   DEEP COPY BAND — service prose woven into the page
   ========================================================================== */

.weave-band {
  background-color: #FFFFFF;
  border-top: 4px solid #D7E2E0;
  border-bottom: 4px solid #D7E2E0;
  padding: 56px 0;
}

.weave-band h2 {
  font-size: 32px;
  color: #1E2B2E;
  margin-bottom: 18px;
}

.weave-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
}

.weave-cols p {
  color: #1E2B2E;
}

.weave-aside {
  background-color: #EFF4F2;
  border: 3px solid #1E2B2E;
  border-left: 10px solid #F2A81D;
  border-radius: 8px;
  padding: 22px 22px;
}

.weave-aside h3 {
  font-size: 18px;
  color: #22424E;
}

.weave-aside ul {
  margin: 0;
  padding-left: 20px;
  color: #1E2B2E;
}

.weave-aside li {
  margin-bottom: 9px;
}

.trust-band {
  background-color: #EFF4F2;
  border-top: 4px solid #D7E2E0;
}

.why-band {
  background-color: #EFF4F2;
  padding: 56px 0;
  border-bottom: 4px solid #D7E2E0;
}

/* ==========================================================================
   FOOTER — MOP ROOM RAIL
   ========================================================================== */

.moproom {
  background-color: #22424E;
  color: #FFFFFF;
  padding: 42px 0 0;
  border-top: 6px solid #F2A81D;
}

/* tool rail with silhouettes */
.tool-rail {
  position: relative;
  height: 12px;
  background-color: #7E97A0;
  border: 3px solid #1E2B2E;
  border-radius: 6px;
  margin-bottom: 34px;
}

.tool-rail::before,
.tool-rail::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 14px;
  height: 22px;
  background-color: #EFF4F2;
  border: 3px solid #1E2B2E;
  border-radius: 4px;
}

.tool-rail::before { left: 40px; }
.tool-rail::after { right: 40px; }

.tool-mop-a,
.tool-mop-b,
.tool-broom {
  position: absolute;
  top: 9px;
  width: 10px;
}

.tool-mop-a { left: 120px; height: 108px; background-color: #D7E2E0; border: 3px solid #1E2B2E; border-radius: 5px; }
.tool-mop-b { left: 200px; height: 88px; background-color: #F2A81D; border: 3px solid #1E2B2E; border-radius: 5px; }
.tool-broom { left: 280px; height: 122px; background-color: #FFFFFF; border: 3px solid #1E2B2E; border-radius: 5px; }

.tool-head-a,
.tool-head-b,
.tool-head-c {
  position: absolute;
  top: 113px;
  width: 30px;
  height: 34px;
  border: 3px solid #1E2B2E;
  border-radius: 3px 3px 8px 8px;
}

.tool-head-a { left: 110px; background-color: #D7E2E0; }
.tool-head-b { left: 190px; top: 93px; background-color: #F2A81D; }
.tool-head-c { left: 270px; top: 127px; background-color: #FFFFFF; }

/* magnetic label plates on a steel strip */
.magnet-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background-color: #7E97A0;
  border: 3px solid #1E2B2E;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 34px;
}

.magnet-plate {
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 8px;
  padding: 16px 18px;
}

.magnet-plate h4 {
  color: #1E2B2E;
  font-size: 15px;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.magnet-plate a {
  display: block;
  color: #22424E;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  padding: 3px 0;
}

.magnet-plate a:hover {
  color: #C4860C;
  text-decoration: underline;
}

/* care label card + mop bucket */
.moproom-lower {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 34px;
  align-items: center;
  padding-bottom: 30px;
}

.care-label {
  background-color: #EFF4F2;
  color: #1E2B2E;
  border: 3px solid #1E2B2E;
  border-radius: 8px;
  padding: 18px 22px;
  position: relative;
}

.care-label::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  border: 3px solid #1E2B2E;
  border-radius: 50%;
  background-color: #F2A81D;
}

.care-label h4 {
  margin: 0 0 8px 52px;
  color: #1E2B2E;
  font-size: 17px;
}

.care-label p {
  margin: 0 0 0 52px;
  font-size: 14.5px;
  color: #1E2B2E;
}

.mop-bucket {
  position: relative;
  height: 130px;
}

.mop-bucket-body {
  position: absolute;
  left: 40px;
  bottom: 0;
  width: 150px;
  height: 86px;
  background-color: #EFF4F2;
  border: 4px solid #1E2B2E;
  border-radius: 6px 6px 16px 16px;
}

.mop-bucket-rim {
  position: absolute;
  left: 34px;
  bottom: 82px;
  width: 162px;
  height: 14px;
  background-color: #F2A81D;
  border: 3px solid #1E2B2E;
  border-radius: 5px;
}

.mop-bucket-handle {
  position: absolute;
  left: 100px;
  bottom: 86px;
  width: 60px;
  height: 44px;
  border: 4px solid #7E97A0;
  border-bottom: none;
  border-radius: 30px 30px 0 0;
}

/* floor edge */
.floor-edge {
  border-top: 3px solid #7E97A0;
  padding: 20px 0 22px;
}

.floor-edge .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  justify-content: space-between;
}

.floor-edge p {
  margin: 0;
  font-size: 14px;
  color: #FFFFFF;
}

.floor-edge a {
  color: #F2A81D;
  text-decoration: underline;
}

.duck-glyph {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 20%;
  background-color: #F2A81D;
  border: 2px solid #1E2B2E;
  vertical-align: middle;
  margin-left: 6px;
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */

.reveal {
  transform: translateY(22px);
  transition: transform 0.6s ease;
}

.reveal.is-visible {
  transform: none;
}

/* ==========================================================================
   SUBPAGE HERO / BANDS (services + contact)
   ========================================================================== */

.page-hero {
  background-color: #22424E;
  color: #FFFFFF;
  padding: 52px 0 54px;
  border-bottom: 6px solid #F2A81D;
}

.page-hero h1 {
  font-size: 40px;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.page-hero p {
  color: #FFFFFF;
  max-width: 760px;
  font-size: 17px;
}

.service-block {
  background-color: #EFF4F2;
  padding: 54px 0;
  border-bottom: 4px solid #D7E2E0;
}

.service-block-alt {
  background-color: #FFFFFF;
}

.service-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 34px;
  align-items: start;
}

.service-tag {
  background-color: #22424E;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 20px;
  border-left: 8px solid #F2A81D;
}

.service-tag span {
  display: inline-block;
  background-color: #F2A81D;
  color: #1E2B2E;
  border: 2px solid #1E2B2E;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.service-tag h2 {
  color: #FFFFFF;
  font-size: 24px;
  margin: 0;
}

.service-copy p {
  color: #1E2B2E;
}

.process-band {
  background-color: #22424E;
  color: #FFFFFF;
  padding: 54px 0;
}

.process-band h2 {
  color: #FFFFFF;
  font-size: 30px;
  margin-bottom: 24px;
}

.process-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.process-list li {
  background-color: #2E5866;
  border: 3px solid #F2A81D;
  border-radius: 8px;
  padding: 18px 20px;
  color: #FFFFFF;
}

.process-list strong {
  display: block;
  color: #F2A81D;
  font-size: 15px;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.cta-band {
  background-color: #F2A81D;
  color: #1E2B2E;
  padding: 34px 0;
  border-top: 5px solid #1E2B2E;
  border-bottom: 5px solid #1E2B2E;
}

.cta-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-band h2 {
  color: #1E2B2E;
  font-size: 26px;
  margin: 0;
}

.cta-band a {
  background-color: #1E2B2E;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 800;
  padding: 13px 26px;
  border-radius: 10px;
  border: 3px solid #1E2B2E;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-wrap {
  background-color: #EFF4F2;
  padding: 54px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-form {
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 10px;
  padding: 28px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-weight: 700;
  color: #1E2B2E;
  margin-bottom: 6px;
  font-size: 14.5px;
}

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: #1E2B2E;
  background-color: #EFF4F2;
  border: 3px solid #1E2B2E;
  border-radius: 8px;
  padding: 11px 13px;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.submit-btn {
  background-color: #F2A81D;
  color: #1E2B2E;
  border: 3px solid #1E2B2E;
  border-radius: 10px;
  padding: 13px 28px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 5px 0 #C4860C;
}

.form-note {
  font-size: 13px;
  color: #22424E;
  margin-top: 12px;
}

.contact-side {
  background-color: #22424E;
  color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 10px;
  padding: 26px;
}

.contact-side h2,
.contact-side h3 {
  color: #F2A81D;
}

.contact-side p,
.contact-side li {
  color: #FFFFFF;
}

.contact-side ul {
  padding-left: 20px;
  margin: 0 0 16px;
}

.faq-box {
  background-color: #FFFFFF;
  border: 3px solid #1E2B2E;
  border-radius: 10px;
  padding: 26px;
  margin-top: 40px;
}

.faq-box h2 {
  color: #1E2B2E;
}

.faq-item {
  border-top: 3px solid #D7E2E0;
  padding: 16px 0;
}

.faq-item:first-of-type {
  border-top: none;
}

.faq-q {
  width: 100%;
  text-align: left;
  background-color: #EFF4F2;
  border: 3px solid #1E2B2E;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 15.5px;
  color: #1E2B2E;
  cursor: pointer;
}

.faq-a {
  display: none;
  padding: 12px 4px 0;
  color: #1E2B2E;
}

.faq-item.is-open .faq-a {
  display: block;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .cartbay-grid {
    grid-template-columns: 1fr;
  }
  .cart-stage {
    min-height: 400px;
  }
  .mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .zone-wide {
    grid-column: span 2;
  }
  .weave-cols {
    grid-template-columns: 1fr;
  }
  .service-inner {
    grid-template-columns: 1fr;
  }
  .process-list {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .magnet-strip {
    grid-template-columns: 1fr;
  }
  .moproom-lower {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .pushhandle {
    padding: 14px 16px 16px;
  }
  .grip-tube {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 10px 14px;
  }
  .menu-toggle {
    display: inline-block;
  }
  .plate-row {
    width: 100%;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
  }
  .plate-row.is-open {
    display: grid;
  }
  .latch-plate {
    text-align: center;
  }
  .cartbay-copy h1 {
    font-size: 34px;
  }
  .mosaic-grid {
    grid-template-columns: 1fr;
  }
  .zone-wide {
    grid-column: span 1;
  }
  .page-hero h1 {
    font-size: 30px;
  }
}