:root {
  --containerMax: 1280px;
  --radius: 18px;
  --radiusSm: 12px;
  --fontScale: 1;
  --spaceScale: 1;
  --brand: #0b2a2a;
  --brand2: #1a7f73;
  --ink: #0e1b1b;
  --muted: #4a5b5b;
  --paper: #ffffff;
  --paper2: #f5fbfb;
  --stroke: rgba(14, 27, 27, 0.12);
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
  --shadowSm: 0 10px 20px rgba(0, 0, 0, 0.08);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tFast: 0.3s;
  --tMed: 0.45s;
  --tSlow: 0.6s;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
  color: var(--ink);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(26, 127, 115, 0.18), transparent 45%),
    radial-gradient(900px 500px at 90% 10%, rgba(11, 42, 42, 0.14), transparent 50%),
    var(--paper);
  font-size: calc(16px * var(--fontScale));
  line-height: 1.55;
}

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

.skipLink {
  position: absolute;
  left: -9999px;
  top: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  color: var(--ink);
  z-index: 9999;
}
.skipLink:focus {
  left: 16px;
}

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(14, 27, 27, 0.08);
}

.headerContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px * var(--spaceScale)) 0;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.brandMark {
  width: 40px;
  height: 40px;
  border-radius: calc(var(--radius) + 6px);
  background: conic-gradient(from 180deg, var(--brand2), #2e9bff, #ffd27a, var(--brand2));
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1);
  position: relative;
}
.brandMark::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(14, 27, 27, 0.12);
}

.brandName {
  font-weight: 780;
  letter-spacing: -0.02em;
}
.brandSub {
  font-size: 0.92em;
  color: var(--muted);
}

.nav {
  display: none;
  gap: 16px;
  align-items: center;
}
.navTop {
  justify-content: flex-end;
}
.navCenter {
  width: 100%;
  display: none;
}
.navCenterInner {
  display: flex;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

.navLink {
  text-decoration: none;
  color: var(--ink);
  font-weight: 640;
  font-size: 0.98em;
  padding: 10px 10px;
  border-radius: calc(var(--radiusSm) - 2px);
  transition: transform var(--tFast) var(--ease), background var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease);
}
.navLink:hover {
  transform: translateY(-1px);
  background: rgba(26, 127, 115, 0.1);
  box-shadow: 0 8px 14px rgba(26, 127, 115, 0.16);
}

.navCta {
  background: rgba(26, 127, 115, 0.14);
  border: 1px solid rgba(26, 127, 115, 0.26);
}

.sidebarNav {
  display: none;
  position: relative;
}
.sidebarPanel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(14, 27, 27, 0.12);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadowSm);
  overflow: hidden;
  transform-origin: top right;
  transform: scale(0.96) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tMed) var(--ease), transform var(--tMed) var(--ease);
}

.sidebarNav[data-sidebar="open"] .sidebarPanel {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

.sidebarTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(14, 27, 27, 0.08);
}
.sidebarTitle {
  font-weight: 760;
}
.sidebarLinks {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 14px;
  gap: 6px;
}

.iconBtn {
  border: 1px solid rgba(14, 27, 27, 0.14);
  background: rgba(255, 255, 255, 0.85);
  width: 44px;
  height: 44px;
  border-radius: calc(var(--radius) + 8px);
  cursor: pointer;
  transition: transform var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease);
}
.iconBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.hamburger,
.xMark {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
  border-radius: 3px;
}
.hamburger::before {
  top: 4px;
  box-shadow: 0 6px 0 var(--ink);
}
.hamburger::after {
  bottom: 4px;
}

.xMark::before,
.xMark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 2px;
  background: var(--ink);
  border-radius: 3px;
}
.xMark::before {
  transform: rotate(45deg);
}
.xMark::after {
  transform: rotate(-45deg);
}

.section {
  padding: calc(54px * var(--spaceScale)) 0;
}

.sectionHead {
  margin-bottom: calc(26px * var(--spaceScale));
  display: grid;
  gap: 10px;
}

.sectionTitle {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  letter-spacing: -0.03em;
}
.sectionSub {
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
}

.hero {
  padding-top: calc(34px * var(--spaceScale));
}

.heroInner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  position: relative;
  padding: calc(26px * var(--spaceScale)) 0;
}

