/* =========================================
   TABLET + MOBILE FIXES ONLY
   Clean rebuild
   Desktop remains controlled by hybrid-redesign.css
   ========================================= */

/* ---------- TABLET ---------- */
@media screen and (min-width: 768px) and (max-width: 1100px) {

  html,
  body {
    overflow-x: hidden;
  }

  .hy-header,
  header,
  #stuck_container,
  #stuck_container.isStuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .pseudoStickyBlock {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hy-hero {
    min-height: auto !important;
    padding: 28px 0 40px !important;
  }

  .hy-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    position: static !important;
    top: 0 !important;
    align-items: start !important;
  }

  .hy-hero-copy {
    margin: 0 !important;
    padding: 20px 20px 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .hy-hero-copy h1 {
    font-size: 40px !important;
    line-height: 1.12 !important;
  }

  .hy-hero-copy p,
  .hy-hero-copy li {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .hy-quote-card {
    width: 100% !important;
    margin: 12px 0 0 !important;
    box-sizing: border-box !important;
  }

  .hy-form-split {
    grid-template-columns: 1fr !important;
  }

  .hy-form input,
  .hy-form select,
  .hy-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
}

/* ---------- PHONE ---------- */
@media screen and (max-width: 767px) {

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: 70px !important;
  }

  /* remove leftover gap / sticky spacer */
  .camera_wrap,
  .camera_fakehover,
  .camera_target,
  .camera_overlayer,
  .camera_thumbs_cont,
  .slider,
  .hero-spacer,
  .top-spacer,
  .pseudoStickyBlock {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* mobile header should not be sticky */
  .hy-header,
  header,
  #stuck_container,
  #stuck_container.isStuck,
  .isStuck {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  /* logo + hamburger row */
  .hy-nav-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: auto !important;
    text-align: left !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .hy-logo {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
  }

  .hy-logo img {
    width: clamp(220px, 60vw, 300px) !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  .hy-header .sf-menu {
    display: none !important;
  }

  .hy-mobile-toggle {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    background: #111111 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
  }

  /* compact dropdown menu */
  .hy-mobile-menu-wrap {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    width: 75% !important;
    max-width: 260px !important;
    height: auto !important;
    max-height: none !important;
    background: #b30000 !important;
    transform: translateY(-8px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28) !important;
    border-radius: 0 0 10px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hy-mobile-menu-wrap.hy-open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hy-mobile-menu-wrap nav {
    width: 100% !important;
  }

  .hy-mobile-menu-wrap .sf-menu {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #b30000 !important;
  }

  .hy-mobile-menu-wrap .sf-menu li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    background: none !important;
  }

  .hy-mobile-menu-wrap .sf-menu li:last-child {
    border-bottom: none !important;
  }

  .hy-mobile-menu-wrap .sf-menu li a {
    display: block !important;
    padding: 10px 14px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  .hy-mobile-menu-wrap .sf-menu li a:hover {
    background: #ffcc00 !important;
    color: #000000 !important;
  }

  /* mobile homepage hero */
  .hy-hero {
    background: url("../images/crane_imgs/Crane 23.jpg") center center / cover no-repeat !important;
    min-height: auto !important;
    padding: 72px 0 30px !important;
  }

  .hy-hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.05) 40%,
      rgba(0,0,0,0.08) 100%
    ) !important;
  }

  .hy-hero .container,
  .container {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .hy-hero-grid,
  .hy-two-col,
  .hy-fleet-grid,
  .hy-trust-grid,
  .hy-project-grid,
  .hy-area-grid,
  .hy-footer-grid,
  .hy-form-split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .hy-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px !important;
    padding: 0 10px !important;
    text-align: center !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .hy-kicker {
    display: block !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.8px !important;
    margin: 0 auto 10px !important;
    max-width: 88% !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45) !important;
  }

  .hy-hero-copy h1 {
    text-align: center !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin: 0 auto 14px !important;
    max-width: 88% !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  }

  .hy-hero-copy p {
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 auto 18px !important;
    max-width: 84% !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  }

  .hy-checks {
    display: none !important;
  }

  .hy-quote-card {
    display: none !important;
  }

  /* global mobile headings */
  .hy-section-head h2 {
    letter-spacing: -0.3px !important;
  }

  /* fleet section tighter and smaller */
  #fleet {
    padding-top: 20px !important;
    margin-top: 0 !important;
  }

  #fleet .hy-section-head {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #fleet .hy-kicker {
    margin-bottom: 6px !important;
  }

  #fleet .hy-section-head h2 {
    font-size: 20px !important;
    margin-top: 0 !important;
    line-height: 1.15 !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hy-hero {
    padding-bottom: 20px !important;
  }

  /* ---------- LOCATION PAGE MOBILE ---------- */
  .hy-location-page .hy-project-hero {
    display: none !important;
  }

  .hy-location-page .hy-section {
    padding: 26px 0 !important;
  }

  .hy-location-page .hy-section-head {
    margin: 0 auto 14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hy-location-page .hy-kicker {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 auto 8px !important;
    text-align: center !important;
    max-width: 92% !important;
  }

  .hy-location-page .hy-section-head h2 {
    font-size: 17px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    margin: 0 auto 10px !important;
    max-width: 92% !important;
    text-align: center !important;
  }

  .hy-location-page .hy-section-head p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
    max-width: 92% !important;
    text-align: center !important;
  }

  .hy-location-page .hy-two-col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .hy-location-page .hy-quote-card {
    padding: 18px 14px !important;
    border-radius: 8px !important;
  }

  .hy-location-page .hy-quote-card h2 {
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }

  .hy-location-page iframe {
    height: 260px !important;
  }
