/* ============================================================================
   Sayban.pk — Developer Projects (single .sbp-single + archive .sbp-archive)
   Premium developer-site layout. Fonts/styles free (custom CPT templates).
   ========================================================================== */
.sbp-single, .sbp-archive, .sbp-grid{
  --ink:var(--sb-charcoal); --ink2:var(--sb-ink-2); --ink3:var(--sb-ink-3);
  --gold:var(--sb-gold); --gold-deep:var(--sb-gold-deep); --gold-soft:var(--sb-gold-soft); --gold-lite:var(--sb-gold-lite);
  --teal:var(--sb-teal); --teal-deep:var(--sb-teal-deep); --teal-soft:var(--sb-teal-soft);
  --bg:var(--sb-paper); --surface:#FFFFFF; --line:var(--sb-line); --line2:var(--sb-line-2); --brick:var(--sb-brick); --wa:var(--sb-success);
  --dark:var(--sb-dark); --dark2:var(--sb-dark-2); --darkline:rgba(214,188,134,.28);
  --serif:'Marcellus', Georgia, serif; --sans:'Manrope','Segoe UI',system-ui,sans-serif;
  font-family:var(--sans); color:var(--ink); line-height:1.6;
}
.sbp-single *, .sbp-archive *, .sbp-grid *{box-sizing:border-box;}
.sbp-single a, .sbp-archive a{text-decoration:none; color:inherit;}
/* :where() = zero specificity, so component classes (.sbp-hero-title, .sbp-h2, .sbp-hero-loc…) keep their own margins */
.sbp-single :where(h1,h2,h3,p){margin:0;}
.sbp-single{background:var(--bg);}

/* buttons ----------------------------------------------------------------- */
.sbp-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--sans);
  font-weight:800; font-size:14.5px; padding:13px 26px; border-radius:9px; border:1px solid transparent; cursor:pointer;
  line-height:1; transition:background-color .15s,border-color .15s,color .15s,filter .15s;}
