.elementor-10 .elementor-element.elementor-element-aee999c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-7f17150 *//* ============================================================
   LUXE PREMIER SLATE — Complete CSS FINAL v4
   Premier Architectural Roofing · Tequesta, FL
   ============================================================ */

/* --- Color Token Overrides --- */
.bg-primary { background-color: #005865 !important; }
.bg-primary-container { background-color: #007283 !important; }
.text-primary { color: #005865 !important; }
.text-secondary { color: #556066 !important; }
.text-on-primary { color: #ffffff !important; }
.bg-surface { background-color: #f7f9fc !important; }
.bg-surface-container { background-color: #eceef1 !important; }
.bg-surface-container-low { background-color: #f2f4f7 !important; }
.bg-surface-container-high { background-color: #e6e8eb !important; }
.bg-surface-container-lowest { background-color: #ffffff !important; }
.border-primary { border-color: #005865 !important; }
.border-outline-variant { border-color: #bec8cb !important; }

/* --- Button Colors & Hovers --- */
.hover\:bg-primary-container:hover { background-color: #007283 !important; }
.hover\:bg-primary:hover { background-color: #005865 !important; }
.hover\:text-white:hover { color: #ffffff !important; }
button { border: none !important; }
.border-2 { border: 2px solid #005865 !important; }

/* --- Remove All Red/Pink Focus Outlines --- */
*:focus { outline: none !important; box-shadow: none !important; }
button:focus { outline: none !important; box-shadow: none !important; }
input:focus { outline: none !important; box-shadow: none !important; border-color: #005865 !important; }
select:focus { outline: none !important; box-shadow: none !important; border-color: #005865 !important; }
textarea:focus { outline: none !important; box-shadow: none !important; border-color: #005865 !important; }

/* --- Form Fields --- */
input, select, textarea {
  background: rgba(255,255,255,0.5) !important;
  border: none !important;
  border-bottom: 2px solid #bec8cb !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  color: #191c1e !important;
}
input:focus, select:focus, textarea:focus {
  border-bottom-color: #005865 !important;
  background: rgba(255,255,255,0.7) !important;
}

/* --- Glassmorphism Card --- */
.glass-card {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* --- Review Cards White --- */
.bg-surface-container-lowest.rounded-xl {
  background-color: #ffffff !important;
  box-shadow: 0 2px 16px rgba(26,34,38,0.06) !important;
}

/* --- Material Icons --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-family: 'Material Symbols Outlined' !important;
}

/* --- Scrollbar Hide --- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Fix Overflow --- */
body { overflow-x: hidden !important; }
main { overflow-x: hidden !important; }
section { overflow: hidden !important; }

/* --- Executive Report Button --- */
.mt-10.bg-white.text-primary {
  background-color: #ffffff !important;
  color: #005865 !important;
}

/* --- Hero white gap fix --- */
.relative.min-h-\[921px\] {
  margin-top: -80px !important;
  padding-top: 80px !important;
}

/* ============================================================
   MOBILE — 768px
   ============================================================ */
@media (max-width: 768px) {

  /* ---- HERO ---- */
  .relative.min-h-\[921px\] {
    min-height: 100svh !important;
    display: flex !important;
    align-items: flex-end !important;
    padding-bottom: 2rem !important;
  }
  .lg\:grid-cols-12 {
    grid-template-columns: 1fr !important;
  }
  .lg\:col-span-7 > p.text-secondary {
    display: none !important;
  }
  .lg\:col-span-7 {
    grid-column: span 1 !important;
    z-index: 10 !important;
    padding: 1.25rem !important;
    background: rgba(247,249,252,0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    margin: 80px 0.75rem 1rem !important;
    border-radius: 0.75rem !important;
  }
  .lg\:col-span-7 h1 {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.625rem !important;
  }
  .lg\:col-span-7 p.text-lg {
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
  }
  .lg\:col-span-7 .flex.flex-wrap.gap-4 button {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
  }
  .lg\:col-span-5 {
    grid-column: span 1 !important;
    padding: 0 0.75rem 2rem !important;
  }

  /* ---- LEAD FORM ---- */
  .glass-card {
    margin: 0 !important;
    border-radius: 0.75rem !important;
    width: 100% !important;
    padding: 1.75rem 1.5rem !important;
    box-shadow: 0 8px 32px rgba(26,34,38,0.12) !important;
  }
  .grid.grid-cols-2.gap-4 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  input, select {
    width: 100% !important;
    padding: 1rem 0 !important;
    font-size: 1rem !important;
  }

  /* ---- TRUST BAR 2x2 GRID ---- */
  .bg-surface-container.py-12 > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .bg-surface-container.py-12 > div > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 1.5rem 0.75rem !important;
    border-bottom: 1px solid rgba(138,145,153,0.1) !important;
    border-right: 1px solid rgba(138,145,153,0.1) !important;
    gap: 0.5rem !important;
  }
  .bg-surface-container.py-12 > div > div:nth-child(2n) {
    border-right: none !important;
  }
  .bg-surface-container.py-12 > div > div:nth-child(3),
  .bg-surface-container.py-12 > div > div:nth-child(4) {
    border-bottom: none !important;
  }
  .bg-surface-container.py-12 > div > div .material-symbols-outlined {
    font-size: 2rem !important;
    color: #005865 !important;
  }
  .bg-surface-container.py-12 > div > div span.font-headline {
    font-size: 0.6875rem !important;
    color: #556066 !important;
    text-align: center !important;
  }

  /* ---- REVIEWS SWIPEABLE ---- */
  .lg\:grid-cols-3.grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding: 0.5rem 1rem 1.5rem !important;
    scrollbar-width: none !important;
    margin: 0 -1.25rem !important;
  }
  .lg\:grid-cols-3.grid::-webkit-scrollbar { display: none !important; }
  .lg\:grid-cols-3.grid > div {
    min-width: 85vw !important;
    max-width: 85vw !important;
    scroll-snap-align: center !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .lg\:grid-cols-3.grid > div p {
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
  }

  /* ---- GENERAL GRID STACKING ---- */
  .lg\:grid-cols-4 { grid-template-columns: 1fr !important; }
  .lg\:grid-cols-2 { grid-template-columns: 1fr !important; }
  .md\:grid-cols-2 { grid-template-columns: 1fr !important; }
  .gap-20 { gap: 2rem !important; }
  .gap-16 { gap: 1.5rem !important; }
  .grid-cols-2 { grid-template-columns: 1fr 1fr !important; }

  /* ---- CTA BUTTONS STACK ---- */
  .sm\:flex-row { flex-direction: column !important; }
  .sm\:flex-row button, .sm\:flex-row a { width: 100% !important; }

  /* ---- SERVICE CARDS SWIPE ---- */
  .min-w-\[calc\(33\.333\%-1rem\)\] {
    min-width: 88vw !important;
    scroll-snap-align: start !important;
  }
  .flex.gap-4 > button { display: none !important; }

  /* ---- SECTION PADDING ---- */
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .p-12 { padding: 1.75rem !important; }
  .p-10 { padding: 1.5rem !important; }
  .p-8 { padding: 1.25rem !important; }

  /* ---- TYPOGRAPHY ---- */
  .text-7xl { font-size: 2rem !important; line-height: 1.1 !important; }
  .text-5xl { font-size: 1.75rem !important; line-height: 1.15 !important; }
  .text-4xl { font-size: 1.5rem !important; }
  .text-3xl { font-size: 1.25rem !important; }
  .text-2xl { font-size: 1.125rem !important; }
}

/* ============================================================
   MOBILE — 480px
   ============================================================ */
@media (max-width: 480px) {
  .text-7xl { font-size: 1.75rem !important; }
  .text-5xl { font-size: 1.5rem !important; }
  .text-4xl { font-size: 1.25rem !important; }
  .lg\:grid-cols-4 { grid-template-columns: 1fr !important; }
  .md\:grid-cols-2 { grid-template-columns: 1fr !important; }
  .py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .min-w-\[calc\(33\.333\%-1rem\)\] { min-width: 92vw !important; }
  .md\:grid-cols-4 { grid-template-columns: 1fr !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  button.px-10 { width: 100% !important; }
}/* End custom CSS */