/* =========================================
   PROJECTS PAGE - MOBILE FIXES
   ========================================= */
@media screen and (max-width: 767px){

  .hy-project-hero{
    min-height: auto !important;
    padding: 46px 0 26px !important;
    background-position: center center !important;
  }

  .hy-project-hero-copy{
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 14px !important;
  }

  .hy-project-hero-copy h1{
    font-size: 28px !important;
    line-height: 1.1 !important;
    margin: 0 auto 10px !important;
    max-width: 92% !important;
  }

  .hy-project-hero-copy p{
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
    max-width: 92% !important;
  }

  .hy-section{
    padding: 28px 0 !important;
  }

  .hy-section-head{
    margin: 0 auto 14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hy-section-head h2{
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 auto 10px !important;
    max-width: 92% !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  .hy-section-head p{
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
    max-width: 92% !important;
    text-align: center !important;
  }

  .hy-project-page-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .hy-project-page-card{
    max-width: 420px !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .hy-project-page-card img{
    width: 100% !important;
    height: 170px !important;
    object-fit: cover !important;
    display: block !important;
  }

  .hy-project-page-copy{
    padding: 14px 14px 16px !important;
  }

  .hy-project-page-copy h3{
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .hy-project-page-copy p{
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }

  .hy-project-meta{
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  .hy-project-cta{
    margin-top: 6px !important;
    font-size: 14px !important;
  }

.hy-kicker{
  display: inline-block !important;
  padding: 4px 10px !important;
  background: rgba(0,0,0,0.35) !important;
  border-radius: 4px !important;
	}
@media screen and (max-width: 767px){

  /* improve kicker readability on image backgrounds */
  .hy-kicker{
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-shadow: 
      0 2px 6px rgba(0,0,0,0.7),
      0 1px 2px rgba(0,0,0,0.6) !important;
  }

/* =========================================
   PROJECTS PAGE - MOBILE IMAGE FIX
   ========================================= */
@media screen and (max-width: 767px){

  .hy-project-page-card img{
	border-radius:8px !important;
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    display: block !important;
  }

}

	/* =========================================
   REMOVE WHITE SPACE ABOVE HEADER (DESKTOP)
   ========================================= */

.hy-header,
#stuck_container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* kill any hidden spacer elements */
.top-spacer,
.hero-spacer,
.camera_wrap,
.camera_fakehover {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* tighten topbar if present */
.hy-topbar {
  margin: 0 !important;
  padding: 6px 0 !important;
}

/* remove body gap */
body {
  margin-top: 0 !important;
}
	
	.camera_wrap {
  height: auto !important;
  min-height: 0 !important;
}
	.pseudoStickyBlock {
  display: none !important;
  height: 0 !important;
}
	header {
  margin: 0 !important;
}