/* FENCING 2 SECTION */

.section--fencing-2{ background:#f8faf9; }

/* 10% smaller content, width-compensated so it still occupies more horizontally */
.fencing2 .fz-content{
  transform: scale(.9);
  transform-origin: top center;
  /* 1 / .9 = 1.111111… */
  width: 111.111%;
  margin-left: -5.555%;
}
@media (max-width:640px){
  /* Keep the same 10% shrink on mobile but drop width compensation for stability */
  .fencing2 .fz-content{ width:100%; margin-left:0; transform:scale(.9); }
}

/* Head */
.fencing2 .fz-head{ text-align:center; margin-bottom:14px; padding-inline:10px; }
.fencing2 .fz-title{
  margin:0 0 8px; color:var(--green-700); font-weight:900;
  font-size: clamp(22px, 2vw + 12px, 28px);
}
.fencing2 .fz-sub{
  margin:0 auto; max-width:760px; color:#5b6b78;
  font-size: clamp(14px, .4vw + 12px, 16px);
}

/* Issues grid — add side padding so edge cards don’t hug the sides */
.fz-issues{
  margin-top:14px;
  display:grid; gap:14px; padding-inline:10px;
  grid-template-columns: repeat(12, minmax(0,1fr));
}
.issue{
  grid-column: span 3;
  padding:16px;
  text-align:center;
  border-radius:12px;
  background:#f9fbf9;               /* slight green base */
  border:1px solid #edf2f0;
}
@media (max-width: 980px){ .issue{ grid-column: span 6; } }
@media (max-width: 600px){ .issue{ grid-column: span 12; } }

.issue .ico{
  width:56px; height:56px; margin:0 auto 8px;
  border-radius:999px; display:grid; place-items:center;
  color:var(--green-700); background:var(--green-50);
  border:1px solid #e6efe9;
}
.issue .ico svg{ width:24px; height:24px; }
.issue h3{ margin:0 0 6px; font-size:15px; color:#0f172a; font-weight:900; }
.issue p { margin:0; color:#64748b; font-size:13px; }

/* Process block — green outer container, inner step cards remain white */
.fz-process{
  margin-top:16px; padding:18px; border-radius:12px;
  background: linear-gradient(180deg,#eaf7f0 0,#e4f2ea 100%); /* green container */
  border:1px solid #cfe9dc;
  box-shadow: inset 0 1px 0 #f6fbf8;
  padding-inline:14px;  /* extra side breathing room */
}
.proc-title{
  margin:0 0 4px; text-align:center; color:#0f172a; font-weight:900; font-size:18px;
}
.proc-sub{
  margin:0 auto 10px; text-align:center; color:#64748b; max-width:840px; font-size:14px;
}
.proc-grid{
  display:grid; gap:12px; margin-top:10px;
  grid-template-columns: repeat(12, minmax(0,1fr));
  padding-inline:6px;                 /* side space so first/last cards don’t stick to edges */
}
.step{
  grid-column: span 3; background:#fff !important;  /* keep inside white */
  border:1px solid #edf2f0; border-radius:10px; padding:14px; position:relative;
}
@media (max-width: 980px){ .step{ grid-column: span 6; } }
@media (max-width: 600px){ .step{ grid-column: span 12; } }

.step .num{
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--green-600); color:#eafff0; font-weight:900; font-size:14px;
  margin-bottom:8px;
}
.step h4{ margin:0 0 6px; color:#0f172a; font-weight:800; font-size:15px; }
.step p { margin:0 0 10px; color:#64748b; font-size:13px; }
.step .time{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#eef6f0; color:#0f3d20; font-weight:700; font-size:12px;
  border:1px solid #dfece4;
}

/* CTA */
.fz-cta{
  margin-top:14px; padding:18px; text-align:center; background:#fff; border-radius:12px;
  border:1px solid #edf2f0; padding-inline:14px;
}
.fz-cta h3{ margin:0 0 6px; color:#0f172a; font-weight:900; font-size:18px; }
.fz-cta p { margin:0 auto 12px; color:#64748b; max-width:760px; font-size:14px; }
.cta-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.cta-actions a{ text-decoration:none !important; }

/* ===== Global CARD polish: subtle shadow + continuous shine + hover green ===== */
.fencing2 .card{
  position:relative; overflow:hidden; background-clip:padding-box;
  box-shadow: 0 6px 14px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.05);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.fencing2 .card::after{
  content:""; position:absolute; inset:-2px; pointer-events:none; mix-blend-mode:screen;
  background: linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 80%);
  transform: translateX(-160%); animation: fz-card-shine 3.6s ease-in-out infinite; opacity:.28;
}
@keyframes fz-card-shine{ to { transform: translateX(160%); } }

.fencing2 .card:hover{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 18px 42px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.07);
  background:#f6fbf8; border-color:#cfe9dc;
}

/* ===== CTA Buttons (green + orange), no underline, glow + hover shine, NO color flip ===== */
.fz-cta .btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  font-weight:800; font-size:14px; border:1px solid transparent; color:#fff;
  transition: transform .08s ease, box-shadow .18s ease;
}

/* Green primary */
.fz-cta .btn--primary{
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border-color:#166534;
  box-shadow: 0 10px 18px rgba(22,163,74,.22), inset 0 -2px 0 rgba(0,0,0,.10);
}
.fz-cta .btn--primary:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);  /* keep same green */
  box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 14px 28px rgba(22,163,74,.32), inset 0 -2px 0 rgba(0,0,0,.10);
}

/* Orange (Call Now) — keep orange on hover (no white) */
.fz-cta .btn--outline{
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  border-color:#c2410c;
  box-shadow: 0 10px 18px rgba(234,88,12,.28), inset 0 -2px 0 rgba(0,0,0,.10);
}
.fz-cta .btn--outline:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);  /* stay orange */
  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);
}

/* Hover-only shine sweep for both buttons */
.fz-cta .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,.75) 50%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; opacity:.95;
}
.fz-cta .btn:hover::before{ animation: fz-btn-shine 1.1s ease; }
@keyframes fz-btn-shine{ to { transform: translateX(120%); } }