:root{
  --navy:#12395f; --navy-d:#0d2a46; --green:#2e9e5b; --green-d:#25834b;
  --ink:#1f2a37; --muted:#5b6b7b; --line:#e4e9ef; --bg:#f6f9fc; --white:#fff;
  --radius:12px; --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.6}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
a{color:var(--green-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;color:var(--navy)}

/* Header */
.site-header{background:var(--navy);position:sticky;top:0;z-index:20;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:70px;flex-wrap:wrap;gap:8px}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand:hover{text-decoration:none}
.brand-mark{background:var(--green);color:#fff;font-weight:800;padding:8px 12px;border-radius:10px;font-size:20px;letter-spacing:.5px}
.brand-text{font-size:20px;font-weight:700}
.brand-text small{font-size:12px;opacity:.75;font-weight:600}
.main-nav{display:flex;gap:6px;flex-wrap:wrap}
.main-nav a{color:#dbe6f2;padding:8px 14px;border-radius:8px;font-weight:600}
.main-nav a:hover{background:rgba(255,255,255,.1);text-decoration:none;color:#fff}
.main-nav a.active{background:var(--green);color:#fff}

/* Hero */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-d) 100%);color:#eaf2fb;padding:72px 0}
.hero h1{color:#fff;font-size:2.6rem;margin:0 0 14px;max-width:760px}
.hero .lead{font-size:1.2rem;color:#cfe0f2;max-width:680px;margin:0 0 26px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:10px;font-weight:700;border:2px solid transparent;cursor:pointer;font-size:1rem}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-d);text-decoration:none}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12);text-decoration:none}

/* Sections */
.section{padding:60px 0}
.section-title{text-align:center;font-size:2rem;margin:0 0 36px}
.page-head{background:var(--bg);padding:48px 0;border-bottom:1px solid var(--line)}
.page-head h1{font-size:2.2rem;margin:0}
.lead{font-size:1.15rem;color:var(--muted)}
.prose p{font-size:1.08rem;max-width:760px;margin:0 0 18px}

.feature-grid,.service-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.feature,.service{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 3px 10px rgba(18,57,95,.05)}
.feature h3,.service h3{margin:0 0 8px;font-size:1.2rem}
.feature p,.service p{margin:0;color:var(--muted)}
.service{border-left:4px solid var(--green)}
.cta-line{text-align:center;margin-top:34px;font-size:1.1rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:36px}
.contact-info h3{margin-top:0}
.contact-form{display:grid;gap:14px}
.contact-form label{display:grid;gap:6px;font-weight:600;color:var(--navy)}
.contact-form input,.contact-form textarea{padding:11px 13px;border:1px solid var(--line);border-radius:8px;font:inherit;font-weight:400}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--green);border-color:var(--green)}

/* WeldonPC service blocks */
.wpc-services{background:var(--bg);border-top:1px solid var(--line);padding:56px 0}
.wpc-heading{text-align:center;font-size:1.5rem;margin:0 0 6px}
.wpc-sub{text-align:center;color:var(--muted);margin:0 0 30px}
.wpc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.wpc-card{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;text-align:center;color:var(--ink);transition:transform .12s,box-shadow .12s}
.wpc-card:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(18,57,95,.12);text-decoration:none}
.wpc-ic{font-size:2rem;margin-bottom:8px}
.wpc-card h3{font-size:1.05rem;margin:0 0 6px}
.wpc-card p{margin:0;font-size:.9rem;color:var(--muted)}

/* Footer */
.site-footer{background:var(--navy-d);color:#b9cbe0;padding:26px 0}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center}
.footer-inner p{margin:0}
.powered a{color:#8fe0ac;font-weight:700}

@media(max-width:760px){
  .hero{padding:52px 0}.hero h1{font-size:2rem}
  .contact-grid{grid-template-columns:1fr}
  .footer-inner{justify-content:center;text-align:center}
}

/* WeldonPC advertisement band (real creatives, matches garfieldheights.info) */
.wpc-ads{background:var(--bg);border-top:1px solid var(--line);padding:34px 0}
.wpc-ads .ad-label{text-align:center;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--muted);margin:0 0 14px}
.ad-stack{display:flex;flex-direction:column;align-items:center;gap:18px}
.wpc-ad{display:inline-block;line-height:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--white);box-shadow:0 3px 10px rgba(18,57,95,.06);transition:transform .12s,box-shadow .12s}
.wpc-ad:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,57,95,.14);text-decoration:none}
.wpc-ad img{display:block;max-width:100%;height:auto}
.wpc-ad.lead{width:728px;max-width:100%}
.wpc-ad.rect{width:300px;max-width:100%}

/* ad placement: center each band; top leaderboard sits tight under the header */
.wpc-ads .wrap{text-align:center}
.wpc-ads-top{padding:16px 0 4px;border-top:none}

/* 2x2 grid of WeldonPC service ads (each a distinct "advertiser") */
.ad-grid{display:grid;grid-template-columns:repeat(2,300px);gap:20px;justify-content:center;margin-top:2px}
.ad-grid .wpc-ad img{width:300px;height:250px;max-width:100%}
@media(max-width:680px){.ad-grid{grid-template-columns:300px}}
@media(max-width:340px){.ad-grid{grid-template-columns:1fr}.ad-grid .wpc-ad,.ad-grid .wpc-ad img{width:100%;height:auto}}

/* one-at-a-time rotating ad slots */
.ad-rotator{position:relative;margin:0 auto;line-height:0}
.ad-rotator.lead-rot{width:728px;max-width:100%;aspect-ratio:728 / 90}
.ad-rotator.rect-rot{width:300px;max-width:100%;aspect-ratio:300 / 250}
.ad-rotator .rot{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none;border:none;border-radius:8px;overflow:hidden;box-shadow:0 3px 10px rgba(18,57,95,.10)}
.ad-rotator .rot.active{opacity:1;pointer-events:auto}
.ad-rotator .rot img{width:100%;height:100%;display:block}