/* =========================
   Precision Projects — Single Project (Clean)
   ========================= */
:root{
  --bg:#0b0f14; --card:#111827; --muted:#9aa4b2; --text:#f7f9fc;
  --brand:#37d6b5; --brand2:#4e8cff; --ring:0 0 0 2px rgba(255,255,255,.08);
  --header-h:64px; --adminbar-h:0px;
}
@media (max-width:860px){ :root{ --header-h:56px; } }
.admin-bar{ --adminbar-h: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width:782px){ .admin-bar{ --adminbar-h:46px; } }

/* Hide any theme-default entry title to avoid "double title" */
.single-sp_project .entry-title,
.single-sp_project h1.entry-title{ display:none !important; }

/* Glass */
.ps-glass{
  position:relative; z-index:1;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.ps-section-card{ padding:18px; }

/* HERO */
.ppm-single-hero{ position:sticky; top:var(--header-h-total,64px); z-index:1; color:var(--text); background:#070b11; }
.ppm-hero-bleed{ position:relative; width:100%; }
.ppm-single-hero .hero-media{ width:100%; height:clamp(360px, 60vh, 580px); object-fit:cover; display:block; }
.ppm-single-hero .hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  --hero-tint: transparent;
  background:
    linear-gradient(90deg, rgba(5,10,18,.92) 0%, rgba(5,10,18,.75) 38%, rgba(5,10,18,.35) 60%, rgba(5,10,18,0) 100%),
    radial-gradient(1200px 600px at 15% -10%, rgba(78,140,255,.12), transparent 60%),
    radial-gradient(1200px 600px at 85% 110%, rgba(55,214,181,.12), transparent 60%),
    linear-gradient(0deg, var(--hero-tint), var(--hero-tint));
}
@media (max-width:900px){
  .ppm-single-hero .hero-scrim{
    background:
      linear-gradient(180deg, rgba(5,10,18,.92) 0%, rgba(5,10,18,.75) 45%, rgba(5,10,18,.25) 100%),
      radial-gradient(900px 500px at 10% -10%, rgba(78,140,255,.12), transparent 60%),
      linear-gradient(0deg, var(--hero-tint), var(--hero-tint));
  }
}
.ppm-hero-title-container{ position:absolute; inset:auto 0 0 0; z-index:3; pointer-events:none; }
.ppm-head{ margin:0 auto 24px; padding:16px 18px; border-radius:14px; pointer-events:auto; max-width:min(900px,92%); }
.ppm-head .ppm-title{ margin:0 0 6px; font-size:clamp(28px,4.5vw,40px); font-weight:900; text-transform:uppercase; letter-spacing:.2px; }
.ppm-head .ppm-sub{ margin:0; color:#e9eef6; opacity:.92; }

/* Main overlay */
.ppm-main-overlay{
  position:relative; z-index:2; background:var(--bg);
  border-radius:24px 24px 0 0; margin-top:-72px; box-shadow:0 -20px 50px rgba(0,0,0,.25);
  padding-top:1px;
}

/* Layout */
.container.ppm-main-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start;
  padding-top:32px; padding-bottom:32px;
}
@media (max-width:980px){ .container.ppm-main-grid{ grid-template-columns:1fr; } }
@media (max-width:600px){ .container.ppm-main-grid{ padding-left:16px; padding-right:16px; } }

.ppm-sticky{ position:sticky; top:calc(var(--header-h-total,64px) + 12px); }

/* Sidebar facts */
.ppm-facts{ padding:18px; }
.ppm-side-title{ margin:0 0 12px; font-size:18px; font-weight:800; letter-spacing:.2px; }
.ppm-facts-list{ list-style:none; margin:0 0 20px 0; padding:0; display:grid; gap:12px; }
.ppm-facts-list li{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.07); }
.ppm-facts-list li:last-child{ border-bottom:0; }
.fact-label{ font-weight:700; color:var(--text); flex-shrink:0; }
.fact-value{ color:var(--muted); text-align:right; font-size:15px; }
.ppm-facts-list li.services-list{ flex-direction:column; align-items:flex-start; gap:10px; }

.btn-block{ display:flex; width:100%; justify-content:center; }

/* Sections */
.section{ margin:40px 0; }
.section:first-child{ margin-top:0; }
.section-title{ text-align:center; margin:0 0 22px; font-size:clamp(22px,3.2vw,28px); font-weight:800; letter-spacing:.2px; }

/* Chips */
.ppm-services-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ppm-services-chips .chip{ background:#0f1723cc; border:1px solid #1a2333; color:#cfe3ff; padding:8px 12px; border-radius:999px; font-size:13px; }

/* Related cards */
.ppm-grid{ display:grid; gap:18px; }
.ppm-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1000px){ .ppm-cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ppm-cols-3{ grid-template-columns:1fr; } }

.ppm-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden; color:var(--text);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ppm-card:hover{ transform:translateY(-4px); border-color:rgba(78,140,255,.35); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.ppm-cover{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#0e1520; }
.ppm-cover img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .6s ease; }
.ppm-card:hover .ppm-cover img{ transform:scale(1.06); }
.ppm-cover-glass{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.28) 100%); }
.ppm-card-body{ padding:16px 16px 18px; }
.ppm-title{ margin:0 0 6px; font-size:20px; font-weight:800; letter-spacing:.2px; }
.ppm-title a{ color:inherit; text-decoration:none; }
.ppm-sub{ margin:.2em 0 .6em; color:var(--muted); }

/* Gallery (Swiper rail) */
.ppm-gallery-slider{ padding-bottom:24px; }
.ppm-gallery-slider .swiper-slide{ width:280px; height:auto; }
.ppm-gallery-slider .ppm-gimg{
  width:100%; height:200px; object-fit:cover; display:block; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ppm-gallery-slider .swiper-slide a:hover .ppm-gimg{ transform:scale(1.03); box-shadow:0 10px 30px rgba(0,0,0,.3); }
.ppm-gallery-slider .swiper-scrollbar{ background:rgba(255,255,255,.08); height:6px; bottom:0; }
.ppm-gallery-slider .swiper-scrollbar-drag{ background:linear-gradient(90deg,var(--brand),var(--brand2)); border-radius:3px; }

/* Hero gallery nav (Swiper) */
.ppm-hero-slider{ width:100%; height:clamp(360px, 60vh, 580px); }
.ppm-hero-slider .swiper-slide{ width:100%; height:100%; }
.ppm-hero-slider .swiper-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.ppm-hero-slider .swiper-button-prev,
.ppm-hero-slider .swiper-button-next{
  width:42px; height:42px; border-radius:50%; background:rgba(15,20,28,.55);
  backdrop-filter:blur(6px); box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .2s ease, background .2s ease; color:#fff;
}
.ppm-hero-slider .swiper-button-prev:hover,
.ppm-hero-slider .swiper-button-next:hover{ transform:translateY(-2px); background:rgba(15,20,28,.7); }
.ppm-hero-slider .swiper-button-prev:after,
.ppm-hero-slider .swiper-button-next:after{ font-size:16px; font-weight:900; }
.ppm-hero-slider .swiper-button-prev{ left:16px; }
.ppm-hero-slider .swiper-button-next{ right:16px; }
.ppm-hero-slider .swiper-pagination-bullet{ width:10px; height:10px; background:rgba(255,255,255,.4); opacity:1; transition:background .2s, transform .2s; }
.ppm-hero-slider .swiper-pagination-bullet-active{ background:var(--brand); transform:scale(1.2); }

/* Metrics */
.ppm-metrics{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:860px){ .ppm-metrics{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ppm-metric{
  --ring:0 0 0 1px rgba(255,255,255,.12);
  position:relative; padding:22px 18px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10); box-shadow:var(--ring);
  transform:translate3d(0,8px,0); opacity:0; will-change:transform,opacity;
  transition:transform .6s ease, opacity .6s ease, border-color .25s ease, box-shadow .25s ease;
}
.ppm-metric.in{ transform:none; opacity:1; }
.ppm-metric:hover{ border-color:rgba(78,140,255,.35); box-shadow:0 14px 36px rgba(0,0,0,.30); }
.ppm-metric .val{
  font-size:clamp(26px,4.5vw,40px); font-weight:900; letter-spacing:.3px; line-height:1.05;
  background:linear-gradient(115deg,var(--brand),var(--brand2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums; min-height:1.05em;
}
.ppm-metric .lab{ margin:6px 0 0; color:var(--muted); font-size:14px; }
.ppm-metric::after{
  content:""; position:absolute; left:18px; right:18px; bottom:14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand2)); opacity:.35; transform:scaleX(0); transform-origin:left;
  transition:transform .8s ease .2s, opacity .25s ease;
}
.ppm-metric.in::after{ transform:scaleX(1); opacity:.5; }

/* Focus */
.ppm-card a:focus-visible,
.ppm-hero-slider .swiper-button-prev:focus-visible,
.ppm-hero-slider .swiper-button-next:focus-visible,
.ppm-gallery-slider a:focus-visible{
  outline:2px solid rgba(78,140,255,.6); outline-offset:3px;
}

/* Buttons */
.btn.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; border:0;
  background:linear-gradient(115deg,var(--brand),var(--brand2)); color:#021014; font-weight:700; letter-spacing:.3px;
  box-shadow:0 10px 25px rgba(78,140,255,.25); transition:transform .2s ease, box-shadow .2s ease; text-decoration:none;
}
.btn.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(78,140,255,.35); }


/* Layout */
.container.ppm-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:28px;
  align-items:start;
  padding-top:32px;
  padding-bottom:32px;

  /* NEW: name the areas so we can reorder on mobile */
  grid-template-areas: "main side";
}
.ppm-col-main{ grid-area: main; }
.ppm-col-side{ grid-area: side; }

@media (max-width:980px){
  /* Stack and move facts to the top */
  .container.ppm-main-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "side"
      "main";
  }

  /* Facts shouldn’t be sticky on small screens */
  .ppm-sticky{
    position:relative;
    top:auto;
  }

  /* Tighten spacing since it’s now first */
  .ppm-col-side{ margin-top:0; }
}

/* (optional) small spacing touch so the “Get a Free Quote” button has room below on mobile */
@media (max-width:600px){
  .ppm-facts{ margin-bottom:12px; }
}