:root {
  --bg: #F7F4EE;
  --surface: #EFEAE1;
  --surface-raised: #FBF9F5;
  --image-bg: #E3DACB;
  --line: #DDD5C8;
  --line-strong: #CDBFAE;
  --ink: #2A231D;
  --ink-2: #4A4038;
  --muted: #6B5F54;
  --accent: #8A4B2E;
  --accent-hover: #6E3820;
  --link-hover: #5E2F1A;
  --forest: #2F3A31;
  --forest-line: #47534A;
  --forest-muted: #B9C2B5;
  --on-forest: #E4DED3;
  --teal: #1F5F5B;
  --teal-deep: #1E4643;
  --teal-deep-line: #33605B;
  --tint-teal: #E1ECE8;
  --tint-sage: #EEF0E6;
  --tint-blush: #F4E7E1;
  --cream-on-teal: #F4EFE6;
  --cream: #FBF8F3;
  --error-bg: #F6E6DE;
  --error-text: #7A2E14;
  --wrap: 1200px;
  --pad: clamp(20px, 4vw, 40px);
  --section: clamp(56px, 8vw, 112px);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Figtree", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.05; letter-spacing: -0.02em; }
h1 { font-size: clamp(44px, 6vw, 76px); margin: 0; line-height: 1; }
h2 { font-size: clamp(32px, 4vw, 48px); margin: 0; }
h3 { font-size: 28px; margin: 0; line-height: 1.15; }

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  background: var(--ink);
  color: var(--cream);
  padding: 8px 12px;
  z-index: 40;
}
.skip:focus { top: 12px; color: var(--cream); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.site-footer :focus-visible { outline-color: var(--cream); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}
.eyebrow {
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.eyebrow-muted { color: var(--muted); }
.eyebrow-on-dark { color: var(--forest-muted); }
.lead {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--ink);
}
.prose, p.prose { margin: 0; color: var(--ink-2); line-height: 1.7; }

.button, button.button {
  display: inline-block;
  padding: 14px 22px;
  background: var(--accent);
  color: var(--cream);
  border: 1px solid transparent;
  border-radius: 3px;
  font: 600 15px var(--sans);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.button:hover, button.button:hover { background: var(--accent-hover); color: var(--cream); }
.button-cream { background: var(--cream); color: var(--ink); }
.button-cream:hover { background: #E9DCCB; color: var(--ink); }
.button-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.button-outline:hover { background: var(--ink); color: var(--bg); }
.button-hero {
  background: var(--cream);
  color: var(--ink);
  padding: 15px 24px;
}
.button-hero:hover { background: #E9DCCB; color: var(--ink); }
.button-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(251, 248, 243, 0.6);
  padding: 14px 23px;
}
.button-ghost:hover { border-color: var(--cream); color: var(--cream); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-bar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wordmark {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
}
.wordmark:hover { color: var(--ink); }
.wordmark-name { font-family: var(--serif); font-size: 26px; letter-spacing: -0.01em; }
.wordmark-salon {
  margin-top: 5px;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}
.nav-desktop { display: flex; align-items: center; gap: 28px; }
.nav-desktop a {
  font: 500 15px var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
}
.nav-desktop a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.nav-desktop a.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.header-tools { display: flex; align-items: center; gap: 18px; }
.header-phone {
  font: 500 14px var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--ink); }
.header-mobile { display: none; align-items: center; gap: 8px; }
.menu-toggle {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  background: transparent;
  border-radius: 3px;
  font: 500 14px var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.nav-panel {
  border-top: 1px solid var(--line);
  padding: 8px var(--pad) 24px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.nav-panel[hidden] { display: none; }
.nav-panel a {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid #E6DFD4;
}
.nav-panel a.is-active { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
.nav-panel-call {
  margin-top: 20px;
  font: 600 16px var(--sans) !important;
  color: var(--accent) !important;
  border-bottom: 0 !important;
}
.nav-fallback { display: none; }

.hero {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #3A3129;
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 22, 17, 0.25), rgba(28, 22, 17, 0.72));
}
.hero-copy {
  position: relative;
  width: 100%;
  padding-bottom: clamp(40px, 7vw, 88px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero .eyebrow { color: #E9DCCB; }
.hero h1 {
  color: var(--cream);
  font-size: clamp(44px, 7vw, 88px);
  max-width: 13ch;
}
.hero-sub { margin: 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: #EFE7DC; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.tagline { background: var(--teal); color: var(--cream-on-teal); }
.tagline-row {
  padding-block: clamp(22px, 3vw, 34px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px clamp(28px, 4vw, 56px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--cream-on-teal);
}
.home-intro { background: var(--tint-sage); }
.home-intro .hours-card { background: var(--bg); }

.section { padding-block: var(--section); }
.section-tight-top { padding-top: 0; }
.split { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 80px); }
.split-main { flex: 2 1 480px; display: flex; flex-direction: column; gap: 20px; }
.split-side { flex: 1 1 280px; }
.home-lead {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.35;
}
.hours-card {
  background: var(--surface);
  border-radius: 3px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hours-rows { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.hours-rows div { display: flex; justify-content: space-between; gap: 12px; }
.hours-rows span:last-child { font-weight: 600; }
.hours-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.hours-lines .hours-rows { gap: 0; }
.hours-lines .hours-rows div { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.hours-card .hours-note { margin: 0; }
.address { font-size: 16px; line-height: 1.55; }
.link-row { display: flex; gap: 16px; font: 600 14px var(--sans); }

.band { background: var(--tint-teal); padding-block: var(--section); }
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 40px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
}
.card:hover { color: var(--ink); }
.card:hover h3 { color: var(--accent); }
.frame {
  border-radius: 3px;
  overflow: hidden;
  background: var(--image-bg);
}
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-3-2 { aspect-ratio: 3 / 2; }
.frame-3-4 { aspect-ratio: 3 / 4; }
.frame-4-3 { aspect-ratio: 4 / 3; }
.frame-7-9 { aspect-ratio: 7 / 9; }
.frame-21-8 { aspect-ratio: 21 / 8; min-height: 220px; }
.card p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.more { font: 600 14px var(--sans); color: var(--accent); }
.card .more { margin-top: auto; }
.nowrap { white-space: nowrap; }

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.quotes-grid figure {
  margin: 0;
  background: var(--bg);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.quotes blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
}
.quotes figcaption {
  font: 600 13px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.quotes-list { display: flex; flex-direction: column; }
.quotes-list figure {
  margin: 0;
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quotes-list blockquote { font-size: clamp(24px, 3vw, 34px); line-height: 1.35; }

.news-block {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
}
.news-intro { flex: 1 1 240px; display: flex; flex-direction: column; gap: 16px; }
.news-list {
  flex: 2 1 520px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-list a, .post-list a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.3;
  border-top: 1px solid var(--line);
}
.news-list a:hover, .post-list a:hover, .link-line:hover { color: var(--accent); }
.arrow { font-family: var(--sans); color: var(--accent); }

.page-header {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(16px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-header + .wrap > .service-row:first-child { padding-top: clamp(16px, 2vw, 24px); }
.tone-teal { --tone: var(--tint-teal); }
.tone-sage { --tone: var(--tint-sage); }
.tone-blush { --tone: var(--tint-blush); }
.page-header.tone-teal,
.page-header.tone-sage,
.page-header.tone-blush,
.maria.tone-blush {
  background: var(--tone);
  box-shadow: 0 0 0 100vmax var(--tone);
  clip-path: inset(0 -100vmax);
}
.page-header.tone-teal,
.page-header.tone-sage,
.page-header.tone-blush { margin-bottom: clamp(20px, 3vw, 36px); }
.photo-strip {
  display: grid;
  gap: 4px;
  background: var(--bg);
}
.photo-strip figure { margin: 0; overflow: hidden; background: var(--image-bg); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-strip-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-strip-home figure { aspect-ratio: 3 / 4; }
.photo-strip-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-strip-trio figure { aspect-ratio: 4 / 5; }
@media (min-width: 640px) {
  .photo-strip-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.banner { margin-bottom: clamp(28px, 4vw, 48px); }
.back {
  font: 500 14px var(--sans);
  color: var(--muted);
  text-decoration: none;
}
.back:hover { color: var(--accent); }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack .lead + .prose { margin-top: 6px; }
.stack > .button { align-self: flex-start; }
.service-row {
  border-top: 1px solid var(--line);
  padding: clamp(24px, 3.2vw, 40px) 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.service-row .copy, .service-row .frame { flex: 1 1 360px; }
.price-banner {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
}
.price-banner:hover { color: var(--accent); }
.price-banner span:last-child { font-size: 24px; color: var(--accent); }
.price-banner small { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); font-family: var(--sans); }

.article-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 6vw, 80px);
  align-items: flex-start;
  padding-bottom: var(--section);
}
.article-main { flex: 2 1 520px; }
.article-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 24px; }
.sticky { position: sticky; top: 100px; }
.book-card {
  background: var(--teal-deep);
  color: #F1ECE3;
  border-radius: 3px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.book-card p { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.book-card .button { background: var(--bg); color: var(--ink); }
.book-card .button:hover { background: #E9DCCB; color: var(--ink); }
.book-card a.call {
  color: #F1ECE3;
  font: 500 15px var(--sans);
  text-align: center;
  text-decoration: none;
}
.side-links { display: flex; flex-direction: column; }
.side-links a, .link-line {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.side-label { margin: 0 0 8px; }

.price-groups {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 5vw, 72px);
  align-items: flex-start;
  padding-bottom: var(--section);
}
.price-group { flex: 1 1 300px; }
.price-group-wide { flex: 2 1 520px; }
.price-group h2 {
  font-size: clamp(28px, 3vw, 36px);
  margin: 0 0 12px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--ink);
}
.prices { width: 100%; border-collapse: collapse; }
.prices th, .prices td {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
  text-align: left;
  font-weight: 500;
  font-size: 16px;
}
.prices td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 20px; }
.prices .note { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--muted); }

.inset {
  margin-top: 28px;
  background: var(--surface);
  border-radius: 3px;
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.inset .portrait { flex: 0 0 140px; }
.inset .copy { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; }
.inset p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.portrait-sabre img { object-position: 50% 45%; transform: scale(1.42); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: clamp(20px, 3vw, 32px) clamp(16px, 2.4vw, 28px);
  padding-bottom: var(--section);
}
.person {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
.person:hover { color: var(--ink); }
.person strong { font-family: var(--serif); font-size: 24px; font-weight: 400; display: block; }
.person em { display: block; margin-top: 4px; font: 600 13px var(--sans); font-style: normal; color: var(--accent); }
.person .role { display: block; font-size: 14px; color: var(--muted); font-style: normal; }

.bio {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 6vw, 80px);
  align-items: flex-start;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: var(--section);
}
.bio-side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
.bio-main { flex: 2 1 480px; display: flex; flex-direction: column; gap: 22px; }
.bio-main p { margin: 0; color: var(--ink-2); }
.lists {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.lists div { display: flex; flex-direction: column; gap: 12px; }
.lists .edu { flex: 2 1 280px; }
.lists .enjoys { flex: 1 1 180px; }
.lists ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
  padding-bottom: var(--section);
}
.contact-facts { flex: 1 1 300px; display: flex; flex-direction: column; gap: 32px; }
.contact-facts h2 { font-family: var(--serif); font-size: 26px; line-height: 1.3; letter-spacing: 0; font-weight: 400; }
.contact-facts a.phone {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--ink);
  text-decoration: none;
}
.map-frame {
  flex: 1.6 1 400px;
  min-height: 420px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--image-bg);
  border: 1px solid var(--line);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(0.35); }
.social { display: flex; gap: 20px; font: 600 14px var(--sans); }

.feature {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.feature:hover { color: var(--ink); }
.feature .frame, .feature .copy { flex: 1 1 360px; }
.feature .copy { display: flex; flex-direction: column; gap: 14px; }
.meta { margin: 0; font-size: 14px; color: var(--muted); }
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 clamp(24px, 4vw, 48px);
}
.post-list a { font-size: 22px; }

.post {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) var(--pad) var(--section);
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-2);
}
.post h1 { font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04; }
.post h2 { font-size: 32px; line-height: 1.2; margin-top: 12px; }
.post h3 { font-size: 23px; font-weight: 500; line-height: 1.3; }
.post .lead { font-style: italic; font-size: clamp(22px, 2.4vw, 26px); line-height: 1.35; }
.post p { margin: 0; }
.post ul, .post ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.post strong { color: var(--ink); }
.post img { border-radius: 3px; }
.post p img {
  display: block;
  max-width: min(100%, 420px);
  height: auto;
  margin: 0 0 16px;
}
.post figure { margin: 0; }
.post figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }
.post .alignleft { float: left; margin: 0 16px 12px 0; max-width: min(280px, 46%); }
.post .alignright { float: right; margin: 0 0 12px 16px; max-width: min(280px, 46%); }
.post .aligncenter { display: block; margin-inline: auto; }
.post h3 span { font-weight: 400; font-style: italic; color: var(--accent); }
.cta {
  margin-top: 12px;
  background: var(--surface);
  border-radius: 3px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta p { margin: 0; }
.cta-title { font-family: var(--serif); font-size: 26px; line-height: 1.3; color: var(--ink); }

.closing {
  margin: 12px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.closing em { color: var(--accent); }
.maria {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding-top: clamp(32px, 4.5vw, 56px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.maria-copy { flex: 1.2 1 420px; display: flex; flex-direction: column; gap: 20px; }
.maria-copy h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; }
.maria-copy .tag {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--ink-2);
}
.maria-photo { flex: 1 1 320px; }
.actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.video-list { display: flex; flex-direction: column; gap: 24px; padding-bottom: var(--section); }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--image-bg); border-radius: 3px; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px;
  padding-bottom: var(--section);
}
.product { text-align: center; text-decoration: none; color: var(--ink); }
.product h2 { font-size: 28px; margin-bottom: 12px; }
.narrow { max-width: 960px; }

.form-layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  align-items: flex-start;
  padding-bottom: var(--section);
}
.form-card {
  flex: 2 1 480px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(24px, 4vw, 44px);
}
.form-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 24px; }
.form-side .phone {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--ink);
  text-decoration: none;
}
form.inquiry { display: flex; flex-direction: column; gap: 28px; }
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}
.fields label, .inquiry > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 600 14px var(--sans);
}
.span-2 { grid-column: 1 / -1; }
input, textarea {
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
  font: 400 16px var(--sans);
  color: var(--ink);
}
input { height: 50px; padding: 0 14px; }
textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; }
input:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
legend { font: 600 14px var(--sans); padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  font: 500 15px var(--sans);
  cursor: pointer;
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip:hover span { border-color: var(--ink); }
.hint { font-size: 14px; font-weight: 400; color: var(--muted); }
.alert {
  margin: 0;
  padding: 12px 14px;
  background: var(--error-bg);
  border-radius: 3px;
  color: var(--error-text);
  font-size: 15px;
}
.alert p { margin: 0; }
.alert ul { margin: 8px 0 0; padding-left: 18px; }
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.send-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.send-row button { height: 52px; padding: 0 28px; font-size: 16px; }
.thanks { display: flex; flex-direction: column; gap: 16px; padding: 20px 0; }
.thanks h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; }

.site-footer { background: var(--teal-deep); color: var(--on-forest); }
.footer-inner { padding: clamp(48px, 7vw, 88px) var(--pad) 32px; display: flex; flex-direction: column; gap: 56px; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--teal-deep-line);
}
.footer-phone {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1;
  color: var(--bg);
  text-decoration: none;
}
.footer-phone:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 40px;
}
.footer-brand, .site-footer p { margin: 0; font-size: 15px; line-height: 1.6; }
.logo-plate {
  align-self: flex-start;
  background: var(--bg);
  border-radius: 3px;
  padding: 14px 18px;
  display: inline-block;
}
.logo-plate img { display: block; width: 200px; max-width: 100%; height: auto; }
.footer-map { color: var(--bg); font-weight: 600; }
.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.footer-links a { color: var(--on-forest); text-decoration: none; }
.footer-links a:hover { color: var(--bg); text-decoration: underline; }
.footer-badge { margin-top: 40px; line-height: 0; }
.hours-note, .site-footer .hours-note { color: var(--forest-muted); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--forest-muted);
  padding-top: 24px;
  border-top: 1px solid var(--teal-deep-line);
}

@media (min-width: 1080px) {
  .nav-panel { display: none; }
}
@media (max-width: 1079px) {
  .nav-desktop, .header-tools { display: none; }
  .header-mobile { display: flex; }
  .nav-fallback {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
    padding: 8px var(--pad) 20px;
  }
  .nav-fallback a {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid #E6DFD4;
  }
}
@media (max-width: 860px) {
  .sticky, .bio-side { position: static; }
  .post .alignleft, .post .alignright { float: none; display: block; margin: 0 0 12px; max-width: 100%; }
}