@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800&family=Merriweather:wght@400;700&display=swap");

:root {
  --bg: #f2efe9;
  --bg-soft: #faf8f3;
  --surface: rgba(255, 253, 250, 0.95);
  --surface-strong: #fffefc;
  --text: #21302a;
  --muted: #5e6d66;
  --line: rgba(33, 48, 42, 0.1);
  --line-strong: rgba(33, 48, 42, 0.18);
  --accent: #6d8a7e;
  --accent-deep: #466257;
  --accent-soft: #d8e2dc;
  --cta-start: color-mix(in srgb, var(--accent-deep) 88%, white);
  --cta-end: color-mix(in srgb, var(--text) 94%, black);
  --cta-start-hover: color-mix(in srgb, var(--cta-start) 88%, white);
  --cta-end-hover: color-mix(in srgb, var(--cta-end) 86%, white);
  --cta-shadow: color-mix(in srgb, var(--accent-deep) 30%, transparent);
  --shadow: 0 24px 56px rgba(33, 48, 42, 0.08);
  --shadow-soft: 0 16px 30px rgba(33, 48, 42, 0.06);
  --footer-bg: linear-gradient(180deg, rgba(32, 43, 38, 0.99), rgba(25, 34, 30, 0.99));
  --footer-surface: rgba(255, 255, 255, 0.05);
  --footer-line: rgba(255, 255, 255, 0.1);
  --footer-text: #eef5f0;
  --footer-muted: #c8d8d0;
  --page-space: 38px;
  --section-space: 42px;
  --layout-gap: 18px;
  --hero-gap: 28px;
  --hero-padding: 56px 40px;
  --card-padding: 28px;
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --container: min(1180px, calc(100% - 32px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Source Sans 3", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.32), transparent 28%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 48%, var(--bg) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.08);
  outline-offset: 3px;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

.site-header,
.page-main,
.site-footer-inner {
  width: var(--container);
  margin: 0 auto;
}

.page-main {
  padding: var(--page-space) 0 calc(var(--page-space) * 1.9);
}

.section,
.page-intro,
.hero,
.trust-strip,
.split-section,
.service-grid,
.photo-grid,
.trust-grid,
.faq-list,
.contact-grid,
.services-layout,
.info-grid,
.footer-grid,
.legal-hero,
.legal-stack {
  display: grid;
  gap: var(--layout-gap);
}

.section {
  padding: var(--section-space) 0;
}

.section + .section,
.trust-strip + .section {
  border-top: 1px solid var(--line);
}

.page-intro {
  max-width: 58rem;
  padding: calc(var(--section-space) + 4px) 0 18px;
}

.split-section,
.contact-grid {
  grid-template-columns: 0.94fr 1.06fr;
}

.services-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-grid,
.trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.photo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.faq-list,
.footer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(3rem, 7vw, 5.8rem);
  max-width: 10ch;
}

h2 {
  font-size: clamp(2rem, 5vw, 3.7rem);
  max-width: 16ch;
}

h3 {
  font-size: clamp(1.35rem, 3vw, 2rem);
}

p,
li,
dd,
dt,
label {
  line-height: 1.8;
}

.hero-copy p,
.page-intro p,
.section-heading p,
.service-card p,
.trust-card p,
.faq-item p,
.service-item p,
.card-panel p,
.footer-note,
.cta-copy p,
.story-card p,
.legal-card p,
.legal-summary p,
.breadcrumbs,
.hours-list,
.social-links,
.info-item dd {
  color: var(--muted);
  font-size: 1rem;
}

.page-main a:not(.button):not(.brand):not(.nav-cta):not(.staff-link) {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.2em;
}

.page-main a:not(.button):not(.brand):not(.nav-cta):not(.staff-link):hover,
.page-main a:not(.button):not(.brand):not(.nav-cta):not(.staff-link):focus-visible {
  color: var(--text);
}

.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(43, 31, 24, 0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand-logo {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-strong));
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.42);
  object-fit: cover;
  flex: 0 0 auto;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brand-copy strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-copy span {
  color: var(--muted);
  font-size: 0.82rem;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle-label span,
.nav-toggle-label::before,
.nav-toggle-label::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle-label::before {
  transform: translateY(-6px);
}

.nav-toggle-label::after {
  transform: translateY(4px);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.95rem;
}

.site-nav a:not(.nav-cta),
.footer-links a,
.footer-legal a,
.button-link,
.social-links a {
  color: var(--muted);
  transition: color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta):focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible,
.button-link:hover,
.button-link:focus-visible,
.social-links a:hover,
.social-links a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--text);
  transform: translateY(-1px);
}

.button,
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.button:hover,
.button:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-1px);
}

.button-primary,
.nav-cta {
  color: #fdfcf8;
  background: linear-gradient(180deg, var(--cta-start), var(--cta-end));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 30px var(--cta-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  opacity: 1;
  filter: none;
}

.button-primary:hover,
.button-primary:focus-visible,
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  color: #ffffff;
  background: linear-gradient(180deg, var(--cta-start-hover), var(--cta-end-hover));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 22px 34px color-mix(in srgb, var(--accent-deep) 36%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-primary:focus-visible,
.site-nav .nav-cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent);
  outline-offset: 3px;
}

.button-primary:active,
.site-nav .nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 12px 22px var(--cta-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.button-secondary {
  color: #ffffff;
  background: #1f3d2b;
  border: none;
  font-weight: 700;
  box-shadow: 0 18px 30px rgba(31, 61, 43, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  color: #ffffff;
  background: #2a5a3f;
  box-shadow: 0 22px 34px rgba(31, 61, 43, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.button-secondary:focus-visible {
  outline: 3px solid rgba(42, 90, 63, 0.28);
  outline-offset: 3px;
}

.button-secondary:active {
  transform: scale(0.98);
  box-shadow: 0 10px 18px rgba(31, 61, 43, 0.2);
}

.button-link {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.availability-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 38ch;
}

.hero {
  grid-template-columns: 0.96fr 1.04fr;
  gap: var(--hero-gap);
  align-items: center;
  margin-bottom: 12px;
  padding: var(--hero-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-strong), color-mix(in srgb, var(--surface) 78%, white));
  box-shadow: var(--shadow);
}

.hero-copy {
  display: grid;
  gap: 18px;
  align-content: center;
}

.hero-copy .eyebrow,
.hero-copy p,
.hero-copy h1 {
  margin: 0;
}

.hero-panel,
.hero-image-card,
.service-card,
.trust-card,
.staff-card,
.service-list,
.faq-item,
.card-panel,
.info-panel,
.cta-banner,
.legal-card,
.legal-summary,
.editorial-aside,
.local-facts-card,
.service-aside {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.hero-panel {
  min-height: 520px;
  padding: 18px;
  border-radius: var(--radius-xl);
}

.hero-image-card {
  width: 100%;
  height: 100%;
  min-height: 460px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg-soft) 100%);
}

.hero-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-card {
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface-strong) 84%, white);
  box-shadow: var(--shadow-soft);
}

