/* ==========================================================================
   MOUNTAIN MOVERS — DESIGN SYSTEM
   Palette: bedrock navy + summit gold, built around the brand's ridgeline mark
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Work+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- Core palette --- */
  --navy-950:#070f1f;
  --navy-900:#0b1f3a;   /* primary background */
  --navy-800:#122a4d;   /* panels / cards on dark */
  --navy-700:#1c3a63;   /* borders on dark, hover fills */
  --navy-600:#2c4d7c;   /* muted dark accents */

  --gold-600:#a97f1a;
  --gold-500:#c9a227;   /* primary gold */
  --gold-400:#dcb93f;   /* hover gold */
  --gold-300:#eccf74;   /* highlight / light gold */
  --gold-100:#f7ecc9;   /* pale gold wash */

  --cream:#f7f4ec;      /* light section background */
  --paper:#fffdf7;      /* card background on light */
  --ink:#0f1626;        /* body text on light */
  --ink-soft:#3c4657;   /* secondary text on light */
  --slate:#7c88a0;      /* muted text on dark */
  --line-light:#e4ddc9; /* hairline on light */
  --line-dark:rgba(255,255,255,0.12); /* hairline on dark */
  --white:#ffffff;

  /* --- Type --- */
  --font-display:'Big Shoulders Display', sans-serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'Space Mono', monospace;

  /* --- Shape / rhythm --- */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --container:1240px;
  --section-pad:clamp(64px, 9vw, 128px);

  --shadow-card: 0 20px 40px -20px rgba(7,15,31,0.35);
  --shadow-pop: 0 30px 60px -24px rgba(7,15,31,0.55);
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:0.005em;}

/* --- Focus visibility --- */
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* --- Layout helpers --- */
.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 40px);
}
.section{padding-block:var(--section-pad);position:relative;}
.section--dark{background:var(--navy-900);color:var(--white);}
.section--panel{background:var(--navy-800);color:var(--white);}
.section--cream{background:var(--cream);}
.section--paper{background:var(--paper);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-600);
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  margin-bottom:16px;
}
.section--dark .eyebrow,.section--panel .eyebrow{color:var(--gold-300);}
.eyebrow::before{
  content:'';
  width:22px;height:2px;background:var(--gold-500);
  display:inline-block;
}

.h-xl{font-size:clamp(40px, 5.6vw, 76px);}
.h-lg{font-size:clamp(32px, 4vw, 52px);}
.h-md{font-size:clamp(24px, 2.6vw, 34px);}
.h-sm{font-size:clamp(19px, 1.6vw, 23px);}

.lede{
  font-size:clamp(16px, 1.4vw, 19px);
  color:var(--ink-soft);
  max-width:56ch;
}
.section--dark .lede,.section--panel .lede{color:#c3cbdc;}

.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head.center{margin-inline:auto;text-align:center;}

/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  border-radius:3px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active{transform:translateY(1px);}

.btn--gold{
  background:linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color:var(--navy-950);
  box-shadow:0 12px 24px -10px rgba(201,162,39,0.55);
}
.btn--gold:hover{box-shadow:0 16px 30px -10px rgba(201,162,39,0.7);transform:translateY(-1px);}

.btn--ghost-dark{
  border:1.5px solid rgba(255,255,255,0.35);
  color:var(--white);
}
.btn--ghost-dark:hover{border-color:var(--gold-400);color:var(--gold-300);}

.btn--ghost-light{
  border:1.5px solid var(--navy-900);
  color:var(--navy-900);
}
.btn--ghost-light:hover{background:var(--navy-900);color:var(--white);}

.btn--block{width:100%;}
.btn--lg{padding:18px 32px;font-size:14px;}

/* --- Ridgeline divider (signature motif) ---
   A silhouette echoing the logo's peaks, used to seam sections together. */
.ridge{
  display:block;
  width:100%;
  height:clamp(28px, 5vw, 64px);
  line-height:0;
}
.ridge--to-dark{color:var(--navy-900);}
.ridge--to-cream{color:var(--cream);}
.ridge--to-panel{color:var(--navy-800);}
.ridge--to-paper{color:var(--paper);}
.ridge svg{width:100%;height:100%;display:block;}
.ridge path{fill:currentColor;}

/* --- Container queries fallback widths --- */
@media (max-width:960px){
  :root{--section-pad:clamp(48px, 10vw, 88px);}
}