:root{
  --bg-dark:#0b1b3b;
  --ink:#0a0a0a;
  --muted:#7781a6;
  --primary:#0f3d9e;
  --primary-acc:#60a5fa;
  --card:#0f1f46;
  --surface:#0d1a3a;
  --ring:#1e3a8a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:#fff;background:var(--bg-dark);}

.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.site-header{position:sticky;top:0;background:rgba(13,26,58,.9);backdrop-filter: blur(8px);z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary-acc));}
.brand-text{letter-spacing:.2px}

nav a{color:#dbe7ff;text-decoration:none;margin-left:1rem;opacity:.9}
nav a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.1rem;border-radius:12px;border:1px solid transparent;cursor:pointer;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-acc));color:#00133a}
.btn-outline{border-color:#3b4c86;color:#dbe7ff;background:transparent}
.btn-outline:hover{background:#11214b}

.hero{position:relative;min-height:70vh;display:grid;place-items:center;background:#000}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,10,40,.65), rgba(0,10,40,.85)), var(--bg, none); background-image:linear-gradient(to bottom, rgba(0,10,40,.65), rgba(0,10,40,.85)), var(--bg); background-size:cover;background-position:center;}
.hero-content{position:relative;text-align:center;padding:3rem 0}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem);margin:0 0 .6rem}
.hero p{color:#c9d6ff;margin:0 0 1.4rem;max-width:720px;margin-inline:auto}

.about{padding:4rem 0}
.about-card{display:grid;gap:1.25rem;grid-template-columns: 160px 1fr;align-items:start;background:linear-gradient(180deg,#0d1a3a,#0a1530);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:1.25rem}
.about-photo{width:160px;height:160px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.15);box-shadow: 0 10px 30px rgba(0,0,0,.35);}
.about-copy h2{margin:0 0 .6rem}
.about-copy p{color:#dfebffb3}
.contact-block{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
.contact-link{color:#fff;border:1px solid rgba(255,255,255,.15);padding:.5rem .75rem;border-radius:10px;text-decoration:none}
.contact-link:hover{background:#11214b}

.services{padding:3.5rem 0;background: radial-gradient(1200px 600px at 10% 5%, rgba(57,97,206,.25), transparent), radial-gradient(1200px 600px at 90% 95%, rgba(57,97,206,.2), transparent)}
.services h2,.featured h2,.contact h2{font-size:2rem;margin:0 0 1rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:linear-gradient(180deg,#0d1a3a,#0a1530);border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden}
.card-image{height:160px;background-size:cover;background-position:center}
.card-image.gradient{background-image: radial-gradient(circle at 20% 20%, #1e3a8a, #0b1b3b)}
.card-body{padding:1rem 1.1rem}
.card h3{margin:.2rem 0 .5rem}

.featured{padding:3.5rem 0}
.muted{color:#c9d6ff99;margin-top:-.5rem;margin-bottom:1rem}
.masonry{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.tile{margin:0}
.tile img{width:100%;height:220px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08)}

.contact{padding:3.5rem 0;background:linear-gradient(180deg,#0a1530,#0b1b3b)}
.contact-form{display:grid;gap:1rem;background:#0a1530;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1.25rem}
.contact-form .row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:.8rem;border-radius:12px;border:1px solid #2b3b6a;background:#0f1f46;color:#fff;outline:none}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#4c6bda;box-shadow:0 0 0 3px rgba(76,107,218,.2)}
.contact-inline{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}

.site-footer{border-top:1px solid rgba(255,255,255,.08);background:#0a1530}
.footer-inner{display:flex;align-items:center;justify-content:center;padding:1rem 0;color:#99a6d6}

.hidden{display:none}

@media (max-width:700px){
  .about-card{grid-template-columns:1fr}
  .about-photo{width:120px;height:120px}
  .contact-form .row{grid-template-columns:1fr}
}


/* Ensure portrait shows fully */
.about-photo-full{
  object-fit: contain !important;
  height: auto !important;
  max-height: 380px;
  width: 100%;
  background:#0a1530;
}

/* SOLD ribbon on featured tile */
.tile{position:relative}
.ribbon{
  position:absolute;
  top:12px; left:-12px;
  padding:.35rem .75rem;
  background:#22c55e;
  color:#06200f;
  font-weight:800;
  letter-spacing:.06em;
  transform:rotate(-10deg);
  border-radius:.4rem;
  border:2px solid rgba(0,0,0,.2);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}