/* ==========================================================================
   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: rgba(9, 64, 69, 0.82); font-size: var(--step--1); }
.section--navy .step p { color: rgba(251, 249, 243, 0.92); }

/* promise / trust strip
   These are the three reasons to trust her with a key, and they were set
   smaller and lighter than everything around them, so on a dark band they
   read as a footnote. A gold rule gives the group an edge on sand and on
   navy alike, without a card that would fight the ones above it. */
.promise {
  padding-left: clamp(0.9rem, 2vw, 1.25rem);
  border-left: 3px solid var(--oasis-gold);
}
.promise h3 { margin: 0 0 0.4rem; font-size: var(--step-0); }
.promise p { margin: 0; color: rgba(9, 64, 69, 0.82); font-size: var(--step--1); }
.section--navy .promise { border-left-color: var(--oasis-gold); }
.section--navy .promise p { color: rgba(251, 249, 243, 0.92); }

/* 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); }

/* ------------------------------------------------------- find your town */
.townfind {
  background: var(--oasis-white); border: 1px solid rgba(2, 89, 95, 0.14);
  border-radius: var(--radius); padding: clamp(1rem, 2.2vw, 1.35rem);
  box-shadow: 0 1px 2px rgba(10, 40, 45, 0.05);
}
.townfind label {
  display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--oasis-teal); margin-bottom: 0.5rem;
}
.townfind input[type="search"] {
  width: 100%; font: inherit; font-size: var(--step-0); color: var(--oasis-ink);
  background: var(--oasis-cream); border: 1px solid rgba(2, 89, 95, 0.22);
  border-radius: calc(var(--radius) * 0.6); padding: 0.7rem 0.9rem;
  min-height: 48px; -webkit-appearance: none; appearance: none;
}
.townfind input[type="search"]::placeholder { color: var(--oasis-muted); }
.townfind input[type="search"]:focus-visible {
  outline: 2px solid var(--oasis-gold); outline-offset: 2px;
  border-color: var(--oasis-teal); background: var(--oasis-white);
}
.townfind__said { margin: 0.7rem 0 0; font-size: var(--step--1); line-height: 1.5; }
.townfind__said:empty { display: none; }
.townfind__said.is-yes { color: var(--oasis-teal); font-weight: 600; }
.townfind__said.is-no { color: var(--oasis-ink); }

/* While filtering, the surviving names are the point — make them readable
   as a short list rather than three sparse columns. */
.is-filtered .arealist { columns: 1; }
.arealist li.is-hit { font-weight: 600; color: var(--oasis-teal); }
.arealist li.is-hit::before { background: var(--oasis-gold); }

/* ---------------------------------------------------------------------- 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; }

/* With no photo set, the left column is an identity card rather than the
   logo for a second time. */
.about-card {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--oasis-white); border: 1px solid rgba(2, 89, 95, 0.12);
  box-shadow: var(--oasis-shadow);
}
.about-card__mark {
  display: block; width: 100%; height: auto; max-width: 220px;
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
}
.about-card figcaption { padding: clamp(1rem, 2.5vw, 1.5rem); text-align: center; }
.about-card__name {
  margin: 0; font-family: var(--font-display); font-size: var(--step-1);
  color: var(--oasis-teal); line-height: 1.2;
}
.about-card__role {
  margin: 0.3rem 0 0; font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  /* Gold as a word on a white card is 2.5:1 — the readable gold, not the
     one the rules and borders use. */
  color: var(--oasis-gold-ink);
}
.about-card__facts {
  list-style: none; margin: 1rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid rgba(2, 89, 95, 0.12);
  display: grid; gap: 0.45rem; font-size: var(--step--1); color: var(--oasis-ink);
}
.about-card__acts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.1rem;
}
/* Two buttons side by side in a narrow column, so they are tighter than a
   page CTA while staying a comfortable tap target. */
.about-card__acts .btn { padding: 0.75em 1.5em; min-height: 44px; }

