.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════════════════
   PREMIER FENCE OF SWFL — SHARED PAGE STYLES  v5.1 (consolidated + legal)
   ───────────────────────────────────────────────────────────────────────────
   COMPLETE FILE. Replaces everything currently in Site Settings → Custom CSS.

   INSTALL:
     Elementor logo (E) → Site Settings → Custom CSS
     Select all existing content, delete it, paste this file, Update.

   WHAT CHANGED FROM v4:
     · Added the LEGAL PAGES section (used by /privacy-policy/ and
       /terms-of-use/). It fixes two conflicts with the base rules:
       .pf-wrap a renders navy-on-navy inside the .pf-facts contact block,
       and .pf-facts ul li::before puts a ✓ before street addresses.

   WHAT CHANGED IN v5.1:
     · BUG FIX, affects every page. Outline buttons inside CTA blocks were
       rendering navy-on-navy — invisible until hover. Two rules collided:
         .pf-cta-block .pf-btn-outline                (0,2,0) white text
         .pf-section > .pf-container .pf-btn-outline  (0,3,0) navy text
       The second won on specificity. Since every CTA block sits inside
       .pf-section > .pf-container, the navy rule applied. Fixed at the end
       of the BUTTONS section. "View Our Work" on all 24 pages was affected.

   Fonts: DM Sans (body) · Open Sans (headings) — matches the live theme
   Colors: #0F365B navy · #0E2E4B dark navy · #f4f6f8 off-white
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Open+Sans:wght@400;600;700;800&display=swap');

/* ── FULL-BLEED BREAKOUT ────────────────────────────────────────────────────
   Cancels the padding Elementor's section + column apply around the HTML
   widget, which is what shows as a gap around the edge of these pages.

   Preferred fix is in the Elementor UI (do this first):
     Section → Layout   → Content Width: Full Width
     Section → Advanced → Padding: 0 (all sides)
     Column  → Advanced → Padding: 0 (all sides)

   This rule is the fallback for when a theme wrapper still insets it.
   calc(50% - 50vw) is used rather than -50vw on purpose: 100vw includes the
   scrollbar width, which produces a phantom horizontal scroll on desktop.
   ─────────────────────────────────────────────────────────────────────────── */
