/* ==========================================================================
   Oasis Coastal Cleaning — site styles
   Loads after tokens.css. Every color and type value comes from a token.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { color: var(--oasis-teal); }

h1 { font-size: clamp(1.6rem, 5.2vw, 3rem); }

:focus-visible {
  outline: 3px solid var(--oasis-sea);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--oasis-navy); color: var(--oasis-cream);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
  font-size: var(--step--1); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the sticky mobile bar sits over the bottom of the page — keep clear of it */
body { padding-bottom: 4.75rem; }
@media (min-width: 860px) { body { padding-bottom: 0; } }

/* ------------------------------------------------------------------ header */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 249, 243, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--oasis-line);
}
.topbar__inner {
  max-width: var(--max-width); margin-inline: auto;
  padding: 0.5rem var(--gutter);
  display: flex; align-items: center; gap: 1rem;
}
.topbar__brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
/* The badge already contains the name and the tagline, so nothing is set
   beside it. Sized above the point where its services line turns to mush. */
.topbar__brand img { width: clamp(66px, 12vw, 88px); height: auto; display: block; }

.nav { display: none; }
@media (min-width: 860px) {
  .nav { display: flex; align-items: center; gap: clamp(0.75rem, 1.8vw, 1.6rem); }
  .nav a {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; text-decoration: none; color: var(--oasis-navy);
    padding: 0.4rem 0; border-bottom: 2px solid transparent;
  }
  .nav a:hover { color: var(--oasis-teal); border-bottom-color: var(--oasis-gold); }
  .nav a[aria-current="page"] { color: var(--oasis-teal); border-bottom-color: var(--oasis-gold); }
}
.topbar .btn { padding: 0.7em 1.35em; font-size: 0.72rem; white-space: nowrap; }
.topbar__cta { display: none; }
@media (min-width: 560px) { .topbar__cta { display: inline-block; } }

.navtoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--oasis-line); color: var(--oasis-navy);
}
@media (min-width: 860px) { .navtoggle { display: none; } }
.navtoggle svg { width: 22px; height: 22px; }

