/* ===========================
   BG Group – Global Styles
   =========================== */

/* Reset / Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-offwhite);
  color: var(--color-navy);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Brand Color Variables */
:root {
  --color-white: #FFFFFF;
  --color-offwhite: #F8F7F4;
  --color-icewhite: #F4F7FA;
  --color-navy: #0C1C3C;
  --color-grey: #C8C9CC;
  --color-gold: #daa520;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
}

h1 {
  font-size: 3rem; /* ~48px */
  letter-spacing: -0.5px;
}

h2 {
  font-size: 2.25rem; /* ~36px */
}

h3 {
  font-size: 1.5rem; /* ~24px */
}

p {
  font-size: 1rem; /* ~16px */
  margin-bottom: 1rem;
  color: var(--color-navy);
}

/* Links */
a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-gold);
}

/* Buttons */
button, .btn {
  font-family: inherit;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.btn-secondary {
  background-color: var(--color-offwhite);
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
}

.btn-secondary:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* Utility Backgrounds */
.bg-offwhite { background-color: var(--color-offwhite); }
.bg-navy { background-color: var(--color-navy); color: var(--color-white); }
.bg-gold { background-color: var(--color-gold); color: var(--color-navy); }

/* Utility Text */
.text-navy { color: var(--color-navy); }
.text-gold { color: var(--color-gold); }
.text-grey { color: var(--color-grey); }

/* Gradient Fade Utilities */
.bg-ow-to-ice {
  background: linear-gradient(to bottom, var(--color-offwhite), var(--color-icewhite));
}

.bg-ice-to-ow {
  background: linear-gradient(to bottom, var(--color-icewhite), var(--color-offwhite));
}

/* ===========================
   Mobile tightening (What I do)
   =========================== */
@media (max-width: 480px){

  /* Reduce section padding */
  section{
    padding:48px 0;
  }

  /* Smaller, tighter section titles */
  .section-title{
    font-size:22px;
    margin-bottom:20px;
  }

  /* Compact cards */
  .card{
    padding:18px;
    box-shadow:0 6px 18px rgba(12,28,60,0.05);
  }

  /* Less vertical air between cards */
  .grid{
    gap:14px;
  }

  /* Slightly wider content feel */
  .container{
    padding:0 18px;
  }
}