/* ---------- Reset & base ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Dark theme site-wide, colors pulled from the logo: orange for primary
     CTAs/highlights, teal for secondary accents (links, focus, info), dark
     charcoal-gray for placeholder photo boxes. */
  --color-bg: #0a0a0c;
  --color-bg-alt: #131316;
  --color-card: #1a1a1f;
  --color-text: #f5f5f7;
  --color-text-muted: #a7a7b0;
  --color-accent: #2f7d93;
  --color-border: #2a2a2f;
  --color-header: #000000;
  --color-orange: #d9531e;
  --color-teal: #2f7d93;
  /* Brighter tint of the logo teal, for text/icons on black, where the
     original is too dark to read. Orange stays reserved for things you
     click or call; teal is for supporting/informational details. */
  --color-teal-light: #4fb3c9;
  --color-box: #3a3a40;
  --color-loader-bg: #3a3a40;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-width: 1080px;
  --hero-height: clamp(560px, 80vh, 820px);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  line-height: 1.2;
  font-weight: 700;
}

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

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  background: var(--color-header);
  border-bottom: 4px solid var(--color-orange);
  z-index: 10;
}

.header-inner {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  min-height: clamp(52px, 6vw, 68px);
  padding-top: 6px;
  padding-bottom: 6px;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo-image {
  height: clamp(64px, 10vw, 104px);
  width: auto;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(12px, 4vw, 40px);
}

.nav a {
  position: relative;
  font-size: clamp(0.85rem, 2vw, 1.15rem);
  color: #fff;
  padding-bottom: 4px;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-teal-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav a:hover::after,
.nav a:focus-visible::after {
  transform: scaleX(1);
}

.nav a.nav-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 6px;
  color: #fff;
  background: var(--color-orange);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.nav a.nav-phone:hover {
  opacity: 0.85;
}

.nav a.nav-phone::after {
  display: none;
}

/* "Services" nav item with a dropdown menu of the three service pages.
   Shows on hover/keyboard focus for desktop, and toggles via JS click/tap
   (see script.js) so it also works without a mouse. */
.nav-dropdown {
  position: relative;
}

/* A real element rather than ::after, so .nav-dropdown-toggle keeps the
   same shared ::after underline the other nav links use on hover. */
.nav-dropdown-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  margin-bottom: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 16px;
  display: none;
  flex-direction: column;
  min-width: 210px;
  padding: 8px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu a {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--color-text);
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-dropdown-menu a::after {
  display: none;
}

/* Mobile-only header controls — hidden on desktop. */
.header-call,
.nav-toggle {
  display: none;
}

@media (max-width: 860px) {
  .header-inner {
    position: relative;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .logo-image {
    height: 52px;
  }

  /* Always-visible call button, since that's the most important tap on
     the site and shouldn't be hidden behind the menu. */
  .header-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 10px 16px;
    border-radius: 6px;
    background: var(--color-orange);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .site-header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--color-header);
    border-bottom: 4px solid var(--color-orange);
  }

  .site-header.nav-open .nav {
    display: flex;
  }

  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.05rem;
  }

  .nav a::after {
    display: none;
  }

  /* Services sub-links shown inline in the mobile menu instead of as a
     hover dropdown. */
  .nav-dropdown-caret {
    display: none;
  }

  .nav-dropdown-toggle {
    display: block;
  }

  .nav-dropdown-menu {
    position: static;
    display: flex;
    margin: 0;
    padding: 0 0 0 16px;
    background: none;
    border: none;
    box-shadow: none;
  }

  .nav-dropdown-menu a {
    padding: 12px 0;
    border-radius: 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
  }

  .nav a.nav-phone {
    justify-content: center;
    margin-top: 20px;
    padding: 14px 18px;
    border-bottom: none;
    font-size: 1rem;
  }
}

/* ---------- Hero ---------- */
/* Full-bleed background photo with a dark overlay for text legibility
   (save a photo as images/hero-photo.jpg to fill it in). Scrolls normally
   with the rest of the page. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--hero-height);
  padding: 60px 0;
  text-align: left;
  color: #fff;
  background-color: var(--color-header);
  background-image: url("../images/hero-photo.jpg");
  background-size: cover;
  background-position: center;
}

.page-content {
  background: var(--color-bg);
}

/* Two independent dark regions instead of one uniform dim: a left-side
   fade behind the headline, and a separate full-width band across the
   very bottom behind the trust badges — the rest of the photo (upper
   right) stays fully in the open. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.58) 90%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0) 65%);
}

/* Phones: the 2x2 trust badges take up the bottom ~quarter of the hero,
   so that band needs a stronger dark fade behind it to stay readable. */
