/* ==========================================================================
   Summit Mountain Lights — brand stylesheet
   Palette sampled from Logo2.png. See ../brand.md for the full guide.
   Evergreen #152A22 · Antique Gold #A88742 · Gold Light #C9A55E
   Snowfield #F7F5F0 · Pine #2C4A3C
   ========================================================================== */

:root {
  --evergreen:  #152A22;
  --pine:       #2C4A3C;
  --gold:       #A88742;
  --gold-light: #C9A55E;
  --snowfield:  #F7F5F0;
  --white:      #FFFFFF;
  --slate:      #475467;
  --error:      #B42318;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max-w: 1200px;
  --r-btn: 4px;
  --r-card: 8px;
  --shadow: 0 4px 16px rgba(21, 42, 34, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--snowfield);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, .display {
  font-family: var(--font-display);
  color: var(--evergreen);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}
.display { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }
h2 { font-size: clamp(1.65rem, 3.5vw, 2.125rem); }
h3 {
  font-family: var(--font-body);
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--evergreen);
  line-height: 1.35;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1.15em; }
a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--evergreen); }

/* ── Eyebrow: the logo's signature tracked-caps move ─────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.eyebrow::before {
  content: "";
  width: 40px; height: 1px;
  background: var(--gold);
  flex: none;
}
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after {
  content: "";
  width: 40px; height: 1px;
  background: var(--gold);
  flex: none;
}
/* On dark grounds, gold at this size is ornament-adjacent — lighten for AA. */
.section-dark .eyebrow { color: var(--gold-light); }
.section-dark .eyebrow::before,
.section-dark .eyebrow::after { background: var(--gold); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section-sm { padding: 56px 0; }
.section-dark {
  background: var(--evergreen);
  color: var(--snowfield);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark .display { color: var(--snowfield); }
.section-dark a { color: var(--gold-light); }
.section-white { background: var(--white); }
.center { text-align: center; }
.lead { font-size: 1.125rem; }
.measure { max-width: 68ch; }
.measure.center { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 28px; }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 16px 30px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* Primary — Snowfield on Evergreen, 13.90:1 */
.btn-primary { background: var(--evergreen); color: var(--snowfield); }
.btn-primary:hover { background: var(--pine); color: var(--snowfield); }
/* Secondary — Evergreen on Gold Light. 6.51:1, passes AA at every size.
   Antique Gold as the fill would be 4.48:1 (large-text only) and visibly muddy. */
.btn-secondary { background: var(--gold-light); color: var(--evergreen); font-weight: 600; }
.btn-secondary:hover { background: var(--gold); color: var(--evergreen); }
/* Ghost on dark — Gold Light on Evergreen, 6.51:1 */
.btn-ghost { background: transparent; color: var(--gold-light); border-color: var(--gold); }
.btn-ghost:hover { background: var(--gold); color: var(--evergreen); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.centered { justify-content: center; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--evergreen);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(168, 135, 66, 0.35);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 24px;
  max-width: var(--max-w); margin: 0 auto;
}
.nav-logo { display: flex; align-items: center; flex: none; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: none; gap: 28px; align-items: center; }
.nav-links a {
  color: var(--snowfield); text-decoration: none;
  font-size: 0.9375rem; font-weight: 500;
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--gold-light); border-bottom-color: var(--gold);
}
.nav-cta { display: flex; align-items: center; gap: 16px; flex: none; }
.nav-phone {
  color: var(--gold-light); text-decoration: none;
  font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
}
.nav-phone:hover { color: var(--gold-light); text-decoration: underline; }
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px; margin: -8px -8px -8px 0;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--snowfield); }
@media (min-width: 940px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}
.nav-links.open {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--evergreen); padding: 12px 24px 20px;
  border-bottom: 1px solid rgba(168,135,66,.35);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  background: var(--evergreen);
  color: var(--snowfield);
  padding: 56px 0 64px;
  position: relative;
}
@media (min-width: 960px) { .hero { padding: 88px 0 96px; } }
.hero .display { color: var(--snowfield); }
.hero p { color: rgba(247, 245, 240, 0.86); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

/* Substantiable trust markers — fills the hero column beside the tall form.
   Every item here must be true per ../services.md. */
.hero-trust { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 11px; }
.hero-trust li {
  position: relative; padding-left: 26px;
  font-size: 0.9375rem; color: rgba(247, 245, 240, 0.9);
}
.hero-trust li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 14px; height: 1px; background: var(--gold);
}

/* ── Photo hero ──────────────────────────────────────────────────────────── */
.hero-photo { position: relative; overflow: hidden; }
.hero-photo .wrap { position: relative; z-index: 2; }
.bg-media { position: absolute; inset: 0; z-index: 0; }
.bg-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%; }
/* Evergreen scrim, horizontal only. The hero text is Snowfield and sits on the left, so
   that side stays dark enough for AA while the right drops away far enough to actually
   show the photograph. A second vertical gradient on top of this pushed the combined
   opacity past .97 and rendered the image as a black field. */
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Light enough that the photograph actually reads across the whole hero, including
     behind the headline and around the form card. Text legibility is held by the
     text-shadow below rather than by drowning the image. */
  background: linear-gradient(90deg,
    rgba(21,42,34,.80) 0%,
    rgba(21,42,34,.68) 34%,
    rgba(21,42,34,.40) 68%,
    rgba(21,42,34,.24) 100%);
}
/* Local protection for hero copy. A bright bulb directly behind a glyph can drop local
   contrast well below the section average, and a scrim heavy enough to prevent that
   hides the photo. A shadow fixes the glyph edge without touching the image. */