.heroBg {
  position: absolute;
  inset: -40px -24px -60px -24px;
  z-index: -1;
  background: radial-gradient(1000px 520px at 5% 10%, rgba(26, 127, 115, 0.22), transparent 52%),
    radial-gradient(760px 460px at 90% 15%, rgba(11, 42, 42, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(245, 251, 251, 0.95));
  border-radius: 48px;
}

.heroCopy {
  display: grid;
  gap: 14px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 9px 12px;
  border-radius: calc(var(--radiusSm) + 2px);
  border: 1px solid rgba(14, 27, 27, 0.1);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  color: rgba(11, 42, 42, 0.9);
}
.eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand2);
  box-shadow: 0 0 0 4px rgba(26, 127, 115, 0.18);
}

.heroTitle {
  margin: 0;
  font-size: clamp(2.1rem, 3.7vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.heroLead {
  margin: 0;
  color: rgba(14, 27, 27, 0.86);
  max-width: 60ch;
  font-size: 1.03em;
}

.heroCtas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn {
  appearance: none;
  border: 1px solid rgba(14, 27, 27, 0.16);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  border-radius: calc(var(--radius) + 8px);
  padding: 12px 14px;
  font-weight: 720;
  transition: transform var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease), background var(--tFast) var(--ease),
    border-color var(--tFast) var(--ease), color var(--tFast) var(--ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.1);
}

.btn:active {
  transform: translateY(0px) scale(0.99);
}

.btnPrimary {
  background: linear-gradient(135deg, var(--brand), #0c4c43);
  border-color: rgba(11, 42, 42, 0.26);
  color: #eaffff;
}

.btnOutline {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(14, 27, 27, 0.22);
}

.btnGhost {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(14, 27, 27, 0.12);
}

.btnGradient {
  background: linear-gradient(135deg, #0b2a2a, #1a7f73);
  border-color: rgba(26, 127, 115, 0.38);
  color: #eaffff;
}

.btnSoft {
  background: rgba(26, 127, 115, 0.12);
  border-color: rgba(26, 127, 115, 0.24);
  color: rgba(11, 42, 42, 0.95);
  padding: 10px 12px;
}

.btnFull {
  width: 100%;
  justify-content: center;
}

.heroMeta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.metaPill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: calc(var(--radiusSm) + 4px);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(14, 27, 27, 0.1);
}

.metaIcon {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(26, 127, 115, 0.95);
  margin-top: 3px;
  flex: 0 0 auto;
}
.metaIcon2 {
  background: rgba(11, 42, 42, 0.95);
}

.heroMedia {
  display: grid;
  gap: 14px;
  align-content: start;
}

.mediaCard {
  border-radius: calc(var(--radius) + 14px);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(14, 27, 27, 0.12);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
  padding: calc(18px * var(--spaceScale));
  overflow: hidden;
  position: relative;
}
.mediaCard::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(26, 127, 115, 0.28), transparent 60%);
}

.mediaCardTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.mediaCardTitle {
  font-weight: 820;
  letter-spacing: -0.02em;
}

.chip {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(26, 127, 115, 0.14);
  border: 1px solid rgba(26, 127, 115, 0.25);
  font-size: 0.92em;
  font-weight: 700;
  color: rgba(11, 42, 42, 0.9);
  position: relative;
  z-index: 1;
}

.quickForm {
  margin-top: 14px;
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.fieldLabel {
  font-weight: 720;
  color: rgba(14, 27, 27, 0.9);
}

.quickRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: calc(var(--radiusSm) + 4px);
  border: 1px solid rgba(14, 27, 27, 0.14);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  outline: none;
  transition: box-shadow var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
}
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(26, 127, 115, 0.5);
  box-shadow: 0 0 0 4px rgba(26, 127, 115, 0.18);
}

.quickNote {
  color: var(--muted);
  font-size: 0.95em;
}

.mediaStats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}

.stat {
  padding: 12px 10px;
  border-radius: calc(var(--radiusSm) + 2px);
  background: rgba(245, 251, 251, 0.7);
  border: 1px solid rgba(14, 27, 27, 0.1);
}
.statNum {
  font-weight: 900;
  letter-spacing: -0.02em;
}
.statLbl {
  color: var(--muted);
  font-size: 0.92em;
}

.heroBadge {
  justify-self: start;
  align-self: start;
  width: 220px;
  height: 120px;
  border-radius: calc(var(--radius) + 22px);
  background: linear-gradient(135deg, rgba(26, 127, 115, 0.18), rgba(11, 42, 42, 0.12));
  border: 1px solid rgba(14, 27, 27, 0.1);
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
}
.heroBadge::before {
  content: "";
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle at 20% 20%, rgba(255, 210, 122, 0.45), transparent 40%),
    radial-gradient(circle at 70% 10%, rgba(46, 155, 255, 0.25), transparent 45%);
}
.badgeInner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.badgeImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.02);
}
.heroBadge:hover .badgeImage {
  transform: scale(1.06);
}
.badgeTop {
  font-weight: 860;
}
.badgeBottom {
  color: rgba(14, 27, 27, 0.86);
  font-size: 0.95em;
}