.drawer {
  display: none; border-top: 1px solid var(--oasis-line);
  background: var(--oasis-cream); padding: 0.5rem var(--gutter) 1.25rem;
}
.drawer.is-open { display: block; }
@media (min-width: 860px) { .drawer, .drawer.is-open { display: none; } }
.drawer a {
  display: block; padding: 0.85rem 0; text-decoration: none; color: var(--oasis-navy);
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--oasis-line);
}
.drawer a[aria-current="page"] { color: var(--oasis-teal); }
.drawer .btn { display: block; text-align: center; margin-top: 1rem; }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(39, 189, 206, 0.13) 0%, transparent 58%),
    linear-gradient(178deg, var(--oasis-cream) 0%, var(--oasis-sand) 100%);
  padding: clamp(1.75rem, 4vw, 3rem) var(--gutter) clamp(2.75rem, 6vw, 4.5rem);
  text-align: center;
}
.hero__inner { max-width: 940px; margin-inline: auto; }
.hero__logo { margin: 0 auto clamp(1.1rem, 2.6vw, 1.75rem); width: clamp(180px, 24vw, 270px); }
.hero h1 { margin: 0 0 0.9rem; }
.hero__lead {
  max-width: 56ch; margin: 0 auto 1.9rem;
  font-size: var(--step-1); line-height: 1.55; color: var(--oasis-navy);
}
.hero__script {
  font-family: var(--font-script); color: var(--oasis-teal);
  font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1; display: block; margin-bottom: 0.15rem;
  text-transform: none; letter-spacing: 0;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.hero__ctas .btn { flex: 1 1 auto; min-width: 15rem; max-width: 20rem; }
.hero__meta {
  margin: 1.75rem 0 0; font-size: var(--step--1); color: var(--oasis-muted);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__meta svg { width: 15px; height: 15px; color: var(--oasis-gold); flex: none; }

/* -------------------------------------------------------------- page header */
.pagehead {
  background: linear-gradient(178deg, var(--oasis-cream) 0%, rgba(245, 217, 185, 0.55) 100%);
  padding: clamp(2.25rem, 5vw, 3.75rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  text-align: center; border-bottom: 1px solid var(--oasis-line);
}
.pagehead h1 { margin: 0.5rem 0 0.85rem; }
.pagehead p { max-width: 58ch; margin: 0 auto; color: var(--oasis-navy); }

/* ---------------------------------------------------------------- structure */
.section__head { text-align: center; max-width: 62ch; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.section__head h2 { margin: 0.55rem 0 0.75rem; }
.section__head p:not(.eyebrow) { margin: 0; color: var(--oasis-muted); }
.section--tight { padding-top: clamp(2rem, 4vw, 3rem); }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card--link { text-decoration: none; color: inherit; display: block; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card--link:hover { transform: translateY(-3px); border-color: var(--oasis-gold); box-shadow: 0 14px 38px rgba(9,64,69,.14); }

/* icons */
.icon-badge {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: rgba(39, 189, 206, 0.12); color: var(--oasis-teal);
}
.icon-badge svg { width: 26px; height: 26px; }

/* service card */
.service-card h3 { margin: 0 0 0.5rem; font-size: var(--step-0); }
.service-card p { margin: 0 0 1.1rem; color: var(--oasis-muted); font-size: var(--step--1); }
.service-card .price {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--oasis-teal);
}
.service-card .price small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--oasis-muted); }

/* checklist */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative; padding-left: 1.9rem; margin-bottom: 0.6rem; font-size: var(--step--1);
}
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 11px; height: 6px; border-left: 2px solid var(--oasis-gold);
  border-bottom: 2px solid var(--oasis-gold); transform: rotate(-45deg);
}

/* numbered steps */
.step { position: relative; padding-top: 0.4rem; }
.step__n {
  font-family: var(--font-display); font-size: var(--step-2); color: var(--oasis-gold);
  line-height: 1; display: block; margin-bottom: 0.6rem;
}
.step h3 { margin: 0 0 0.5rem; font-size: var(--step-0); }
.step p { margin: 0; color: var(--oasis-muted); font-size: var(--step--1); }

/* promise / trust strip */
.promise h3 { margin: 0 0 0.4rem; font-size: var(--step-0); }
.promise p { margin: 0; color: var(--oasis-muted); font-size: var(--step--1); }
.section--navy .promise p { color: rgba(251, 249, 243, 0.78); }

