/* Concept 07 — "Mountain Ready" · black-and-white, large-photography agency
   pitch. Light paper body, black header/footer, duotone photo placeholders.
   Green is reserved for "ready" status markers — never a background.
   Display: Saira 800/900. Body: Inter. Signature: the zone selector. */

body { background: var(--js-paper); color: var(--js-ink); }
h1,h2,h3 { font-family: Saira, Inter, sans-serif; font-weight: 800; letter-spacing: -0.01em; line-height: var(--lh-tight); color: var(--js-ink); }

/* ---- topbar ---- */
.topbar { background: var(--js-black); border-bottom: 1px solid #000; font-size: .8rem; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 7px; color: var(--js-gray-light); }
.topbar-lic { color: #fff; font-weight: 700; letter-spacing: .02em; }
.topbar-lic strong { color: var(--js-green-glow); }
@media (max-width: 600px){ .topbar-serving { display: none; } }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--js-black); border-bottom: 3px solid var(--js-green-logo); }
.header-in { display: flex; align-items: center; gap: 20px; padding-block: 12px; }
.brand img { width: clamp(150px, 20vw, 190px); height: auto; }
.mainnav { display: flex; gap: clamp(14px, 2vw, 26px); margin-left: auto; }
.mainnav a { font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: #d6d6d6; padding: 6px 2px; }
.mainnav a:hover { color: var(--js-green-glow); }
@media (max-width: 900px){ .mainnav { display: none; } }
@media (max-width: 440px){ .header-cta { padding: 12px 16px; } }

/* ---- hero: big black & white photo, text overlay ---- */
.hero { background: #0c0c0c; padding-block: clamp(0, 0, 0); }
.hero-in { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; align-items: stretch; min-height: clamp(520px, 86vh, 760px); }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: clamp(32px,6vw,72px) clamp(20px,5vw,56px); background: var(--js-black); color: #fff; }
.hero-eyebrow { color: var(--js-green-glow); margin-bottom: 16px; }
.hero h1 { font-size: var(--fs-h1); font-weight: 900; margin-bottom: 18px; color: #fff; }
.hero-lead { color: #cfcfcf; font-size: var(--fs-lg); max-width: 50ch; margin-bottom: 26px; }
.ready-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.ready-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: #fff;
  border: 1.5px solid #3a3a3a; border-radius: var(--r-pill); padding: 7px 14px 7px 10px; }
.ready-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--js-green-glow); box-shadow: 0 0 0 3px rgba(34,179,58,.22); flex: none; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-lg { padding: 17px 26px; font-size: 1.02rem; }
.hero-ghost { color: #fff; }
.hero-photo { position: relative; z-index: 1; margin: 0; min-height: 260px; border-radius: 0; }
.hero-photo .cap { position: absolute; left: 0; bottom: 0; }
@media (max-width: 860px){
  .hero-in { grid-template-columns: 1fr; min-height: auto; }
  .hero-photo { order: -1; min-height: 240px; }
}

/* duotone "black & white photography" placeholder look (overrides base .ph-photo) */
.ph-photo.bw { background:
  linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55)),
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
  linear-gradient(135deg, #3a3a3a, #111 70%);
  color: #eee; filter: grayscale(1) contrast(1.05); }
.ph-photo.bw .cap { background: rgba(0,0,0,.72); color: #fff; }
/* zone tint overlays the hero photo once a zone is chosen — still b/w, just a mood shift */
.hero-photo[data-zone="valley"] { filter: none; }
.hero-photo[data-zone="valley"].ph-photo.bw { background:
  linear-gradient(180deg, rgba(0,107,10,.12), rgba(0,0,0,.6)),
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
  linear-gradient(135deg, #3a3a3a, #111 70%); }
.hero-photo[data-zone="foothills"].ph-photo.bw { background:
  linear-gradient(180deg, rgba(34,179,58,.10), rgba(0,0,0,.6)),
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
  linear-gradient(135deg, #3a3a3a, #111 70%); }
.hero-photo[data-zone="sierra"].ph-photo.bw { background:
  linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.65)),
  repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 14px),
  linear-gradient(135deg, #4a4a4a, #111 70%); }

/* ---- section furniture ---- */
.section-eyebrow { color: var(--js-green); margin-bottom: 12px; }
.section-title { font-size: var(--fs-h2); margin-bottom: 10px; }
.section-sub { color: var(--js-gray); max-width: 62ch; margin-bottom: 30px; }

/* ---- zone selector (signature) ---- */
.zone { background: var(--js-paper); }
.zone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
.zone-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--js-white); border: 2px solid var(--js-stone); border-radius: var(--r-lg); padding: 24px 22px 26px;
  text-align: left; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.zone-tile:hover { border-color: var(--js-green); transform: translateY(-3px); box-shadow: var(--sh-lg); }
.zone-tile .zone-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md);
  background: rgba(0,107,10,.08); color: var(--js-green); margin-bottom: 10px; }
.zone-tile .zone-ico svg { width: 28px; height: 28px; }
.zone-name { font-family: Saira, sans-serif; font-weight: 800; font-size: 1.3rem; }
.zone-towns { color: var(--js-gray); font-size: .92rem; font-weight: 600; }
.zone-ready-badge { position: absolute; top: 16px; right: 16px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--js-green); background: rgba(0,107,10,.08); padding: 4px 10px; border-radius: var(--r-pill);
  opacity: 0; transform: translateY(-3px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.zone-tile[aria-pressed="true"] { border-color: var(--js-green); background: #f3f9f2; box-shadow: 0 0 0 3px rgba(0,107,10,.12); }
.zone-tile[aria-pressed="true"] .zone-ready-badge { opacity: 1; transform: translateY(0); }
.zone-tile[aria-pressed="true"] .zone-ico { background: var(--js-green); color: #fff; }
@media (max-width: 760px){ .zone-grid { grid-template-columns: 1fr; } }
.zone-live { font-weight: 600; color: var(--js-ink); margin-bottom: 8px; min-height: 1.6em; }
.zone-note { margin-top: 4px; }

/* ---- services (light, on paper) ---- */
.services { background: var(--js-white); }
.services-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px){ .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .services-grid { grid-template-columns: 1fr; } }
.svc-card { display: block; background: var(--js-paper); border: 1px solid var(--js-stone); border-radius: var(--r-lg); padding: 26px 24px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.svc-card:hover { transform: translateY(-4px); border-color: var(--js-green); box-shadow: var(--sh-lg); }
.svc-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: rgba(0,107,10,.1); color: var(--js-green); margin-bottom: 16px; }
.svc-ico svg { width: 28px; height: 28px; }
.svc-card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.svc-card p { color: var(--js-gray); font-size: .98rem; }
.svc-link { display: inline-block; margin-top: 14px; color: var(--js-green); font-weight: 700; font-size: .95rem; }

/* ---- mountain-ready checklist (dark band, green ready markers) ---- */
.checklist { background: var(--js-black); }
.checklist .checklist-eyebrow, .checklist .section-eyebrow { color: var(--js-green-glow); }
.checklist .checklist-title, .checklist-title { color: #fff; }
.checklist-sub { color: var(--js-gray-light); }
.check-list { display: grid; gap: 14px; margin-bottom: 22px; }
.check-row { display: flex; align-items: flex-start; gap: 18px; background: var(--js-charcoal); border: 1px solid #2a2a2a;
  border-radius: var(--r-lg); padding: 20px 22px; }
.check-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(34,179,58,.14);
  color: var(--js-green-glow); flex: none; }
.check-ico svg { width: 24px; height: 24px; }
.check-row h3 { color: #fff; font-size: 1.1rem; margin-bottom: 6px; }
.check-row p { color: var(--js-gray-light); font-size: .96rem; }
.checklist-note { color: var(--js-gray-light); }
.check-row.is-match { border-color: var(--js-green-logo); box-shadow: 0 0 0 1px rgba(0,138,18,.3) inset; }

/* ---- about ---- */
.about { background: var(--js-white); }
.about-in { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px,4vw,56px); align-items: center; }
.about-photo { min-height: 360px; border-radius: var(--r-lg); }
.about-copy p { color: var(--js-gray); margin-top: 14px; }
.about-lic { color: var(--js-ink) !important; font-weight: 700; margin-top: 18px; }
.about-lic strong { color: var(--js-green); }
@media (max-width: 760px){ .about-in { grid-template-columns: 1fr; } .about-photo { min-height: 240px; } }

/* ---- process (numbered timeline) ---- */
.process { background: var(--js-paper); }
.process-list { display: grid; gap: 22px; max-width: 760px; }
.process-list li { display: flex; gap: 20px; align-items: flex-start; position: relative; padding-bottom: 18px; }
.process-list li:not(:last-child)::before { content:""; position: absolute; left: 25px; top: 54px; bottom: -4px; width: 2px; background: var(--js-stone); }
.process-num { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-family: Saira, sans-serif; font-weight: 800; font-size: 1.05rem; background: var(--js-green); color: #fff; }
.process-list h3 { font-size: 1.15rem; margin-bottom: 4px; }
.process-list p { color: var(--js-gray); }

/* ---- service area ---- */
.area { background: var(--js-white); }
.area-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.area-cols strong { color: var(--js-green); display: block; margin-bottom: 6px; font-family: Saira, sans-serif; font-weight: 800; font-size: 1.05rem; }
.area-cols p { color: var(--js-gray); font-size: .92rem; }
@media (max-width: 760px){ .area-cols { grid-template-columns: 1fr; } }

/* ---- featured projects ---- */
.projects { background: var(--js-black); }
.projects .section-eyebrow { color: var(--js-green-glow); }
.projects .section-title { color: #fff; }
.projects .section-sub { color: var(--js-gray-light); }
.projects-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.projects-grid .ph-photo { min-height: 220px; border-radius: var(--r-md); }
@media (max-width: 860px){ .projects-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .projects-grid { grid-template-columns: 1fr; } }

/* ---- reviews ---- */
.reviews { background: var(--js-paper); }
.reviews-grid { grid-template-columns: repeat(3,1fr); }
@media (max-width: 860px){ .reviews-grid { grid-template-columns: 1fr; } }
.review-card { background: var(--js-white); border: 1px solid var(--js-stone); border-left: 3px solid var(--js-green); border-radius: var(--r-md); padding: 22px; }
.review-card .stars { display: flex; gap: 3px; margin-bottom: 12px; }
.review-card .stars::before { content: "★★★★★"; color: var(--js-green); letter-spacing: 3px; font-size: 1.05rem; }
.review-card p { color: var(--js-ink); font-style: italic; }
.review-card footer { margin-top: 14px; color: var(--js-gray); font-size: .85rem; font-style: normal; }

/* ---- FAQ accordion ---- */
.faq { background: var(--js-white); }
.faq-list { display: grid; gap: 12px; max-width: 820px; }
.faq-item { border: 1px solid var(--js-stone); border-radius: var(--r-md); overflow: hidden; background: var(--js-paper); }
.faq-item h3 { font-size: 1rem; }
.faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; font-weight: 700; font-size: 1.02rem; text-align: left; background: transparent; }
.faq-trigger:hover { color: var(--js-green); }
.faq-chev { width: 20px; height: 20px; flex: none; color: var(--js-green); transition: transform var(--dur) var(--ease); }
.faq-chev svg { width: 20px; height: 20px; }
.faq-trigger[aria-expanded="true"] .faq-chev { transform: rotate(180deg); }
.faq-panel { padding: 0 20px 20px; color: var(--js-gray); }
.faq-panel p { max-width: 70ch; }
.faq-note { margin-top: 18px; }

/* ---- estimate form ---- */
.estimate-section { background: var(--js-black); }
.estimate-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,56px); align-items: start; }
.estimate-section .section-eyebrow { color: var(--js-green-glow); }
.estimate-section .section-title { color: #fff; }
.estimate-promise { color: var(--js-green-glow); font-weight: 700; margin-bottom: 20px; }
.contact-list { display: grid; gap: 14px; margin-bottom: 30px; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; color: #e9e9e6; }
.contact-list .ci { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(34,179,58,.14); color: var(--js-green-glow); flex: none; }
.contact-list .ci svg { width: 20px; height: 20px; }
.contact-list a { color: #e9e9e6; }
.contact-list a:hover { color: var(--js-green-glow); }
.estimate-form { background: var(--js-charcoal); border: 1px solid #2a2a2a; border-radius: var(--r-lg); padding: clamp(20px,3vw,32px); }
.estimate-form .jsform-field label { color: #e6e6e6; }
.estimate-form .jsform-input, .estimate-form .jsform-select, .estimate-form .jsform-textarea { background: var(--js-ink); border-color: #333; color: #fff; }
.estimate-form .jsform-hint { color: var(--js-gray-light); }
@media (max-width: 760px){ .estimate-in { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.site-footer { background: var(--js-black); border-top: 3px solid var(--js-green-logo); padding-block: 44px; }
.footer-in { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 28px; align-items: start; }
.footer-brand img { width: 160px; margin-bottom: 12px; }
.footer-brand p, .footer-meta p { color: var(--js-gray-light); font-size: .92rem; margin-top: 6px; }
.footer-meta strong { color: var(--js-green-glow); }
.footer-meta a:hover { color: var(--js-green-glow); }
.footer-legal { text-align: right; color: var(--js-gray-light); font-size: .88rem; }
.footer-legal a { display: inline-block; margin-top: 8px; text-decoration: underline; }
@media (max-width: 760px){ .footer-in { grid-template-columns: 1fr; } .footer-legal { text-align: left; } }