@media (max-width: 700px) {
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.7) 78%, rgba(0, 0, 0, 0.85) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0) 65%);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding-left: clamp(24px, 6vw, 80px);
}

.hero-title {
  max-width: 640px;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.15;
  margin-bottom: 16px;
}

.text-orange {
  color: var(--color-orange);
}

.hero-services-line {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 600;
  margin-bottom: 24px;
}

.hero-cta {
  display: inline-block;
  padding: 20px 40px;
  font-size: 1.25rem;
}

.trust-badges {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3vw, 32px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  max-width: calc(100vw - 24px);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: clamp(16px, 3vw, 40px);
  border-left: 1px solid rgba(79, 179, 201, 0.5);
  white-space: nowrap;
}

.trust-badge-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-orange);
}

.trust-badge-icon svg {
  width: clamp(30px, 3.2vw, 40px);
  height: clamp(30px, 3.2vw, 40px);
}

.trust-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
  color: var(--color-teal-light);
}

.trust-badge-text strong {
  font-size: clamp(0.8rem, 1.3vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
}

.trust-badge:first-child {
  padding-left: 0;
  border-left: none;
}

/* On phones the single row of four can't fit, so it becomes a 2x2 grid
   pinned to the bottom of the hero, and the headline gets extra bottom
   padding so it centers above the badges instead of running into them. */
@media (max-width: 700px) {
  .hero {
    padding-bottom: 170px;
  }

  .trust-badges {
    left: 16px;
    right: 16px;
    bottom: 20px;
    transform: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
    max-width: none;
  }

  .trust-badge,
  .trust-badge:first-child {
    padding-left: 0;
    border-left: none;
    white-space: normal;
    align-items: flex-start;
    gap: 8px;
  }

  .trust-badge-icon svg {
    width: 26px;
    height: 26px;
  }

  .trust-badge-text {
    font-size: 0.72rem;
  }

  .trust-badge-text strong {
    font-size: 0.78rem;
  }
}

/* Always-on recovery contact card, anchored to the top-right corner of
   the Our Services section. Bold solid-orange treatment, no entrance
   animation or dismiss control — it's meant to be a permanent fixture. */
.season-alert {
  position: absolute;
  top: clamp(24px, 5vw, 56px);
  right: clamp(16px, 4vw, 48px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(400px, calc(100vw - 48px));
  padding: 24px 28px;
  background: var(--color-orange);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: season-alert-pulse 3.5s ease-in-out infinite;
}

/* !important because a running (or paused) CSS animation keeps applying
   its own last computed transform/box-shadow over any plain hover rule
   for the same properties — without it, pausing on hover just freezes
   mid-pulse instead of showing the hover lift. */
.season-alert:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6) !important;
}

/* A brief pulse every few seconds rather than a constant animation, so
   it draws the eye without being distracting while you read the page. */
@keyframes season-alert-pulse {
  0%, 82%, 100% {
    transform: scale(1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  }
  91% {
    transform: scale(1.045);
    box-shadow:
      0 0 0 4px rgba(217, 83, 30, 0.5),
      0 0 30px rgba(217, 83, 30, 0.8),
      0 0 60px rgba(217, 83, 30, 0.5);
  }
}

/* On narrower screens there's no room beside the heading, so it drops
   into normal flow as a full-width card above "Our Services" instead of
   floating on top of it. */
@media (max-width: 1100px) {
  .season-alert {
    position: relative;
    top: auto;
    right: auto;
    max-width: 480px;
    margin: 0 auto 48px;
  }
}

@media (max-width: 700px) {
  .season-alert {
    margin: 0 16px 40px;
    padding: 20px;
  }
}

.season-alert-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: inherit;
}

.season-alert-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-orange);
}

.season-alert-icon svg {
  width: 30px;
  height: 30px;
}

.season-alert-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.season-alert-text strong {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Services ---------- */
.services-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: 40px;
}

/* Extra room above a grid of smaller photo boxes that follows a large
   showcase photo on a sub-service detail page. */
.services-grid--more-photos {
  margin-top: 40px;
}