/* call to action band */
.cta-band { text-align: center; }
.cta-band h2 { margin: 0 0 0.8rem; }
.cta-band p { max-width: 52ch; margin: 0 auto 1.9rem; color: rgba(251, 249, 243, 0.82); }
.section--navy .btn--ghost { color: var(--oasis-cream); border-color: var(--oasis-gold); }
.section--navy .btn--ghost:hover { background: var(--oasis-gold); color: var(--oasis-navy); }
.cta-band .btn--primary { background: var(--oasis-gold); color: var(--oasis-navy); }
.cta-band .btn--primary:hover { background: var(--oasis-gold-soft); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.cta-actions .btn { flex: 1 1 auto; min-width: 14rem; max-width: 20rem; }

/* wave divider */
.wave { display: block; width: 100%; height: 26px; color: var(--oasis-gold); opacity: .8; }

/* ----------------------------------------------------------------- pricing */
.pricetable { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.pricetable th, .pricetable td { text-align: left; padding: 0.9rem 0.75rem; border-bottom: 1px solid var(--oasis-line); }
.pricetable th {
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--oasis-muted);
}
.pricetable td:first-child { font-weight: 600; }
.pricetable .from { color: var(--oasis-teal); font-weight: 700; white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.freq-card { text-align: center; }
.freq-card .pct {
  font-family: var(--font-display); font-size: var(--step-2); color: var(--oasis-teal);
  display: block; line-height: 1; margin-bottom: 0.5rem;
}
.freq-card h3 { margin: 0 0 0.5rem; font-size: var(--step-0); }
.freq-card p { margin: 0; font-size: var(--step--1); color: var(--oasis-muted); }

.note {
  border-left: 3px solid var(--oasis-gold); padding: 0.35rem 0 0.35rem 1.15rem;
  color: var(--oasis-muted); font-size: var(--step--1); max-width: 66ch;
}

/* --------------------------------------------------------------- area lists */
.arealist { columns: 2; column-gap: 1.5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
@media (min-width: 720px) { .arealist { columns: 3; } }
.arealist li {
  break-inside: avoid; padding: 0.3rem 0 0.3rem 1.35rem; position: relative; font-size: var(--step--1);
}
.arealist li::before {
  content: ''; position: absolute; left: 0; top: 0.78em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--oasis-sea);
}
.area-card h3 { margin: 0 0 0.35rem; font-size: var(--step-0); }
.area-card .county {
  font-size: 0.7rem; font-weight: 600; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--oasis-gold);
}
.area-card p { margin: 0.4rem 0 0; color: var(--oasis-muted); font-size: var(--step--1); }

/* ---------------------------------------------------------------------- faq */
.faq details {
  border-bottom: 1px solid var(--oasis-line); padding: 0.35rem 0;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-weight: 600; font-size: var(--step-0); color: var(--oasis-navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0.4rem; top: 1.55rem;
  width: 9px; height: 9px; border-right: 2px solid var(--oasis-gold);
  border-bottom: 2px solid var(--oasis-gold); transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq p { margin: 0 0 1.2rem; color: var(--oasis-muted); max-width: 70ch; }

/* ------------------------------------------------------------- testimonials */
.quote-card blockquote { margin: 0 0 1.1rem; font-size: var(--step-0); line-height: 1.6; }
.quote-card blockquote::before { content: '\201C'; font-family: var(--font-display); color: var(--oasis-gold); font-size: 2.4rem; line-height: 0; vertical-align: -0.35em; margin-right: .2rem; }
.quote-card cite {
  font-style: normal; font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--oasis-teal);
}
.quote-card cite span { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--oasis-muted); }

/* --------------------------------------------------------------------- form */
.form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: 0.45rem; }
.field > label, .fieldset > legend {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--oasis-navy);
}
.field .hint { font-size: var(--step--1); color: var(--oasis-muted); }
.req { color: var(--oasis-gold); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font-family: var(--font-body); font-size: var(--step-0); color: var(--oasis-navy);
  background: var(--oasis-white); border: 1.5px solid var(--oasis-line);
  border-radius: var(--radius); padding: 0.85rem 1rem; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23094045' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px;
  padding-right: 2.6rem;
}
textarea { min-height: 7.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--oasis-teal); box-shadow: 0 0 0 3px rgba(39, 189, 206, 0.22); outline: none;
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #C2553F; }
.error { color: #A8402C; font-size: var(--step--1); min-height: 0; }

.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.fieldset > legend { padding: 0; margin-bottom: 0.15rem; }

/* selectable tiles used for service and frequency */
.tiles { display: grid; gap: 0.65rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { position: relative; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile span {
  display: block; cursor: pointer; height: 100%;
  border: 1.5px solid var(--oasis-line); border-radius: var(--radius);
  background: var(--oasis-white); padding: 0.9rem 1rem;
  font-size: var(--step--1); font-weight: 600; line-height: 1.4;
  transition: border-color .15s ease, background .15s ease;
}
.tile span small { display: block; font-weight: 400; color: var(--oasis-muted); margin-top: 0.2rem; }
.tile input:checked + span { border-color: var(--oasis-teal); background: rgba(39, 189, 206, 0.09); }
.tile input:focus-visible + span { outline: 3px solid var(--oasis-sea); outline-offset: 2px; }

/* checkbox rows */
.checkrow { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--step--1); cursor: pointer; }
.checkrow input { width: 20px; height: 20px; margin: 0.15rem 0 0; accent-color: var(--oasis-teal); flex: none; }

/* the running estimate */
.estimate {
  position: sticky; top: 5.5rem;
  background: var(--oasis-navy); color: var(--oasis-cream);
  border-radius: var(--radius); padding: 1.6rem;
}
.estimate h2 { color: var(--oasis-cream); font-size: var(--step-0); margin: 0 0 0.9rem; }
.estimate__range {
  font-family: var(--font-display); font-size: var(--step-2); color: var(--oasis-cream);
  line-height: 1.1; letter-spacing: 0.04em;
}
.estimate__unit { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--oasis-gold); display: block; margin-top: 0.35rem; }
.estimate__lines { list-style: none; margin: 1.2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid rgba(251,249,243,.2); font-size: var(--step--1); }
.estimate__lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.28rem 0; color: rgba(251,249,243,.8); }
.estimate__lines li b { font-weight: 600; color: var(--oasis-cream); text-align: right; }
.estimate__note { font-size: 0.78rem; line-height: 1.55; color: rgba(251,249,243,.7); margin: 1.2rem 0 0; }
.estimate__empty { font-size: var(--step--1); color: rgba(251,249,243,.75); margin: 0; }

