/*
Theme Name: OCPS Premium 2026
Theme URI: https://ownerschoiceri.com
Author: OCPS
Description: Premium image-forward WordPress theme for Owners Choice Property Services.
Version: 1.0.0
License: GPL-2.0+
Text Domain: ocps-premium-2026
*/
:root{
  --bg:#0b1220;
  --bg-2:#101a30;
  --surface:#ffffff;
  --ink:#0f172a;
  --muted:#5b6475;
  --line:#dbe4ee;
  --accent:#2f6df6;
  --accent-2:#66a2ff;
  --glass:rgba(255,255,255,.14);
  --radius:20px;
  --shadow:0 16px 40px rgba(2,8,23,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1000px 500px at 85% -150px, #d9e7ff 0%, #eff4fb 48%, #f7f9fc 100%);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1220px;margin:0 auto;padding:0 24px}

.site-header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter: blur(10px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(219,228,238,.85);
}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.branding{display:flex;align-items:center}
.branding .custom-logo{height:46px;width:auto}
.main-nav ul{display:flex;list-style:none;margin:0;padding:0;gap:22px;align-items:center;flex-wrap:wrap}
.main-nav a{font-weight:650;color:#1f2937}
.main-nav a:hover{color:#111827}
.nav-cta a{
  padding:10px 14px;border-radius:12px;
  background:var(--accent);color:#fff!important;font-weight:750;border:1px solid #1f5de5;
  box-shadow:0 6px 16px rgba(47,109,246,.24)
}

.hero-wrap{padding:66px 0 30px}
.hero{
  position:relative;border-radius:28px;overflow:hidden;min-height:540px;box-shadow:var(--shadow);
  border:1px solid rgba(173,191,219,.45);
}
.hero-media{
  position:absolute;inset:0;background-size:cover;background-position:center center;transform:scale(1.02);
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(115deg, rgba(7,12,24,.82) 15%, rgba(10,18,36,.60) 52%, rgba(12,20,36,.25) 100%),
    radial-gradient(600px 260px at 85% 18%, rgba(111,162,255,.35), rgba(111,162,255,0));
}
.hero-content{
  position:relative;z-index:2;color:#eaf1ff;padding:56px 48px;max-width:830px
}
.badge{
  display:inline-flex;padding:7px 12px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.32px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.32);background:var(--glass)
}
.hero h1{margin:14px 0 12px;font-size:clamp(38px,5.2vw,68px);line-height:1.01;letter-spacing:-.03em}
.hero p{margin:0 0 22px;font-size:20px;color:#d2def8;max-width:740px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 18px;border-radius:14px;font-weight:780;transition:.2s ease;
}
.btn-primary{background:#fff;color:#0f172a;border:1px solid #fff}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{border:1px solid rgba(255,255,255,.36);color:#eaf1ff;background:rgba(255,255,255,.05)}

.trust-strip{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.trust-item{
  border:1px solid #27416f;background:#0d1a34;color:#d7e4ff;
  border-radius:13px;padding:10px 12px;font-size:14px
}

.section{padding:54px 0}
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 8px 24px rgba(15,23,42,.07)
}
.section h2{margin:0 0 8px;font-size:36px;line-height:1.08;letter-spacing:-.02em}
.lead{margin:0 0 16px;font-size:18px;color:var(--muted)}

.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.service-card{
  border:1px solid #dbe4ee;border-radius:16px;padding:16px;background:linear-gradient(180deg,#fff,#f9fbff);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.service-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.10);border-color:#c8d8ef}
.icon{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;margin-bottom:10px;
  background:#edf3ff;border:1px solid #cfe0ff;color:#1f4fb8;font-weight:800
}
.service-card h3{margin:0 0 6px;font-size:20px;line-height:1.2}
.service-card p{margin:0;color:#5f6b81}

.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.step{
  border:1px solid #dbe4ee;border-radius:14px;padding:14px;background:#fff;
}
.step strong{display:block;font-size:13px;letter-spacing:.26px;text-transform:uppercase;color:#3a4a66;margin-bottom:4px}

.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gallery-item{
  border:1px solid #dbe4ee;border-radius:14px;overflow:hidden;background:#fff
}
.gallery-item img{height:230px;width:100%;object-fit:cover}
.gallery-item figcaption{padding:10px 12px;font-size:14px;color:#5b6475}

.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi .box{border:1px solid #dbe4ee;background:#f8fbff;border-radius:14px;padding:12px}
.kpi strong{display:block;font-size:23px}

.lightbox{
  position:fixed;inset:0;background:rgba(2,8,23,.86);display:none;align-items:center;justify-content:center;z-index:1200;padding:20px
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,94vw);max-height:86vh;border-radius:14px}
.lightbox .close{position:absolute;top:18px;right:22px;color:#fff;font-size:34px;line-height:1;cursor:pointer}

.page-wrap{padding:56px 0}
.page-wrap h1{margin:0 0 10px;font-size:46px;line-height:1.04;letter-spacing:-.02em}
.page-wrap h2{font-size:30px;margin:24px 0 8px}
.page-wrap .panel{padding:34px}
ul{padding-left:22px}

.contact-form{display:grid;gap:12px;max-width:760px}
.input, textarea{
  width:100%;padding:12px;border:1px solid #cdd8e8;border-radius:12px;font:inherit;background:#fff
}
textarea{min-height:150px}
.notice{font-size:13px;color:#6b7280}

.site-footer{padding:26px 0 36px;color:#718096;text-align:center;font-size:14px}

.reveal{opacity:0;transform:translateY(10px);transition:.5s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:1080px){
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-grid,.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .main-nav ul{gap:14px}
  .hero{min-height:auto}
  .hero-content{padding:34px 22px}
  .hero h1{font-size:clamp(34px,10vw,48px)}
  .hero p{font-size:18px}
  .trust-strip,.services-grid,.process-grid,.gallery-grid,.kpi{grid-template-columns:1fr}
  .page-wrap h1{font-size:36px}
}