.hero-photo .eyebrow,
.hero-photo .display,
.hero-photo .lead,
.hero-photo .hero-trust li {
  text-shadow:
    0 0 2px rgba(11,22,18,.95),
    0 1px 4px rgba(11,22,18,.92),
    0 2px 16px rgba(11,22,18,.75);
}
@media (max-width: 959px) {
  /* Text spans the full width here, so the scrim carries more of the load than on
     desktop — but not so much that the photo disappears. Lighter at the top where the
     roofline reads, heavier lower down behind the body copy and trust list. */
  .hero-photo::after {
    background: linear-gradient(180deg,
      rgba(21,42,34,.62) 0%,
      rgba(21,42,34,.74) 35%,
      rgba(21,42,34,.82) 100%);
  }
  /* Recentre the crop: the 72% offset is tuned for the desktop two-column split. */
  .hero-photo .bg-media img { object-position: 58% 42%; }
}

/* ── Photo-backed section ───────────────────────────────────────────────── */
.section-photo { position: relative; overflow: hidden; background: var(--evergreen); }
.section-photo > .wrap { position: relative; z-index: 2; }
.section-photo .bg-media img { object-position: center 50%; }
.section-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(21,42,34,.86) 0%, rgba(21,42,34,.80) 50%, rgba(21,42,34,.88) 100%);
}
.section-photo h2, .section-photo h3, .section-photo .display { color: var(--snowfield); }
.section-photo > .wrap > .eyebrow { color: var(--gold-light); }
.section-photo > .wrap > .lead, .section-photo > .wrap > p { color: rgba(247,245,240,.88); }
/* Cards stay light so the answers read as cleanly as they do on a plain section. */
.section-photo .card { background: var(--white); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.section-photo .card h3 { color: var(--evergreen); }
.section-photo .card p { color: var(--slate); }

/* ── Images ──────────────────────────────────────────────────────────────── */
.figure {
  width: 100%; border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(21,42,34,.16);
  border: 1px solid rgba(168,135,66,.28);
}
.card-media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-media > img { width: 100%; height: 210px; object-fit: cover; }
.card-media .card-body { padding: 26px 30px 30px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid rgba(21, 42, 34, 0.09);
  border-radius: var(--r-card);
  padding: 30px;
  box-shadow: var(--shadow);
}
.section-dark .card {
  background: var(--pine);
  border-color: rgba(168, 135, 66, 0.28);
  box-shadow: none;
  color: rgba(247, 245, 240, 0.88);
}
.card ul { margin: 0; padding-left: 0; list-style: none; }
.card ul li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 0.9375rem;
}
.card ul li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 10px; height: 1px; background: var(--gold);
}
.card-num {
  font-family: var(--font-display);
  font-size: 2.25rem; color: var(--gold); line-height: 1; margin-bottom: 10px;
}

/* Phone number. Cormorant renders old-style figures — the digits sit at varying
   heights, which reads as decorative rather than as a number you can dial. Inter has
   lining, tabular figures. */
.phone-lg {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0 0 20px;
}
.phone-lg a { color: var(--evergreen); text-decoration: none; }
.phone-lg a:hover { color: var(--pine); text-decoration: underline; text-underline-offset: 4px; }

/* ── Divider ────────────────────────────────────────────────────────────── */
.rule { border: 0; height: 1px; background: rgba(168,135,66,.4); margin: 0; }
.rule-tapered {
  border: 0; height: 1px; width: 72px; margin: 28px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-card {
  background: var(--white); border-radius: var(--r-card);
  padding: 34px; box-shadow: 0 10px 34px rgba(21,42,34,.18);
}
.form-card h2, .form-card h3 { color: var(--evergreen); }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--evergreen); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--evergreen); background: var(--snowfield);
  border: 1px solid rgba(21,42,34,.18); border-radius: var(--r-btn);
  padding: 12px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px;
  border-color: var(--gold); background: var(--white);
}
.field-row { display: grid; gap: 16px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field .hint { font-size: 0.8125rem; color: var(--slate); margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-status { margin-top: 14px; font-size: 0.9375rem; font-weight: 500; min-height: 1.4em; }
.form-status.ok { color: var(--pine); }
.form-status.err { color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Blog ───────────────────────────────────────────────────────────────── */
.post-list { display: grid; gap: 24px; }
@media (min-width: 800px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .post-list { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.post-card:hover { border-color: var(--gold); }
.post-card .cat {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.post-card h3 { margin-bottom: 8px; }
.post-card p { font-size: 0.9375rem; margin-bottom: 14px; }
.post-card .date { font-size: 0.8125rem; color: var(--slate); margin-top: auto; }
.post-body { max-width: 74ch; margin: 0 auto; }
.post-body > .eyebrow { justify-content: flex-start; }
.post-body h1 { margin-bottom: .25em; }
.post-body > .date { color: var(--slate); font-size: .9375rem; margin-bottom: 1.5em; }
/* Hero image on a post. Stock photography — never captioned as our own work. */
.post-hero {
  margin: 0 0 2em; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid rgba(168,135,66,.28);
  box-shadow: 0 10px 30px rgba(21,42,34,.14);
}
.post-hero img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; display: block; }
.post-body h2 { margin-top: 1.6em; }
.post-body h3 { margin-top: 1.4em; }
.post-body ul, .post-body ol { padding-left: 1.25em; }
.post-body li { margin-bottom: 0.5em; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--evergreen); color: rgba(247,245,240,.78); padding: 64px 0 28px; }
.site-footer h4 {
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-light); margin: 0 0 14px;
}
.site-footer a { color: rgba(247,245,240,.78); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; font-size: 0.9375rem; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-logo img { height: 34px; width: auto; margin-bottom: 18px; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid rgba(168,135,66,.3);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 0.875rem; color: rgba(247,245,240,.6);
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--evergreen);
  padding: 10px 18px; border-radius: var(--r-btn); font-weight: 600; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }