/* M.A.D. General Contractors — Static HTML site
   All-black monochrome design system */

:root {
  --background: oklch(0.07 0 0);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.11 0 0);
  --card-foreground: oklch(0.98 0 0);
  --primary: oklch(0.98 0 0);
  --primary-foreground: oklch(0.07 0 0);
  --secondary: oklch(0.15 0 0);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.15 0 0);
  --muted-foreground: oklch(0.62 0 0);
  --accent: oklch(0.18 0 0);
  --accent-foreground: oklch(0.98 0 0);
  --border: oklch(0.2 0 0);
  --input: oklch(0.2 0 0);
  --ring: oklch(0.98 0 0);
  --radius: 0.625rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--foreground);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ---- Top banner ---- */
.topbar {
  background: color-mix(in oklab, var(--secondary) 90%, transparent);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
  backdrop-filter: blur(8px);
}
.topbar-inner {
  max-width: 80rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  color: var(--muted-foreground);
}
.topbar-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar-left .item { display: inline-flex; align-items: center; gap: 0.375rem; }
.topbar-left .item.fg { color: var(--foreground); font-weight: 500; }
.topbar-left .item.pri { color: var(--primary); }
.topbar-left .sep { color: var(--border); }
.topbar a.phone-link { font-weight: 600; color: var(--foreground); display: inline-flex; align-items: center; gap: 0.375rem; }
.topbar a.phone-link:hover { color: var(--primary); }
.icon { width: 0.875rem; height: 0.875rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon.sm { width: 0.75rem; height: 0.75rem; }
.icon.md { width: 1rem; height: 1rem; }
.icon.lg { width: 1.5rem; height: 1.5rem; }
.icon.xl { width: 2rem; height: 2rem; }
.icon.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@media (max-width: 640px) {
  .topbar-left .hide-sm { display: none; }
}

/* ---- Navbar ---- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--background) 95%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.navbar-inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .navbar-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .navbar-inner { padding: 0 2rem; } }
.navbar-row { display: flex; align-items: center; justify-content: space-between; height: 5rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand-logo {
  width: 3rem; height: 3rem; border-radius: 9999px;
  border: 2px solid color-mix(in oklab, var(--primary) 60%, transparent);
  overflow: hidden; background: #000; padding: 0.125rem;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }
.brand-name { font-family: "Cinzel", serif; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.05em; color: var(--foreground); display: block; line-height: 1; }
.brand-sub { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; }
.brand:hover .brand-name { color: var(--primary); }

.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-link { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); transition: color .15s; display: inline-flex; align-items: center; gap: 0.375rem; }
.nav-link:hover { color: var(--foreground); }
.nav-link.active { color: var(--primary); font-weight: 600; }
.nav-link .icon { color: var(--primary); }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-cta { display: none; align-items: center; gap: 0.75rem; }
@media (min-width: 640px) { .nav-cta { display: flex; } }
.nav-cta .fast { display: none; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.nav-cta .fast:hover { color: var(--foreground); }
@media (min-width: 1280px) { .nav-cta .fast { display: inline-flex; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.375rem; font-weight: 600; transition: all .15s; border: 1px solid transparent;
  text-align: center; cursor: pointer;
}
.btn-primary { background: var(--primary); color: var(--primary-foreground); padding: 0.625rem 1.25rem; font-size: 0.875rem; box-shadow: 0 4px 12px -2px rgba(0,0,0,.4); }
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.btn-outline { background: var(--secondary); border-color: var(--border); color: var(--foreground); padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.btn-outline:hover { border-color: var(--primary); }
.btn-lg { padding: 1rem 2rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.btn-block { width: 100%; }

/* Mobile menu */
.menu-btn { display: inline-flex; padding: 0.5rem; border-radius: 0.375rem; color: var(--muted-foreground); background: none; border: none; }
.menu-btn:hover { color: var(--foreground); background: var(--muted); }
@media (min-width: 1024px) { .menu-btn { display: none; } }
.mobile-menu { display: none; border-bottom: 1px solid var(--border); background: var(--card); padding: 0.75rem 1rem 1.5rem; }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }
.mobile-menu.open { display: block; }
.mobile-menu a.m-link { display: block; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 1rem; font-weight: 500; color: var(--foreground); }
.mobile-menu a.m-link:hover { background: var(--muted); }
.mobile-menu a.m-link.pri { color: var(--primary); }
.mobile-menu .m-divider { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }

/* ---- Layout helpers ---- */
.section { padding: 3rem 1rem; }
@media (min-width: 640px) { .section { padding: 3rem 1.5rem; } }
@media (min-width: 1024px) { .section { padding: 3rem 2rem; } }
.stack > * + * { margin-top: 2.5rem; }
.stack-sm > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-12 { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .grid-12 { grid-template-columns: repeat(12, 1fr); } }
.col-span-5 { grid-column: span 1; } .col-span-7 { grid-column: span 1; }
@media (min-width: 1024px) { .col-span-5 { grid-column: span 5; } .col-span-7 { grid-column: span 7; } }

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 48rem; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-7xl { max-width: 80rem; }
.max-w-md { max-width: 28rem; }
.muted { color: var(--muted-foreground); }
.pri { color: var(--primary); }
.fg { color: var(--foreground); }
.serif { font-family: "Cinzel", serif; }
.italic { font-style: italic; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }
.font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .font-light { font-weight: 300; }
.text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; } .text-5xl { font-size: 3rem; }
@media (min-width: 640px) { .sm\:text-3xl { font-size: 1.875rem; } .sm\:text-4xl { font-size: 2.25rem; } .sm\:text-5xl { font-size: 3rem; } }
@media (min-width: 1024px) { .lg\:text-5xl { font-size: 3rem; } .lg\:text-6xl { font-size: 3.75rem; } .lg\:text-left { text-align: left; } }

.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  background: var(--secondary); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  font-size: 0.75rem; font-weight: 600; color: var(--primary); letter-spacing: 0.025em;
}
.badge-box {
  display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent);
  padding: 0.25rem 0.75rem; border-radius: 0.375rem; border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
}
.card { background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; }
.card-hover { transition: all .2s; }
.card-hover:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.pill { display: inline-flex; align-items: center; gap: 0.375rem; background: var(--card); padding: 0.375rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--border); font-size: 0.75rem; color: var(--muted-foreground); }

