/*
 * ============================================================
 *  BASE.CSS — Reset, Global Typography & Utility Classes
 * ============================================================
 *  Applies a minimal reset and sets sensible defaults for
 *  all elements. Utility classes (.wrap, .btn, .eyebrow, etc.)
 *  are defined here so they can be reused across all sections.
 *
 *  ADDING UTILITIES:
 *  Put any new general-purpose helper class here (e.g. a
 *  .visually-hidden or .text-gold class), NOT inside a section
 *  file, so it stays reusable.
 * ============================================================
 */


/* ── Reset ──────────────────────────────────────────────── */

*     { margin: 0; padding: 0; box-sizing: border-box; }
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }

::selection {
  background: var(--gold);
  color: #fff;
}


/* ── Scroll behaviour ────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* offset for sticky nav height */
}


/* ── Body defaults ───────────────────────────────────────── */

body {
  font-family:              var(--font-body);
  background:               var(--bg);
  color:                    var(--ink);
  font-size:                17px;
  line-height:              1.65;
  -webkit-font-smoothing:   antialiased;
}


/* ── Layout wrapper ──────────────────────────────────────── */

/* .wrap constrains content to --max width and adds side padding */
.wrap {
  max-width: var(--max);
  margin:    0 auto;
  padding:   0 28px;
}


/* ── Heading base styles ─────────────────────────────────── */

h1, h2, h3, h4 {
  font-family:  var(--font-head);
  font-weight:  700;
  line-height:  1.18;
  color:        var(--navy);
}


/* ── Eyebrow label (small uppercase tag above headings) ──── */

.eyebrow {
  font-family:    var(--font-head);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  margin-bottom:  14px;
  display:        block;
}


/* ── Section title & lead paragraph ─────────────────────── */

.sec-title {
  font-size:     clamp(28px, 3.4vw, 40px); /* fluid — shrinks on mobile */
  margin-bottom: 18px;
}

.sec-lead {
  font-size:  18px;
  color:      var(--ink-mid);
  max-width:  680px;
}


/* ── Center-aligned head block variant ───────────────────── */

.center             { text-align: center; }
.center .sec-lead   { margin: 0 auto; }


/* ── Head block spacing ──────────────────────────────────── */
/* Wrap eyebrow + sec-title + sec-lead together as .head-block */

.head-block { margin-bottom: 56px; }


/* ── Section default padding ─────────────────────────────── */
/* Override per-section if different padding is needed       */

section { padding: 96px 0; }


/* ── Buttons ─────────────────────────────────────────────── */
/*
 * Base .btn class — shared by all button variants.
 * Add a variant modifier class alongside it:
 *   .btn-gold       gold filled (primary CTA)
 *   .btn-navy       navy filled (secondary CTA)
 *   .btn-outline-w  white outline (on dark/image backgrounds)
 *   .btn-outline    navy outline (on light backgrounds)
 */

.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            9px;
  font-family:    var(--font-head);
  font-weight:    600;
  font-size:      15.5px;
  letter-spacing: .01em;
  padding:        15px 30px;
  border-radius:  6px;
  cursor:         pointer;
  border:         2px solid transparent;
  transition:     background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.btn-gold {
  background: var(--gold);
  color: #fff;
}
.btn-gold:hover {
  background:  var(--gold-dark);
  box-shadow:  0 6px 18px rgba(217,164,55,.35);
}

.btn-navy {
  background: var(--navy);
  color: #fff;
}
.btn-navy:hover { background: #143A63; }

.btn-outline-w {
  border-color: rgba(255,255,255,.6);
  color:        #fff;
  background:   transparent;
}
.btn-outline-w:hover {
  background:   #fff;
  color:        var(--navy);
  border-color: #fff;
}

.btn-outline {
  border-color: var(--navy);
  color:        var(--navy);
  background:   transparent;
}
.btn-outline:hover {
  background: var(--navy);
  color:      #fff;
}


/* ── Two-column layout grid ──────────────────────────────── */

.two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   70px;
  align-items:           center;
}


/* ── Image frame with decorative border offset ───────────── */

.two-col .img-frame { position: relative; }

.img-frame img {
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  width:         100%;
  height:        440px;
  object-fit:    cover;
}

/* Decorative offset border behind the image */
.img-frame::after {
  content:       "";
  position:      absolute;
  top:           22px;
  left:          22px;
  right:         -22px;
  bottom:        -22px;
  border:        2px solid var(--gold);
  border-radius: var(--radius);
  z-index:       -1;
}


/* ── Fade-in reveal animation ────────────────────────────── */
/*
 * Elements with .fade start invisible and slide up slightly.
 * The IntersectionObserver in js/animations.js adds .in
 * when the element enters the viewport.
 * Reduced-motion override is in responsive.css.
 */

.fade {
  opacity:    0;
  transform:  translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade.in {
  opacity:   1;
  transform: none;
}