/* Anything marked hidden stays hidden, even when a class gives it display:grid or flex.
   (The claude.ai preview supplied this rule; the real site has to carry its own.) */
[hidden] { display: none !important; }

/* Public site: Home, What we buy, How it works, FAQ, and Work with us (the 6-step request). White and beige, marsh green and spartina gold. */
:root {
  --marsh: #1f3a2f;
  --marsh-ink: #f3f1e8;
  --spartina: #b8892c;          /* fills, borders, buttons */
  --spartina-text: #8a6416;     /* gold TEXT: #b8892c is 3.8:1 on white, too faint for small text; this is 5.6:1 */
  --spartina-ink: #1a1607;
  --oyster: #fdfcf9;
  --shell: #f7f2e9;
  --pluff: #26292a;
  --mute: #4a4f49;
  --line: #e0d8c8;
  --card: #ffffff;
  --marker: #b3261e;
  --ok: #2f6b45;
  --tint: rgba(184, 137, 44, .12);
  --band: #f3ecdf;
  color-scheme: light;
  --green-text: #1f3a2f;
  --serif-classic: "Times New Roman", Times, Georgia, serif;

  --f-display: "Libre Baskerville", "Times New Roman", Times, Georgia, serif;   /* audit 10/27 #40: the Times-style serif Luke likes */
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;

  --s-1: .875rem; --s0: 1.125rem; --s1: 1.3125rem; --s2: 1.625rem; --s3: 2.25rem; --s4: clamp(2.5rem, 6vw, 4rem);
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { background: var(--oyster); color: var(--pluff); font-family: var(--f-body); font-size: var(--s0); line-height: 1.6; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: var(--s3); }
h3 { font-size: var(--s1); }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--spartina); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.eyebrow { font-size: var(--s-1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--spartina-text); }
.lede { color: var(--mute); max-width: 38rem; font-size: var(--s1); line-height: 1.5; }
.head { display: grid; gap: .75rem; margin-bottom: 2.5rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 var(--s0)/1 var(--f-body); text-decoration: none; cursor: pointer;
  padding: 1rem 1.5rem; border-radius: 6px; border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--spartina); color: var(--spartina-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--spartina) 88%, #fff); }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-quiet { background: transparent; color: var(--mute); padding-inline: .5rem; }
.btn-quiet:hover { color: var(--pluff); transform: none; }

/* Top bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--oyster) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.brand { font-family: var(--f-display); font-size: var(--s1); text-decoration: none; line-height: 1.1; }
.brand small { display: block; font: 600 .7rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.bar nav { display: flex; align-items: center; gap: 1.5rem; }
.bar nav a.link { text-decoration: none; font-weight: 500; font-size: 1rem; color: var(--mute); padding: .7rem 0; }  /* a 44px-tall tap target */
.bar nav a.link:hover { color: var(--pluff); }
.bar .btn { padding: .7rem 1.1rem; font-size: .95rem; }
@media (max-width: 1180px) {
  .bar .wrap { flex-wrap: wrap; row-gap: .5rem; }
  .bar nav { order: 3; flex: 1 0 100%; overflow-x: auto; gap: 1.1rem; padding-bottom: .15rem; }
  .bar nav a.link { white-space: nowrap; }
}
.bar nav a.link.on { color: var(--pluff); text-decoration: underline; text-decoration-color: var(--spartina); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bar .actions { display: flex; align-items: center; gap: .9rem; }
.bar .actions a.link { text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--pluff); white-space: nowrap; }
.bar .badge { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; margin-left: .3rem; border-radius: 999px; background: var(--marker); color: #fff; font-size: .72rem; font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.explore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.explore a { display: grid; gap: .4rem; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.4rem; transition: border-color .15s ease; }
.explore a:hover { border-color: var(--spartina); }
.explore a p { color: var(--mute); font-size: .98rem; }
.explore a span { font-weight: 600; color: var(--spartina-text); font-size: .92rem; }
@media (max-width: 760px) { .explore { grid-template-columns: 1fr; } }
.list-note { margin-top: 1rem; font-weight: 600; }
.list-note[hidden] { display: none; }
.page-top { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
footer .links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
footer .links a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.signed-in-as { font-size: .92rem; color: var(--mute); }

/* Hero */
.hero { background: var(--band); color: var(--pluff); --marsh-ink: var(--pluff); padding-block: clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font-size: var(--s4); }
.hero h1 em { font-style: normal; color: var(--green-text); }
.hero .copy { display: grid; gap: 1.5rem; min-width: 0; }
.hero .copy > p { font-family: var(--serif-classic); font-size: 1.4rem; line-height: 1.5; max-width: 34rem; color: color-mix(in srgb, var(--marsh-ink) 85%, transparent); }
.quick { display: grid; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--marsh-ink) 18%, transparent); }
.quick > span { font-weight: 600; }
.quick .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.quick button {
  font: 500 .95rem/1 var(--f-body); color: var(--marsh-ink); cursor: pointer;
  background: color-mix(in srgb, var(--marsh-ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--marsh-ink) 28%, transparent);
  padding: .7rem 1rem; border-radius: 999px; transition: background-color .15s ease, border-color .15s ease;
}
.quick button:hover { background: color-mix(in srgb, var(--spartina) 25%, transparent); border-color: var(--spartina); }
.hero .area { font-size: var(--s-1); color: color-mix(in srgb, var(--marsh-ink) 70%, transparent); }

.sign-holder { display: grid; place-items: center; min-width: 0; }
.sign {
  position: relative; width: min(100%, 22rem); aspect-ratio: 4 / 3.3; max-width: 100%;
  background: #fbf6dc; color: #1d1d1b; border-radius: 3px; padding: 1.6rem 1.4rem; transform: rotate(-3deg);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.06);
  display: grid; align-content: center; justify-items: center; text-align: center; gap: .35rem; font-family: var(--f-hand);
}
.sign::before, .sign::after { content: ""; position: absolute; top: -12px; width: 70px; height: 24px; background: rgba(240, 232, 200, .75); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.sign::before { left: 16px; transform: rotate(-8deg); }
.sign::after { right: 16px; transform: rotate(7deg); }
.sign .big { font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; }
.sign .small { font-size: 1.05rem; color: #3a3a36; }
.sign .arrow { font-size: 1.6rem; color: #3a3a36; }
.strike { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.strike line { stroke: #b3261e; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .strike line { animation: draw .5s ease-out .6s both; }
  .strike line + line { animation-delay: .9s; }
  .fix { animation: pop .35s ease-out 1.35s both; }
}
@keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: .0001; transform: rotate(4deg) scale(.9); } to { opacity: 1; transform: rotate(4deg) scale(1); } }
.fix { position: absolute; right: -10px; bottom: -22px; transform: rotate(4deg); background: var(--spartina); color: var(--spartina-ink); font-family: var(--f-hand); font-size: 1.45rem; padding: .55rem 1rem; border-radius: 3px; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.home-base { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: .75rem; min-width: 0; box-shadow: 0 12px 30px rgba(60, 45, 20, .08); }
.home-base h2 { font-size: var(--s2); color: var(--green-text); }
.home-base p { color: var(--mute); font-size: .98rem; }
.areas { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.areas li { font-size: .88rem; padding: .35rem .7rem; border-radius: 999px; background: var(--shell); border: 1px solid var(--line); }
.areas .hb { background: var(--marsh); border-color: var(--marsh); color: #f3f1e8; font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; }
.areas .hb small { font-weight: 500; opacity: .8; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 820px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Trust strip */
.strip { background: var(--shell); border-bottom: 1px solid var(--line); padding-block: 1.25rem; }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; justify-content: center; font-weight: 600; font-size: .95rem; }
.strip li { display: flex; align-items: center; gap: .5rem; }
.strip li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spartina); }

/* Sale-tag catalog */
.tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1rem; }
.tag {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 1.1rem 1.1rem 1rem 2.6rem; min-width: 0; display: grid; gap: .6rem; align-content: start;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  transition: background-color .15s ease, border-color .15s ease;
}
.tag::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--oyster); box-shadow: inset 0 0 0 1px var(--line); }
.tag h3 { font-size: 1.15rem; }
.tag p { font-size: .92rem; color: var(--mute); line-height: 1.45; }
.tag .have {
  justify-self: start; font: 600 .85rem/1 var(--f-body); cursor: pointer; color: var(--pluff);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .45rem .8rem;
}
.tag .have:hover { border-color: var(--spartina); }
.tag.on { background: var(--tint); border-color: var(--spartina); }
.tag.on .have { background: var(--spartina); border-color: var(--spartina); color: var(--spartina-ink); }
.not-sure { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border: 2px dashed var(--line); border-radius: 8px; padding: 1.25rem 1.5rem; }
.not-sure p { font-size: var(--s1); font-family: var(--f-display); }

/* Steps */
.alt { background: var(--shell); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: .5rem; align-content: start; padding-top: 1.25rem; border-top: 3px solid var(--marsh); min-width: 0; }
.steps li::before { content: "Step " counter(s); font-size: var(--s-1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--spartina-text); }
.steps p { color: var(--mute); font-size: .98rem; }
.no-list { margin-top: 2.5rem; font-family: var(--f-display); font-size: var(--s2); line-height: 1.3; text-wrap: balance; }
.no-list s { text-decoration-color: var(--marker); text-decoration-thickness: 3px; color: var(--mute); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Who we help */
.help { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); border-top: 1px solid var(--line); }
.help button {
  text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: inherit; cursor: pointer;
  padding: 1.5rem 1.5rem 1.5rem 0; display: grid; gap: .35rem; min-width: 0; font: inherit;
}
.help button h3 { transition: color .15s ease; }
.help button:hover h3 { color: var(--spartina-text); }
.help p { color: var(--mute); }
.help .go { font-size: .88rem; font-weight: 600; color: var(--spartina-text); }

/* About */
.about { background: var(--band); color: var(--pluff); --marsh-ink: var(--pluff); }
.about .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.photo { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 6px; border: 2px dashed color-mix(in srgb, var(--marsh-ink) 40%, transparent); display: grid; place-items: center; text-align: center; padding: 1.5rem; color: color-mix(in srgb, var(--marsh-ink) 65%, transparent); font-size: .95rem; }
.about .copy { display: grid; gap: 1.25rem; min-width: 0; }
.about .copy > p { font-size: var(--s1); line-height: 1.55; color: color-mix(in srgb, var(--marsh-ink) 85%, transparent); }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; margin-top: .5rem; }
.points div { display: grid; gap: .2rem; }
.points strong { color: var(--spartina-text); font-weight: 600; }
.points span { font-size: .95rem; color: color-mix(in srgb, var(--marsh-ink) 78%, transparent); }
@media (max-width: 820px) { .about .wrap { grid-template-columns: 1fr; } .photo { max-width: 20rem; } }
@media (max-width: 480px) { .points { grid-template-columns: 1fr; } }

/* ---------- Offer request wizard ---------- */
.offer-grid { display: grid; grid-template-columns: 17rem 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.offer-side { display: grid; gap: 1.25rem; position: sticky; top: 5.5rem; min-width: 0; }
.offer-side h2 { font-size: var(--s2); }
.progress { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; counter-reset: p; }
.progress li { counter-increment: p; }
.progress button {
  width: 100%; display: grid; grid-template-columns: 1.9rem 1fr; gap: .75rem; align-items: center; text-align: left;
  background: transparent; border: 0; padding: .45rem .25rem; color: var(--mute); font: 500 .98rem/1.3 var(--f-body); cursor: pointer; border-radius: 6px;
}
.progress button:disabled { cursor: default; opacity: .55; }
.progress button::before {
  content: counter(p); width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; background: var(--oyster);
}
.progress .done button { color: var(--pluff); }
.progress .done button::before { content: "✓"; background: var(--marsh); border-color: var(--marsh); color: var(--marsh-ink); }
.progress .current button { color: var(--pluff); font-weight: 700; }
.progress .current button::before { border-color: var(--spartina); background: var(--spartina); color: var(--spartina-ink); }
.progress small { display: block; font-weight: 400; font-size: .82rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-card { background: var(--shell); border-radius: 8px; padding: 1rem 1.25rem; display: grid; gap: .4rem; }
.phone-card .num { font-family: var(--f-display); font-size: var(--s1); font-variant-numeric: tabular-nums; user-select: all; }
.phone-card .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.phone-card > span { font-size: .9rem; color: var(--mute); }
.copy-btn { font: 600 .95rem/1 var(--f-body); padding: .5rem .9rem; min-height: 44px; border-radius: 5px; border: 1px solid var(--line); background: var(--card); color: var(--pluff); cursor: pointer; }
.placeholder-note { font-size: .8rem; color: var(--mute); font-style: italic; }
.mbar { display: none; }
@media (max-width: 900px) {
  .offer-grid { grid-template-columns: 1fr; }
  .offer-side { position: static; }
  .progress { display: none; }
  .mbar { display: grid; gap: .5rem; }
  .mbar .track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .mbar .fill { height: 100%; background: var(--spartina); transition: width .25s ease; }
  .mbar span { font-size: .9rem; font-weight: 600; color: var(--mute); }
}

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.25rem, 4vw, 2.25rem); display: grid; gap: 1.5rem; min-width: 0; }
.panel-head { display: grid; gap: .4rem; }
.panel-head .eyebrow { font-size: .78rem; }
.panel-head h3 { font-size: var(--s2); }
.panel-head p { color: var(--mute); }
.note { background: var(--tint); border-left: 3px solid var(--spartina); border-radius: 0 6px 6px 0; padding: .85rem 1rem; font-size: .95rem; }
.q { display: grid; gap: .65rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.q > legend, .q > label, .qlabel { font-weight: 600; font-size: 1rem; padding: 0; }
.q .hint { font-size: .88rem; color: var(--mute); margin-top: -.35rem; }
.req { color: var(--marker); }
.opt { font-weight: 400; color: var(--mute); }

/* Big choice cards (situation) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .75rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .body {
  display: grid; gap: .25rem; height: 100%; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--oyster);
  transition: border-color .15s ease, background-color .15s ease;
}
.choice strong { font-size: 1.02rem; }
.choice span { font-size: .88rem; color: var(--mute); line-height: 1.4; }
.choice:hover .body { border-color: var(--spartina); }
.choice input:checked + .body { border-color: var(--spartina); background: var(--tint); box-shadow: inset 0 0 0 1px var(--spartina); }
.choice input:focus-visible + .body { outline: 3px solid var(--spartina); outline-offset: 2px; }

/* Pills (single + multi) */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border: 1.5px solid var(--line); border-radius: 999px; font-size: .95rem; font-weight: 500; background: var(--oyster); transition: border-color .15s ease, background-color .15s ease; }
.pill:hover span { border-color: var(--spartina); }
.pill input:checked + span { border-color: var(--spartina); background: var(--tint); font-weight: 600; }
.pill input[type="checkbox"]:checked + span::before { content: "✓"; color: var(--spartina-text); font-weight: 700; }
.pill input:focus-visible + span { outline: 3px solid var(--spartina); outline-offset: 2px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], textarea, select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--pluff); background: var(--oyster);
  border: 1px solid var(--line); border-radius: 6px; padding: .8rem .9rem;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--spartina); outline-offset: 0; border-color: transparent; }
textarea { min-height: 7rem; resize: vertical; }
.bad { border-color: var(--marker) !important; }

/* Photos */
.tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .6rem; }
.tip { background: var(--oyster); border: 1px solid var(--line); border-radius: 8px; padding: .75rem .9rem; display: grid; gap: .15rem; }
.tip strong { font-size: .92rem; }
.tip span { font-size: .86rem; color: var(--mute); line-height: 1.4; }
.drop { position: relative; border: 2px dashed var(--line); border-radius: 10px; padding: 1.5rem; text-align: center; display: grid; gap: .4rem; justify-items: center; cursor: pointer; background: var(--oyster); transition: border-color .15s ease; }
.drop.over, .drop:hover { border-color: var(--spartina); }
.drop strong { font-size: 1.05rem; }
.drop span { font-size: .88rem; color: var(--mute); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 3px solid var(--spartina); outline-offset: 2px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.thumbs:empty { display: none; }
.thumbs figure { margin: 0; position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--shell); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs button { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 20px; line-height: 36px; cursor: pointer; padding: 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-size: .95rem; }
.check input { margin-top: .3rem; accent-color: var(--marsh); width: 1.05rem; height: 1.05rem; flex: none; }

.err { color: var(--marker); font-size: .92rem; font-weight: 500; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .5rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.nav .btn-primary { min-width: 11rem; }
.saved { font-size: .82rem; color: var(--mute); }

/* Review */
.review { display: grid; gap: .75rem; }
.rrow { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1rem; align-items: start; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.rrow:last-child { border-bottom: 0; }
.rrow dt { font-weight: 600; font-size: .92rem; color: var(--mute); }
.rrow dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rrow .edit { font: 600 1rem/1 var(--f-body); min-height: 44px; min-width: 44px; color: var(--spartina-text); background: none; border: 0; cursor: pointer; padding: .5rem .6rem; text-decoration: underline; text-underline-offset: 3px; }
.rthumbs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.rthumbs img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
@media (max-width: 560px) { .rrow { grid-template-columns: 1fr auto; } .rrow dd { grid-column: 1 / -1; grid-row: 2; } }
.fine { font-size: .95rem; color: var(--mute); }  /* important small print: readable, not 13px grey */

/* Done */
.done-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: d; }
.done-list li { counter-increment: d; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; }
.done-list li::before { content: counter(d); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--marsh); color: var(--marsh-ink); font-weight: 700; font-size: .9rem; }
.done-list strong { display: block; }
.done-list span { color: var(--mute); font-size: .95rem; }
.badge-ok { display: inline-flex; align-items: center; gap: .4rem; color: var(--ok); font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }

/* Floating list pill */
.listpill {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: .9rem; max-width: calc(100% - 2rem);
  background: var(--marsh); color: var(--marsh-ink); border-radius: 999px; padding: .55rem .55rem .55rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); font-weight: 600; font-size: .95rem;
}
.listpill .btn { padding: .65rem 1rem; font-size: .9rem; white-space: nowrap; }
.listpill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* FAQ */
.faq { max-width: 48rem; display: grid; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font-weight: 600; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--spartina-text); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 1.25rem; color: var(--mute); max-width: 42rem; }

/* Closing */
.closing { background: var(--band); color: var(--pluff); --marsh-ink: var(--pluff); text-align: center; }
.closing .wrap { display: grid; gap: 1.25rem; justify-items: center; }
.closing h2 { font-size: var(--s4); }
.closing h2 s { text-decoration-color: var(--marker); text-decoration-thickness: 5px; color: color-mix(in srgb, var(--marsh-ink) 55%, transparent); }
.closing p { max-width: 36rem; font-size: var(--s1); color: color-mix(in srgb, var(--marsh-ink) 85%, transparent); }
.closing .ctas, .hero .ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.closing .ctas { justify-content: center; }
footer { --marsh-ink: var(--pluff); background: var(--shell); color: color-mix(in srgb, var(--marsh-ink) 70%, transparent); border-top: 1px solid color-mix(in srgb, var(--marsh-ink) 15%, transparent); padding-block: 1.75rem 5rem; font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
footer strong { color: var(--marsh-ink); font-family: var(--f-display); font-weight: 400; }
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.about-grid .photo { aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; padding: 1.5rem; border-radius: 8px; }
.about-copy { display: grid; gap: .9rem; min-width: 0; }
.about-copy h3 { margin-top: .6rem; }
.placeholder-box { border: 2px dashed var(--spartina); background: color-mix(in srgb, var(--spartina) 6%, transparent); color: var(--mute); border-radius: 8px; padding: .9rem 1rem; }
.promise { margin: 0; padding-left: 2rem; display: grid; gap: .35rem; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } .about-grid .photo { max-width: 18rem; } }
.ease { display: grid; gap: .5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.ease .opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.ease button { font: 600 .92rem var(--f-body); padding: .55rem .9rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--pluff); cursor: pointer; }
.ease button:hover, .ease button[aria-pressed="true"] { border-color: var(--spartina); background: var(--tint); }
.grid-addr { display: grid; grid-template-columns: 1fr 1.3fr .8fr; gap: 1.1rem; }
@media (max-width: 560px) { .grid-addr { grid-template-columns: 1fr; } }
.q.addr { gap: .9rem; }
.q .hint { font-size: .88rem; color: var(--mute); margin-top: -.35rem; }

/* Space between the questions inside each step */
.stepbody { display: grid; gap: 1.5rem; min-width: 0; }

/* Logo: house mark + serif wordmark with "Downsizing" in gold italic (matches the dashboard) */
:root { --navy: #1d2f45; --gold: #c8952c; --f-brand: "Libre Baskerville", Georgia, "Times New Roman", serif; }
.wordmark { display: inline-flex; align-items: center; gap: .65rem; }
.wordmark .logo { width: 2.2rem; height: 2.2rem; flex: none; color: var(--navy); }
.wm-text { font-family: var(--f-brand); font-size: 1.25rem; line-height: 1.1; color: var(--navy); white-space: nowrap; }
.wm-text em { color: var(--gold); font-style: italic; }
.bar .brand { display: grid; gap: .1rem; }
.bar .brand small { padding-left: 2.85rem; }
@media (max-width: 560px) { .wm-text { font-size: 1.02rem; } .wordmark .logo { width: 1.8rem; height: 1.8rem; } .bar .brand small { padding-left: 2.45rem; } }

/* Pick a visit time */
.book-wrap { max-width: 52rem; display: grid; gap: 1.5rem; }
.book-head { display: grid; gap: .75rem; }
.book-head h1, .book-card h1 { font-family: var(--f-display); font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; }
.book-head .where { font-size: 1.05rem; }
.note.bad { border-left-color: var(--marker); background: color-mix(in srgb, var(--marker) 8%, transparent); }
.days { display: grid; gap: 1.25rem; }
.day { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem; display: grid; gap: .8rem; }
.day h2 { font-family: var(--f-display); font-size: 1.35rem; display: flex; gap: .6rem; align-items: baseline; }
.day h2 span { font-family: var(--f-body); font-size: 1rem; color: var(--mute); }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.time { font: 600 1.1rem var(--f-body); padding: .9rem .6rem; border-radius: 10px; border: 1.5px solid var(--line); background: var(--oyster); color: var(--pluff); cursor: pointer; font-variant-numeric: tabular-nums; }
.time:hover, .time:focus-visible { border-color: var(--spartina); background: var(--tint); }
.time.current { border-color: var(--marsh); background: color-mix(in srgb, var(--marsh) 10%, transparent); }
.book-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1rem; }
.book-card.done { border-color: var(--marsh); }
.book-card .ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.window-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .95rem; color: var(--mute); }
.window-row select { width: auto; min-width: 8.5rem; padding: .6rem .7rem; }
.book-now { display: grid; gap: .5rem; background: color-mix(in srgb, var(--marsh) 7%, var(--card)); border: 1.5px solid var(--marsh); border-radius: 12px; padding: 1.1rem 1.25rem; }
.book-now strong { font-family: var(--f-display); font-size: 1.3rem; }
.book-now .btn { justify-self: start; font-size: 1.1rem; }

/* Pick a visit time, v3: month calendar + that day's times, select then confirm */
.book-page { padding-top: 1.6rem; padding-bottom: 2rem; }
.book-wrap { max-width: 68rem; }
.bk-head { display: grid; gap: .6rem; justify-items: center; text-align: center; margin-bottom: 1rem; }
.bk-head h1 { font-family: var(--f-brand); color: var(--navy); font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15; font-weight: 700; }
.bk-head p { color: #374151; font-size: 1.05rem; }
.bk-where, .bk-current { display: inline-flex; align-items: center; gap: .65rem; border-radius: 999px; padding: .55rem 1.2rem; text-align: left; }
.bk-where { background: #fff; border: 1px solid #ddd8cc; font-size: 1.02rem; color: #1f2937; box-shadow: 0 1px 3px rgba(20, 30, 40, .06); }
.bk-current { background: #fdf3df; border: 1px solid #efd9a8; border-radius: 10px; font-size: .98rem; color: #1f2937; width: 100%; justify-content: center; }
.bk-current.bad { background: color-mix(in srgb, var(--marker) 9%, #fff); border-color: color-mix(in srgb, var(--marker) 35%, #fff); color: var(--marker); }
.ic { width: 1.3rem; height: 1.3rem; flex: none; color: var(--navy); }
.bk-form { display: grid; gap: 1rem; justify-items: center; }
.bk-pick { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.1rem; width: 100%; align-items: start; }
.bk-card { background: #fff; border: 1px solid #e7e3da; border-radius: 12px; box-shadow: 0 2px 8px rgba(20, 30, 40, .06); padding: 1rem 1.1rem; }
.bk-month + .bk-month { margin-top: 1.2rem; }
.bk-form.js .bk-month:not(.on), .bk-form.js .bk-panel:not(.on) { display: none; }
.bk-form:not(.js) .bk-nav { visibility: hidden; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .55rem; border-bottom: 1px solid #ece8df; }
.bk-cal-head h2 { font-size: 1.3rem; font-weight: 700; color: var(--navy); font-family: var(--f-body); }
.bk-nav { width: 2.4rem; height: 2.4rem; border: 0; background: none; border-radius: 50%; font-size: 1.7rem; line-height: 1; color: var(--navy); cursor: pointer; }
.bk-nav:hover:not(:disabled) { background: #f1efe9; }
.bk-nav:disabled { color: #cfcbc2; cursor: default; }
.bk-days { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.bk-days th { font-size: .9rem; font-weight: 600; color: #374151; padding: .55rem 0 .3rem; }
.bk-days td { padding: .12rem 0; }
.bk-d { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 1.05rem; color: #1f2937; border: 0; background: none; font-family: inherit; font-variant-numeric: tabular-nums; }
.bk-d i { position: absolute; bottom: .22rem; width: .38rem; height: .38rem; border-radius: 50%; }
.bk-d.open { cursor: pointer; font-weight: 500; }
.bk-d.open i { background: #4caf50; }
.bk-d.open:hover { background: #f1efe9; }
.bk-d.open:focus-visible { outline: 3px solid var(--spartina); outline-offset: 1px; }
.bk-d.sel { background: var(--navy); color: #fff; font-weight: 700; }
.bk-d.sel:hover { background: var(--navy); }
.bk-d.sel i { background: #fff; }
.bk-d.none { color: #9ca3af; }
.bk-d.none i { background: #d6d3cc; }
.bk-d.out { color: #9ca3af; }
.bk-d.other { color: #c9c6bf; }
.bk-legend { display: flex; gap: 1.2rem; justify-content: center; font-size: .85rem; color: var(--mute); margin-top: .5rem; }
.bk-legend i { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.bk-legend i.g { background: #4caf50; } .bk-legend i.n { background: #d6d3cc; }
.bk-side h3 { font-size: 1.12rem; font-weight: 700; color: var(--navy); text-align: center; margin: .2rem 0 .9rem; font-family: var(--f-body); }
.bk-panel + .bk-panel { margin-top: 1.2rem; }
.bk-times { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.bk-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem .6rem; border-radius: 8px; background: #fff; border: 1px solid #cfd3da; font-size: 1.05rem; font-weight: 500; color: #1f2937; cursor: pointer; font-variant-numeric: tabular-nums; user-select: none; }
.bk-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bk-chip:hover { border-color: var(--navy); }
.bk-chip .tick { width: 1.1rem; height: 1.1rem; color: var(--navy); display: none; }
.bk-chip:has(input:checked) { border: 2px solid var(--navy); padding: calc(.7rem - 1px) calc(.6rem - 1px); font-weight: 700; color: var(--navy); }
.bk-chip:has(input:checked) .tick { display: inline; }
.bk-chip:has(input:focus-visible) { outline: 3px solid var(--spartina); outline-offset: 2px; }
.bk-chip.current { border: 2px dashed #b8a46a; background: #fdf8ec; cursor: default; font-weight: 600; }
.bk-chip.current .tick { display: inline; color: #9a7a1a; }
.bk-chip.off { color: #a8a6a0; background: #f3f2ef; border-color: #ebe9e4; cursor: not-allowed; }
.bk-chip.off:hover { border-color: #ebe9e4; }
.bk-tz { font-size: .88rem; color: var(--mute); margin-top: .9rem; }
.bk-confirm { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; background: var(--navy); color: #fff; border: 0; border-radius: 9px; padding: .95rem 2.4rem; min-width: min(100%, 32rem); font: 700 1.15rem var(--f-body); cursor: pointer; box-shadow: 0 6px 16px rgba(29, 47, 69, .2); }
.bk-confirm:hover { background: #142236; }
.bk-confirm:disabled { background: #8b95a3; box-shadow: none; cursor: default; }
.bk-foot { text-align: center; color: #374151; margin-top: .6rem; }
@media (max-width: 820px) {
  .bk-pick { grid-template-columns: 1fr; }
  .bk-d { width: 2.4rem; height: 2.4rem; }
  .bk-current { border-radius: 10px; }
  .bk-confirm { width: 100%; padding-inline: 1rem; position: sticky; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
}


/* The six pages */
.anchor { scroll-margin-top: 5.5rem; }
.band { background: var(--band, #f4ecdd); }
.call-line { color: var(--mute); }
.buy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; align-items: start; }
.buy-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; }
.buy-card summary { cursor: pointer; list-style: none; display: grid; gap: .2rem; }
.buy-card summary::-webkit-details-marker { display: none; }
.buy-card summary strong { font-size: 1.08rem; }
.buy-card summary strong::after { content: " +"; color: var(--spartina-text); }
.buy-card[open] summary strong::after { content: " −"; }
.buy-card summary span { color: var(--mute); font-size: .95rem; }
.buy-card ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: .97rem; }
.buy-notes { display: grid; gap: .6rem; margin-top: 1.2rem; max-width: 46rem; }
.steps4 { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.steps4 li { counter-increment: s; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; display: grid; gap: .35rem; align-content: start; }
.steps4 li::before { content: counter(s); font-weight: 700; color: var(--spartina-text); font-size: 1.3rem; }
.steps4 span { color: var(--mute); font-size: .97rem; }
.about .copy { display: grid; gap: .9rem; max-width: 46rem; }
.more-faq { margin-top: .8rem; }
.more-faq > summary { cursor: pointer; font-weight: 600; color: var(--spartina-text); }
@media (max-width: 900px) { .buy-grid { grid-template-columns: 1fr 1fr; } .steps4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .buy-grid, .steps4 { grid-template-columns: 1fr; } }
.hero h1 em.sub { display: block; font-size: .5em; line-height: 1.2; margin-top: .4rem; }

.page-h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); line-height: 1.12; margin: 0; }
.more-link { margin-top: 1.4rem; font-weight: 600; }
.more-link a { color: var(--spartina-text); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.buy-link { display: grid; gap: .25rem; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
a.buy-link:hover { border-color: var(--spartina); transform: translateY(-1px); }
a.buy-link strong { font-size: 1.08rem; }
a.buy-link span { color: var(--mute); font-size: .95rem; }
.buy-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.buy-list .buy-card { padding: 1.2rem 1.3rem; scroll-margin-top: 6rem; }
.buy-list .buy-card h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
.buy-list .buy-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.buy-list .buy-card:target { border-color: var(--spartina); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spartina) 25%, transparent); }
.photo-tip { margin-top: .8rem; font-size: .93rem; color: var(--mute); border-top: 1px solid var(--line); padding-top: .7rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
.two-col h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.two-col p { font-size: 1.05rem; line-height: 1.6; }
.steps-long { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1.1rem; max-width: 50rem; }
.steps-long li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: .2rem 1rem; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem 1.4rem; }
.steps-long li::before { content: counter(s); grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--spartina); color: var(--spartina-ink); font-weight: 700; font-size: 1.2rem; display: grid; place-items: center; }
.steps-long h2 { font-size: 1.35rem; margin: 0; }
.steps-long p { font-size: 1.05rem; line-height: 1.6; color: var(--mute); }
.points.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.points.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.points strong { font-size: 1.1rem; }
.about-text { display: grid; gap: 1.1rem; max-width: 46rem; }
.about-text p { font-size: 1.15rem; line-height: 1.7; }
/* About → Meet the owner: Luke's two photos beside his bio (11/02), stacked above it on a phone */
.owner { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.owner-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.owner-photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.owner-photos img:first-child { object-position: 50% 20%; }
.owner-photos img:last-child { object-position: 50% 40%; }
@media (max-width: 760px) { .owner { grid-template-columns: 1fr; } }
.faq-groups { display: grid; gap: 2.2rem; max-width: 50rem; }
.faq-groups h2 { font-size: 1.4rem; margin: 0 0 .6rem; }
@media (max-width: 900px) { .buy-list, .points.three, .points.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .two-col { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .buy-list, .points.three, .points.four { grid-template-columns: 1fr; } .steps-long li { grid-template-columns: 1fr; } .steps-long li::before { grid-row: auto; } }

/* the phone number is a tap-to-call link everywhere */
a.num.tel { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* screen-reader-only labels (the same class name the account pages use) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.offer-h1 { font-size: var(--s3); }  /* the form page's main heading, sized like the other section headings */

/* ---------- The 3-step request form ---------- */
.lede-sm { font-size: 1.05rem; line-height: 1.55; color: var(--mute); }
.step-h { font-size: clamp(1.5rem, 3.4vw, 1.9rem); margin: .2rem 0 .3rem; }
.dots { list-style: none; display: flex; gap: .5rem; margin: 0 0 1rem; padding: 0; }
.dots li { width: 2.2rem; height: .45rem; border-radius: 999px; background: var(--line); }
.dots li.done { background: var(--ok); }
.dots li.now { background: var(--spartina); }
.hint { color: var(--mute); margin: .3rem 0 0; line-height: 1.45; }
details.more { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; background: var(--card); margin-top: .4rem; }
details.more > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: .4rem; }
details.more[open] > summary { margin-bottom: .6rem; }
.sending { display: grid; gap: .4rem; margin-top: .6rem; }
.sending .track { height: .7rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.sending .fill { height: 100%; width: 0; background: var(--ok); transition: width .2s ease; }
.err:not([hidden]) { display: block; background: #fdecea; border: 1px solid #f3c3bd; border-radius: 8px; padding: .75rem 1rem; margin-top: .6rem; }
input.bad, textarea.bad, select.bad { border-color: var(--marker) !important; box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
#done:focus { outline: none; }

/* ---------- 16px minimum for anything a customer reads (a 55+ audience) ----------
   Body text is 18px; these were 12-15px hints, labels, notes and buttons. */
.eyebrow, .panel-head .eyebrow, .signed-in-as, .hero .area, .home-base p, .areas li, .tag p, .steps p, .help .go,
.points span, .phone-card > span, .placeholder-note, .note, .q .hint, .hint, .choice span, .tip strong, .tip span,
.drop span, .check, .err, .saved, .rrow dt, .fine, .done-list span, .badge-ok, .listpill .btn, .ease button,
.window-row, .bk-current, .bk-days th, .bk-legend, .bk-tz, .buy-card summary span, .buy-card ul, .steps4 span,
a.buy-link span, .photo-tip, .explore a p, .explore a span, .bar .btn, .bar .actions a.link, .progress small,
footer, footer .links a, .areas .hb small { font-size: max(1rem, 16px); }
.step-h:focus { outline: none; }  /* focused only so screen readers announce the new step */

/* Offer page: every line a customer reads is at least 16px */
.offer-page .offer-lines { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.offer-page .offer-lines td, .offer-page .offer-lines th { padding: .55rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.offer-page .offer-lines .num { text-align: right; white-space: nowrap; padding-left: 1rem; }
.offer-page .offer-lines tfoot th, .offer-page .offer-lines tfoot td { border-bottom: 0; font-size: 1.15rem; }
.offer-page .luke-note { margin: 0; padding: .75rem 1rem; border-left: 3px solid var(--spartina); background: var(--tint); font-size: 1rem; }
.offer-page .offer-choice { border: 1.5px solid var(--line); border-radius: 10px; background: var(--oyster); }
.offer-page .offer-choice > summary { cursor: pointer; padding: 1rem 1.1rem; font-weight: 600; font-size: 1.05rem; min-height: 44px; }
.offer-page .offer-choice[open] > summary { border-bottom: 1px solid var(--line); }
.offer-page .offer-choice form { padding: 1rem 1.1rem 1.2rem; gap: .8rem; }
.offer-page fieldset.q { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.offer-page .radio-row { display: flex; gap: .6rem; align-items: flex-start; font-size: 1rem; cursor: pointer; min-height: 44px; padding: .35rem 0; }
.offer-page .radio-row input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--marsh); flex: none; }
.offer-page .check, .offer-page .fine, .offer-page .err, .offer-page .terms { font-size: 1rem; }
.offer-page .terms summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.offer-page .bill { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.5 ui-monospace, Menlo, Consolas, monospace; background: var(--oyster); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; margin: 0; }
/* Printing an offer or a signed bill of sale (audit 10/27 #26): the document alone, black on white, with the
   business name and phone on top, and no item line split across two pages */
.print-head { display: none; }
@media print {
  header.bar, body > footer, .skip-link, .offer-page .ctas, .offer-page .fine, .offer-choice, .print-hide { display: none !important; }
  body, .offer-page, .book-card { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .print-head { display: block; font-size: 12pt; padding-bottom: 6pt; margin-bottom: 10pt; border-bottom: 1px solid #000; }
  .offer-page { padding: 0 !important; }
  .offer-page .bill { border: 0; white-space: pre-wrap; }
  .offer-lines tr, .bill { break-inside: avoid; page-break-inside: avoid; }
  a { color: #000 !important; }
}

/* Policy pages */
.policy { max-width: 46rem; }
.policy h2 { font-size: 1.5rem; margin: 2rem 0 .6rem; }
.policy p, .policy li { font-size: 1.05rem; line-height: 1.65; }
.policy ul { padding-left: 1.2rem; display: grid; gap: .5rem; }
.policy-draft { background: var(--tint); border-left: 3px solid var(--spartina); padding: .8rem 1rem; font-size: 1rem; margin: 0 0 1.5rem; }

/* --- Layout and readability fixes (10/12) --- */
/* The short descriptions under each point were cream-colored text meant for a dark band: unreadable on light. */
.points span { color: var(--mute); }
.points div { align-content: start; }  /* each title sits right above its text, level with its neighbors */
/* "Prefer the phone? Call or text" sits level with the button beside it */
.hero .ctas, .closing .ctas { align-items: center; }
.hero .call-line { line-height: 1.4; }
/* "home base" in the town list: same type as the town, lowercase, not small caps */
.areas .hb small { font: inherit; font-weight: 500; text-transform: none; letter-spacing: normal; opacity: .85; }
/* What we buy: every card in a row lines up (title, list, photo tip), and cards in a row are the same height */
.buy-list { align-items: stretch; }
/* Each category opens and closes (Luke, 10/25: the full lists were too much at once). Closed, a card is its name and a
   few examples; open, the whole list and the photo tip. Cards in a row keep their own height so opening one moves nothing beside it. */
.buy-list { align-items: start; }
.buy-list .buy-card summary { display: grid; gap: .3rem; padding-right: 2rem; position: relative; }
.buy-list .buy-card summary h2 { margin: 0; }
.buy-list .buy-card summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.6rem; line-height: 1; color: var(--spartina-text); }
.buy-list .buy-card[open] summary::after { content: "\2212"; }
.buy-list .buy-card summary:focus-visible { outline: 2px solid var(--spartina-text); outline-offset: 6px; border-radius: 4px; }
.buy-list .buy-card[open] ul { margin-top: .9rem; }
.price-note { margin: 1.1rem 0 0; max-width: 46rem; font-size: 1.1rem; line-height: 1.55; }
.buy-notes-band > div:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 46rem; }
/* Opening soon: a centered card, not a wide one with everything on the left */
.opening-card { max-width: 40rem; margin-inline: auto; text-align: center; justify-items: center; }
.opening-card .ctas { justify-content: center; }
.opening-card .lede { margin-inline: auto; }
.preview-banner { background: var(--marsh); color: var(--marsh-ink); padding: .8rem 1rem; text-align: center; font-size: 1rem; }
.preview-banner a { color: inherit; }

/* Keyboard users can jump past the header and menu (WCAG 2.4.1): hidden until it has focus */
.skip-link { position: absolute; left: .75rem; top: -4rem; z-index: 1000; padding: .75rem 1rem; border-radius: 8px;
  background: #1f3a2f; color: #fff; font-weight: 600; font-size: 1rem; text-decoration: underline; }
.skip-link:focus { top: .75rem; }
main:focus { outline: none; }
.offer-page .final-note { font-size: 1rem; margin: .2rem 0 0; padding: .7rem .9rem; border-radius: 8px; background: var(--tint); }

/* --- Header: one calm row; on phones the links fold behind a labeled Menu button (Luke, 10/15: "crowded") --- */
.menu { display: flex; align-items: center; gap: 1.5rem; }
.menu-btn, .menu-only { display: none; }
/* Up to six links, Sign in and the button on one row (Testimonials makes six): no link breaks in two ("What we / buy"),
   the gaps are a little tighter, and below 1180px the links fold behind the Menu button instead of crowding (10/26) */
@media (min-width: 1181px) {
  .bar nav a.link, .bar .actions a { white-space: nowrap; }
  .menu { gap: 1.1rem; }
  .bar nav { gap: 1rem; }
}
.hero .wrap { grid-template-columns: minmax(0, 46rem); }  /* one column now the area card is gone */
@media (max-width: 1180px) {
  .bar .wrap { flex-wrap: nowrap; padding-block: .6rem; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem; border: 1.5px solid var(--pluff);
    border-radius: 999px; background: transparent; color: var(--pluff); font: 600 1rem/1 var(--f-body); cursor: pointer; flex: none; }
  .menu-btn:focus-visible { outline: 3px solid var(--spartina); outline-offset: 2px; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--oyster); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(30, 25, 15, .12);
    padding: .5rem clamp(1rem, 5vw, 2rem) 1.25rem; max-height: calc(100vh - 4rem); overflow-y: auto; }
  .menu.open { display: flex; }
  /* the open menu is navy on every page, the light ones too (Privacy, Terms, Accessibility), not white (Luke, 11/01) */
  .menu { --oyster: #0f1b2b; --line: rgba(255,255,255,.16); --pluff: #fff; --mute: rgba(255,255,255,.86);
    border-bottom-color: rgba(255,255,255,.22); box-shadow: 0 24px 40px rgba(0,0,0,.55); }
  .menu .btn-primary { background: var(--spartina); color: var(--spartina-ink); border-radius: 6px; }
  .bar nav { order: 0; flex: none; flex-direction: column; align-items: stretch; gap: 0; overflow: visible; padding: 0; }
  .bar nav a.link, .bar .actions a.link { display: block; padding: .95rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--line); white-space: normal; }
  .bar nav a.link.on { text-underline-offset: 5px; }
  .bar .actions { flex-direction: column; align-items: stretch; gap: 0; }
  .bar .actions .btn { order: -1; margin: 1rem 0 .25rem; justify-content: center; font-size: 1.05rem; padding: .9rem 1rem; }
  .menu-only { display: block; }
}
@media (max-width: 1180px) {
  /* the name and the Menu button share one row: the name may take two lines rather than push the button off-screen */
  .bar .brand { flex: 1 1 auto; min-width: 0; }
  .bar .wm-text { white-space: normal; }
}
@media (max-width: 420px) { .bar .wm-text { font-size: 1.12rem; line-height: 1.15; max-width: 12.5rem; } }
/* Testimonials: each customer's words on a card, their first name and town under it, and what they sold us */
.quote-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.quote-list .quote { margin: 0; padding: 1.4rem 1.5rem; display: grid; gap: .9rem; }
.quote-list blockquote { margin: 0; font-size: 1.2rem; line-height: 1.55; }
.quote-list figcaption { font-weight: 600; display: grid; gap: .2rem; }
.quote-list figcaption span { font-weight: 400; color: var(--mute); font-size: max(1rem, 16px); }
.quote-list .stars { color: #00b67a; font-size: 1.35rem; letter-spacing: .12em; line-height: 1; }   /* Trustpilot's green */
@media (max-width: 680px) { .quote-list { grid-template-columns: 1fr; } }
/* What we buy: the photo strip. It drifts left to right and loops (the track holds the photos twice, so moving it
   by half its width lands exactly where it started). Hover or the Pause button stops it; reduce motion makes it a
   still row you can scroll sideways. */
.ticker-band { padding-block: clamp(2.5rem, 6vw, 4rem); overflow: hidden; }
.ticker-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.ticker-head h2 { margin: .3rem 0 0; }
.ticker-pause { flex: none; min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; border: 1.5px solid currentColor;
  background: transparent; color: inherit; font: 600 1rem/1 var(--f-body); cursor: pointer; }
.ticker-pause:focus-visible { outline: 3px solid var(--spartina); outline-offset: 2px; }
.ticker { overflow: hidden; }
.ticker:focus-visible { outline: 3px solid var(--spartina); outline-offset: 4px; }  /* reachable by keyboard: with reduce motion it scrolls with the arrow keys */
.ticker-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; width: max-content;
  animation: ticker-drift var(--ticker-time, 160s) linear infinite; }  /* about 4.5s a photo: the pace Austin liked */
.ticker:hover .ticker-track, .ticker-band.paused .ticker-track { animation-play-state: paused; }
.ticker-track li { flex: none; width: 15rem; }
.ticker-track img { width: 15rem; height: 11.25rem; object-fit: cover; border-radius: 12px; display: block; background: rgba(255,255,255,.06); }
.ticker-track span { display: block; margin-top: .5rem; font-size: max(1rem, 16px); }
.ticker-note { margin-top: 1rem; font-size: max(1rem, 16px); color: var(--mute); }
@keyframes ticker-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker-track { animation: none; padding-inline: var(--gutter); }
  .ticker-track li[aria-hidden="true"], .ticker-pause { display: none; }
}
@media (max-width: 560px) { .ticker-track li, .ticker-track img { width: 12rem; } .ticker-track img { height: 9rem; } }
/* Recently bought: photos Luke chose (cds/showcase.py), and customers' own words. The layout lives here so every
   page that shows them gets it (10/27: the light What we buy page had none, and the photos ran full size);
   photo-chrome.css recolors them over the home page's photo. */
.finds { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.finds li { position: relative; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.finds img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.finds span { display: block; padding: 10px 14px; font-size: max(1rem, 16px); color: var(--pluff); }
.words figure { margin: 0; display: grid; gap: 14px; align-content: space-between; }
.words blockquote { margin: 0; font-size: 19px; line-height: 1.5; }
.words figcaption { font-size: max(1rem, 16px); color: var(--spartina-text); }
@media (max-width: 600px) { .finds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }