:root{
  --navy:#0a1b2a; --slate:#3a4a5b; --bg:#0f1115; --card:#15181f; --gold:#c9a44a; --line:#2a2f38;
  --hero: url('images/hero.jpg');
  --card-border: 2px; /* thicker service card borders */
}

/* Base */
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;color:#e7eaee;background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin-inline:auto}

/* Type utilities */
.h1{font:700 clamp(2rem,4vw,3rem)/1.15 Poppins,Inter}
.h2{font:700 clamp(1.5rem,3vw,2.25rem)/1.2 Poppins,Inter}
.h3{font:600 1.5rem/1.2 Poppins,Inter}
.h4{font:600 1.125rem/1.2 Poppins,Inter}
.lead{color:#c1c7d0}
.center{text-align:center}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:rgba(11,14,19,.75);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.logo{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font:700 1.05rem Poppins,Inter;letter-spacing:.5px}
.logo-fav{width:28px;height:28px;display:inline-block}
@media (max-width:880px){.logo-fav{width:24px;height:24px}}
.nav-links{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
.nav-links a{color:#d7dce3;text-decoration:none;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--gold);transition:width .25s}
.nav-links a:hover::after{width:100%}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#d7dce3;margin:5px 0}
@media (max-width:880px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;inset:60px 0 auto 0;background:rgba(15,17,21,.98);border-bottom:1px solid var(--line);padding:1rem 1.25rem;transform:translateY(-120%);transition:transform .3s}
  .nav-links[data-open="true"]{transform:translateY(0)}
}

/* Hero */
.hero{position:relative;display:grid;place-items:center;min-height:80vh;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(60% 60% at 10% 10%, rgba(201,164,74,.10), transparent 60%),
  radial-gradient(50% 50% at 90% 20%, rgba(10,27,42,.35), transparent 60%),
  linear-gradient(120deg, #0b1e2f, #091523 60%, #0b1e2f);
  animation:gradientShift 18s ease-in-out infinite}
.hero-photo{position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center;opacity:.28;mix-blend:screen;filter:saturate(90%)}
@keyframes gradientShift{0%{filter:hue-rotate(0) brightness(1)}50%{filter:hue-rotate(8deg) brightness(1.03)}100%{filter:hue-rotate(0) brightness(1)}}
.hero-inner{position:relative;z-index:1;text-align:center;padding:6rem 1rem;color:#e6edf6}
.hero-title{margin:0 0 .75rem}
.hero-sub{margin:0 0 1.25rem;color:#d0d8e1}
.accent{color:var(--gold)}
.hero-cta{display:flex;gap:.75rem;justify-content:center}

/* Buttons (global) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1rem;border-radius:.75rem;text-decoration:none;font-weight:600;letter-spacing:.2px;cursor:pointer;border:1px solid transparent;transition:transform .08s, box-shadow .2s, background .3s, color .3s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:#111;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:#e6edf6;border-color:#ffffff33}
.btn-ghost:hover{background:#ffffff14}

/* Hero CTA — unified semi‑transparent gold (single source of truth) */
.hero-cta .btn{ /* both buttons */
  background: rgba(201,164,74,.20);
  border: 1px solid rgba(201,164,74,.55);
  color: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
@supports (background: color-mix(in srgb, red 30%, transparent)){
  .hero-cta .btn{
    background: color-mix(in srgb, var(--gold) 60%, transparent);
  }
  .hero-cta .btn:hover{
    background: color-mix(in srgb, var(--gold) 90%, transparent);
  }
}
.hero-cta .btn:hover{
  border-color: rgba(201,164,74,.85);
  transform: translateY(-1px);
  filter: none; /* neutralize any global .btn-primary hover filter */
}
.hero-cta .btn:focus-visible{
  outline: 2px solid #c9a44a; outline-offset: 2px;
}

/* Sections */
.section{padding:clamp(3rem,6vw,5rem) 0}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card.note{background:#1b1710;border-color:#3a2f18}
.stack{display:grid;gap:.75rem}
@media (max-width:880px){.split{grid-template-columns:1fr}}

/* Services */
.services .lead{margin-top:.25rem}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.25rem}
@media (max-width:1100px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.services-grid{grid-template-columns:1fr}}

.service-card{
  position:relative;
  background: var(--card);
  border: var(--card-border) solid rgba(201,164,74,0.45);
  border-radius:16px;
  padding:0 0 1.25rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s, border-color .25s ease, background-position .6s ease;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg, rgba(201,164,74,0.25), rgba(201,164,74,0.10), rgba(201,164,74,0.25)) border-box;
  background-clip: padding-box, border-box;
  background-size: 200% 200%;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  border-color:rgba(201,164,74,0.85);
  background-position:100% 0%;
}

/* Subtle gold “shine” ring on hover (thicker) */
.service-card::before{
  content:"";
  position:absolute; inset:0; border-radius:16px; padding:4px;
  background:linear-gradient(120deg, rgba(201,164,74,0.45), rgba(201,164,74,0.18), rgba(201,164,74,0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.service-card:hover::before{ opacity:1; }

.service-card .thumb{
  height:140px; background-size:cover; background-position:center;
  opacity:.9; filter:saturate(90%) contrast(105%); margin-bottom:.5rem; display:block;
}
.service-card .h4{margin:0 1rem .25rem; padding-top:.25rem}
.service-card p{margin:0 1rem 1rem}
.service-card .btn{margin:0 1rem 0}

/* Contact */
.contact-list{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.25rem}
textarea,input,select{font:500 1rem/1.2 Inter,sans-serif;padding:.7rem .85rem;border-radius:.7rem;border:1px solid var(--line);background:#0e1117;color:#e7eaee}
textarea:focus,input:focus,select:focus{outline:2px solid color-mix(in srgb, var(--gold) 45%, transparent)}

/* Modals */
.modal{border:0;padding:0;background:transparent}
.modal::backdrop{background:rgba(9,13,20,.6)}
.modal[open] .modal-dialog{animation:rise .22s both}
.modal-dialog{width:min(560px, 92%);background:#0f131a;border-radius:16px;padding:1.25rem;border:1px solid var(--line);box-shadow:0 20px 70px rgba(0,0,0,.35);position:relative}
@keyframes rise{from{transform:translateY(22px);opacity:.6}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;top:18px;right:18px;border:0;background:#1f2430;color:#d7dce3;border-radius:10px;padding:.35rem .55rem;cursor:pointer}

/* Modal field alignment / overflow fix */
.modal .stack > input,
.modal .stack > select,
.modal .stack > textarea { width:100%; max-width:100%; display:block; box-sizing:border-box; border-radius:10px; }
.modal .stack > input,
.modal .stack > select { height:48px; line-height:48px; }
.modal-dialog { width:min(560px,92vw); }
.modal .stack { gap:.75rem; overflow-wrap:anywhere; }
.modal .stack .btn { max-width:100%; }

/* Footer */
.footer{border-top:1px solid var(--line);background:#0d1016}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.footer-nav{display:flex;gap:1rem}
.footer-nav a{text-decoration:none;color:#d7dce3}

/* Reveal on scroll */
[data-observe]{opacity:0;transform:translateY(18px);transition:opacity .5s, transform .5s}
[data-observe].visible{opacity:1;transform:none}


/* --- Hero kicker & wordmark --- */
.hero-inner{ display:flex; flex-direction:column; align-items:center; }
.hero-kicker{
  margin: 0 0 .45rem;
  font-weight: 800;
  font-size: calc(1.18 * clamp(1.8rem, 3.2vw, 3rem)); /* slightly larger than hero-title */
  line-height: 1.05;
  letter-spacing: .2px;
}
.hero-wordmark{
  width: clamp(185px, 23vw, 305px);
  height: auto;
  margin: .25rem 0 .65rem;
  opacity: .95; /* transparent PNG lets background show through */
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
}
.hero-title{ line-height: 1.1; }
/* Hero kicker color */
#top .hero-kicker {
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* Contact links: white until hover, then link blue */
.contact-list a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color .2s ease, border-color .2s ease;
}

.contact-list a:visited {
  color: #fff;
}

.contact-list a:hover,
.contact-list a:focus-visible {
  color: #4ea1ff;
  /* link blue */
  border-bottom-color: currentColor;
}

.contact-list a:active {
  color: #79b9ff;
}

/* Footer disclaimer */
.footer-copy {
  max-width: 60ch;
}

.footer-disclaimer {
  margin: .25rem 0 0;
  font-size: .83rem;
  color: #c1c7d0;
}

@media (max-width: 640px) {
  .footer-inner {
    gap: .6rem;
  }
}