:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  --bg: #f7f2ef;
  --surface: #fffdfa;
  --surface-alt: #fbf6f3;
  --text: #13202a;
  --muted: #636a72;
  --accent: #d94f8e;
  --accent-dark: #a92f66;
  --border: #e8ddd7;
  --pink-soft: #fff3f8;
  --pink-line: #f0d7e2;
  --shadow: 0 18px 44px rgba(30, 24, 29, 0.08);
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

.container {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 253, 250, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 64px;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 164px;
}

.brand-badge {
  width: 82px;
  height: 46px;
  object-fit: contain;
  background: linear-gradient(180deg, #fff, var(--pink-soft));
  border: 1px solid var(--pink-line);
  border-radius: 10px;
}

.logo-mark {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

.logo-mark::first-letter {
  font-size: 1.75rem;
}

.site-header h1 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.site-header .eyebrow,
.site-header p {
  display: none;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  color: #35434b;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.top-nav a {
  white-space: nowrap;
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(217, 79, 142, 0.18);
}

.button:hover,
button:hover {
  background: var(--accent-dark);
}

.button-small {
  min-height: 32px;
  padding: 0 14px;
  color: #fff;
}

.button-secondary {
  background: #fff;
  color: var(--accent-dark);
  border: 1px solid var(--pink-line);
  box-shadow: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

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

main.container {
  padding-bottom: 42px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  min-height: 560px;
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 48px;
  background:
    linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(255, 243, 248, 0.88)),
    radial-gradient(circle at 12% 18%, rgba(217, 79, 142, 0.08), transparent 32%);
}

.hero-copy h2 {
  max-width: 420px;
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-copy > p:not(.eyebrow) {
  max-width: 440px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.hero-media {
  position: relative;
  min-height: 440px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.94), transparent 30%),
    linear-gradient(135deg, #fff7fb, #f3e3d9);
}

.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: contain;
  padding: 34px 28px 18px;
}

.hero-card,
.hero-highlights,
.hero-trust {
  display: block;
}

.hero-card {
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e4d2db;
  box-shadow: 0 16px 34px rgba(16, 24, 32, 0.08);
}

.hero-card h3 {
  margin: 8px 0 10px;
  font-size: 1.08rem;
}

.hero-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero-highlights span {
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--pink-line);
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 700;
}

.hero-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.feature-pill {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--pink-line);
  color: var(--text);
  font-size: 0.86rem;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 42px;
  background: linear-gradient(180deg, #17242d, #0f1920);
  border-radius: 14px;
  overflow: hidden;
}

.hero-stat {
  min-height: 92px;
  padding: 18px 14px;
  color: #fff;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-stat:last-child {
  border-right: 0;
}

.hero-stat strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.84rem;
}

.hero-stat span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  line-height: 1.4;
}

.section {
  margin-top: 18px;
  padding: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.section-header {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
  text-align: center;
}

.section-header h2 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(1.8rem, 3.1vw, 2.8rem);
  line-height: 1.08;
}

.section-subtitle {
  max-width: 600px;
  margin: 10px auto 0;
  color: var(--muted);
  line-height: 1.6;
}

.service-grid,
.review-grid,
.gallery-grid,
.booking-grid,
.about-grid,
.contact-grid,
.steps-grid,
.faq-grid {
  display: grid;
  gap: 18px;
}

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

.attention-strip {
  padding: 26px;
  background: #17242d;
  color: #fff;
}

.attention-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.attention-grid article {
  min-height: 146px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.attention-grid span {
  display: inline-flex;
  margin-bottom: 12px;
  color: #ffb8d7;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.attention-grid strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.08rem;
}

.attention-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.service-card,
.step-card,
.faq-card,
.review-card,
.gallery-card,
.booking-panel,
.estimate-card,
.booking-info-card,
.about-list,
.contact-card,
.contact-form-card,
.card,
.admin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.service-card {
  min-height: 172px;
  padding: 22px 18px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-card:hover,
.review-card:hover,
.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(16, 24, 32, 0.08);
  border-color: #e3c0d1;
}

.service-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border: 1px solid var(--pink-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, var(--pink-soft));
  color: var(--accent);
  font-size: 1.35rem;
}

.service-card h3,
.step-card h3,
.faq-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.service-card p,
.step-card p,
.faq-card p,
.booking-info-card li,
.about-list,
.review-card p,
.gallery-card p,
.contact-card p {
  color: var(--muted);
  line-height: 1.55;
}

.service-card .price {
  margin: 10px 0 0;
  color: var(--accent-dark);
  font-weight: 800;
}

.booking-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  align-items: start;
}

.booking-panel,
.estimate-card,
.booking-info-card,
.contact-card,
.contact-form-card,
.review-card,
.gallery-card,
.step-card,
.faq-card {
  padding: 22px;
}

.estimate-card {
  background: var(--pink-soft);
  border-color: var(--pink-line);
}

.booking-promo-card {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid #e4d2db;
  border-radius: var(--radius);
  background: #17242d;
  color: #fff;
}

.booking-promo-card h3 {
  margin: 0 0 10px;
}

.booking-promo-card p:not(.eyebrow) {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.estimate-card h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.estimate-price {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 1.8rem;
  font-weight: 800;
}

.booking-info-card {
  margin-top: 18px;
}

.booking-info-card h3,
.contact-card h3,
.contact-form-card h3 {
  margin: 0 0 14px;
}

.grid-2,
.grid-3 {
  display: grid;
  gap: 14px;
}

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

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

form {
  display: grid;
  gap: 14px;
}

label span {
  display: block;
  margin-bottom: 7px;
  color: #33424a;
  font-size: 0.78rem;
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  min-height: 40px;
  padding: 10px 12px;
}

textarea {
  min-height: 104px;
  resize: vertical;
}

.booking-hours {
  margin: -4px 0 0;
  padding: 12px 14px;
  background: #fff7fb;
  border: 1px solid #f4c4d9;
  border-radius: 10px;
  color: #6b4758;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.45;
}

.availability-message {
  margin: -4px 0 0;
  min-height: 20px;
  font-size: 0.86rem;
  line-height: 1.45;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.about-grid {
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
}

.about-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.about-copy > p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.about-list {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 18px;
  padding: 22px;
}

.about-list h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.about-list ul {
  margin: 0;
  padding-left: 18px;
}

.about-list li {
  margin-bottom: 8px;
}

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

.step-card {
  text-align: center;
}

.step-number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 800;
}

.faq-grid {
  max-width: 840px;
  margin: 0 auto;
  gap: 10px;
}

.faq-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 16px 18px;
}

.faq-card::after {
  content: "+";
  color: var(--muted);
  font-weight: 800;
}

.faq-card p {
  grid-column: 1 / -1;
  margin: 0;
}

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

.review-card {
  display: grid;
  gap: 12px;
}

.rating {
  color: #f3b321;
  letter-spacing: 1px;
}

.review-author {
  margin: 0;
  color: var(--text) !important;
  font-weight: 800;
}

.review-role {
  margin: 2px 0 0;
  font-size: 0.82rem;
}

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

.gallery-card {
  padding: 0;
  overflow: hidden;
}

.gallery-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.gallery-card p {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.85rem;
}

.contact-grid {
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  align-items: start;
}

.message {
  min-height: 18px;
  font-size: 0.86rem;
}

.footer {
  padding: 24px 0 42px;
  color: var(--muted);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 0.86rem;
}

.hidden {
  display: none !important;
}

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

.assistant-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: grid;
  justify-items: end;
  gap: 12px;
}

.assistant-toggle {
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 12px;
  box-shadow: 0 18px 34px rgba(169, 47, 102, 0.28);
}

.assistant-toggle-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 900;
}

.assistant-panel {
  width: min(380px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 94px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--pink-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(19, 32, 42, 0.2);
}

.assistant-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, #fff, var(--pink-soft));
  border-bottom: 1px solid var(--pink-line);
}

.assistant-header h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.assistant-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: #fffdfa;
  border-bottom: 1px solid var(--border);
}

.assistant-status span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--pink-line);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 800;
}

.assistant-close {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  box-shadow: none;
  border: 1px solid var(--pink-line);
  font-size: 1.2rem;
}

.assistant-messages {
  display: grid;
  gap: 10px;
  min-height: 170px;
  max-height: none;
  padding: 16px;
  overflow-y: auto;
  background: #fffdfa;
}