.heroStats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Mosaic gallery (6–12 images requirement) */
.mosaicGallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 340px;
}
.mosaicImg {
  width: 100%;
  height: 118px;
  object-fit: cover;
  border-radius: calc(var(--radius) + 18px);
  border: 1px solid rgba(14, 27, 27, 0.1);
  background: rgba(245, 251, 251, 0.6);
  transition: transform var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease);
}
.mosaicImg:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08);
}
.mosaicImg.mosaicA {
  grid-column: 1 / -1;
  height: 142px;
}
.mosaicImg.mosaicC {
  border-radius: 0px;
}
.mosaicImg.mosaicE {
  transform: rotate(-0.4deg);
}

.statCard {
  border-radius: calc(var(--radius) + 10px);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(14, 27, 27, 0.1);
  padding: 16px 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
  transition: transform var(--tMed) var(--ease), box-shadow var(--tMed) var(--ease);
}
.statCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.08);
}
.statCardTop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.dot1 {
  background: rgba(26, 127, 115, 0.92);
}
.dot2 {
  background: rgba(11, 42, 42, 0.92);
}
.statCardTitle {
  font-weight: 840;
}
.statCardBody {
  color: rgba(14, 27, 27, 0.85);
}

.prose p {
  margin: 0 0 14px;
  max-width: 76ch;
  color: rgba(14, 27, 27, 0.9);
}
.prose p:last-child {
  margin-bottom: 0;
}

.servicesGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.serviceCard {
  border-radius: calc(var(--radius) + 12px);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(14, 27, 27, 0.12);
  padding: 16px 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
  transition: transform var(--tMed) var(--ease), box-shadow var(--tMed) var(--ease), border-color var(--tMed) var(--ease);
}
.serviceCard:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 127, 115, 0.28);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.08);
}

.serviceTop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.serviceTitle {
  margin: 0;
  font-size: 1.12em;
  letter-spacing: -0.02em;
}
.servicePrice {
  font-weight: 900;
  background: rgba(26, 127, 115, 0.12);
  border: 1px solid rgba(26, 127, 115, 0.22);
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.serviceBody {
  margin: 10px 0 0;
  color: rgba(14, 27, 27, 0.86);
}

.servicesFootnote {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.98em;
  padding: 14px 14px;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid rgba(14, 27, 27, 0.1);
  background: rgba(245, 251, 251, 0.65);
}

.steps {
  display: grid;
  gap: 14px;
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px 16px;
  border-radius: calc(var(--radius) + 12px);
  border: 1px solid rgba(14, 27, 27, 0.12);
  background: rgba(255, 255, 255, 0.7);
  transition: transform var(--tMed) var(--ease), box-shadow var(--tMed) var(--ease);
}
.step:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.08);
}
.stepNum {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: rgba(26, 127, 115, 0.15);
  border: 1px solid rgba(26, 127, 115, 0.25);
  display: grid;
  place-items: center;
  font-weight: 920;
}
.stepTitle {
  margin: 0;
  font-size: 1.06em;
  letter-spacing: -0.01em;
}
.stepText {
  margin: 8px 0 0;
  color: rgba(14, 27, 27, 0.86);
}

.benefitGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.benefit {
  border-radius: calc(var(--radius) + 12px);
  border: 1px solid rgba(14, 27, 27, 0.12);
  background: rgba(255, 255, 255, 0.72);
  padding: 16px 16px;
  transition: transform var(--tMed) var(--ease), box-shadow var(--tMed) var(--ease);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}
.benefit:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.08);
}
.benefitTitle {
  margin-top: 10px;
  font-weight: 860;
}
.benefitText {
  margin-top: 8px;
  color: rgba(14, 27, 27, 0.86);
}
.benefitIcon {
  width: 42px;
  height: 42px;
  border-radius: calc(var(--radius) + 10px);
  background: linear-gradient(135deg, rgba(26, 127, 115, 0.2), rgba(11, 42, 42, 0.12));
  border: 1px solid rgba(14, 27, 27, 0.12);
}
.benefitIcon2 {
  background: linear-gradient(135deg, rgba(46, 155, 255, 0.25), rgba(11, 42, 42, 0.08));
}
.benefitIcon3 {
  background: linear-gradient(135deg, rgba(255, 210, 122, 0.32), rgba(11, 42, 42, 0.08));
}
.benefitIcon4 {
  background: linear-gradient(135deg, rgba(11, 42, 42, 0.18), rgba(26, 127, 115, 0.12));
}
.benefitIcon5 {
  background: linear-gradient(135deg, rgba(26, 127, 115, 0.18), rgba(46, 155, 255, 0.12));
}
.benefitIcon6 {
  background: linear-gradient(135deg, rgba(255, 210, 122, 0.24), rgba(26, 127, 115, 0.1));
}

.faqList {
  display: grid;
  gap: 12px;
}
.faqItem {
  border-radius: calc(var(--radius) + 12px);
  border: 1px solid rgba(14, 27, 27, 0.12);
  background: rgba(255, 255, 255, 0.72);
  padding: 14px 14px;
  overflow: hidden;
  transition: border-color var(--tMed) var(--ease), transform var(--tMed) var(--ease);
}
.faqItem[open] {
  border-color: rgba(26, 127, 115, 0.32);
}
.faqItem summary {
  cursor: pointer;
  font-weight: 820;
  letter-spacing: -0.01em;
}
.faqBody {
  margin-top: 10px;
  color: rgba(14, 27, 27, 0.86);
}

.contactGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.contactInfo {
  border-radius: calc(var(--radius) + 14px);
  border: 1px solid rgba(14, 27, 27, 0.12);
  background: rgba(255, 255, 255, 0.72);
  padding: 16px 16px;
}
.infoBlock {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.infoLabel {
  font-weight: 820;
  color: rgba(14, 27, 27, 0.86);
  font-size: 0.98em;
}
.infoValue {
  color: rgba(14, 27, 27, 0.88);
}

.inlineLink {
  color: rgba(11, 42, 42, 0.96);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.inlineLink:hover {
  color: rgba(26, 127, 115, 0.98);
}

.contactNote {
  color: rgba(14, 27, 27, 0.86);
  padding-top: 6px;
}

.benefitsOutro {
  margin: 18px 0 0;
  color: rgba(14, 27, 27, 0.86);
  max-width: 78ch;
}

.contactNext {
  margin-top: 16px;
  color: rgba(14, 27, 27, 0.86);
  line-height: 1.55;
  padding-top: 2px;
  border-top: 1px solid rgba(14, 27, 27, 0.08);
}

.servingLine {
  font-weight: 730;
  color: rgba(11, 42, 42, 0.95);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(14, 27, 27, 0.16);
}

.mapWrap {
  margin-top: 16px;
  border-radius: calc(var(--radius) + 14px);
  overflow: hidden;
  border: 1px solid rgba(14, 27, 27, 0.12);
  background: rgba(245, 251, 251, 0.55);
}

.mapFrame {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
}

.contactForm {
  border-radius: calc(var(--radius) + 14px);
  border: 1px solid rgba(14, 27, 27, 0.12);
  background: rgba(255, 255, 255, 0.72);
  padding: 16px 16px;
}

/* Cookie banner */
.cookieBanner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(22px);
  width: min(820px, calc(100% - 20px));
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(14, 27, 27, 0.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.16);
  padding: 14px 14px;
  z-index: 9999;
  opacity: 1;
  transition: transform var(--tMed) var(--ease), opacity var(--tMed) var(--ease);
}
.cookieBanner[data-visible="false"] {
  opacity: 0;
  transform: translateX(-50%) translateY(34px);
}
.cookieText {
  font-weight: 680;
  color: rgba(14, 27, 27, 0.92);
  line-height: 1.35;
  margin-bottom: 10px;
}
.cookieActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cookieBtn {
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 760;
  border: 1px solid rgba(14, 27, 27, 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(14, 27, 27, 0.95);
  transition: transform var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease),
    background var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
}
.cookieBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.14);
}
.cookieBtn:active {
  transform: translateY(0px) scale(0.99);
}
.cookieAccept {
  background: rgba(26, 127, 115, 0.14);
  border-color: rgba(26, 127, 115, 0.32);
}
.cookieReject {
  background: rgba(11, 42, 42, 0.06);
  border-color: rgba(11, 42, 42, 0.18);
}

.luxDark .cookieBanner {
  background: rgba(6, 22, 22, 0.86);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.95);
}
.luxDark .cookieText {
  color: rgba(255, 255, 255, 0.86);
}
.luxDark .cookieBtn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.94);
}
.luxDark .cookieAccept {
  background: rgba(26, 127, 115, 0.16);
  border-color: rgba(26, 127, 115, 0.3);
}
.luxDark .cookieReject {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.formRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.formFoot {
  min-height: 1.2em;
  color: var(--muted);
  font-weight: 650;
}

.siteFooter {
  padding: 28px 0 48px;
  border-top: 1px solid rgba(14, 27, 27, 0.08);
  background: linear-gradient(180deg, rgba(245, 251, 251, 0.65), rgba(255, 255, 255, 1));
}

.footerContainer {
  display: grid;
  gap: 18px;
}

.footerLeft,
.footerRight {
  display: grid;
  gap: 8px;
}

.footerBrand {
  font-weight: 920;
  letter-spacing: -0.02em;
}
.footerCopy {
  color: var(--muted);
}

.footerLinks {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footerLinks a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 720;
  padding: 10px 10px;
  border-radius: calc(var(--radiusSm) + 2px);
  border: 1px solid rgba(14, 27, 27, 0.1);
  background: rgba(255, 255, 255, 0.7);
  transition: transform var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease);
}
.footerLinks a:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
}