/* Centered intro above a section (small accent line, two-tone heading,
   subtitle) — e.g. "Our Drone Services" above the homepage service cards. */
.section-heading {
  max-width: 960px;
  margin: 0 auto 64px;
  text-align: center;
}

.section-heading::before {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin: 0 auto 20px;
  background: var(--color-teal-light);
  border-radius: 2px;
}

.section .section-heading h2 {
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  margin-bottom: 24px;
}

.section-heading p {
  color: var(--color-text-muted);
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  max-width: none;
  margin: 0 auto;
}

/* Service cards: photo on top in an orange frame, bold uppercase title,
   description, "Learn More". Always dark regardless of the page's own
   theme, so it pops the same way on a light section or a dark one. */
.service-card {
  display: flex;
  flex-direction: column;
  background: #141417;
  border-radius: 6px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(217, 83, 30, 0.5),
    0 0 24px rgba(217, 83, 30, 0.45),
    0 0 60px rgba(217, 83, 30, 0.3);
}

.service-card-image {
  aspect-ratio: 2 / 1;
  margin: 22px 22px 0;
  background-color: var(--color-box);
  background-size: cover;
  background-position: center;
  border: 3px solid var(--color-orange);
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

.service-card:hover .service-card-image {
  box-shadow: 0 0 18px rgba(217, 83, 30, 0.55);
}

.service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 34px 34px 38px;
}

.service-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.service-card-header svg {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--color-orange);
}

.service-card-header-icon {
  flex-shrink: 0;
  display: block;
  width: 40px;
  height: 40px;
}

.service-card-header h3 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}

.service-card-body p {
  color: #b4b4bb;
  font-size: 1.25rem;
  margin-bottom: 24px;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--color-orange);
  font-weight: 700;
  font-size: 1.2rem;
  transition: gap 0.15s ease;
}

.service-card:hover .service-card-link {
  gap: 10px;
}

.service-card-link-icon {
  flex-shrink: 0;
}

/* Solid gray placeholder. Swap to a background-image (or drop an <img
   class="service-box"> in its place) once photos are ready. */
.service-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-box);
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(217, 83, 30, 0.2);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Each box picks up its photo automatically once you save a file with the
   matching name into the images folder. */
.service-box--walkthroughs {
  background-image: url("../images/walkthroughs.png");
}

.service-box--thermal {
  background-image: url("../images/thermal.jpg");
}

.service-box--inspections {
  background-image: url("../images/inspections.jpg");
}

.service-box--herd-land {
  background-image: url("../images/herd-land.jpg");
}

.service-box--pet-livestock {
  background-image: url("../images/pet-livestock.jpg");
}

.service-box--real-estate-photo {
  background-image: url("../images/real-estate-photography.jpg");
}

.service-box--construction-progress {
  background-image: url("../images/construction-progress.jpg");
}

/* Teal-bordered callout under a page title, e.g. noting a service is
   offered even though its page isn't fully built out yet. */
.service-notice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
  margin-top: 24px;
  padding: 18px 22px;
  border: 1px solid var(--color-teal);
  border-left: 4px solid var(--color-teal-light);
  border-radius: 8px;
  background: rgba(47, 125, 147, 0.12);
  text-align: left;
}

.service-notice strong {
  color: #fff;
  font-size: 1.05rem;
}

.service-notice span {
  color: var(--color-text-muted);
}

.service-notice a {
  color: var(--color-orange);
  font-weight: 700;
}

/* Simple centered placeholder for a service page that isn't built out yet */
.coming-soon {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.coming-soon .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.coming-soon h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 12px;
}

.coming-soon p {
  color: var(--color-text-muted);
  max-width: 480px;
  margin-bottom: 28px;
}

/* ---------- Service detail pages ---------- */
.page-hero {
  position: relative;
  padding: 64px 0 40px;
  border-bottom: 4px solid var(--color-orange);
}

.page-hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Pinned to the top-left of the title banner (near the logo) rather than
   the narrow centered column, which drifts toward the middle on wide
   screens. */
