@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

* {
  cursor: default;
}

a, button, [role="button"], summary, .cursor-pointer {
  cursor: pointer;
}

html {
  scroll-padding-top: 56px;
  font-size: 17px;
}

/* hero parallax photo — transform is updated continuously on scroll,
   so will-change is legitimate here (unlike a permanently-static element) */
[data-parallax] {
  will-change: transform;
}

body {
  font-family: 'Inter', ui-sans-serif, sans-serif;
  background-color: #f1f4f7;
  color: #055089;
  -webkit-font-smoothing: antialiased;
}

/* section label square marker */
.label-sq::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #055089;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.label-sq-vellum::before {
  background-color: #f1f4f7;
}

/* branded navy tint over photography — ties imagery to the logo palette
   (flat low-opacity overlay, no mix-blend-mode: blend compositing is expensive
   to repaint and was causing scroll jank on pages with many photos) */
.rounded-img,
.rounded-full {
  position: relative;
}
.rounded-img::after,
.rounded-full::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #055089;
  opacity: 0.08;
  pointer-events: none;
}

/* WhatsApp floating button — pulse is a ::before layer, clipped to the button's
   own circle by its overflow:hidden so it never spills a square corner */
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
.wa-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #25D366;
  animation: wa-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}

/* mobile nav */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.open {
  max-height: 1200px;
  overflow-y: auto;
}

/* give every Tailwind color/transform transition the same premium easing curve
   instead of the flat default — applies site-wide with zero HTML changes */
.transition-colors,
.transition-transform,
.transition-all {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* focus states for keyboard nav */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1692cd;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}