/* ------------------------------------------------------------------ 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 {
  /* Six of these sit side by side on a phone, so each one needs the same
     44px floor every other control on the form has. */
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; min-width: 3.4rem; min-height: 44px; text-align: center;
  padding: 0.5rem 0.85rem; 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; }

/* Grid rows stretch their cards to the tallest one, so a two-line title in
   one card used to leave its neighbour's "Get a quote" floating mid-card.
   Column layout with the link pushed down lines every CTA up across the row. */
.service-card { display: flex; flex-direction: column; }
.service-card p { margin-bottom: 0.85rem; }
.service-card .price { margin-top: auto; }
.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; }
/* was 0.86rem — smaller than the body scale's own floor, on copy that is
   doing real work. */
.step p, .promise p { font-size: var(--step--1); 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); }
/* A bare list beside a card is a grid item like any other, so it stretched
   to the card's height and carried 75px of air under its last line. */
.grid > .checklist { align-self: start; }

/* 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; }

/* =========================================================================
   Motion & engagement
   A calm, coastal motion layer: content settles in as it scrolls into view,
   the header lifts once you leave the top, and the things you can click give
   a little feedback. Everything here is an enhancement — with JavaScript off
   nothing is hidden, and it is all switched off for anyone who has asked for
   reduced motion.
   ========================================================================= */

/* The header is meant to stick (see .topbar position: sticky), but it is
   rendered inside a wrapper div that is only as tall as the header itself,
   which pins sticky in place and lets it scroll away. Collapsing that wrapper
   with display:contents puts the header back in the body's flow so it sticks
   for real — and so the elevated-on-scroll state below actually shows. */
[data-render="header"] { display: contents; }

/* Scroll-reveal. The .reveal class is only ever added by JS, so a no-JS or
   pre-hydration page shows everything at full opacity. */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(.99);
  transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
              transform .65s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.reveal.reveal-in { opacity: 1; transform: none; }

/* Header settles into an elevated state once the page is scrolled. */
.topbar { transition: box-shadow .3s ease, background .3s ease; }
.topbar.is-scrolled {
  background: rgba(251, 249, 243, 0.98);
  box-shadow: 0 6px 26px rgba(9, 64, 69, 0.09);
}

/* Button feedback — a small lift on primary actions, and a press. */
.btn {
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(2, 89, 95, 0.24); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Card micro-interactions: a clearer lift, plus the icon badge and the
   "get a quote" cue reacting when the whole card is hovered. */
.card--link:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(9, 64, 69, 0.16); }
.card--link .icon-badge { transition: transform .28s cubic-bezier(.22,.61,.36,1), background .28s ease; }
.card--link:hover .icon-badge { transform: scale(1.1) rotate(-4deg); background: rgba(39, 189, 206, 0.22); }
.service-card .price { display: inline-block; transition: transform .2s ease, color .18s ease; }
.card--link:hover .service-card .price,
.card--link.service-card:hover .price { transform: translateX(5px); }

/* Sticky mobile bar: the primary action gets a gentle, one-off attention pulse
   shortly after load so it reads as the main path on a phone. */
@media (prefers-reduced-motion: no-preference) {
  .stickybar a.is-primary svg { animation: oasis-nudge 3.2s ease-in-out 1.5s 2; }
}
@keyframes oasis-nudge {
  0%, 100% { transform: translateY(0); }
  8%, 24% { transform: translateY(-3px); }
  16% { transform: translateY(0); }
}

/* Hero logo drifts like it is on calm water, and eases in on first paint. */
@media (prefers-reduced-motion: no-preference) {
  .hero__logo {
    animation: oasis-logo-in .9s cubic-bezier(.22,.61,.36,1) both,
               oasis-float 7s ease-in-out 1s infinite;
  }
}
@keyframes oasis-logo-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes oasis-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Honour a reduced-motion preference everywhere in this layer. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__logo { animation: none; }
  .stickybar a.is-primary svg { animation: none; }
}

/* --------------------------------------------------------- proposal page */
.proposal { padding: clamp(1.25rem, 4vw, 2rem); }
.proposal__head { text-align: center; margin-bottom: 1.5rem; }
.proposal__logo { width: 110px; height: auto; margin: 0 auto 1rem; display: block; }
.proposal__table-wrap { overflow-x: auto; margin: 1rem 0; }
.proposal__table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.proposal__table th {
  text-align: left; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--oasis-gold); padding: 0 0 0.6rem; border-bottom: 1px solid var(--oasis-line);
}
.proposal__table td { padding: 0.75rem 0.5rem 0.75rem 0; border-bottom: 1px solid var(--oasis-line); vertical-align: top; }
.proposal__qty { text-align: center; width: 3rem; color: var(--oasis-muted); }
.proposal__amt { text-align: right; white-space: nowrap; font-weight: 700; width: 6rem; }
.proposal__totals { margin-top: 0.5rem; }
.proposal__totals div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.35rem 0; font-size: var(--step--1);
}
.proposal__total {
  margin-top: 0.35rem; padding-top: 0.65rem !important;
  border-top: 2px solid var(--oasis-teal); font-size: var(--step-0) !important;
}
.proposal__total strong { color: var(--oasis-teal); font-family: var(--font-head); font-size: 1.15em; }
.proposal__valid { font-size: var(--step--1); margin: 0.75rem 0 0; }
.proposal__note {
  margin-top: 1.25rem; padding: 1rem; background: var(--oasis-cream);
  border-radius: var(--radius); border: 1px solid var(--oasis-line);
}
.proposal__note p { margin: 0.35rem 0 0; line-height: 1.55; }
.proposal__terms { font-size: 0.78rem; margin: 1rem 0 0; line-height: 1.5; }
.proposal__actions {
  display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.5rem;
}
.proposal__fine { font-size: 0.78rem; margin: 0.75rem 0 0; line-height: 1.45; }
.proposal__done {
  margin-top: 1.25rem; padding: 1rem; border-radius: var(--radius);
  background: rgba(9, 64, 69, 0.06); font-size: var(--step--1); line-height: 1.5;
}
.proposal__done--ok { background: rgba(31, 98, 54, 0.1); color: #1F6236; }

.proposal__addons {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--oasis-line);
}
.proposal__addons-lead { margin: 0.35rem 0 0.85rem; font-size: var(--step--1); line-height: 1.45; }
.proposal__addon-group { margin-bottom: 0.85rem; }
.proposal__addon-group-label {
  margin: 0 0 0.4rem; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--oasis-gold);
}
.proposal__addon {
  display: flex; gap: 0.65rem; align-items: flex-start;
  padding: 0.65rem 0.75rem; margin: 0 0 0.4rem;
  border: 1px solid var(--oasis-line); border-radius: var(--radius);
  background: var(--oasis-cream); cursor: pointer;
}
.proposal__addon input { margin-top: 0.2rem; flex: 0 0 auto; }
.proposal__addon-text { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--step--1); line-height: 1.4; }
.proposal__addon-text strong { color: var(--oasis-ink); font-weight: 600; }

.proposal__decline {
  margin-top: 1.25rem; padding: 1rem;
  border: 1px solid var(--oasis-line); border-radius: var(--radius);
  background: var(--oasis-cream);
}
.proposal__decline-label {
  display: block; font-size: var(--step--1); font-weight: 600;
  color: var(--oasis-ink); margin-bottom: 0.45rem;
}
/* Who reads this is the question anyone hesitates over before typing, so
   the answer sits under the question rather than in the label with it. */
.proposal__decline-label span {
  display: block; font-weight: 400; color: var(--oasis-muted);
  font-size: 0.8rem; margin-top: 0.15rem;
}
.proposal__decline-input {
  width: 100%; box-sizing: border-box; min-height: 4.5rem;
  padding: 0.65rem 0.75rem; border: 1px solid var(--oasis-line);
  border-radius: calc(var(--radius) - 2px); font: inherit; resize: vertical;
  background: var(--oasis-white); color: var(--oasis-ink);
}
.proposal__decline-acts {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;
}