.photo-card img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.photo-card-feature {
  grid-column: 1 / -1;
}

.trust-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 0 12px;
  border-top: 1px solid var(--line);
}

.trust-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  text-align: center;
}

.trust-strip-item span {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}

.story-card,
.info-panel,
.card-panel,
.editorial-aside,
.local-facts-card,
.service-aside,
.legal-card,
.legal-summary {
  padding: var(--card-padding);
  border-radius: var(--radius-xl);
}

.service-card,
.trust-card,
.faq-item,
.service-list {
  height: 100%;
  padding: calc(var(--card-padding) - 2px);
  border-radius: 24px;
}

.service-card,
.trust-card,
.service-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-card-top,
.service-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.service-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-strong));
  color: var(--accent-deep);
  font-weight: 800;
}

.service-card h3,
.trust-card h3,
.faq-item h3,
.card-panel h2,
.service-list h2 {
  margin-bottom: 10px;
}

.service-list h2,
.legal-summary h2,
.legal-card h2 {
  max-width: none;
}

.service-item + .service-item {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.service-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 60%, white);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-item {
  padding: 8px 0 18px;
  border-bottom: 1px solid var(--line);
}

.info-item dd {
  margin: 0;
}

.info-item:last-child,
.info-item:nth-last-child(2) {
  border-bottom: 0;
  padding-bottom: 0;
}

.hours-list,
.social-links {
  margin: 0;
  padding-left: 20px;
}

.hours-list {
  display: grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.hours-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.hours-list strong {
  color: var(--text);
  flex: 0 0 auto;
}

.hours-list span {
  text-align: right;
}

.social-links li + li {
  margin-top: 8px;
}

.map-card {
  margin: 20px 0 22px;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
}

.map-embed {
  width: 100%;
  min-height: 260px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg-soft) 100%);
}

.legal-hero {
  grid-template-columns: 1.02fr 0.98fr;
  align-items: start;
  padding: calc(var(--section-space) + 4px) 0 14px;
}

.legal-stack {
  gap: 18px;
}

.cta-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: calc(var(--card-padding) + 2px);
  border-radius: 30px;
}

.guarantees {
  padding: var(--card-padding);
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.guarantees h2 {
  max-width: 24ch;
  margin-bottom: 18px;
}

.guarantees-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.guarantees-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}

.guarantees-list li:last-child {
  border-bottom: 0;
}

.guarantees-list strong {
  color: var(--accent);
  margin-right: 6px;
  font-weight: 700;
}

/* Named technicians.
 *
 * Its own card family rather than .trust-card, which is styled to read as a
 * list of facts: uniform, text-only, three wide. A roster rendered in those
 * read as more facts. A technician you can ask for by name is the most
 * specific thing on the page and the hardest claim for a competitor to copy,
 * so the section leads with people: an initial medallion for a visual anchor,
 * the speciality as an accent chip rather than grey body copy, handles as
 * tappable pills, and a tighter auto-fit grid so a seven-person team reads as
 * a team instead of a column of near-empty cards.
 *
 * Every colour is a theme token, and .staff-card joins the shared card-surface
 * rule above, so all 124 themes keep their own palette with no per-theme CSS.
 */
.staff-section .section-heading {
  margin-bottom: 20px;
}

.staff-grid {
  display: grid;
  /* auto-fit, so the roster fills the row it is given and collapses on its
     own at narrow widths — no breakpoint to keep in sync with .trust-grid. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  /* Each card is as tall as its own content. Stretching them to match the
     row meant one technician with two handles gave everyone beside her a
     half-empty card — the exact airy, low-signal look this section is
     meant to shed. */
  align-items: start;
}

.staff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 24px;
  border-radius: 24px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.staff-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

/* Same gradient + ink pairing as .service-icon, which is already proven
   readable across every generated theme. */
.staff-avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-strong));
  /* A hairline ring so the medallion still reads as an object on the themes
     whose accent-soft is barely distinguishable from their card surface. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent-deep);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.staff-card h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.2;
}

.staff-specialty {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.staff-accolade {
  margin: 0;
}

.staff-accolade span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.staff-accolade span::before {
  content: "\2605";
  font-size: 0.95em;
}

/* Earned by having an accolade, not hand-picked — see render_staff_html. */
.staff-card-featured {
  border-color: var(--accent);
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 62%);
  box-shadow: var(--shadow);
}

/* What a technician is cleared to do, synced from the POS's skill tags.
   Outline chips, deliberately quieter than the filled .staff-specialty above
   them: the speciality is the owner's sentence about a person, these are the
   menu they can be booked for. Same pill shape so the card reads as one
   family rather than three competing badge styles. */
.staff-skills {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-skill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.staff-links {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.staff-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}

.staff-link:hover,
.staff-link:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
}

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

  .staff-card:hover {
    transform: none;
  }
}

.gallery-credit {
  margin-top: 12px;
  color: var(--muted);
}

.gallery-credit strong {
  color: var(--accent);
  font-weight: 700;
}

/* A technician with synced portfolio photos shows their latest work in the
   medallion instead of an initial. */
.staff-avatar-photo {
  overflow: hidden;
  padding: 0;
}

.staff-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The roster preview ends in a link to /team/ when it is cut short. */
.staff-more {
  margin: 22px 0 0;
}

/* A technician's own page (/team/<name>/): the badges, chips and handles sit
   under the intro sentence in the same pill family as the roster card. */
