/* =========================================================
   SRISHAILA CONSTRUCTIONS
   HOME HERO — FULL CSS
   Transparent header, full-screen video, clear construction
   footage, bottom-left headline and responsive navigation.
   ========================================================= */

body.home-page {
  --hero-pad-x: clamp(20px, 3.1vw, 64px);
  --hero-nav-size: clamp(15px, 1.15vw, 22px);
  --hero-h1-size: clamp(38px, 3.8vw, 76px);
  --hero-sub-size: clamp(15px, 1.1vw, 21px);
}

/* =========================================================
   HEADER — TRANSPARENT OVER THE HERO
   ========================================================= */

html body.home-page .site-header,
html body.home-page .site-header:not(.is-scrolled) {
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.home-page .site-header .nav-inner {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 22px var(--hero-pad-x) !important;
  gap: 28px;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.home-page .site-header .brand-logo {
  display: block;
  width: clamp(150px, 11vw, 215px) !important;
  max-height: none !important;
  height: auto !important;

  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)) !important;
}

html body.home-page .site-header .main-nav {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: clamp(22px, 3.2vw, 64px) !important;
}

html body.home-page .site-header .main-nav > a,
html body.home-page .site-header .main-nav > .nav-dropdown > .nav-drop-trigger {
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
  font-size: var(--hero-nav-size) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;

  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45) !important;
}

/* Contact link */

html body.home-page .site-header .main-nav > a.nav-cta {
  min-width: 0 !important;
  min-height: 0 !important;

  padding: 6px 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #fff !important;
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
  font-size: var(--hero-nav-size) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.home-page .site-header .main-nav > a.nav-cta:hover {
  background: transparent !important;
  transform: none !important;
}

html body.home-page .site-header .nav-drop-trigger span {
  color: #fff !important;
  font-size: 12px !important;
  margin-left: 4px !important;
}

html body.home-page .site-header .main-nav > a:not(.nav-cta)::after,
html body.home-page .site-header .nav-drop-trigger::after {
  background: #fff !important;
}

/* Header hamburger */

html body.home-page .site-header .nav-hamburger {
  display: flex;
  margin-left: 0;
  width: 34px;
  height: 30px;
}

html body.home-page .site-header .nav-hamburger span {
  background: #fff !important;
  height: 3px;
}

html body.home-page .site-header .nav-hamburger span:nth-child(2) {
  width: 100%;
}

/* Scrolled header */

html body.home-page .site-header.is-scrolled {
  background: #214275 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
}

html body.home-page .site-header.is-scrolled .nav-inner {
  padding: 12px var(--hero-pad-x) !important;
}

html body.home-page .site-header.is-scrolled .brand-logo {
  width: clamp(130px, 9vw, 170px) !important;
}

/* Keep the navigation above the video */

html body.home-page .site-header {
  z-index: 1000 !important;
}

/* =========================================================
   HERO — FULL-SCREEN VIDEO
   ========================================================= */

body.home-page .executive-hero.reference-matter-hero {
  position: relative !important;

  width: 100% !important;
  height: 100vh !important;
  height: 100svh !important;
  min-height: 560px !important;

  overflow: hidden !important;
  isolation: isolate;

  background: #163b45 !important;
}

/* Video fills the entire hero */

body.home-page .executive-hero .hero-slide-video {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  /* Improve visibility without washing out the footage */
  filter: brightness(1.12) contrast(1.04) saturate(1.06) !important;

  opacity: 1 !important;
  transform: none !important;
  animation: none !important;

  background: #163b45;
}

/* Subtle overlay instead of a heavy dark tint */

body.home-page .executive-hero .hero-slide-shade {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  z-index: 1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      to top,
      rgba(3, 16, 22, 0.38) 0%,
      rgba(3, 16, 22, 0.12) 32%,
      rgba(3, 16, 22, 0.02) 60%,
      transparent 78%
    ),
    linear-gradient(
      to right,
      rgba(3, 16, 22, 0.12) 0%,
      rgba(3, 16, 22, 0.04) 40%,
      transparent 75%
    ) !important;
}

/* =========================================================
   HERO CONTENT — BOTTOM LEFT
   ========================================================= */

body.home-page .executive-hero .hero-content,
body.home-page .reference-matter-hero .hero-content {
  position: absolute !important;
  inset: 0 !important;

  z-index: 2 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;

  max-width: none !important;
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  padding:
    0 var(--hero-pad-x)
    clamp(60px, 15vh, 150px) !important;

  box-sizing: border-box !important;

  animation: none !important;
  transform: none !important;
}

/* Prevent the headline and subtitle from fading out */

body.home-page .executive-hero .hero-content > *,
body.home-page .reference-matter-hero .hero-content > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Main headline */

body.home-page .executive-hero .hero-content h1,
body.home-page .reference-matter-hero .hero-content h1 {
  font-family: "Inter", "IBM Plex Sans", Arial, sans-serif !important;

  font-size: var(--hero-h1-size) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;

  text-transform: none !important;
  color: #fff !important;

  max-width: none !important;
  margin: 0 !important;

  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.4) !important;
}

body.home-page .executive-hero .hero-content h1::after,
body.home-page .reference-matter-hero .hero-content h1::after {
  display: none !important;
  content: none !important;
}

/* Subtitle */

body.home-page .reference-matter-hero .hero-description,
body.home-page .executive-hero .hero-description {
  display: block !important;

  margin: clamp(12px, 1.4vw, 24px) 0 0 !important;
  max-width: none !important;

  font-family: "Inter", "IBM Plex Sans", Arial, sans-serif !important;
  font-size: var(--hero-sub-size) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;

  text-transform: none !important;
  color: #fff !important;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

/* Elements not required in the reference design */

body.home-page .executive-hero .hero-kicker,
body.home-page .executive-hero .hero-location,
body.home-page .executive-hero .hero-story-btn,
body.home-page .executive-hero .hero-scroll-hint {
  display: none !important;
}

/* =========================================================
   TABLET — NAVIGATION
   ========================================================= */

@media (max-width: 1180px) {
  html body.home-page .site-header .nav-toggle {
    display: flex !important;
    margin-left: auto;
  }

  html body.home-page .site-header .nav-toggle span {
    background: #fff !important;
  }

  html body.home-page .site-header .nav-hamburger {
    display: none !important;
  }

  html body.home-page .site-header .main-nav {
    background: #214275 !important;
  }

  html body.home-page .site-header .main-nav > a,
  html body.home-page .site-header .main-nav > .nav-dropdown > .nav-drop-trigger,
  html body.home-page .site-header .main-nav > a.nav-cta {
    font-size: 16px !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  html body.home-page .site-header .nav-inner {
    padding: 14px 18px !important;
    gap: 14px;
  }

  html body.home-page .site-header .brand-logo {
    width: clamp(130px, 40vw, 170px) !important;
  }

  body.home-page {
    --hero-pad-x: 20px;
    --hero-h1-size: clamp(30px, 8.6vw, 44px);
    --hero-sub-size: 15px;
  }

  body.home-page .executive-hero.reference-matter-hero {
    min-height: 520px !important;
  }

  body.home-page .executive-hero .hero-content,
  body.home-page .reference-matter-hero .hero-content {
    padding:
      0 20px
      72px !important;
  }

  body.home-page .executive-hero .hero-slide-video {
    object-position: 60% center !important;
  }

  body.home-page .executive-hero .hero-content h1,
  body.home-page .reference-matter-hero .hero-content h1 {
    line-height: 1.05 !important;
  }

  body.home-page .reference-matter-hero .hero-description,
  body.home-page .executive-hero .hero-description {
    margin-top: 14px !important;
    line-height: 1.45 !important;
  }
}

/* =========================================================
   REDUCED MOTION
   Keep the video visible when animations are reduced.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  body.home-page .executive-hero .hero-slide-video {
    animation: none !important;
    transform: none !important;
  }

  body.home-page .executive-hero .hero-content,
  body.home-page .executive-hero .hero-content > * {
    animation: none !important;
    transform: none !important;
  }
}


/* ===== Brighter, clearer homepage hero ===== */

/* 1. Make the video itself brighter, sharper and more colourful */
body.home-page .executive-hero .hero-slide-video {
  filter: brightness(1.14) contrast(1.10) saturate(1.18) !important;
}

/* 2. Lighter dark-overlay: keeps text readable, but lets the footage show */
body.home-page .executive-hero .hero-slide-shade {
  background:
    /* soft fade behind the menu so white nav text stays readable on the bright sky */
    linear-gradient(180deg, rgba(3,16,22,.42) 0, rgba(3,16,22,.16) 90px, rgba(3,16,22,0) 170px),
    /* bottom fade behind the headline */
    linear-gradient(0deg,   rgba(3,16,22,.42) 0%, rgba(3,16,22,.06) 34%, rgba(3,16,22,0) 55%),
    /* very light left fade */
    linear-gradient(90deg,  rgba(3,16,22,.20) 0%, rgba(3,16,22,.04) 45%, rgba(3,16,22,0) 100%) !important;
}