/* ============================================================
   CUSTOM FONTS
   ============================================================ */
@font-face {
  font-family: 'Alta';
  src: url('../Alta_subset.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   ROOT & RESET
   ============================================================ */
:root {
  --teal:       #046a81;
  --teal-dark:  #034f61;
  --teal-mid:   #0a8aa6;
  --teal-light: #e4f2f6;
  --teal-glow:  rgba(4,106,129,0.18);
  --mint:       #3ecfaa;
  --charcoal:   #111b1e;
  --charcoal2:  #1a2730;
  --slate:      #4a5c63;
  --muted:      #7a9099;
  --border:     #ccdde2;
  --off-white:  #f5f8f9;
  --white:      #ffffff;
  --font:       'Livvic', sans-serif;
  --ease-out-expo: cubic-bezier(0.19,1,0.22,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--charcoal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display:block; max-width:100%; }
button { font-family: var(--font); cursor:pointer; border:none; }
a { text-decoration:none; color:inherit; }

/* ============================================================
   NOISE OVERLAY (grain texture)
   ============================================================ */
body::after {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}