/* City Cleaners Kenya — Classic Heritage
   Heritage Navy #142231 · Warm Brass #C5A059 · Soft Cream #F9F8F6
   Charcoal #1C2D37 · Slate Gray #A3B1C2
   Headings: Lora · Body & labels: Montserrat */

:root {
  --navy: #142231;
  --brass: #C5A059;
  --brass-text: #8A6A24;      /* brass darkened to pass AA on cream */
  --cream: #F9F8F6;
  --charcoal: #1C2D37;
  --slate: #A3B1C2;           /* decorative / on-dark text */
  --slate-text: #4A5B6B;      /* slate darkened for readable muted text on cream */
  --keyline: rgba(197, 160, 89, .55);
  --keyline-soft: rgba(197, 160, 89, .32);
  --serif: 'Lora', 'Playfair Display', Georgia, serif;
  --sans: 'Montserrat', 'Inter', system-ui, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.6;
  background: var(--cream);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
b, strong { font-weight: 600; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif) !important;
  font-style: normal;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-weight: 500 !important; font-size: clamp(2rem, 3vw, 2.75rem) !important; line-height: 1.15 !important; letter-spacing: -.005em !important; }
h2 { font-weight: 600 !important; font-size: 1.75rem !important; line-height: 1.2 !important; letter-spacing: 0 !important; }
h3 { font-weight: 600 !important; font-size: 1.2rem !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
h4 { font-weight: 600 !important; font-size: 1.05rem !important; line-height: 1.3 !important; }
p { text-wrap: pretty; }

/* Subtitles & location tags: Montserrat Medium, 0.8rem, tracked 1.5px */
.uppercase {
  text-transform: uppercase !important;
  font-family: var(--sans);
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
}
.tracking-wider, .tracking-wide, .tracking-widest { letter-spacing: 1.5px !important; }
.font-bold, .font-extrabold, .font-semibold { font-weight: 600 !important; }
h1.font-bold, h1.font-extrabold { font-weight: 500 !important; }

/* Elegant divider under section titles */
main h2::after {
  content: ""; display: block; width: 2.75rem; height: 1px; margin-top: .7rem; background: var(--brass);
}
main .text-center h2::after, main h2.text-center::after { margin-left: auto; margin-right: auto; }
main .bg-primary-container h2::after { background: var(--brass); }
main .flex.items-end.justify-between h2::after { margin-top: .5rem; }

/* Text colours */
.text-secondary { color: var(--brass-text) !important; }
.bg-primary-container .text-secondary, .bg-primary .text-secondary,
.bg-tertiary-container .text-secondary, .bg-inverse-surface .text-secondary { color: var(--brass) !important; }
[class*="bg-surface-container-lowest/"] .text-secondary, [class*="bg-surface-container-lowest/"].text-secondary { color: var(--brass-text) !important; }
.text-primary, .text-primary-container { color: var(--navy); }
.text-on-surface-variant { color: var(--slate-text) !important; }
.text-on-primary-container { color: var(--slate) !important; }
.bg-primary-container h1, .bg-primary h1, .hero-split h1 { color: #FFFFFF; }
.bg-primary-container h2, .bg-primary h2, .bg-primary-container h3, .bg-primary h3,
.bg-inverse-surface h2, .bg-inverse-surface h3, .bg-tertiary-container h3 { color: #FFFFFF; }

/* ---------- Header ---------- */
header.fixed {
  background: rgba(249, 248, 246, .92) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: none !important;
  border-bottom: 1px solid var(--keyline);
}
header img { height: 2.5rem; }
.deskNav a {
  font-family: var(--sans);
  font-weight: 500 !important;
  font-size: .66rem !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: .5rem .5rem !important;
  position: relative;
  background: transparent !important;
}
.deskNav a::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .15rem; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.deskNav a:hover::after, .deskNav a[aria-current="page"]::after { transform: scaleX(1); }
.deskNav a[aria-current="page"] { color: var(--navy) !important; font-weight: 600 !important; }
header a[aria-label="Call Support"] {
  background: transparent !important; border: 1px solid var(--keyline); color: var(--brass-text) !important; border-radius: 0 !important;
}
header .bg-primary.rounded-full { background: var(--navy) !important; border-radius: 0 !important; }

/* ---------- Drawer ---------- */
#mobile-drawer { border-right: 1px solid var(--keyline-soft); background: var(--cream) !important; }
#mobile-drawer nav a {
  border-radius: 0 !important; border-left: 2px solid transparent;
  font-family: var(--sans); font-size: .82rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
}
#mobile-drawer nav a[aria-current="page"] { background: var(--navy) !important; border-left-color: var(--brass); color: #fff !important; }
#mobile-drawer nav a[aria-current="page"] .material-symbols-outlined { color: var(--brass) !important; }
#mobile-drawer .bg-surface-container-low { background: var(--cream) !important; border-top: 1px solid var(--keyline-soft); }

/* ---------- Buttons: squared, uppercase, no pills ---------- */
:is(a, button, span, div).rounded-full:is([class*="px-"], [class*="py-"]),
:is(a, button).rounded-full:is([class^="h-11 "], [class^="h-12 "], [class^="h-14 "]) {
  border-radius: 0 !important;
}
:is(a, button):is([class*="px-"], [class^="h-11 "], [class^="h-12 "], [class^="h-14 "]):is([class*="bg-secondary"], .bg-primary, .bg-tertiary-container) {
  font-family: var(--sans);
  font-size: .85rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
:is(a, button)[class*="bg-secondary"]:not([class*="bg-secondary-"]) {
  background: var(--brass) !important; color: var(--navy) !important; border: 1px solid var(--brass);
}
:is(a, button)[class*="bg-secondary"]:not([class*="bg-secondary-"]) .material-symbols-outlined { color: inherit !important; }
@media (hover: hover) {
  :is(a, button)[class*="bg-secondary"]:not([class*="bg-secondary-"]):hover { background: var(--navy) !important; color: var(--brass) !important; border-color: var(--brass); }
}
:is(a, button).bg-primary:not(.rounded-full.w-8) { background: var(--navy) !important; border: 1px solid var(--navy); color: #fff !important; }
@media (hover: hover) { :is(a, button).bg-primary:not(.rounded-full.w-8):hover { background: transparent !important; color: var(--navy) !important; } }
:is(a, button).bg-tertiary-container { background: var(--navy) !important; border: 1px solid var(--brass); color: var(--brass) !important; }
:is(a, button).bg-tertiary-container .material-symbols-outlined { color: inherit !important; }
.bg-surface-container-lowest\/15, .bg-surface-container-highest\/20 { border: 1px solid rgba(197, 160, 89, .5); }

/* Chips, tags and badges */
.category-chip {
  border: 1px solid var(--keyline-soft); background: transparent !important; color: var(--navy) !important;
  font-family: var(--sans); font-size: .72rem !important; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
}
.category-chip.active-filter, .category-chip.bg-primary { background: var(--navy) !important; color: var(--brass) !important; border-color: var(--navy); box-shadow: none !important; }
[class*="rounded-md"], [class*="rounded-lg"]:not([class*="w-"]) { border-radius: 0 !important; }

/* ---------- Surfaces: 1px frames, subtle drop shadows ---------- */
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
  box-shadow: 0 1px 2px rgba(20, 34, 49, .05), 0 14px 28px -20px rgba(20, 34, 49, .30) !important;
}
[class*="bg-surface-container-lowest"][class*="rounded-"]:not([class*="bg-surface-container-lowest/"]):not(aside):not(header):not(nav):not(button):not(a) {
  border: 1px solid var(--keyline-soft);
  background-color: var(--cream);
}
.ring-2.ring-secondary { --tw-ring-shadow: 0 0 0 1px var(--brass) !important; box-shadow: 0 0 0 1px var(--brass), 0 14px 28px -20px rgba(20, 34, 49, .35) !important; }
[class*="border-outline-variant"], .border-surface-container { border-color: var(--keyline-soft) !important; }
hr, .divide-y > * + * { border-color: var(--keyline-soft); }

/* Icon tiles: outlined, thin glyphs */
.bg-secondary-fixed, .bg-primary-fixed, .bg-tertiary-fixed,
[class*="w-12 h-12"][class*="bg-surface-container-high"], [class*="w-9 h-9"][class*="bg-surface-container-low"] {
  background: transparent !important; border: 1px solid var(--keyline);
}
.bg-secondary-fixed .material-symbols-outlined, .bg-tertiary-fixed .material-symbols-outlined,
[class*="w-12 h-12"][class*="bg-surface-container-high"] .material-symbols-outlined,
[class*="w-9 h-9"][class*="bg-surface-container-low"] .material-symbols-outlined { color: var(--brass-text) !important; }
[class*="w-12 h-12"][class*="rounded-"][class*="bg-"], .w-12.h-12.rounded-xl, .w-14.h-14.rounded-xl { border-radius: 0 !important; }
.material-symbols-outlined { font-variation-settings: 'wght' 200; }
.material-symbols-outlined[style*="FILL' 1"] { font-variation-settings: 'FILL' 1, 'wght' 300; }
.bg-gradient-to-r.to-secondary { background-image: linear-gradient(110deg, #0E1824 0%, #142231 65%, #1F3347 100%) !important; border-bottom: 1px solid var(--keyline); }

/* ---------- Hero ---------- */
.hero-split, section.bg-primary-container { border-radius: 0 !important; }
.hero-split { box-shadow: 0 30px 60px -40px rgba(20, 34, 49, .65); }
#hero-carousel::after {
  content: ""; position: absolute; inset: 12px 12px 58px 12px;
  border: 1px solid rgba(197, 160, 89, .75); pointer-events: none; z-index: 2;
}
#hero-carousel [data-prev], #hero-carousel [data-next] {
  background: rgba(20, 34, 49, .55) !important; color: var(--brass) !important;
  border: 1px solid rgba(197, 160, 89, .6); border-radius: 0 !important; z-index: 3;
}
#hero-carousel [data-dot] { border-radius: 0 !important; height: 3px !important; }
#hero-carousel [data-dot].bg-white { background: var(--brass) !important; }
#hero-caption { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .95rem !important; letter-spacing: .01em; }
@media (min-width: 1024px) {
  .hero-split h1 { font-size: clamp(2rem, 3vw, 2.75rem) !important; line-height: 1.15 !important; }
  .hero-split p { font-size: .95rem !important; line-height: 1.6 !important; }
}

/* ---------- Page rhythm ---------- */
main section { scroll-margin-top: 5rem; }
@media (min-width: 768px) { main section[class*="pt-space-lg"] { padding-top: 3.5rem !important; } }
.rg { gap: 1.25rem !important; }

/* ---------- Forms ---------- */
input, select, textarea {
  font-family: var(--sans); font-weight: 400; border-radius: 0 !important;
  border: 1px solid rgba(20, 34, 49, .3) !important; background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--brass) !important; outline: 2px solid rgba(197, 160, 89, .4); outline-offset: 1px; }
#quick-book-modal > div { border-radius: 0 !important; border: 1px solid var(--keyline); background: var(--cream); }

/* ---------- Bottom nav (mobile) ---------- */
body > nav {
  background: rgba(249, 248, 246, .94) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--keyline); box-shadow: none !important;
}
body > nav a { font-family: var(--sans); font-size: .62rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 500; }
body > nav a.text-secondary, body > nav a[aria-current="page"] { color: var(--navy) !important; }

/* ---------- Images & a11y ---------- */
main img:not([class*="rounded-full"]) { border-radius: 0; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--brass) !important; outline-offset: 3px; border-radius: 0;
}
::selection { background: rgba(197, 160, 89, .35); }

/* Keep the header uncluttered: full nav only when it fits, otherwise the menu button */
.deskNav { gap: 0 !important; }
header > div > .flex.items-center.min-w-0 { flex-shrink: 0; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .deskNav { display: none !important; }
  header button[aria-label="Open Menu"] { display: flex !important; }
}

/* Labels and CTA text stay on one line */
:is(a, button)[class*="px-"], :is(a, button)[class^="h-11 "], :is(a, button)[class^="h-12 "], .category-chip,
span[class*="px-"][class*="py-"] { white-space: nowrap; }
@media (max-width: 480px) {
  :is(a, button):is([class*="px-"], [class^="h-11 "], [class^="h-12 "]):is([class*="bg-secondary"], .bg-primary, .bg-tertiary-container) {
    font-size: .74rem !important; letter-spacing: .05em; gap: .35rem;
  }
}

/* ---------- Founder avatar (replaces placeholder person icons) ---------- */
.founder-avatar { border: 1.5px solid var(--brass); background: var(--cream); box-shadow: 0 0 0 2px var(--cream); }
.founder-avatar--dark { box-shadow: 0 0 0 2px var(--navy); }
.founder-avatar img { border-radius: 9999px; }
header .founder-avatar { transition: box-shadow .2s ease; }
@media (hover: hover) { header .founder-avatar:hover { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px var(--brass); } }

/* ---------- Interactive map ---------- */
.ccmap { position: relative; width: 100%; height: 280px !important; background: var(--surface-container, #ECE9E3); z-index: 0; border-radius: 0 !important; overflow: hidden; cursor: crosshair; }
.ccmap.leaflet-container { font-family: var(--sans); }
.ccmap .leaflet-control-attribution { font-size: 10px; background: rgba(249,248,246,.85); }
.ccmap .leaflet-bar a { border-radius: 0; color: var(--navy); }
.ccmap .leaflet-bar { border: 1px solid var(--keyline); box-shadow: none; }
.ccmap-hq span { display: block; width: 18px; height: 18px; background: var(--navy); border: 2px solid var(--brass); transform: rotate(45deg); box-shadow: 0 2px 6px rgba(20,34,49,.4); }
.ccmap-tip.leaflet-tooltip { background: var(--navy); color: #fff; border: 1px solid var(--brass); border-radius: 0; box-shadow: none; font: 500 .7rem var(--sans); letter-spacing: .06em; padding: 3px 8px; }
.ccmap-tip.leaflet-tooltip-top::before { border-top-color: var(--brass); }
.ccmap-pin span { display: block; width: 26px; height: 26px; background: var(--brass); border: 2px solid var(--navy); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(20,34,49,.45); }
.ccmap-bar { padding: .9rem; display: flex; flex-direction: column; gap: .7rem; background: var(--cream); border-top: 1px solid var(--keyline-soft); }
.ccmap-status { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--slate-text); }
.ccmap-bar.has-pin .ccmap-status { color: var(--navy); font-weight: 500; }
.ccmap-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ccmap-btn {
  flex: 1 1 14rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .6rem 1rem; cursor: pointer;
  font: 600 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--navy); border: 1px solid var(--navy); border-radius: 0;
  transition: background-color .2s ease, color .2s ease;
}
.ccmap-btn .material-symbols-outlined { font-size: 18px; }
.ccmap-btn--primary { background: var(--navy); color: var(--brass); border-color: var(--brass); }
.ccmap-btn:disabled { opacity: .6; cursor: progress; }
@media (hover: hover) {
  .ccmap-btn:hover { background: var(--navy); color: var(--brass); }
  .ccmap-btn--primary:hover { background: var(--brass); color: var(--navy); }
}
@media (min-width: 768px) { .ccmap { height: 340px !important; } }