.quote-layout { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .quote-layout { grid-template-columns: 1.55fr 1fr; } }

/* On a phone the estimate rides above the form and pins under the header,
   so the range is in view the whole time they are answering. The caveat
   moves into the form itself, where there is room to read it. */
.estimate-note { display: none; }
@media (max-width: 899px) {
  .estimate {
    order: -1; top: var(--topbar-h, 4.75rem); z-index: 90;
    padding: 0.85rem 1.15rem 1rem;
    box-shadow: 0 10px 26px rgba(9, 64, 69, 0.18);
  }
  .estimate h2 { margin: 0 0 0.3rem; font-size: 0.7rem; letter-spacing: var(--tracking-caps); }
  .estimate__range { margin: 0; font-size: var(--step-1); }
  .estimate__unit { margin-top: 0.1rem; }
  .estimate__lines, .estimate__note { display: none; }
  .estimate__empty { margin: 0; }
  .estimate-note { display: block; }
  /* keep a focused field clear of the header and the pinned estimate */
  .form .field, .form .fieldset { scroll-margin-top: calc(var(--topbar-h, 4.75rem) + 8rem); }
}

.form-status { border-radius: var(--radius); padding: 1rem 1.25rem; font-size: var(--step--1); }
.form-status--err { background: rgba(194, 85, 63, .1); border: 1px solid rgba(194, 85, 63, .4); color: #8E3524; }
.form-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.form-actions .btn { border: 0; cursor: pointer; font-family: var(--font-body); }
.form-actions .btn[disabled] { opacity: .6; cursor: progress; }

/* contact tiles */
.contact-tile { display: block; text-decoration: none; color: inherit; text-align: center; }
.contact-tile .icon-badge { margin-inline: auto; }
.contact-tile h3 { margin: 0 0 0.35rem; font-size: var(--step-0); }
.contact-tile p { margin: 0; color: var(--oasis-muted); font-size: var(--step--1); }
.contact-tile strong { display: block; margin-top: 0.5rem; color: var(--oasis-teal); font-size: var(--step-0); }

/* about */
.about-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 860px) { .about-layout { grid-template-columns: 0.85fr 1.15fr; } }
.about-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--oasis-shadow); background: var(--oasis-sand); }
.about-photo img { display: block; width: 100%; height: auto; }
.about-body p { max-width: 66ch; }

/* ------------------------------------------------------------------ footer */
.footer { background: var(--oasis-navy); color: rgba(251, 249, 243, 0.82); padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 2rem; }
.footer a { color: rgba(251, 249, 243, 0.82); text-decoration: none; }
.footer a:hover { color: var(--oasis-gold); }
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer h2 {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--oasis-gold); margin: 0 0 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
/* Padding rather than margin between items: the padded box is the tap target,
   so a thumb on a phone hits a 26px row instead of a 15px line of text. */
.footer li { margin-bottom: 0; }
.footer li a { display: inline-block; padding: 0.35rem 0; }
.footer__brand img { width: 116px; margin-bottom: 1rem; }
.footer__brand p { margin: 0 0 0.5rem; font-size: var(--step--1); }
.footer__tag { color: var(--oasis-gold); font-size: 0.72rem; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.footer__legal {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(251, 249, 243, 0.16);
  font-size: 0.76rem; color: rgba(251, 249, 243, 0.6);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}

/* ------------------------------------------------------- sticky mobile bar */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--oasis-navy);
  border-top: 1px solid rgba(200, 156, 83, 0.45);
  padding-bottom: env(safe-area-inset-bottom);
}
.stickybar--two { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .stickybar { display: none; } }
.stickybar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.22rem; padding: 0.7rem 0.35rem; text-decoration: none;
  color: var(--oasis-cream); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; min-height: 58px;
}
.stickybar a + a { border-left: 1px solid rgba(251, 249, 243, 0.16); }
.stickybar a svg { width: 19px; height: 19px; color: var(--oasis-gold); }
.stickybar a.is-primary { background: var(--oasis-gold); color: var(--oasis-navy); }
.stickybar a.is-primary svg { color: var(--oasis-navy); }

/* ------------------------------------------------------------------ utility */
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.lead { font-size: var(--step-1); line-height: 1.55; }
.muted { color: var(--oasis-muted); }
.section--sand .card { background: var(--oasis-white); }
.section--navy .card { background: rgba(251, 249, 243, 0.06); border-color: rgba(251, 249, 243, 0.18); box-shadow: none; }
.section--navy .card h3 { color: var(--oasis-cream); }

/* --------------------------------------------------------------- add-ons */
.addon-group + .addon-group { margin-top: 1.6rem; }
.addon-group__name {
  font-size: 0.7rem; font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--oasis-gold); margin: 0 0 0.75rem;
}
.addon-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .addon-grid { grid-template-columns: repeat(2, 1fr); } }

.checkrow.addon {
  align-items: flex-start; gap: 0.65rem;
  border: 1.5px solid var(--oasis-line); border-radius: var(--radius);
  background: var(--oasis-white); padding: 0.7rem 0.85rem;
  transition: border-color .15s ease, background .15s ease;
}
.checkrow.addon:hover { border-color: var(--oasis-gold); }
.checkrow.addon:has(input:checked) {
  border-color: var(--oasis-teal); background: rgba(39, 189, 206, 0.08);
}
.addon__body { display: block; width: 100%; }
.addon__label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.75rem; font-weight: 600; line-height: 1.35;
}
.addon__label b { color: var(--oasis-teal); font-weight: 700; white-space: nowrap; }
.addon__body small {
  display: block; margin-top: 0.15rem; color: var(--oasis-muted);
  font-size: 0.78rem; line-height: 1.4;
}

