/* =====================================================================
   Perth Power Equipment — Site Footer CSS  v1.0.1
   Scoped to .ppe-footer — no clash with WP / Elementor / WC.
   ===================================================================== */

.ppe-footer,.ppe-footer *{box-sizing:border-box}
.ppe-footer{
  --ppe-red:#e10b17;--ppe-red-dark:#b8070f;
  --ppe-ink:#0d0d0f;--ppe-ink-2:#17181b;--ppe-ink-3:#1f2126;
  --ppe-line:#2a2c33;--ppe-text:#f5f5f6;--ppe-muted:#a9acb5;
  background:var(--ppe-ink);color:var(--ppe-muted);
  font:400 15px/1.6 "Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  border-top:4px solid var(--ppe-red);
}
.ppe-footer a{color:inherit;text-decoration:none}
.ppe-footer a:hover{color:#fff}
.ppe-footer a:focus-visible,.ppe-footer button:focus-visible,.ppe-footer input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ppe-fwrap{max-width:1240px;margin:0 auto;padding:0 20px}
.ppe-fsec{padding:48px 0;border-bottom:1px solid var(--ppe-line)}
.ppe-fh{display:block;color:#fff;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.ppe-fdisplay{font-family:"Barlow Condensed",Impact,sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;color:#fff;line-height:1;margin:0}
.ppe-fbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:6px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s;cursor:pointer;text-decoration:none}
.ppe-fbtn svg{width:18px;height:18px;flex:none}
.ppe-fbtn-red{background:var(--ppe-red);color:#fff!important}
.ppe-fbtn-red:hover{background:var(--ppe-red-dark)}
.ppe-fbtn-ghost{border-color:#4a4d57;color:#fff!important}
.ppe-fbtn-ghost:hover{border-color:#fff}

/* ── 1. Top row (About + Visit Us) ── */
.ppe-ftop{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}

/* About column */
.ppe-flogo{display:inline-flex;flex-direction:column;line-height:1;margin-bottom:18px}
.ppe-flogo b{font-family:"Barlow Condensed",Impact,sans-serif;font-style:italic;font-weight:800;font-size:34px;color:#fff;white-space:nowrap}
.ppe-flogo b span{color:var(--ppe-red)}
.ppe-flogo small{font-size:11px;letter-spacing:.42em;margin-top:4px}
.ppe-about p{margin:0 0 12px}
.ppe-about .ppe-more{color:#fff;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--ppe-red);padding-bottom:2px}
.ppe-social{display:flex;gap:10px;margin-top:20px}
.ppe-social a{width:40px;height:40px;border-radius:6px;border:1px solid var(--ppe-line);display:flex;align-items:center;justify-content:center;color:#fff}
.ppe-social a:hover{border-color:var(--ppe-red);background:var(--ppe-red)}
.ppe-social svg{width:18px;height:18px}

/* Visit column */
.ppe-visit address{font-style:normal}
.ppe-visit ul{list-style:none;margin:0 0 20px;padding:0}
.ppe-visit li{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px}
.ppe-visit li svg{width:20px;height:20px;flex:none;color:var(--ppe-red);margin-top:2px}
.ppe-visit li b{color:#fff;font-weight:600}
.ppe-visit .ppe-btns{display:flex;flex-wrap:wrap;gap:10px}

/* ── 2. Link columns ── */
.ppe-fcols{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.ppe-fcols ul{list-style:none;margin:0;padding:0}
.ppe-fcols li{margin-bottom:9px}
.ppe-fcols li a{display:inline-block;transition:transform .15s,color .15s}
.ppe-fcols li a:hover{transform:translateX(3px)}
.ppe-fcols .ppe-all a{color:#fff;font-weight:600}
.ppe-fcols .ppe-all a::after{content:" \2192";color:var(--ppe-red)}
.ppe-fcols .ppe-fh button{all:unset;cursor:pointer}

/* ── 3. Family of businesses ── */
.ppe-fam-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.ppe-fam-head .ppe-fdisplay{font-size:32px}
.ppe-fam-head p{margin:6px 0 0;max-width:560px}
.ppe-fam{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0;padding:0}
.ppe-fam a{display:flex;flex-direction:column;height:100%;padding:18px;border-radius:8px;background:var(--ppe-ink-2);border:1px solid var(--ppe-line);transition:border-color .15s,background .15s}
.ppe-fam a:hover{border-color:var(--ppe-red);background:var(--ppe-ink-3)}
.ppe-fam b{color:#fff;font-size:17px;display:block;margin-bottom:4px}
.ppe-fam span{font-size:14px;margin-bottom:12px;flex:1;display:block}
.ppe-fam em{font-style:normal;color:var(--ppe-red);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}

/* ── 4. Campaigns ── */
.ppe-camp{background:var(--ppe-ink-2)}
.ppe-camp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ppe-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;border-radius:8px;overflow:hidden;padding:60px 22px 22px;background:var(--ppe-ink) center/cover no-repeat;color:#fff!important;isolation:isolate;text-decoration:none}
.ppe-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,12,.15) 0%,rgba(10,10,12,.92) 75%);transition:background .2s}
.ppe-card:hover::before{background:linear-gradient(180deg,rgba(225,11,23,.25) 0%,rgba(10,10,12,.94) 75%)}
.ppe-card .ppe-tag{position:absolute;top:16px;left:16px;background:var(--ppe-red);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:3px}
.ppe-card .ppe-fdisplay{font-size:30px}
.ppe-card p{margin:6px 0 12px;color:#d8d9de;font-size:15px}
.ppe-card em{font-style:normal;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.ppe-card em::after{content:" \2192";color:var(--ppe-red)}

/* ── 5. Bottom bar ── */
.ppe-fbottom{background:#08080a;font-size:13px}
.ppe-fbottom .ppe-fwrap{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.ppe-fbottom ul{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0}
.ppe-fbottom .ppe-tm{width:100%;color:#6f727c;font-size:12px;margin:0}

/* ── Responsive ── */
@media (max-width:1080px){
  .ppe-ftop{grid-template-columns:1fr 1fr}
  .ppe-fcols{grid-template-columns:repeat(3,1fr)}
  .ppe-fam{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .ppe-fsec{padding:36px 0}
  .ppe-ftop{grid-template-columns:1fr;gap:32px}
  .ppe-fam{grid-template-columns:1fr 1fr}
  .ppe-camp-grid{grid-template-columns:1fr}
  /* Link columns → accordions on mobile */
  .ppe-fcols{grid-template-columns:1fr;gap:0}
  .ppe-fcols > div{border-bottom:1px solid var(--ppe-line)}
  .ppe-fcols .ppe-fh{margin:0}
  .ppe-fcols .ppe-fh button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 0}
  .ppe-fcols .ppe-fh button::after{content:"+";font-size:22px;color:var(--ppe-red);font-weight:400}
  .ppe-fcols [data-open="true"] .ppe-fh button::after{content:"\2212"}
  .ppe-fcols ul{display:none;padding-bottom:12px}
  .ppe-fcols [data-open="true"] ul{display:block}
}
@media (max-width:460px){
  .ppe-fam{grid-template-columns:1fr}
  .ppe-visit .ppe-btns .ppe-fbtn{flex:1}
}
@media (prefers-reduced-motion:reduce){.ppe-footer *{transition:none!important}}

/* ── iPhone notch / Dynamic Island ── */
@supports (padding-bottom:env(safe-area-inset-bottom)){
  .ppe-fbottom{padding-bottom:env(safe-area-inset-bottom,0px)}
}