/* ==========================================================================
   Falcon Eye — section art direction
   --------------------------------------------------------------------------
   Loaded after premium.css.

   premium.css established one shared language (3D tilt + specular glow) and
   applied it to every card on the site. That is the opposite of art
   direction: it made Services, Industries, Why and Clients read identically.

   This file gives each section its own visual identity and its own animation
   language, while keeping one brand system: the same ink, the same gold, the
   same easing curves, the same restraint.

     Services    depth + varied card sizes   (the only tilting section)
     Industries  clip-path wipe + image push (no tilt)
     Why         oversized ghost numerals    (no tilt, no lift)
     Training    vertical progression rail   (no cards at all)
     Clients     quiet monochrome settle     (no tilt)

   The radar/surveillance language belongs to the hero alone and appears
   nowhere in this file.
   ========================================================================== */

/* ==========================================================================
   SERVICES — depth, and deliberately unequal cards
   The brief asked for six cards that are not six identical cards.
   ========================================================================== */
.grid.g3 > .tile:nth-child(1),
.grid.g3 > .tile:nth-child(6) {
  /* Two feature cards anchor the grid; the rest stay compact. */
  --feature: 1;
}
@media (min-width: 900px) {
  .grid.g3 > .tile:nth-child(1) { grid-column: span 2; }
  .grid.g3 > .tile:nth-child(1) .tile__media { aspect-ratio: 21 / 9; }
}

/* Keep the complete waste-collection vehicle visible, including on hover. */
.tile--vehicle .tile__media { aspect-ratio: 3 / 2; }
.tile--vehicle .tile__media img { object-fit: contain; }
.tile--vehicle:hover .tile__media img { transform: none; }

/* Each card carries a different accent angle, so the set reads as a family
   rather than a repeat. */
.tile { --accent: 135deg; }
.tile:nth-child(2) { --accent: 200deg; }
.tile:nth-child(3) { --accent: 65deg; }
.tile:nth-child(4) { --accent: 250deg; }
.tile:nth-child(5) { --accent: 20deg; }
.tile:nth-child(6) { --accent: 160deg; }

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  background: linear-gradient(var(--accent), var(--gold-wash), transparent 62%);
}
.tile:hover::before,
.tile.is-tilting::before { opacity: 1; }

/* The arrow leads the eye out of the card on hover. */
.tile__a, .tile .idxrow__a { transition: transform .45s var(--out); }
.tile:hover .tile__a { transform: translateX(6px); }

/* ==========================================================================
   INDUSTRIES — a wipe, not a tilt
   The image is pushed and revealed behind a gold edge that sweeps up.
   ========================================================================== */
.ind {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow .5s var(--out);
}
.ind img {
  transition: transform 1.1s var(--out), filter .6s var(--ease);
  filter: saturate(.72) brightness(.82);
}
.ind:hover img,
.ind:focus-within img {
  transform: scale(1.06) translateY(-1.5%);
  filter: saturate(1) brightness(.95);
}

/* Gold edge sweeps up from the base as the tile is engaged. */
.ind::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--out);
}
.ind:hover::after,
.ind:focus-within::after { transform: scaleX(1); }

.ind__n {
  transition: color .4s var(--ease), transform .5s var(--out);
}
.ind:hover .ind__n { color: var(--gold-soft); transform: translateY(-4px); }
.ind__rule { transition: width .55s var(--out), background-color .4s var(--ease); }
.ind:hover .ind__rule { background: var(--gold); }
.ind:hover { box-shadow: var(--sh-3); }

/* ==========================================================================
   WHY FALCON EYE — oversized numerals, no card chrome at all
   The brief asked for large numbers and typography here, which is a
   different idea from a lifting card, so the lift is removed.
   ========================================================================== */
.g4 > .cap {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: clamp(12px, 2vw, 26px);
  overflow: visible;
}
.g4 > .cap:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
/* The index becomes a ghost numeral behind the copy. */
.g4 > .cap .cap__n {
  position: absolute;
  top: -.28em; right: auto; left: -.06em;
  z-index: -1;
  font-family: var(--f-serif, Georgia, serif);
  font-size: clamp(74px, 9vw, 132px);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  opacity: .07;
  transition: opacity .5s var(--ease), transform .6s var(--out);
}
.g4 > .cap:hover .cap__n {
  opacity: .13;
  transform: translateY(-6px);
}
/* A gold rule draws in beneath each principle as it reveals. */
.g4 > .cap::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--out);
}
.g4 > .cap:hover::after { transform: scaleX(1); }
.has-js .g4.is-in > .cap::after,
.has-js [data-reveal].is-in .g4 > .cap::after { transform: scaleX(.34); }

/* ==========================================================================
   TRAINING / SECURITY — a progression rail, not a grid
   The dark editorial bands get a vertical timeline built out of the
   checklist that is already in the markup.
   ========================================================================== */
.tone-deep .ticks {
  position: relative;
  padding-left: 6px;
}
.tone-deep .ticks::before {
  content: "";
  position: absolute;
  left: 9px; top: .6em; bottom: .6em;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(217,146,19,.14));
}
.tone-deep .ticks li {
  padding-left: 40px;
  transition: color .35s var(--ease);
}
.tone-deep .ticks li::before {
  left: 3px;
  background: var(--deep, #0d1a28);
  border-color: rgba(217,146,19,.6);
}
.tone-deep .ticks li:hover { color: #fff; }
.tone-deep .ticks li:hover::before {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(217,146,19,.18);
}

/* ==========================================================================
   CLIENTS — quiet. Logos settle; they do not perform.
   ========================================================================== */
.wall__i img {
  filter: grayscale(0) opacity(1);
  transition: filter .45s var(--ease), transform .5s var(--out);
}
.wall__i:hover img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.04);
}
/* No tilt and no glow here: a logo wall that animates is a distraction. */
.wall__i:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-1);
}

/* Google reviews — invite feedback beneath the existing testimonials. */
.reviews-invite {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.reviews-invite__title {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}
.reviews-invite__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 28px;
}
.reviews-invite__actions .btn { line-height: 1.4; }
.reviews-invite__hint {
  margin: 16px 0 0;
  color: var(--ink-3);
  font-size: .8125rem;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .reviews-invite__actions { flex-direction: column; }
  .reviews-invite__actions .btn { width: 100%; max-width: 320px; padding-inline: 18px; }
}

/* QRT — supporting documentary photos beneath the security team. */
.qrt-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  margin-top: 20px;
}
.qrt-photos figure { min-width: 0; margin: 0; }
.qrt-photo-frame {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--r);
}
.qrt-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Trim the white side margins present in the original team photograph. */
.qrt-photo-frame--team img { scale: 1.15; }
.qrt-photos figcaption {
  margin-top: 10px;
  color: var(--ink-3);
  font-size: .8125rem;
  line-height: 1.5;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tile::before, .ind::after, .g4 > .cap::after,
  .ind img, .wall__i img, .ind__n, .g4 > .cap .cap__n { transition: none !important; }
  .ind:hover img, .wall__i:hover img { transform: none; }
  .wall__i:hover { transform: none; }
}