.pf-wrap {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── RESET ── */
.pf-wrap, .pf-wrap *, .pf-wrap *::before, .pf-wrap *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.pf-wrap { font-family: 'DM Sans', sans-serif; color: #2d2d2d; line-height: 1.7; }
.pf-wrap img { max-width: 100%; height: auto; display: block; }
.pf-wrap a { color: #0F365B; text-decoration: none; }
.pf-wrap a:hover { text-decoration: underline; }

/* ── BANNER ── */
.pf-banner { background: #0F365B; padding: 56px 24px 48px; }
.pf-banner-inner { max-width: 1140px; margin: 0 auto; }
.pf-banner-crumb { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.pf-banner-crumb a { color: rgba(255,255,255,0.55); }
.pf-banner-crumb a:hover { color: #fff; }
.pf-banner-crumb span { color: rgba(255,255,255,0.35); margin: 0 6px; }
.pf-banner h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700; color: #fff; line-height: 1.18; margin-bottom: 14px;
}
.pf-banner-sub {
  font-size: 17px; color: rgba(255,255,255,0.78);
  max-width: 680px; line-height: 1.65; margin-bottom: 28px;
}
.pf-banner-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.pf-badge {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  padding: 5px 14px; border-radius: 4px;
}
.pf-banner-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pf-wrap .pf-banner a[href^="tel"] { color: rgba(255,255,255,0.92) !important; text-decoration: none !important; }

/* ── BUTTONS ──
   The !important flags below exist to beat Elementor's
   .elementor-widget-text-editor a rule. Kept, but consolidated into one
   place per variant instead of the three overlapping passes in v3.
   ─────────────────────────────────────────────────────────────────────── */
.pf-wrap .pf-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important; font-weight: 700 !important;
  padding: 14px 30px !important; border-radius: 8px !important;
  text-decoration: none !important; white-space: nowrap; line-height: 1.2 !important;
  cursor: pointer; transition: background-color .18s, color .18s, transform .18s;
}
.pf-wrap .pf-btn:hover { transform: translateY(-1px); text-decoration: none !important; }

/* primary — white on dark */
.pf-wrap .pf-btn-primary {
  background-color: #fff !important; color: #0F365B !important; border: 2px solid #fff !important;
}
.pf-wrap .pf-btn-primary:hover { background-color: #f0f4f8 !important; color: #0F365B !important; }

/* outline — white treatment on dark backgrounds */
.pf-banner .pf-btn-outline, .pf-cta-block .pf-btn-outline {
  background-color: transparent !important; color: #fff !important;
  border: 2px solid rgba(255,255,255,0.65) !important;
}
.pf-banner .pf-btn-outline:hover, .pf-cta-block .pf-btn-outline:hover {
  background-color: rgba(255,255,255,0.14) !important; color: #fff !important;
}
/* outline — navy treatment on light backgrounds */
.pf-section > .pf-container .pf-btn-outline {
  background-color: transparent !important; color: #0F365B !important;
  border: 2px solid #0F365B !important;
}
.pf-section > .pf-container .pf-btn-outline:hover {
  background-color: #0F365B !important; color: #fff !important;
}

/* v5.1 FIX — outline buttons inside a CTA block.
   The navy rule above is (0,3,0) and was beating .pf-cta-block
   .pf-btn-outline (0,2,0), painting these navy-on-navy inside the dark
   CTA panel — invisible until hover. This .elementor-kit-6 is (0,4,0) so it wins
   on specificity rather than source order. */
.pf-wrap .pf-section .pf-cta-block .pf-btn-outline {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.65) !important;
}
.pf-wrap .pf-section .pf-cta-block .pf-btn-outline:hover {
  background-color: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* ── SECTIONS & TYPOGRAPHY ── */
.pf-section { padding: 64px 24px; }
.pf-section-alt { background: #f4f6f8; }
.pf-section-navy { background: #0F365B; }
.pf-section-navy h2, .pf-section-navy p, .pf-section-navy li { color: #fff; }
.pf-container { max-width: 1140px; margin: 0 auto; }

.pf-wrap h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700; color: #0F365B; line-height: 1.22; margin-bottom: 18px;
}
.pf-wrap h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px; font-weight: 700; color: #0F365B; margin-bottom: 10px;
}
.pf-intro { font-size: 18px; color: #444; line-height: 1.8; margin-bottom: 20px; }
.pf-body { font-size: 16px; color: #444; line-height: 1.8; margin-bottom: 16px; }
.pf-body strong, .pf-intro strong { color: #0F365B; font-weight: 600; }
.pf-section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #0F365B; opacity: 0.65; margin-bottom: 10px; display: block;
}
.pf-divider { height: 1px; background: #e2e8f0; margin: 8px 0; }

/* ── LAYOUT ── */
.pf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.pf-two-col-60 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: start; }
@media (max-width: 768px) {
  .pf-two-col, .pf-two-col-60 { grid-template-columns: 1fr; gap: 32px; }
}

/* ── IMAGE BLOCK ──
   RESOLVED: v3 had two conflicting definitions (aspect-ratio 16/9 on seven
   pages, fixed 360px height on the wood page). Standardised on aspect-ratio,
   which is responsive and does not letterbox on narrow viewports.
   ─────────────────────────────────────────────────────────────────────── */
.pf-wrap .pf-img {
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  aspect-ratio: 16 / 9;
}
.pf-wrap .pf-img img {
  display: block !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important; max-width: 100% !important;
}

/* ── CHECKLIST ── */
.pf-check { list-style: none; padding: 0; margin: 18px 0; }
.pf-check li {
  position: relative; padding-left: 32px; margin-bottom: 14px;
  font-size: 16px; color: #444; line-height: 1.6;
}
.pf-check li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; background: #0F365B; color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border-radius: 3px;
}
.pf-check li strong { color: #0F365B; font-weight: 600; }

/* ── CARDS ── */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 32px; }
.pf-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 28px; }
.pf-card {
  background: #fff; border-radius: 10px; padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(15,54,91,0.08); border-left: 3px solid #0F365B;
}
.pf-card h3 { font-size: 17px; margin-bottom: 10px; }
.pf-card p { font-size: 14px; color: #555; line-height: 1.65; }
.pf-card-navy {
  background: #0F365B; border-radius: 10px; padding: 24px 22px;
  border-left: 3px solid rgba(255,255,255,0.4);
}
.pf-card-navy h4 { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 8px; }
.pf-card-navy p { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.55; }

/* ── QUICK FACTS ── */
.pf-facts { background: #0F365B; border-radius: 10px; padding: 28px 26px; }
.pf-facts h3 {
  font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 700;
  color: rgba(255,255,255,0.9); margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 12px;
}
.pf-facts ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-facts ul li { font-size: 14px; color: rgba(255,255,255,0.8); display: flex; align-items: flex-start; gap: 10px; }
.pf-facts ul li::before { content: '✓'; color: rgba(255,255,255,0.6); font-weight: 700; flex-shrink: 0; }

/* ── PROCESS STEPS ── */
.pf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 32px; }
.pf-step { background: #fff; border-radius: 10px; padding: 30px 24px; text-align: center; box-shadow: 0 2px 12px rgba(15,54,91,0.08); }
.pf-step-num {
  width: 54px; height: 54px; background: #0F365B; color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Open Sans', sans-serif; font-size: 22px; font-weight: 700; margin: 0 auto 16px;
}
.pf-step h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.pf-step p { font-size: 14px; color: #555; line-height: 1.6; }

/* ── CALLOUTS ── */
.pf-callout {
  background: #eef3f8; border-left: 4px solid #0F365B;
  border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 24px 0;
}
.pf-callout h4 { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; color: #0F365B; margin-bottom: 8px; }
.pf-callout p { font-size: 14px; color: #444; line-height: 1.7; }
.pf-law { background: #f0f5fb; border: 1px solid #c4d7eb; border-radius: 8px; padding: 22px 26px; margin: 24px 0; }
.pf-law h4 { font-size: 15px; font-weight: 700; color: #0F365B; margin-bottom: 10px; }
.pf-law p { font-size: 14px; color: #444; line-height: 1.75; }

/* ── CODE REQUIREMENTS ── */
.pf-code-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 28px; }
.pf-code-item { background: #0F365B; border-radius: 8px; padding: 20px 18px; }
.pf-code-item h4 { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 7px; }
.pf-code-item p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.55; }

/* ── TABLE ── */
.pf-table {
  width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 14px;
  border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(15,54,91,0.08);
}
.pf-table th {
  background: #0F365B; color: #fff; padding: 13px 16px; text-align: left;
  font-weight: 700; font-family: 'Open Sans', sans-serif;
}
.pf-table td { padding: 12px 16px; border-bottom: 1px solid #e8edf2; color: #444; background: #fff; }
.pf-table tr:nth-child(even) td { background: #f8fafc; }
.pf-table td:first-child { font-weight: 600; color: #0F365B; }
@media (max-width: 640px) {
  .pf-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── REVIEWS ── */
.pf-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 32px; }
.pf-review { background: #fff; border-radius: 10px; padding: 28px 24px; box-shadow: 0 2px 12px rgba(15,54,91,0.08); }
.pf-review-stars { color: #f4b400; font-size: 18px; letter-spacing: 2px; margin-bottom: 14px; }
.pf-review blockquote { font-size: 15px; color: #444; font-style: italic; line-height: 1.75; margin-bottom: 16px; }
.pf-reviewer { font-size: 13px; font-weight: 700; color: #0F365B; }

/* ── FAQ ── */
.pf-faq { margin-top: 28px; }
.pf-faq-item { border-bottom: 1px solid #e2e8f0; padding: 22px 0; }
.pf-faq-item:first-child { border-top: 1px solid #e2e8f0; }
.pf-faq-q { font-family: 'Open Sans', sans-serif; font-weight: 700; color: #0F365B; font-size: 16px; margin-bottom: 10px; }
.pf-faq-a { font-size: 15px; color: #555; line-height: 1.75; }
.pf-faq-a strong { color: #0F365B; font-weight: 600; }
.pf-wrap .pf-faq-a a { color: #0F365B !important; text-decoration: underline !important; }

/* ── AREA CHIPS ── */
.pf-areas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pf-wrap a.pf-area-chip {
  display: inline-block !important; background-color: #fff !important;
  border: 1px solid #c8d5e2 !important; color: #0F365B !important;
  padding: 7px 16px !important; border-radius: 30px !important;
  font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important;
  transition: background-color .18s, color .18s, border-color .18s;
}
.pf-wrap a.pf-area-chip:hover {
  background-color: #0F365B !important; color: #fff !important; border-color: #0F365B !important;
}

/* ── INTERNAL LINK CARDS ── */
.pf-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 20px; }
.pf-wrap a.pf-link-card {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  background-color: #fff !important; border: 1px solid #d0dce8 !important;
  border-radius: 10px !important; padding: 14px 18px !important;
  color: #0F365B !important; font-size: 14px !important; font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color .18s, box-shadow .18s;
}
.pf-wrap a.pf-link-card:hover {
  border-color: #0F365B !important; box-shadow: 0 6px 20px rgba(15,54,91,0.15) !important;
}
.pf-wrap a.pf-link-card::after { content: '→' !important; font-weight: 400 !important; color: inherit !important; }

/* ── INDUSTRIES / USE CASES ── */
.pf-industries { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 28px; }
.pf-industry { background: #0F365B; border-radius: 8px; padding: 20px 18px; }
.pf-industry-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.pf-industry-sub { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.45; }

.pf-use-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin-top: 28px; }
.pf-use-case { background: #fff; border-radius: 10px; padding: 24px 16px; text-align: center; box-shadow: 0 2px 12px rgba(15,54,91,0.08); }
.pf-use-case-icon { font-size: 32px; margin-bottom: 12px; }
.pf-use-case h3 { font-size: 14px; font-weight: 700; color: #0F365B; margin-bottom: 6px; }
.pf-use-case p { font-size: 12px; color: #666; line-height: 1.5; }

/* ── CTA BLOCK ── */
.pf-cta-block { background: #0F365B; border-radius: 12px; padding: 56px 40px; text-align: center; }
.pf-cta-block h2 { color: #fff; font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 12px; }
.pf-cta-block p { color: rgba(255,255,255,0.72); font-size: 16px; margin-bottom: 28px; }
.pf-wrap .pf-cta-block a.pf-cta-phone {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 30px !important; font-weight: 700 !important; color: #fff !important;
  text-decoration: none !important; margin-bottom: 24px !important; line-height: 1.2 !important;
}
.pf-wrap .pf-cta-block a.pf-cta-phone:hover { color: rgba(255,255,255,0.85) !important; text-decoration: none !important; }
.pf-wrap .pf-cta-btns {
  display: flex !important; gap: 16px !important; justify-content: center !important;
  align-items: center !important; flex-wrap: wrap !important; margin-top: 4px !important;
}
@media (max-width: 480px) {
  .pf-cta-block { padding: 40px 22px; }
  .pf-wrap .pf-cta-block a.pf-cta-phone { font-size: 24px !important; }
}

/* ── MOBILE STICKY CTA ── */
.pf-sticky {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: #0E2E4B; padding: 12px 16px; box-shadow: 0 -2px 16px rgba(0,0,0,0.2);
}
.pf-sticky-inner { display: flex; gap: 10px; max-width: 600px; margin: 0 auto; width: 100%; }
.pf-wrap .pf-sticky a {
  flex: 1 !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  padding: 12px !important; border-radius: 8px !important;
  font-weight: 700 !important; font-size: 15px !important;
  text-decoration: none !important; font-family: 'DM Sans', sans-serif !important;
}
.pf-wrap .pf-sticky a.pf-sticky-call { background-color: #fff !important; color: #0F365B !important; }
.pf-wrap .pf-sticky a.pf-sticky-quote {
  background-color: transparent !important; color: #fff !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
}
@media (max-width: 768px) {
  .pf-sticky { display: block; }
  .pf-wrap { padding-bottom: 68px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL PAGES                                              ← NEW IN v5
   ───────────────────────────────────────────────────────────────────────────
   Used by /privacy-policy/ and /terms-of-use/.

   Long-form legal text needs a narrower measure and a quieter heading rhythm
   than the marketing pages. Everything below is scoped under
   .pf-wrap .pf-legal so it outranks the base rules on specificity rather than
   on source order — it keeps working even if this file is reordered later.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-wrap .pf-legal {
  max-width: 860px;
  margin: 0 auto;
  font-family: 'DM Sans', sans-serif;
}

/* headings — base .pf-wrap h2 is clamp(22px, 2.8vw, 34px), far too large for
   sixteen numbered sections in sequence. Fixed size, left aligned, rule under. */
.pf-wrap .pf-legal h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0F365B;
  line-height: 1.3;
  margin: 40px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}
.pf-wrap .pf-legal h2:first-of-type { margin-top: 0; }

.pf-wrap .pf-legal h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0F365B;
  margin: 26px 0 10px;
}

/* body copy */
.pf-wrap .pf-legal p {
  font-size: 16px;
  line-height: 1.75;
  color: #3d4550;
  margin: 0 0 16px;
}
.pf-wrap .pf-legal strong { color: #0F365B; font-weight: 700; }

/* lists — the reset above zeroes padding on everything inside .pf-wrap,
   which kills bullet indentation. Restored here. */
.pf-wrap .pf-legal ul {
  margin: 0 0 20px;
  padding-left: 22px;
  list-style: disc;
}
.pf-wrap .pf-legal ul li {
  font-size: 16px;
  line-height: 1.75;
  color: #3d4550;
  margin-bottom: 10px;
  padding-left: 4px;
  display: list-item;
}

/* links — base .pf-wrap a is navy with no underline. Legal text should show
   its links plainly, so these are blue and underlined by default. */
.pf-wrap .pf-legal a {
  color: #185FA5;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pf-wrap .pf-legal a:hover { color: #0F365B; }

/* callouts — base .pf-callout is a left-flag shape sized for short marketing
   asides. These carry a paragraph or two, so: full radius, more padding. */
.pf-wrap .pf-legal .pf-callout {
  background: #eef3f8;
  border-left: 4px solid #0F365B;
  border-radius: 8px;
  padding: 22px 26px;
}
.pf-wrap .pf-legal .pf-callout h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0F365B;
  margin: 0 0 10px;
}
.pf-wrap .pf-legal .pf-callout p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 0;
}

/* contact block — CONFLICT FIX. Two base rules break here:
     .pf-wrap a          renders navy text on the navy .pf-facts background
     .pf-facts li::before puts a ✓ in front of every street address
   Both corrected below. */
.pf-wrap .pf-legal .pf-facts {
  background: #0F365B;
  border-radius: 10px;
  padding: 26px 30px;
}
.pf-wrap .pf-legal .pf-facts h3 {
  color: #fff;
  margin: 0 0 14px;
  font-size: 19px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 12px;
}
.pf-wrap .pf-legal .pf-facts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}
.pf-wrap .pf-legal .pf-facts ul li {
  color: rgba(255,255,255,0.88);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 8px;
  padding-left: 0;
  display: block;
}
.pf-wrap .pf-legal .pf-facts ul li::before { content: none; }
.pf-wrap .pf-legal .pf-facts a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* mobile */
@media (max-width: 768px) {
  .pf-wrap .pf-legal h2 { font-size: 19px; margin-top: 32px; }
  .pf-wrap .pf-legal p,
  .pf-wrap .pf-legal ul li { font-size: 15px; }
  .pf-wrap .pf-legal .pf-callout { padding: 18px 20px; }
  .pf-wrap .pf-legal .pf-facts { padding: 22px 20px; }
}
/* ═══════════════════════════════════════════════════════════════════════
   PREMIER FENCE OF SWFL — CONTACT FORM 7 STYLING
   Append this to premier-fence-shared.css (Elementor -> Site Settings ->
   Custom CSS). It styles the CF7 form to match the pf- design system.

   The form lives in an Elementor SHORTCODE widget, not an HTML widget —
   the HTML widget does not process shortcodes, so [contact-form-7] would
   render as literal text.

   For the styling below to apply, wrap the Shortcode widget's SECTION in
   the pf-form class:
     Select the section -> Advanced -> CSS Classes -> pf-form
   ═══════════════════════════════════════════════════════════════════════ */

.pf-form {
  padding: 0 24px 64px;
  background: #f4f6f8;
}
.pf-form .elementor-widget-container,
.pf-form .wpcf7 {
  max-width: 1140px;
  margin: 0 auto;
  font-family: 'DM Sans', sans-serif;
}

/* ── field labels ── */
.pf-form .wpcf7 label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0F365B;
  margin-bottom: 6px;
}

/* ── inputs ── */
.pf-form .wpcf7 input[type="text"],
.pf-form .wpcf7 input[type="email"],
.pf-form .wpcf7 input[type="tel"],
.pf-form .wpcf7 input[type="url"],
.pf-form .wpcf7 input[type="number"],
.pf-form .wpcf7 input[type="date"],
.pf-form .wpcf7 select,
.pf-form .wpcf7 textarea {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #2d2d2d;
  background: #fff;
  border: 1px solid #d0dce8;
  border-radius: 8px;
  padding: 13px 16px;
  margin-bottom: 18px;
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
}
.pf-form .wpcf7 textarea { min-height: 150px; resize: vertical; }

.pf-form .wpcf7 input:focus,
.pf-form .wpcf7 select:focus,
.pf-form .wpcf7 textarea:focus {
  outline: none;
  border-color: #0F365B;
  box-shadow: 0 0 0 3px rgba(15,54,91,0.12);
}
.pf-form .wpcf7 ::placeholder { color: #8a97a5; }

/* select needs its own arrow once appearance is stripped */
.pf-form .wpcf7 select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%230F365B'%20stroke-width%3D'2'%3E%3Cpath%20d%3D'M6%209l6%206%206-6'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}

/* ── submit ── */
.pf-form .wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #0F365B;
  border: 2px solid #0F365B;
  border-radius: 8px;
  padding: 14px 34px;
  cursor: pointer;
  transition: background-color .18s, transform .18s;
  width: auto;
  margin-bottom: 0;
}
.pf-form .wpcf7 input[type="submit"]:hover {
  background: #185FA5;
  border-color: #185FA5;
  transform: translateY(-1px);
}

/* ── two-column field rows ──
   Wrap paired fields in CF7 like this to get side-by-side inputs:
     <div class="pf-field-row">
       [text* your-name placeholder "Name"]
       [tel* your-phone placeholder "Phone"]
     </div>
   ── */
.pf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
@media (max-width: 640px) {
  .pf-field-row { grid-template-columns: 1fr; }
}

/* ── validation & response messages ── */
.pf-form .wpcf7 .wpcf7-not-valid-tip {
  font-size: 13px;
  color: #A32D2D;
  margin: -12px 0 14px;
}
.pf-form .wpcf7 .wpcf7-not-valid { border-color: #A32D2D; }

.pf-form .wpcf7 form .wpcf7-response-output {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  border-radius: 8px;
  border-width: 1px;
  padding: 14px 18px;
  margin: 20px 0 0;
}
.pf-form .wpcf7 form.sent .wpcf7-response-output {
  background: #E4F1E9; border-color: #2F6F4E; color: #1d4a34;
}
.pf-form .wpcf7 form.invalid .wpcf7-response-output,
.pf-form .wpcf7 form.unaccepted .wpcf7-response-output,
.pf-form .wpcf7 form.failed .wpcf7-response-output {
  background: #FCEBEB; border-color: #A32D2D; color: #7d2222;
}

/* ── checkbox / radio ── */
.pf-form .wpcf7 .wpcf7-list-item { margin: 0 18px 10px 0; }
.pf-form .wpcf7 .wpcf7-list-item-label { font-weight: 400; font-size: 15px; color: #444; }

/* ── spinner ── */
.pf-form .wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }/* End custom CSS */