/* add-on price list on the services page */
.pricelist { list-style: none; margin: 0; padding: 0; }
.pricelist li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--oasis-line); font-size: var(--step--1);
}
.pricelist li:last-child { border-bottom: 0; }
.pricelist small { display: block; color: var(--oasis-muted); font-size: 0.78rem; margin-top: 0.1rem; }
.pricelist b { color: var(--oasis-teal); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ the wizard */
.wiz__bar { display: flex; gap: 4px; margin-bottom: 1rem; }
.wiz__seg {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--oasis-line); transition: background .25s ease;
}
.wiz__seg.is-done { background: var(--oasis-teal); }
.wiz__count {
  margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--oasis-gold);
}
.wiz__count .muted { text-transform: none; letter-spacing: 0.01em; font-weight: 400; }
.wiz__title { margin: 0 0 1rem; font-size: var(--step-1); }
.step-lead { color: var(--oasis-muted); margin: 0 0 1.4rem; max-width: 60ch; }
.wiz__body { display: grid; gap: 1.3rem; }
.wiz__nav {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--oasis-line);
}
.wiz__nav .btn { border: 0; cursor: pointer; font-family: var(--font-body); }
.wiz__nav .btn--ghost { border: 1.5px solid var(--oasis-gold); }
.wiz__nav .btn[disabled] { opacity: .6; cursor: progress; }

/* day picker */
.daypick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.daypick__day { position: relative; }
.daypick__day input { position: absolute; opacity: 0; pointer-events: none; }
.daypick__day span {
  display: block; cursor: pointer; min-width: 3.4rem; text-align: center;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--oasis-line); background: var(--oasis-white);
  font-size: var(--step--1); font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.daypick__day input:checked + span {
  border-color: var(--oasis-teal); background: rgba(39, 189, 206, 0.12);
}
.daypick__day input:focus-visible + span { outline: 3px solid var(--oasis-sea); outline-offset: 2px; }

/* the finished screen */
.wiz--done { text-align: center; }
.wiz--done .step-lead { margin-inline: auto; }
.wiz__tick {
  display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 1.25rem;
  border-radius: 50%; background: rgba(39, 189, 206, 0.14); color: var(--oasis-teal);
}
.wiz__tick svg { width: 30px; height: 30px; }
.followup {
  margin-top: 2rem; padding: 1.5rem; border-radius: var(--radius);
  background: var(--oasis-sand);
}
.followup .eyebrow { margin: 0 0 1rem; }
.followup__row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.followup__row .btn { border: 0; cursor: pointer; font-family: var(--font-body); flex: 1 1 auto; min-width: 13rem; }
.followup__row .btn--ghost { border: 1.5px solid var(--oasis-gold); }
.followup .hint { margin: 1rem 0 0; }
.followup__done { margin: 0; font-weight: 600; color: var(--oasis-teal); }

/* =========================================================================
   Density pass
   The site was first laid out to be read slowly. It is a lead tool, so
   everything now sits closer together and there is less scrolling between a
   visitor and a button. These override the defaults in tokens.css, which is
   the brand file and stays untouched.
   ========================================================================= */
.section { padding: clamp(2.25rem, 4.5vw, 4rem) var(--gutter); }
.section--tight { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.section__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.grid { gap: clamp(0.75rem, 1.8vw, 1.15rem); }
.card { padding: clamp(1.1rem, 2.2vw, 1.5rem); }
.mt-lg { margin-top: clamp(1.4rem, 2.5vw, 2rem); }

.pagehead { padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--gutter) clamp(1.5rem, 3vw, 2.25rem); }
.hero { padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) clamp(2.25rem, 4.5vw, 3.5rem); }
.hero__logo { width: clamp(160px, 20vw, 230px); margin-bottom: clamp(0.9rem, 2vw, 1.35rem); }
.hero__lead { max-width: 54ch; margin-bottom: 1.5rem; font-size: var(--step-0); }
.hero__meta { margin-top: 1.3rem; font-size: 0.78rem; }

