/* Home page layout overrides. Loaded only by home/base_home.html, after the template stylesheet. */

/* Why Tiger 8: services-layout2 two-column block - heading on the left, a 2x2
   grid of icon cards on the right. Stretch the cards to equal height and give
   each a light surface with a top accent. The flex is scoped to the inner card
   cells (.col-sm-6) so the outer heading/cards columns keep their normal width. */
.why-tiger8 .col-sm-6 {
  display: flex;
}
.why-tiger8 .service-item {
  width: 100%;
  height: 100%;
}
.why-tiger8 .service-item .service-body {
  width: 100%;
  height: 100%;
  padding: 36px 30px;
  background-color: #f6f6f6;
  border-top: 3px solid var(--color-primary);
}
.why-tiger8 .service-item .service-desc {
  color: #3a3a3a;
}
.why-tiger8-small-print {
  color: #3a3a3a;
}

/* Focus areas: equal-height cards on a solid surface. */
.focus-areas .row > [class*="col-"] {
  display: flex;
}
.focus-areas .focus-card {
  width: 100%;
  height: 100%;
  background-color: #15191c;
  box-shadow: none;
}
.focus-areas .focus-card:hover {
  background-color: #15191c;
}
.focus-areas .focus-card .service-body {
  height: 100%;
  padding: 40px 32px;
}
.focus-areas .focus-card .service-hook {
  color: var(--color-primary);
}
.focus-areas .focus-card .service-title {
  color: #ffffff;
}
.focus-areas .focus-card .service-desc {
  color: rgba(255, 255, 255, 0.82);
}

/* Team: equal-height cards in each row. */
.team-tiger8 .row > [class*="col-"] {
  display: flex;
}.team-tiger8 .team-card {
  width: 100%;
  height: 100%;
}

/* Header: the mini navigation duplicates the main menu and sits over the hero at XL widths. */
@media (min-width: 1200px) {
  .header .mini-nav-menu {
    display: none;
  }
  /* At the top of the page the template hides the main links. Show them as small uppercase labels
     with an orange marker under the active link. */
  .header-layout4 .navbar:not(.is-sticky) .navbar-nav {
    display: flex !important;
    align-items: center;
    gap: 40px;
  }
  .header-layout4 .navbar:not(.is-sticky) .navbar-nav > .nav-item {
    height: auto;
    align-self: center;
    margin: 0;
  }
  .header-layout4 .navbar:not(.is-sticky) .navbar-nav > .nav-item > .nav-item-link {
    --link-color-hover: var(--color-primary);
    line-height: 1.4;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* Contact page: fixed header (is-sticky) and no duplicate mini navigation. */
body.template-contact .mini-nav-menu {
  display: none;
}
body.template-contact .header-layout4.is-sticky {
  position: sticky;
  top: 0;
}
body.template-contact .header-layout4 .navbar .navbar-nav > .nav-item > .nav-item-link {
  --link-color: var(--color-secondary);
  --link-color-hover: var(--color-primary);
  line-height: 1.4;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.template-contact .header-layout4 .navbar .navbar-nav > .nav-item > .nav-item-link.active,
body.template-contact .header-layout4 .navbar .navbar-nav > .nav-item > .nav-item-link:hover {
  --link-color: var(--color-primary);
}

/* Contact page: the template's generic section padding and panel padding are
   too tall on a standalone page; keep it tight to the map and the form. */
.contact-layout1 {
  padding-top: 80px;
  padding-bottom: 80px;
}
.contact-layout1 .contact-panel {
  --panel-padding: 60px 70px;
}

/* Slimmer page banner on the contact page. */
.page-title-layout1 {
  --section-padding: 150px 0 40px;
}

/* Hero + contact: blurred city-skyline background.
   These two sections carry the skyline as a dedicated <img> under `.skyline-bg`
   rather than the template's `.bg-img`: main.js turns any `.bg-img` into a CSS
   background on the parent and removes the <img>, and blurring that parent would
   blur the foreground copy and the contact form too. The image sits behind the
   `bg-overlay` wash and the content, and is blurred in CSS so the amount is
   tunable without re-exporting the asset. */
.hero-tiger8 .slide-item {
  position: relative;
}
.hero-tiger8 .slide-item,
#contact.contact-layout3 {
  overflow: hidden;
}
.skyline-bg {
  position: absolute;
  inset: 0;
  z-index: -2; /* behind the dark bg-overlay (z-index -1) and the content */
  overflow: hidden;
  pointer-events: none;
}
.skyline-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px);
  transform: scale(1.08); /* push the blurred edge out of the clipped box */
}