/* ==========================================================================
   Section-level styles shared across pages
   ========================================================================== */

/* ---------- HOME HERO ---------- */
.hero{
  background-image:
    radial-gradient(circle at 12% 18%, rgba(20,120,212,.4), transparent 42%),
    radial-gradient(circle at 85% 8%, rgba(95,168,236,.3), transparent 45%),
    radial-gradient(circle at 78% 70%, rgba(255,216,115,.2), transparent 40%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  background-size: 180% 180%, 180% 180%, 180% 180%, 100% 100%;
  background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  background-repeat: no-repeat;
  animation: causticDrift 22s ease-in-out infinite;
  color: var(--foam);
  padding: 76px 0 0;
  overflow:hidden;
  position: relative;
}

@keyframes causticDrift{
  0%   { background-position: 0% 0%,   0% 0%,   0% 0%,   0 0; }
  50%  { background-position: 6% 8%,  -6% 5%,  -4% -6%,  0 0; }
  100% { background-position: 0% 0%,   0% 0%,   0% 0%,   0 0; }
}

/* ---------- ambient rising bubbles ---------- */
.amb-bubbles{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.amb-bubble{
  position: absolute;
  bottom: -60px;
  left: var(--x, 10%);
  width: var(--s, 10px);
  height: var(--s, 10px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.05) 40%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.22) 78%, rgba(255,255,255,.02) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.4),
    inset -1px -1px 2px rgba(20,120,212,.25),
    0 0 5px rgba(255,255,255,.12);
  filter: blur(var(--blur, 0px));
  animation: bubbleRise var(--dur, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
@keyframes bubbleRise{
  0%   { transform: translate(0, 0) scale(.85); opacity: 0; }
  6%   { opacity: .8; }
  22%  { transform: translate(calc(var(--drift, 14px) * -1), -110px) scale(1); }
  40%  { transform: translate(var(--drift, 14px), -210px) scale(1.05); }
  58%  { transform: translate(calc(var(--drift, 14px) * -0.7), -310px) scale(1); }
  76%  { transform: translate(var(--drift, 14px), -410px) scale(.96); }
  90%  { opacity: .4; }
  100% { transform: translate(calc(var(--drift, 14px) * -0.4), -520px) scale(.85); opacity: 0; }
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: var(--maxw);
  margin:0 auto;
  padding: 0 28px;
  position: relative;
}
@media (min-width: 900px){
  .hero-grid{
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 40px;
  }
}
.page-hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px){
  .page-hero-grid{
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 40px;
  }
  .page-hero-grid .hero-ctas{ margin-top: 0 !important; }
}
.hero-logo-heading{
  margin: 0;
  line-height: 0;
}
.hero-logo{
  width: clamp(280px, 34vw, 460px);
  height: auto;
  display: block;
}
.hero-sub{
  color: rgba(243,250,252,.78);
  font-size: 18px;
  max-width: 52ch;
  margin: 20px 0 32px;
}
.hero-ctas{
  display:flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 899px){
  .hero-ctas{ flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}

.hero-photo{
  margin: 56px 0 0;
}
.hero-photo .wrap{
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero-photo img{
  width: 100%;
  height: clamp(300px, 46vw, 560px);
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -18px rgba(4,15,23,.5);
}

.marquee-strip{
  background: var(--ink-2);
  border-top: 1px solid rgba(243,250,252,.1);
  overflow:hidden;
  padding: 16px 0;
}
.marquee-track{
  display:flex;
  width: max-content;
  animation: scroll 42s linear infinite;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}
.mq-group{ display:flex; align-items:center; gap:60px; padding-right:60px; flex-shrink:0; }
.marquee-track span{ color: var(--seafoam); }
.marquee-track .mq-bubble{ margin-right:0; display:inline-flex; align-items:center; vertical-align:middle; }
.marquee-track .mq-bubble svg{ display:block; }
@keyframes scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- scrolling brand logo strip (bottom of page, flows with the wave) ---------- */
.brand-marquee{
  background: var(--ink-2);
  overflow: hidden;
  padding: 26px 0;
  position: relative;
  z-index: 1;
}
.brand-marquee-track{
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: scroll 100s linear infinite;
}
.brand-marquee-logo{
  display: inline-flex;
  align-items: center;
}
.brand-marquee-logo img{
  height: 30px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 5px rgba(255,255,255,.5));
}
.brand-marquee-logo.bm-rainx-graphene img{ height: 40px; }
.brand-marquee-logo.bm-armorall img{ height: 42px; }

/* ---------- STAGES (the wash sequence) ---------- */
.stages{ background: var(--foam); }
.stage-list{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stage{
  background: #fff;
  padding: 34px 26px 30px;
  position:relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px -16px rgba(10,32,54,.25);
}
.stage::before{
  content:"";
  position:absolute;
  top:0; left: 26px;
  width: 44px; height: 5px;
  border-radius: 0 0 4px 4px;
  background: var(--aqua);
}
.stage:nth-child(2)::before{ background: var(--seafoam); }
.stage:nth-child(3)::before{ background: var(--aqua-dim); }
.stage:nth-child(4)::before{ background: var(--ink-3); }
.stage-num{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--aqua-dim);
  letter-spacing: .1em;
}
.stage:nth-child(2) .stage-num{ color: var(--seafoam-dim); }
.stage:nth-child(3) .stage-num{ color: var(--aqua-dim); }
.stage:nth-child(4) .stage-num{ color: var(--ink-3); }
.stage h3{
  font-size: 27px;
  margin: 18px 0 10px;
  color: var(--ink);
}
.stage p{
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.65;
  margin:0;
}
.stage-icon{ width: 40px; height: 40px; margin-top: 18px; color: var(--aqua-dim); }

/* ---------- PACKAGES / menu board ---------- */
.packages{ background: var(--foam-2); }
.package-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  align-items: start;
}
.pkg-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 32px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  box-shadow: 0 6px 24px -16px rgba(10,32,54,.25);
}
.pkg-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 8px;
  background: var(--aqua);
}
.pkg-card.pkg-amber::before{ background: var(--aqua-dim); }
.pkg-card.pkg-pink::before{ background: var(--seafoam); }

.pkg-card.featured{
  background: linear-gradient(165deg, var(--ink) 0%, var(--ink-3) 100%);
  color: var(--foam);
  border-color: var(--ink);
  box-shadow: 0 14px 30px -16px rgba(22,55,79,.4);
}
.pkg-card.featured::before{ background: linear-gradient(90deg, var(--aqua), var(--seafoam)); }
.pkg-card.featured .pkg-list li{ color: rgba(243,250,252,.85); }
.pkg-card.featured .pkg-name{ color: var(--foam); }
.pkg-card.featured .pkg-desc{ color: rgba(243,250,252,.65); }
.pkg-featured-wrap{
  position: relative;
}
.pkg-tag{
  position: absolute;
  top: -16px;
  right: 22px;
  z-index: 2;
  background: linear-gradient(100deg, var(--aqua), var(--seafoam));
  color: var(--foam);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing:.1em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px -6px rgba(10,32,54,.35);
}
.pkg-featured-wrap .pkg-card{ width: 100%; height: 100%; }
.pkg-name{
  font-family: var(--display);
  font-size: 33px;
  font-weight: 600;
  color: var(--ink);
}
.pkg-desc{ color: var(--slate); font-size: 18px; margin: 8px 0 20px; min-height: 40px; }
.pkg-pricing{ margin-bottom: 22px; }
.pkg-price{
  font-family: var(--mono);
  font-size: 42px;
  margin: 4px 0 0;
  color: var(--aqua-dim);
  font-weight: 600;
}
.pkg-card.pkg-amber .pkg-price{ color: var(--aqua-dim); }
.pkg-card.pkg-pink .pkg-price{ color: var(--seafoam-dim); }
.pkg-card.featured .pkg-price{ color: #ffffff; }
.pkg-price span{ font-size: 18px; color: var(--slate-2); font-weight:400; }
.pkg-price-sub{
  font-family: var(--mono);
  font-size: 19px;
  color: var(--slate);
  margin: 2px 0 0;
}
.pkg-price-sub span{ font-size: 16px; color: var(--slate-2); margin-left: 4px; }
.pkg-card.featured .pkg-price-sub{ color: rgba(243,250,252,.8); }
.pkg-card.featured .pkg-price-sub span{ color: rgba(243,250,252,.5); }
.pkg-card.featured .pkg-price span{ color: rgba(243,250,252,.55); }
.pkg-list{
  list-style:none;
  margin: 0 0 26px;
  padding: 0;
  flex:1;
}
.pkg-list li{
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 18.5px;
  color: var(--ink);
  display:flex;
  gap: 10px;
  align-items:center;
}
.pkg-card.featured .pkg-list li{ border-color: rgba(243,250,252,.12); }
.pkg-list li.pkg-feature-brand{
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 22px 0;
}
.pkg-list li.pkg-feature-brand::before{ display: none; }
.pkg-list li.pkg-feature-brand span{ line-height: 1.4; }
.brand-badge-lg{
  height: 46px;
  width: auto;
  display: block;
}
.brand-shield{
  height: 68px;
  width: auto;
  display: block;
}
.pkg-list li::before{
  content:"—";
  color: var(--aqua-dim);
  flex:none;
}
.pkg-card.pkg-amber .pkg-list li::before{ color: var(--aqua-dim); }
.pkg-card.pkg-pink .pkg-list li::before{ color: var(--seafoam-dim); }
.pkg-card.featured .pkg-list li::before{ color: var(--seafoam); }
.pkg-note{
  margin-top: 28px;
  font-size: 16px;
  color: var(--slate);
  font-family: var(--mono);
}

/* ---------- STATS band ---------- */
.stats{
  background: var(--ink);
  color: var(--foam);
}
.stats .section-head p{ color: rgba(243,250,252,.68); }
.stats .section-head h2{ color: var(--foam); }
.stat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.stat{ border-top: 3px solid var(--aqua); padding-top: 18px; border-radius: 2px; }
.stat:nth-child(2){ border-color: var(--seafoam); }
.stat:nth-child(3){ border-color: var(--aqua-dim); }
.stat:nth-child(4){ border-color: var(--ink-3); }
.stat b{
  display:block;
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 46px);
  color: var(--foam);
  text-transform: none;
}
.stat span{
  display:block;
  margin-top: 8px;
  font-size: 14px;
  color: rgba(243,250,252,.65);
  max-width: 26ch;
}

/* ---------- MEMBERSHIP CTA band ---------- */
.member-band{
  background: var(--foam-2);
  color: var(--ink);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.member-band::before{
  content:"";
  position: absolute;
  top: 50%; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28,176,168,.16), transparent 70%);
  transform: translateY(-50%);
  pointer-events: none;
}
.member-band-inner{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
}
.member-band h2{
  font-size: clamp(34px, 5vw, 54px);
  max-width: 14ch;
  color: var(--ink);
}
.member-band p{ color: var(--slate); max-width: 46ch; margin-top: 14px; font-size: 16.5px; }

/* ---------- LOCATION / HOURS ---------- */
.location{ background: var(--foam); }
.location-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.hours-table{
  width:100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 14.5px;
  margin-top: 20px;
}
.hours-table td{
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.hours-table td:last-child{ text-align:right; color: var(--slate); }
.map-frame{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  height: 100%;
  min-height: 340px;
}
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }
.notice-box{
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--seafoam);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.6;
}

/* ---------- generic feature list (about / eco) ---------- */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature{
  padding: 30px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px -16px rgba(10,32,54,.22);
}
.feature .num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(100deg, var(--aqua), var(--aqua-dim));
  color: #fff;
  font-family: var(--mono);
  animation: buoyBob 4.2s ease-in-out infinite;
  font-size: 11.5px;
  letter-spacing:.06em;
}
.feature:nth-child(2) .num{ background: linear-gradient(100deg, var(--seafoam), var(--aqua-dim)); animation-delay: .5s; }
.feature:nth-child(3) .num{ background: linear-gradient(100deg, var(--aqua), var(--seafoam)); animation-delay: 1s; }