.divider { border-top: 1px solid var(--border); }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .gap-12 { gap: 3rem; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.pt-2 { padding-top: 0.5rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .pt-12 { padding-top: 3rem; } .pt-16 { padding-top: 4rem; }
.pb-12 { padding-bottom: 3rem; } .pb-20 { padding-bottom: 5rem; }
.p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.lead { font-size: 1.125rem; color: var(--muted-foreground); max-width: 42rem; }
.lead.lg { font-size: 1.25rem; }

.icon-badge { width: 3rem; height: 3rem; border-radius: 0.5rem; background: color-mix(in oklab, var(--primary) 15%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.icon-badge.lg { width: 4rem; height: 4rem; border-radius: 0.75rem; }
.icon-badge .icon { width: 1.5rem; height: 1.5rem; }

.hero-glow { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); width: 24rem; height: 24rem; background: color-mix(in oklab, var(--primary) 10%, transparent); border-radius: 9999px; filter: blur(64px); pointer-events: none; }

.feature-list { list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.feature-list li .icon { color: var(--primary); margin-top: 0.125rem; }

.value-box { padding: 1rem; border-radius: 0.75rem; background: var(--card); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); }
.value-box p { font-family: "Cinzel", serif; font-weight: 700; color: var(--foreground); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
@media (min-width: 1024px) { .value-box p { text-align: left; } }

/* Hero artwork card */
.art-card { border: 2px solid color-mix(in oklab, var(--primary) 40%, transparent); background: var(--card); padding: 1rem; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.8); }
.art-frame { border-radius: 0.75rem; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; padding: 0.5rem; }
.art-frame img { width: 100%; height: auto; object-fit: contain; max-height: 460px; }
.sub-card { padding: 0.75rem; border-radius: 0.5rem; background: color-mix(in oklab, var(--secondary) 80%, transparent); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; gap: 0.625rem; }
.sub-card .left { display: flex; align-items: center; gap: 0.625rem; }
.sub-card .rose { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.sub-card .label { font-weight: 600; color: var(--foreground); }
.sub-card .sub { color: var(--muted-foreground); }
.sub-card a.email { color: var(--primary); font-weight: 600; }
.sub-card a.email:hover { text-decoration: underline; }

/* Explore cards */
.explore-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; }
.explore-card .top { display: flex; flex-direction: column; gap: 1rem; }
.explore-card h3 { font-size: 1.25rem; }
.explore-card .desc { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; }
.explore-card .foot { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.explore-card .foot .go { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); display: inline-flex; align-items: center; gap: 0.25rem; }
.explore-card:hover .foot .go { color: var(--foreground); }
.explore-card:hover h3 { color: var(--primary); }

/* Service cards */
.svc-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; }
.svc-card .top { display: flex; flex-direction: column; gap: 1rem; }
.svc-card h2 { font-size: 1.25rem; }
.svc-card .desc { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.7; }
.svc-card .feat-head { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin-bottom: 0.5rem; }
.svc-card .foot { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.svc-card .foot a.req { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); display: inline-flex; align-items: center; gap: 0.375rem; }
.svc-card .foot a.req:hover { color: var(--foreground); }
.svc-card .foot a.tel { font-size: 0.75rem; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 0.25rem; }
.svc-card .foot a.tel:hover { color: var(--foreground); }
.svc-card .foot a.tel .icon { color: var(--primary); }

/* CTA banner */
.cta-banner { background: linear-gradient(to right, var(--card), var(--secondary), var(--card)); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .cta-banner { flex-direction: row; text-align: left; padding: 2.5rem; } }

/* Footer */
.footer { background: var(--card); border-top: 1px solid var(--border); padding-top: 4rem; padding-bottom: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer h3 { font-size: 1rem; letter-spacing: 0.025em; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.footer h3 .dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--primary); }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; color: var(--muted-foreground); }
.footer ul a { display: flex; align-items: center; gap: 0.5rem; transition: color .15s; }
.footer ul a:hover { color: var(--primary); }
.footer ul a .bdot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--border); }
.footer ul a:hover .bdot { background: var(--primary); }
.footer-bottom { padding-top: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-bottom .espanol { color: var(--foreground); }

/* Page hero header */
.page-hero { text-align: center; max-width: 48rem; margin: 0 auto; }
.page-hero h1 { font-size: 2.25rem; }
@media (min-width: 768px) { .page-hero h1 { font-size: 3rem; } }
.page-hero .lead { margin: 1rem auto 0; }

/* Forms */
.form-field { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 0.625rem 0.875rem; border-radius: 0.375rem;
  background: var(--background); border: 1px solid var(--border); color: var(--foreground);
  font-size: 0.875rem; font-family: inherit;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); }
.form-textarea { resize: vertical; }
.radio-row { display: flex; gap: 1rem; padding-top: 0.25rem; flex-wrap: wrap; }
.radio-row label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--foreground); cursor: pointer; }
.radio-row input { accent-color: var(--primary); }
.form-success { text-align: center; padding: 3rem 2rem; background: color-mix(in oklab, var(--secondary) 50%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); border-radius: 0.75rem; }

/* Gallery filter */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.filter-btn { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); transition: all .15s; }
.filter-btn:hover { color: var(--foreground); background: var(--muted); }
.filter-btn.active { background: var(--primary); color: var(--primary-foreground); }

/* Gallery card */
.gal-card { display: flex; flex-direction: column; overflow: hidden; }
.gal-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; background: color-mix(in oklab, #000 40%, transparent); }
.gal-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gal-card:hover .gal-frame img { transform: scale(1.05); }
.gal-tag { position: absolute; top: 0.75rem; left: 0.75rem; background: color-mix(in oklab, var(--background) 90%, transparent); backdrop-filter: blur(8px); color: var(--foreground); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.25rem 0.625rem; border-radius: 0.25rem; border: 1px solid var(--border); }
.gal-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.gal-loc { font-size: 0.75rem; font-weight: 600; color: var(--primary); }
.gal-title { font-size: 1.125rem; font-family: "Cinzel", serif; font-weight: 700; color: var(--foreground); }
.gal-desc { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; }
.gal-foot { padding-top: 1rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.gal-foot a { font-size: 0.75rem; font-weight: 600; color: var(--primary); }
.gal-foot a:hover { color: var(--foreground); }
.gal-foot .cert { font-size: 0.6875rem; color: var(--muted-foreground); }

/* Steps */
.step-card { background: var(--card); border: 1px solid var(--border); padding: 1.5rem; border-radius: 0.75rem; }
.step-num { font-size: 1.875rem; font-family: "Cinzel", serif; font-weight: 800; color: color-mix(in oklab, var(--primary) 40%, transparent); }
.step-card h3 { font-size: 1.125rem; }
.step-card p { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; }

/* Realtor benefit row */
.benefit-row { padding: 1rem; border-radius: 0.75rem; background: color-mix(in oklab, var(--secondary) 50%, transparent); border: 1px solid color-mix(in oklab, var(--border) 80%, transparent); display: flex; align-items: flex-start; gap: 0.875rem; transition: all .15s; }
.benefit-row:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.benefit-icon { width: 2rem; height: 2rem; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 15%, transparent); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.125rem; }
.benefit-row h3 { font-size: 1rem; }
.benefit-row p { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; margin-top: 0.25rem; }
.flyer-frame { border: 2px solid color-mix(in oklab, var(--primary) 40%, transparent); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); max-width: 28rem; width: 100%; background: #fff; }
.flyer-frame img { width: 100%; height: auto; object-fit: contain; }

/* Contact info rows */
.info-row { display: flex; align-items: flex-start; gap: 1rem; padding: 0.875rem; border-radius: 0.75rem; background: color-mix(in oklab, var(--secondary) 60%, transparent); border: 1px solid var(--border); transition: all .15s; }
.info-row:hover { background: var(--secondary); }
.info-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: color-mix(in oklab, var(--primary) 15%, transparent); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-label { font-size: 0.75rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; display: block; }
.info-val { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.info-sub { font-size: 0.75rem; color: var(--primary); display: block; margin-top: 0.125rem; }
.info-sub.muted { color: var(--muted-foreground); }

/* About image overlay */
.about-img-wrap { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; background: #000; }
.about-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-overlay { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--background) 90%, transparent), transparent); display: flex; align-items: flex-end; padding: 1.5rem; }
.about-badge { background: color-mix(in oklab, var(--card) 90%, transparent); backdrop-filter: blur(8px); border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent); border-radius: 0.75rem; padding: 1rem; display: flex; align-items: center; gap: 1rem; }
.about-badge img { width: 3rem; height: 3rem; object-fit: contain; }
.about-badge .k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); font-weight: 700; }
.about-badge .v { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }

.stat-box { padding: 1rem; border-radius: 0.75rem; background: var(--card); border: 1px solid var(--border); }
.stat-num { font-family: "Cinzel", serif; font-weight: 800; font-size: 1.5rem; color: var(--primary); display: block; }
.stat-lbl { font-size: 0.75rem; color: var(--muted-foreground); text-transform: uppercase; font-weight: 600; }

.pillar { background: var(--card); border: 1px solid var(--border); padding: 2rem; border-radius: 0.75rem; }
.pillar h3 { font-size: 1.25rem; margin-top: 1rem; }
.pillar p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.7; margin-top: 1rem; }

/* Insurance hero */
.ins-hero { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; position: relative; overflow: hidden; }
@media (min-width: 640px) { .ins-hero { padding: 3rem; } }

/* What-we-handle */
.wh-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; background: color-mix(in oklab, var(--secondary) 50%, transparent); border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; }
@media (min-width: 1024px) { .wh-grid { grid-template-columns: 1fr 1fr; padding: 2.5rem; } }
.wh-list { display: flex; flex-direction: column; gap: 0.75rem; }
.wh-list .item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--foreground); }
.wh-list .item .icon { color: var(--primary); margin-top: 0.125rem; }
.notice-box { background: var(--card); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); padding: 1.5rem; border-radius: 0.75rem; }
.notice-box h3 { font-size: 1rem; }

/* Realtor testimonial */
.testimonial { background: linear-gradient(to right, color-mix(in oklab, var(--secondary) 80%, transparent), var(--card), color-mix(in oklab, var(--secondary) 80%, transparent)); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); padding: 2rem; border-radius: 1rem; text-align: center; max-width: 56rem; margin: 0 auto; }
.testimonial .quote { font-family: "Cinzel", serif; font-style: italic; font-size: 1.125rem; color: var(--foreground); max-width: 42rem; margin: 1.5rem auto 0; line-height: 1.7; }
@media (min-width: 640px) { .testimonial .quote { font-size: 1.25rem; } }

/* CTA final */
.final-cta { max-width: 64rem; margin: 0 auto; padding: 0 1rem; text-align: center; }
.final-icon { width: 4rem; height: 4rem; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 10%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); margin: 0 auto; display: flex; align-items: center; justify-content: center; color: var(--primary); }

/* Mobile ordering for hero */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: repeat(12, 1fr); gap: 3rem; } .hero-left { grid-column: span 7; } .hero-right { grid-column: span 5; } }
.hero-right { order: 1; }
.hero-left { order: 2; text-align: center; }
@media (min-width: 1024px) { .hero-right { order: 2; } .hero-left { order: 1; text-align: left; } }
.hero-left .lead { margin: 0 auto; }
@media (min-width: 1024px) { .hero-left .lead { margin: 0; } }
.cta-row { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .cta-row { flex-direction: row; } }
@media (min-width: 1024px) { .cta-row { justify-content: flex-start; } }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: center; }
@media (min-width: 1024px) { .trust-row { justify-content: flex-start; } }

/* Realtor split */
.realtor-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; }
@media (min-width: 640px) { .realtor-split { padding: 2.5rem; } }
@media (min-width: 1024px) { .realtor-split { grid-template-columns: 5fr 7fr; } }
.realtor-flyer-col { display: flex; flex-direction: column; align-items: center; }
.realtor-pill { display: inline-block; background: var(--primary); color: var(--primary-foreground); font-family: "Cinzel", serif; font-weight: 800; font-size: 1.125rem; padding: 0.5rem 1rem; border-radius: 0.375rem; }

/* Contact layout */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: flex-start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; } }
.contact-info-card { background: var(--card); border: 1px solid var(--border); padding: 1.5rem; border-radius: 1rem; }
@media (min-width: 640px) { .contact-info-card { padding: 2rem; } }
.contact-form-card { background: var(--card); border: 1px solid var(--border); padding: 1.5rem; border-radius: 1rem; }
@media (min-width: 640px) { .contact-form-card { padding: 2.5rem; } }
.form-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.guarantee-box { background: linear-gradient(to bottom right, var(--card), color-mix(in oklab, var(--secondary) 70%, transparent), var(--card)); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); padding: 1.5rem; border-radius: 1rem; }
.guarantee-box .head { display: flex; align-items: center; gap: 0.5rem; color: var(--primary); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }

.divider-line { border-top: 1px solid var(--border); margin: 1rem 0; }
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }