:root{
  --navy:#11284a; --bg:#f4f5f7; --panel:#ffffff; --border:#e6e6ea;
  --text:#0d1422; --gold:#c8a862; --maxw:1140px;
  --header-h: 136px; --footer-h: 44px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:18px; overflow-x:hidden;}  /* prevent sideways scroll anywhere */
body{background:var(--bg);color:var(--text);font-family:"Georgia","Times New Roman",serif;line-height:1.7;padding-bottom:calc(var(--footer-h) + 8px)}
body.no-scroll{overflow:hidden} /* desktop default */

/* Header */
.header{background:#fff;border-bottom:2px solid var(--gold);position:sticky;top:0;z-index:20}
.header .wrap{max-width:var(--maxw);margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:16px;min-height:var(--header-h)}
.header img{height:124px}
.header nav{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.header nav a{color:#2b3a59;text-decoration:none;white-space:nowrap}
.header nav a[aria-current="page"]{text-decoration:underline}
.contact-top{margin-left:12px;text-decoration:underline;color:#2b3a59;white-space:nowrap}

/* Hero */
.hero.image{
  background-size:cover;background-position:center center;
  height:calc(100svh - var(--header-h) - var(--footer-h));
  display:flex;align-items:center;justify-content:center;position:relative
}
.hero.image::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35))}
.hero .inner{position:relative;z-index:1;max-width:980px;text-align:center;padding:0 16px}
.hero .inner h1,.hero .inner h2,.hero .inner p{color:#fff}

/* Dark overlay + section titles */
.hero.image.dark::before{background:linear-gradient(180deg,rgba(0,0,0,.68),rgba(0,0,0,.68))}
.hero.image.emphasis h1{font-size:clamp(2.4rem, 5.8vw, 3.8rem)}

/* Split layout for secondary pages (no scroll on desktop) */
.hero.image.split{height:42svh}
.below-panel{
  height:calc(100svh - var(--header-h) - var(--footer-h) - 42svh);
  background:#f4f5f7;color:var(--text);display:flex;align-items:center;justify-content:center;padding:0 20px
}
.below-panel .inner{max-width:980px;text-align:center}
.below-panel h2{color:#11284a;margin:0 0 8px;font-size:1.2rem}
.below-panel p{color:#0d1422;margin:0 auto 0;font-size:1rem;line-height:1.6}

/* Footer */
.footer{position:fixed;bottom:0;left:0;right:0;background:#0d1326;color:#c8d1e6;border-top:2px solid var(--gold);font-size:0.56rem}
.footer .wrap{max-width:var(--maxw);margin:0 auto;padding:10px 18px}

/* ==== PHONES (max 768px width) ==== */
@media (max-width: 768px) {
  body{overflow-y:auto; padding-bottom:calc(var(--footer-h) + 32px);} /* always enough space above footer */
  :root { --header-h: 112px; }
  .header img { height: 64px; }
  .header .wrap{flex-direction:column;align-items:center;gap:8px} /* stack logo + nav + contact */
  .header nav{margin-left:0;gap:10px;justify-content:center;flex-wrap:wrap;width:100%}
  .header nav a{white-space:nowrap;font-size:0.95rem}
  .contact-top{margin:0;align-self:center;font-size:0.95rem}
  .hero.image{min-height:calc(100svh - var(--header-h) - var(--footer-h));height:auto}
  .hero.image.split{height:auto;min-height:40svh}
  .below-panel{height:auto;padding:20px 16px 96px 16px} /* more bottom space to avoid overlay by footer */
  .below-panel p{font-size:1.05rem}
  /* absolutely kill any stray sideways scroll on phones */
  html, body { overflow-x: hidden; }
}

/* Tiny phones (<=360px) */
@media (max-width: 360px){
  .header nav a, .contact-top{font-size:0.88rem}
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* Lock mobile initial zoom & keep smooth scrolling */
@media (max-width:768px){
  html{scroll-behavior:smooth;}
}

/* --- extra hardening for consistent phone rendering --- */
html{-ms-text-size-adjust:100%!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;}
@media (max-width:768px){
  html,body{overscroll-behavior-x:none; touch-action:pan-y; } /* vertical only */
}