:root {
  --brand: #850e51;
  --brand-dark: #5f0939;
  --accent: #c23f89;
  --ink: #111827;
  --text: #374151;
  --muted: #6b7280;
  --concrete: #f2f2f2;
  --loft: #171017;
  --steel: #2a2028;
  --font-heading: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); background: #fff; }
h1, h2, h3, h4, .brand-text { font-family: var(--font-heading); letter-spacing: .02em; }
h1 { font-size: clamp(39px, 8vw, 82px); line-height: .9; color: #fff; text-transform: uppercase; }
h2 { font-size: clamp(31px, 5vw, 54px); line-height: 1; color: var(--ink); text-transform: uppercase; }
h3, h4 { font-size: 22px; color: var(--ink); }
p, li, td, th, a, button { font-size: 16px; }
.footer-text { font-size: 14px; }
.container-wide { max-width: 1180px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(23,16,23,.96); border-bottom: 1px solid rgba(255,255,255,.12); }
.logo-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--brand); color: #fff; border: 2px solid var(--accent); }
.brand-text { font-size: 24px; color: #fff; text-transform: uppercase; }
.desktop-nav, .desktop-phone { display: none !important; }
.mobile-menu-button { display: inline-flex !important; }
@media (min-width: 768px) { .desktop-nav { display: flex !important; } .desktop-phone { display: inline-flex !important; } .mobile-menu-button, .mobile-menu { display: none !important; } }
.nav-link { color: #fff; font-weight: 700; text-transform: uppercase; font-size: 16px; }
.nav-link:hover { color: #ffc8e5; }
.phone-button, .cta-button { color: #fff !important; background: var(--brand); border: 2px solid var(--accent); min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.15rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 0 rgba(255,255,255,.45); animation: pulseGlow 2.4s infinite; transition: transform .2s ease, background .2s ease; }
.phone-button:hover, .cta-button:hover { background: var(--brand-dark); transform: translateY(-2px); }
.hero { position: relative; min-height: 820px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(rgba(16,10,16,.72), rgba(16,10,16,.78)), url('../images/hero-kitchen.jpg') center/cover no-repeat; }
.hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 45%, transparent 58%); transform: translateX(-120%); animation: lightSweep 7s ease-in-out infinite; }
#particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-content { position: relative; z-index: 2; text-align: center; color: #fff; }
.hero-kicker { color: #fff; font-weight: 900; text-transform: uppercase; letter-spacing: .2em; }
.stars { color: var(--accent); font-size: 30px; letter-spacing: .15em; text-shadow: 0 0 18px rgba(194,63,137,.65); }
.review-icon-row img { width: auto; height: 48px; max-width: 86px; object-fit: contain; background: #fff; padding: 5px; }
.hero-long-cta { color: #fff; font-size: 20px; font-weight: 900; }
.section-pad { padding: 5rem 0; }
.section-dark { background: var(--loft); color: #f9fafb; }
.section-concrete { background: var(--concrete); }
.eyebrow { display: inline-block; background: var(--accent); color: #fff; padding: .35rem .7rem; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .8rem; }
.heading-rule { width: 86px; height: 5px; background: var(--accent); margin-top: .8rem; margin-bottom: 1.5rem; }
.heading-rule.center { margin-left: auto; margin-right: auto; }
.loft-card { background: #fff; border: 1px solid #dedede; box-shadow: 12px 12px 0 rgba(133,14,81,.13); color: var(--text); }
.dark-card { background: #241923; color: #f9fafb; border: 1px solid rgba(255,255,255,.12); }
.dark-card h3, .dark-card h4 { color: #fff; }
.service-card { background: #fff; color: var(--text); border-left: 6px solid var(--brand); padding: 1.25rem; min-height: 100%; }
.service-icon { width: 54px; height: 54px; display: grid; place-items: center; background: var(--concrete); border: 2px solid var(--brand); color: var(--brand); margin-bottom: .9rem; }
.split-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 768px) { .split-row { grid-template-columns: 7fr 3fr; } }
.split-row.reverse { direction: rtl; }
.split-row.reverse > * { direction: ltr; }
.image-slab { width: 100%; height: 100%; min-height: 260px; object-fit: cover; filter: saturate(1.05) contrast(1.05); }
.model-table { width: 100%; border-collapse: collapse; background: #fff; color: var(--text); }
.model-table th { background: var(--brand); color: #fff; text-align: left; }
.model-table th, .model-table td { border: 1px solid #d1d5db; padding: .9rem; vertical-align: top; }
.review-track { display: flex; transition: transform .45s ease; }
.review-slide { min-width: 100%; padding: .75rem; }
@media (min-width: 768px) { .review-slide { min-width: 33.3333%; } }
.review-card { height: 100%; background: #fff; color: var(--text); border-top: 6px solid var(--accent); padding: 1.35rem; }
.map-wrap iframe { width: 100%; height: 450px; border: 0; filter: grayscale(.25) contrast(1.05); }
.mobile-sticky-call { display: none !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; transform: translateY(110%); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
.mobile-sticky-call.visible { transform: translateY(0); opacity: 1; }
@media (max-width: 767px) { .mobile-sticky-call { display: block !important; } body { padding-bottom: 76px; } .section-pad { padding: 3.5rem 0; } .hero { min-height: 760px; } .review-icon-row img { height: 42px; max-width: 62px; } }
@media (min-width: 768px) { .mobile-sticky-call { display: none !important; } }
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.42); } 70% { box-shadow: 0 0 0 15px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@keyframes lightSweep { 0%, 55% { transform: translateX(-125%); } 80%, 100% { transform: translateX(125%); } }
.depth-in { animation: depthIn .8s ease both; }
@keyframes depthIn { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.bow-truss { background-image: linear-gradient(135deg, rgba(133,14,81,.08) 25%, transparent 25%), linear-gradient(225deg, rgba(133,14,81,.08) 25%, transparent 25%); background-size: 34px 34px; }