/* ==========================================================================
   HANBO — scoped enhancements
   Colors, fonts, radius, footer and nav are untouched — this file only
   restyles specific sections that were requested to change.
   ========================================================================== */

/* ---- Desktop mega-nav dropdown: guarantee opaque background + sits
   above page content. The export's .mega-nav_dropdown-list.w--open rule
   sets a transparent background, so page content behind it can show
   through. (Do NOT set position/z-index on .nav_dropdown-menu itself —
   the dropdown's full-width layout depends on it staying position:static
   so the panel positions relative to the wider nav bar, not the narrow
   "Services" toggle button.) ---- */
.mega-nav_dropdown-list-wrapper,
.mega-nav_dropdown-list-wrapper.w--open {
  background-color: #fff !important;
  flex-direction: column;
}
/* Paired with js/nav-dropdown-fix.js: while any nav dropdown is open,
   hide just the hero's heading/paragraph text (not the background image
   or its dark tint) so it can't visually bleed through the dropdown
   panel. The page still looks normal — only the two lines of hero copy
   are briefly hidden, and only for as long as the menu is open. */
body.nav-dropdown-open .hero-overlay h1,
body.nav-dropdown-open .hero-overlay p,
body.nav-dropdown-open .hero-overlay-2 h1,
body.nav-dropdown-open .hero-overlay-2 p,
body.nav-dropdown-open .hero-overlay h2,
body.nav-dropdown-open .hero-overlay-2 h2 {
  visibility: hidden;
}

/* ---- Definitive fix for clicks on the last dropdown item (Partition
   Works) falling through to the hero banner underneath on the 6 service
   detail pages: rather than continuing to fight over which element has
   the higher stacking order (tried and didn't fully resolve it), simply
   make the hero's animated front layer stop accepting pointer/click
   events at all while any dropdown is open. A click can then never land
   on it no matter what the effective stacking turns out to be. */
body.nav-dropdown-open .hero_front,
body.nav-dropdown-open .card-3.hero-overlay,
body.nav-dropdown-open .card.hero-overlay,
body.nav-dropdown-open .hero-overlay-2 {
  pointer-events: none !important;
}

/* ---- Mobile hamburger menu: functional fix, not a design change. The
   export's .nav_menu rule sets a transparent background, overriding the
   framework's default opaque backdrop for the open mobile menu and letting
   page content show through behind it. Forced solid here. ---- */
.nav_menu[data-nav-menu-open],
[data-nav-menu-open] {
  background-color: #fff !important;
  box-shadow: 0 16px 32px -12px rgba(24, 24, 24, .25);
}

/* ---- Projects page: quiet left accent tag on each project card ---- */
.content-block-2 {
  border-left: 3px solid var(--_colors---core-accent-color--accent-primary, #4f75fe);
  padding-left: .8rem;
}

/* ==========================================================================
   Index page — "Core Engineering Services": compact thumbnail list
   (replaces the old carousel/grid). Small square thumbnail + title +
   description per row, plain, no big hero-sized photos.
   ========================================================================== */
.section.mainsectionabout {
  height: auto;
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}
.mainsectionabout .header.is-align-center {
  margin: 4rem auto 2.5rem;
}

/* ==========================================================================
   Index page — "Proven results. Trusted performance.": borderless
   two-column icon + text list (replaces the card grid).
   ========================================================================== */
.container.containerresult {
  height: auto;
  padding-top: 5rem;
  padding-bottom: 5.5rem;
}
.sectionresult .header.is-align-center {
  margin: 0 auto 3rem;
}

.proven-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4rem;
  row-gap: 2.75rem;
  max-width: 56rem;
  margin: 0 auto;
}
.proven-item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}
.stat-icon {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--_colors---core-accent-color--accent-primary, #4f75fe) 12%, transparent);
  margin-top: .1rem;
}
.stat-icon img {
  width: 1.15rem;
  height: 1.15rem;
  filter: invert(37%) sepia(84%) saturate(3000%) hue-rotate(216deg) brightness(101%) contrast(97%);
}
.proven-text .label {
  margin: 0 0 .15rem;
  font-family: "Instrument Sans", sans-serif;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--_colors---text-color--text-secondary, #767676);
  text-transform: uppercase;
}
.proven-text h3 {
  margin: 0 0 .4rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.proven-text p:not(.label) {
  margin: 0;
  color: var(--_colors---text-color--text-secondary, #767676);
  font-size: .95rem;
  line-height: 1.55em;
}

.services-md {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0;
  max-width: 52rem;
  margin: 0 auto;
  border: 1px solid var(--_colors---border-color--border-primary, #e2ded3);
  border-radius: .5rem;
  overflow: hidden;
}
.services-md-nav {
  display: flex;
  flex-direction: column;
  padding: .5rem;
  border-right: 1px solid var(--_colors---border-color--border-primary, #e2ded3);
  background: var(--_colors---background-color--bg-secondary, #fbf9f5);
}
.services-md-item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .7rem .8rem;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 .3rem .3rem 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: "Instrument Sans", sans-serif;
  transition: background-color .15s ease, border-color .15s ease;
}
.services-md-item:hover {
  background: color-mix(in srgb, var(--_colors---core-accent-color--accent-primary, #4f75fe) 8%, transparent);
}
.services-md-item.is-active {
  background: color-mix(in srgb, var(--_colors---core-accent-color--accent-primary, #4f75fe) 12%, transparent);
  border-left-color: var(--_colors---core-accent-color--accent-primary, #4f75fe);
}
.services-md-num {
  font-size: .68rem;
  color: var(--_colors---text-color--text-secondary, #767676);
  flex: none;
}
.services-md-item.is-active .services-md-num {
  color: var(--_colors---core-accent-color--accent-primary, #4f75fe);
}
.services-md-name {
  font-size: .88rem;
  font-weight: 500;
  color: var(--_colors---text-color--text-secondary, #767676);
  line-height: 1.35em;
}
.services-md-item.is-active .services-md-name {
  color: var(--_colors---core-accent-color--accent-primary, #4f75fe);
}
.services-md-panel {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.services-md-image {
  width: 100%;
  height: 220px;
  border-radius: .4rem;
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.services-md-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-md-panel h3 {
  margin: 0 0 .5rem;
  font-size: 1.3rem;
  font-weight: 700;
}
.services-md-panel p {
  margin: 0 0 1rem;
  color: var(--_colors---text-color--text-secondary, #767676);
  font-size: .95rem;
  line-height: 1.6em;
}
.services-md-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--_colors---core-accent-color--accent-primary, #4f75fe);
  text-decoration: none;
}
.services-md-arrow {
  font-style: normal;
  transition: transform .2s ease;
}
.services-md-cta:hover .services-md-arrow {
  transform: translateX(3px);
}

@media screen and (max-width: 767px) {
  .proven-list {
    grid-template-columns: 1fr;
  }
  .services-md {
    grid-template-columns: 1fr;
  }
  .services-md-nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--_colors---border-color--border-primary, #e2ded3);
  }
  .services-md-item {
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: .3rem;
  }
  .services-md-item.is-active {
    border-bottom-color: var(--_colors---core-accent-color--accent-primary, #4f75fe);
  }
  .services-md-panel {
    padding: 1.5rem;
  }
  .services-md-image {
    height: 180px;
  }
}

/* ---- Mega-nav dropdown "View all services" link: was rendering as a
   bare, unstyled link floating below the white dropdown card. Moved
   inside the card and styled as a proper closing CTA row. ---- */
.mega-nav_view-all {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--_colors---border-color--border-primary, #e2ded3);
  font-weight: 600;
  font-size: .92rem;
  color: var(--_colors---core-accent-color--accent-primary, #4f75fe) !important;
}
.mega-nav_view-all span {
  transition: transform .2s ease;
}
.mega-nav_view-all:hover span {
  transform: translateX(3px);
}

/* ---- Services page: 7 cards in a fixed 3-column grid leaves the last
   row with a single lonely card and two empty slots. Switch to a
   responsive auto-fit grid so it wraps to whatever fits per row (4+3 on
   a typical desktop width) with no empty gaps. ---- */
.services-page-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* ---- Services page: "Certified Excellence & Compliance" strip has 4
   items in a 3-column grid, leaving 1 lonely item on its own row.
   2 columns x 2 rows reads as complete instead. ---- */
.services-compliance-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media screen and (max-width: 767px) {
  .services-compliance-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Services page: image-caption-overlay treatment for the 7 service
   cards (title sits on the photo itself with a dark gradient, instead of
   as plain text above the description). ---- */
.service-overlay-img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: .5rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.service-overlay-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.service-overlay-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,16,16,0) 45%, rgba(16,16,16,.78) 100%);
}
.service-overlay-img:hover img {
  transform: scale(1.06);
}
.service-overlay-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  z-index: 1;
}

/* ---- Services page header: small stat row under the heading ---- */
.services-stat-row {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin: 1rem 0 1.5rem;
}
.services-stat-row > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.services-stat-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--_colors---core-accent-color--accent-primary, #4f75fe);
}
.services-stat-label {
  font-size: .72rem;
  color: var(--_colors---text-color--text-secondary, #767676);
}

/* ---- Services page cards: plain photo (title moved below, not overlaid)
   + solid blue CTA buttons instead of black. ---- */
.service-plain-img {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: .5rem;
  overflow: hidden;
  margin-bottom: .9rem;
}
.service-plain-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.service-plain-img:hover img {
  transform: scale(1.06);
}
.service-cta-blue {
  background-color: var(--_colors---core-accent-color--accent-primary, #4f75fe) !important;
}

/* ---- Services page cards: default shows the photo with the title
   overlaid on a gradient; hovering reveals the description and a
   text-arrow link on top of a darker gradient. Falls back to always
   showing the description on touch devices (no hover). ---- */
.service-hover-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: .5rem;
  overflow: hidden;
}
.service-hover-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.service-hover-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,16,16,0) 45%, rgba(16,16,16,.8) 100%);
  transition: opacity .25s ease;
}
.service-hover-card .service-overlay-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  z-index: 2;
  transition: opacity .25s ease, transform .25s ease;
}
.service-hover-reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  opacity: 0;
  transition: opacity .25s ease;
}
.service-hover-desc {
  color: #fff;
  font-size: .85rem;
  line-height: 1.45em;
  margin-bottom: .6rem;
  opacity: .92;
}
.service-hover-link {
  color: #fff;
  font-weight: 600;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.service-hover-link i {
  font-style: normal;
  transition: transform .2s ease;
}

@media (hover: hover) {
  .service-hover-card:hover img {
    transform: scale(1.06);
  }
  .service-hover-card:hover::after {
    background: linear-gradient(180deg, rgba(16,16,16,.15) 0%, rgba(16,16,16,.88) 100%);
  }
  .service-hover-card:hover .service-overlay-caption {
    opacity: 0;
    transform: translateY(-6px);
  }
  .service-hover-card:hover .service-hover-reveal {
    opacity: 1;
  }
  .service-hover-card:hover .service-hover-link i {
    transform: translateX(3px);
  }
}
@media (hover: none) {
  .service-hover-card {
    aspect-ratio: auto;
    overflow: visible;
  }
  .service-hover-card img {
    aspect-ratio: 4 / 3;
    display: block;
    border-radius: .5rem;
  }
  .service-hover-card::after {
    display: none;
  }
  .service-overlay-caption {
    position: static;
    color: var(--_colors---text-color--text-primary, #181818);
    padding: .8rem 0 0;
  }
  .service-hover-reveal {
    opacity: 1;
    position: static;
    background: none;
    padding: .3rem 0 0;
  }
  .service-hover-desc {
    color: var(--_colors---text-color--text-secondary, #767676);
  }
  .service-hover-link {
    color: var(--_colors---core-accent-color--accent-primary, #4f75fe);
  }
}

/* ---- Services page header: more breathing room before the grid starts,
   and a subtle divider so the header block reads as a distinct section
   rather than running straight into the cards. ---- */
.header-4.is-align-center {
  padding-bottom: 2rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--_colors---border-color--border-primary, #e2ded3);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.subheading-3.w-richtext {
  max-width: 34rem;
  margin: 0 auto;
}

/* ---- Services page: the header+grid section was pinned to a fixed
   1485px height in the export. With the trimmed header text, actual
   content is much shorter than that, leaving a large empty gap (and,
   depending on alignment, empty space above the heading too). Let it
   size to its own content instead. ---- */
.section.is-secondary {
  height: auto !important;
}

/* ---- Certified Excellence & Compliance: ring-badge treatment (option 4)
   — icon inside a blue ring, label below, no description text. ---- */
.compliance-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem 2rem;
  margin: 2rem auto 3rem;
  max-width: 40rem;
}
.compliance-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7rem;
  text-align: center;
}
.compliance-badge-ring {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 2px solid var(--_colors---core-accent-color--accent-primary, #4f75fe);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .6rem;
}
.compliance-badge-ring img {
  width: 1.5rem;
  height: 1.5rem;
  filter: invert(37%) sepia(84%) saturate(3000%) hue-rotate(216deg) brightness(101%) contrast(97%);
}
.compliance-badge p {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
}

/* ---- Contact Us CTA below the badges: a short connecting line + a
   more prominent button, so it reads as the natural next step after
   the credibility section rather than a stray button. ---- */
/* ---- Certified Excellence & Compliance: minimal text-only contact
   line below the badges — no button, no box, just two lines. ---- */
.services-contact-minimal {
  text-align: center;
  margin: 2.5rem 0 3rem;
}
.services-contact-minimal p {
  margin: 0 0 .3rem;
  font-size: .92rem;
  color: var(--_colors---text-color--text-secondary, #767676);
}
.services-contact-minimal a {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  color: var(--_colors---core-accent-color--accent-primary, #4f75fe);
  text-decoration: none;
  padding-bottom: 3px;
}
.services-contact-minimal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--_colors---core-accent-color--accent-primary, #4f75fe);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.services-contact-minimal a:hover::after {
  transform: scaleX(1);
}
.services-contact-minimal a span {
  display: inline-block;
  transition: transform .2s ease;
}
.services-contact-minimal a:hover span {
  transform: translateX(4px);
}

/* ---- Breathing room between the services grid section and the
   Certified Excellence & Compliance section below it. ---- */
.section.is-secondary + .section {
  padding-top: 3.5rem;
}

/* ---- Defensive: make sure every mega-nav dropdown link is always
   clickable and shows hover feedback, regardless of column length. ---- */
.mega-nav_link-item {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* ---- Note: an internal max-height + overflow-y:auto scroll fix was
   tried here and removed — it risked interfering with continuous mouse
   hover across the dropdown, which is what the JS fight-back handler in
   nav-dropdown-fix.js now solves directly instead. ---- */

/* ---- On service detail pages the hero section sits directly beneath
   the nav and can establish its own stacking context (from the reveal
   animation), which has been letting it intercept clicks over part of
   the open dropdown — most visible on the tallest column (where
   Partition Works now sits). Force the dropdown panel into an isolated,
   always-on-top stacking context. This only sets z-index/isolation, not
   position, so it cannot affect the dropdown's width like an earlier
   attempt did. ---- */
.mega-nav_dropdown-list.w--open {
  isolation: isolate;
  z-index: 999999 !important;
}
.mega-nav_dropdown-list-wrapper.w--open {
  position: relative;
  z-index: 1;
}

/* ---- Note on nav entrance: the other pages' "nav fades in" isn't a
   fixed-speed CSS animation at all — it's a hide-until-resources-load
   switch (the big visibility:hidden selector above), so its perceived
   speed just depends on page load timing and varies per visit/device.
   There's nothing to numerically match it to. A manufactured animation
   on the service pages only created a second, different, actually-fixed
   effect that read as "inconsistent" next to that one. Removed — every
   page now behaves the same way (nav appears once resources are ready,
   no artificial animation anywhere), so there is no more mismatch to
   notice. Scoped to .svc-page only — the other pages (index, projects,
   safety-quality, about-us, services) are untouched and keep their own
   existing behaviour exactly as it was. ---- */
.svc-page .nav_container {
  visibility: visible !important;
}

/* ---- Give the 7 service pages the same real behaviour as the other
   pages (nav hidden until the page is actually ready, then a smooth
   fade in) — without depending on Webflow's own hide/reveal switch,
   which only works correctly on pages that have the matching IX2
   interaction wired up. js/nav-dropdown-fix.js adds .is-ready to
   .nav_container on window load; until then it's invisible. ---- */
.svc-page .nav_container {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .4s ease, transform .4s ease;
}
.svc-page .nav_container.is-ready {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .svc-page .nav_container {
    opacity: 1;
    transform: none;
    transition: none;
  }
}