@keyframes buoyBob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
.feature h3{ font-size: 23px; margin: 16px 0 10px; color: var(--ink); }
.feature p{ font-size: 14.5px; color: var(--slate); margin:0; }

/* ---------- forms (contact / careers) ---------- */
.form-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: start;
}
.field{ margin-bottom: 20px; }
.field label{
  display:block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea{
  width:100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--body);
  font-size: 15px;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--aqua-dim);
  outline: none;
  box-shadow: 0 0 0 4px rgba(20,120,212,.18);
}
.field textarea{ resize: vertical; min-height: 130px; }
.field input[type="file"]{
  padding: 11px 14px;
  font-size: 14px;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button{
  font-family: var(--body);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--foam);
  background: var(--aqua-dim);
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  margin-right: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
.field input[type="file"]::file-selector-button:hover{ background: var(--ink-3); }
.field-hint{
  font-size: 13px;
  color: var(--slate-2);
  margin: 8px 0 0;
  line-height: 1.5;
}
.contact-card{
  background: linear-gradient(165deg, var(--ink) 0%, var(--ink-3) 100%);
  color: var(--foam);
  padding: 34px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.contact-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 6px;
  background: linear-gradient(90deg, var(--aqua), var(--seafoam));
}
.contact-card-logo{ height: 34px; width: auto; display:inline-block; margin-bottom: 22px; }
.contact-card h3{ font-size: 27px; margin-bottom: 20px; }
.contact-line{ display:flex; gap: 12px; margin-bottom: 18px; font-size: 17px; color: rgba(243,250,252,.85); }
.contact-line .lbl{ font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing:.08em; color: var(--aqua); text-transform:uppercase; display:block; margin-bottom:4px; }
.form-note{ font-size: 12.5px; color: var(--slate-2); margin-top: 10px; }

/* ---------- jobs list (careers) ---------- */
.job{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 20px;
  background:#fff;
  margin-bottom: 16px;
  flex-wrap: wrap;
  box-shadow: 0 6px 20px -16px rgba(10,32,54,.22);
}
.job h3{ font-size: 22px; color: var(--ink); text-transform:none; font-family: var(--body); font-weight:700; }
.job p{ color: var(--slate); font-size: 14px; margin: 6px 0 0; max-width: 48ch; }
.job-tag{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--seafoam-dim);
  background: #eaf3fd;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  display:inline-block;
  margin-bottom: 6px;
}
.job:nth-child(3) .job-tag{ color: var(--aqua-dim); background: var(--foam-2); }
.job:nth-child(4) .job-tag{ color: var(--ink-3); background: #e2ecfa; }
.perks{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  margin-top: 10px;
}
.perk{ text-align:left; }
.perk .num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 52px; height: 52px;
  border-radius: var(--radius-pill);
  background: linear-gradient(140deg, var(--aqua), var(--seafoam));
  color: #fff;
  font-family: var(--mono);
  animation: buoyBob 4.6s ease-in-out infinite;
  font-size: 19px;
  font-weight: 700;
}
.perk:nth-child(2) .num{ background: linear-gradient(140deg, var(--seafoam), var(--aqua-dim)); animation-delay: .4s; }
.perk:nth-child(3) .num{ background: linear-gradient(140deg, var(--seafoam), var(--seafoam-dim)); animation-delay: .8s; }
.perk:nth-child(4) .num{ background: linear-gradient(140deg, var(--aqua-dim), var(--ink-3)); animation-delay: 1.2s; }
.perk p{ font-size: 16px; color: var(--slate); margin-top: 14px; }

/* ---------- membership plan table (membership page) ---------- */
.plan-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.plan-table th, .plan-table td{
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  text-align:left;
  font-size: 14.5px;
}
.plan-table th{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--foam-2);
}
.plan-table td.check{ color: var(--aqua-dim); font-weight:700; text-align:center; font-size:16px; }
.plan-table td.dash{ color: var(--slate-2); text-align:center; }

/* ---------- LOCAL EDGE comparison ---------- */
.edge{ background: var(--foam-2); }
.edge-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.edge-card{
  border-radius: var(--radius);
  padding: 34px 30px;
  border: 1px solid var(--line);
}
.edge-card.them{
  background: #fff;
  opacity: .85;
}
.edge-card.us{
  background: linear-gradient(165deg, var(--ink), var(--ink-3));
  color: var(--foam);
  border-color: var(--ink);
  box-shadow: 0 18px 40px -20px rgba(20,120,212,.4);
}
.edge-card h3{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--slate);
}
.edge-card.us h3{ color: var(--aqua); }
.edge-list{ list-style:none; margin:0; padding:0; }
.edge-list li{
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  color: var(--slate);
}
.edge-card.us .edge-list li{ border-color: rgba(243,250,252,.14); color: rgba(243,250,252,.85); }
.edge-list li::before{ content:"×"; color: var(--slate-2); font-weight:700; flex:none; }
.edge-card.us .edge-list li::before{ content:"✓"; color: var(--aqua); }

/* ---------- TESTIMONIALS ---------- */
.testimonials{ background: var(--foam); padding: 56px 0; }
.testimonials .section-head{ margin-bottom: 32px; }
.testi-carousel{
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
.testi-viewport{
  flex: 1;
  overflow: hidden;
}
.testi-track{
  display: flex;
  transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.testi-slide{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px;
  box-shadow: 0 10px 30px -18px rgba(10,32,54,.25);
  position: relative;
  min-height: 150px;
  box-sizing: border-box;
}
.testi-slide::before{
  content:"";
  position:absolute;
  top:0; left: 44px;
  width: 40px; height: 5px;
  border-radius: 0 0 4px 4px;
  background: var(--aqua);
}
.testi-slide:nth-child(2)::before{ background: var(--seafoam); }
.testi-slide:nth-child(3)::before{ background: var(--aqua-dim); }
.testi-slide:nth-child(4)::before{ background: var(--ink-3); }
.testi-slide:nth-child(5)::before{ background: var(--seafoam-dim); }
.testi-slide:nth-child(6)::before{ background: var(--aqua); }
.testi-slide:nth-child(7)::before{ background: var(--seafoam); }
.testi-slide:nth-child(8)::before{ background: var(--aqua-dim); }
.testi-slide:nth-child(9)::before{ background: var(--ink-3); }
.testi-slide:nth-child(10)::before{ background: var(--seafoam-dim); }
.testi-arrow{
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.testi-arrow:hover{ background: var(--aqua); border-color: var(--aqua); color: #fff; transform: scale(1.06); }
.testi-dots{
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
}
.testi-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--line);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .15s ease;
}
.testi-dot.active{ background: var(--aqua-dim); transform: scale(1.25); }
.testi-quote{
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 8px 0 14px;
}
.testi-name{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.testi-note{
  font-size: 13px;
  color: var(--slate-2);
  margin-top: 16px;
  font-family: var(--mono);
  text-align: center;
}

@media (max-width: 640px){
  .testi-carousel{ gap: 10px; }
  .testi-slide{ padding: 32px 24px; }
  .testi-slide::before{ left: 24px; }
  .testi-arrow{ width: 36px; height: 36px; font-size: 20px; }
}

/* ---------- WAVE DIVIDER (animated, seamless loop) ---------- */

/* ---------- real photo banners ---------- */
.photo-banner{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px -16px rgba(22,55,79,.35);
  margin-bottom: 52px;
  position: relative;
}
.photo-banner img{
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
  display: block;
}
.location .photo-banner img{
  height: clamp(300px, 46vw, 560px);
}
.photo-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 24px;
  background: linear-gradient(0deg, rgba(22,55,79,.75), transparent);
  color: var(--foam);
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
}
.wave-divider{
  background: var(--ink-2);
  line-height: 0;
  margin-top: -1px;
  overflow: hidden;
  position: relative;
  height: 60px;
}
.wave-layer{
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 60px;
  display: block;
}
.wave-back{ animation: waveDrift 16s linear infinite; }
.wave-front{ animation: waveDrift 10s linear infinite reverse; }

.wave-divider-footer{
  line-height: 0;
  margin-top: -44px;
  position: relative;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  height: 46px;
}
.wave-divider-footer .wave-layer{
  height: 46px;
  animation: waveDrift 13s linear infinite;
}

@keyframes waveDrift{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (max-width: 600px){
  .wave-divider{ height: 36px; }
  .wave-divider .wave-layer{ height: 36px; }
  .wave-divider-footer{ height: 28px; }
  .wave-divider-footer .wave-layer{ height: 28px; }
}

@media (max-width: 900px){
  .edge-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 980px){
  .package-grid{ grid-template-columns: 1fr; }
  .pkg-featured-wrap{ order:-1; }
  .stage-list{ grid-template-columns: 1fr 1fr; }
  .stat-grid{ grid-template-columns: 1fr 1fr; }
  .location-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: 1fr 1fr; }
  .perks{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .stage-list{ grid-template-columns: 1fr; }
  .stat-grid{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: 1fr; }
  .perks{ grid-template-columns: 1fr; }
  .job{ flex-direction:column; align-items:flex-start; }
}

/* ---------- policies page ---------- */
.policy-block{
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}
.policy-block:first-child{ padding-top: 0; }
.policy-block h2{
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 10px;
}
.policy-block p{
  color: var(--slate);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.policy-block a{ color: var(--aqua-dim); text-decoration: underline; }
.policy-divider{
  text-align: center;
  padding: 56px 0 40px;
  border-top: 2px solid var(--line);
  margin-top: 20px;
}
.policy-divider h2{
  font-size: 46px;
  color: var(--ink);
  margin: 10px 0 0;
}
.policy-divider p{
  color: var(--slate);
  font-size: 15px;
  max-width: 46ch;
  margin: 0 auto;
}


/* ==========================================================================
   Wash packages page — staircase cards + comparison table
   ========================================================================== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.wp-free{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; background:var(--ink); color:#fff; border-radius:18px; padding:16px 22px; margin-bottom:40px; font-family:var(--display); font-weight:700; font-size:22px; }
.wp-free b{ color:var(--seafoam); }
.wp-ladder{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:end; margin-bottom:46px; }
.wp-step{ background:#fff; border-radius:22px; padding:28px; box-shadow:0 10px 30px rgba(10,28,74,.12); position:relative; }
.wp-step.s2{ padding-bottom:42px; }
.wp-step.s3{ background:linear-gradient(160deg,var(--ink-2),var(--ink)); color:#fff; padding-bottom:56px; }
.wp-step h3{ font-family:var(--display); font-size:32px; margin:0; line-height:1.1; }
.wp-price{ font-family:var(--display); font-weight:800; font-size:56px; line-height:1; margin:14px 0 2px; }
.wp-price small{ font-size:18px; font-weight:600; opacity:.75; }
.wp-mo{ font-weight:700; font-size:19px; margin-bottom:6px; }
.wp-inc{ font-size:14px; letter-spacing:.1em; font-weight:800; text-transform:uppercase; opacity:.7; margin:14px 0 8px; padding-top:14px; border-top:1px dashed currentColor; }
.wp-step ul{ list-style:none; margin:0; padding:0; }
.wp-step li{ font-size:19px; font-weight:600; padding:6px 0 6px 30px; position:relative; }
.wp-step li::before{ content:"+"; position:absolute; left:0; top:3px; font-weight:900; color:var(--aqua); font-size:24px; line-height:1.1; }
.wp-step li.base::before{ content:"✓"; font-size:20px; top:5px; }
.wp-step.s3 li::before{ color:var(--seafoam); }
.wp-step li.logo{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wp-step li.logo img{ height:34px; width:auto; flex-shrink:0; }
.wp-step li.logo img.sh{ height:46px; }
.wp-pill{ position:absolute; top:-16px; right:20px; background:var(--aqua); color:#fff; font-weight:800; padding:5px 16px; border-radius:99px; font-size:14px; letter-spacing:.08em; }
.wp-sub{ font-family:var(--display); font-size:34px; text-align:center; margin:0 0 18px; color:var(--ink); }
.wp-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(10,28,74,.12); }
.wp-table th, .wp-table td{ padding:12px; text-align:center; font-size:18px; border-bottom:1px solid var(--foam-2); }
.wp-table tbody tr:last-child td{ border-bottom:0; }
.wp-table td:first-child{ text-align:left; font-weight:700; padding-left:26px; }
.wp-table thead th{ background:var(--ink); color:#fff; padding:16px 12px; border:0; vertical-align:bottom; }
.wp-table thead th.pop{ background:var(--aqua); }
.wp-table .pn{ display:block; font-family:var(--display); font-size:22px; font-weight:800; }
.wp-table .pp{ display:block; font-family:var(--display); font-size:34px; font-weight:800; line-height:1; }
.wp-table .ps{ display:block; font-size:14px; font-weight:600; opacity:.88; margin-top:4px; }
.wp-table td.pop{ background:#eaf3fd; }
.wp-table .chk{ color:var(--aqua); font-weight:900; }
.wp-table .dash{ color:#b7c6dc; }
@media (max-width:820px){
  .wp-ladder{ grid-template-columns:1fr; gap:26px; }
  .wp-step, .wp-step.s2, .wp-step.s3{ padding-bottom:28px; }
  .wp-free{ font-size:18px; gap:8px 14px; }
  .wp-table{ table-layout:fixed; }
  .wp-table th:first-child, .wp-table td:first-child{ width:36%; }
  .wp-table th, .wp-table td{ font-size:13px; padding:9px 3px; }
  .wp-table td:first-child{ padding-left:8px; }
  .wp-table thead th{ padding:12px 1px; }
  .wp-table .pn{ font-size:12px; }
  .wp-table .pp{ font-size:19px; }
  .wp-table .ps{ font-size:10px; line-height:1.2; }
}

/* ---- Wash packages: visual polish ---- */
.packages{ background: radial-gradient(900px 420px at 12% 0%, rgba(95,168,236,.28), transparent 70%), radial-gradient(800px 480px at 100% 38%, rgba(20,120,212,.16), transparent 70%), linear-gradient(180deg,#eef4fb 0%, var(--foam-2) 100%); }
.wp-free{ background:linear-gradient(100deg,var(--ink) 0%,var(--ink-2) 55%,var(--ink-3) 100%); box-shadow:0 14px 34px rgba(10,28,74,.28); border-radius:999px; padding:14px 30px; gap:14px 22px; align-items:center; font-size:23px; }
.wp-free span:not(.sep){ display:inline-flex; align-items:center; gap:10px; }
.wp-free b{ background:var(--seafoam); color:var(--ink); font-size:14px; letter-spacing:.12em; padding:4px 12px; border-radius:999px; }
.wp-ladder{ gap:26px; }
.wp-step{ border-radius:26px; transition:transform .25s ease, box-shadow .25s ease; border:1px solid rgba(10,28,74,.06); }
.wp-step:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(10,28,74,.2); }
.wp-step h3{ letter-spacing:.01em; }
.wp-step:not(.s3) .wp-price{ background:linear-gradient(135deg,var(--ink-2),var(--aqua)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wp-step:not(.s3) .wp-price small{ -webkit-text-fill-color:var(--slate); opacity:1; }
.wp-step.s2{ background:linear-gradient(180deg,#fff 0%,#f2f8ff 100%); }
.wp-step li{ border-bottom:1px solid var(--line-soft); }
.wp-step li:last-child{ border-bottom:0; }
.wp-step.s3 li{ border-bottom-color:rgba(255,255,255,.12); }
.wp-step.s3{
  background:
    radial-gradient(circle at 97% 4%, rgba(95,168,236,.3) 0 40px, transparent 41px),
    radial-gradient(circle at 90% 30%, rgba(95,168,236,.2) 0 14px, transparent 15px),
    radial-gradient(circle at 94% 30%, rgba(255,255,255,.14) 0 9px, transparent 10px),
    radial-gradient(420px 260px at 0% 100%, rgba(20,120,212,.55), transparent 70%),
    linear-gradient(160deg,var(--ink-2),var(--ink));
  box-shadow:0 0 0 3px rgba(95,168,236,.55), 0 26px 54px rgba(10,28,74,.38);
}
.wp-step.s3:hover{ box-shadow:0 0 0 3px var(--seafoam), 0 32px 64px rgba(10,28,74,.45); }
.wp-pill{ background:linear-gradient(90deg,var(--aqua),var(--seafoam)); box-shadow:0 6px 16px rgba(20,120,212,.45); }
.wp-sub{ position:relative; display:flex; align-items:center; justify-content:center; gap:18px; }
.wp-sub::before, .wp-sub::after{ content:""; flex:0 0 90px; height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,var(--seafoam)); }
.wp-sub::after{ transform:scaleX(-1); }
.wp-table{ box-shadow:0 18px 44px rgba(10,28,74,.16); }
.wp-table thead th:not(.pop){ background:linear-gradient(180deg,var(--ink-2),var(--ink)); }
.wp-table thead th.pop{ background:linear-gradient(180deg,var(--aqua),var(--aqua-dim)); }
.wp-table tbody tr:nth-child(even) td:not(.pop){ background:#f7fafe; }
.wp-table tbody tr:hover td:not(.pop){ background:#eaf3fd; }
.wp-table td.pop{ background:#e4f0fd; box-shadow:inset 3px 0 0 rgba(20,120,212,.18), inset -3px 0 0 rgba(20,120,212,.18); }
.wp-table td.chk{ font-size:0; }
.wp-table td.chk::before{ content:"✓"; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#dcecfc; color:var(--aqua); font-size:17px; font-weight:900; }
.wp-table td.chk.pop::before{ background:var(--aqua); color:#fff; }
.wp-table td.dash{ font-size:20px; }
.pkg-note{ text-align:center; margin-top:22px; }
@media (max-width:820px){
  .wp-free{ border-radius:26px; padding:14px 18px; font-size:18px; }
  .wp-sub::before, .wp-sub::after{ display:none; }
  .wp-table td.chk::before{ width:22px; height:22px; font-size:13px; }
  .wp-step:hover{ transform:none; }
}

/* free-with-purchase bar: two lines, same colors */
.wp-free{ flex-direction:column; flex-wrap:nowrap; gap:4px; border-radius:34px; padding:14px 30px; }
.wp-free-row{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center; align-items:center; }
.wp-free-row span{ display:inline-flex; align-items:center; gap:10px; }
.wp-free-sub{ font-family:var(--body); font-size:16px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#bcd9f6; text-align:center; }
@media (max-width:820px){ .wp-free{ border-radius:26px; padding:14px 18px; } .wp-free-sub{ font-size:13px; letter-spacing:.1em; } }

/* ---------- phones: prevent forms and large buttons from forcing sideways scroll ---------- */
@media (max-width: 900px){
  .form-grid{ grid-template-columns: minmax(0,1fr); }
  .form-grid > *{ min-width: 0; }
  .field input, .field select, .field textarea{ max-width: 100%; }
}
@media (max-width: 600px){
  .btn-lg{ padding: 16px 22px; font-size: 18px; white-space: normal; max-width: 100%; }
  .hero-ctas .btn{ max-width: 100%; }
}
.contact-line a, .contact-line > div{ overflow-wrap: anywhere; min-width: 0; }