/* ============================================================
   Hyperware shared site shell
   Contact page is the visual reference for width/header/footer.
   ============================================================ */

:root { --shell-container: 1040px; }

html { overflow-x:hidden; }
body { overflow-x:hidden; }

.container {
  width:min(var(--shell-container), calc(100% - 40px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Keep the same desktop presentation scale used by the Contact page */
@media (min-width:1000px) {
  body {
    zoom:1.25 !important;
    transform:none !important;
    transform-origin:initial !important;
    width:auto !important;
  }
}

/* HEADER */
.site-header {
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  background:rgba(255,255,255,.98) !important;
  color:#081a3b !important;
  border-bottom:1px solid #e6eaee !important;
  box-shadow:none !important;
}
.site-header .header-row {
  min-height:74px !important;
  display:grid !important;
  grid-template-columns:255px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:18px !important;
}
.site-header .brand {
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
.site-header .hyperware-header-mark {
  display:block !important;
  width:48px !important;
  height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  flex:0 0 48px !important;
  object-fit:contain !important;
  filter:none !important;
}
.site-header .hyperware-header-wordmark {
  display:flex !important;
  align-items:center !important;
  height:48px !important;
  margin:0 !important;
  color:#14285b !important;
  font-family:Inter,Arial,Helvetica,sans-serif !important;
  font-size:25px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.015em !important;
  transform:translateY(1px) !important;
}
.site-header .main-nav {
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:24px !important;
  margin:0 !important;
  padding:0 !important;
  font-family:Inter,Arial,Helvetica,sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}
.site-header .main-nav a {
  position:relative !important;
  display:block !important;
  padding:8px 0 !important;
  border:0 !important;
  color:#081a3b !important;
  background:transparent !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.site-header .main-nav a:hover,
.site-header .main-nav a.active {
  color:#078a2a !important;
}
.site-header .main-nav a.active::after {
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:1px !important;
  height:2px !important;
  background:#0B67C9 !important;
  border-radius:2px !important;
}
.site-header .header-cta {
  display:inline-flex !important;
}
.site-header .final-header-cta {
  min-height:38px !important;
  padding:0 18px !important;
  border-radius:4px !important;
  border:1px solid #078220 !important;
  background:linear-gradient(90deg,#078220,#069428) !important;
  color:#fff !important;
  box-shadow:none !important;
  font-family:Inter,Arial,Helvetica,sans-serif !important;
  font-size:11px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
.site-header .final-header-cta:hover {
  color:#fff !important;
  filter:brightness(1.05) !important;
}
.site-header .menu-toggle {
  display:none !important;
  border:0 !important;
  background:transparent !important;
  color:#081a3b !important;
  font-size:26px !important;
  cursor:pointer !important;
}

/* FOOTER */
.site-footer {
  margin:0 !important;
  padding:0 !important;
  background:linear-gradient(100deg,#052b4c,#061f39 60%,#071a31) !important;
  color:#fff !important;
}
.site-footer .footer-grid {
  display:grid !important;
  grid-template-columns:1.25fr .9fr 1.05fr .7fr .85fr 1.05fr !important;
  gap:22px !important;
  align-items:start !important;
  padding:22px 0 16px !important;
}
.site-footer .footer-grid > div { min-width:0 !important; }
.site-footer .footer-brand {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  margin:0 !important;
  padding:0 !important;
}
.site-footer .footer-brand img {
  display:block !important;
  width:150px !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 0 8px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.site-footer .footer-brand p {
  max-width:230px !important;
  margin:0 0 7px !important;
  color:#d1dbe4 !important;
  font-size:9px !important;
  line-height:1.5 !important;
}
.site-footer .footer-brand strong {
  display:block !important;
  margin:0 !important;
  color:#55b774 !important;
  font-size:9px !important;
  line-height:1.5 !important;
}
.site-footer .footer-grid h3 {
  margin:0 0 8px !important;
  color:#fff !important;
  font-size:9px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  text-transform:none !important;
}
.site-footer .footer-grid a {
  display:block !important;
  margin:4px 0 !important;
  color:#e7eef4 !important;
  font-size:8.5px !important;
  line-height:1.4 !important;
}
.site-footer .socials {
  display:flex !important;
  gap:8px !important;
  margin-top:12px !important;
}
.site-footer .socials span {
  width:25px !important;
  height:25px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.6) !important;
  border-radius:50% !important;
  font-size:9px !important;
}
.site-footer .footer-bottom {
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:20px !important;
  border-top:1px solid rgba(255,255,255,.2) !important;
  padding:10px 0 14px !important;
  color:#d1dae4 !important;
  font-size:8px !important;
}
.site-footer .footer-bottom div {
  display:flex !important;
  gap:22px !important;
}
.site-footer .footer-bottom a { color:#d1dae4 !important; }

/* TABLET */
@media(max-width:900px) {
  body {
    zoom:1 !important;
    transform:none !important;
    width:auto !important;
  }
  .site-header .header-row {
    min-height:72px !important;
    grid-template-columns:minmax(220px,1fr) auto auto !important;
  }
  .site-header .main-nav {
    display:none !important;
    position:absolute !important;
    top:72px !important;
    left:20px !important;
    right:20px !important;
    padding:14px 18px !important;
    background:#fff !important;
    border:1px solid #e5eaee !important;
    box-shadow:0 14px 30px rgba(9,33,57,.10) !important;
  }
  .site-header .main-nav.open {
    display:grid !important;
    gap:0 !important;
  }
  .site-header .main-nav a {
    padding:10px 0 !important;
  }
  .site-header .main-nav a.active::after {
    bottom:4px !important;
  }
  .site-header .menu-toggle {
    display:block !important;
  }
  .site-header .hyperware-header-mark {
    width:44px !important;
    height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    flex-basis:44px !important;
  }
  .site-header .hyperware-header-wordmark {
    height:44px !important;
    font-size:23px !important;
  }
  .site-footer .footer-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:20px !important;
  }
}

/* MOBILE */
@media(max-width:620px) {
  .container {
    width:min(var(--shell-container), calc(100% - 28px)) !important;
  }
  .site-header .header-row {
    min-height:68px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
  }
  .site-header .header-cta {
    display:none !important;
  }
  .site-header .brand { gap:8px !important; }
  .site-header .hyperware-header-mark {
    width:38px !important;
    height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
    flex-basis:38px !important;
  }
  .site-header .hyperware-header-wordmark {
    height:38px !important;
    font-size:20px !important;
  }
  .site-header .main-nav {
    top:68px !important;
    left:14px !important;
    right:14px !important;
  }
  .site-footer .footer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px !important;
  }
  .site-footer .footer-brand {
    grid-column:1/-1 !important;
  }
  .site-footer .footer-bottom {
    flex-wrap:wrap !important;
  }
}
@media(max-width:430px) {
  .site-footer .footer-grid {
    grid-template-columns:1fr !important;
  }
  .site-footer .footer-brand {
    grid-column:auto !important;
  }
  .site-footer .footer-bottom {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }
}


/* SITE-WIDE BREADCRUMBS — ABOUT US REFERENCE */
.breadcrumbs{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  padding-top:18px !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  font-family:Inter,Arial,Helvetica,sans-serif !important;
  font-size:11px !important;
  line-height:1.4 !important;
}
.breadcrumbs a{
  color:#0B8A2B !important;
  font-weight:700 !important;
  text-decoration:none !important;
}
.breadcrumbs a:hover{
  color:#086d22 !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
}
.breadcrumbs span,
.breadcrumbs .breadcrumb-separator{
  color:#93a1af !important;
  font-weight:400 !important;
}
.breadcrumbs strong{
  color:#081835 !important;
  font-weight:700 !important;
}
@media(max-width:620px){
  .breadcrumbs{
    gap:6px !important;
    padding-top:14px !important;
    font-size:10px !important;
  }
}

/* Refined, lower-density global navigation */
@media (min-width:981px){.site-header .header-row{grid-template-columns:220px minmax(0,1fr) auto;gap:22px}.site-header .brand img{width:205px;max-width:100%}.site-header .main-nav{justify-content:center;gap:26px}.site-header .main-nav a{font-size:13px;white-space:nowrap}.site-header .header-cta{white-space:nowrap;padding-inline:17px}}


/* SITE-WIDE BREADCRUMB-TO-TITLE SPACING
   One consistent visual gap between the breadcrumb row and
   the first page heading/hero on every non-home page. */
.breadcrumbs{
  margin-bottom:32px !important;
}

/* Remove page-specific top spacing from the block immediately
   after breadcrumbs so the shared breadcrumb margin controls
   the visual gap consistently. */
.breadcrumbs + .hero,
.breadcrumbs + .services-hero,
.breadcrumbs + section.hero{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Pages whose hero contains an inner layout wrapper */
.breadcrumbs + .hero .hero-grid,
.breadcrumbs + section.hero .hero-grid{
  padding-top:0 !important;
}

/* Keep the first title itself from adding another top gap */
.breadcrumbs + .hero h1:first-child,
.breadcrumbs + .hero .hero-copy h1,
.breadcrumbs + section.hero .hero-copy h1{
  margin-top:0 !important;
}

@media(max-width:620px){
  .breadcrumbs{
    margin-bottom:24px !important;
  }
}


/* SITE-WIDE ACTIVE NAV BAND — BLUE */
.site-header .main-nav a.active::after{
  background:#0B67C9 !important;
}


/* SITE-WIDE CROPPED FULL HYPERWARE HEADER LOGO */
.site-header .header-row{
  min-height:74px !important;
  grid-template-columns:255px minmax(0,1fr) auto !important;
}
.site-header .brand{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
}
.site-header .hyperware-header-mark,
.site-header .hyperware-header-wordmark{
  display:none !important;
}
.site-header .hyperware-header-full-logo{
  display:block !important;
  width:225px !important;
  max-width:225px !important;
  height:auto !important;
  max-height:46px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

/* Keep the approved compact header on tablet */
@media(max-width:900px){
  .site-header .header-row{
    min-height:72px !important;
    grid-template-columns:minmax(220px,1fr) auto auto !important;
  }
  .site-header .hyperware-header-full-logo{
    width:210px !important;
    max-width:210px !important;
    max-height:43px !important;
  }
  .site-header .main-nav{
    top:72px !important;
  }
}

/* Compact mobile treatment */
@media(max-width:620px){
  .site-header .header-row{
    min-height:68px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .site-header .hyperware-header-full-logo{
    width:190px !important;
    max-width:190px !important;
    max-height:40px !important;
  }
  .site-header .main-nav{
    top:68px !important;
  }
}


/* SITE-WIDE VICTORIA GOVERNMENT LOGO */
.vic-logo,
.panel-logo,
.gov-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  overflow:hidden !important;
}

.vic-logo img,
.panel-logo img,
.gov-logo img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:88% !important;
  max-height:118px !important;
  margin:0 auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important;
}

/* Homepage government badge */
.vic-logo{
  min-height:132px !important;
  padding:12px 14px !important;
}

/* Interior-page eServices / government cards */
.panel-logo,
.gov-logo{
  min-height:132px !important;
  padding:12px 14px !important;
  border-radius:10px !important;
}

@media(max-width:700px){
  .vic-logo,
  .panel-logo,
  .gov-logo{
    min-height:105px !important;
    padding:10px !important;
  }
  .vic-logo img,
  .panel-logo img,
  .gov-logo img{
    max-width:84% !important;
    max-height:92px !important;
  }
}




/* FINAL CONSISTENT BREADCRUMB TO PAGE START
   About Us visual rhythm used as the site-wide reference. */

/* A single controlled gap after the breadcrumb row. */
.breadcrumbs{
  margin-bottom:22px !important;
}

/* Every first page section begins immediately after that shared gap. */
.breadcrumbs + section,
.breadcrumbs + .hero,
.breadcrumbs + .ai-hero,
.breadcrumbs + .case-hero,
.breadcrumbs + .services-hero{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Standard hero layouts: remove nested top padding that was adding
   a second gap beneath the breadcrumbs. */
.breadcrumbs + section .hero-grid,
.breadcrumbs + .hero .hero-grid,
.breadcrumbs + section .hero-copy,
.breadcrumbs + .hero .hero-copy{
  padding-top:0 !important;
}

/* HCL Solutions has a minimum-height hero with vertically-centred content.
   Aligning it to the top removes the artificial blank area while preserving
   the two-column hero and graphic. */
.breadcrumbs + .hero .hero-grid{
  align-items:start !important;
}

/* HCL Case Studies uses a unique dark hero with 90px internal top padding.
   Keep the dramatic section, but start the content at the same rhythm. */
.breadcrumbs + .case-hero .case-hero-grid{
  min-height:0 !important;
  padding-top:26px !important;
}

/* Ensure the first visible heading itself does not contribute top margin. */
.breadcrumbs + section h1,
.breadcrumbs + .hero h1,
.breadcrumbs + .ai-hero h1,
.breadcrumbs + .case-hero h1{
  margin-top:0 !important;
}

/* AI & Copilot uses its own ai-hero class. */
.breadcrumbs + .ai-hero{
  padding-top:0 !important;
}

/* Mobile gets a slightly tighter but still comfortable gap. */
@media(max-width:620px){
  .breadcrumbs{
    margin-bottom:18px !important;
  }
  .breadcrumbs + .case-hero .case-hero-grid{
    padding-top:20px !important;
  }
}