html{ scroll-behavior: smooth; }
:root{
  --bg: #f6efe8;         /* light beige background like your design */
  --gap: 22px;
  --radius-lg: 22px;
  --radius-md: 18px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:#111;
}

.page{
  min-height:100%;
  padding: 22px 12px 28px;
}

.container{
  width: min(1100px, 96vw);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 22px;
}

/* Make all images scale nicely */
img{
  display:block;
  max-width:100%;
  height:auto;
}

/* Banner */
.banner{
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.banner img{
  width:100%;
}

/* Rows */
.row{
  display:flex;
  gap: var(--gap);
  align-items:center;
  justify-content:space-between;
}

/* Image buttons (top + bottom) */
.img-btn{
  display:block;
  flex: 1 1 0;
  border-radius: 999px;
  overflow:hidden;
  transform: translateZ(0); /* smoother animation */
  transition: transform .18s ease, filter .18s ease;
}
.img-btn img{
  width:100%;
}

/* Cards */
.img-card{
  display:block;
  flex: 1 1 0;
  border-radius: var(--radius-md);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}
.img-card img{ width:100%; }

/* Hover animation (desktop) */
@media (hover:hover){
  .img-btn:hover,
  .img-card:hover{
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
  }
  .img-btn:active,
  .img-card:active{
    transform: translateY(-1px) scale(1.01);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.14));
  }
}

/* Focus for accessibility */
.img-btn:focus-visible,
.img-card:focus-visible{
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 4px;
}

/* Footer shell like your blue rounded area */
.footerShell{
  margin-top: 6px;
  padding: 20px 18px 16px;
  border-radius: 38px;
  background: #0b1b64; /* deep blue */
}

/* Contact row inside blue area */
.row--contact{
  gap: 18px;
  margin-bottom: 10px;
}

/* Footer text */
.footerText{
  text-align:center;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  line-height: 1.35;
}

/* RESPONSIVE: stack columns on mobile */
@media (max-width: 820px){
  .row{
    flex-direction:column;
    align-items:stretch;
  }
  .img-btn, .img-card{
    flex: unset;
  }
  .footerShell{
    border-radius: 28px;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  :root{ --gap: 14px; }
  .page{ padding: 16px 10px 22px; }
  .footerText{ font-size: 11px; }
}


#call-section{ scroll-margin-top: 80px; }