/* ============================================================
   LUXURY REMODEL SOUTH FLORIDA — visual refinement layer v3
   Direction: editorial modern. Light, airy, refined — like a
   high-end shelter magazine. Contrast fixed so the lightness
   reads as intentional, never washed out.
   Purely cosmetic. No layout, content, or behavior changes.
   ============================================================ */

:root {
  /* Warm paper canvas */
  --background: oklch(98.4% 0.005 78);
  --card: oklch(100% 0 0);
  /* Ink: true near-black green for crisp text */
  --foreground: oklch(14% 0.016 155);
  --card-foreground: oklch(14% 0.016 155);
  /* Brand green, deep and clean */
  --primary: oklch(26% 0.055 158);
  --ring: oklch(26% 0.055 158);
  /* Gold, true and warm */
  --accent: oklch(63% 0.105 78);
  --gold: #c9a24b;
  /* Secondary text: readable, not whispering */
  --muted-foreground: oklch(40% 0.018 150);
  --border: oklch(91% 0.008 78);
  --muted: oklch(96% 0.006 78);
  --radius: 0.625rem;
}

/* ---------- Base ---------- */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
  color: var(--foreground);
}

/* Whisper of warm texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(oklch(90% 0.01 78) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.12;
}

::selection {
  background: oklch(63% 0.105 78 / 0.3);
}

/* Secondary copy: present, not pale */
.text-muted-foreground {
  color: oklch(40% 0.018 150) !important;
}

/* FIX (pre-existing bug): white text sitting directly on light
   section backgrounds was invisible. Dark sections untouched. */
.bg-secondary .text-white {
  color: var(--foreground) !important;
}
.bg-secondary .text-white\/80,
.bg-secondary .text-white\/70,
.bg-secondary .text-white\/60 {
  color: oklch(34% 0.02 150) !important;
}

/* ---------- Editorial typography ---------- */

h1, h2, h3 {
  text-wrap: balance;
  letter-spacing: -0.018em !important;
  font-weight: 400;
  /* NOTE: no color here — headings inherit ink, and .text-white
     headings on dark grounds must keep working (unlayered CSS
     beats Tailwind v4's layered utilities) */
}

/* Eyebrows: quiet, precise, letterspaced */
.font-mono.uppercase {
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  font-size: 0.72rem !important;
}
div .font-mono.uppercase.text-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
div .font-mono.uppercase.text-primary::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--gold);
  display: inline-block;
}

/* ---------- Header: invisible until scrolled ---------- */

header.fixed {
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
header[class*="bg-white/95"] {
  background-color: oklch(98.6% 0.004 78 / 0.85) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 oklch(89% 0.01 78) !important;
}

nav a[class*="px-4"] {
  position: relative;
  font-weight: 450 !important;
}
nav a[class*="px-4"]::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.4rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
nav a[class*="px-4"]:hover::after {
  transform: scaleX(1);
}

/* ---------- Buttons: tailored, not chunky ---------- */

.btn-primary,
a.btn-primary,
button.btn-primary {
  border-radius: 999px !important;
  background: oklch(24% 0.055 157) !important;
  box-shadow: 0 8px 20px -10px oklch(20% 0.05 155 / 0.5) !important;
  letter-spacing: 0.12em !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease, background-color 0.3s ease !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-1px);
  background: oklch(28% 0.058 158) !important;
  box-shadow: 0 12px 26px -10px oklch(20% 0.05 155 / 0.55) !important;
}

.btn-outline,
a.btn-outline,
button.btn-outline {
  border-radius: 999px !important;
  letter-spacing: 0.12em !important;
  border-width: 1px !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease, border-color 0.3s ease !important;
}
.btn-outline:hover {
  transform: translateY(-1px);
}

/* ---------- Hero: cinematic, quiet ---------- */

section .bg-gradient-to-t.from-black\/80 {
  background: linear-gradient(to top,
    oklch(9% 0.02 150 / 0.82),
    oklch(9% 0.02 150 / 0.3) 58%,
    oklch(9% 0.02 150 / 0.08)) !important;
}

/* Hero badge: glass */
section [class*="rounded-full"][class*="border-white"] {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: oklch(100% 0 0 / 0.08) !important;
  border-color: oklch(100% 0 0 / 0.2) !important;
}

/* Fine gold rule under the hero headline */
section h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 1.5rem;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ---------- Cards: gallery-like ---------- */

.group.flex.flex-col.p-8 {
  border-radius: 1rem !important;
  background: oklch(100% 0 0) !important;
  box-shadow: 0 1px 2px oklch(20% 0.03 150 / 0.04),
              0 20px 40px -28px oklch(20% 0.03 150 / 0.18) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease !important;
}
.group.flex.flex-col.p-8:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px oklch(20% 0.03 150 / 0.05),
              0 30px 60px -28px oklch(20% 0.03 150 / 0.25) !important;
}

[class*="bg-card"][class*="border"][class*="rounded"] {
  border-radius: 1rem !important;
}

/* ---------- Images: clean plates ---------- */

img.rounded-sm {
  border-radius: 0.75rem !important;
}

/* ---------- Sections: air ---------- */

.section-padding {
  padding-top: 7rem;
}
@media (max-width: 768px) {
  .section-padding {
    padding-top: 4.25rem;
  }
}

section[class*="bg-muted"] {
  background: oklch(96.2% 0.007 78) !important;
  border-top: 1px solid oklch(91% 0.01 78);
  border-bottom: 1px solid oklch(91% 0.01 78);
}

/* ---------- Numbers: editorial serif ---------- */

[class*="text-3xl"][class*="font-light"] {
  font-family: var(--font-heading) !important;
  letter-spacing: 0 !important;
}

/* ---------- Reviews ---------- */

[class*="border"][class*="bg-white"][class*="rounded"] {
  border-radius: 1rem !important;
}
.text-amber-400, .text-yellow-400, [class*="fill-amber"] {
  color: var(--gold) !important;
}

/* ---------- FAQ ---------- */

button[class*="w-full"][class*="text-left"] {
  border-radius: 0.75rem !important;
}
button[class*="w-full"][class*="text-left"]:hover {
  background: oklch(96.4% 0.007 78) !important;
}

/* ---------- Forms: crisp ---------- */

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: 0.6rem !important;
  border-color: oklch(87% 0.01 78) !important;
  background: oklch(100% 0 0) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px oklch(63% 0.105 78 / 0.15) !important;
  outline: none !important;
}

label {
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em;
}

form[class*="bg-white"],
form[class*="bg-card"],
div[class*="bg-white"][class*="shadow"] {
  border-radius: 1.25rem !important;
}

/* ---------- Footer ---------- */

footer {
  background: oklch(11% 0.022 156) !important;
}
footer a {
  transition: color 0.25s ease;
}
footer a:hover {
  color: var(--gold) !important;
}
footer h4, footer h3 {
  letter-spacing: 0.16em;
  font-size: 0.72rem !important;
}

/* ---------- Blog reading ---------- */

article p {
  line-height: 1.9 !important;
  color: oklch(22% 0.018 155) !important;
}
article h2 {
  margin-top: 2.5rem !important;
}

/* ---------- Fine details ---------- */

hr, .border-t {
  border-color: oklch(91% 0.01 78) !important;
}

nav .absolute.bg-white {
  border-radius: 0.9rem !important;
  box-shadow: 0 24px 48px -20px oklch(20% 0.03 150 / 0.22) !important;
}

a[href^="tel:"] {
  font-weight: 500;
}

.group img[class*="group-hover:scale"] {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.reveal {
  transform: translateY(26px);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: oklch(96% 0.006 78);
}
::-webkit-scrollbar-thumb {
  background: oklch(72% 0.025 150);
  border-radius: 8px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}