.sbp-btn-sm{padding:9px 16px; font-size:13px;}
.sbp-btn-block{width:100%;}
.sbp-btn-gold{background:var(--gold) !important; color:#fff !important; border-color:var(--gold);}
.sbp-btn-gold:hover{background:var(--gold-deep) !important; border-color:var(--gold-deep); color:#fff !important;}
.sbp-btn-ghostgold{background:transparent; border-color:var(--gold); color:var(--gold-deep) !important;}
.sbp-btn-ghostgold:hover{background:var(--gold); color:#fff !important;}
.sbp-btn-glass{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); color:#fff !important; backdrop-filter:blur(4px);}
.sbp-btn-glass:hover{background:rgba(255,255,255,.22); color:#fff !important;}
.sbp-btn-wa{background:var(--wa) !important; color:#fff !important; border-color:var(--wa);}
.sbp-btn-wa:hover{filter:brightness(.93); color:#fff !important;}
.sbp-btn-charcoal{background:var(--ink) !important; color:#fff !important; border-color:var(--ink);}
.sbp-btn-charcoal:hover{filter:brightness(1.35); color:#fff !important;}

.sbp-kicker{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lite);}
.sbp-crumb{font-size:13px; color:rgba(255,255,255,.7); display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:18px;}
.sbp-crumb a:hover{color:#fff;} .sbp-crumb b{color:#fff; font-weight:700;}
.sbp-eyebrow{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px;}
/* .sbp-single/.sbp-archive prefix beats the `.sbp-single h2{margin:0}` reset */
.sbp-single .sbp-h2,.sbp-archive .sbp-h2{font-family:var(--serif); font-size:30px; line-height:1.15; color:var(--ink); margin:0 0 24px;}
.sbp-pay-head .sbp-h2{margin-bottom:0;}

/* ================= HERO ================= */
.sbp-hero{position:relative; min-height:520px; display:flex; align-items:flex-end; overflow:hidden; background:var(--dark);}
.sbp-hero-media{position:absolute; inset:0; background:center/cover no-repeat; transform:scale(1.02);}
.sbp-hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,9,6,.35) 0%,rgba(11,9,6,.35) 40%,rgba(11,9,6,.92) 100%);}
.sbp-hero-inner{position:relative; max-width:1240px; margin:0 auto; width:100%; padding:0 40px 62px; color:#fff;}
.sbp-hero .sbp-kicker{margin-bottom:14px;}
.sbp-hero-title{font-family:var(--serif); font-size:54px; line-height:1.05; color:#fff; margin-bottom:16px;}
.sbp-hero-loc{font-size:16px; color:rgba(255,255,255,.85); margin-bottom:20px;}
.sbp-hero-chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
.sbp-chip{font-size:12.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  padding:7px 14px; border-radius:999px;}
.sbp-chip-live{background:rgba(30,140,110,.35); border-color:rgba(60,190,150,.6);}
.sbp-chip-price{background:rgba(176,140,70,.28); border-color:var(--gold); color:#fff;}
.sbp-hero-cta{display:flex; gap:14px; flex-wrap:wrap;}

/* ================= LAYOUT ================= */
.sbp-wrap{max-width:1240px; margin:0 auto; padding:0 40px 80px;}
.sbp-layout{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:40px; align-items:start;}
.sbp-main{min-width:0;}
.sbp-sec{padding:34px 0; border-top:1px solid var(--line);}
.sbp-sec:first-child{border-top:none;}
.sbp-facts + .sbp-sec{border-top:none;}  /* no hairline right below the facts card */
.sbp-prose{font-size:16.5px; line-height:1.8; color:var(--sb-ink-soft);}
.sbp-prose p{margin:0 0 16px;}

/* facts strip (overlaps hero) */
/* border-based dividers (not gap-fill) so empty cells stay white when a project has < 6 facts */
.sbp-facts{display:grid; grid-template-columns:repeat(3,1fr); background:var(--surface);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 14px 34px rgba(31,28,20,.10);
  margin-top:-40px; position:relative; z-index:2;}
.sbp-fact{background:var(--surface); padding:18px 22px; border-top:1px solid var(--line); border-left:1px solid var(--line);}
.sbp-fact:nth-child(-n+3){border-top:none;}
.sbp-fact:nth-child(3n+1){border-left:none;}
.sbp-fact span{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:6px;}
.sbp-fact b{font-size:15.5px; color:var(--ink); font-weight:700;}

/* features */
.sbp-features{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 22px;}
.sbp-feature{display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:14px 16px;}
.sbp-feature-ic{width:26px; height:26px; flex:none; border-radius:50%; background:var(--teal-soft); color:var(--teal-deep);
  display:grid; place-items:center; font-size:13px; font-weight:900;}

/* gallery */
.sbp-gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; gap:12px;}
.sbp-gal-item{background:center/cover no-repeat var(--line); border-radius:12px; border:1px solid var(--line); transition:filter .15s;}
.sbp-gal-item:hover{filter:brightness(1.06);}
.sbp-gal-lead{grid-column:span 2; grid-row:span 2;}

/* ================= PAYMENT PLANS ================= */
.sbp-pay-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px;}
.sbp-pay-head .sbp-h2{margin-bottom:0;}
.sbp-tabs{display:inline-flex; background:var(--surface); border:1px solid var(--line2); border-radius:10px; padding:4px; margin:18px 0 20px; gap:4px; flex-wrap:wrap;}
/* !important + explicit states beat Elementor's global button hover/active colour */
.sbp-tab{font-family:var(--sans); font-weight:700; font-size:14px; color:var(--ink2) !important; background:transparent !important; border:none !important;
  padding:10px 20px; border-radius:8px; cursor:pointer; box-shadow:none !important; transition:background-color .15s,color .15s;}
.sbp-tab:hover,.sbp-tab:focus{color:var(--ink) !important; background:transparent !important;}
.sbp-tab.on,.sbp-tab.on:hover,.sbp-tab.on:focus{background:var(--ink) !important; color:#fff !important;}
.sbp-plan{display:none;}
.sbp-plan.on{display:block; animation:sbpfade .2s ease;}
@keyframes sbpfade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.sbp-plan-topline{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--gold-soft); border:1px solid var(--sb-gold-lite); border-radius:12px; padding:14px 20px; margin-bottom:14px;}
.sbp-plan-sub{font-size:14px; font-weight:700; color:var(--gold-deep);}
.sbp-plan-total{font-size:14px; color:var(--ink2);}
.sbp-plan-total b{font-family:var(--serif); font-size:22px; color:var(--gold-deep); margin-left:8px;}
.sbp-plan-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.sbp-plan-table th{background:var(--ink); color:#fff; text-align:left; font-size:11.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:13px 18px;}
.sbp-plan-table td{padding:13px 18px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink2);}
.sbp-plan-table tbody tr:nth-child(odd) td{background:var(--sb-paper-2);}
.sbp-plan-table td:first-child{color:var(--ink); font-weight:600;}
.sbp-ta-right{text-align:right !important; font-variant-numeric:tabular-nums; white-space:nowrap;}
.sbp-row-note{color:var(--ink3); font-weight:500; font-size:13px; margin-left:6px;}
.sbp-plan-table tfoot td{background:var(--gold-soft); font-weight:800; color:var(--gold-deep); font-size:15.5px; border-top:2px solid var(--gold);}
.sbp-plan-notes{margin:16px 0 0; padding-left:20px; color:var(--ink2); font-size:14px;}
.sbp-plan-notes li{margin-bottom:7px;}
.sbp-plan-notes li::marker{color:var(--gold);}
.sbp-pay-disclaimer{margin-top:18px; font-size:12.5px; color:var(--ink3); line-height:1.6;}

/* location */
.sbp-map{border:1px solid var(--line); border-radius:14px; overflow:hidden; height:380px; margin-bottom:16px;}
.sbp-map iframe{width:100%; height:100%; border:0; display:block;}
.sbp-map-addr{margin-top:4px; font-size:14px; color:var(--ink2);}

/* ================= STICKY RAIL ================= */
.sbp-rail{position:sticky; top:88px;}
.sbp-rail-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px;
  box-shadow:0 14px 40px rgba(31,28,20,.10); margin-top:-40px; position:relative; z-index:3;}
.sbp-rail-price{padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.sbp-rail-price span{display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin-bottom:4px;}
.sbp-rail-price b{font-family:var(--serif); font-size:26px; color:var(--gold-deep);}
.sbp-rail-lead{font-size:13.5px; color:var(--ink2); margin-bottom:16px;}
.sbp-inq-form{display:grid; gap:10px;}
.sbp-inq-form input,.sbp-inq-form textarea{width:100%; border:1px solid var(--line2); border-radius:9px; padding:12px 14px;
  font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff;}
.sbp-inq-form input:focus,.sbp-inq-form textarea:focus{border-color:var(--gold); outline:none; box-shadow:0 0 0 3px rgba(176,140,70,.15);}
.sbp-inq-form textarea{resize:vertical; min-height:74px;}
.sbp-inq-form .sbp-btn{margin-top:4px;}
.sbp-hp{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important;}
.sbp-rail-contact{display:grid; gap:10px; margin-top:12px;}
.sbp-rail-trust{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--ink3); text-align:center;}
.sbp-inq-ok{background:var(--teal-soft); color:var(--teal-deep); border:1px solid #BFE0D6; border-radius:9px; padding:11px 14px; font-size:13.5px; font-weight:700; margin-bottom:14px;}
.sbp-inq-err{background:#F6E5E0; color:var(--brick); border:1px solid #E9C9C0; border-radius:9px; padding:11px 14px; font-size:13.5px; font-weight:700; margin-bottom:14px;}

/* ================= ARCHIVE + CARDS (dark) ================= */
.sbp-arch-head{background:var(--dark); color:#fff;}
.sbp-arch-inner{max-width:1240px; margin:0 auto; padding:44px 40px 48px;}
.sbp-arch-inner .sbp-kicker{margin:6px 0 12px;}
.sbp-arch-title{font-family:var(--serif); font-size:46px; line-height:1.08; color:#fff; margin:0;}
.sbp-arch-sub{margin-top:14px; font-size:16px; color:rgba(255,255,255,.72); max-width:60ch;}
.sbp-archive{background:var(--bg);}
.sbp-arch-wrap{max-width:1240px; margin:0 auto; padding:44px 40px 72px;}
.sbp-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;}

.sbp-card{background:var(--dark2); border:1px solid var(--darkline); border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s, border-color .18s;}
.sbp-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.35); border-color:var(--gold);}
.sbp-card-img{display:block; height:210px; background:center/cover no-repeat #111; position:relative;}
.sbp-card-img-empty{background:linear-gradient(135deg,var(--sb-dark-2) 0%,var(--sb-dark) 100%);}
.sbp-card-mono{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:88px; line-height:1; color:rgba(216,188,134,.26);}
.sbp-card-status{position:absolute; top:12px; left:12px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:rgba(14,110,94,.85); border:1px solid rgba(60,190,150,.6); padding:5px 11px; border-radius:999px;}
.sbp-card-body{padding:22px; display:flex; flex-direction:column; flex:1;}
.sbp-tag{display:inline-block; align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-lite); border:1px solid var(--gold); border-radius:999px; padding:4px 12px; margin-bottom:14px;}
.sbp-card-title{font-family:var(--serif); font-size:23px; line-height:1.15; color:#fff; margin-bottom:8px;}
/* !important so Elementor's global link colour doesn't bleed into the card title on the homepage */
.sbp-card-title a{color:inherit !important; text-decoration:none;}
.sbp-card-title a:hover{color:var(--gold-lite) !important;}
.sbp-card-loc{font-size:14px; color:rgba(255,255,255,.62); margin-bottom:14px;}
.sbp-card-price{margin:2px 0 18px; padding-top:14px; border-top:1px solid var(--darkline);}
.sbp-card-price span{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:3px;}
.sbp-card-price b{font-family:var(--serif); font-size:22px; color:var(--gold-lite);}
.sbp-card-btns{margin-top:auto; display:flex; gap:10px;}
.sbp-card-btns .sbp-btn{flex:1; padding:11px 12px; font-size:13px;}
.sbp-card-btns .sbp-btn-ghostgold{color:var(--gold-lite) !important;}
.sbp-card-btns .sbp-btn-ghostgold:hover{color:#fff !important;}
.sbp-arch-pager{margin-top:40px; display:flex; justify-content:center;}
.sbp-arch-pager ul{list-style:none; display:flex; gap:8px; padding:0; margin:0;}
.sbp-arch-pager a,.sbp-arch-pager span{display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px;
  padding:0 14px; border-radius:8px; border:1px solid var(--line2); background:#fff; font-weight:700; font-size:14px; color:var(--ink2);}
.sbp-arch-pager .current,.sbp-arch-pager a:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
.sbp-arch-empty{text-align:center; padding:60px 20px; color:var(--ink2);}

/* ================= RESPONSIVE ================= */
@media (max-width:1040px){
  .sbp-layout{grid-template-columns:1fr;}
  .sbp-rail{position:static;}
  .sbp-rail-card{margin-top:20px; max-width:520px;}
  .sbp-hero-title{font-size:42px;}
  .sbp-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:680px){
  .sbp-wrap,.sbp-hero-inner,.sbp-arch-inner,.sbp-arch-wrap{padding-left:20px; padding-right:20px;}
  .sbp-hero{min-height:440px;}
  .sbp-hero-title{font-size:33px;}
  .sbp-facts{grid-template-columns:1fr 1fr; margin-top:0;}
  .sbp-features{grid-template-columns:1fr;}
  .sbp-gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:120px;}
  .sbp-gal-lead{grid-column:span 2; grid-row:span 1;}
  .sbp-grid{grid-template-columns:1fr;}
  .sbp-h2,.sbp-arch-title{font-size:28px;}
  .sbp-plan-table th,.sbp-plan-table td{padding:11px 12px; font-size:13.5px;}
}