.staff-profile .staff-accolade,
.staff-profile .staff-specialty {
  display: inline-block;
  margin: 4px 8px 0 0;
}

.staff-profile .staff-skills,
.staff-profile .staff-links {
  margin-top: 12px;
}

.staff-profile .button-row {
  margin-top: 22px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}

.review-card {
  margin: 0;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.review-card blockquote {
  margin: 8px 0 12px;
}

.review-card blockquote p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.review-stars {
  margin: 0;
  color: var(--accent);
  letter-spacing: 2px;
}

.review-card figcaption {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.review-tech {
  margin: 10px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.review-more {
  margin: 20px 0 0;
}

/* In the footer the profiles sit on one line after the phone number; the
   bulleted list shape is kept for the contact page body. */
.site-footer .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-left: 0;
  list-style: none;
}

.site-footer .social-links li + li {
  margin-top: 0;
}

.site-footer {
  margin-top: 18px;
  padding: 18px 0 34px;
  border-top: 1px solid var(--line);
}

.site-footer-inner {
  display: grid;
  gap: 20px;
  padding: 30px;
  border: 1px solid var(--footer-line);
  border-radius: 30px;
  background: var(--footer-bg);
  box-shadow: 0 28px 52px rgba(24, 18, 16, 0.18);
}

.site-footer-inner .card-panel {
  border-color: var(--footer-line);
  background: var(--footer-surface);
  box-shadow: none;
}

.site-footer-inner,
.site-footer-inner h2,
.site-footer-inner strong,
.site-footer-inner a {
  color: var(--footer-text);
}

.site-footer-inner p,
.site-footer-inner .hours-list,
.site-footer-inner .social-links,
.site-footer-inner .footer-legal,
.site-footer-inner .footer-links,
.site-footer .brand-copy span,
.site-footer .footer-note {
  color: var(--footer-muted);
}

.site-footer .hours-list li {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.footer-top,
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.footer-top {
  justify-content: space-between;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
}

.footer-note {
  margin: 0;
}

.footer-note-meta {
  font-size: 0.92rem;
}

.theme-grid-two,
.editorial-story-grid,
.local-trust-grid,
.service-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
}

@media (max-width: 1024px) {
  .hero,
  .trust-strip,
  .split-section,
  .contact-grid,
  .legal-hero,
  .cta-banner,
  .section-heading,
  .services-layout,
  .faq-list,
  .footer-grid,
  .theme-grid-two,
  .editorial-story-grid,
  .local-trust-grid,
  .service-story-grid {
    grid-template-columns: 1fr;
  }

  .service-grid,
  .photo-grid,
  .trust-grid,
  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-panel {
    min-height: 420px;
  }
}

@media (max-width: 760px) {
  .page-main {
    padding: 30px 0 64px;
  }

  .section {
    padding: 34px 0;
  }

  .site-header {
    top: 10px;
    border-radius: 28px;
    align-items: flex-start;
    padding: 14px;
  }

  .nav-toggle-label {
    display: inline-flex;
    margin-left: auto;
  }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--surface-strong);
    box-shadow: var(--shadow-soft);
  }

  .site-nav a {
    padding: 12px 14px;
    border-radius: 16px;
  }

  .nav-toggle:checked + .nav-toggle-label span {
    opacity: 0;
  }

  .nav-toggle:checked + .nav-toggle-label::before {
    transform: translateY(2px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label::after {
    transform: translateY(0) rotate(-45deg);
  }

  .nav-toggle:checked ~ .site-nav {
    display: flex;
  }

  .service-grid,
  .photo-grid,
  .trust-grid,
  .trust-strip,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 40px 24px;
  }

  .hero-panel,
  .hero-image-card {
    min-height: 360px;
  }

  .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .button,
  .button-row .button {
    width: 100%;
  }

  .service-card-top,
  .service-head,
  .hours-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .hours-list span {
    text-align: left;
  }

  .footer-top,
  .footer-links,
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Living-signal layer: trust strip wrap, hero hours note, tel button polish. */
.trust-strip-item span {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.hero .availability-note {
  font-size: 0.95rem;
  line-height: 1.5;
}
.button-primary[href^="tel:"] {
  letter-spacing: 0.01em;
}

/* Balance compact trust cards with the service list they sit beside. */
.trust-grid-compact {
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
.trust-grid-compact .trust-card {
  min-height: 120px;
  padding: 24px;
  justify-content: center;
  gap: 6px;
}
.trust-grid-compact .trust-card h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 4px;
}
.trust-grid-compact .trust-card p {
  font-size: 1rem;
  line-height: 1.45;
}
.service-aside .hours-list {
  margin-bottom: 20px;
}

/* Site-wide card + grid normalization. Keeps repeated cards as one family. */
.faq-list {
  grid-template-columns: 1fr;
  gap: 16px;
}
.service-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.faq-item h3,
.service-card h3,
.trust-card h3 {
  line-height: 1.25;
}
.faq-item h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  max-width: 56ch;
}
.faq-item p {
  max-width: 72ch;
}
.card-panel .faq-list {
  gap: 12px;
}
.trust-card h3 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}
.trust-card {
  min-height: 120px;
  justify-content: center;
}

/* Real-menu price styling and featured service cards. */
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
}
.price-list li:last-child {
  border-bottom: none;
}
.price-list .price {
  font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;
}
.service-note {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--muted);
}
.service-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  vertical-align: middle;
}
.service-card-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-soft);
}
.service-card .service-meta {
  font-weight: 600;
  color: var(--accent-deep);
  margin: 0;
}

/* Grouped services menu (salon.service_menu): one row per service with its
   variants priced side by side, a few groups, waxing in two columns. */
.menu-board {
  display: grid;
  gap: 48px;
}

.menu-board-group h2 {
  max-width: none;
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  font-size: 1.4rem;
}

.menu-board-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-board-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.menu-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.menu-board-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}

.menu-board-prices {
  display: flex;
  gap: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  white-space: nowrap;
}

.menu-board-price b {
  color: var(--text);
  font-weight: 600;
}

.menu-board-desc {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.menu-board-compact .menu-board-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}

