/* All-Blue Theme + HERO-ONLY background logo */
:root{
  --bg:#ffffff;
  --ink:#0F172A;
  --ink-sub:#334155;
  --muted:#E2E8F0;
  --accent:#1E3A8A;
  --accent-2:#1D4ED8;
  --wrap:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--muted)}
.nav{display:flex;align-items:center;gap:24px;height:64px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand-logo{width:36px;height:36px;object-fit:contain}
.brand-text {
  font-family: "Segoe UI", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ink);
}
.brand-text strong {
  font-family: inherit;
  font-weight: 700;   /* same weight as the rest */
  letter-spacing: inherit;
  color: inherit;
}
.site-nav{display:flex;gap:18px;align-items:center}
.site-nav a{color:var(--ink);font-weight:600}
.site-nav .btn{color:#ffffff;background:var(--accent);padding:10px 14px;border-radius:8px;font-weight:800}
.site-nav .btn:hover{background:var(--accent-2)}

/* Hero */
.hero{height:480px; position:relative; z-index:1; overflow:hidden}
.hero .wrap{position:relative; z-index:1}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('/assets/logo-bg.svg') no-repeat center 35% / 300vmin;
  opacity:0.2; /* tasteful watermark; adjust as needed */
  pointer-events:none;
  z-index:0;
}
@media (max-width: 768px) {
  .hero::before {
    background-size: 900vmin; /* make the lighthouse logo larger on small screens */
    opacity: 1; /* increase visibility slightly for mobile */
    background-position: center 30%; /* recenter a bit */
  }
}
.subhead{color:var(--ink-sub);max-width:58ch;margin:0 0 24px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;background:var(--accent);color:#ffffff;font-weight:800}
.btn.ghost{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.btn.ghost:hover{border-color:var(--accent-2);color:var(--accent-2)}

/* Sections */
.section{padding:64px 0}
.section.alt{background:#F8FAFC}
h2{font-size:clamp(22px,2.8vw,32px);margin:0 0 12px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{background:#ffffff;border:1px solid var(--muted);padding:18px;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h3{margin-top:0}
.card ul{margin:8px 0 0 18px; color:var(--ink-sub)}

.client-list{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:10px 0 0}
.client-list li{background:#ffffff;border:1px solid var(--muted);padding:12px;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.04)}

.about{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.tagline{margin:12px 0 0;color:var(--ink-sub);font-style:italic}
.aside{background:#ffffff;border:1px solid var(--muted);padding:16px;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}

/* Contact */
.contact .sub{color:var(--ink-sub)}
.mini-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px}
.mini-form label{display:block;font-weight:700}
.mini-form input,.mini-form textarea{width:100%;background:#fff;border:1px solid var(--muted);border-radius:10px;color:var(--ink);padding:10px}
.mini-form textarea{grid-column:1 / -1}
.mini-form .btn{grid-column:1 / 2;justify-self:start}
.form-note{grid-column:1 / -1;color:var(--ink-sub);font-size:.9rem;margin:6px 0 0}

/* Footer */
.site-footer{border-top:1px solid var(--muted);background:#F8FAFC}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px}
.foot-nav{display:flex;gap:14px}

/* Responsive */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .cards{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .client-list{grid-template-columns:1fr}
  .mini-form{grid-template-columns:1fr}
  .hero::before{ background-size: 48vmin; opacity: 0.14; }
}
  /* About Section */
#about {
  background-color: #f9fbff;
    min-height: 520px;
  color: var(--ink);
  padding: 88px 0;
  line-height: 1.7;
}


.section.about h2 {
  color: var(--accent);
  font-size: 1.8em;
  margin-bottom: 0.6em;
}

.section.about blockquote {
  margin: 20px 0;
  padding-left: 20px;
  border-left: 4px solid var(--accent);
  font-style: italic;
  color: #1e3b68;
}

}
/* === HERO: final responsive rules (authoritative) === */
.hero{
  min-height: 520px;               /* ensures visible space with no text */
  position: relative;
  overflow: hidden;
  background-color: #f9fbff;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/assets/logo-bg.svg") no-repeat center 38%;
  background-size: clamp(420px, 60vmin, 900px); /* scales on desktop too */
  opacity: 0.26;
  pointer-events:none;
  z-index:0;
}

/* Mobile overrides */
 @media (max-width: 768px) {
 .hero {
  min-height: 8vh; /* smaller section height for phones */
  padding: 20px 0; /* adds a little breathing room for the logo */
}


  .hero::before{
    background-position: center 40%;
    background-size: clamp(520px, 120vmin, 1400px);
    opacity: 1.0;
  }
}
/* ===== MOBILE TIGHTENING ===== */
@media (max-width: 768px){

  /* Make the hero short */
  .hero{
    min-height: 40;
    height: 240px;        /* try 100–140px to taste */
    padding:20px;           /* remove extra bottom space */
  }
  .hero::before{
    background-position: center 40%;
    background-size: clamp(360px, 90vmin, 900px);
  }

  /* Reduce space before Core Services */
  #services.section{
    padding-top: 40px;    /* default is much larger; shrink it */
  }
  #services h2{
    margin-top: 20;        /* kill heading’s default top margin */
  }
}
/* === DESKTOP HERO OVERRIDE (mobile unchanged) === */
@media (min-width: 769px){
  .hero{
    min-height: 520px;        /* give the hero some height on desktop */
  }
  .hero::before{
    background-position: center 38%;
    background-size: clamp(1000px, 80vmin, 1200px);  /* BIG on desktop */
    opacity: 1.0;             /* keep subtle; tweak if needed */
  }
}