.service-card p { margin-bottom: 0.85rem; }
.service-card .price {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--oasis-teal); font-weight: 700;
}
.step__n { font-size: var(--step-1); margin-bottom: 0.35rem; }
.step p, .promise p { font-size: 0.86rem; line-height: 1.55; }
.checklist li { margin-bottom: 0.45rem; }
.icon-badge { width: 42px; height: 42px; margin-bottom: 0.8rem; }
.icon-badge svg { width: 21px; height: 21px; }
.faq summary { padding: 0.85rem 2.5rem 0.85rem 0; font-size: var(--step--1); }
.faq summary::after { top: 1.25rem; }
.faq details[open] summary::after { top: 1.45rem; }
.faq p { margin-bottom: 0.9rem; font-size: var(--step--1); }
.freq-card h3 { font-size: var(--step--1); }
.freq-card p { font-size: 0.82rem; }
.cta-band p { margin-bottom: 1.4rem; }
.arealist li { padding-top: 0.2rem; padding-bottom: 0.2rem; }

/* the wizard, tightened the same way */
.wiz__body { gap: 1rem; }
.wiz__nav { margin-top: 1.5rem; padding-top: 1.15rem; }
.step-lead { margin-bottom: 1.1rem; font-size: var(--step--1); }
.tile span { padding: 0.75rem 0.9rem; }
.checkrow.addon { padding: 0.6rem 0.75rem; }
.addon-group + .addon-group { margin-top: 1.15rem; }


/* ================================================================= footer
   Was five headings and twenty links. It is one band now: who we are, where
   to go, how to reach us. A footer on a lead site catches someone who
   scrolled past the buttons — it does not need a sitemap.
   ========================================================================= */
.footer { padding: clamp(1.75rem, 3.5vw, 2.5rem) var(--gutter) 1.25rem; }
.footer__top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
}
.footer__brand {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; flex: none;
}
.footer__brand img { width: 46px; height: auto; }
.footer__tag {
  color: var(--oasis-gold); font-size: 0.66rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; max-width: 8rem; line-height: 1.4;
}
.footer__links {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; flex: 1 1 16rem;
}
.footer__links a {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.35rem 0;
}
.footer__reach {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  margin-left: auto; font-size: var(--step--1);
}
.footer__reach .btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 1.6em; font-size: 0.68rem;
}
.footer__phone { font-weight: 700; color: var(--oasis-cream); }
.footer__legal {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid rgba(251, 249, 243, 0.14);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: space-between;
  font-size: 0.72rem; color: rgba(251, 249, 243, 0.55);
}
@media (max-width: 720px) {
  .footer__reach { margin-left: 0; width: 100%; }
  .footer__links { order: 3; width: 100%; }
}

/* ------------------------------------------------ the finished screen
   Call now sits above everything else: someone who has just answered six
   questions is the warmest they will ever be, and a phone call closes. */
.callnow {
  margin: 1.5rem 0 0; padding: 1.25rem;
  background: var(--oasis-navy); border-radius: var(--radius);
}
.callnow__k {
  margin: 0 0 0.85rem; color: var(--oasis-gold);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.callnow__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; background: var(--oasis-gold); color: var(--oasis-navy);
  font-size: var(--step--1); padding: 0.95em 1.5em;
}
.callnow__btn:hover { background: var(--oasis-gold-soft); }
.callnow__btn svg { width: 19px; height: 19px; flex: none; }
.callnow__alt {
  display: block; margin-top: 0.6rem; width: 100%;
  color: var(--oasis-cream); border-color: rgba(251, 249, 243, 0.35);
}
.callnow__alt:hover { background: rgba(251, 249, 243, 0.1); }
.wiz--done .followup { background: transparent; padding: 1.25rem 0 0; }
.wiz--done .followup .btn { flex: 1 1 auto; }


/* ==================================================== colour and size pass
   Every text/background pair on the site was measured against WCAG AA. Forty
   nine failed, and they came down to four causes rather than forty nine
   decisions. tokens.css is the brand file and stays untouched; the corrections
   live here.
   ========================================================================= */

/* 1. Muted body text sat at 66% navy, which reads 4.26 on white, 4.16 on cream
      and 3.74 on sand — under the line on every surface it is used on. 74% is
      the lowest value that clears 4.5 on all of them (sand is the tight one at
      4.54) and it is a change you have to look for to see. */
:root { --oasis-muted: rgba(9, 64, 69, 0.74); }

/* 2. Gold is a 2.52 on white and a 1.86 on sand. It was never a text colour —
      the brand sheet calls it "rules, accents, hover" — so it goes back to
      being one. Small caps labels take teal on light ground, where they read
      between 5.97 and 8.09, and gold on navy, where it is the strongest thing
      on the page at 4.55. Gold keeps every rule, tick, icon and border. */
.eyebrow,
.wiz__count,
.addon-group__name,
.area-card .county { color: var(--oasis-teal); }

.section--navy .eyebrow,
.section--navy .addon-group__name,
.section--navy .area-card .county { color: var(--oasis-gold); }

/* The step numerals are display-size but still only made 1.86 on sand. */
.step__n { color: var(--oasis-teal); }
.section--navy .step__n { color: var(--oasis-gold); }

/* 3. The footer hours were cream at 55% on navy — 4.44, just under. */
.footer__legal, .footer__legal * { color: rgba(251, 249, 243, 0.68); }

/* ------------------------------------------------------------------ sizing
   Leading of 1.65 is right for an essay and loose for a page someone is
   scanning on a phone with one thumb. Paragraphs come in to 1.55, and the
   supporting copy inside cards and lists a little tighter still. */
body { line-height: 1.55; }
p { line-height: 1.55; }
.muted, .step-lead, .service-card p, .step p, .promise p,
.area-card p, .faq p, .contact-tile p, .freq-card p { line-height: 1.5; }

.checklist li { margin-bottom: 0.35rem; line-height: 1.45; font-size: var(--step--1); }

/* Cinzel at display size drops single words onto their own line — the hero
   was reading "FROM EVERYDAY / MESS". Let the browser even the lines out. */
h1, h2, h3, .wiz__title { text-wrap: balance; }
.hero__lead, .pagehead p, .section__head p { text-wrap: pretty; }

/* The service cards each carried a seven-line checklist inline, which is what
   made that page six and a half phone screens. The list is now behind a
   summary on narrow screens — the name, the description and the button stay
   in view, and the detail is one tap away. site.js opens them on wide ones,
   where the two-column layout has the room. */
.incl > summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--oasis-teal);
  padding: 0.6rem 1.75rem 0.6rem 0; position: relative;
  border-top: 1px solid var(--oasis-line);
}
.incl > summary::-webkit-details-marker { display: none; }
.incl > summary::after {
  content: ''; position: absolute; right: 0.35rem; top: 1.05rem;
  width: 8px; height: 8px; border-right: 2px solid var(--oasis-gold);
  border-bottom: 2px solid var(--oasis-gold); transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.incl[open] > summary::after { transform: rotate(-135deg); top: 1.25rem; }
.incl[open] > summary { border-bottom: 0; }
.incl .checklist { margin-top: 0.2rem; }

/* Open and unclickable from the width where both columns fit. */
@media (min-width: 760px) {
  .incl > summary { border-top: 0; padding-top: 0; pointer-events: none; }
  .incl > summary::after { display: none; }
}

/* The add-ons listing runs the note on from the label, so it needs the inline
   treatment rather than the stacked one, and it pairs up once there is width. */
.pricelist small { display: inline; margin-top: 0; font-size: 0.8rem; }
.pricelist li { line-height: 1.45; }
@media (min-width: 560px) {
  .pricelist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1rem, 3vw, 2rem); }
}

/* Rewriting the footer into a band shrank its links to 30px and its phone and
   email lines to 20px — under a thumb on a phone. They keep the compact look
   and get a 44px target, which is the size a finger actually is. */
.footer__links a,
.footer__reach a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: 0;
}
.footer__links { gap: 0 1.1rem; }
.footer__reach { gap: 0 1rem; }