.assistant-message {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.assistant-message-bot {
  justify-self: start;
  background: #fff3f8;
  border: 1px solid var(--pink-line);
  color: #47323b;
}

.assistant-message-user {
  justify-self: end;
  background: #17242d;
  color: #fff;
}

.assistant-message-team {
  justify-self: start;
  background: #ffffff;
  border: 1px solid #d94f8e;
  color: #17242d;
}

.assistant-thinking {
  color: var(--muted);
  font-style: italic;
}

.assistant-suggestions {
  display: flex;
  gap: 8px;
  padding: 10px 12px 0;
  overflow-x: auto;
  background: #fffdfa;
  scrollbar-width: thin;
}

.assistant-suggestions:empty {
  display: none;
}

.assistant-suggestions button {
  flex: 0 0 auto;
  min-height: 30px;
  max-width: 210px;
  padding: 0 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 999px;
  border: 1px solid var(--pink-line);
  background: #fff;
  color: var(--accent-dark);
  box-shadow: none;
  font-size: 0.74rem;
  font-weight: 800;
}

.assistant-suggestions button:disabled,
.assistant-actions button:disabled,
.assistant-team-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.assistant-actions {
  display: none;
  gap: 8px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  background: #fffdfa;
  border-top: 1px solid rgba(239, 199, 218, 0.7);
  scrollbar-width: thin;
}

.assistant-actions button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
  background: #fff;
  color: var(--accent-dark);
  border: 1px solid var(--pink-line);
  box-shadow: none;
  font-size: 0.74rem;
  border-radius: 999px;
}

.assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}

.assistant-form input {
  min-height: 38px;
}

.assistant-form button {
  min-height: 38px;
  padding: 0 14px;
}

.assistant-team-button,
.assistant-end-button {
  background: #fff;
  color: var(--accent-dark);
  border: 1px solid var(--pink-line);
  box-shadow: none;
  white-space: nowrap;
}

.assistance-card {
  margin-top: 18px;
}

.assistance-list {
  display: grid;
  gap: 14px;
}

.assistance-thread {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fffdfa;
}

.assistance-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.assistance-thread-head p,
.assistance-thread-head small {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.assistance-thread-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.assistance-thread-actions button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff7fb;
  color: var(--accent-dark);
  border: 1px solid var(--pink-line);
  box-shadow: none;
  font-size: 0.72rem;
}

.assistance-thread-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.assistance-transcript {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.assistance-message {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7fb;
  border: 1px solid var(--pink-line);
}

.assistance-message-team {
  background: #f8fbff;
  border-color: #cdddec;
}

.assistance-message strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.76rem;
  color: var(--accent-dark);
}

.assistance-message p {
  margin: 0;
  color: var(--text);
}

.assistance-transcript-save {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.assistance-transcript-save summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--accent-dark);
  font-weight: 800;
}

.assistance-transcript-save textarea {
  width: calc(100% - 24px);
  min-height: 160px;
  margin: 0 12px 12px;
  resize: vertical;
  font: 0.78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text);
}

.assistance-transcript-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
  flex-wrap: wrap;
}

.assistance-transcript-actions button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff7fb;
  color: var(--accent-dark);
  border: 1px solid var(--pink-line);
  box-shadow: none;
  font-size: 0.72rem;
}

.assistance-reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}

.assistance-reply-formats {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.assistance-reply-formats button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  border: 1px solid var(--pink-line);
  box-shadow: none;
  font-size: 0.72rem;
}

.admin-body {
  background: #eef3f5;
}

.admin-shell {
  min-height: 100vh;
}

.owner-login {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: #07131b;
}

.owner-login-card {
  width: min(420px, 100%);
  padding: 34px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.owner-login-card h1 {
  margin: 0 0 22px;
  font-size: 2rem;
}

.owner-dashboard {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  min-height: 100vh;
}

.owner-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100vh;
  padding: 24px 18px;
  background: #07131b;
  color: #fff;
}

.owner-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.owner-brand .logo-mark,
.owner-login-card .logo-mark,
.invoice-paper .logo-mark {
  color: var(--accent);
}

.owner-brand span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.owner-nav {
  display: grid;
  gap: 6px;
}

.owner-nav a,
.owner-logout {
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  border-radius: 4px;
  font-weight: 700;
}

.owner-nav a:hover,
.owner-nav a.active,
.owner-logout:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.owner-logout {
  margin-top: auto;
}

.owner-main {
  padding: 26px;
}

.owner-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.owner-topbar h1 {
  margin: 0;
  font-size: 1.9rem;
}

.status-pill,
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef8fb;
  color: var(--accent-dark);
  font-size: 0.76rem;
  font-weight: 800;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card,
.owner-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 10px 26px rgba(12, 26, 35, 0.06);
}

.metric-card {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 20px;
}

.metric-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.metric-card strong {
  font-size: 2rem;
}

.owner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
}

.owner-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.owner-card {
  padding: 22px;
}

.owner-card h2 {
  margin: 0;
  font-size: 1.25rem;
}

.owner-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.appointment-table {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.appointment-row {
  display: grid;
  grid-template-columns: 0.75fr 1.15fr 1.15fr 0.72fr 1.15fr;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.appointment-row:last-child {
  border-bottom: 0;
}

.appointment-head {
  min-height: 42px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.appointment-row strong,
.appointment-row small {
  display: block;
}

.appointment-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.appointment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.appointment-actions button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.status-pending {
  background: #fff6df;
  color: #9a6500;
}

.status-confirmed {
  background: #e9f8ee;
  color: #167342;
}

.status-cancelled {
  background: #fdecec;
  color: #a32929;
}

.status-completed {
  background: #fde7f1;
  color: var(--accent-dark);
}

.calendar-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.calendar-item {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fbfdfe;
}

.calendar-item p {
  margin: 6px 0 10px;
  color: var(--muted);
}

.invoice-paper {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  background: #fff;
}

.invoice-top,
.invoice-meta,
.invoice-total-row,
.invoice-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.invoice-top {
  padding-bottom: 16px;
  border-bottom: 2px solid #101820;
}

.invoice-top span,
.invoice-meta p {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

.invoice-meta {
  padding: 16px 0;
}

.invoice-meta p:first-child {
  text-align: left;
}

.invoice-line {
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.invoice-total-row {
  padding-top: 10px;
  color: var(--muted);
}

.invoice-total-row.grand {
  color: var(--text);
  font-size: 1.08rem;
}

.empty-state {
  padding: 18px;
  background: #f8fbfc;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
}

.empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.empty-state p {
  margin: 0;
}

.table-empty {
  border: 0;
  border-radius: 0;
}

.content-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.content-form-grid .wide {
  grid-column: 1 / -1;
}

.email-reply-card {
  margin-top: 18px;
}

.email-portal-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff7fb;
}

.email-portal-identity span { color: var(--muted); }

.email-portal-layout {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 2fr);
  gap: 20px;
}

.email-portal-layout > aside {
  padding-right: 18px;
  border-right: 1px solid var(--border);
}

.email-portal-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.email-portal-list { display: grid; gap: 8px; }

.email-portal-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.email-portal-item span,
.email-portal-item small { display: block; }

.email-portal-item small {
  margin-top: 4px;
  color: var(--muted);
}

.email-portal-item mark {
  background: transparent;
  color: var(--pink-dark);
  font-size: .75rem;
  font-weight: 700;
}

@media (max-width: 850px) {
  .email-portal-layout { grid-template-columns: 1fr; }
  .email-portal-layout > aside {
    padding-right: 0;
    padding-bottom: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

.email-reply-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.email-reply-actions .message {
  margin: 0;
}

.gmail-inbox-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 20px;
}

.gmail-inbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfdfe;
}

.gmail-inbox-item span,
.gmail-inbox-item small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.manual-appointment-form {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fbfdfe;
}

.manual-appointment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.manual-appointment-actions .message {
  margin: 0;
}

.slides-body {
  background:
    radial-gradient(circle at 14% 10%, rgba(232, 62, 140, 0.18), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(255, 255, 255, 0.08), transparent 26%),
    #07131b;
  color: #fff;
}

.slides-board {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 44px;
}

.slides-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.slides-hero {
  min-height: 170px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.slides-kicker {
  margin: 0 0 8px;
  color: #f9bfd8;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.slides-header h1 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: 0;
}

.slides-header p:not(.slides-kicker) {
  max-width: 740px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.6;
}

.slides-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.slides-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.slide-card {
  display: grid;
  gap: 10px;
  min-height: 318px;
  padding: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.slide-card:hover {
  transform: translateY(-3px);
  border-color: rgba(249, 191, 216, 0.7);
  background: rgba(255, 255, 255, 0.12);
}

.slide-card > span {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.slide-card > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.45;
}

.mini-window {
  height: 206px;
  overflow: hidden;
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.mini-nav {
  display: grid;
  grid-template-columns: 44px repeat(3, 1fr) 58px;
  gap: 8px;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.48rem;
}

.mini-nav strong {
  color: var(--accent);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
}

.mini-nav i,
.mini-booking i,
.mini-faq i,
.mini-admin i,
.mini-admin b,
.mini-invoice i {
  display: block;
  min-height: 8px;
  background: #e9eef1;
  border-radius: 2px;
}

.mini-nav button,
.mini-hero button {
  min-height: 18px;
  padding: 0 7px;
  font-size: 0.45rem;
}

.mini-hero {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  height: calc(100% - 24px);
}

.mini-hero div {
  padding: 30px 18px;
}

.mini-hero h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  line-height: 1;
}

.mini-hero p,
.mini-confirm p {
  color: var(--muted);
  font-size: 0.62rem;
}

.mini-hero img,
.mini-about img,
.mini-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-hero img {
  object-fit: contain;
  padding: 8px;
  background: var(--pink-soft);
}

.mini-title {
  padding: 22px 18px 12px;
  text-align: center;
}

.mini-title p {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mini-title h2 {
  margin: 0;
  font-size: 1rem;
}

.mini-services,
.mini-gallery,
.mini-reviews,
.mini-steps {
  display: grid;
  gap: 8px;
  padding: 0 18px 18px;
}

.mini-services {
  grid-template-columns: repeat(3, 1fr);
}

.mini-services i,
.mini-reviews i {
  min-height: 42px;
  padding: 13px 6px;
  background: var(--pink-soft);
  border: 1px solid var(--pink-line);
  border-radius: 4px;
  font-size: 0.58rem;
  font-style: normal;
  text-align: center;
}

.mini-booking {
  display: grid;
  grid-template-columns: 1fr 1fr 0.85fr;
  gap: 8px;
  padding: 0 18px;
}

.mini-booking i {
  min-height: 34px;
}

.mini-booking b {
  grid-row: span 2;
  padding: 16px 10px;
  background: #f8fbfc;
  border: 1px solid var(--border);
  color: var(--accent-dark);
  font-size: 0.68rem;
}

.mini-about {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  height: 100%;
}

.mini-about div {
  padding: 42px 18px;
}

.mini-about h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.mini-about p {
  color: var(--muted);
  font-size: 0.62rem;
}

.mini-reviews {
  grid-template-columns: repeat(3, 1fr);
}

.mini-reviews i {
  color: #f3b321;
}

.mini-gallery {
  grid-template-columns: repeat(2, 1fr);
  height: 120px;
}

.mini-steps {
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
}

.mini-steps i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--pink-soft);
  border-radius: 999px;
  color: var(--accent);
  font-style: normal;
  font-weight: 800;
}

.mini-contact {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 12px;
  padding: 0 18px 18px;
}

.mini-contact b {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 2;
}

.mini-contact i {
  display: block;
  min-height: 90px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.mini-faq {
  display: grid;
  gap: 8px;
  padding: 0 30px;
}

.mini-faq i {
  min-height: 24px;
}

.mini-confirm {
  display: grid;
  place-content: center;
  text-align: center;
}

.mini-confirm strong {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border: 2px solid #22a06b;
  border-radius: 999px;
  color: #22a06b;
  font-size: 1.5rem;
}

.mini-confirm h2,
.mini-invoice h2 {
  margin: 0;
}

.mini-invoice {
  padding: 18px;
}

.mini-invoice strong {
  color: var(--accent);
  font-family: Georgia, serif;
  font-style: italic;
}

.mini-invoice h2 {
  float: right;
  font-size: 1rem;
}

.mini-invoice i {
  clear: both;
  margin-top: 14px;
  min-height: 20px;
}

.mini-invoice b {
  display: block;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 2px solid #101820;
  text-align: right;
}

.mini-admin {
  display: grid;
  grid-template-columns: 54px 1fr;
  background: #eef3f5;
}

.mini-admin aside {
  background: #07131b;
}

.mini-admin div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 18px;
}

.mini-admin i {
  min-height: 44px;
  background: #fff;
}

.mini-admin b {
  grid-column: 1 / -1;
  min-height: 92px;
  background: #fff;
}

.mobile-preview-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(520px, 1.28fr);
  gap: 26px;
  align-items: center;
  margin-top: 22px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
}

.mobile-preview-copy h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 3.4rem);
  line-height: 1;
}

.mobile-preview-copy p:not(.slides-kicker) {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.65;
}

.mobile-preview-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.mobile-preview-notes span {
  padding: 9px 11px;
  background: rgba(249, 191, 216, 0.14);
  border: 1px solid rgba(249, 191, 216, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.phone-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 20px;
  justify-items: center;
}

.phone-shell {
  position: relative;
  width: min(100%, 330px);
  height: 690px;
  padding: 34px 12px 18px;
  background: #05090d;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 34px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
}

.phone-speaker {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 82px;
  height: 6px;
  background: #202a32;
  border-radius: 999px;
  transform: translateX(-50%);
}

.phone-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 22px;
  background: #fff;
}

@media (max-width: 1080px) {
  .service-grid,
  .steps-grid,
  .gallery-grid,
  .metric-grid,
  .slides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero,
  .booking-grid,
  .about-grid,
  .contact-grid,
  .owner-grid,
  .attention-grid {
    grid-template-columns: 1fr;
  }

  .owner-dashboard {
    grid-template-columns: 1fr;
  }

  .owner-sidebar {
    position: static;
    height: auto;
  }

  .owner-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-media img {
    min-height: 380px;
  }

  .mobile-preview-section {
    grid-template-columns: 1fr;
  }

  .phone-preview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 22px, 1160px);
  }

  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 0;
  }

  .top-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .hero-copy,
  .section {
    padding: 28px 20px;
  }

  .hero-stats,
  .grid-2,
  .grid-3,
  .service-grid,
  .steps-grid,
  .review-grid,
  .gallery-grid,
  .about-list,
  .footer-inner,
  .metric-grid,
  .content-form-grid,
  .slides-grid {
    grid-template-columns: 1fr;
  }

  .owner-main {
    padding: 16px;
  }

  .owner-topbar,
  .owner-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .owner-nav {
    grid-template-columns: 1fr 1fr;
  }

  .appointment-head {
    display: none;
  }

  .appointment-row {
    grid-template-columns: 1fr;
  }

  .slides-header {
    justify-content: flex-start;
    padding-right: 0;
  }

  .slides-header .button {
    position: static;
  }

  .slides-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .mobile-preview-section {
    padding: 20px;
  }

  .phone-shell {
    width: min(100%, 100%);
    height: 620px;
  }

  .assistant-widget {
    right: 11px;
    bottom: 11px;
    left: 11px;
  }

  .assistant-panel {
    width: 100%;
    max-height: min(620px, calc(100vh - 86px));
  }

  .assistant-messages {
    min-height: 130px;
  }

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

  .assistant-form input {
    grid-column: 1 / -1;
  }

  .assistant-form button {
    padding: 0 8px;
  }

  .review-grid {
    display: grid;
  }

  .hero-copy h2 {
    font-size: 2.7rem;
  }
}

/* Seasonal preview: enabled only with ?theme=halloween. */
html.halloween-theme {
  color-scheme: dark;
  --bg: #100b16;
  --surface: #1b1323;
  --surface-alt: #24182e;
  --text: #fff8ee;
  --muted: #cbbfd0;
  --accent: #ff7a1a;
  --accent-dark: #d95a00;
  --border: #4a3457;
  --pink-soft: #2a1933;
  --pink-line: #6a3c62;
  --shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
}

html.halloween-theme body {
  background:
    radial-gradient(circle at 12% 6%, rgba(121, 46, 148, 0.18), transparent 28%),
    radial-gradient(circle at 88% 24%, rgba(255, 122, 26, 0.1), transparent 25%),
    var(--bg);
}

html.halloween-theme .site-header {
  background: rgba(16, 11, 22, 0.92);
  border-bottom-color: #4a3457;
}

html.halloween-theme .brand-badge {
  background: #fff8ee;
  border-color: rgba(255, 122, 26, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.08);
}

html.halloween-theme .top-nav {
  color: #eadfeb;
}

html.halloween-theme .top-nav a:not(.button):hover {
  color: #ffad69;
}