.back-link {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: clamp(24px, 6vw, 160px);
  display: inline-block;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* On narrower screens the centered title and description reach out to the
   left edge, so vertically centering would put the link on top of them —
   keep it tucked at the top there instead. */
@media (max-width: 1100px) {
  .back-link {
    top: 22px;
    transform: none;
  }
}

.back-link:hover {
  color: var(--color-text);
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 12px;
}

.page-hero p {
  color: var(--color-text-muted);
  max-width: 640px;
}

/* About page: title, then the video, then the photo + bio side by side.
   Capped to roughly the same width as the "From the Field" videos on the
   service pages so all the videos on the site read as one size. */
.about-stack {
  max-width: 920px;
}

/* .section prefix so this outranks the generic `.section h2` size rule
   (same specificity, later in the file) that would otherwise shrink the
   "Meet the Pilots" h2 back to 1.8rem. */
.section .about-title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin-top: 56px;
  margin-bottom: 0;
}

.section .about-title--top {
  margin-top: 0;
  margin-bottom: 24px;
}

.meet-pilot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
}

.meet-pilot-photo {
  flex: 0 0 240px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: var(--color-box);
  background-image: url("../images/pilot-photo.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 24px rgba(217, 83, 30, 0.2);
}

.meet-pilot-text {
  flex: 1 1 320px;
}

.meet-pilot-text p {
  color: var(--color-text-muted);
  max-width: none;
}

.meet-pilot-text p:not(.meet-pilot-role) + p {
  margin-top: 14px;
}

/* Second pilot row flips the photo to the right so the two bios don't
   read as a repeated block; stacks normally once it wraps on phones. */
.meet-pilot--reverse {
  flex-direction: row-reverse;
}

.meet-pilot-photo--partner {
  background-image: url("../images/pilot2-photo.jpg");
}

.section .meet-pilot-name {
  font-size: 1.6rem;
  margin-bottom: 4px;
}

.meet-pilot-text .meet-pilot-role {
  color: var(--color-teal-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  .meet-pilot--reverse {
    flex-direction: row;
  }

  .meet-pilot {
    justify-content: center;
    gap: 28px;
  }

  .meet-pilot-photo {
    flex-basis: 200px;
    width: 200px;
    height: 200px;
  }
}

.about-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--color-orange);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-box);
}

.about-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Prominent call-first box for a service where people often need a fast
   response (e.g. thermal recoveries). */
.urgent-cta {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px;
  border: 2px solid var(--color-orange);
  border-radius: 10px;
  background: var(--color-bg-alt);
  text-align: center;
}

.urgent-cta h2 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.urgent-cta > p {
  margin: 0 auto 20px;
}

.urgent-cta .contact-form {
  margin-top: 0;
  max-width: none;
  text-align: left;
}

/* Wider than the standard .container, for full-width stacked showcase
   sections — still leaves a gap on the sides instead of touching the edge. */
.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Extra-wide variant for the "From the Field" video + photos, so the whole
   block can grow on big screens while keeping its proportions. */
.container-wide--xl {
  max-width: 1680px;
}

/* Stacked, full-width showcase sections (photo/video + title + blurb),
   separated by a dividing line. Each .showcase-box can hold a
   background-image, or an <iframe> (e.g. a Matterport/YouTube embed). */
.showcase-item h3 {
  font-size: clamp(1.3rem, 3vw, 2rem);
  text-align: center;
  margin-bottom: 20px;
}

.showcase-box {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  background: var(--color-box);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(217, 83, 30, 0.2);
}

.showcase-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* No gray placeholder for boxes that already hold a real embed — let the
   embedded page's own loading state show through instead. */
.showcase-box--embed {
  background: none;
}

/* Branded loading state (logo + progress bar) shown over an embed until
   its iframe fires `load`, instead of a blank white gap while it fetches. */
.embed-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--color-loader-bg);
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.embed-loader img {
  width: min(35%, 140px);
  height: auto;
}

.embed-loader .loading-bar {
  position: relative;
  width: min(50%, 200px);
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  overflow: hidden;
}

.embed-loader .loading-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--color-orange);
  animation: embed-loading-bar 1.2s ease-in-out infinite;
}

.showcase-box.is-loaded .embed-loader {
  opacity: 0;
}

@keyframes embed-loading-bar {
  0% {
    left: -40%;
  }
  50% {
    left: 60%;
  }
  100% {
    left: 100%;
  }
}

.showcase-text {
  max-width: 640px;
  margin: 20px auto 0;
  color: var(--color-text-muted);
  text-align: center;
}

.showcase-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 56px auto;
}

.showcase-divider::before,
.showcase-divider::after {
  content: "";
  flex: 1;
  height: 3px;
  background: var(--color-orange);
  border-radius: 2px;
}

