/* =========================================================
   Big Bend Land Management — site styles
   Palette:
     dark green  #1f3d29   (header / hero / video / quote)
     deeper green #16301f
     cream       #f3ecd7   (body / intro / about)
     card cream  #faf5e6
     brown       #8a542a   (logo mark, secondary cta, quote nav btn)
     orange/gold #e8a33d   (primary cta)
     ink         #14241a
   Type: Barlow Condensed (display) / Inter (body)
   ========================================================= */

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

html { scroll-behavior: smooth; }

/* Make the hidden attribute always win over class-level display rules. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #14241a;
  background: #f3ecd7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0;
  text-transform: uppercase;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- HEADER ---------- */
.site-header {
  background: #1f3d29;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #f5efe0;
}

.brand-mark {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: 22px;
  background: #8a542a;
  color: #fff;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  letter-spacing: 1px;
}

.brand-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1.3px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.primary-nav a {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f5efe0;
  transition: color 0.15s ease;
}

.primary-nav a:hover { color: #e8a33d; }

.btn-quote {
  background: #8a542a;
  color: #fff !important;
  padding: 12px 22px;
  border-radius: 6px;
  letter-spacing: 1.5px !important;
  font-size: 14px !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-quote:hover { background: #9a6033; color: #fff !important; }

/* ---------- HERO ---------- */
.hero {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(180deg, #1f3d29 0%, #1a3624 100%);
  color: #f5efe0;
  padding: 110px 0 130px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; max-width: 900px; }

.hero-title {
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.95;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 26px;
}

.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: #d8d3c2;
  max-width: 620px;
  margin: 0 0 36px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 15px;
  padding: 16px 26px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: #e8a33d;
  color: #1f2510;
  border-color: #e8a33d;
}
.btn-primary:hover { background: #f0b04d; border-color: #f0b04d; }

.btn-secondary {
  background: #8a542a;
  color: #fff;
  border-color: #8a542a;
}
.btn-secondary:hover { background: #9a6033; border-color: #9a6033; }

.btn-outline {
  background: transparent;
  color: #f5efe0;
  border-color: #f5efe0;
}
.btn-outline:hover { background: #f5efe0; color: #1f3d29; }

.hero-tagline {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: 4px;
  font-size: 14px;
  color: #d8d3c2;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- BEFORE / AFTER SLIDER ---------- */
.compare-section {
  background: #f3ecd7;
  padding: 70px 0 70px;
}

.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 620px;
  margin: 12px auto 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  background: #1f3d29;
  box-shadow: 0 16px 40px rgba(31,61,41,0.18);
  outline: none;
}
.compare:focus-visible {
  box-shadow: 0 0 0 4px rgba(232,163,61,0.55), 0 16px 40px rgba(31,61,41,0.18);
}

.compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* The "before" image sits on top of the "after" and is clipped from the right
   based on the --pos custom property (0% = no before showing, 100% = all before). */
.compare-before-img {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* Each tag lives inside a full-container track that's clipped with the same
   inset() as the underlying image — so the label visually disappears as the
   slider passes over it. */
.compare-tag-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.compare-tag-track-before {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.compare-tag-track-after {
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare-tag {
  position: absolute;
  top: 18px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2.5px;
  padding: 7px 14px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.compare-tag-before { left: 18px; }
.compare-tag-after  { right: 18px; }

.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  background: rgba(255,255,255,0.9);
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

.compare-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #1f3d29;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  pointer-events: none;
}
.compare-grip svg { width: 26px; height: 26px; }

/* ---------- VIDEO CTA (See Results button under first video) ---------- */
.video-cta {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.video-cta .btn-primary { font-size: 17px; padding: 18px 32px; }

/* ---------- INTRO STRIP ---------- */
.intro {
  background: #f3ecd7;
  padding: 70px 0 30px;
}
.intro-text {
  font-size: 22px;
  line-height: 1.55;
  color: #2a3a26;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
}
.intro-text strong { color: #1f3d29; font-weight: 700; }

/* ---------- SECTION TITLES ---------- */
.section-title {
  font-size: clamp(36px, 5vw, 56px);
  color: #1f3d29;
  margin: 0 0 10px;
  line-height: 1;
}
.section-title.light { color: #fff; }
.section-title.dark { color: #1f3d29; }
.section-title.center { text-align: center; }

.section-sub {
  font-size: 18px;
  color: #5a5a4a;
  margin: 0 0 50px;
  max-width: 720px;
}
.section-sub.light { color: #cfd0bf; }
.section-sub.dark { color: #5a5a4a; }
.section-sub.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- SERVICES ---------- */
.services {
  background: #f3ecd7;
  padding: 70px 0 110px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.service-card {
  background: #faf5e6;
  border-radius: 10px;
  padding: 30px 28px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(31,61,41,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 14px 30px rgba(31,61,41,0.12);
}

.service-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.service-icon svg { width: 100%; height: 100%; }

.service-card h3 {
  font-size: 22px;
  color: #1f3d29;
  letter-spacing: 0.6px;
}
.service-card p {
  margin: 0;
  color: #4a4a3c;
  font-size: 15.5px;
  line-height: 1.55;
}

/* ---------- VIDEO BLOCKS ---------- */
.video-block {
  background: #1f3d29;
  color: #fff;
  padding: 90px 0;
}
.video-block + .video-block { padding-top: 0; }

.video-frame {
  background: #0d1810;
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.video-inner {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.05), transparent 60%),
    repeating-linear-gradient(45deg, #0d1810 0 2px, #111e15 2px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-btn {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: none;
  background: rgba(232, 163, 61, 0.92);
  color: #1f2510;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.play-btn:hover { transform: scale(1.06); background: #f0b04d; }
.play-btn svg { width: 42px; height: 42px; }

/* ---------- GALLERY / CAROUSEL ---------- */
.gallery {
  background: #f3ecd7;
  padding: 90px 0 110px;
}

.carousel {
  position: relative;
  margin-top: 16px;
}

.carousel-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column; /* photo 1 → top row, photo 2 → bottom row, then next column */
  gap: 18px;
  overflow: hidden;
}

.photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  background-repeat: no-repeat;
  background-position: center 68%, center top;
  background-size: 58%, 100% 100%;
}

.photo-1 {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150'><g><rect x='80' y='55' width='55' height='32' rx='4' fill='%23d24a23'/><rect x='128' y='42' width='28' height='28' rx='3' fill='%23d24a23'/><rect x='133' y='47' width='18' height='18' fill='%231a2f1f'/><path d='M70 87 L165 87 L172 100 L63 100 Z' fill='%23a83a1c'/><circle cx='85' cy='108' r='15' fill='%231a1a1a'/><circle cx='150' cy='112' r='20' fill='%231a1a1a'/><circle cx='85' cy='108' r='6' fill='%23a8a8a8'/><circle cx='150' cy='112' r='8' fill='%23a8a8a8'/></g></svg>"),
    linear-gradient(180deg, #6db2db 0%, #93c3e0 45%, #b59b6a 56%, #8a6a3a 100%);
}
.photo-2 {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'><g stroke='%23686868' stroke-width='3'><line x1='100' y1='10' x2='100' y2='130'/><line x1='80' y1='30' x2='120' y2='30'/><line x1='75' y1='45' x2='125' y2='45'/></g><line x1='0' y1='32' x2='200' y2='28' stroke='%23484848' stroke-width='1.5'/><line x1='0' y1='46' x2='200' y2='42' stroke='%23484848' stroke-width='1.5'/><circle cx='40' cy='25' r='10' fill='%23fff8b0'/></svg>"),
    linear-gradient(180deg, #5aa8d6 0%, #88beda 50%, #b0905a 58%, #6c4f2c 100%);
}
.photo-3 {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'><g fill='%23c9461f'><rect x='65' y='62' width='48' height='28' rx='4'/><rect x='108' y='52' width='22' height='22' rx='3'/></g><path d='M58 90 L138 90 L143 100 L53 100 Z' fill='%23a83a1c'/><circle cx='73' cy='105' r='13' fill='%231a1a1a'/><circle cx='125' cy='110' r='18' fill='%231a1a1a'/><path d='M0 130 L200 125 L200 150 L0 150 Z' fill='%23704d24' opacity='0.4'/></svg>"),
    linear-gradient(180deg, #69b0d8 0%, #9ec8e2 48%, #ac8748 58%, #7a5a30 100%);
}
.photo-4 {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'><path d='M0 95 L60 75 L120 90 L200 70 L200 150 L0 150 Z' fill='%237a5a30' opacity='0.5'/><path d='M20 90 L40 50 L60 90 Z' fill='%232a4a2a' opacity='0.6'/><path d='M150 92 L170 55 L185 92 Z' fill='%232a4a2a' opacity='0.6'/></svg>"),
    linear-gradient(180deg, #5fa8d3 0%, #96c3e0 50%, #bca066 58%, #7a5e30 100%);
}
.photo-5 {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150'><g><rect x='75' y='52' width='55' height='32' rx='4' fill='%23d24a23'/><rect x='125' y='40' width='28' height='28' rx='3' fill='%23d24a23'/><rect x='130' y='45' width='18' height='18' fill='%231a2f1f'/><path d='M40 88 L160 88 L168 100 L32 100 Z' fill='%23a83a1c'/><path d='M40 100 L70 100 L70 118 L40 118 Z' fill='%23b8d23a'/><circle cx='82' cy='108' r='15' fill='%231a1a1a'/><circle cx='148' cy='112' r='20' fill='%231a1a1a'/></g></svg>"),
    linear-gradient(180deg, #6cb0db 0%, #a9d0e6 50%, #6f8a3a 56%, #5a7028 100%);
}
.photo-6 {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'><path d='M0 95 L40 80 L80 95 L140 78 L200 95 L200 150 L0 150 Z' fill='%237a5a30' opacity='0.45'/><circle cx='30' cy='20' r='8' fill='%23ffffff' opacity='0.6'/><ellipse cx='160' cy='25' rx='25' ry='8' fill='%23ffffff' opacity='0.4'/></svg>"),
    linear-gradient(180deg, #4f9dcc 0%, #87b9d8 50%, #b0884a 58%, #6a4d28 100%);
}
.photo-7 {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'><path d='M0 110 L200 95 L200 150 L0 150 Z' fill='%23704d24'/><g fill='%232a4a2a'><path d='M150 95 L165 60 L180 95 Z'/><path d='M170 95 L185 65 L200 95 Z'/></g></svg>"),
    linear-gradient(180deg, #5aa6d2 0%, #94c2dc 50%, #b08856 58%, #7a5b2e 100%);
}
.photo-8 {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150'><g><rect x='80' y='50' width='55' height='32' rx='4' fill='%23d24a23'/><rect x='130' y='38' width='28' height='28' rx='3' fill='%23d24a23'/><rect x='135' y='43' width='18' height='18' fill='%231a2f1f'/><path d='M50 85 L165 85 L172 100 L42 100 Z' fill='%23a83a1c'/><path d='M50 100 L90 100 L100 88 L120 100 L50 100' fill='%23b8d23a'/><circle cx='85' cy='108' r='15' fill='%231a1a1a'/><circle cx='152' cy='112' r='20' fill='%231a1a1a'/></g></svg>"),
    linear-gradient(180deg, #6db2dc 0%, #a3cae4 50%, #aa8550 58%, #82602f 100%);
}

.carousel-track.is-shifting .photo { animation: photo-pop 0.28s ease; }
@keyframes photo-pop {
  0%   { opacity: 0.5; transform: scale(0.985); }
  100% { opacity: 1;   transform: scale(1); }
}

.photo.photo-custom {
  background-color: #2a2a2a;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Empty slots shown when the gallery has fewer photos than visible cells,
   or when paginating past the last full page. */
.photo.photo-blank {
  background: rgba(31,61,41,0.04);
  background-image: none;
  box-shadow: none;
  border: 1px dashed rgba(31,61,41,0.12);
}

.carousel-track .photo:nth-child(n+9) { display: none; }

.carousel-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.admin-link { opacity: 0.55; }
.admin-link:hover { opacity: 1; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #1f3d29;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 4;
  transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-arrow:not(:disabled):hover { background: #2a5238; transform: translateY(-50%) scale(1.05); }
.carousel-arrow svg { width: 24px; height: 24px; }
.carousel-arrow.prev { left: -12px; }
.carousel-arrow.next { right: -12px; }

/* ---------- ABOUT ---------- */
.about {
  background: #f3ecd7;
  padding: 90px 0 110px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-copy p {
  font-size: 17px;
  line-height: 1.7;
  color: #3a4a35;
  margin: 0 0 18px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-card {
  background: #faf5e6;
  border-radius: 10px;
  padding: 28px 14px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(31,61,41,0.08);
}
.stat-num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: 44px;
  color: #1f3d29;
  line-height: 1;
  letter-spacing: 0.5px;
}
.stat-label {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  color: #5a5a4a;
  margin-top: 8px;
}

/* ---------- QUOTE CTA ---------- */
.quote-cta {
  background: #1f3d29;
  padding: 100px 0 110px;
  color: #fff;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 12px;
}

.contact-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 32px 22px;
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  color: #f5efe0;
}
a.contact-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(232,163,61,0.5);
  transform: translateY(-3px);
}
.contact-label {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 13px;
  color: #cfd0bf;
  margin-bottom: 10px;
}
.contact-value {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.4px;
  color: #fff;
  word-break: break-word;
  line-height: 1.15;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: #16301f;
  color: #b9b9a8;
  padding: 26px 0;
  font-size: 14px;
}
.footer-inner {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.footer-inner a { color: #d6d6c5; }
.footer-inner a:hover { color: #e8a33d; }
.sep { opacity: 0.6; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .header-inner { height: 64px; }
  .brand-name { display: none; }
  .primary-nav { gap: 20px; }
  .primary-nav a:not(.btn-quote) { display: none; }

  .hero { padding: 80px 0 90px; }
  .hero-title { font-size: clamp(48px, 11vw, 80px); }
  .hero-sub { font-size: 17px; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }

  .carousel-track { grid-template-columns: repeat(2, 1fr); }
  .carousel-track .photo:nth-child(n+5) { display: none; }
  .carousel-arrow.prev { left: -6px; }
  .carousel-arrow.next { right: -6px; }
}

@media (max-width: 540px) {
  .container { padding: 0 20px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .stat-num { font-size: 36px; }
  .footer-inner { flex-direction: column; gap: 4px; }
  .sep { display: none; }
}