/* ============================================================== typography
   One tracking value was doing every job. 0.16em is right for a 0.7rem
   eyebrow, where the letters need air to read as small caps, and far too
   wide for a 3.2rem headline, where it costs a phone a whole extra line.
   Tracking now loosens as type gets smaller and tightens as it grows, which
   is how the Cinzel was drawn to be set. The eyebrows keep the wide setting
   that makes them read as labels. */
h1 { letter-spacing: 0.045em; }
h2 { letter-spacing: 0.07em; }
h3 { letter-spacing: 0.1em; }

/* Big display type also wants a little less air between the lines. */
h1 { line-height: 1.14; }
h2 { line-height: 1.18; }


/* ------------------------------------------------- the quote a customer sees
   These two labels were still gold on white — 2.52:1 — and the site-wide audit
   never caught them because this page builds itself from the API after load,
   so there was nothing on the page to measure. Same correction as everywhere
   else: gold is not a text colour on a light ground. */
.proposal__table th,
.proposal__addon-group-label { color: var(--oasis-teal); }

/* Accept and decline were the same weight, on the one screen where the whole
   point is to accept. Decline stays entirely available — same target size,
   same focus ring — but stops competing for the eye. */
.proposal__decline,
.proposal__actions .btn--ghost {
  border-color: var(--oasis-line);
  color: var(--oasis-muted);
  font-weight: 500;
}
.proposal__decline:hover,
.proposal__actions .btn--ghost:hover {
  border-color: var(--oasis-gold);
  background: transparent;
  color: var(--oasis-navy);
}

/* A quote page is not a place to go browsing the services menu. The footer
   keeps who this is and how to reach her, and drops the site navigation. */
[data-page="proposal"] .footer__links { display: none; }

/* A note above the quote buttons when the quote being edited is already out. */
.quote-revise-note {
  margin: 0.6rem 0 0; font-size: var(--step--1); line-height: 1.45;
  padding: 0.55rem 0.75rem; border-radius: 10px;
  background: rgba(39, 189, 206, 0.10);
  border: 1px solid rgba(39, 189, 206, 0.28);
}

/* The keep-a-copy link, under whatever the quote is currently asking of them. */
.proposal__download { margin: 1.1rem 0 0; text-align: center; }

/* ------------------------------------------------------------ type-ahead
   Fifty-seven cities in a dropdown is a scroll, not a choice. Three letters
   and a tap instead — and it stays a text field, so an address we have not
   listed can still be typed. */
.combo { position: relative; }
.combo__list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin: 0.25rem 0 0; padding: 0.25rem; list-style: none;
  background: var(--oasis-white);
  border: 1px solid var(--oasis-line); border-radius: var(--radius);
  box-shadow: var(--oasis-shadow);
  max-height: 15rem; overflow-y: auto;
}
.combo__list li {
  padding: 0.6rem 0.75rem; border-radius: 8px; cursor: pointer;
  font-size: var(--step--1); line-height: 1.3; min-height: 44px;
  display: flex; align-items: center;
}
.combo__list li:hover, .combo__list li.is-on {
  background: rgba(39, 189, 206, 0.14); color: var(--oasis-navy);
}

/* Bedrooms and bathrooms: a row of taps, not a dropdown over the screen. */
.field__label {
  display: block; font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.45rem;
  color: var(--oasis-navy);
}
.counts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.counts__b {
  min-width: 44px; min-height: 44px; padding: 0 0.7rem;
  border: 1.5px solid var(--oasis-line); border-radius: 10px;
  background: var(--oasis-white); color: var(--oasis-navy);
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.counts__b:hover { border-color: var(--oasis-gold); }
.counts__b.is-on { background: var(--oasis-teal); border-color: var(--oasis-teal); color: var(--oasis-cream); }
.counts__b:focus-visible { outline: 3px solid var(--oasis-sea); outline-offset: 2px; }

/* A compact button is still something a thumb has to hit. Both of these were
   under 40px: the service jump-links on /services and the header's Get a Quote
   once it appears at tablet width. */
.btn--chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 1.2em;
}
.topbar__cta { min-height: 44px; align-items: center; }
@media (min-width: 560px) { .topbar__cta { display: inline-flex; } }