.showcase-divider-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  background: var(--color-orange);
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid var(--color-orange);
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.button:hover {
  opacity: 0.88;
}

.button--outline {
  background: none;
  color: var(--color-text);
}

.button--outline:hover {
  opacity: 1;
  background: var(--color-orange);
  color: #fff;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 32px;
}

/* ---------- Sections ---------- */
.section {
  padding: 80px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

/* Pure black, for a section that should read as a shade darker than the
   near-black default page background (e.g. "Our Services" below the hero). */
.section--dark {
  position: relative;
  background: var(--color-header);
}

.section h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.section p {
  color: var(--color-text-muted);
  max-width: 640px;
}

.about-tagline {
  color: var(--color-orange) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

/* Who-we-serve tags under the About copy */
.audience-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  list-style: none;
}

.audience-list li {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: 999px;
}

/* How-it-works process steps */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.process-step {
  text-align: center;
}

.process-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  font-weight: 700;
}

.process-step h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.process-step p {
  font-size: 0.9rem;
  margin: 0 auto;
}

/* "What you receive" bullet list on a service page */
.deliverables {
  max-width: 480px;
  margin: 16px auto 0;
  padding-left: 20px;
  color: var(--color-text-muted);
}

.deliverables li {
  margin-bottom: 6px;
}

/* Centered informational prose block on a service page */
.info-text {
  max-width: 640px;
  margin: 24px auto 0;
  color: var(--color-text-muted);
  text-align: center;
}

.info-text p + p {
  margin-top: 12px;
}

/* Bold hook headline above a 4-step process grid */
.hook-banner {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}

.step-item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.step-number {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-teal-light);
  margin-bottom: 16px;
}

.step-box {
  flex: 1;
  background: var(--color-bg-alt);
  border-radius: 16px;
  padding: 24px 20px;
  color: var(--color-text);
  font-size: 0.95rem;
}

/* Bottom call-to-action block shared by the three service pages */
.service-cta {
  text-align: center;
  padding: 64px 0;
  background: var(--color-bg-alt);
}

.service-cta h2 {
  margin-bottom: 8px;
}

.service-cta p {
  margin: 0 auto 24px;
}

/* A .contact-form dropped into a wide .service-cta (unlike the compact
   urgent-cta forms, which happen to sit in an already-narrow box) needs
   its own horizontal centering rather than relying on the parent. */
.service-cta .contact-form {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Package comparison cards (e.g. Bambi / Spike / Trophy) */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.package-card {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}

.package-card--featured {
  border: 2px solid var(--color-orange);
}

.package-card.is-selected {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 2px var(--color-orange);
}

.package-select-btn {
  width: 100%;
  margin-top: auto;
}

.package-card h3 {
  font-size: 1.2rem;
  margin-bottom: 16px;
}

/* Small circular photo above each package card. Save a photo with the
   matching name into the images folder and it'll show up automatically. */
.package-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background-color: var(--color-box);
  background-size: cover;
  background-position: center;
}

.package-icon--bambi {
  background-image: url("../images/package-bambi.jpg");
}

.package-icon--spike {
  background-image: url("../images/package-spike.jpg");
}

.package-icon--trophy {
  background-image: url("../images/package-trophy.jpg");
}

.package-features {
  list-style: none;
  text-align: left;
}

.package-features li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: var(--color-text-muted);
}

.package-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-teal-light);
  font-weight: 700;
}

.packages-note {
  margin-top: 24px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* One large video on the left spanning both rows, two photos stacked on
   the right. Collapses to a single column on phones. Media picks up
   automatically once files with the matching names are saved into the
   images folder. */
.media-showcase {
  display: grid;
  grid-template-columns: 5fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 32px;
}

/* Locked to a true 16:9 widescreen shape; the two photo slots on the
   right stretch to match whatever height that works out to. */
.media-showcase-video {
  grid-row: 1 / 3;
  align-self: start;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-box);
  border: 3px solid var(--color-orange);
  border-radius: 8px;
}

.gallery-photo {
  aspect-ratio: 4 / 3;
  background-color: var(--color-box);
  background-size: cover;
  background-position: center;
  border: 3px solid var(--color-orange);
  border-radius: 8px;
}

/* Embedded Google Maps listing on the homepage, framed like the photos. */
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 3px solid var(--color-orange);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-box);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-embed-buttons {
  margin-top: 28px;
}

@media (max-width: 700px) {
  .map-embed {
    aspect-ratio: 4 / 3;
  }
}

/* Title + photo stacked inside one of the right-hand slots; the photo
   stretches to fill whatever height is left under its title. */
.media-showcase-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  min-height: 0;
}

.media-showcase-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
}

.media-showcase-item .gallery-photo {
  flex: 1;
  aspect-ratio: auto;
  min-height: 120px;
}

/* Stacked variant: video centered on its own row, then the two titled
   photos side by side underneath in their own 4:3 boxes — sized by their
   width instead of squeezed into the video's height, so a detailed image
   like the herd analysis map shows whole and readable. */
.media-showcase--stacked {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  row-gap: clamp(28px, 4vw, 48px);
}

.media-showcase--stacked .media-showcase-video {
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: center;
  max-width: 1000px;
}

/* Section title lined up with the centered video's left edge, so it sits
   directly on top of the box instead of off at the far left. */
.section .media-showcase-heading--stacked {
  max-width: 1000px;
  margin: 0 auto -12px;
}

.media-showcase--stacked .media-showcase-item .gallery-photo {
  flex: none;
  aspect-ratio: 4 / 3;
}

@media (max-width: 700px) {
  .media-showcase--stacked {
    grid-template-columns: 1fr;
  }
}

/* Stand-in for a video slot that doesn't have a YouTube link yet. */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.media-placeholder span {
  color: var(--color-text-muted);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* "Gallery →" button under the Successful Recoveries photos. */
.gallery-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: none;
  align-self: stretch;
  font-size: 1.05rem;
}

.gallery-btn svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.gallery-btn:hover svg {
  transform: translateX(4px);
}

/* Recovery gallery page grid — photos are added by script.js from the
   numbered files in images/gallery. */
.recovery-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

@media (max-width: 1000px) {
  .recovery-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .recovery-gallery {
    grid-template-columns: 1fr;
  }
}

.recovery-gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 3px solid var(--color-orange);
  border-radius: 8px;
  background-color: var(--color-box);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.recovery-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recovery-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(217, 83, 30, 0.5);
}

.recovery-gallery-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 60px 0;
}

/* Alternative right column: one shared title, then photos that split the
   video's full height equally between them. */
.media-showcase-side {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 28px);
  min-height: 0;
}

.media-showcase-side .media-showcase-title {
  margin-bottom: -6px;
}

.media-showcase-side .gallery-photo {
  flex: 1;
  aspect-ratio: auto;
  min-height: 120px;
}

.gallery-photo--herd-1 {
  background-image: url("../images/herd-gallery-1.jpg?v=3");
  background-color: #000;
  background-size: contain;
  background-repeat: no-repeat;
}
.gallery-photo--herd-2 { background-image: url("../images/herd-gallery-2.jpg"); }
.gallery-photo--deer-1 {
  background-image: url("../images/deer-gallery-1.jpg");
  background-position: center 30%;
}
.gallery-photo--deer-2 {
  background-image: url("../images/deer-gallery-2.jpg");
  background-position: center 25%;
}

@media (max-width: 700px) {
  .media-showcase {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .media-showcase-item .gallery-photo {
    min-height: 260px;
  }

  .media-showcase-video {
    grid-row: auto;
  }

  .media-showcase-side {
    grid-row: auto;
  }

  .media-showcase-side .gallery-photo {
    flex: none;
    aspect-ratio: 16 / 10;
  }
}

/* Quote form card — hidden until a package is selected above, then
   presented as its own bordered document rather than a flat field list. */
form.quote-form-card {
  display: none;
  max-width: 640px;
  margin: 32px auto 0;
  padding: 32px clamp(20px, 5vw, 40px);
  background: var(--color-card);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

form.quote-form-card.is-visible {
  display: flex;
}

.selected-package-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-orange);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.9rem;
}

.selected-package-badge #selected-package-label {
  color: var(--color-orange);
}

.change-package-link {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.change-package-link:hover {
  color: var(--color-text);
}

.form-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.form-section-title:first-of-type {
  margin-top: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0 16px;
}

.form-row > div {
  display: flex;
  flex-direction: column;
}

/* Inline radio choices inside a .contact-form (e.g. package selection) */
.contact-form .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}

.contact-form .radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  margin-top: 0;
}

.scheduling-note {
  margin: 24px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------- Form ---------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
  margin-top: 24px;
}

