/* ======================================
   Weber International Advisory — Styles
   Proportions tuned to match mockup:
   • Large stacked logo
   • No top panel (header overlays hero)
   • Hero image lower & “zoomed out”
   • Playfair (headings) + Lato (body)
====================================== */

/* ---- Theme / Base ---- */
:root{
  color-scheme: only light;
  --ink:#0b2a4a;
  --ink-2:#2b4055;
  --sky:#f4f9fd;
  --btn:#133654;
  --line:#e6edf5;
  --white:#fff;

  /* Proportion controls (tweak here if needed) */
  --logo-h: 210px;     /* desktop logo height (mockup-large) */
  --logo-h-sm: 120px;  /* mobile logo height */

  --sans: "Lato", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", Times, serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{ background:var(--white); color:var(--ink); font:16px/1.65 var(--sans); }
h1,h2,h3{ font-family:var(--serif); }

/* ---- Layout helpers ---- */
.container{ width:min(1180px, 92%); margin-inline:auto; }
.section{ padding:72px 0; }
.section-alt{ background:var(--sky); }

/* ---- Header (overlay, NOT sticky; no top bar) ---- */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:10;
  background:transparent !important; border:none !important; box-shadow:none !important;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.brand-logo{ height:var(--logo-h); width:auto; display:block; }
@media (max-width:560px){ .brand-logo{ height:var(--logo-h-sm); } }

/* Nav */
.site-nav{ display:flex; gap:32px; align-items:center; }
.site-nav a{ color:var(--ink); text-decoration:none; font-weight:600; letter-spacing:.2px; }
.nav-toggle{ display:none; background:none; border:0; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; }

@media (max-width:880px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:absolute; right:16px; top:calc(var(--logo-h-sm) + 24px); display:none;
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px;
    box-shadow:0 10px 26px rgba(0,0,0,.08);
    flex-direction:column; align-items:flex-start; gap:12px;
  }
  .site-nav.open{ display:flex; }
}

/* ---- Buttons ---- */
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  padding:14px 28px; border-radius:8px; transition:transform .15s ease;
}
.btn-primary{ background:var(--btn); color:#fff; border:2px solid var(--btn); }
.btn:hover{ transform:translateY(-1px); }

/* ---- HERO (crisp, lower horizon, visually “zoomed out”) ---- */
/* No white overlay. We show more of the scene (houses smaller)
   and push the image DOWN so text sits well above the buildings. */
.hero{
  position:relative; text-align:center;
  background: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)),
  url('assets/hero-waterfront.png') center 140% / contain no-repeat;
  padding: 170px 0 340px;  /* top / bottom */
}
@media (min-width:1200px){
  /* slightly more downward shift on big screens */
  .hero{ background-position:center 140%; padding: 190px 0 380px; }
}
@media (max-width:700px){
  /* mobile still shows plenty of sky; houses smaller */
  .hero{ background-position:center 120%; padding: 150px 0 280px; }
}

.hero-content{ position:relative; z-index:1; }

/* Headline proportions as in mockup */
.hero-title {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 72px);  /* proportionally smaller than 48–96px */
  line-height: 1.06;
  letter-spacing: -0.25px;
  color: var(--ink);
}

/* Subline below headline */
.hero-subtitle{
  margin:0 auto 30px; max-width:900px;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height:1.5; color:var(--ink-2);
}

.hero-cta{ margin-top:6px; }

/* ---- Content sections ---- */
.section h2{
  margin:0 0 14px;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing:-.1px;
}
.section h3{
  margin:18px 0 6px;
  font-size: clamp(18px, 2.1vw, 24px);
}
.section p{ margin:0 0 12px; color:var(--ink-2); }

/* ---- Contact form ---- */
.contact-form{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:820px;
}
.contact-form label{ font-weight:700; color:var(--ink) }
.contact-form input,
.contact-form select,
.contact-form textarea{
  border:1px solid #d9e3ee; border-radius:10px; padding:12px;
  font:16px/1.5 var(--sans); color:var(--ink); background:#fff;
}
.contact-form textarea{ grid-column:1 / -1; }
.contact-form .btn{ grid-column:1 / -1; justify-self:start; }
@media (max-width:720px){ .contact-form{ grid-template-columns:1fr; } }

/* ---- Footer ---- */
.site-footer{ background:var(--white); border-top:1px solid var(--line); padding:28px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-logo{ height:36px; width:auto; display:block; }
.legal{ margin:0; color:var(--ink-2); font-size:.95rem; }