/* The desktop nav links were 34px of clickable area inside a much taller
   header row. Giving them the full height costs nothing visually — the
   underline still sits under the text — and makes them comfortable to hit. */
@media (min-width: 860px) {
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* A floor for every button. On a 320px screen the wizard's Next shrank below
   40px, and a button you have to aim at is a button people mis-tap. */
.btn { min-height: 44px; }
button.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; }
.btn--block { width: 100%; }

/* Which lines repeat and which are one-offs, on the quote a customer reads. */
.proposal__cadence {
  display: inline-block; margin-top: 0.15rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--oasis-teal);
}


/* ==================================================== the quote they receive
   This is the one page where a stranger decides whether to spend money with
   Kristina, so it is allowed to be the brightest thing on the site. The sea
   blue and the sand finally do some work — as grounds, never as text, because
   neither has the contrast to carry words.
   ========================================================================= */
.proposal { padding: 0; overflow: hidden; }

.proposal__banner {
  background: linear-gradient(160deg, #02474C 0%, var(--oasis-teal) 45%, #036A72 100%);
  color: var(--oasis-cream);
  padding: clamp(1.6rem, 5vw, 2.4rem) clamp(1.25rem, 4vw, 2.25rem) clamp(1.4rem, 4vw, 2rem);
  text-align: center;
}
.proposal__logo {
  width: clamp(76px, 18vw, 104px); height: auto; border-radius: 50%;
  margin: 0 auto 0.9rem; display: block;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}
.proposal__hello {
  margin: 0 0 0.3rem; font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.9rem); letter-spacing: 0.045em;
  line-height: 1.2; color: var(--oasis-cream); text-wrap: balance;
}
.proposal__for {
  margin: 0; font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.06em; color: var(--oasis-sand);
}

/* The number they opened the email for. */
.proposal__hero {
  background: var(--oasis-sand); text-align: center;
  padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 4vw, 2.25rem);
}
.proposal__hero-k {
  margin: 0 0 0.15rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--oasis-teal);
}
.proposal__hero-n {
  margin: 0; font-family: var(--font-display); line-height: 1;
  font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); letter-spacing: 0.02em;
  color: var(--oasis-navy);
}
.proposal__hero-s {
  margin: 0.5rem auto 0; max-width: 36ch;
  font-size: var(--step--1); line-height: 1.5; color: var(--oasis-navy);
}

.proposal__h2 {
  margin: clamp(1.4rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2.25rem) 0.6rem;
  font-size: 0.78rem; letter-spacing: var(--tracking-caps); color: var(--oasis-teal);
}
/* Everything that belongs to the bill sits in the same column. The two
   asides were built after this list and never joined it, so they ran flush
   to the card edge with their rounded corners cut off by it, while the
   table they explain was inset. */
.proposal__table-wrap, .proposal__totals, .proposal__valid,
.proposal__note, .proposal__terms, .proposal__done, .proposal__download,
.asked, .later {
  margin-left: clamp(1.25rem, 4vw, 2.25rem);
  margin-right: clamp(1.25rem, 4vw, 2.25rem);
}

/* --------------------------------------------------------------- the extras
   The one place someone might spend more than they planned to, so it is made
   pleasant rather than apologetic. */
