/* ============================================================
   Skylands Solutions — one-page site styles
   Palette:
     forest green  #1F4225 (hover #2A5A33)
     lake blue     #1F4E8C (hover #16385F)
     sunrise gold  #D9A322 / #B07E14 (dark) / #E4B94B (on dark)
     off-white bg  #FAF8F2
     ink           #182430
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FAF8F2;
  color: #182430;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}

h1, h2, h3 { font-family: 'Lora', serif; font-weight: 600; color: #182430; text-wrap: pretty; }
h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.15; margin: 0 0 20px; }
h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 24px; }
h3 { font-size: 20px; margin: 0; }

a { color: #1F4E8C; text-decoration: none; }
a:hover { color: #16385F; text-decoration: underline; }

.container { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* --- Type helpers --- */
.eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow-blue { color: #1F4E8C; }
.eyebrow-gold { color: #B07E14; font-size: 14px; margin-bottom: 14px; }
.eyebrow-gold-light { color: #E4B94B; }
.lede { margin: 0 0 32px; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: #44515E; max-width: 58ch; text-wrap: pretty; }
.body-lg { font-size: 18px; line-height: 1.7; color: #33414F; margin: 0 0 18px; text-wrap: pretty; }
.body-lg:last-child { margin-bottom: 0; }
.mb-lg { margin-bottom: 40px; }

/* --- Buttons --- */
.btn { display: inline-block; font-weight: 600; font-size: 16px; padding: 13px 26px; border-radius: 6px; text-decoration: none; border: none; cursor: pointer; font-family: inherit; }
.btn:hover { text-decoration: none; }
.btn-primary { background: #1F4225; color: #FFFFFF; }
.btn-primary:hover { background: #2A5A33; color: #FFFFFF; }
.btn-secondary { background: #FFFFFF; color: #1F4225; border: 1px solid #C9CFBE; }
.btn-secondary:hover { border-color: #1F4225; color: #1F4225; }
.btn-sm { font-size: 15px; padding: 10px 20px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Header --- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250,248,242,0.94); backdrop-filter: blur(8px); border-bottom: 1px solid #E5E0D3; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 52px; width: 52px; object-fit: cover; mix-blend-mode: multiply; }
.brand-name { font-family: 'Lora', serif; font-weight: 600; font-size: 19px; color: #1F4225; letter-spacing: 0.02em; }
.brand-name-alt { color: #1F4E8C; }
.main-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.main-nav > a:not(.btn) { color: #33414F; font-weight: 500; font-size: 15.5px; }
.main-nav > a:not(.btn):hover { color: #1F4225; text-decoration: none; }

/* --- Hero --- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #F3F6EF 0%, #FAF8F2 100%); }
.hero-ridge { position: absolute; bottom: -1px; left: 0; width: 100%; height: 140px; display: block; }
.hero-inner { position: relative; padding-top: clamp(56px, 9vw, 110px); padding-bottom: clamp(90px, 12vw, 150px); display: flex; gap: 56px; align-items: center; flex-wrap: wrap; }
.hero-copy { flex: 1 1 480px; min-width: 300px; }
.hero-card-wrap { flex: 1 1 340px; min-width: 280px; display: flex; justify-content: center; }
.hero-card { background: #FFFFFF; border: 1px solid #E5E0D3; border-radius: 12px; box-shadow: 0 12px 32px rgba(24,36,48,0.08); padding: 30px 28px; width: 100%; max-width: 380px; }
.hero-logo { width: 200px; height: 200px; object-fit: cover; mix-blend-mode: multiply; display: block; margin: 0 auto 18px; }
.hero-pills { display: grid; gap: 10px; }
.pill { display: flex; align-items: center; gap: 12px; border-radius: 8px; padding: 11px 14px; font-weight: 600; font-size: 15px; color: #26323E; }
.pill-green { background: #F3F6EF; }
.pill-blue { background: #EFF3F8; }
.pill-gold { background: #FBF4E3; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: #1F4225; }
.dot-blue { background: #1F4E8C; }
.dot-gold { background: #D9A322; }

/* --- Sections --- */
.section { padding: clamp(64px, 8vw, 100px) 24px; }
.section-narrow { max-width: 820px; margin: 0 auto; }
.section-pad { padding-top: clamp(64px, 8vw, 100px); padding-bottom: clamp(64px, 8vw, 100px); }
.section-band { background: #F1F4EC; border-top: 1px solid #E5E0D3; border-bottom: 1px solid #E5E0D3; }

/* --- Cards --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.card { background: #FFFFFF; border: 1px solid #E5E0D3; border-radius: 10px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #44515E; text-wrap: pretty; }
.card-accent { width: 40px; height: 4px; border-radius: 2px; }
.accent-green { background: #1F4225; }
.accent-blue { background: #1F4E8C; }
.accent-gold { background: #D9A322; }

/* --- Contact --- */
.contact { background: #1F3527; position: relative; overflow: hidden; }
.contact-wave { position: absolute; top: 0; left: 0; width: 100%; height: 90px; display: block; opacity: 0.5; }
.contact-inner { position: relative; padding-top: clamp(64px, 8vw, 100px); padding-bottom: clamp(64px, 8vw, 100px); display: flex; gap: 56px; flex-wrap: wrap; }
.contact-copy { flex: 1 1 360px; min-width: 280px; }
.contact-copy h2 { color: #FFFFFF; margin-bottom: 18px; }
.contact-copy p { font-size: 17px; line-height: 1.7; color: #C6D4C9; margin: 0 0 24px; text-wrap: pretty; }
.contact-email { font-size: 16px; }
.contact-email a { color: #E4B94B; font-weight: 600; }
.contact-email a:hover { color: #F0CC70; }

.contact-form { flex: 1 1 420px; min-width: 300px; background: #FFFFFF; border-radius: 12px; padding: 30px 28px; display: grid; gap: 16px; align-self: start; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 14.5px; color: #26323E; }
.field input, .field textarea { border: 1px solid #C9CFBE; border-radius: 6px; padding: 11px 13px; font-size: 15.5px; font-family: inherit; color: #182430; background: #FFFFFF; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid #1F4E8C; outline-offset: 1px; border-color: #1F4E8C; }
.form-note { margin: 0; font-size: 13px; color: #6B7684; line-height: 1.5; }

/* --- Footer --- */
.site-footer { background: #16222E; color: #9DAAB8; }
.footer-inner { padding-top: 48px; padding-bottom: 36px; display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.footer-about { flex: 1 1 320px; min-width: 260px; }
.footer-brand { margin: 0 0 8px; font-family: 'Lora', serif; font-weight: 600; font-size: 19px; color: #FFFFFF; }
.footer-about p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.footer-fine { font-size: 13.5px !important; color: #74828F; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: #C2CDD8; font-size: 15px; }
.footer-nav a:hover { color: #FFFFFF; text-decoration: none; }
.footer-legal { border-top: 1px solid #26323E; }
.footer-legal .container { padding-top: 18px; padding-bottom: 18px; font-size: 13.5px; color: #74828F; }