@media (max-width: 640px) {
  .menu-board-compact .menu-board-list { grid-template-columns: 1fr; }
}

/* "Next opening: Today 3:15 PM · Book", filled in by /_lacquer/next-opening.js
   under the header. Hidden until it has a real time to show. */
.next-opening {
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.95rem;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.next-opening a {
  margin-left: 6px;
  font-weight: 600;
  color: var(--accent-deep);
}

/*
 * Music sessions (/music/ and the homepage invitation). Theme tokens only, so
 * the page sits in whichever of the 120 palettes the salon uses; the line art
 * is currentColor and takes the accent.
 */
.music-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--layout-gap, 40px);
  align-items: center;
  padding: var(--section-space, 72px) 0 calc(var(--section-space, 72px) * 0.6);
}

.music-hero h1 {
  margin: 8px 0 18px;
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.music-lede {
  max-width: 36rem;
  font-size: 1.12rem;
  color: var(--muted);
}

.music-hero-art {
  color: var(--accent);
}

.music-hero-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.music-hero-art {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl, 28px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.music-narrow {
  max-width: 46rem;
}

.music-narrow p {
  color: var(--muted);
}

.music-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
}

.music-detail {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.music-detail-wide {
  grid-column: 1 / -1;
}

.music-detail dt {
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.music-detail dd {
  margin: 0;
  color: var(--text);
}

.music-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.music-step {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}

.music-step h3 {
  margin: 14px 0 6px;
}

.music-step p {
  margin: 0;
  color: var(--muted);
}

.music-step-num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-weight: 700;
  color: var(--accent-deep);
}

.music-list {
  margin: 18px 0;
  padding-left: 1.2em;
  color: var(--text);
}

.music-list li + li {
  margin-top: 8px;
}

.music-note {
  font-weight: 600;
}

.music-form {
  display: grid;
  gap: 22px;
  max-width: 52rem;
  margin-top: 24px;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl, 28px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.music-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.music-fieldset > legend {
  margin-bottom: 14px;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 20px;
  margin-bottom: 16px;
}

.music-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-weight: 600;
  color: var(--text);
}

.music-grid .music-field {
  margin-bottom: 0;
}

.music-field input,
.music-field select,
.music-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 400;
}

.music-field textarea {
  min-height: 0;
  resize: vertical;
}

.music-field input:focus-visible,
.music-field select:focus-visible,
.music-field textarea:focus-visible,
.music-choices input:focus-visible,
.music-check input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.music-hint {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--muted);
}

.music-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.music-choices > legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
  color: var(--text);
}

.music-choices label,
.music-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  color: var(--text);
}

.music-choices-wrap label {
  min-width: 11rem;
}

.music-choices input,
.music-check input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent-deep);
  flex: none;
}

.music-check + .music-check {
  margin-top: 12px;
}

.music-guardian {
  padding: 20px;
  border: 1px solid var(--accent-soft, var(--line));
  border-radius: 18px;
  background: var(--bg-soft, var(--bg));
}

.music-form.is-adult .music-guardian,
.music-form.has-instrument .music-field[data-instrument-other] {
  display: none;
}

.music-privacy,
.music-required-note {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.music-required-note {
  margin: 0;
}

.music-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.music-submit {
  justify-self: start;
}

.music-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.music-form-status:empty {
  display: none;
}

.music-form-status {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-soft, var(--bg));
}

/* No-JS results: the router redirects to /music/#applied or #apply-error. */
.music-status {
  display: none;
  max-width: 52rem;
  margin-top: 24px;
  padding: 22px 26px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  background: var(--surface);
}

.music-status:target,
.music-status.is-shown {
  display: block;
}

.music-status-error {
  border-color: #b04a3a;
}

.music-status h3 {
  margin: 0 0 6px;
}

/* Live music: homepage section, the weekly lineup, the musician directory and
   profiles. Warm ivory and champagne mixed into each theme's own surface and
   accent, so the section reads as part of the salon's site in light and dark
   themes alike -- a quiet lounge card, not a ticketing page. */
.music-home-card,
.music-gig,
.music-roster-card,
.music-profile {
  --music-ivory: color-mix(in srgb, var(--surface) 90%, #f3e3c3);
  --music-champagne: color-mix(in srgb, var(--accent) 45%, #c4a56c);
}

.music-home-card {
  display: grid;
  gap: 28px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid color-mix(in srgb, var(--line) 50%, #c4a56c);
  border-radius: var(--radius-xl, 28px);
  background: var(--music-ivory);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.music-home-copy {
  max-width: 40rem;
  margin: 0 auto;
}

.music-home-title {
  margin: 8px 0 12px;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.music-home-lede {
  margin: 0;
  font-size: 1.08rem;
  color: var(--muted);
}

.music-home-drinks,
.music-drinks {
  margin: 10px 0 0;
  font-weight: 600;
  color: var(--accent-deep, var(--accent));
}

.music-drinks {
  margin: -6px 0 18px;
}

.music-home-actions {
  justify-content: center;
  align-items: center;
}

.music-home-apply,
.music-week-link {
  font-weight: 600;
  color: var(--accent-deep, var(--accent));
  text-underline-offset: 4px;
}

.music-lineup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 16px;
  text-align: left;
}

.music-lineup-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px;
  border: 1px dashed color-mix(in srgb, var(--line) 60%, #c4a56c);
  border-radius: 18px;
  text-align: center;
  font-style: italic;
  color: var(--muted);
}

.music-gig {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--music-champagne);
  border-radius: 18px;
  background: var(--surface);
}

.music-gig-when {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep, var(--accent));
}

.music-gig h3 {
  margin: 0;
  font-size: 1.12rem;
}

.music-gig h3 a {
  color: inherit;
  text-decoration-color: var(--music-champagne);
  text-underline-offset: 4px;
}

.music-gig-what {
  margin: 2px 0 0;
  font-size: 0.94rem;
  color: var(--muted);
}

.music-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 60%, #c4a56c);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-family: var(--font-heading, inherit);
  font-size: 1.3rem;
}

.music-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-week .section-heading {
  align-items: end;
}

/* /music/musicians/ and /music/musicians/<slug>/ */
.music-roster h1 {
  margin: 10px 0 8px;
}

.music-roster-lede {
  max-width: 44rem;
  color: var(--muted);
}

.music-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 20px;
  margin-top: 28px;
}

.music-roster-card {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--music-ivory);
}

.music-roster-card.is-featured {
  border-color: var(--music-champagne);
  box-shadow: var(--shadow-soft);
}

.music-roster-card .music-avatar {
  width: 88px;
  height: 88px;
  margin-bottom: 6px;
}

.music-roster-card h2,
.music-roster-card h3 {
  margin: 0;
  font-size: 1.2rem;
}

.music-roster-card a {
  color: inherit;
}

.music-badge {
  justify-self: start;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--music-champagne);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.music-profile {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--layout-gap, 40px);
  align-items: start;
  margin-top: 20px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl, 28px);
  background: var(--music-ivory);
}

.music-profile-photo {
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}

.music-profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-profile-photo.is-empty {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-family: var(--font-heading, inherit);
  font-size: 4rem;
}

.music-profile h1 {
  margin: 4px 0 6px;
}

.music-profile-what {
  margin: 0 0 18px;
  color: var(--muted);
}

.music-profile-bio p {
  margin: 0 0 12px;
}

.music-profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.music-profile-links a {
  font-weight: 600;
  color: var(--accent-deep, var(--accent));
}

.music-profile h2 {
  margin: 24px 0 8px;
  font-size: 1.15rem;
}

.music-profile-dates {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .music-hero-art svg {
    animation: music-rise 900ms ease-out both;
  }

  .music-art-notes {
    animation: music-float 6s ease-in-out infinite;
    transform-origin: center;
  }

  @keyframes music-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes music-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
}

@media (max-width: 760px) {
  .music-hero,
  .music-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .music-hero-art,
  .music-profile-photo {
    max-width: 22rem;
  }

  .music-submit {
    justify-self: stretch;
  }
}

/* Storefront Sage
   Storefront's layout (photo hero, price-list menu, dark showpiece runway,
   guarantee band, visit + FAQ, mobile call bar) in Local Trust's palette:
   warm cream, sage, Merriweather + Source Sans 3. The sage layer at the end
   of this file softens it: pill buttons, a floating pill header, the hero as
   one rounded card, rounded photos and white cards with soft shadows.
   Built from the Montana Nails redesign concept. Theme-core is prepended, so
   these rules also restyle the shared header, footer and base pages. */

:root {
  --sf-porcelain: var(--bg);
  --sf-mist: var(--accent-soft);
  --sf-ink: var(--text);
  --sf-jade: var(--accent);
  --sf-jade-deep: var(--accent-deep);
  --sf-gold: #bfa06a;
  --sf-gold-soft: #d9c49b;
  --sf-on-ink: #e9f0ec;
  --sf-on-ink-muted: #b9cbc4;
  --radius-xl: 4px;
  --radius-lg: 4px;
  --radius-md: 2px;
  /* Distance from the page container's edge to the screen edge, as a negative
     margin. Percentages would resolve against grid cells, so use the viewport. */
  --sf-bleed: calc((100vw - min(1180px, 100vw - 32px)) / -2);
  --sf-gutter: calc((100vw - min(1180px, 100vw - 32px)) / 2);
}

html { scroll-padding-top: 90px; }

body {
  background: var(--sf-porcelain);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sf-gold);
  outline-offset: 3px;
}

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}

h1 { font-size: clamp(2.5rem, 4.6vw, 4.1rem); max-width: 16ch; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); max-width: 22ch; }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); }

/* Eyebrows come from shared base pages. Keep them, quiet and in sentence case. */
.eyebrow {
  margin: 0 0 12px;
  color: var(--sf-jade);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.hero-copy p,
.page-intro p,
.section-heading p,
.service-card p,
.trust-card p,
.faq-item p,
.service-item p,
.card-panel p,
.cta-copy p,
.story-card p,
.legal-card p,
.legal-summary p,
.info-item dd,
.hours-list {
  font-size: 1.02rem;
  line-height: 1.65;
}

.page-main a:not(.button):not(.brand):not(.nav-cta):not(.staff-link) {
  color: var(--sf-jade-deep);
  text-decoration-color: color-mix(in srgb, var(--sf-gold) 70%, transparent);
  text-decoration-thickness: 1px;
}

/* ---------- Header: a plain bar across the top ---------- */
.site-header {
  top: 0;
  width: 100%;
  margin: 0;
  padding: 14px max(16px, calc((100% - 1180px) / 2));
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: color-mix(in srgb, var(--sf-porcelain) 94%, transparent);
  box-shadow: none;
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
}

.brand-copy strong {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.brand-copy span { font-size: 0.85rem; }

.site-nav { gap: 26px; font-size: 1rem; font-weight: 500; }
.site-nav a:not(.nav-cta) { color: var(--sf-ink); }
.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta):focus-visible { color: var(--sf-jade); transform: none; }
.site-nav a[aria-current="page"] {
  color: var(--sf-jade);
  transform: none;
  text-decoration: underline;
  text-decoration-color: var(--sf-gold);
  text-underline-offset: 6px;
}

/* ---------- Buttons: square-ish, jade ---------- */
.button,
.nav-cta {
  min-height: 50px;
  padding: 0 26px;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0;
}

.button:hover,
.button:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible { transform: none; }

.button-primary,
.nav-cta,
.site-nav .nav-cta {
  color: #fff;
  background: var(--sf-jade);
  border: 1px solid var(--sf-jade);
  box-shadow: none;
}

.button-primary:hover,
.button-primary:focus-visible,
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  color: #fff;
  background: var(--sf-jade-deep);
  border-color: var(--sf-jade-deep);
  box-shadow: none;
}

.nav-cta,
.site-nav .nav-cta { min-height: 42px; padding: 0 20px; }

.button-secondary {
  color: var(--sf-jade);
  background: transparent;
  border: 1px solid var(--sf-jade);
  box-shadow: none;
}

.button-secondary:hover,
.button-secondary:focus-visible {
  color: #fff;
  background: var(--sf-jade);
  box-shadow: none;
}

.button-primary:focus-visible,
.button-secondary:focus-visible,
.site-nav .nav-cta:focus-visible {
  outline: 2px solid var(--sf-gold);
  outline-offset: 3px;
}

.button-secondary:active { transform: none; }

.button-link {
  color: var(--sf-jade-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--sf-gold);
  text-underline-offset: 5px;
}

/* ---------- Surfaces: flat, hairline borders, no pills ---------- */
.hero-panel,
.service-card,
.trust-card,
.staff-card,
.service-list,
.faq-item,
.card-panel,
.info-panel,
.cta-banner,
.legal-card,
.legal-summary,
.local-facts-card,
.service-aside,
.story-card,
.review-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

.section + .section,
.trust-strip + .section { border-top: 1px solid var(--line); }

.page-main { padding-top: 0; }

.page-intro {
  padding: 72px 0 24px;
}

.page-intro h1 { max-width: 20ch; }

.page-intro p { margin: 0; }

/* The intro already carries its own bottom space; don't stack a full section gap on it. */
.page-intro + .section { padding-top: 40px; }

.service-item p { margin: 0; }

.breadcrumbs { font-size: 0.95rem; }

.service-meta {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sf-ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.service-icon { display: none; }

/* ---------- Home: hero ---------- */
.sf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: clamp(560px, 78vh, 780px);
  border-bottom: 1px solid var(--line);
}

.sf-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 64px 72px 0;
}

.sf-place {
  margin: 0 0 22px;
  color: var(--sf-jade);
  font-weight: 600;
}

.sf-hero h1 { margin: 0; }

.sf-lede {
  margin: 22px 0 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: 1.18rem;
  line-height: 1.6;
}

.sf-hero .button-row { margin-top: 32px; }

.sf-rating:empty { display: none; }

.sf-rating {
  max-width: 560px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.sf-rating .booking-trust-note {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* One star as a marker, not a row of five: the note states the real rating. */
.sf-rating .booking-trust-note::before {
  content: "\2605";
  margin-right: 8px;
  color: var(--sf-gold);
}

/* The photo runs from the column edge to the right edge of the screen. */
.sf-hero-photo {
  position: relative;
  margin-right: var(--sf-bleed);
  min-height: 100%;
}

.sf-hero-photo .hero-image-card {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--sf-mist);
  box-shadow: none;
}

.sf-hero-photo .hero-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* No photo on record: the copy takes the whole hero. */
.sf-hero-photo:empty { display: none; }

.sf-hero:has(.sf-hero-photo:empty) {
  grid-template-columns: 1fr;
  min-height: 0;
}

.sf-hero:has(.sf-hero-photo:empty) .sf-hero-copy {
  padding: 96px 0 80px;
}

/* ---------- Home: services as a two-column price list ---------- */
.sf-services { padding-top: 96px; }

.sf-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
}

.sf-menu .service-card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 20px;
  row-gap: 4px;
  align-content: start;
  height: auto;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.sf-menu .service-card-top { display: contents; }

.sf-menu .service-card .service-meta {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0;
}

.sf-menu .service-card h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: "Source Sans 3", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
}

.sf-menu .service-card > p:not(.service-meta) {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
}

/* ---------- Home: the showpiece band (gallery runway) ---------- */
.sf-showpiece:empty { display: none; }

.sf-showpiece {
  background: var(--sf-ink);
  box-shadow: 0 0 0 100vmax var(--sf-ink);
  clip-path: inset(0 -100vmax);
  color: var(--sf-on-ink);
}

.sf-showpiece .section {
  padding: 96px 0 80px;
  border: 0;
}

.sf-showpiece .section-heading { margin-bottom: 40px; }
.sf-showpiece .eyebrow { display: none; }
.sf-showpiece h2 { color: #fff; }
.sf-showpiece .section-heading p { color: var(--sf-on-ink-muted); }
.sf-showpiece .gallery-credit { color: var(--sf-on-ink-muted); }
.sf-showpiece .gallery-credit strong { color: var(--sf-gold-soft); }

.sf-showpiece .photo-grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-inline: var(--sf-bleed);
  padding: 0 var(--sf-gutter) 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sf-gutter);
  scrollbar-color: var(--sf-gold) transparent;
}

.sf-showpiece .photo-card {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  scroll-snap-align: start;
}

.sf-showpiece .photo-card img {
  width: auto;
  height: 500px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
}

.sf-showpiece .photo-card:nth-child(even) img {
  height: 440px;
  margin-top: 60px;
}

/* ---------- Home: reviews ---------- */
.sf-reviews:empty { display: none; }

.sf-reviews .section { border-top: 0; }
.sf-reviews .eyebrow { display: none; }

.review-grid {
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 48px;
}

.review-card {
  padding: 0;
  border: 0;
  background: none;
}

.review-stars {
  color: var(--sf-gold);
  letter-spacing: 3px;
}

.review-card blockquote p {
  color: var(--sf-ink);
  font-size: 1.05rem;
  line-height: 1.65;
}

.review-card:first-child blockquote p {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  line-height: 1.38;
}

.review-card figcaption {
  color: var(--muted);
  font-weight: 500;
}

.review-more { margin-top: 36px; }

/* ---------- Team (home preview, /team/ index and profiles) ---------- */
.sf-staff:empty { display: none; }

.sf-staff .section {
  border-top: 1px solid var(--line);
}

.staff-section .eyebrow { display: none; }

.staff-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.staff-card {
  padding: 24px;
  border-radius: 4px;
  gap: 10px;
}

.staff-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--sf-jade);
}

.staff-avatar {
  width: 52px;
  height: 52px;
  background: var(--sf-mist);
  box-shadow: none;
  color: var(--sf-jade-deep);
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 400;
}

.staff-card h3 {
  font-size: 1.35rem;
}

.staff-card h3 a {
  color: var(--sf-ink) !important;
  text-decoration: none !important;
}

.staff-card h3 a:hover { text-decoration: underline !important; }

.staff-card-featured {
  border-color: var(--line);
  border-top: 3px solid var(--sf-gold);
  background: #fff;
  box-shadow: none;
}

.staff-accolade span {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #8a6f3c;
  font-weight: 600;
}

.staff-accolade span::before { color: var(--sf-gold); }

.staff-specialty {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--sf-jade-deep);
}

.staff-skill {
  padding: 3px 9px;
  border: 0;
  border-radius: 2px;
  background: var(--sf-mist);
  color: var(--sf-ink);
  font-weight: 500;
}

.staff-link {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--sf-jade-deep);
  text-decoration: underline;
  text-decoration-color: var(--sf-gold);
  text-underline-offset: 4px;
}

.staff-link:hover,
.staff-link:focus-visible {
  background: none;
  color: var(--sf-ink);
}

.staff-more { margin-top: 28px; }

.staff-profile h1 { max-width: none; }

/* ---------- Guarantees (home and services) ---------- */
.sf-promise:empty { display: none; }

.sf-promise {
  background: var(--sf-mist);
  box-shadow: 0 0 0 100vmax var(--sf-mist);
  clip-path: inset(0 -100vmax);
}

.sf-promise .section { border: 0; }

.guarantees {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 16px 64px;
  align-items: start;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.guarantees .eyebrow { display: none; }

.guarantees h2 { grid-column: 1; margin: 0; }

.guarantees-list {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guarantees-list li {
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sf-ink) 16%, transparent);
  color: var(--muted);
  line-height: 1.55;
}

.guarantees-list li:first-child { border-top: 1px solid color-mix(in srgb, var(--sf-ink) 16%, transparent); }
.guarantees-list li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--sf-ink) 16%, transparent); }

.guarantees-list strong { color: var(--sf-ink); font-weight: 600; }

/* ---------- Home: visit and FAQ ---------- */
.sf-visit { border-top: 1px solid var(--line); }

.sf-visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.sf-address {
  margin: 20px 0 24px;
  font-size: 1.2rem;
  color: var(--sf-ink);
}

.sf-visit .hours-list { max-width: 440px; }

.sf-visit-faq .faq-list { margin: 24px 0 20px; gap: 0; }

/* ---------- FAQ rows everywhere ---------- */
.faq-list { gap: 0; }

.faq-item {
  height: auto;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.faq-item:first-child { border-top: 1px solid var(--line); }

.faq-item p { margin: 0; }

.faq-item h3 {
  margin-bottom: 6px;
  font-family: "Source Sans 3", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- Hours ---------- */
.hours-list li { border-bottom-color: var(--line); }
.hours-list strong { font-weight: 600; }

/* ---------- Services page ---------- */
.sf-services-page .service-story-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.services-layout { grid-template-columns: 1fr; gap: 0; }

.service-list {
  height: auto;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  gap: 6px;
}

.service-list:first-child { border-top: 1px solid var(--line); }

.service-list .eyebrow { display: none; }

.service-list h2 {
  margin: 0;
  font-family: "Source Sans 3", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
}

.service-head { align-items: baseline; }

.service-aside {
  position: sticky;
  top: 96px;
  padding: 32px;
  border-top: 3px solid var(--sf-gold);
}

.service-aside h2 { margin-bottom: 18px; font-size: 1.8rem; }

/* ---------- Photo grids on the gallery page and team profiles ---------- */
.photo-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.photo-card,
.photo-card-feature {
  grid-column: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--sf-mist);
  box-shadow: none;
}

.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
}

/* ---------- Contact / about / guide pages ---------- */
.map-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.map-embed { border-radius: 0; background: var(--sf-mist); }

.info-item { border-bottom-color: var(--line); }

.cta-banner {
  padding: 40px;
  border: 0;
  border-top: 3px solid var(--sf-gold);
  border-radius: 0;
  background: #fff;
}

.trust-strip-item {
  border-radius: 2px;
  box-shadow: none;
}

/* ---------- Footer: a full-width jade band ---------- */
.site-footer {
  margin-top: 0;
  padding: 72px 0 40px;
  border: 0;
  background: var(--footer-bg);
}

.site-footer-inner {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 32px;
}

.site-footer-inner .card-panel {
  padding: 0;
  border: 0;
  background: none;
}

.site-footer .eyebrow { display: none; }

.site-footer h2 {
  margin-bottom: 14px;
  font-size: 1.45rem;
  color: #fff;
}

.site-footer .brand-logo { background: #fff; border-color: transparent; }

.site-footer .button-primary {
  background: #fff;
  border-color: #fff;
  color: var(--sf-ink);
}

.site-footer .button-primary:hover,
.site-footer .button-primary:focus-visible {
  background: var(--sf-gold-soft);
  border-color: var(--sf-gold-soft);
  color: var(--sf-ink);
}

.site-footer .button-secondary {
  color: #fff;
  border-color: color-mix(in srgb, #fff 55%, transparent);
}

.site-footer .button-secondary:hover,
.site-footer .button-secondary:focus-visible {
  background: #fff;
  color: var(--sf-ink);
}

.site-footer .footer-top {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--footer-line);
}

.site-footer .footer-legal { padding-top: 8px; }

/* ---------- Mobile call bar (home and services) ---------- */
.sf-callbar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .sf-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .sf-hero-copy { padding-right: 40px; }
  .review-grid { grid-template-columns: 1fr 1fr; }
  .guarantees { grid-template-columns: 1fr; }
  .guarantees-list { grid-column: 1; grid-row: auto; }
  .sf-services-page .service-story-grid { grid-template-columns: 1fr; }
  .service-aside { position: static; }
}

@media (max-width: 860px) {
  .sf-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .sf-hero-photo {
    order: -1;
    height: 380px;
    margin-inline: var(--sf-bleed);
  }

  .sf-hero-copy { padding: 36px 0 44px; }

  .sf-menu { grid-template-columns: 1fr; }
  .sf-visit-grid { grid-template-columns: 1fr; gap: 48px; }
  .review-grid { grid-template-columns: 1fr; gap: 36px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .site-header {
    top: 0;
    align-items: center;
    border-radius: 0;
    padding: 10px 16px;
  }

  .nav-toggle-label {
    width: 44px;
    height: 44px;
    border-radius: 2px;
    flex-direction: column;
    gap: 4px;
  }

  .nav-toggle-label::before,
  .nav-toggle-label::after { transform: none; }

  .nav-toggle:checked + .nav-toggle-label::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-label::after { transform: translateY(-6px) rotate(-45deg); }

  .site-nav {
    top: 100%;
    border-radius: 0;
    border-width: 0 0 1px;
    box-shadow: none;
  }

  .site-nav a { border-radius: 2px; }

  .section { padding: 64px 0; }
  .sf-services { padding-top: 56px; }
  .sf-showpiece .section { padding: 64px 0 56px; }
  .page-intro { padding-top: 44px; }

  .sf-showpiece .photo-card img { height: 380px; }
  .sf-showpiece .photo-card:nth-child(even) img { height: 380px; margin-top: 0; }

  .guarantees-list li { padding: 14px 0; }

  /* Core stacks these on phones; a name and its price, or a day and its
     hours, read better kept on one line. */
  .service-head,
  .hours-list li {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .hours-list span { text-align: right; }

  .service-aside { padding: 24px; }

  .sf-callbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--sf-porcelain) 96%, transparent);
    border-top: 1px solid var(--line);
  }

  .sf-callbar .button { min-height: 48px; width: auto; }

  .site-body:has(.sf-callbar) .site-footer { padding-bottom: 104px; }
}

@media (max-width: 480px) {
  .sf-hero-photo { height: 320px; }
  .photo-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .staff-card,
  .button,
  .nav-cta { transition: none; }
}


/* ================= Sage layer ================= */
:root {
  --sf-gold: var(--accent);
  --sf-gold-soft: var(--accent-soft);
  --sf-on-ink: var(--footer-text);
  --sf-on-ink-muted: var(--footer-muted);
  --sf-forest: #202b26;
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
}

body {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.32), transparent 28%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 48%, var(--bg) 100%);
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.brand-copy strong { font-weight: 700; letter-spacing: -0.02em; }

/* Header: a floating pill */
.site-header {
  top: 14px;
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(43, 31, 24, 0.06);
}

/* Buttons: pills, sage gradient */
.button,
.nav-cta {
  min-height: 56px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button:hover,
.nav-cta:hover { transform: translateY(-1px); }

.button-primary,
.nav-cta,
.site-nav .nav-cta {
  color: #fdfcf8;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-deep) 88%, white), color-mix(in srgb, var(--text) 94%, black));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 30px color-mix(in srgb, var(--accent-deep) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.button-primary:hover,
.button-primary:focus-visible,
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-deep) 76%, white), color-mix(in srgb, var(--text) 82%, white));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 22px 34px color-mix(in srgb, var(--accent-deep) 36%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-cta,
.site-nav .nav-cta { min-height: 44px; }

.button-secondary {
  color: var(--accent-deep);
  background: var(--surface-strong);
  border: 1px solid var(--line-strong);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  color: var(--accent-deep);
  background: var(--surface-strong);
  border-color: var(--accent-deep);
}

/* Surfaces: white, rounded, soft shadow */
.hero-panel,
.service-card,
.trust-card,
.staff-card,
.card-panel,
.info-panel,
.cta-banner,
.legal-card,
.legal-summary,
.local-facts-card,
.service-aside,
.story-card {
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.cta-banner,
.service-aside { border-top: 1px solid var(--line); border-radius: var(--radius-lg); }

/* The home menu stays a quiet two-column price list, not a stack of cards. */
.sf-menu .service-card { background: none; box-shadow: none; border-radius: 0; }

.site-footer .button-secondary { background: transparent; }
.site-footer .button-secondary:hover,
.site-footer .button-secondary:focus-visible { background: #fff; color: var(--sf-ink); }

.staff-card-featured { border-top: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.staff-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.staff-skill { border-radius: 999px; }

/* Hero: one rounded card, photo inset instead of bleeding off the edge */
.sf-hero {
  gap: 28px;
  min-height: clamp(560px, 74vh, 720px);
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-strong), color-mix(in srgb, var(--surface) 78%, white));
  box-shadow: var(--shadow);
}

.sf-hero-copy { padding: 48px 12px 44px 26px; }

.sf-hero-photo { margin-right: 0; }

.sf-hero-photo .hero-image-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.sf-hero:has(.sf-hero-photo:empty) .sf-hero-copy { padding: 72px 26px 64px; }

/* Showpiece: forest band, rounded photos */
.sf-showpiece {
  background: var(--sf-forest);
  box-shadow: 0 0 0 100vmax var(--sf-forest);
  margin-top: 64px;
}

.sf-showpiece .photo-card img { border-radius: var(--radius-lg); }

/* Reviews: cards */
.review-grid { gap: 18px; }

.review-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.review-card:first-child blockquote p { font-size: 1.4rem; letter-spacing: -0.02em; }

/* Guarantees: sage band, list on a white card */
.guarantees-list {
  padding: 4px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.guarantees-list li,
.guarantees-list li:first-child,
.guarantees-list li:last-child { border-top: 0; border-bottom: 1px solid var(--line); }
.guarantees-list li:last-child { border-bottom: 0; }

/* FAQ and service rows: separate rounded cards */
.faq-list { gap: 12px; }

.faq-item,
.faq-item:first-child {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
}

/* Photos everywhere: rounded */
.photo-card,
.photo-card-feature { border-radius: var(--radius-md); overflow: hidden; }
.photo-card img { border-radius: var(--radius-md); }
.map-embed { border-radius: var(--radius-lg); }

.site-footer { margin-top: 0; }

@media (max-width: 860px) {
  .sf-hero { gap: 0; padding: 12px; border-radius: var(--radius-lg); }
  .sf-hero-photo { margin-inline: 0; }
  .sf-hero-photo .hero-image-card { border-radius: var(--radius-md); }
  .sf-hero-copy { padding: 32px 12px 24px; }
}

@media (max-width: 760px) {
  .site-header { top: 10px; margin-top: 10px; padding: 8px 10px 8px 14px; border-radius: 999px; }
  .site-nav { top: calc(100% + 8px); border-width: 1px; border-radius: var(--radius-md); box-shadow: var(--shadow); }
  .nav-toggle-label { border-radius: 999px; }
  .site-nav a { border-radius: 12px; }
  .faq-item, .faq-item:first-child { padding: 18px; }
  .guarantees-list { padding: 4px 18px; }
  .review-card { padding: 22px; }
  .sf-callbar {
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
    backdrop-filter: blur(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .nav-cta:hover,
  .staff-card:hover { transform: none; }
}