/* ===== HERO (reference style) ===== */
/* Full-bleed background stays on .plaster-hero */
.plaster-hero{
  --bg:#111;
  background:
    radial-gradient(1000px 640px at 110% 10%, rgba(241,196,15,.16), transparent 60%),
    var(--bg);
  color:#fff;
  padding: clamp(56px, 8vw, 86px) 0 clamp(36px, 6vw, 60px); /* top/btm only */
  padding-top: clamp(110px, 12vw, 160px);
}

/* NEW: center the actual content */
.ph-inner{
  max-width: 1200px;                 /* keeps it off the edges */
  margin-inline: auto;               /* CENTER */
  padding-inline: clamp(16px, 4vw, 32px); /* safe side padding */

  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap: clamp(24px, 4vw, 56px);
}

/* If you had this earlier, remove the nudge so it aligns perfectly */
.ph-copy{ padding-left: 0; }

@media (max-width: 991.98px){
  .ph-inner{ grid-template-columns: 1fr; }
}

.ph-copy{ padding-left: clamp(12px, 3vw, 18px); }
.ph-eyebrow{ font-weight:800; letter-spacing:.4px; opacity:.9; margin:0 0 .5rem; }

.ph-title{
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800; line-height:1.05;
  font-size: clamp(2.2rem, 1.2rem + 4vw, 4.2rem);
  margin:0 0 1.25rem;
  color: #fff;
}

/* neon highlight like the reference */
.ph-title .hl{
  --hl:#c6f017;
  background: var(--hl);
  color:#fff;
  border-radius: 14px;
  padding: .05em .2em;
  box-decoration-break: clone;
}

/* CTA: big pill + separate round bubble */
.cta-main{
  display:inline-flex; align-items:center; gap:12px;
  background:#fff; color:#111; text-decoration:none;
  padding: 14px 22px; border-radius: 9999px; font-weight:800;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .15s ease, background .2s ease;
}
.cta-main:hover{ transform: translateY(-1px); background:#f6f6f6; }

.cta-bubble{
  display:inline-grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background: #F1C40F; color:#fff;
  transition: transform .2s ease;
}
.cta-main:hover .cta-bubble{ transform: translateX(2px) translateY(-2px); }

.cta-note{ display:block; margin-top:.6rem; opacity:.85; font-weight:600; }

.ph-visual{ position:relative; }
.ph-visual img{
  width:100%; max-height:560px; height:100%; object-fit:cover;
  border-radius: 26px;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
}

/* floating badge like the screenshot */
.ph-badge{
  position:absolute; left: 8%; bottom: 12%;
  background:#F1C40F;
  color:#111; border-radius: 999px;
  padding: 10px 16px;
  display:flex; flex-direction:column;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.ph-badge strong{ line-height:1; }
.ph-badge small{ opacity:.9; }

/* Stack on mobile */
@media (max-width: 991.98px){
  .plaster-hero{ grid-template-columns: 1fr; padding-top: clamp(96px, 14vw, 120px); }
  .ph-visual img{ max-height:420px; }
  .ph-badge{ left: 12px; bottom: 12px; }
}

/* ===== Tabs section ===== */
.plaster-tabs{ padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(28px, 5vw, 56px); }


.tabbar{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;
}
.tabbar .tab{
  background:#fff; border:1px solid #eee; border-radius:999px;
  padding:10px 16px; font-weight:800; cursor:pointer;
}
.tabbar .tab.current{ color:#111; border-color:#111; }

/* Center the 3 tabs inside the tabs section */
.plaster-tabs .tabbar{
  justify-content: center;      /* center the buttons */
  margin-inline: auto;          /* keep the row centered within the container */
  gap: clamp(8px, 1.2vw, 14px); /* nice responsive spacing */
  padding-block: .25rem .75rem; /* a little breathing room */
}

/* optional: keep the panel a touch away from the tabbar */
.plaster-tabs .panel{
  margin-top: .35rem;
}

.panel{
  display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 3.5vw, 36px);
  padding: clamp(18px, 2.5vw, 24px); border:1px solid #eee; border-radius:20px;
  background:#fff; box-shadow: var(--shadow-soft);
}
.panel + .panel{ margin-top:14px; }
.panel-media img{
  width:100%; height:100%; object-fit:cover; border-radius:16px;
}
.panel-copy h2{
  font-family:'Roboto Condensed',sans-serif; font-weight:800;
  margin:0 0 .5rem; color:var(--primary-dark);
}
.panel-copy p{ margin-bottom:.7rem; }
.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.ticks li::before{ content:"✔"; color:var(--accent); margin-right:.5rem; }

/* ===== Feature cards ===== */
.feat-wrap{ padding: clamp(30px, 5vw, 66px) 0; }
.feat-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2.2vw, 22px);
}
.feat{
  background:#fff; border:1px solid #eee; border-radius:18px;
  padding: clamp(16px, 2.2vw, 22px); box-shadow: var(--shadow-soft);
}
.feat-ico{ font-size:26px; line-height:1; }
.feat h3{
  font-family:'Roboto Condensed',sans-serif; font-weight:800; margin:.35rem 0 .4rem;
}

.plaster-tabs.container-xxl{
  max-width: 1200px;                          /* same as .ph-inner */
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);     /* same side padding as .ph-inner */
}
/* Side padding for the “Wall Restoration / Ceiling & Cornice / Guaranteed Results” cards */
.feat-wrap.container-xxl{
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

/* (Optional) keep the inner content nicely centered on large screens */
.plaster-tabs .panel,
.feat-wrap .feat-grid{
  max-width: 1100px;
  margin-inline: auto;
}


/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .plaster-hero{ grid-template-columns: 1fr; }
  .panel{ grid-template-columns: 1fr; }
  .feat-grid{ grid-template-columns: 1fr; }
}


/* Badges under headings */
.stat-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 1rem;}
.badge-soft{
  background:#f4f4f4; color:var(--dark); border:1px solid #eee;
  border-radius:999px; padding:.35rem .7rem; font-weight:700; font-size:.82rem;
}

/* Small FAQs without JS */
.mini-faq{margin:.35rem 0; border:1px solid #eee; border-radius:10px; background:#fafafa;}
.mini-faq > summary{
  cursor:pointer; padding:.6rem .8rem; font-weight:800; color:var(--dark);
  list-style:none; outline:none;
}
.mini-faq[open] > summary{border-bottom:1px solid #eee;}
.mini-faq > div{padding:.7rem .8rem; color:var(--dark);}