.footerSmall {
  color: var(--muted);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Responsive layout */
@media (min-width: 860px) {
  .heroInner {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas: "copy media" "stats stats";
    gap: 22px;
  }
  .heroCopy {
    grid-area: copy;
  }
  .heroMedia {
    grid-area: media;
  }
  .heroStats {
    grid-area: stats;
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps .step:nth-child(3),
  .steps .step:nth-child(4) {
    grid-column: span 1;
  }

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

  .contactGrid {
    grid-template-columns: 0.95fr 1.05fr;
  }

  .formRow {
    grid-template-columns: 1fr 1fr;
  }

  .footerContainer {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

/* Nav variants (controlled by JS) */
.nav[data-visible="true"] {
  display: flex;
}
.navCenter[data-visible="true"] {
  display: flex;
}
.sidebarNav[data-visible="true"] {
  display: flex;
  align-items: center;
}

/* Hero layout variants */
@media (min-width: 860px) {
  .hero.variant-01 .heroInner,
  .hero.variant-02 .heroInner,
  .hero.variant-03 .heroInner,
  .hero.variant-04 .heroInner,
  .hero.variant-05 .heroInner,
  .hero.variant-06 .heroInner,
  .hero.variant-07 .heroInner,
  .hero.variant-08 .heroInner,
  .hero.variant-09 .heroInner,
  .hero.variant-10 .heroInner,
  .hero.variant-11 .heroInner,
  .hero.variant-12 .heroInner,
  .hero.variant-13 .heroInner,
  .hero.variant-14 .heroInner,
  .hero.variant-15 .heroInner,
  .hero.variant-16 .heroInner,
  .hero.variant-17 .heroInner,
  .hero.variant-18 .heroInner,
  .hero.variant-19 .heroInner,
  .hero.variant-20 .heroInner,
  .hero.variant-21 .heroInner,
  .hero.variant-22 .heroInner,
  .hero.variant-23 .heroInner,
  .hero.variant-24 .heroInner,
  .hero.variant-25 .heroInner {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .hero.variant-01 .heroBg {
    background: radial-gradient(1000px 520px at 5% 10%, rgba(26, 127, 115, 0.26), transparent 52%),
      radial-gradient(760px 460px at 90% 15%, rgba(11, 42, 42, 0.2), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(245, 251, 251, 0.95));
  }
  .hero.variant-01 .heroTitle {
    text-shadow: 0 18px 40px rgba(0, 0, 0, 0.07);
  }
  .hero.variant-02 .heroBg {
    background: radial-gradient(900px 520px at 80% 0%, rgba(46, 155, 255, 0.22), transparent 48%),
      radial-gradient(700px 420px at 5% 20%, rgba(26, 127, 115, 0.24), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(245, 251, 251, 0.92));
  }
  .hero.variant-03 .heroInner {
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-areas: "media copy" "stats stats";
  }
  .hero.variant-03 .heroCopy {
    grid-area: copy;
  }
  .hero.variant-03 .heroMedia {
    grid-area: media;
  }
  .hero.variant-03 .heroBadge {
    justify-self: end;
  }
  .hero.variant-04 .heroInner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "copy media" "media stats";
  }
  .hero.variant-04 .heroStats {
    grid-template-columns: 1fr;
  }
  .hero.variant-05 .heroBg {
    background: radial-gradient(1000px 540px at 20% 0%, rgba(255, 210, 122, 0.28), transparent 55%),
      radial-gradient(700px 420px at 90% 20%, rgba(26, 127, 115, 0.18), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(245, 251, 251, 0.92));
  }
  .hero.variant-05 .heroBadge {
    transform: rotate(-2deg);
  }
  .hero.variant-06 .heroInner {
    grid-template-columns: 1.25fr 0.75fr;
    grid-template-areas: "copy media" "copy stats";
  }
  .hero.variant-06 .heroStats {
    grid-template-columns: 1fr;
  }
  .hero.variant-07 .heroBg {
    background: linear-gradient(180deg, rgba(11, 42, 42, 0.1), rgba(255, 255, 255, 0.9)),
      radial-gradient(880px 520px at 10% 10%, rgba(26, 127, 115, 0.26), transparent 50%);
  }
  .hero.variant-07 .heroTitle {
    letter-spacing: -0.03em;
  }
  .hero.variant-08 .heroInner {
    grid-template-columns: 0.95fr 1.05fr;
    grid-template-areas: "copy media" "stats stats";
  }
  .hero.variant-08 .heroMeta {
    grid-template-columns: 1fr;
  }
  .hero.variant-09 .heroBg {
    background: radial-gradient(950px 510px at 60% -20%, rgba(46, 155, 255, 0.22), transparent 55%),
      radial-gradient(640px 400px at 20% 20%, rgba(26, 127, 115, 0.2), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 251, 0.92));
  }
  .hero.variant-09 .mediaCard {
    border-radius: calc(var(--radius) + 26px);
  }
  .hero.variant-10 .heroInner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "copy copy" "media stats";
  }
  .hero.variant-10 .heroCopy {
    grid-column: 1 / -1;
  }
  .hero.variant-10 .heroStats {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero.variant-11 .heroBg {
    background: radial-gradient(900px 520px at 10% 60%, rgba(26, 127, 115, 0.24), transparent 52%),
      radial-gradient(740px 460px at 90% 20%, rgba(255, 210, 122, 0.26), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(245, 251, 251, 0.93));
  }
  .hero.variant-11 .heroCtas {
    gap: 10px;
  }
  .hero.variant-12 .heroInner {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .hero.variant-12 .heroBadge {
    width: 240px;
    height: 130px;
  }
  .hero.variant-13 .heroBg {
    background: radial-gradient(960px 520px at 90% 5%, rgba(11, 42, 42, 0.22), transparent 52%),
      radial-gradient(760px 420px at 10% 20%, rgba(26, 127, 115, 0.22), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(245, 251, 251, 0.92));
  }
  .hero.variant-13 .heroStats {
    grid-template-columns: 1fr;
  }
  .hero.variant-14 .heroInner {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas: "copy media" "stats stats";
  }
  .hero.variant-14 .statCard:nth-child(2) {
    background: rgba(245, 251, 251, 0.7);
  }
  .hero.variant-15 .heroBg {
    background: radial-gradient(900px 520px at 15% 0%, rgba(255, 210, 122, 0.26), transparent 55%),
      radial-gradient(740px 460px at 88% 22%, rgba(11, 42, 42, 0.22), transparent 58%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 251, 0.92));
  }
  .hero.variant-15 .heroMeta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero.variant-16 .heroInner {
    grid-template-columns: 1.35fr 0.65fr;
  }
  .hero.variant-16 .heroBadge {
    display: none;
  }
  .hero.variant-17 .heroBg {
    background: radial-gradient(1050px 520px at 30% 0%, rgba(46, 155, 255, 0.22), transparent 55%),
      radial-gradient(760px 460px at 90% 25%, rgba(26, 127, 115, 0.2), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(245, 251, 251, 0.93));
  }
  .hero.variant-17 .mediaStats {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hero.variant-18 .heroInner {
    grid-template-columns: 0.8fr 1.2fr;
  }
  .hero.variant-18 .heroBadge {
    justify-self: start;
    transform: translateY(6px) rotate(2deg);
  }
  .hero.variant-19 .heroBg {
    background: radial-gradient(880px 520px at 8% 18%, rgba(26, 127, 115, 0.22), transparent 55%),
      radial-gradient(660px 420px at 90% 0%, rgba(255, 210, 122, 0.26), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 251, 0.93));
  }
  .hero.variant-19 .heroStats {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero.variant-20 .heroInner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "copy media" "copy stats";
  }
  .hero.variant-20 .heroStats {
    grid-template-columns: 1fr;
  }
  .hero.variant-21 .heroBg {
    background: radial-gradient(980px 520px at 90% 0%, rgba(11, 42, 42, 0.22), transparent 55%),
      radial-gradient(760px 420px at 20% 30%, rgba(46, 155, 255, 0.2), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(245, 251, 251, 0.94));
  }
  .hero.variant-21 .heroCtas {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero.variant-22 .heroBg {
    background: radial-gradient(960px 540px at 20% 10%, rgba(26, 127, 115, 0.26), transparent 55%),
      radial-gradient(720px 450px at 92% 15%, rgba(46, 155, 255, 0.18), transparent 58%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 251, 0.92));
  }
  .hero.variant-22 .mediaCard::after {
    background: radial-gradient(circle at 30% 30%, rgba(46, 155, 255, 0.28), transparent 60%);
  }
  .hero.variant-23 .heroInner {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas: "media copy" "stats stats";
  }
  .hero.variant-23 .heroBadge {
    width: 200px;
  }
  .hero.variant-24 .heroBg {
    background: radial-gradient(1020px 560px at 10% 0%, rgba(255, 210, 122, 0.28), transparent 55%),
      radial-gradient(760px 460px at 90% 18%, rgba(11, 42, 42, 0.22), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 251, 0.93));
  }
  .hero.variant-24 .metaPill {
    background: rgba(245, 251, 251, 0.72);
  }
  .hero.variant-25 .heroInner {
    grid-template-columns: 1.2fr 0.8fr;
  }
  .hero.variant-25 .heroStats .statCard:nth-child(1) {
    background: rgba(245, 251, 251, 0.72);
  }
}

/* Services layout variants (20+) */
@media (min-width: 860px) {
  .servicesGrid.layout-01 { --servicesCols: 2; }
  .servicesGrid.layout-02 { --servicesCols: 3; }
  .servicesGrid.layout-03 { --servicesCols: 2; }
  .servicesGrid.layout-04 { --servicesCols: 3; }
  .servicesGrid.layout-05 { --servicesCols: 2; }
  .servicesGrid.layout-06 { --servicesCols: 3; }
  .servicesGrid.layout-07 { --servicesCols: 2; }
  .servicesGrid.layout-08 { --servicesCols: 3; }
  .servicesGrid.layout-09 { --servicesCols: 2; }
  .servicesGrid.layout-10 { --servicesCols: 3; }
  .servicesGrid.layout-11 { --servicesCols: 2; }
  .servicesGrid.layout-12 { --servicesCols: 3; }
  .servicesGrid.layout-13 { --servicesCols: 2; }
  .servicesGrid.layout-14 { --servicesCols: 3; }
  .servicesGrid.layout-15 { --servicesCols: 2; }
  .servicesGrid.layout-16 { --servicesCols: 3; }
  .servicesGrid.layout-17 { --servicesCols: 2; }
  .servicesGrid.layout-18 { --servicesCols: 3; }
  .servicesGrid.layout-19 { --servicesCols: 2; }
  .servicesGrid.layout-20 { --servicesCols: 3; }

  /* Small visual differences per layout option */
  .servicesGrid.layout-01 .serviceCard { border-radius: calc(var(--radius) + 8px); }
  .servicesGrid.layout-02 .serviceCard { border-radius: calc(var(--radius) + 18px); }
  .servicesGrid.layout-03 .serviceCard { border-style: dashed; }
  .servicesGrid.layout-04 .serviceCard { background: rgba(245, 251, 251, 0.78); }
  .servicesGrid.layout-05 .serviceCard { border-color: rgba(11, 42, 42, 0.16); }
  .servicesGrid.layout-06 .serviceCard { box-shadow: 0 8px 18px rgba(0,0,0,0.05); }
  .servicesGrid.layout-07 .serviceCard { border-radius: 0px; }
  .servicesGrid.layout-08 .serviceCard { border-radius: calc(var(--radius) + 28px); }
  .servicesGrid.layout-09 .serviceCard { padding: 18px 18px; }
  .servicesGrid.layout-10 .serviceCard { padding: 14px 14px; }
  .servicesGrid.layout-11 .servicePrice { background: rgba(11, 42, 42, 0.12); border-color: rgba(11, 42, 42, 0.22); }
  .servicesGrid.layout-12 .servicePrice { background: rgba(46, 155, 255, 0.14); border-color: rgba(46, 155, 255, 0.24); }
  .servicesGrid.layout-13 .servicePrice { background: rgba(255, 210, 122, 0.22); border-color: rgba(255, 210, 122, 0.28); }
  .servicesGrid.layout-14 .serviceTitle { letter-spacing: -0.03em; }
  .servicesGrid.layout-15 .serviceCard:hover { transform: translateY(-3px); }
  .servicesGrid.layout-16 .serviceCard:hover { border-color: rgba(46, 155, 255, 0.25); }
  .servicesGrid.layout-17 .serviceBody { color: rgba(14, 27, 27, 0.82); }
  .servicesGrid.layout-18 .serviceBody { color: rgba(11, 42, 42, 0.86); }
  .servicesGrid.layout-19 .serviceCard { background: rgba(255, 255, 255, 0.66); }
  .servicesGrid.layout-20 .serviceCard { background: rgba(245, 251, 251, 0.7); }

  /* Asymmetric emphasis for some layouts */
  .servicesGrid.layout-03 .serviceCard:nth-child(1) { grid-column: span 2; }
  .servicesGrid.layout-04 .serviceCard:nth-child(3) { grid-column: span 2; }
  .servicesGrid.layout-08 .serviceCard:nth-child(2) { grid-column: span 2; }
  .servicesGrid.layout-11 .serviceCard:nth-child(4) { grid-column: span 2; }
  .servicesGrid.layout-16 .serviceCard:nth-child(5) { grid-column: span 2; }
  .servicesGrid.layout-20 .serviceCard:nth-child(1) { grid-column: span 2; }
}

/* Button style variants applied by JS */
.btn[data-style="solid"] {
  background: linear-gradient(135deg, var(--brand), #0c4c43);
  border-color: rgba(11, 42, 42, 0.26);
  color: #eaffff;
}
.btn[data-style="outline"] {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(14, 27, 27, 0.22);
  color: var(--ink);
}
.btn[data-style="ghost"] {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(14, 27, 27, 0.12);
  color: var(--ink);
}
.btn[data-style="gradient"] {
  background: linear-gradient(135deg, #0b2a2a, #1a7f73, rgba(46, 155, 255, 0.7));
  border-color: rgba(26, 127, 115, 0.38);
  color: #eaffff;
}

/* Dark luxury variant (controlled by JS) */
.luxDark {
  background: radial-gradient(1200px 700px at 15% -20%, rgba(26, 127, 115, 0.28), transparent 45%),
    radial-gradient(900px 560px at 90% 0%, rgba(46, 155, 255, 0.18), transparent 55%),
    #061616;
  color: rgba(255, 255, 255, 0.93);
}
.luxDark .sectionSub,
.luxDark .prose p,
.luxDark .serviceBody,
.luxDark .statCardBody,
.luxDark .heroLead,
.luxDark .servicesFootnote,
.luxDark .benefitText,
.luxDark .faqBody,
.luxDark .footerCopy,
.luxDark .footerSmall,
.luxDark .contactNote,
.luxDark .contactNext,
.luxDark .servingLine,
.luxDark .benefitsOutro,
.luxDark .quickNote,
.luxDark .infoValue {
  color: rgba(255, 255, 255, 0.86);
}
.luxDark .navLink,
.luxDark .brandSub,
.luxDark .sectionTitle,
.luxDark .footerBrand,
.luxDark .infoLabel,
.luxDark .serviceTitle,
.luxDark .servicePrice,
.luxDark .statCardTitle,
.luxDark .stepTitle,
.luxDark .stepText,
.luxDark .faqItem summary,
.luxDark .heroTitle {
  color: rgba(255, 255, 255, 0.96);
}
.luxDark input,
.luxDark select,
.luxDark textarea,
.luxDark .mediaCard,
.luxDark .serviceCard,
.luxDark .statCard,
.luxDark .step,
.luxDark .benefit,
.luxDark .faqItem,
.luxDark .contactForm,
.luxDark .contactInfo,
.luxDark .servicesFootnote,
.luxDark .chip,
.luxDark .metaPill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.luxDark .btnOutline,
.luxDark .btnGhost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
}
.luxDark .inlineLink {
  color: rgba(255, 255, 255, 0.95);
}
.luxDark .navCta {
  background: rgba(26, 127, 115, 0.16);
}
.luxDark .heroBg {
  background: radial-gradient(1000px 520px at 5% 10%, rgba(26, 127, 115, 0.22), transparent 52%),
    radial-gradient(760px 460px at 90% 15%, rgba(46, 155, 255, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(6, 22, 22, 0.6));
}

.luxDark .mapWrap {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Additional visual moods (controlled by JS; only one applies at a time) */
.mood-corporate-clean {
  --brand2: #1a7f73;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(26, 127, 115, 0.18), transparent 45%),
    radial-gradient(900px 500px at 90% 10%, rgba(11, 42, 42, 0.14), transparent 50%),
    #ffffff;
}
.mood-minimal {
  --brand2: #1a7f73;
  background: linear-gradient(180deg, #ffffff, #f7fbfb);
}
.mood-warm-local {
  --brand2: #c85a2a;
  background: radial-gradient(1200px 650px at 15% -20%, rgba(200, 90, 42, 0.20), transparent 45%),
    radial-gradient(900px 540px at 95% 10%, rgba(26, 127, 115, 0.14), transparent 52%),
    #ffffff;
}
.mood-bold-modern {
  --brand2: #2e9bff;
  background: radial-gradient(1150px 620px at 20% -25%, rgba(46, 155, 255, 0.22), transparent 48%),
    radial-gradient(900px 520px at 90% 10%, rgba(26, 127, 115, 0.14), transparent 52%),
    #ffffff;
}

/* Reduce motion (micro-interactions only otherwise) */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}