.xtras {
  margin: clamp(1.4rem, 4vw, 2rem) 0 0;
  padding: clamp(1.25rem, 4vw, 1.9rem) clamp(1.25rem, 4vw, 2.25rem);
  background: linear-gradient(180deg, rgba(39, 189, 206, 0.10), rgba(39, 189, 206, 0.03));
  border-top: 1px solid rgba(39, 189, 206, 0.3);
}
.xtras__title {
  margin: 0 0 0.4rem; font-size: var(--step-1); letter-spacing: 0.06em;
  color: var(--oasis-navy);
}
.xtras__lead { margin: 0 0 1.1rem; font-size: var(--step--1); line-height: 1.55; max-width: 52ch; }
.xtras__group + .xtras__group { margin-top: 1.1rem; }
.xtras__group-name {
  margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--oasis-teal);
}
.xtras__grid { display: grid; gap: 0.5rem; }
@media (min-width: 620px) { .xtras__grid { grid-template-columns: 1fr 1fr; } }

.xtra {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.8rem 0.9rem; min-height: 44px; cursor: pointer;
  background: var(--oasis-white); border: 1.5px solid var(--oasis-line);
  border-radius: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.xtra:hover { border-color: var(--oasis-sea); }
.xtra input { position: absolute; opacity: 0; width: 0; height: 0; }
.xtra__box {
  flex: none; width: 22px; height: 22px; margin-top: 0.1rem;
  border: 2px solid var(--oasis-line); border-radius: 6px; background: var(--oasis-white);
  position: relative; transition: background 0.15s ease, border-color 0.15s ease;
}
.xtra.is-on { border-color: var(--oasis-teal); box-shadow: 0 0 0 3px rgba(39, 189, 206, 0.16); }
.xtra.is-on .xtra__box { background: var(--oasis-teal); border-color: var(--oasis-teal); }
.xtra.is-on .xtra__box::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg);
}
.xtra input:focus-visible + .xtra__box { outline: 3px solid var(--oasis-sea); outline-offset: 2px; }
.xtra__text { display: grid; gap: 0.15rem; }
.xtra__text strong { font-size: 0.92rem; line-height: 1.3; color: var(--oasis-navy); }
.xtra__note { font-size: 0.78rem; line-height: 1.4; color: var(--oasis-muted); }
.xtras__count {
  margin: 1rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px;
  background: var(--oasis-white); border: 1px solid rgba(39, 189, 206, 0.4);
  font-size: 0.84rem; font-weight: 600; color: var(--oasis-navy);
}

/* ------------------------------------------------------------------- saying yes */
.yes { padding: clamp(1.4rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2.25rem) clamp(1.6rem, 4vw, 2.25rem); }
.yes__points { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.5rem; }
.yes__points li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--step--1); line-height: 1.45; color: var(--oasis-navy);
}
.yes__points li::before {
  content: ''; position: absolute; left: 0.15rem; top: 0.34em;
  width: 9px; height: 5px; border-left: 2.5px solid var(--oasis-teal);
  border-bottom: 2.5px solid var(--oasis-teal); transform: rotate(-45deg);
}
.yes__go {
  width: 100%; font-size: 0.92rem; padding: 1.05em 1.5em; min-height: 56px;
  box-shadow: 0 10px 26px rgba(2, 89, 95, 0.28);
}
.yes__fine {
  margin: 0.8rem 0 0; text-align: center;
  font-size: 0.82rem; line-height: 1.5; color: var(--oasis-muted);
}
.yes__no { margin: 1rem 0 0; text-align: center; }
.yes .linkish {
  background: none; border: 0; padding: 0.5rem 0.75rem; min-height: 44px;
  font-family: var(--font-body); font-size: 0.84rem; font-weight: 600;
  color: var(--oasis-muted); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.yes .linkish:hover { color: var(--oasis-navy); }

.proposal__done--ok {
  background: rgba(39, 189, 206, 0.12); border: 1px solid rgba(39, 189, 206, 0.4);
  border-radius: 14px; padding: 1.1rem 1.2rem; margin-top: 1.4rem;
}
.proposal__done-k {
  margin: 0 0 0.35rem; font-family: var(--font-display);
  font-size: var(--step-1); letter-spacing: 0.05em; color: var(--oasis-navy);
}
.proposal__done p:last-child { margin: 0; font-size: var(--step--1); line-height: 1.55; }

/* ================================================== the one she is known for
   Seven equal cards told a visitor nothing about what this business mostly
   is. House cleaning gets the room to say so, and everything else sits under
   it as a list of things you can add.
   ========================================================================= */
.feature {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 820px) {
  .feature { grid-template-columns: 1.35fr 1fr; }
}
.feature__h {
  margin: 0.4rem 0 0.6rem;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
}
.feature__lead {
  margin: 0 0 1.1rem; max-width: 52ch;
  font-size: var(--step-0); line-height: 1.55; color: var(--oasis-muted);
}
.feature__list {
  list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.45rem;
}
.feature__list li {
  position: relative; padding-left: 1.65rem;
  font-size: var(--step--1); line-height: 1.45;
}
.feature__list li::before {
  content: ''; position: absolute; left: 0.2rem; top: 0.36em;
  width: 9px; height: 5px;
  border-left: 2.5px solid var(--oasis-gold); border-bottom: 2.5px solid var(--oasis-gold);
  transform: rotate(-45deg);
}
.feature__ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }

.feature__aside { text-align: center; }
.feature__img { display: none; }
@media (min-width: 820px) {
  .feature__img { display: block; }
  .feature__note { margin-top: 0.9rem; }
}
.feature__img {
  width: clamp(180px, 22vw, 260px); height: auto; margin: 0 auto;
  border-radius: 50%; box-shadow: var(--oasis-shadow);
}
.feature__note {
  margin: 0.2rem auto 0; max-width: 34ch;
  font-size: 0.82rem; line-height: 1.5; color: var(--oasis-muted);
}

/* Offices and rentals are a line, not a section — they were already in the
   list above, and giving them a block of their own said them twice. */
.landing-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.4rem 0.75rem; margin: 0; font-size: var(--step--1);
}
.landing-links__k { font-weight: 700; color: var(--oasis-navy); }
.landing-links a {
  font-weight: 600; color: var(--oasis-teal);
  display: inline-flex; align-items: center; min-height: 44px;
}
.landing-links__sep { color: var(--oasis-muted); }

/* ---------------------------------------------------------- afterwards
   The optional offer on a quote: priced, tickable, and visibly separate
   from the amount being accepted. Sand rather than white so it reads as
   an aside, not another row of the bill. */
.later {
  /* margin-top only — the left and right insets come from the shared rule
     that puts everything belonging to the bill in one column. */
  margin-top: 1.5rem; padding: 1.1rem; border-radius: var(--radius);
  background: var(--oasis-sand); border: 1px solid rgba(10, 46, 68, 0.08);
}
.later__title {
  margin: 0 0 0.2rem; font-size: var(--step-0); color: var(--oasis-navy);
}
.later__lead {
  margin: 0 0 0.9rem; font-size: var(--step--1); line-height: 1.55;
  color: var(--oasis-muted); max-width: 52ch;
}
.later__row {
  position: relative; display: grid; gap: 0.7rem; align-items: center;
  grid-template-columns: auto 1fr auto; padding: 0.8rem 0.9rem;
  background: #fff; border: 2px solid rgba(10, 46, 68, 0.12);
  border-radius: var(--radius); cursor: pointer;
}
.later__row + .later__row { margin-top: 0.5rem; }
.later__row.is-static { cursor: default; grid-template-columns: 1fr auto; }
.later__ask { margin: 0.8rem 0 0; font-size: var(--step--1); line-height: 1.5; color: var(--oasis-navy); }
.later__ask a { font-weight: 700; color: var(--oasis-teal); }
.later__row.is-static .later__box { display: none; }
.later__row:not(.is-static):hover { border-color: var(--oasis-sea); }
.later__row input { position: absolute; opacity: 0; width: 0; height: 0; }
.later__box {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  border: 2px solid rgba(10, 46, 68, 0.3); background: #fff;
}
.later__row.is-on { border-color: var(--oasis-teal); box-shadow: 0 0 0 3px rgba(39, 189, 206, 0.16); }
.later__row.is-on .later__box { background: var(--oasis-teal); border-color: var(--oasis-teal); }
.later__row.is-on .later__box::after {
  content: ''; display: block; width: 6px; height: 11px; margin: 1px auto 0;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.later__row input:focus-visible + .later__box { outline: 3px solid var(--oasis-sea); outline-offset: 2px; }
.later__text { display: grid; gap: 0.15rem; min-width: 0; }
.later__name { font-weight: 700; font-size: 0.95rem; color: var(--oasis-navy); line-height: 1.3; }
.later__note { font-size: 0.8rem; line-height: 1.45; color: var(--oasis-muted); }
.later__price {
  text-align: right; font-weight: 800; font-size: 1.05rem;
  color: var(--oasis-teal); white-space: nowrap;
}
.later__price small {
  display: block; font-weight: 600; font-size: 0.68rem;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--oasis-muted);
}
@media (max-width: 24rem) {
  .later__row { grid-template-columns: auto 1fr; }
  .later__price { grid-column: 2; text-align: left; }
  .later__row.is-static { grid-template-columns: 1fr; }
  .later__row.is-static .later__price { grid-column: 1; }
}

