/* ── TOKENS ── */
:root {
  --bg: #ffffff;
  --bg-off: #f8f8f6;
  --bg-dark: #111111;
  --text: #111111;
  --text-2: #5a5a58;
  --text-3: #9c9a97;
  --border: rgba(17,17,17,.08);
  --border-med: rgba(17,17,17,.14);
  --accent: #111111;
  --brand: #0668A2;
  --brand-soft: rgba(6,104,162,.10);
  --sans: 'Inter', system-ui, sans-serif;
  --brand-light: #5aaae6;
  --display: 'Geist', 'Inter', system-ui, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── HORIZONTAL OVERFLOW GUARD ──
   Several things on this site overflow their parent ON PURPOSE and rely
   on that parent's `overflow: hidden` to clip them: the two infinite
   tickers (whose tracks are ~3300px wide), and the radial-glow
   pseudo-elements on the dark heroes (positioned at negative offsets).
   Blink honors that clip exactly. WebKit is less reliable about it and
   can still count the overflow toward the page's scrollable width —
   which is the phantom sideways scroll on mobile.

   Clamping at the root stops that at the source, whatever leaked.
   `clip` is the right modern tool — unlike `hidden` it does NOT turn the
   element into a scroll container, so it can't break `scroll-behavior:
   smooth` or a future position: sticky. Old browsers ignore `clip` and
   fall through to `hidden` on body; because <html> is still `visible`
   there, body's value propagates up to the viewport and kills the
   sideways scroll anyway. Both paths land in the same place. */
html { overflow-x: clip; }
body {
  max-width: 100%;
  overflow-x: hidden; /* fallback for browsers without `clip` */
  overflow-x: clip;
}
/* height:auto is required now that the gallery <img> tags carry real
   width/height attributes. Those attributes let the browser reserve the
   correct space before the photo downloads (no more page jumping as you
   scroll), but without height:auto the attribute height would be treated
   as literal and squash the image once max-width kicks in. Anything
   CSS-sized — hero, cards, avatars, logos — sets its own height on a
   class selector, which outranks this and is unaffected. */
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  transition: background .25s, border-color .25s, box-shadow .25s;
  border-bottom: 1px solid transparent;
}
nav.scrolled,
nav.menu-open {
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 var(--border);
}

.nav-logo {
  display: flex; align-items: center;
  height: 30px;
}
.nav-logo img {
  height: 100%; width: auto;
  /* logo is black text + black box w/ white knockout on transparent.
     over the dark hero, invert flips it to a clean light version
     (white text, white box w/ dark knockout) without collapsing it. */
  filter: invert(1);
  transition: filter .25s;
}
/* once the nav turns white (on scroll or with the menu open),
   show the logo in its native colors */
nav.scrolled .nav-logo img,
nav.menu-open .nav-logo img { filter: none; }

.nav-links {
  display: flex; gap: 2px; list-style: none;
}
.nav-links a {
  display: block; padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.75);
  transition: color .2s, background .2s;
}
nav.scrolled .nav-links a { color: var(--text-2); }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.12); }
nav.scrolled .nav-links a:hover { color: var(--text); background: var(--bg-off); }

.nav-cta {
  display: inline-flex; align-items: center;
  padding: 9px 22px;
  background: #fff; color: var(--text);
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: background .2s, transform .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
nav.scrolled .nav-cta,
nav.menu-open .nav-cta { background: var(--text); color: #fff; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.18); }

/* ── HERO ── */
.hero {
  min-height: 100vh;
  background: #111;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.hero-photo {
  position: relative;
  overflow: hidden;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.75);
}
.hero-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17,17,17,.6) 0%, transparent 60%);
}

.hero-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 64px 80px 72px;
  position: relative; z-index: 2;
}
.hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
  margin-bottom: 24px;
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(42px, 4.5vw, 64px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 24px;
}
.hero-title em { font-style: normal; color: var(--brand-light); }
.hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  max-width: 400px;
  margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: #fff; color: var(--text);
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: transparent; color: rgba(255,255,255,.75);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  border: 1px solid rgba(255,255,255,.2);
  transition: background .2s, color .2s, border-color .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }

.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.6);
}
.badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand);
}

/* ── LOGO STRIP ── */
.logo-strip {
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
  /* the track inside is ~3300px wide by design — this is what clips it.
     `clip` re-declared after `hidden` so WebKit clips it reliably. */
  overflow: hidden;
  overflow: clip;
}
.logo-strip-track {
  display: flex;
  width: max-content;
  animation: ticker 32s linear infinite;
}
.logo-strip-track:hover { animation-play-state: paused; }
.logo-strip-group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px; /* keep gap between groups consistent w/ inner gap */
  flex-shrink: 0;
}
.strip-logo-img {
  height: 30px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  /* files are pre-processed to #5a5a58 — no filter needed */
  opacity: 0.7;
  flex-shrink: 0;
  transition: opacity .2s;
}
.logo-strip-track:hover .strip-logo-img { opacity: 1; }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── SECTION SHARED ── */
section { padding: 96px 40px; }
.section-inner { max-width: 1160px; margin: 0 auto; }
.section-label {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--display);
  font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 16px;
}
.section-title em { font-style: normal; color: var(--brand); }
.section-sub {
  font-size: 17px; color: var(--text-2); line-height: 1.65;
  max-width: 520px;
}

/* ── HOW IT WORKS ── */
.how { background: var(--bg-off); }
.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;
  margin-top: 56px;
}
.how-step {
  padding: 36px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.how-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.07);
  border-color: var(--border-med);
}
.how-step-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.step-num {
  font-family: var(--display);
  font-size: 42px; font-weight: 700; letter-spacing: -.03em;
  color: var(--border-med);
  line-height: 1;
  transition: color .2s;
}
.how-step:hover .step-num { color: var(--text-3); }
.how-icon-wrap {
  width: 44px; height: 44px;
  background: var(--bg-off);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.how-step:hover .how-icon-wrap {
  background: var(--brand-soft);
  border-color: rgba(6,104,162,.25);
}
.how-icon-svg {
  width: 20px; height: 20px;
  stroke: var(--text-2);
  transition: stroke .2s;
}
.how-step:hover .how-icon-svg { stroke: var(--brand); }
.step-title {
  font-size: 18px; font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
}
.step-desc { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* ── BUNDLES ── */
.bundles-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 56px;
}
.bundle-card {
  border: 1px solid var(--border-med);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s, transform .2s;
  position: relative;
}
.bundle-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-3px); }
.bundle-card.featured {
  /* var(--text 66%) was invalid CSS — the browser dropped the whole line.
     color-mix gives us "the text color at 66% opacity" the standards way. */
  border-color: color-mix(in srgb, var(--text) 66%, transparent);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.bundle-badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--text); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.bundle-img {
  width: 100%; height: 200px;
  background: var(--bg-off);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-3);
  overflow: hidden;
}
.bundle-img img { width: 100%; height: 100%; object-fit: cover; }
.bundle-body { padding: 28px 28px 32px; }
.bundle-name {
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 8px;
}
.bundle-headline {
  font-family: var(--display);
  font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
  margin-bottom: 6px;
}
.bundle-headline em { font-style: normal; color: var(--brand); }
.bundle-price {
  font-size: 28px; font-weight: 700; color: var(--text);
  margin-bottom: 20px;
}
.bundle-price span { font-size: 14px; font-weight: 400; color: var(--text-3); }
.bundle-includes { list-style: none; margin-bottom: 28px; }
.bundle-includes li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.bundle-includes li:last-child { border-bottom: none; }
.check {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--text);
  display: flex; align-items: center; justify-content: center;
  margin-top: 3px;
}
.check svg { width: 8px; height: 8px; stroke: #fff; fill: none; stroke-width: 2.5; }
.bundle-cta {
  display: block; width: 100%; text-align: center;
  padding: 13px 0;
  background: var(--text); color: #fff;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: opacity .2s;
}
.bundle-cta:hover { opacity: .8; }
.bundle-card:not(.featured) .bundle-cta {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border-med);
}
.bundle-card:not(.featured) .bundle-cta:hover { background: var(--bg-off); opacity: 1; }

/* ── RELIABILITY ── */
.reliability { background: var(--bg-off); }
.reliability-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 56px;
}
.rel-card {
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.rel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-color: var(--border-med);
}
.rel-icon-wrap {
  width: 48px; height: 48px;
  margin-bottom: 20px;
  background: linear-gradient(145deg, #2a2a2a 0%, var(--bg-dark) 70%);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(17,17,17,.18);
  transition: box-shadow .25s, transform .25s;
}
.rel-card:hover .rel-icon-wrap {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 18px rgba(6,104,162,.35);
}
.rel-icon-svg {
  width: 22px; height: 22px;
  stroke: #fff;
}
.rel-card-body { display: flex; flex-direction: column; gap: 8px; }
.rel-title { font-size: 16px; font-weight: 600; margin-bottom: 0; }
.rel-desc { font-size: 14px; color: var(--text-2); line-height: 1.55; }

/* ── TESTIMONIALS ── */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  margin-top: 56px;
}
.testimonial-card {
  padding: 32px;
  background: var(--bg-off);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-color: var(--border-med);
}
.stars { font-size: 13px; margin-bottom: 16px; color: #f59e0b; letter-spacing: .05em; }
.testimonial-quote {
  font-size: 15px; color: var(--text);
  line-height: 1.65; margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author { font-size: 13px; font-weight: 600; color: var(--text-2); }
.testimonial-role { font-size: 12px; color: var(--text-3); }
.testimonial-person {
  display: flex; align-items: center; gap: 14px;
}
.testimonial-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-med);
}

/* ── PORTFOLIO GALLERY ── */
.gallery { background: var(--bg); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.gallery-item {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--bg-off);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow .25s;
}
.gallery-item img {
  width: 100%;
  /* Drone shots come out 4:3 and the rest 3:2, so lock every tile to
     3:2 and center-crop. Keeps the rows even. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.gallery-item:hover { box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.gallery-item:hover img { transform: scale(1.05); }

/* ── GALLERY CAROUSEL ──
   main.js turns a .gallery-grid[data-rows] into one full-bleed grid
   track, repeats it past both page edges, and sets --from/--to/--dur so
   it loops left forever. .big photos span 2x2. Without JS the plain
   grid above still shows. */
.gallery-grid.is-carousel {
  display: block; /* the row must span the whole grid, not its first column */
  /* tile = one column of the 3-up grid at the current content width */
  --tile: calc((min(100vw - 80px, 1160px) - 32px) / 3);
}
.gallery-row {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* clip only sideways so photo shadows aren't cut off top and bottom;
     browsers without clip fall back to hidden */
  overflow: hidden;
  overflow: clip visible;
}
.gallery-track {
  display: grid;
  grid-template-rows: repeat(var(--rows), calc(var(--tile) * 2 / 3));
  grid-auto-columns: var(--tile);
  grid-auto-flow: column dense;
  gap: 16px;
  width: max-content;
  transform: translateX(var(--from, 0));
  animation: gallery-drift var(--dur, 80s) linear infinite;
}
.gallery-track .gallery-item img { height: 100%; aspect-ratio: auto; }
@keyframes gallery-drift {
  from { transform: translateX(var(--from, 0)); }
  to   { transform: translateX(var(--to, 0)); }
}
@media (max-width: 900px) {
  .gallery-grid.is-carousel { --tile: calc((100vw - 64px) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; }
}

/* ── CTA DARK ── */
.cta-dark {
  background: var(--bg-dark);
  color: #fff;
  text-align: center;
}
.cta-dark .section-title { color: #fff; }
.cta-dark .section-title em { color: var(--brand-light); }
.cta-dark .section-sub { color: rgba(255,255,255,.5); margin: 0 auto 40px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px;
  background: #fff; color: var(--text);
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  transition: transform .15s, box-shadow .15s;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.btn-ghost-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: transparent; color: rgba(255,255,255,.7);
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  border: 1px solid rgba(255,255,255,.18);
  transition: color .2s, border-color .2s;
}
.btn-ghost-white:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ── FOOTER ── */
/* Two rows: logo + social icons on top, page links + copyright below.
   One flex row stopped scaling once the link list grew past a few items. */
footer {
  background: var(--bg-off);
  border-top: 1px solid var(--border);
  padding: 44px 40px 40px;
}
.footer-top, .footer-bottom {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}
.footer-top {
  padding-bottom: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.footer-logo { display: flex; align-items: center; }
.footer-logo img {
  height: 28px; width: auto;
  /* light footer background — logo shows in its native colors, no filter */
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-med);
  border-radius: 50%;
  color: var(--text-2);
  transition: background .2s, color .2s, border-color .2s;
}
.footer-social a:hover { background: var(--text); border-color: var(--text); color: #fff; }
.footer-social svg { width: 17px; height: 17px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--text-3); transition: color .2s; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 12px; color: var(--text-3); }

@media (max-width: 900px) {
  footer { padding: 36px 24px; }
  /* 38px circles are under the 44px minimum touch target — fine with a
     mouse, fiddly with a thumb. Visual weight barely changes. */
  .footer-social { gap: 12px; }
  .footer-social a { width: 44px; height: 44px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer-links {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .footer-links a {
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
  }
  .footer-links a:last-child { border-bottom: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photo { height: 340px; }
  .hero-content { padding: 60px 32px 60px; }
  .how-grid { grid-template-columns: 1fr; }
  .bundles-grid { grid-template-columns: 1fr; }
  .reliability-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  nav { padding: 0 20px; }
  section { padding: 72px 24px; }
}

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

/* ── NAV: SERVICES DROPDOWN (desktop) ── */
.has-dropdown { position: relative; }
.has-dropdown > a {
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-caret {
  width: 12px; height: 12px;
  stroke: currentColor;
  transition: transform .2s;
}
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  /* hidden by default; hover/keyboard focus reveals it */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--text-2) !important; /* dropdown card is always white, even over the dark hero */
  transition: background .15s, color .15s;
}
.dropdown a:hover { background: var(--bg-off); color: var(--text) !important; }

/* ── NAV: MOBILE MENU ── */
.nav-toggle {
  display: none; /* desktop: hidden — shown in the media query below */
  width: 40px; height: 40px;
  background: transparent;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .2s, background .25s;
}
nav.scrolled .nav-toggle span,
nav.menu-open .nav-toggle span { background: var(--text); }
/* the three bars animate into an X when the menu is open */
nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* the link list becomes a white sheet that drops below the bar */
  .nav-links {
    position: fixed;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    padding: 16px 20px 24px;
    /* closed state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  nav.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* panel background is white, so links are always dark here */
  .nav-links a {
    color: var(--text-2);
    font-size: 16px;
    padding: 12px 14px;
  }
  .nav-links a:hover { color: var(--text); background: var(--bg-off); }

  /* on mobile the dropdown isn't a popover — its links just sit
     in the list, indented, always visible */
  .dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none;
    padding: 0 0 0 16px;
    min-width: 0;
  }
  .dropdown a { font-size: 15px; }
  .nav-caret { display: none; }
}

/* ── EXPLORE CARD (3rd card in the homepage services grid) ── */
/* inverts the bundle-card: dark, no image, service links instead
   of an includes list — visually distinct from the two packages
   so it reads as "the rest of the menu," not a third product */
.explore-card {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  display: flex;
  position: relative;
  overflow: hidden;
}
/* same brand glow language as the dark heroes */
.explore-card::before {
  content: "";
  position: absolute;
  bottom: -35%; right: -35%;
  width: 110%; height: 110%;
  background: radial-gradient(circle, rgba(6,104,162,.22) 0%, transparent 65%);
  pointer-events: none;
}
.explore-card .bundle-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 36px 28px 28px;
  position: relative;
  z-index: 2;
}
.explore-card .bundle-name { color: rgba(255,255,255,.4); }
.explore-card .bundle-headline { color: #fff; margin-bottom: 12px; }
.explore-card .bundle-headline em { color: var(--brand-light); }
.explore-sub {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin-bottom: 24px;
}
.explore-links {
  list-style: none;
  margin-top: auto; /* pins the link list to the card's bottom */
}
.explore-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: color .2s, padding-left .2s;
}
.explore-links li:last-child a { border-bottom: none; }
.explore-links a span {
  color: rgba(255,255,255,.35);
  transition: transform .2s, color .2s;
}
.explore-links a:hover { color: #fff; padding-left: 6px; }
.explore-links a:hover span { transform: translateX(4px); color: #fff; }

/* ── NAV DROPDOWN: hover bridge ──
   The menu floats 8px below the trigger, and that visual gap is a
   dead zone — the moment the cursor enters it, :hover breaks and
   the menu closes. This invisible pseudo-element spans the gap, so
   it counts as hovering .has-dropdown while the cursor crosses.
   The gap stays visible; it just stops being a trapdoor. */
.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 230px;   /* match the dropdown's min-width */
  height: 12px;   /* slightly taller than the 8px gap for safety */
}

/* ── ADD-ONS MENU (listings page) ── */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.addon-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.addon-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
  border-color: var(--border-med);
}
.addon-card h3 {
  font-family: var(--display);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: 14px;
}
.addon-list { list-style: none; }
.addon-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 14px; color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.addon-list li:last-child { border-bottom: none; }
.addon-price {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.addon-note {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 14px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .addon-grid { grid-template-columns: 1fr; }
}

/* ── SQ-FT TIER TABLE (pricing pages) ── */
.tier-card {
  background: #fff;
  border: 1px solid var(--border-med);
  border-radius: 20px;
  padding: 36px 40px;
  margin-top: 56px;
}
.tier-card h3 {
  font-family: var(--display);
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.tier-card .tier-note {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 640px;
}
.tier-list { list-style: none; }
.tier-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-2);
}
.tier-list li:last-child { border-bottom: none; }
.tier-price {
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  white-space: nowrap;
}
/* tighten the gap when the add-on grid follows the tier table */
.tier-card + .addon-grid { margin-top: 24px; }

@media (max-width: 900px) {
  .tier-card { padding: 28px 24px; }
}

/* "Most listings" tag inside the tier table */
.tier-range { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tier-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* two tier tables side by side (MLS + Zillow Showcase) */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
.tier-grid .tier-card { margin-top: 0; }
.tier-grid + .addon-grid { margin-top: 24px; }
@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; }
}

/* ── CTA PHOTO BACKDROP ──
   Real-photo backdrop behind any .cta-dark section.
   Usage: <section class="cta-dark cta-photo" style="--cta-img:url('images/cta/x.jpg')">
   The gradient sits ON TOP of the photo — the two alpha values below are
   the "how visible is the photo" knob. .72/.84 = clearly visible photo,
   still enough darkness for white text. Raise toward .90 for subtler,
   lower toward .60 for bolder (watch text contrast below ~.65). */
.cta-dark.cta-photo {
  background-image:
    linear-gradient(rgba(17,17,17,.72), rgba(17,17,17,.84)),
    var(--cta-img);
  background-size: cover;
  background-position: center;
}


/* ── CONTACT PAGE ── */
/* compact dark hero band — keeps the over-dark nav styling working
   without the full 100vh split hero the other pages use */
.hero-contact {
  background: var(--bg-dark);
  padding: 160px 40px 80px;
  text-align: center;
}
.hero-contact .hero-title {
  font-size: clamp(36px, 4vw, 54px);
  margin-bottom: 18px;
}
.hero-contact .hero-sub {
  margin: 0 auto;
  max-width: 520px;
}

.contact-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin-top: 56px;
}
.contact-card {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.07);
  border-color: var(--border-med);
}
.contact-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 8px;
}
.contact-card h3 {
  font-family: var(--display);
  font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2;
  margin-bottom: 10px;
}
.contact-card h3 em { font-style: normal; color: var(--brand); }
.contact-desc {
  font-size: 14px; color: var(--text-2); line-height: 1.6;
  margin-bottom: 24px;
  flex: 1; /* pushes the buttons to a consistent bottom edge across cards */
}
.contact-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: var(--text); color: #fff;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: opacity .2s;
}
.contact-btn:hover { opacity: .8; }
.contact-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border-med);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: background .2s;
}
.contact-link:hover { background: var(--bg-off); }

/* full-width card — used for the "everything else" catch-all so an odd
   card count still fills the grid (3 rows of 2, then one wide) */
.contact-card.wide { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .hero-contact { padding: 130px 24px 64px; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ── HERO SOLID (dark, single-column — no photo split) ──
   Same pattern as the retainers hero, generalized so any page
   without a dedicated hero photo can use it. Swap to the split
   photo hero later by copying the .hero markup from commercial. */
.hero-solid {
  min-height: 82vh;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 140px 40px 96px;
}
.hero-solid::before {
  content: "";
  position: absolute;
  top: -30%; right: -15%;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(6,104,162,.16) 0%, transparent 65%);
  pointer-events: none;
}
.hero-solid-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.hero-solid .hero-title { margin-bottom: 20px; }
.hero-solid .hero-sub { margin: 0 auto 40px; }
.hero-solid .hero-actions { justify-content: center; }
.hero-solid .hero-badges { justify-content: center; }
@media (max-width: 900px) {
  .hero-solid { padding: 120px 24px 72px; }
}

/* ── HEADSHOTS BAND (homepage) ──
   Copy on the left, two service cards on the right. Reuses the
   .how-step card styling so it stays in the family. */
.headshots-home { background: var(--bg-off); }
.headshot-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.headshot-split .section-sub { margin-bottom: 32px; }
.headshot-cards { display: grid; gap: 15px; }
.btn-dark {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  background: var(--text); color: #fff;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: transform .15s, box-shadow .15s;
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
@media (max-width: 900px) {
  .headshot-split { grid-template-columns: 1fr; gap: 40px; }
}

/* ── FACE STRIP (headshots page) ──
   Same infinite-ticker mechanics as the homepage broker logo strip:
   four IDENTICAL .face-strip-group blocks, track animates -50%.
   Same rule as the logos — every new face must be added to ALL FOUR
   groups or the loop visibly jumps. Reuses @keyframes ticker. */
.face-strip {
  margin-top: 56px;
  overflow: hidden;
  overflow: clip; /* same reason as .logo-strip — reliable WebKit clip */
  /* full-bleed: pull out of the section's 40px side padding */
  margin-left: -40px; margin-right: -40px;
  /* fade the edges so faces slide in/out instead of hard-clipping */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.face-strip-track {
  display: flex;
  width: max-content;
  animation: ticker 44s linear infinite;
}
.face-strip-track:hover { animation-play-state: paused; }
.face-strip-group {
  display: flex; align-items: center;
  gap: 28px;
  padding-right: 28px; /* keep gap between groups consistent w/ inner gap */
  flex-shrink: 0;
}
.face-img {
  width: 132px; height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-med);
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  flex-shrink: 0;
  transition: transform .25s, box-shadow .25s;
}
.face-img:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
@media (prefers-reduced-motion: reduce) {
  .face-strip-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
@media (max-width: 900px) {
  .face-strip { margin-left: -24px; margin-right: -24px; }
  .face-img { width: 100px; height: 100px; }
  .face-strip-group { gap: 18px; padding-right: 18px; }
}