.contact-form label {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 12px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-card);
  color: var(--color-text);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.contact-form button {
  margin-top: 16px;
  align-self: flex-start;
}

.form-status {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--color-accent);
}

/* Large confirmation panel shown in place of the form once it's
   successfully submitted (hidden by default via inline style). */
.form-confirmation {
  text-align: center;
  max-width: 480px;
  margin: 24px auto 0;
  padding: 32px 24px;
}

.form-confirmation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}

.form-confirmation h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.form-confirmation p {
  color: var(--color-text-muted);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-header);
  border-top: 4px solid var(--color-orange);
  padding-top: 56px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-logo {
  height: 72px;
  width: auto;
  margin-bottom: 16px;
}

.footer-brand p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  max-width: 300px;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.footer-social svg {
  color: var(--color-orange);
}

.footer-social:hover {
  color: var(--color-orange);
}

.footer-heading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-light);
  margin-bottom: 16px;
}

.footer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.footer-list a {
  color: var(--color-text);
  transition: color 0.15s ease;
}

.footer-list a:hover {
  color: var(--color-orange);
}

.footer-list a.footer-phone {
  color: var(--color-orange);
  font-size: 1.2rem;
  font-weight: 700;
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding: 20px 24px;
  text-align: center;
}

.footer-bottom p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- Accessibility ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.nav a:focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- Scroll reveal ---------- */
/* Fades content up into place as it enters the viewport. If JS never runs,
   the <noscript> rule in each page's <head> forces everything visible. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.grid .reveal:nth-child(2) {
  transition-delay: 0.1s;
}

.grid .reveal:nth-child(3) {
  transition-delay: 0.2s;
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
  z-index: 20;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.back-to-top:hover {
  background: #b9451a;
}

/* ---------- Feature row (e.g. "How Thermal Works") ---------- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-top: 48px;
  text-align: center;
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(47, 125, 147, 0.25);
  color: var(--color-teal-light);
}

.feature-item h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.feature-item p {
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 280px;
  color: var(--color-text-muted);
}

/* ---------- Ground vs. drone comparison ---------- */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.compare-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 28px;
}

.compare-card--featured {
  border: 2px solid var(--color-orange);
}

.compare-card h3 {
  text-align: center;
  margin-bottom: 20px;
}

.compare-list {
  list-style: none;
}

.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--color-text-muted);
}

.compare-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.compare-icon--no {
  background: #8a8a90;
}

.compare-icon--yes {
  background: var(--color-orange);
}

/* ---------- FAQ accordion (native <details>/<summary>) ---------- */
.faq-list {
  max-width: 720px;
  margin: 32px auto 0;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--color-teal-light);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  margin-top: 12px;
  color: var(--color-text-muted);
}

/* ---------- Before/after thermal comparison slider ---------- */
/* Two full-size photo layers stacked on top of each other. The "before"
   layer is clipped with clip-path (not resized), so background-size:cover
   never has to recompute against a shrinking box — that's what keeps the
   photo from warping as the divider is dragged. A native range input,
   stretched invisibly over the whole thing, drives the drag interaction
   so it's touch- and keyboard-accessible for free. */
.ba-slider {
  position: relative;
  max-width: 960px;
  margin: 32px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(217, 83, 30, 0.2);
}

.ba-slider-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Distinct placeholder colors (gray vs. a warm thermal tint) so the drag
   is visibly working even before real photos replace them. */
.ba-slider-layer--before {
  clip-path: inset(0 50% 0 0);
  background-color: #3a3a3d;
}

.ba-slider-layer--after {
  background-color: #241a12;
}

.ba-slider-layer--before.before-after-box--normal {
  background-image: url("../images/downed-game-normal.jpg?v=2");
}

.ba-slider-layer--after.before-after-box--thermal {
  background-image: url("../images/downed-game-thermal.jpg?v=2");
}

.ba-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

.ba-slider-handle::after {
  content: "\2039\00a0\203A";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding-bottom: 3px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-header);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ba-slider-label {
  position: absolute;
  bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  pointer-events: none;
}

.ba-slider-label--before {
  left: 12px;
}

.ba-slider-label--after {
  right: 12px;
}

/* Sits over the whole image as an invisible click/focus target and keeps
   the value keyboard-accessible, but the actual drag is handled by pointer
   events in JS rather than the native thumb (see script.js) — a thumb
   sized to 100% of the track breaks the browser's own drag math. */
.ba-slider-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}