/* Avaersa Blue Horizon — Design B | Boxed Layout V3
   Keeps the full website within a centered, premium frame.
   Desktop/tablet show left and right outer margins; phones use the full available width.
*/
:root { --bh-frame-width: 1500px; --bh-frame-gutter: max(18px, 2.1vw); }
html {
  background: #eef3f9;
  min-height: 100%;
}
body {
  /* Keep header, hero, sections, and footer together inside one centered frame. */
  width: min(var(--bh-frame-width), calc(100% - max(36px, 4.2vw)));
  margin: 18px auto 42px;
  min-height: calc(100vh - 60px);
  background: #fff;
  border: 1px solid #e0e9f4;
  border-radius: 10px;
  box-shadow: 0 25px 80px rgba(15, 52, 94, .11), 0 3px 18px rgba(15, 52, 94, .045);
  overflow: clip;
}
.site-header { border-radius: 10px 10px 0 0; }
/* Keep decorative backgrounds and photographic hero within the frame. */
.tm-hero, .tm-spotlight, .inner-hero, .footer, .tm-stats-strip { max-width: 100%; }
@media (max-width: 1040px) {
  :root { --bh-frame-gutter: 16px; }
  body { margin-top: 14px; margin-bottom: 24px; }
}
@media (max-width: 740px) {
  /* Keep a modest frame margin on tablets. */
  :root { --bh-frame-gutter: 10px; }
  body { margin-top: 10px; margin-bottom: 16px; border-radius: 8px; }
  .site-header { border-radius: 8px 8px 0 0; }
}
@media (max-width: 520px) {
  /* Full-width on small screens prevents content getting cramped. */
  html { background: #fff; }
  body { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .site-header { border-radius: 0; }
}