*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Jost', system-ui, sans-serif; background: #F5F0EA; color: #1A1410; -webkit-font-smoothing: antialiased; margin: 0; overflow-x: hidden; max-width: 100%; }
p { text-align: justify; }
.hero-photo p, .hero-bg p, section.text-center p, [style*="text-align: center"] p { text-align: center; }

/* ── Mobile menu panel — orange theme ── */
#mob-panel { background: #8B4A1A !important; }
#mob-panel img { filter: brightness(0) invert(1) !important; }
#mob-panel [class*="border-white"] { border-color: rgba(255,255,255,0.2) !important; }
#mob-close { color: rgba(255,255,255,0.7) !important; }
#mob-close:hover { color: #FFFFFF !important; }
#mob-panel .btn-gold { background: linear-gradient(135deg, #1C2E5A 0%, #0f1a3a 40%, #090D1C 100%) !important; box-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 4px 16px rgba(9,13,28,0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important; }
#mob-panel .btn-gold:hover { box-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 8px 28px rgba(9,13,28,0.5), inset 0 1px 0 rgba(255,255,255,0.1) !important; }

/* ── Hamburger menu button ── */
.nav-bar button[aria-label="Menu"] { color: #F5F0EA !important; }
.nav-bar button[aria-label="Menu"]:hover { color: #FFFFFF !important; }

/* ── Nav ── */
.nav-bar {
  background: #090D1C;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(192,90,40,0.3);
}
.nav-link {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(26,20,16,0.6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: #C05A28;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover { color: #1A1410; }
.nav-link:hover::after { width: 100%; }
.nav-link:focus-visible { outline: 2px solid #C05A28; outline-offset: 4px; border-radius: 2px; }
.nav-link-active { color: #1A1410; }
.nav-link-active::after { width: 100%; }

.nav-btn {
  background: linear-gradient(135deg, #D06E38 0%, #A04820 100%);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 22px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(192,90,40,0.35);
}
.nav-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(192,90,40,0.45); }
.nav-btn:hover::after { left: 160%; }
.nav-btn:active { transform: translateY(0); }
.nav-btn:focus-visible { outline: 2px solid #C05A28; outline-offset: 3px; }

/* ── Hero ── */
.hero-bg {
  background: #F5F0EA;
}
/* Photo hero with Ken Burns */
.hero-photo { background: #090D1C; }
@keyframes kenBurns {
  0%   { transform: scale(1.1); }
  100% { transform: scale(1.0); }
}
.hero-ken-burns {
  animation: kenBurns 18s ease-out alternate infinite;
  will-change: transform;
}
/* Ghost button on dark photo bg */
.hero-photo .btn-ghost {
  color: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.hero-photo .btn-ghost:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.65) !important;
}
.hero-headline {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: clamp(2.8rem, 6.5vw, 5.8rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-align: center;
}

/* ── Page hero (inner pages) ── */
.page-hero {
  padding: calc(100px + 72px) 24px 68px;
  text-align: center;
  background: #F5F0EA;
  border-bottom: 1px solid rgba(192,90,40,0.15);
}
/* Inner page h1 titles — Jost 800, no stroke (overrides inline stroke styles) */
.photo-hero-content h1,
.hero-bg h1 {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0px !important;
  text-shadow: none !important;
  letter-spacing: 0.08em !important;
}
/* White on dark photo bg, dark on cream bg */
.photo-hero-content h1 { color: #FFFFFF !important; }
.hero-bg h1 { color: #C05A28 !important; }

/* ── Section title pattern ── */
.section-title {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #C05A28;
  text-align: center;
  line-height: 1.1;
}
.title-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.title-rule::before, .title-rule::after {
  content: '';
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, transparent, rgba(192,90,40,0.3));
}
.title-rule::after {
  background: linear-gradient(270deg, transparent, rgba(192,90,40,0.3));
}
.title-diamond {
  width: 7px; height: 7px;
  background: #C05A28;
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.8;
}

/* ── Buttons ── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #D06E38 0%, #C05A28 40%, #A04820 100%);
  color: #FFFFFF;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 44px;
  border-radius: 2px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s cubic-bezier(0.16,1,0.3,1);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.08),
    0 4px 16px rgba(192,90,40,0.28),
    inset 0 1px 0 rgba(255,255,255,0.15);
  cursor: pointer; border: none;
}
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 8px 28px rgba(192,90,40,0.4), inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-gold:hover::after { left: 160%; }
.btn-gold:active { transform: translateY(0); }
.btn-gold:focus-visible { outline: 2px solid #C05A28; outline-offset: 3px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(26,20,16,0.82);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px 44px;
  border-radius: 2px;
  border: 1px solid rgba(26,20,16,0.3);
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1), color 0.22s ease;
}
.btn-ghost:hover { background: rgba(26,20,16,0.05); border-color: rgba(26,20,16,0.55); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }
.btn-ghost:focus-visible { outline: 2px solid #C05A28; outline-offset: 3px; }

/* ── Stats bar separator ── */
.stat-sep {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, rgba(26,20,16,0.15), transparent);
}
/* Separator in dark contexts */
.dark-stats .stat-sep {
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.18), transparent);
}

/* ── Cards ── */
.card-base {
  background: #FFFFFF;
  border: 1px solid rgba(192,90,40,0.18);
  border-radius: 3px;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
  color: #1A1410;
  position: relative;
}
/* Fixed height only for image-overlay grid cards (properties page) */
.grid-name-only .card-base { height: 260px; }
/* Image wrapper fills entire card — scoped to listing grids only */
.grid-name-only .card-base > div.relative {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}
/* Overlay: hidden at rest, fades in on hover — name only */
.card-base > div.p-6 {
  position: absolute !important;
  inset: 0 !important;
  padding: 24px !important;
  background: rgba(8,12,24,0.7) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  opacity: 0;
  transition: opacity 0.32s ease;
  flex: none !important;
}
.card-base:hover > div.p-6,
.card-base:focus-visible > div.p-6 { opacity: 1; }
/* Hide everything except the property name — scoped to name-only grids (properties page) */
.grid-name-only .card-base > div.p-6 > *:not(h3) { display: none !important; }
.card-base > div.p-6 h3 {
  color: #FFFFFF !important;
  font-family: 'Jost', system-ui, sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
/* Overview cards — always-visible below-image layout (home page recent projects) */
.card-overview {
  height: auto !important;
}
.card-overview > div.relative {
  position: relative !important;
  inset: auto !important;
  height: 180px !important;
}
.card-overview > div.p-6 {
  position: relative !important;
  inset: auto !important;
  background: transparent !important;
  opacity: 1 !important;
  align-items: flex-start !important;
  text-align: left !important;
  justify-content: flex-start !important;
  padding: 14px 18px 18px !important;
}
.card-overview > div.p-6 h3 {
  color: #1A1410 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}
.card-overview > div.p-6 > p {
  display: block !important;
  color: rgba(26,20,16,0.5) !important;
  font-size: 0.68rem !important;
  font-family: 'Jost', system-ui, sans-serif !important;
  letter-spacing: 0.04em !important;
  line-height: 1.6 !important;
  margin-top: 5px !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
.card-base:hover {
  transform: translateY(-5px);
  border-color: rgba(192,90,40,0.35);
  box-shadow: 0 12px 36px rgba(0,0,0,0.1), 0 0 0 1px rgba(192,90,40,0.2);
}
/* Property type label */
.card-base .text-gold {
  color: #C05A28 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  margin-bottom: 8px !important;
}

/* ── Icon badge ── */
.icon-badge {
  width: 44px; height: 44px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(192,90,40,0.08);
  border: 1px solid rgba(192,90,40,0.2);
  flex-shrink: 0;
}

/* ── Step number ── */
.step-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 5rem;
  font-weight: 600;
  color: rgba(192,90,40,0.18);
  line-height: 1;
  letter-spacing: -0.02em;
  user-select: none;
}

/* ── Testimonial ── */
.t-card {
  background: #FFFFFF;
  border: 1px solid rgba(192,90,40,0.12);
  border-radius: 3px;
  padding: 36px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  color: #1A1410;
}

.quote-mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 4.5rem;
  line-height: 0.5;
  color: rgba(192,90,40,0.28);
  font-weight: 600;
  user-select: none;
}

/* ── Divider ── */
.hr-subtle {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,20,16,0.1) 25%, rgba(26,20,16,0.1) 75%, transparent);
}

/* ── Footer links ── */
.f-link {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s ease;
  text-decoration: none;
}
.f-link:hover { color: #C05A28; }
.f-link:focus-visible { outline: 2px solid #C05A28; outline-offset: 2px; border-radius: 2px; }

/* ── Email / form inputs ── */
.form-input {
  background: rgba(26,20,16,0.04);
  border: 1px solid rgba(192,90,40,0.2);
  border-radius: 2px;
  padding: 15px 20px;
  color: #1A1410;
  font-size: 0.875rem;
  font-family: 'Jost', system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
}
.form-input::placeholder { color: rgba(26,20,16,0.35); }
.form-input:focus { border-color: rgba(192,90,40,0.6); }

/* ── Section alt ── */
.section-alt { background: #EDE6DC; }

/* ── Footer ── */
footer { background: #090D1C; }

/* ── Dark stats band ── */
.dark-stats {
  background: #090D1C !important;
  border-color: rgba(192,90,40,0.3) !important;
}

/* ── Scroll indicator ── */
@keyframes scrollDrop {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(8px); opacity: 0.1; }
}
.scroll-ind { animation: scrollDrop 4s ease-in-out infinite; }

/* ── Page load animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-up { animation: fadeUp 1.6s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.anim-in { animation: fadeIn 2s ease both; }
.d1 { animation-delay: 0.1s; }
.d2 { animation-delay: 0.35s; }
.d3 { animation-delay: 0.6s; }
.d4 { animation-delay: 0.88s; }
.d5 { animation-delay: 1.15s; }

/* ── Scroll reveal ── */
.sr {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sr.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Accent tag ── */
.accent-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C05A28;
}

/* ── Mobile nav links ── */
.mob-nav-link {
  display: block;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  transition: color 0.2s ease;
}
.mob-nav-link:hover { color: #C05A28; }
.mob-nav-link:focus-visible { outline: 2px solid #C05A28; outline-offset: 4px; border-radius: 2px; }

/* ── Contact card ── */
.contact-card {
  background: #FFFFFF;
  border: 1px solid rgba(192,90,40,0.12);
  border-radius: 3px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  color: #1A1410;
}

/* ────────────────────────────────────────────────
   LIGHT THEME: remap Tailwind white-text utilities
   ──────────────────────────────────────────────── */

/* 1. Globally remap text-white/* to warm dark */
[class*="text-white"] { color: rgba(26,20,16,0.78) !important; }

/* 2. Restore white text in explicitly dark zones */
.hero-photo [class*="text-white"],
.dark-stats [class*="text-white"],
footer [class*="text-white"],
.nav-bar [class*="text-white"] {
  color: rgba(255,255,255,0.82) !important;
}

/* 3. Card hover overlay & overview card headings stay correct */
.card-base > div.p-6 [class*="text-white"],
.card-base > div.p-6 h3 { color: #FFFFFF !important; }

/* 4. border-white/* → warm dark in light sections */
[class*="border-white"] { border-color: rgba(26,20,16,0.1) !important; }

/* Restore white borders in dark zones */
.hero-photo [class*="border-white"],
.dark-stats [class*="border-white"],
footer [class*="border-white"],
.nav-bar [class*="border-white"],
.filter-bar-dark [class*="border-white"] {
  border-color: rgba(255,255,255,0.1) !important;
}

/* 5. Keep card detail text dark and readable */
.card-base [class*="text-white"] { color: rgba(26,20,16,0.75) !important; }
.card-base [class*="text-white\/5"] { color: rgba(26,20,16,0.38) !important; }

/* 6. Brand copper stays copper everywhere */
.text-gold { color: #C05A28 !important; }

/* 7. Photo hero overlay content (property detail pages) */
.photo-hero-content [class*="text-white"] { color: rgba(255,255,255,0.82) !important; }
.photo-hero-content h1 { color: #FFFFFF !important; }

/* 8. Gallery counter: white text on dark badge within card */
.card-base .gallery-counter { color: rgba(255,255,255,0.75) !important; }

/* 9. Overview card headings (home page recent projects) must stay dark on white bg */
.card-overview > div.p-6 h3,
.card-overview > div.p-6 [class*="text-white"] { color: #1A1410 !important; }

/* 10. Gallery arrows: always visible on touch devices, contained within card */
@media (hover: none) {
  .gallery-prev,
  .gallery-next { opacity: 1 !important; }
}
/* Responsive gallery height — overrides fixed 640px inline style.
   Scales smoothly: ~220px on phone → ~420px on tablet → 640px on desktop */
[id^="gallery-"] > div:first-child {
  height: clamp(220px, 56vw, 640px) !important;
}

/* Fix CSS grid min-content overflow on property detail pages.
   Grid items default to min-width: min-content which lets thumbnail
   strips expand the card beyond the viewport. min-width: 0 restores
   proper containment so the grid cell stays within its track. */
section > div > .grid > * { min-width: 0; }
/* Gallery card and thumbnail strip stay within their container */
[id^="gallery-"] {
  max-width: 100% !important;
  overflow: hidden !important;
}
[id^="gallery-"] .overflow-x-auto {
  min-width: 0;
  width: 100%;
}

/* ── 375px viewport fixes ── */
@media (max-width: 389px) {
  /* Stats bar: force clean 2×2 grid instead of uneven flex-wrap */
  .dark-stats .flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem !important;
    justify-items: center;
  }
  .dark-stats .stat-sep { display: none !important; }

  /* Hero: reduce vertical padding so content fits 667px height */
  .hero-photo.min-h-screen > div.py-32 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  /* Tighten btn padding slightly so buttons don't crowd */
  .btn-gold, .btn-ghost { padding-left: 2rem !important; padding-right: 2rem !important; }

  /* Saddle-up option cards: reduce heavy padding at narrow widths */
  .option-card { padding: 24px 20px !important; }
}