/* PROFESSIONAL FENCE — service areas */
.section--professional-fence{
  background:#fff;
  padding-top:24px;
  padding-bottom:28px;
}

/* Header */
.pf-head{ text-align:center; margin-bottom:12px; }
.pf-title{
  margin:0 0 6px;
  color:var(--green-700);
  font-weight:900;
  font-size:clamp(20px, 2vw + 12px, 30px);
  letter-spacing:.2px;
}
.pf-sub{
  margin:0 auto; max-width:900px;
  color:#5b6b78; font-size:14.5px; line-height:1.7;
}

/* Search */
.pf-search{
  margin:10px auto 0;
  max-width:520px;
  position:relative;
}
.pf-search .ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:#6b7d8f;
}
.pf-search input{
  width:100%; padding:10px 14px 10px 38px;
  border-radius:10px; border:1px solid #dfe6ea;
  background:#f7faf8; outline:none; font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pf-search input:focus{
  background:#fff; border-color:#b8d3c5;
  box-shadow:0 0 0 3px rgba(21,128,61,.12);
}

/* --- DROPDOWN SUGGESTIONS --- */
.pf-suggestions{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:6px;
  background:#ffffff;
  border-radius:10px;
  border:1px solid #dfe6ea;
  box-shadow:0 16px 30px rgba(15,23,42,.12);
  max-height:260px;
  overflow-y:auto;
  padding:4px 0;
  display:none;               /* JS toggles this */
  z-index:30;
}

.pf-suggestion{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:7px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
  cursor:pointer;
  font-size:13px;
  color:#0f172a;
  transition:background-color .12s ease, transform .12s ease;
  animation:pf-suggest-item .16s ease-out;
}

.pf-suggestion:hover{
  background:#eef4f7;
  transform:translateY(-1px);
}

.pf-suggestion__city{
  font-weight:700;
}

.pf-suggestion__area{
  font-size:12px;
  color:#6b7d8f;
}

/* Small pop-in animation per item */
@keyframes pf-suggest-item{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Highlight card when jumped from suggestion */
.pf-card--highlight{
  outline:2px solid #f97316;
  outline-offset:3px;
}

/* Cards grid */
.pf-grid{
  margin-top:12px;
  display:grid; gap:12px;
  grid-template-columns:repeat(12, minmax(0,1fr));
}
.pf-card{
  grid-column:span 3;
  padding:14px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(15,23,42,.05);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
@media (max-width:980px){ .pf-card{ grid-column:span 6; } }
@media (max-width:600px){ .pf-card{ grid-column:span 12; } }

/* Prevent random "0" */
.pf-card__head .dot::before{ content:""; }

/* Card sweep shine (hover only) */
.pf-card::after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  transform:translateX(-120%);
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.40) 50%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; opacity:.28;
}
.pf-card:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 18px 42px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.07);
  border-color:#e6eef1;
  background:#fbfdfc;
}
.pf-card:hover::after{ animation:pf-sweep 1.55s ease; }
@keyframes pf-sweep{ to{ transform:translateX(120%);} }

.pf-card__head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.pf-card__head .dot{
  width:18px; height:18px; border-radius:999px;
  background:#e7f5ee; border:1px solid #d7eee4; box-shadow:inset 0 0 0 3px #cfe9dc; flex:0 0 auto;
}
.pf-card__head h3{ margin:0; font-size:14px; font-weight:900; color:#0f172a; }

.pf-line{ margin:0 0 8px; color:#64748b; font-size:12.8px; }
.pf-cities{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 6px; padding:0; list-style:none; }
.pf-cities li{
  padding:4px 8px; border-radius:999px; background:#e9f2ec; color:#0f3d20;
  border:1px solid #dfece4; font-weight:800; font-size:12px;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.pf-cities li:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 12px rgba(15,23,42,.08);
  background:#f3fbf6; border-color:#cfe9dc;
}
.pf-more{ color:#6b7d8f; font-size:12.5px; }

/* CTA panel — solid green (no continuous shine, no white wash) */
.pf-cta{
  margin-top:14px; padding:16px; border-radius:12px;
  background:#0c3f20; color:#e7f5ee; border:1px solid rgba(255,255,255,.14);
  position:relative; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.12);
}
/* Harden: ignore any global .card overlays */
.pf-cta::before{ content:none !important; }
/* Shine only on hover */
.pf-cta::after{
  content:""; position:absolute; inset:-6px; pointer-events:none;
  width:34%; height:calc(100% + 12px);
  background:linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.78) 50%, rgba(255,255,255,0) 82%);
  transform:translateX(-42%); opacity:0; mix-blend-mode:screen;
}
.pf-cta:hover::after{ opacity:.34; animation:pf-cta-wave 1.6s ease; }
@keyframes pf-cta-wave{ to{ transform:translateX(142%);} }
/* Never change color on hover/focus */
.pf-cta:hover,
.pf-cta:focus-within,
.pf-cta:active{ background:#0c3f20; filter:none; }
.pf-cta *{ mix-blend-mode:normal; }

.pf-cta__title{
  display:flex; align-items:center; gap:8px; font-weight:900;
  letter-spacing:.2px; margin-bottom:6px; font-size:16px;
}
.pf-cta__title svg{ width:18px; height:18px; }
.pf-cta__sub{ margin:0 0 10px; color:#cfe9dc; font-size:14px; }
.pf-cta__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Buttons (scoped) */
.section--professional-fence .btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:10px;
  padding:12px 16px; font-weight:800; text-decoration:none !important;
  transition:transform .08s ease, box-shadow .18s ease, filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.section--professional-fence .btn svg{ width:16px; height:16px; }

/* Outline button */
.section--professional-fence .btn--outline{
  background:#e7f4ed; color:#0c3f20; border-color:transparent;
  box-shadow:0 8px 18px rgba(15,23,42,.08) inset;
}
.section--professional-fence .btn--outline:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(34,197,94,.18), 0 14px 28px rgba(22,163,74,.22), inset 0 -2px 0 rgba(0,0,0,.05);
}

/* Orange call — locked gradient */
.section--professional-fence .btn--call{
  background:linear-gradient(180deg,#f97316 0%,#ea580c 100%);
  border-color:#c2410c; color:#fff;
  box-shadow:0 10px 18px rgba(234,88,12,.28), inset 0 -2px 0 rgba(0,0,0,.10);
}
.section--professional-fence .btn--call:hover,
.section--professional-fence .btn--call:focus,
.section--professional-fence .btn--call:active{
  background:linear-gradient(180deg,#f97316 0%,#ea580c 100%) !important;
  color:#fff !important; border-color:#c2410c !important; filter:none !important;
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(249,115,22,.18), 0 14px 28px rgba(234,88,12,.36), inset 0 -2px 0 rgba(0,0,0,.10);
}

/* Button shine on hover */
.section--professional-fence .btn::before{
  content:""; pointer-events:none; position:absolute; inset:-2px;
  transform:translateX(-120%);
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; opacity:.60;
}
.section--professional-fence .btn:hover::before{ animation:pf-btn-shine 1.45s ease; }
@keyframes pf-btn-shine{ to{ transform:translateX(120%);} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pf-card:hover{ transform:none; }
  .pf-card:hover::after,
  .section--professional-fence .btn:hover::before,
  .pf-cta:hover::after{ animation:none; }
}
/* Search */
.pf-search{
  margin:10px auto 0;
  max-width:520px;
  position:relative;
}
.pf-search .ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:#6b7d8f;
}
.pf-search input{
  width:100%; padding:10px 14px 10px 38px;
  border-radius:10px; border:1px solid #dfe6ea;
  background:#f7faf8; outline:none; font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pf-search input:focus{
  background:#fff; border-color:#b8d3c5;
  box-shadow:0 0 0 3px rgba(21,128,61,.12);
}

/* DROPDOWN SUGGESTIONS */
.pf-suggestions{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:6px;
  background:#ffffff;
  border-radius:10px;
  border:1px solid #dfe6ea;
  box-shadow:0 16px 32px rgba(15,23,42,.14);
  max-height:260px;
  overflow-y:auto;
  padding:4px 0;
  display:none;              /* JS will toggle to block */
  z-index:40;
}

/* individual suggestion row */
.pf-suggestion{
  width:100%;
  box-sizing:border-box;
  border:0;
  background:transparent;
  text-align:left;
  padding:7px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
  cursor:pointer;
  font-size:13px;
  color:#0f172a;
  border-radius:4px;
  transition:background-color .12s ease, transform .12s ease;
  animation:pf-suggest-item .14s ease-out;
}

/* override any global button styles */
.pf-suggestion:focus{
  outline:none;
}

/* hover state */
.pf-suggestion:hover{
  background:#eef4f7;
  transform:translateY(-1px);
}

.pf-suggestion__city{
  font-weight:700;
}

.pf-suggestion__area{
  font-size:12px;
  color:#6b7d8f;
}

/* subtle pop-in animation */
@keyframes pf-suggest-item{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* highlight card when jumped via suggestion */
.pf-card--highlight{
  outline:2px solid #f97316;
  outline-offset:3px;
}