/* Maltese First Capital — v16 */

:root{
  --gold:#CBA458;
  --gold-600:#b89247;
  --ink:#0b111b;
  --ink-2:#121a29;
  --ink-3:#0f1625;
  --text:#e9eef6;
  --muted:#b7c2d3;
  --white:#ffffff;
  --nav-bg: rgba(9,13,22,.68);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --glow: 0 0 0 1px rgba(203,164,88,.45), 0 8px 22px rgba(203,164,88,.14);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--ink);
  line-height:1.5;
}

.container{width:min(1200px, 92vw); margin-inline:auto}

/* NAV (always visible) */
.site-nav{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(10px);
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--white)}
.brand-tile{
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--white); border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.35); overflow:hidden;
}
.brand-tile img{width:100%; height:100%; object-fit:contain}
.brand-name{font-weight:700; letter-spacing:.2px}

.main-nav{display:flex; gap:18px; flex-wrap:wrap}
.nav-link{color:var(--text); text-decoration:none; padding:10px 12px; border-radius:10px; transition:.15s ease; opacity:.9}
.nav-link:hover{background:rgba(255,255,255,.06)}
.nav-link.active{background:rgba(255,255,255,.10); color:var(--white)}
.nav-cta{display:flex; gap:10px; flex-wrap:wrap}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none; border:1px solid transparent; transition: transform .08s ease, box-shadow .2s ease, background .2s ease}
.btn:active{transform:translateY(1px)}
.btn-secondary{background:rgba(255,255,255,.08); color:var(--white); border-color:rgba(255,255,255,.15)}
.btn-secondary:hover{background:rgba(255,255,255,.12)}
.btn-gold{background:var(--gold); color:#1c1305; border-color:var(--gold-600); box-shadow:0 4px 18px rgba(203,164,88,.25)}
.btn-gold:hover{background:var(--gold-600)}

/* HERO */
.hero{position:relative; min-height:64vh; display:grid; place-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; background-image:url("assets/hero-bg.jpg"); background-size:cover; background-position:center; filter:none; transform:scale(1.02)}
.hero-content{position:relative; z-index:1; text-align:center; padding:80px 0 70px}

/* Bigger crest that fills the badge cleanly */
.hero-badge{
  width:clamp(120px, 12vw, 152px);
  height:clamp(120px, 12vw, 152px);
  margin:0 auto 26px;
  background:var(--white);
  border-radius:24px;
  box-shadow:var(--shadow);
  display:grid; place-items:center; overflow:hidden;
}
.hero-badge img{width:100%; height:100%; object-fit:contain}

.hero-title{
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:.3px;
  font-size: clamp(34px, 5.6vw, 62px); /* slightly larger/heavier */
  text-shadow: 0 8px 26px rgba(0,0,0,.35);
}
.hero-sub{margin:0 auto 22px; max-width:900px; color:var(--text); opacity:.95; font-size:clamp(15px, 1.4vw + 10px, 18px)}

/* gap after hero */
.section-gap{height:18px; background:linear-gradient(to bottom, transparent, rgba(0,0,0,0))}

/* SERVICES */
.services{background:linear-gradient(180deg, var(--ink-2), var(--ink)); border-top-left-radius:28px; border-top-right-radius:28px; padding:40px 0 70px; box-shadow:0 -8px 28px rgba(0,0,0,.35)}

/* center the header area */
.services-head{text-align:center}
.eyebrow{color:var(--gold); letter-spacing:.32em; text-transform:uppercase; font-weight:700; margin:0 0 8px; font-size:.9rem}
.section-title{margin:0 0 26px; font-size:clamp(22px, 2.8vw, 32px); font-weight:900}

.card-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px}
@media (max-width:1000px){.card-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.card-grid{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg, #121a29, #0f1625);
  border-radius:18px; padding:22px;
  border:1px solid rgba(203,164,88,.55); /* gold outline */
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition: box-shadow .2s ease, transform .12s ease, border-color .2s ease;
}
.card h3{margin:0 0 8px; font-size:1.1rem}
.card p{margin:0; color:var(--muted)}
.card:hover{transform:translateY(-2px); box-shadow:var(--glow); border-color:rgba(203,164,88,.85)}

/* FOOTER (white with gold top border) */
.site-footer{background:var(--white); color:#1a2233; border-top:4px solid var(--gold)}
.site-footer a{color:#0f3b82; text-underline-offset:3px}
.footer-inner{padding:26px 0 36px; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; align-items:center}

/* Small devices */
@media (max-width:880px){
  .brand-name{display:none}
  .nav-inner{padding:10px 0}
  .hero-content{padding:64px 0 60px}
}