/* ------------------------------------------------- already in your quote
   What they ticked in the wizard, said back to them. Without this the same
   items reappeared under the extras and read as a second charge. */
.asked {
  margin-top: 1.25rem; padding: 0.95rem 1.05rem;
  background: rgba(39, 189, 206, 0.07);
  border: 1px solid rgba(39, 189, 206, 0.28);
  border-radius: var(--radius);
}
.asked__k {
  margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--oasis-teal);
}
.asked__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.asked__item {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start;
  font-size: 0.92rem; line-height: 1.4; color: var(--oasis-navy);
}
.asked__tick {
  width: 16px; height: 16px; margin-top: 0.15rem; flex: none; border-radius: 50%;
  background: var(--oasis-teal); position: relative;
}
.asked__tick::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.asked__note {
  margin: 0.7rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--oasis-muted);
}

/* A line she is throwing in reads as a gift, not an unfinished quote. */
.proposal__amt.is-included {
  color: var(--oasis-teal); font-weight: 700; font-size: 0.9em;
  letter-spacing: 0.02em;
}

/* The validity date is a footnote to the total, so it sits with it. */
.proposal__valid {
  margin: 0.55rem 0 0; text-align: right;
  font-size: 0.76rem; line-height: 1.4; color: var(--oasis-muted);
}

/* Text first, browse second. */
.thanks__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* The home-cleaning aside: how often she comes, where she works. It used to
   be the logo again, decorative and aria-hidden, third time on one screen. */
.rhythm {
  text-align: left;                 /* the aside is centred; this panel is a list */
  padding: 1.25rem 1.35rem; border-radius: var(--radius);
  background: var(--oasis-cream); border: 1px solid rgba(10, 46, 68, 0.1);
  border-top: 3px solid var(--oasis-teal);
}
.rhythm__k {
  margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--oasis-teal);
}
.rhythm__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.rhythm__list li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1rem; font-weight: 600; color: var(--oasis-navy);
}
.rhythm__list li::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--oasis-teal);
}
.rhythm__note {
  text-align: left; margin: 0.9rem 0 0; padding-top: 0.8rem;
  border-top: 1px solid rgba(10, 46, 68, 0.12);
  font-size: 0.84rem; line-height: 1.5; color: var(--oasis-muted);
}

/* The closing states (accepted / declined / expired) all tell the customer to
   get in touch, so they all offer a way to. */
.done__lead { margin: 0 0 0.9rem; line-height: 1.6; }
.done__lead:empty { display: none; margin: 0; }
.done__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }