/* COASTAL MOWTOWN, Lawn and Garden Services (formerly Shane's Lawns & Garden Service).
   Forked from the factory HOTLINE template, rethemed 2026-08-28 to the new logo.
   Coastal, not tradie-green: navy panels like the wordmark, turquoise actions like the
   water, sand bands like the beach, grass green kept only for the growing things.
   Every value below was sampled straight off the logo artwork:
     #012E50 navy / #2AA4B9 ocean / #7FD8E4 foam / #427332 grass / #63912E mower lime
     / #F0D8BE sand.
   Same ruled-grid, zero-radius poster bones. Type: Sora (headings) + Inter (body). */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

:root {
  --bg: #ffffff;
  --ink: #0d2334;
  --ink-dim: rgba(13, 35, 52, .70);
  --rule: #d3e2e7;
  --panel: #012E50;
  --panel-deep: #01223C;
  --panel-ink: #ffffff;
  --panel-ink-dim: rgba(255, 255, 255, .80);
  --grass: #3c6a2d;
  --lime: #63912E;
  --ocean: #2AA4B9;
  --ocean-deep: #17798C;
  --foam: #7FD8E4;
  --sand: #F0D8BE;
  --sand-wash: #FBF3E7;
  --accent: #2AA4B9;
  --accent-ink: #04263f;
  --wash: #f1f8fa;
}


body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
dl, dd, dt { margin: 0; }
blockquote { quotes: none; }

::selection { background: var(--panel); color: #fff; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- display type ---------- */

h1, h2, h3, .section-h, .hero-name, .call-h, .stat-value, .brand-name, .foot-brand {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- eyebrows ---------- */

.eyebrow {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grass);
  margin-bottom: 0.9rem;
}
.eyebrow-panel { color: var(--foam); }

/* ---------- layout primitives ---------- */

.section, .section-plain { padding-block: clamp(3rem, 7vw, 5.5rem); border-bottom: 1px solid var(--rule); }
.section { padding-inline: clamp(1.25rem, 6vw, 6rem); }
.section-plain { padding-inline: 0; }
.section-plain > .section-head { padding-inline: clamp(1.25rem, 6vw, 6rem); }

.section-head { max-width: 60rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section-h { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
.section-lede {
  margin-top: 0.9rem;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  max-width: 42rem;
  color: var(--ink-dim);
}

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem clamp(1.25rem, 6vw, 6rem);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--panel);
}
.brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.brand-name { font-size: clamp(0.98rem, 2.6vw, 1.2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-right { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.head-nav { display: none; gap: 1.3rem; font-weight: 600; font-size: 0.94rem; }
.head-nav a { padding-bottom: 2px; border-bottom: 2px solid transparent; }
.head-nav a:hover, .head-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.head-cta {
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.55rem 1.05rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--accent);
  white-space: nowrap;
}
.head-cta:hover { background: var(--panel); border-color: var(--panel); color: #fff; }

/* mobile: the name can't fit beside the logo, so the logo carries the brand.
   The number lives in the hero and the sticky call bar instead. */
.brand-name { display: none; }
.head-cta-tel { display: none; }
.head-right { gap: 0.6rem; }

/* burger dropdown, sitting beside Book Shane */
.head-menu { position: relative; flex: 0 0 auto; }
.head-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 38px;
  padding: 0 9px;
  background: var(--bg);
  border: 2px solid var(--panel);
}
.head-menu summary::-webkit-details-marker { display: none; }
.head-menu summary span { display: block; height: 2px; background: var(--panel); }
.head-menu[open] summary { background: var(--panel); }
.head-menu[open] summary span { background: #fff; }
.head-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 10.5rem;
  display: grid;
  background: var(--bg);
  border: 2px solid var(--panel);
  box-shadow: 0 12px 28px rgba(1, 46, 80, .18);
  z-index: 50;
}
.head-menu-panel a {
  padding: 0.8rem 1.05rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--rule);
}
.head-menu-panel a:last-child { border-bottom: none; }
.head-menu-panel a:hover, .head-menu-panel a[aria-current="page"] { background: var(--panel); color: #fff; }

/* ---------- hero — copy over the slideshow ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 6vw, 6rem) clamp(4.6rem, 9vw, 6.5rem);
  border-bottom: 2px solid var(--panel);
  display: grid;
  align-content: center;
  min-height: min(92svh, 50rem);
}
/* Neutral charcoal wash, not a green one — the slideshow is already all grass,
   and a green overlay on green photos left nothing for the logo to sit against. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(1, 34, 60, .74), rgba(1, 34, 60, .46) 45%, rgba(1, 34, 60, .78));
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
}
/* The logo is green-on-transparent, so over grass it disappeared. It now sits on
   a white plaque with a gold rule — the way it was drawn to be seen. */
.hero-logo {
  width: clamp(196px, 32vw, 268px);
  height: auto;
  background: #fff;
  padding: clamp(0.85rem, 2.4vw, 1.3rem);
  border: 3px solid var(--ocean);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5);
}
.hero-name { font-size: clamp(1.9rem, 5.5vw, 3.4rem); max-width: 16ch; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .4); }
.hero-sub {
  max-width: 34rem;
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.5rem 0.95rem;
  border: 2px solid var(--panel);
  background: var(--wash);
}
.hero-rating .stars { color: var(--ocean-deep); letter-spacing: 0.08em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.hero .btn-ghost { color: #fff; border-color: #fff; }
.hero .btn-ghost:hover { background: #fff; color: var(--panel); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.9rem 1.6rem;
  border: 2px solid var(--panel);
  background: var(--panel);
  color: #fff;
}
.btn:hover { background: var(--panel-deep); border-color: var(--panel-deep); }
.btn-book {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-book:hover { background: var(--ocean-deep); border-color: var(--ocean-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--panel); }
.btn-ghost:hover { background: var(--panel); color: #fff; }
.btn-ghost-panel { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.btn-ghost-panel:hover { background: #fff; color: var(--panel); }
.section-cta { margin-top: clamp(1.8rem, 4vw, 2.6rem); display: flex; flex-wrap: wrap; gap: 0.8rem; }
.section-plain .section-cta { padding-inline: clamp(1.25rem, 6vw, 6rem); }

/* ---------- slideshow (hero background work reel) ---------- */

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  background: rgba(1, 34, 60, .86);
  color: #fff;
  padding: 0.7rem clamp(1.25rem, 6vw, 6rem);
}
.slide-no { font-family: "Sora", sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--panel-ink-dim); }
.slide-tag { font-weight: 600; font-size: clamp(0.88rem, 1.7vw, 1.02rem); }
.slide-dots {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  display: flex;
  gap: 0.45rem;
  z-index: 3;
}
.slide-dots button {
  width: 10px; height: 10px;
  border: 2px solid #fff;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.slide-dots button.active { background: var(--accent); border-color: var(--accent); }

/* ---------- before / after ---------- */

.ba-note { font-weight: 600; color: var(--ink-dim); font-size: 0.9rem; margin-top: 0.6rem; }
.ba-row { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.ba-label {
  display: inline-block;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.8rem;
  margin-bottom: 0.9rem;
}
.ba-label-before { background: var(--sand-wash); color: var(--ink); border: 2px solid var(--sand); }
.ba-label-after { background: var(--panel); color: #fff; border: 2px solid var(--panel); }
.ba-grid { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.ba-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--rule); }
.ba-grid figure { position: relative; }
.ba-grid figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  font-size: 0.78rem; font-weight: 600;
  background: rgba(1, 34, 60, .84); color: #fff;
  padding: 0.35rem 0.6rem;
}

/* ---------- reviews ---------- */

.rev-summary {
  display: grid;
  gap: 1.2rem;
  background: var(--panel);
  color: #fff;
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.25rem, 6vw, 6rem);
  border-block: 2px solid var(--panel-deep);
}
.rev-score { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.rev-num { font-family: "Sora", sans-serif; font-weight: 700; font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1; }
.rev-stars { color: var(--sand); font-size: 1.3rem; letter-spacing: 0.1em; }
.rev-meta { font-weight: 600; color: var(--panel-ink-dim); }
.rev-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rev-tag {
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
}
.rev-tag b { color: var(--foam); font-weight: 700; margin-left: 0.3rem; }

.voices-carousel { padding-inline: clamp(1.25rem, 6vw, 6rem); margin-top: clamp(1.4rem, 3vw, 2rem); }
.voices-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border: 1px solid var(--rule);
}
.voices-grid::-webkit-scrollbar { display: none; }
/* the carousel is keyboard-scrollable, so it needs a visible focus ring */
.voices-grid:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.voice {
  padding: clamp(1.3rem, 3vw, 1.8rem);
  scroll-snap-align: start;
  border-right: 1px solid var(--rule);
  background: var(--bg);
}
.voices-nav { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.1rem; }
.voices-btn {
  width: 2.7rem;
  height: 2.7rem;
  border: 2px solid var(--panel);
  background: var(--bg);
  color: var(--panel);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.voices-btn:hover { background: var(--panel); color: #fff; }
.voice-quote { font-size: 1.02rem; line-height: 1.55; }
.voice-quote::before { content: "\201C"; color: var(--ocean); font-family: "Sora", sans-serif; font-weight: 700; margin-right: 0.15rem; }
.voice-cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grass);
}
.voice-cite span { color: var(--ink-dim); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- services ---------- */

.rate-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 2px solid var(--panel);
  border-left: 2px solid var(--panel);
}
.rate {
  padding: clamp(1.4rem, 3.5vw, 2rem);
  border-right: 2px solid var(--panel);
  border-bottom: 2px solid var(--panel);
}
.rate-name { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.12rem; margin-bottom: 0.45rem; }
.rate-desc { color: var(--ink-dim); font-size: 0.96rem; }

/* ---------- photo strip ---------- */

.strip-fig { position: relative; border-block: 2px solid var(--panel); }
.strip-fig img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.strip-bar {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  background: var(--panel);
  color: #fff;
  padding: 0.7rem clamp(1.25rem, 6vw, 6rem);
}
.strip-tag { font-weight: 600; font-size: clamp(0.88rem, 1.7vw, 1.02rem); }

/* ---------- service area ---------- */

.area-wall { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.area-chip {
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--panel);
  background: var(--bg);
  color: var(--ink);
}
.area-chip:hover { background: var(--panel); color: #fff; }

/* ---------- about block ---------- */

.about-grid { display: grid; grid-template-columns: 1fr; border-block: 2px solid var(--panel); }
.about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: 100%; }
.about-copy {
  background: var(--panel);
  color: #fff;
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.25rem, 6vw, 6rem);
}
.about-h { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 1.1rem; color: #fff; }
.about-body { color: var(--panel-ink-dim); max-width: 46rem; }
.about-body + .about-body { margin-top: 0.9rem; }
.about-copy .section-cta { margin-top: 1.6rem; }

/* ---------- FAQ ---------- */

.faq-list { max-width: 52rem; }
.faq-item { border: 2px solid var(--panel); margin-bottom: 0.8rem; background: var(--bg); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 1rem 1.2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--ocean-deep); flex: 0 0 auto; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { background: var(--wash); }
.faq-a { padding: 0 1.2rem 1.1rem; color: var(--ink-dim); }

/* ---------- contact / call panel ---------- */

.call {
  background: var(--panel);
  color: #fff;
  padding: clamp(2.8rem, 7vw, 5rem) clamp(1.25rem, 6vw, 6rem);
}
.call-inner { max-width: 70rem; }
.call-h { font-size: clamp(1.9rem, 6vw, 3.2rem); color: #fff; margin-bottom: 0.9rem; }
.call-phone {
  display: block;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--foam);
  overflow-wrap: anywhere;
  margin-bottom: 1.4rem;
}
.call-phone:hover { color: #fff; }
.call-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.call-details { display: grid; grid-template-columns: 1fr; border-top: 2px solid rgba(255,255,255,.4); }
.call-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  padding: 0.85rem 0;
  border-bottom: 2px solid rgba(255,255,255,.4);
}
.call-row dt {
  flex: 0 0 8.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--panel-ink-dim);
  align-self: center;
}
.call-row dd { font-weight: 600; }
.call-row dd a { border-bottom: 2px solid var(--foam); }

/* ---------- footer ---------- */

.site-foot {
  background: var(--panel-deep);
  color: #fff;
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.25rem, 6vw, 6rem) calc(clamp(2rem, 5vw, 3.2rem) + 3.6rem);
}
.foot-inner { max-width: 70rem; }
.foot-brand { font-size: clamp(1.3rem, 4vw, 1.9rem); margin-bottom: 0.5rem; }
.foot-meta { font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: 0.3rem; }
.foot-areas { font-size: 0.88rem; color: rgba(255,255,255,.6); margin-top: 0.4rem; max-width: 54rem; }
.foot-hours { font-size: 0.88rem; color: rgba(255,255,255,.72); margin-top: 0.5rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.1rem; font-weight: 600; font-size: 0.94rem; }
.foot-nav a { border-bottom: 2px solid var(--foam); padding-bottom: 1px; }
.foot-social { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.9rem; font-weight: 600; font-size: 0.94rem; }
.foot-social a { border-bottom: 2px solid var(--sand); padding-bottom: 1px; }
.foot-formerly { margin-top: 1rem; font-size: 0.86rem; color: rgba(255,255,255,.7); }
.foot-formerly a { font-weight: 700; color: #fff; border-bottom: 2px solid var(--foam); padding-bottom: 1px; }

/* ---------- fixed mobile call bar ---------- */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  background: var(--panel);
  color: #fff;
  border-top: 2px solid var(--panel-deep);
}
.callbar-text {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.callbar-btn {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 1.25rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--accent);
}

/* ---------- inner-page hero ---------- */

.page-hero {
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.25rem, 6vw, 6rem);
  border-bottom: 1px solid var(--rule);
  background: var(--wash);
}
.page-hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: 0.7rem; }
.page-hero p { color: var(--ink-dim); max-width: 44rem; }

/* ---------- motion (armed by motion.js adding .motion) ---------- */

.motion [data-rise] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease-out, transform .45s ease-out;
}
.motion [data-rise].in { opacity: 1; transform: none; }

/* ---------- desktop / tablet ---------- */

@media (min-width: 720px) {
  .callbar { display: none; }
  .site-foot { padding-bottom: clamp(2rem, 5vw, 3.2rem); }
  .brand-name { display: block; }
  .head-right { gap: 1rem; }
  .ba-grid { grid-template-columns: repeat(3, 1fr); }
  .rate-grid { grid-template-columns: repeat(2, 1fr); }
  .voices-grid { grid-auto-columns: 50%; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-media img { aspect-ratio: auto; min-height: 26rem; }
  .rev-summary { grid-template-columns: auto 1fr; align-items: center; gap: 2.5rem; }
}

/* The full nav only unfolds once there is room for it beside the name. Below
   this the burger holds the nav, because a squeezed brand name is worse than
   an extra tap. */
@media (min-width: 1024px) {
  .head-nav { display: flex; }
  .head-menu { display: none; }
  .head-cta-tel { display: inline; }
}

@media (min-width: 1040px) {
  .rate-grid { grid-template-columns: repeat(3, 1fr); }
  /* the services wall runs 8 cards — 4 across keeps the ruled grid square at
     every breakpoint (1 / 2 / 4) with no half-empty last row */
  .rate-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .voices-grid { grid-auto-columns: 33.3334%; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-rise] { opacity: 1 !important; transform: none !important; }
  .slide { opacity: 0; }
  .slide.active { opacity: 1; }
}


/* ---------- coastal layer (2026-08-28 rebrand) ----------
   The bits that make it read surfy rather than just "navy instead of green":
   a wave crest where the navy panels meet the white page, a sand band, and
   foam-tinted hovers. One inline SVG, tiled, so there is nothing to download. */

.wave-top { position: relative; }
.wave-top::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 20px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H120 V9 C108 16 96 3 84 8 C72 13 60 3 48 8 C36 13 24 3 12 8 C8 9.7 4 9.7 0 9 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 120px 20px;
}

/* the line under the hero rating that carries the old name */
.hero-formerly {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
  max-width: 32rem;
}
.hero-formerly a { border-bottom: 2px solid var(--ocean); padding-bottom: 1px; white-space: nowrap; }
.hero-formerly a:hover { color: var(--foam); border-bottom-color: var(--foam); }

/* the one warm band: sand under the services wall, the beach in the emblem */
.section-sand { background: var(--sand-wash); border-bottom-color: var(--sand); }
.section-sand .rate { background: rgba(255, 255, 255, .55); }

/* inner-page heroes get the sea-foam wash with a thin ocean rule under it */
.page-hero {
  background: linear-gradient(180deg, #f6fbfc, var(--wash));
  border-bottom: 2px solid var(--ocean);
}

/* chips and cards pick up the water on hover instead of going flat green */
.area-chip:hover { background: var(--ocean); border-color: var(--ocean); color: var(--accent-ink); }
.voices-btn:hover { background: var(--ocean); border-color: var(--ocean); color: var(--accent-ink); }
.tip-card:hover { border-color: var(--ocean); background: var(--wash); }

/* header: the name is short enough now that it can ride beside the mark on mobile */
.brand-logo { width: auto; height: 40px; object-fit: contain; }
.brand-name { display: block; font-size: clamp(0.95rem, 3.4vw, 1.2rem); }
/* Below 480px the header CTA and the brand name fight for the same row and the
   name loses, which on a rebrand launch is the one thing that cannot happen. The
   sticky call bar at the bottom of the screen carries the identical Book Shane
   action at all times, so the header one stands down and the name gets the room. */
@media (max-width: 479px) {
  .head-cta { display: none; }
  .brand-name { font-size: 1.02rem; }
  .brand-logo { height: 38px; }
}
@media (max-width: 360px) { .brand-name { font-size: 0.92rem; } .brand-logo { height: 32px; } }

/* inline links inside prose blocks, so the name-change link is visibly a link */
.about-body a { color: #fff; font-weight: 700; border-bottom: 2px solid var(--foam); padding-bottom: 1px; }
.about-body a:hover { color: var(--foam); }
.faq-a a { font-weight: 700; color: var(--panel); border-bottom: 2px solid var(--ocean); padding-bottom: 1px; }
.faq-a a:hover { color: var(--ocean-deep); }
.namecard a { font-weight: 700; color: var(--panel); border-bottom: 2px solid var(--ocean); padding-bottom: 1px; }

/* the announcement post, and the old-name page it links to */
.notice {
  border: 2px solid var(--ocean);
  background: var(--wash);
  padding: clamp(1.3rem, 3.5vw, 1.9rem) clamp(1.3rem, 4vw, 2.1rem);
  max-width: 52rem;
}
.notice-label {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ocean-deep);
  margin-bottom: 0.6rem;
}
.notice-h {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.65rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
}
.notice p { color: var(--ink-dim); }
.notice p + p { margin-top: 0.7rem; }
.notice-go { display: inline-block; margin-top: 1rem; font-weight: 700; color: var(--panel); border-bottom: 2px solid var(--ocean); padding-bottom: 2px; }
.notice-go::after { content: " \2192"; }

.namecard {
  display: grid;
  gap: 0.9rem;
  border: 2px solid var(--panel);
  padding: clamp(1.2rem, 3.5vw, 1.7rem);
  max-width: 46rem;
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
}
.namecard dt { font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ocean-deep); }
.namecard dd { font-weight: 600; margin-top: 0.15rem; }
.namecard-row + .namecard-row { border-top: 1px solid var(--rule); padding-top: 0.9rem; }

@media (prefers-reduced-motion: reduce) { .wave-top::before { transition: none; } }

/* --- TIPS-CSS-START (generated by build-tips-garden.mjs, do not edit by hand) --- */
/* LAWN TIPS — hub + articles. Same grammar as the rest of the site:
   1px --rule borders, --wash panels, Sora headings, Inter body. */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding: 0.8rem clamp(1.25rem, 6vw, 6rem);
  border-bottom: 1px solid var(--rule);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-dim);
}
.crumbs a { color: var(--panel); }
.crumbs a:hover { text-decoration: underline; }

.page-hero-cta { margin-top: 1.4rem; }

/* ---------- cards ---------- */
.tips-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 700px) { .tips-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tips-grid { grid-template-columns: repeat(3, 1fr); } }

.tip-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.3rem 1.4rem 1.4rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tip-card:hover { border-color: var(--panel); background: var(--wash); transform: translateY(-2px); }
.tip-card-q {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.tip-card-a {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tip-card-go {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--panel);
}
.tip-card-go::after { content: " \2192"; }

.tips-all { margin-top: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 700; }
.tips-all a { color: var(--panel); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.tips-all a::after { content: " \2192"; }

/* ---------- article ---------- */
.answer-box {
  max-width: 46rem;
  background: var(--panel);
  color: var(--panel-ink);
  padding: clamp(1.2rem, 3.5vw, 1.7rem) clamp(1.2rem, 4vw, 1.9rem);
  margin-bottom: clamp(2rem, 5vw, 2.8rem);
}
.answer-label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.answer-text { font-size: clamp(1.02rem, 2vw, 1.14rem); line-height: 1.55; }

.prose { max-width: 46rem; }
.prose h2 {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: clamp(2rem, 4.5vw, 2.6rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p { margin-top: 0.9rem; color: var(--ink-dim); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose em { font-style: italic; }
.prose ul, .prose ol { margin-top: 1rem; display: grid; gap: 0.6rem; }
.prose li { position: relative; padding-left: 1.45rem; color: var(--ink-dim); line-height: 1.6; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.65rem;
  height: 2px;
  background: var(--grass);
}
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; padding-left: 2.2rem; }
.prose ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.02em;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  color: #fff;
  background: var(--panel);
  padding: 0.3rem 0.5rem;
  min-width: 1.5rem;
  text-align: center;
}

.tip-cta {
  max-width: 46rem;
  margin-top: clamp(2.4rem, 5vw, 3.2rem);
  padding-top: clamp(1.3rem, 3vw, 1.8rem);
  border-top: 1px solid var(--rule);
}
.tip-cta-line {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) { .tip-card { transition: none; } }