html.halloween-theme .button,
html.halloween-theme button {
  background: linear-gradient(135deg, #ff8a24, #e45e00);
  color: #1a0e08;
  box-shadow: 0 12px 26px rgba(255, 122, 26, 0.22);
}

html.halloween-theme .button:hover,
html.halloween-theme button:hover {
  background: linear-gradient(135deg, #ffa14f, #ff7410);
}

html.halloween-theme .button-secondary {
  background: transparent;
  color: #ffd4ae;
  border-color: rgba(255, 138, 36, 0.55);
  box-shadow: none;
}

html.halloween-theme .hero {
  border-color: #5d3b62;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

html.halloween-theme .hero-copy {
  position: relative;
  background:
    radial-gradient(circle at 16% 15%, rgba(255, 122, 26, 0.19), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(139, 69, 170, 0.22), transparent 34%),
    linear-gradient(160deg, #21152a, #140e1b 74%);
}

html.halloween-theme .hero-copy::before {
  content: "HALLOWEEN CLEANING SEASON";
  width: fit-content;
  margin-bottom: 12px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 138, 36, 0.48);
  border-radius: 999px;
  background: rgba(255, 122, 26, 0.1);
  color: #ffad69;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

html.halloween-theme .hero-copy::after {
  content: "✦";
  position: absolute;
  top: 28px;
  right: 34px;
  color: rgba(255, 174, 105, 0.55);
  font-size: 1.35rem;
  text-shadow: -28px 36px 0 rgba(180, 108, 208, 0.32), 18px 74px 0 rgba(255, 174, 105, 0.25);
}

html.halloween-theme .hero-copy > .eyebrow {
  display: none;
}

html.halloween-theme .hero-copy h2 {
  color: #fff8ee;
}

html.halloween-theme .hero-copy > p:not(.eyebrow) {
  color: #d7cadb;
}

html.halloween-theme .hero-media {
  background: #140e1b;
}

html.halloween-theme .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(32, 12, 42, 0.04), rgba(18, 7, 25, 0.34));
}

html.halloween-theme .hero-media img {
  filter: saturate(0.82) contrast(1.05) brightness(0.8);
}

html.halloween-theme .hero-card {
  z-index: 1;
  background: rgba(25, 15, 31, 0.94);
  color: #fff8ee;
  border-color: rgba(255, 138, 36, 0.4);
}

html.halloween-theme .hero-stat,
html.halloween-theme .feature-pill {
  background: rgba(255, 255, 255, 0.055);
  color: #fff8ee;
  border-color: rgba(255, 174, 105, 0.22);
}

html.halloween-theme .hero-stat span,
html.halloween-theme .section-subtitle,
html.halloween-theme .service-card p,
html.halloween-theme .review-card p,
html.halloween-theme .faq-card p,
html.halloween-theme .step-card p,
html.halloween-theme .about-copy p,
html.halloween-theme .contact-card p {
  color: var(--muted);
}

html.halloween-theme .section,
html.halloween-theme .service-card,
html.halloween-theme .review-card,
html.halloween-theme .gallery-card,
html.halloween-theme .faq-card,
html.halloween-theme .step-card,
html.halloween-theme .booking-panel,
html.halloween-theme .contact-card,
html.halloween-theme .contact-form-card,
html.halloween-theme .about-card {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html.halloween-theme .service-card:hover,
html.halloween-theme .review-card:hover,
html.halloween-theme .gallery-card:hover {
  border-color: rgba(255, 138, 36, 0.6);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}

html.halloween-theme .service-icon,
html.halloween-theme .step-number {
  background: rgba(255, 122, 26, 0.13);
  color: #ff9c4d;
  border-color: rgba(255, 122, 26, 0.3);
}

html.halloween-theme .price,
html.halloween-theme .rating,
html.halloween-theme .eyebrow {
  color: #ff9c4d;
}

html.halloween-theme .attention-strip {
  background: linear-gradient(135deg, #2d1737, #17101f);
  border-color: #5a3567;
}

html.halloween-theme input,
html.halloween-theme select,
html.halloween-theme textarea {
  background: #130d19;
  color: #fff8ee;
  border-color: #56365f;
}

html.halloween-theme input:focus,
html.halloween-theme select:focus,
html.halloween-theme textarea:focus {
  border-color: #ff8a24;
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.12);
}

html.halloween-theme .footer {
  background: #09060d;
  border-top: 1px solid #3d2948;
}

html.halloween-theme .assistant-panel {
  background: #1b1323;
  border-color: #5a3567;
}

@media (prefers-reduced-motion: no-preference) {
  html.halloween-theme .hero-copy::after {
    animation: halloween-twinkle 3.4s ease-in-out infinite alternate;
  }
}

@keyframes halloween-twinkle {
  from { opacity: 0.45; transform: translateY(0) rotate(-4deg); }
  to { opacity: 0.9; transform: translateY(4px) rotate(4deg); }
}

/* Halloween preview v2: light, polished, and still recognizably Kay's Cleaning. */
html.halloween-theme {
  color-scheme: light;
  --bg: #fbf4ec;
  --surface: #fffdfa;
  --surface-alt: #fff7ef;
  --text: #211827;
  --muted: #716875;
  --accent: #e96818;
  --accent-dark: #b94710;
  --border: #ead9cf;
  --pink-soft: #fff0e4;
  --pink-line: #f1c8aa;
  --shadow: 0 18px 48px rgba(59, 35, 48, 0.11);
}

html.halloween-theme body {
  background:
    radial-gradient(circle at 8% 5%, rgba(233, 104, 24, 0.09), transparent 27%),
    radial-gradient(circle at 92% 20%, rgba(105, 55, 119, 0.07), transparent 25%),
    var(--bg);
}

html.halloween-theme body::before {
  content: "Seasonal fall cleaning • Get your home guest-ready before Halloween";
  display: block;
  padding: 7px 16px;
  background: #39233f;
  color: #fff7ed;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

html.halloween-theme .site-header {
  background: rgba(255, 253, 250, 0.95);
  border-bottom-color: var(--border);
}

html.halloween-theme .top-nav {
  color: #4d3e4f;
}

html.halloween-theme .brand-badge {
  background: linear-gradient(180deg, #fff, #fff7ef);
  border-color: #f0c8ad;
  box-shadow: none;
}

html.halloween-theme .button,
html.halloween-theme button {
  background: #e96818;
  color: #fff;
  box-shadow: 0 12px 24px rgba(201, 80, 14, 0.2);
}

html.halloween-theme .button:hover,
html.halloween-theme button:hover {
  background: #b94710;
}

html.halloween-theme .button-secondary {
  background: #fff;
  color: #9f3f11;
  border-color: #efc5a7;
}

html.halloween-theme .hero {
  background: #fffdfa;
  border-color: #ead9cf;
  box-shadow: var(--shadow);
}

html.halloween-theme .hero-copy {
  background:
    radial-gradient(circle at 15% 16%, rgba(233, 104, 24, 0.1), transparent 31%),
    radial-gradient(circle at 88% 84%, rgba(109, 55, 121, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 253, 250, 0.99), rgba(255, 246, 236, 0.94));
}

html.halloween-theme .hero-copy::before {
  content: "FALL & HALLOWEEN CLEANING";
  border-color: rgba(215, 91, 21, 0.35);
  background: #fff0e4;
  color: #a84413;
}

html.halloween-theme .hero-copy::after {
  content: "✦";
  color: rgba(220, 92, 18, 0.44);
  text-shadow: -28px 36px 0 rgba(112, 60, 125, 0.18), 18px 74px 0 rgba(220, 92, 18, 0.17);
}

html.halloween-theme .hero-copy h2 {
  color: #241a28;
}

html.halloween-theme .hero-copy > p:not(.eyebrow) {
  color: #6d636f;
}

html.halloween-theme .hero-media {
  background: #f5e9df;
}

html.halloween-theme .hero-media::after {
  background: linear-gradient(180deg, transparent 54%, rgba(57, 35, 63, 0.12));
}

html.halloween-theme .hero-media img {
  filter: none;
  object-position: center;
}

html.halloween-theme .hero-card {
  background: rgba(255, 253, 250, 0.96);
  color: #241a28;
  border-color: rgba(221, 103, 34, 0.3);
}

html.halloween-theme .hero-stat,
html.halloween-theme .feature-pill {
  background: #fff;
  color: #2b202d;
  border-color: #eddad0;
}

html.halloween-theme .hero-stat span,
html.halloween-theme .section-subtitle,
html.halloween-theme .service-card p,
html.halloween-theme .review-card p,
html.halloween-theme .faq-card p,
html.halloween-theme .step-card p,
html.halloween-theme .about-copy p,
html.halloween-theme .contact-card p {
  color: #716875;
}

html.halloween-theme .section,
html.halloween-theme .service-card,
html.halloween-theme .review-card,
html.halloween-theme .gallery-card,
html.halloween-theme .faq-card,
html.halloween-theme .step-card,
html.halloween-theme .booking-panel,
html.halloween-theme .contact-card,
html.halloween-theme .contact-form-card,
html.halloween-theme .about-card {
  background: #fffdfa;
  color: #211827;
  border-color: #ead9cf;
}

html.halloween-theme .service-card:hover,
html.halloween-theme .review-card:hover,
html.halloween-theme .gallery-card:hover {
  border-color: #e2a073;
  box-shadow: 0 18px 42px rgba(59, 35, 48, 0.12);
}

html.halloween-theme .service-icon,
html.halloween-theme .step-number {
  background: #fff0e4;
  color: #bc4b11;
  border-color: #f0c8aa;
}

html.halloween-theme .price,
html.halloween-theme .eyebrow {
  color: #c44c10;
}

html.halloween-theme .rating {
  color: #e96818;
}

html.halloween-theme .attention-strip {
  background: linear-gradient(135deg, #4a2c50, #2d1d35);
  color: #fff;
  border-color: #68466e;
}

html.halloween-theme input,
html.halloween-theme select,
html.halloween-theme textarea {
  background: #fff;
  color: #211827;
  border-color: #dfcec4;
}

html.halloween-theme input:focus,
html.halloween-theme select:focus,
html.halloween-theme textarea:focus {
  border-color: #df6a27;
  box-shadow: 0 0 0 3px rgba(233, 104, 24, 0.1);
}

html.halloween-theme .footer {
  background: #2d1d35;
  border-top-color: #5c4063;
}

html.halloween-theme .assistant-panel {
  background: #fffdfa;
  color: #211827;
  border-color: #dfbda8;
}

@media (max-width: 760px) {
  html.halloween-theme body::before {
    padding-inline: 12px;
    font-size: 0.66rem;
  }
}

/* Recommended seasonal treatment: preserve the Kay's Cleaning design. */
html.seasonal-banner body::before {
  content: "Fall cleaning appointments are available - get your home fresh and guest-ready";
  display: block;
  padding: 8px 16px;
  background: #5a2f49;
  color: #fff8f1;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

html.seasonal-banner .button,
html.seasonal-banner button {
  box-shadow: 0 12px 24px rgba(217, 79, 142, 0.18);
}

/* Option 1: classic Halloween - haunted, bold, and professional. */
html.halloween-classic {
  --bg: #17101c;
  --surface: #fffdf9;
  --surface-alt: #2a1930;
  --text: #241827;
  --muted: #756778;
  --accent: #f47a1f;
  --accent-dark: #bd4709;
  --border: #e9c6a7;
  --pink-soft: #fff0df;
  --pink-line: #efc39e;
}

html.halloween-classic body::before,
html.halloween-cute body::before,
html.fall-elegant body::before {
  display: block;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.035em;
}

html.halloween-classic body::before {
  content: "🦇  HALLOWEEN CLEANING  •  NO TRICKS, JUST A BEAUTIFULLY CLEAN HOME  🎃";
  background: linear-gradient(90deg, #160d1c, #4b2052, #160d1c);
  color: #fff6e9;
}

html.halloween-classic .hero-copy {
  position: relative;
  overflow: hidden;
  border: 2px solid #f47a1f;
  background: radial-gradient(circle at 12% 12%, rgba(244, 122, 31, .22), transparent 30%), linear-gradient(145deg, #fffdf9, #fff0dd);
}

html.halloween-classic .hero-copy::after {
  content: "🕸️\A\A       🦇  🦇\A\A                         🎃";
  position: absolute;
  inset: -12px 8px auto auto;
  color: #3b2142;
  font-size: 2rem;
  line-height: 1.45;
  white-space: pre;
  opacity: .16;
  pointer-events: none;
}

html.halloween-classic .hero-copy::before {
  content: "HALLOWEEN HOME REFRESH";
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 5px 10px;
  border: 1px solid #efc39e;
  border-radius: 999px;
  background: #fff0df;
  color: #a33d0b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

html.halloween-classic .hero-copy > .eyebrow { display: none; }
html.halloween-classic .attention-strip { background: linear-gradient(135deg, #64245f, #1b1022); }
html.halloween-classic .site-header { border-bottom: 3px solid #f47a1f; }
html.halloween-classic .service-card { border-top: 4px solid #f47a1f; }
html.halloween-classic .hero-media,
html.halloween-cute .hero-media,
html.fall-elegant .hero-media { position: relative; overflow: hidden; }
html.halloween-classic .hero-media::after {
  content: "🎃  🎃  🎃";
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 10px 16px;
  border: 2px solid #f47a1f;
  border-radius: 22px;
  background: rgba(28, 15, 34, .9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
  font-size: clamp(2rem, 5vw, 3.6rem);
  letter-spacing: .08em;
  line-height: 1;
}

/* Option 2: cute Halloween - cheerful and family-friendly. */
html.halloween-cute {
  --bg: #f3e7ff;
  --surface: #fffefd;
  --surface-alt: #fff3ec;
  --text: #2b2030;
  --muted: #756b78;
  --accent: #e45e91;
  --accent-dark: #b63c70;
  --border: #efd7dd;
  --pink-soft: #fff0f5;
  --pink-line: #f2c9d8;
}

html.halloween-cute body::before {
  content: "👻  A LITTLE HALLOWEEN MAGIC, A LOT OF SPARKLE-CLEAN COMFORT  🎃";
  background: linear-gradient(90deg, #6f3a8d, #f08a3c, #e45e91);
  color: #fff;
}

html.halloween-cute .hero-copy {
  position: relative;
  overflow: hidden;
  border: 2px dashed #b169cf;
  background: radial-gradient(circle at 12% 16%, rgba(240, 138, 60, .2), transparent 32%), radial-gradient(circle at 88% 82%, rgba(177, 105, 207, .2), transparent 30%), #fffefd;
}

html.halloween-cute .hero-copy::after {
  content: "👻\A     ✨\A           🎃";
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 2.2rem;
  line-height: 1.5;
  white-space: pre;
  opacity: .22;
  transform: rotate(5deg);
  pointer-events: none;
}

html.halloween-cute .hero-copy::before {
  content: "COZY • CUTE • CLEAN";
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff0d9;
  color: #9b4614;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

html.halloween-cute .hero-copy > .eyebrow { display: none; }
html.halloween-cute .service-icon { background: linear-gradient(180deg, #fff, #fff0f5); }
html.halloween-cute .site-header { border-bottom: 3px solid #b169cf; }
html.halloween-cute .service-card { border: 2px solid #e8c4f4; border-radius: 24px; }
html.halloween-cute .hero-media::after {
  content: "✨  🎃  👻  🎃  ✨";
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  padding: 10px 16px;
  border: 2px dashed #8f4daf;
  border-radius: 999px;
  background: rgba(255, 246, 252, .94);
  box-shadow: 0 10px 24px rgba(104, 55, 125, .2);
  font-size: clamp(1.7rem, 4.3vw, 3rem);
  line-height: 1;
}

/* Option 3: haunted elegant - dark, polished, and unmistakably Halloween. */
html.fall-elegant {
  --bg: #19131c;
  --surface: #fffdf9;
  --surface-alt: #2a202d;
  --text: #252126;
  --muted: #6c676d;
  --accent: #b86c2f;
  --accent-dark: #77401e;
  --border: #ddd3c8;
  --pink-soft: #f5ece5;
  --pink-line: #ddc7b8;
  --shadow: 0 18px 48px rgba(43, 34, 39, 0.1);
}

html.fall-elegant body::before {
  content: "🕸️  A HAUNTINGLY CLEAN HOME FOR HALLOWEEN GATHERINGS  🦇";
  background: linear-gradient(90deg, #151018, #4b344d, #151018);
  color: #f5d2a7;
}

html.fall-elegant .hero-copy {
  position: relative;
  overflow: hidden;
  border: 1px solid #c48a58;
  background: radial-gradient(circle at 10% 18%, rgba(184, 108, 47, .14), transparent 30%), linear-gradient(180deg, #fffdf9, #f5eadf);
}

html.fall-elegant .hero-copy::after {
  content: "🕸️";
  position: absolute;
  top: -22px;
  right: -10px;
  font-size: 7rem;
  filter: grayscale(1);
  opacity: .12;
  pointer-events: none;
}

html.fall-elegant .hero-copy::before {
  content: "THE HAUNTED EDIT • 2026";
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #b99379;
  color: #7b4933;
  font-family: Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

html.fall-elegant .hero-copy > .eyebrow { display: none; }
html.fall-elegant .button,
html.fall-elegant button { border-radius: 5px; box-shadow: none; }
html.fall-elegant .site-header { border-bottom: 2px solid #b86c2f; }
html.fall-elegant .attention-strip { background: linear-gradient(135deg, #4b344d, #151018); }
html.fall-elegant .service-card { border-top: 2px solid #b86c2f; }
html.fall-elegant .hero-media::after {
  content: "🎃   🎃";
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 3;
  padding: 10px 18px;
  border: 1px solid #d6a36f;
  border-radius: 8px;
  background: rgba(24, 16, 27, .91);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
}

@media (max-width: 760px) {
  html.halloween-classic body::before,
  html.halloween-cute body::before,
  html.fall-elegant body::before {
    padding: 7px 11px;
    font-size: 0.64rem;
  }
}

@media (max-width: 760px) {
  html.seasonal-banner body::before {
    padding: 7px 12px;
    font-size: 0.68rem;
  }
}

/* Final Classic Halloween palette: warm cream, ink black, pumpkin, and plum. */
html.halloween-classic {
  --bg: #f7efe4;
  --surface: #fffaf3;
  --surface-alt: #f2e5d5;
  --text: #201820;
  --muted: #6b5d68;
  --accent: #d95f18;
  --accent-dark: #a83d0b;
  --border: #dfc9b2;
  --pink-soft: #fff0df;
  --pink-line: #e9b37e;
  --shadow: 0 18px 44px rgba(37, 19, 39, .13);
}

html.halloween-classic body {
  background:
    radial-gradient(circle at 4% 18%, rgba(217, 95, 24, .09), transparent 21rem),
    radial-gradient(circle at 96% 54%, rgba(65, 33, 68, .08), transparent 24rem),
    var(--bg);
}

html.halloween-classic body::before {
  content: "HALLOWEEN HOME REFRESH  •  NO TRICKS, JUST A BEAUTIFULLY CLEAN HOME";
  padding: 10px 16px;
  background: linear-gradient(90deg, #241420, #3a1f2d, #241420);
  color: #ffd29b;
  border-bottom: 3px solid #d95f18;
  letter-spacing: .08em;
}

html.halloween-classic .site-header {
  background: rgba(255, 250, 243, .96);
  border-bottom: 1px solid #dfc9b2;
}

html.halloween-classic .hero-copy {
  border: 1px solid #dfc9b2;
  border-left: 7px solid #d95f18;
  background: linear-gradient(145deg, #fffaf3 0%, #fff4e7 72%, #f4dfc8 100%);
  box-shadow: 0 22px 50px rgba(37, 19, 39, .13);
}

html.halloween-classic .hero-copy h2 {
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
}

html.halloween-classic .hero-copy::before {
  content: "KAY'S CLEANING";
  border: 0;
  background: rgba(33, 21, 35, 0.96);
  color: #ffd29b;
  box-shadow: none;
}

html.halloween-classic .hero-copy::after {
  content: "";
}

html.halloween-classic .hero-media {
  border: 6px solid #211523;
  border-radius: 24px;
  box-shadow: 0 22px 50px rgba(37, 19, 39, .2);
}

html.halloween-classic .hero-media::after {
  content: "🎃";
  right: 18px;
  bottom: 18px;
  min-width: 70px;
  padding: 10px 14px;
  border: 2px solid #f09443;
  border-radius: 16px;
  background: rgba(33, 21, 35, .94);
  color: #ffd29b;
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

html.halloween-classic .hero-media::first-line {
  font-size: 3.2rem;
}

html.halloween-classic .service-card {
  position: relative;
  overflow: hidden;
}

html.halloween-classic .attention-strip {
  background: linear-gradient(135deg, #432445, #211523);
  border-top: 4px solid #d95f18;
}

html.halloween-classic .service-card {
  border: 1px solid #e3cfba;
  border-top: 4px solid #d95f18;
  background: #fffaf3;
  box-shadow: 0 14px 32px rgba(37, 19, 39, .09);
}

html.halloween-classic .attention-strip {
  background: linear-gradient(135deg, #432445, #211523);
  border-top: 4px solid #d95f18;
}

/* Christmas preview 1: classic evergreen and cranberry. */
html.christmas-classic {
  --bg: #f5f0e7; --surface: #fffdf8; --surface-alt: #edf3ed;
  --text: #17251d; --muted: #627068; --accent: #b52c37;
  --accent-dark: #7f1721; --border: #ced9cf; --pink-soft: #f8e7e8;
  --pink-line: #dfb4b8; --shadow: 0 18px 44px rgba(14, 52, 32, .13);
}
html.christmas-classic body::before,
html.christmas-cozy body::before,
html.winter-elegant body::before {
  display: block; padding: 10px 16px; text-align: center; font-size: .73rem;
  font-weight: 900; letter-spacing: .07em;
}
html.christmas-classic body::before { content: "🎄  CHRISTMAS CLEANING • MAKE YOUR HOME MERRY, BRIGHT, AND GUEST-READY  ✨"; background: #123d2a; color: #fff6df; border-bottom: 3px solid #b52c37; }
html.christmas-classic .site-header { border-bottom: 2px solid #b52c37; background: rgba(255,253,248,.96); }
html.christmas-classic .hero-copy { border: 1px solid #cad7cb; border-left: 7px solid #b52c37; background: linear-gradient(145deg,#fffdf8,#f0f6ee); }
html.christmas-classic .hero-copy::before { content: "KAY'S CHRISTMAS CLEANING"; display: inline-flex; width: fit-content; margin-bottom: 12px; padding: 6px 11px; border-radius: 999px; background: #123d2a; color: #fff6df; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
html.christmas-classic .hero-copy > .eyebrow { display:none; }
html.christmas-classic .hero-media { position:relative; overflow:hidden; border: 6px solid #123d2a; border-radius:24px; }
html.christmas-classic .hero-media::after { content:"🎄  🎁  ✨"; position:absolute; right:18px; bottom:18px; padding:12px 18px; border:2px solid #d9b75f; border-radius:16px; background:rgba(18,61,42,.94); font-size:clamp(2rem,4.5vw,3.2rem); }
html.christmas-classic .service-card { border-top:4px solid #b52c37; }
html.christmas-classic .attention-strip { background:linear-gradient(135deg,#19573b,#0d2d20); }

/* Christmas preview 2: cozy gingerbread and cranberry. */
html.christmas-cozy { --bg:#f7eee2; --surface:#fffaf3; --surface-alt:#f3e4d2; --text:#35231d; --muted:#746158; --accent:#b83c46; --accent-dark:#84252e; --border:#e2cbb6; --pink-soft:#fae7e5; --pink-line:#e6b9b5; }
html.christmas-cozy body::before { content:"☕  COZY CHRISTMAS CLEANING • FRESH ROOMS, WARM MEMORIES  🎁"; background:linear-gradient(90deg,#7f2029,#b83c46,#7f2029); color:#fff8e8; }
html.christmas-cozy .hero-copy { border:2px solid #d3ad87; background:radial-gradient(circle at 90% 12%,rgba(184,60,70,.13),transparent 28%),#fffaf3; }
html.christmas-cozy .hero-copy::before { content:"COZY • MERRY • CLEAN"; display:inline-flex; margin-bottom:12px; padding:6px 11px; border-radius:999px; background:#f1dcc5; color:#7d3426; font-size:.68rem; font-weight:900; letter-spacing:.12em; }
html.christmas-cozy .hero-copy > .eyebrow { display:none; }
html.christmas-cozy .hero-media { position:relative; overflow:hidden; border-radius:24px; }
html.christmas-cozy .hero-media::after { content:"🧦  🎁  🍪"; position:absolute; right:18px; bottom:18px; padding:12px 18px; border-radius:999px; background:rgba(255,248,235,.94); border:2px solid #b83c46; font-size:clamp(1.8rem,4vw,3rem); }
html.christmas-cozy .service-card { border:2px solid #e2cbb6; border-radius:22px; }

/* Christmas preview 3: winter white, navy, and silver. */
html.winter-elegant { --bg:#eef3f6; --surface:#ffffff; --surface-alt:#e8f0f5; --text:#172737; --muted:#617080; --accent:#376b87; --accent-dark:#21485e; --border:#c9d8e1; --pink-soft:#e9f2f6; --pink-line:#bfd2dd; }
html.winter-elegant body::before { content:"❄  WINTER HOME REFRESH • POLISHED, PEACEFUL, BEAUTIFULLY CLEAN  ❄"; background:linear-gradient(90deg,#142d42,#315b73,#142d42); color:#fff; }
html.winter-elegant .hero-copy { border:1px solid #bfd2dd; background:radial-gradient(circle at 12% 12%,rgba(103,157,188,.17),transparent 30%),linear-gradient(145deg,#fff,#edf5f8); }
html.winter-elegant .hero-copy::before { content:"THE WINTER EDIT"; display:inline-flex; margin-bottom:12px; padding-bottom:5px; border-bottom:1px solid #668ca2; color:#315b73; font-family:Georgia,serif; font-size:.78rem; font-weight:700; letter-spacing:.16em; }
html.winter-elegant .hero-copy > .eyebrow { display:none; }
html.winter-elegant .hero-media { position:relative; overflow:hidden; border:5px solid #dce8ee; border-radius:20px; }
html.winter-elegant .hero-media::after { content:"❄  ✨  ❄"; position:absolute; right:18px; bottom:18px; padding:11px 18px; border-radius:8px; background:rgba(20,45,66,.92); color:white; font-size:clamp(1.8rem,4vw,2.8rem); }
html.winter-elegant .service-card { border-top:3px solid #6f98ae; }
html.winter-elegant .attention-strip { background:linear-gradient(135deg,#315b73,#142d42); }

html.halloween-classic .brand-badge,
html.halloween-cute .brand-badge,
html.fall-elegant .brand-badge {
  content: url('holidays/halloween/logos/kays-cleaning-halloween-logo.png');
}

html.christmas-classic .brand-badge,
html.christmas-cozy .brand-badge,
html.winter-elegant .brand-badge {
  content: url('holidays/christmas/logos/kays-cleaning-christmas-logo.png');
}

html.thanksgiving-theme { --bg:#f6eee3;--surface:#fffaf3;--surface-alt:#f2e2ce;--text:#35231d;--muted:#756157;--accent:#b84f24;--accent-dark:#7c2e18;--border:#dfc5aa;--pink-soft:#f8e8dc;--pink-line:#dfb89d; }
html.thanksgiving-theme body::before { content:"🍂  THANKSGIVING HOME REFRESH • CLEAN, COZY, AND READY TO GATHER  🦃";display:block;padding:10px 16px;background:linear-gradient(90deg,#5b2e24,#9b4828,#5b2e24);color:#fff4dc;text-align:center;font-size:.73rem;font-weight:900;letter-spacing:.07em; }
html.thanksgiving-theme .brand-badge{content:url('holidays/thanksgiving/logos/kays-cleaning-thanksgiving-logo.png')}.thanksgiving-theme .hero-copy{border:1px solid #dfc5aa;border-left:7px solid #b84f24;background:linear-gradient(145deg,#fffaf3,#f5e3cf)}html.thanksgiving-theme .hero-copy::before{content:"THANKSGIVING CLEANING";display:inline-flex;margin-bottom:12px;padding:6px 11px;border-radius:999px;background:#5b2e24;color:#fff4dc;font-size:.68rem;font-weight:900;letter-spacing:.12em}html.thanksgiving-theme .hero-copy>.eyebrow{display:none}html.thanksgiving-theme .hero-media{position:relative;overflow:hidden;border:5px solid #5b2e24;border-radius:22px}html.thanksgiving-theme .hero-media::after{content:"🍂  🎃  🍁";position:absolute;right:18px;bottom:18px;padding:12px 18px;border-radius:16px;background:rgba(91,46,36,.94);font-size:clamp(2rem,4vw,3rem)}html.thanksgiving-theme .attention-strip{background:linear-gradient(135deg,#8f4428,#4b271f)}

html.newyear-theme { --bg:#f4f2ed;--surface:#fffef9;--surface-alt:#eeeae0;--text:#171717;--muted:#66635d;--accent:#b78a32;--accent-dark:#7f5c1b;--border:#d9c9a5;--pink-soft:#f4eddd;--pink-line:#d9c293; }
html.newyear-theme body::before{content:"✨  NEW YEAR CLEANING • A FRESH START BEGINS WITH A CLEAN SPACE  ✨";display:block;padding:10px 16px;background:linear-gradient(90deg,#080808,#2b2b2b,#080808);color:#f4cf77;text-align:center;font-size:.73rem;font-weight:900;letter-spacing:.08em}html.newyear-theme .brand-badge{content:url('holidays/new-year/logos/kays-cleaning-new-year-logo.png')}html.newyear-theme .hero-copy{border:1px solid #d9c9a5;border-left:7px solid #b78a32;background:linear-gradient(145deg,#fffef9,#f0eadc)}html.newyear-theme .hero-copy::before{content:"THE FRESH START EDIT";display:inline-flex;margin-bottom:12px;padding:6px 11px;border-radius:999px;background:#111;color:#f4cf77;font-size:.68rem;font-weight:900;letter-spacing:.12em}html.newyear-theme .hero-copy>.eyebrow{display:none}html.newyear-theme .hero-media{position:relative;overflow:hidden;border:5px solid #111;border-radius:22px}html.newyear-theme .hero-media::after{content:"✨  ★  ✨";position:absolute;right:18px;bottom:18px;padding:12px 18px;border:1px solid #d8b45c;border-radius:12px;background:rgba(10,10,10,.94);color:#f4cf77;font-size:clamp(2rem,4vw,3rem)}html.newyear-theme .attention-strip{background:linear-gradient(135deg,#303030,#080808)}

/* Support panel: direct contact remains available alongside the automated chat. */
.assistant-panel { grid-template-rows:auto auto auto minmax(100px,1fr) auto auto; }
.support-shortcuts { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); }
.support-shortcuts a { padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:12px; font-weight:700; background:var(--surface); color:var(--accent-dark); }
.support-shortcuts a:hover { text-decoration:underline; }
.assistant-panel.hidden { display:none; }

/* Kay's Cleaning: domain launch design, layered over the shared site styles. */
html:root { --bg:#faf8f5; --surface:#fff; --surface-alt:#f4efeb; --text:#302936; --muted:#6d6570; --accent:#65455f; --accent-dark:#493044; --border:#e7dfe5; --pink-soft:#f4edf2; --pink-line:#e7d9e3; --radius:20px; --shadow:0 12px 36px #392b3910; }
html body { background:var(--bg); color:var(--text); font-size:16px; }
html body::before, html .hero-copy::before, html .hero-media::after { display:none; }
html .container { width:min(1200px,calc(100% - 48px)); }
html .site-header { background:#faf8f5f5; border-bottom:1px solid var(--border); }
html .header-inner { min-height:92px; }
html .brand-badge { width:76px; height:64px; border:0; background:none; border-radius:0; }
html .brand-row .eyebrow { display:none; }
html .brand-row h1 { font-size:21px; letter-spacing:-.6px; }
html .top-nav { gap:24px; }
html .top-nav a { font-size:14px; font-weight:600; }
html .button, html button[type=submit] { background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:9px; padding:15px 23px; box-shadow:none; min-height:48px; font-weight:700; }
html .button:hover, html button[type=submit]:hover { background:var(--accent-dark); transform:translateY(-1px); }
html .button-secondary { background:transparent; color:var(--accent); }
html .button-secondary:hover { color:#fff; }
html .hero { display:grid; grid-template-columns:1.05fr 1fr; gap:60px; padding:64px 0 72px; align-items:center; }
html .hero-copy { padding:0; background:none; border:0; box-shadow:none; border-radius:0; }
html .hero-copy > .eyebrow { display:block; color:var(--accent); margin-bottom:20px; }
html .eyebrow { font-size:11px; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
html .hero h2 { font-family:Georgia,serif; font-weight:400; font-size:clamp(40px,4.6vw,66px); line-height:1.06; letter-spacing:-2px; max-width:560px; margin:0 0 24px; }
html #hero-text { font-size:17px; line-height:1.8; color:var(--muted); max-width:480px; }
html .button-row { margin:28px 0; gap:12px; flex-wrap:wrap; }
html .hero-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; border-top:1px solid var(--border); padding-top:24px; margin-top:30px; }
html .hero-stat { background:none; border:0; padding:0; box-shadow:none; }
html .hero-stat strong { font-size:16px; color:var(--accent); }
html .hero-stat span { font-size:12px; }
html .hero-highlights, html .hero-trust { margin-top:16px; font-size:12px; }
html .hero-media { position:relative; border:0; border-radius:120px 20px 20px 20px; overflow:hidden; background:#eee6df; box-shadow:var(--shadow); }
html #hero-image { width:100%; height:560px; object-fit:cover; }
html .hero-card { position:absolute; bottom:22px; left:22px; right:22px; padding:22px; background:#fffaf3f5; border:0; border-radius:14px; box-shadow:none; max-width:none; }
html .hero-card h3 { font-family:Georgia,serif; font-size:26px; margin:6px 0; }
html .hero-card p { color:var(--text); }
html .section { padding:64px 0; margin:0; border-top:1px solid var(--border); }
html .section-header { margin-bottom:32px; }
html .section-header h2 { font-family:Georgia,serif; font-size:clamp(30px,3.4vw,43px); font-weight:400; line-height:1.2; letter-spacing:-1px; max-width:700px; }
html .service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
html .service-card, html .review-card, html .contact-card, html .contact-form-card, html .booking-panel, html .estimate-card, html .booking-info-card, html .about-list { background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:none; padding:28px; }
html .service-card h3 { font-size:20px; }
html .service-card .price { color:var(--accent); font-size:25px; }
html .service-card p { line-height:1.75; }
html .attention-strip { padding:34px; margin:24px 0 40px; background:#493747; color:#fff; border-radius:20px; }
html .attention-strip p, html .attention-strip span, html .attention-strip strong { color:#fff; }
html .attention-strip p { opacity:.8; }
html input, html select, html textarea { font-size:16px; min-height:48px; border:1px solid #d8cfd6; border-radius:8px; background:#fff; color:var(--text); }
html :focus-visible { outline:3px solid #94628a; outline-offset:4px; }
html section[id] { scroll-margin-top:110px; }
html .gallery-card { border-radius:16px; overflow:hidden; box-shadow:none; border:1px solid var(--border); }
html .gallery-card img { height:260px; object-fit:cover; }
html .about-image img { border-radius:20px; }
html .footer { background:#302936; color:#fff; padding:32px 0; }
html .footer a { color:#fff; text-decoration:underline; }
html .footer-inner { gap:20px; flex-wrap:wrap; }
@media(max-width:950px) { html .header-inner { flex-wrap:wrap; padding:16px 0; gap:16px; } html .top-nav { width:100%; flex-wrap:wrap; gap:16px; } html .hero { gap:28px; } html .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } html #hero-image { height:520px; } }
@media(max-width:650px) { html .container { width:calc(100% - 32px); } html .site-header { position:relative; } html .top-nav { gap:16px; } html .top-nav a { font-size:13px; } html .hero { grid-template-columns:1fr; padding:36px 0 44px; gap:32px; } html .hero h2 { font-size:44px; } html .hero-media { border-radius:70px 16px 16px 16px; } html #hero-image { height:430px; } html .hero-card { left:14px; right:14px; bottom:14px; padding:18px; } html .section { padding:40px 0; } html .service-grid, html .booking-grid, html .about-grid, html .contact-grid, html .review-grid, html .attention-grid, html .grid-2, html .grid-3 { grid-template-columns:1fr; } html .service-card, html .booking-panel, html .contact-form-card { padding:22px; } html .attention-strip { padding:24px; } html .button-row .button { flex:1 1 180px; text-align:center; } html .footer-inner { display:block; overflow-wrap:anywhere; } html section[id] { scroll-margin-top:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } html *, html *::before, html *::after { transition:none!important; animation:none!important; } }
/* Finishing touches and easier booking on small screens. */
html .location-bar { padding:10px 24px; background:#493747; color:#fff; text-align:center; font-size:12px; letter-spacing:.02em; }
html .location-bar a { margin-left:24px; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
html .skip-link { position:fixed; top:8px; left:12px; z-index:1000; padding:12px 18px; background:#fff; color:#493747; transform:translateY(-160%); }
html .skip-link:focus { transform:translateY(0); }
html .service-card { display:flex; flex-direction:column; transition:box-shadow .2s,border-color .2s,transform .2s; }
html .service-card:hover { border-color:#bca6b7; box-shadow:0 14px 35px #49374712; transform:translateY(-3px); }
html .service-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#f5eef2; font-size:24px; margin-bottom:18px; }
html .service-book-link { margin-top:auto; padding-top:16px; border-top:1px solid var(--border); color:var(--accent); font-size:14px; font-weight:700; }
html .service-book-link:hover { text-decoration:underline; text-underline-offset:4px; }
html .closing-cta { text-align:center; background:#eee5ed; border:1px solid #e1d4de; border-radius:24px; margin:24px auto 64px; padding:54px 24px; }
html .closing-cta h2 { font:400 clamp(32px,4vw,48px)/1.15 Georgia,serif; letter-spacing:-1px; margin:12px 0; }
html .closing-cta > p:not(.eyebrow) { color:var(--muted); margin-bottom:26px; }
html .closing-cta .button { display:inline-block; }
html .mobile-actions { display:none; }
html .contact-card a { overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:4px; }
html .faq-card { padding:24px; border:1px solid var(--border); background:#fff; border-radius:14px; box-shadow:none; }
html .step-number { background:#493747; color:#fff; border-radius:50%; }
@media(min-width:951px) { html .estimate-panel { position:sticky; top:115px; align-self:start; } }
@media(max-width:650px) {
 html .location-bar { font-size:11px; padding:9px 16px; }
 html .location-bar a { display:none; }
 html body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
 html .mobile-actions { position:fixed; z-index:40; bottom:0; left:0; right:0; display:grid; grid-template-columns:1fr 1.6fr; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--border); box-shadow:0 -4px 20px #3029360a; }
 html .mobile-actions a { padding:13px 8px; text-align:center; font-size:14px; font-weight:700; border:1px solid var(--accent); border-radius:9px; color:var(--accent); }
 html .mobile-actions a:last-child { color:#fff; background:var(--accent); }
 html .assistant-widget { bottom:calc(86px + env(safe-area-inset-bottom)); }
 html .closing-cta { padding:36px 20px; margin-bottom:36px; }
}
/* Small Halloween accents follow the scroll along the page edges. */
html .autumn-scroll-details { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
html .autumn-scroll-details span { position:absolute; top:var(--start); font-size:22px; opacity:.42; user-select:none; filter:saturate(.75); }
html .autumn-scroll-details .autumn-left { left:7px; }
html .autumn-scroll-details .autumn-right { right:7px; }
@media(max-width:650px) {
 html .autumn-scroll-details span { font-size:14px; opacity:.25; }
 html .autumn-scroll-details .autumn-left { left:0; }
 html .autumn-scroll-details .autumn-right { right:0; }
 html .autumn-scroll-details span:nth-child(n+4) { display:none; }
}
@media(prefers-reduced-motion:reduce) { html .autumn-scroll-details { display:none; } }
/* Halloween business-card banner: existing brand artwork, richer seasonal colors. */
html .location-bar { background:linear-gradient(100deg,#241b2c,#51304c 60%,#623c33); color:#ffedcf; border-bottom:1px solid #c695593b; }
html .banner-divider { padding:0 10px; color:#edaf69; }
html .halloween-contact-card { overflow:hidden; padding:0 28px 28px; }
html .halloween-card-banner { position:relative; display:flex; align-items:center; gap:22px; margin:0 -28px 28px; padding:28px 30px 24px; min-height:200px; background:radial-gradient(circle at 15% 18%, rgba(255,190,95,.28), transparent 18%),radial-gradient(circle at 82% 12%, rgba(255,123,70,.42), transparent 18%),linear-gradient(135deg,#241b2c 0%,#3d1f39 34%,#512b2f 72%,#2b1b2c 100%); border:1px solid rgba(255,197,122,.38); border-bottom:4px solid #e4a85d; box-shadow:0 18px 32px rgba(18,7,14,.18), inset 0 1px 0 rgba(255,244,236,.12); isolation:isolate; }
html .halloween-card-banner::before { content:'✦'; position:absolute; right:26px; top:14px; color:#f7d58a; font-size:22px; opacity:.9; text-shadow:0 0 18px rgba(255,182,82,.65); }
html .halloween-card-banner::after { content:''; position:absolute; inset:10px auto auto 16px; width:120px; height:120px; border:1px solid rgba(255,206,146,.18); border-radius:50%; opacity:.7; }
html .halloween-card-banner img { width:112px; height:112px; object-fit:contain; flex-shrink:0; border-radius:50%; background:#fff8ed; border:3px solid #f0bd7d; box-shadow:0 10px 24px rgba(0,0,0,.2), 0 0 0 6px rgba(255,138,53,.12); }
html .halloween-card-banner .banner-copy { position:relative; z-index:1; }
html .halloween-card-banner h3 { color:#fff8eb; font:700 clamp(26px,3vw,42px)/1.1 Georgia,serif; letter-spacing:-.7px; margin:0; text-shadow:0 3px 16px rgba(0,0,0,.2); }
html .halloween-card-banner span { display:block; margin-top:8px; color:#f3d7e8; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
html .halloween-card-banner .card-badge { position:absolute; right:18px; bottom:18px; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#ffbf69,#ef7530 50%,#d94625); color:#fff8ee; font-size:29px; box-shadow:0 12px 22px rgba(241,122,48,.26); transform:rotate(-12deg); }
@media(max-width:650px) {
 html .halloween-card-banner { padding:20px 22px 16px; gap:16px; min-height:170px; }
 html .halloween-card-banner img { width:82px; height:82px; }
 html .halloween-card-banner h3 { font-size:30px; }
 html .halloween-card-banner .card-badge { width:40px; height:40px; font-size:22px; right:10px; bottom:10px; }
 html .banner-divider { padding:0 4px; }
}
/* A clearer support desk with visible alternatives to chat. */
html .assistant-panel { width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 115px); grid-template-rows:auto auto auto minmax(80px,1fr) auto auto; border-radius:20px; border:1px solid #d9c8d5; box-shadow:0 20px 65px #241b2c35; }
html .assistant-header { background:linear-gradient(120deg,#302436,#65455f); color:#fff8ed; padding:18px; }
html .assistant-header h2, html .assistant-header .eyebrow { color:#fff8ed; }
html .assistant-close { color:#fff; background:#ffffff18; min-width:44px; min-height:44px; }
html .assistant-status { display:grid; gap:4px; background:#fbf5ec; padding:10px 16px; }
html .assistant-status span { background:none; border:0; padding:0; color:#66535f; font-size:11px; }
html .assistant-form { display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
html .assistant-form input { width:100%; flex:1 0 100%; }
html .assistant-form button { min-height:44px; font-size:12px; padding:9px 12px; }
html .assistant-form button[type=submit] { margin-left:auto; }
html .assistant-messages { min-height:80px; overflow-y:auto; overscroll-behavior:contain; }
html .assistant-suggestions { max-height:90px; overflow-y:auto; }
html .assistant-message { line-height:1.65; overflow-wrap:anywhere; }
html .assistant-toggle { background:#493747; color:#fff8ed; border:1px solid #bd8c61; border-radius:30px; }
html .assistant-panel.hidden { display:none; }
@media(max-width:650px) { html .assistant-widget { right:12px; } html .assistant-panel { max-height:calc(100dvh - 165px - env(safe-area-inset-bottom)); } }