/* ==========================================================================
   HESCO brand layer — sits on top of the Industrix template stylesheets.
   The orange→blue recolour was applied directly in bootstrap.min.css and
   style.css so there is only ever ONE palette in the build. This file adds
   what the template did not have.
   ========================================================================== */

:root {
  --hesco-logo-blue: #0000CE;  /* the logo mark itself, untouched */
  --hesco-primary:   #0057B8;  /* fills + links on light  (6.87:1 w/ white) */
  --hesco-accent:    #2B8CFF;  /* eyebrows + icons on navy (5.50:1 on #041332) */
  --hesco-navy:      #041332;
}

/* --- Accent on dark ------------------------------------------------------
   Industrix used its orange for small labels sitting on the navy sections.
   #0057B8 is far too dark there (2.67:1), so on-dark contexts get the
   brighter accent instead. */
.bg-dark .text-primary,
.footer .text-primary,
.page-header .text-primary,
.breadcrumb-item.text-primary,
.bg-dark .btn-link::before,
.footer .btn-link::before {
  color: var(--hesco-accent) !important;
}

/* --- Logo ---------------------------------------------------------------- */
/* New 2026-08-21 HESCO mark: wider panel (2.47:1) than the old wordmark, and
   it carries its own white ground, which is invisible on the white navbar. */
.hesco-logo { height: 52px; width: auto; display: block; }
@media (max-width: 991.98px) { .hesco-logo { height: 42px; } }

.hesco-nav { box-shadow: 0 2px 10px rgba(4, 19, 50, .08); }

/* --- Inner page header ---------------------------------------------------- */
.page-header {
  background: linear-gradient(rgba(4, 19, 50, .82), rgba(4, 19, 50, .82)),
              url(../img/page-header.jpg) center center no-repeat;
  background-size: cover;
}
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }
.page-header .breadcrumb-item a { color: #FFFFFF; text-decoration: none; }

/* --- Hero ---------------------------------------------------------------- */
.hesco-hero {
  background: linear-gradient(rgba(4, 19, 50, .70), rgba(4, 19, 50, .78)),
              var(--hero-image, none) center center no-repeat;
  background-size: cover;
  min-height: 78vh;
  display: flex;
  align-items: center;
}
@media (max-width: 767.98px) { .hesco-hero { min-height: 66vh; } }

/* --- Focus-area cards ----------------------------------------------------- */
.focus-item {
  background: #FFFFFF;
  border: 1px solid rgba(4, 19, 50, .08);
  border-top: 4px solid var(--hesco-primary);
  height: 100%;
  transition: .4s;
}
.focus-item:hover { box-shadow: 0 .5rem 2rem rgba(4, 19, 50, .12); transform: translateY(-4px); }
.focus-item .focus-number {
  font-family: 'Anton', sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: rgba(4, 19, 50, .10);
}
.focus-item .focus-icon { font-size: 2rem; color: var(--hesco-primary); }

/* --- Milestones ----------------------------------------------------------- */
.milestone { border-left: 3px solid rgba(255,255,255,.15); padding-left: 1.5rem; }
.milestone .milestone-year {
  font-family: 'Anton', sans-serif;
  color: var(--hesco-accent);
  font-size: 1.5rem;
  line-height: 1;
}

/* --- Leadership spotlight --------------------------------------------------- */
.leader-photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  object-position: 50% 12%; /* portrait source is head-and-shoulders in the upper
    frame -- default center-crop clipped the top of the head, bias up so the
    full head clears the circle */
  border-radius: 50%;
  border: 4px solid #FFFFFF;
  box-shadow: 0 .5rem 2rem rgba(4, 19, 50, .15);
}
.leader-card h4 { color: var(--hesco-navy); }

/* --- Team / org chart ------------------------------------------------------ */
.org-chart-frame { overflow-x: auto; }
.org-chart {
  display: block;
  margin: 0 auto;
  min-width: 760px;
  width: 100%;
  height: auto;
}
.org-chart-lines { stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; fill: none; }

.org-node { stroke-width: 1.6; }
.org-node--apex { fill: var(--hesco-primary); }
.org-node--ceo { fill: #FFFFFF; stroke: var(--hesco-primary); stroke-width: 2; }
.org-node--pa { fill: #FFFFFF; stroke: var(--hesco-accent); stroke-dasharray: 4 3; }
.org-node--dept { fill: #FFFFFF; stroke: var(--hesco-primary); }
.org-node--mid { fill: #FFFFFF; stroke: var(--hesco-accent); stroke-width: 1.3; }
.org-node--staff { fill: rgba(255, 255, 255, .92); stroke: var(--hesco-navy); stroke-width: 1.1; }

.org-label {
  font-family: 'Anton', sans-serif;
  letter-spacing: .02em;
  fill: var(--hesco-navy);
}
.org-label--apex { font-size: 18px; fill: #FFFFFF; }
.org-label--ceo { font-size: 17px; }
.org-label--dept { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 13px; }
.org-label--mid { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; font-size: 11.5px; }
.org-label--staff { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; font-size: 11px; }

.org-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8rem;
  color: rgba(255, 255, 255, .68);
}
.org-chart-legend span { display: inline-flex; align-items: center; gap: .5em; }
.org-chart-legend__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.org-chart-legend__swatch--apex { background: var(--hesco-primary); }
.org-chart-legend__swatch--dept { background: #FFFFFF; border: 1.5px solid var(--hesco-primary); }
.org-chart-legend__swatch--mid { background: #FFFFFF; border: 1.5px solid var(--hesco-accent); }
.org-chart-legend__swatch--staff { background: rgba(255, 255, 255, .92); border: 1px solid var(--hesco-navy); }

/* --- Client + accreditation chips ------------------------------------------ */
.chip {
  display: inline-block;
  border: 1px solid rgba(4, 19, 50, .15);
  padding: .55rem 1.1rem;
  margin: 0 .5rem .75rem 0;
  font-weight: 600;
  color: var(--hesco-navy);
  background: #FFFFFF;
}
.chip-accred { border-left: 4px solid var(--hesco-primary); }
.chip-accred .chip-abbr { font-family: 'Anton', sans-serif; margin-right: .5rem; color: var(--hesco-primary); }

/* --- WhatsApp float -------------------------------------------------------- */
.whatsapp-float {
  position: fixed; bottom: 45px; left: 45px; z-index: 99;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 .25rem 1rem rgba(0,0,0,.2);
}
.whatsapp-float:hover { color: #fff; opacity: .9; }
@media (max-width: 575.98px) { .whatsapp-float { bottom: 20px; left: 20px; } }

/* Bootstrap 5.0 stops at py-5; the layout wants one step larger. */
.py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
@media (max-width: 767.98px) { .py-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } }

/* Safety net: Bootstrap's .text-body is #2a2d1d, which is unreadable on the
   navy sections. Anything inside .bg-dark / .footer gets a light body colour. */
.bg-dark .text-body, .footer .text-body { color: rgba(255, 255, 255, .75) !important; }
.bg-dark p:not([class*="text-"]), .footer p:not([class*="text-"]) { color: rgba(255, 255, 255, .75); }

/* Template attribution is a licence condition; keep it legible but secondary
   to the Sempya credit. */
.footer .copyright .template-credit { opacity: .6; font-size: .875rem; }

/* --- OEM brand logos -------------------------------------------------------
   Every logo is pre-rendered onto an identical 500x200 white tile, so the grid
   is uniform by construction rather than by CSS gymnastics.

   Uses grid + place-items, NOT flex: a flex item defaults to min-width:auto,
   which stops an image shrinking below its intrinsic width. That is what made
   the logos overflow their cells and overlap each other. */
.brand-logo {
  aspect-ratio: 5 / 2;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--beige-border, rgba(4,19,50,.12));
  transition: .3s;
}
.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .35rem .6rem;
}
.brand-logo:hover { box-shadow: 0 .35rem 1.25rem rgba(4,19,50,.14); border-color: var(--hesco-primary); }

/* --- Our Work tiles --------------------------------------------------------
   Real workshop photography at mixed aspect ratios; a fixed-ratio frame with
   object-fit: cover keeps the row even without distorting anything. */
.work-tile { position: relative; overflow: hidden; background: var(--hesco-navy); border-radius: 14px; }
.work-tile img {
  width: 100%; aspect-ratio: 7 / 5; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.work-tile:hover img { transform: scale(1.05); }
.work-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: 0 0 14px 14px;
  padding: .75rem 1rem;
  background: linear-gradient(transparent, rgba(4,19,50,.88));
  color: #fff; font-size: .875rem;
}

/* --- Client logos ----------------------------------------------------------
   Same construction as the OEM brand tiles, but the source logos are
   white-on-dark, so the tiles are navy - on white they would be invisible.
   Grid, not flex, for the same min-width:auto reason. */
.client-logo {
  aspect-ratio: 5 / 2;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #020D24;
  border: 1px solid rgba(255,255,255,.08);
  transition: .3s;
}
.client-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.client-logo:hover { box-shadow: 0 .35rem 1.25rem rgba(4,19,50,.25); transform: translateY(-2px); }

/* --- Hero carousel ---------------------------------------------------------
   The old hero used a flat rgba(4,19,50,.70-.78) wash over the whole frame,
   which is why the faces disappeared. Replaced with a HORIZONTAL gradient:
   heavy on the left where the text sits, nearly clear on the right so the
   photograph actually reads. Plus a light bottom vignette so the buttons keep
   their edge against a busy image. */
.hesco-hero-carousel { position: relative; }
.hesco-slide {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(4,19,50,.00) 55%, rgba(4,19,50,.45) 100%),
    linear-gradient(90deg,
      rgba(4,19,50,.86) 0%,
      rgba(4,19,50,.70) 32%,
      rgba(4,19,50,.34) 62%,
      rgba(4,19,50,.18) 100%),
    var(--slide-image) center center / cover no-repeat;
  background-color: var(--hesco-navy);
}
@media (max-width: 991.98px) {
  /* Narrow screens put text over the middle of the frame, so the horizontal
     gradient stops working - fall back to a gentler vertical one. */
  .hesco-slide {
    min-height: 66vh;
    background:
      linear-gradient(180deg, rgba(4,19,50,.72) 0%, rgba(4,19,50,.58) 55%, rgba(4,19,50,.75) 100%),
      var(--slide-image) center center / cover no-repeat;
  }
}
.hesco-slide .hesco-eyebrow { color: var(--hesco-accent); letter-spacing: .15em; }
.hesco-slide h1 { text-shadow: 0 2px 18px rgba(4,19,50,.55); }
.hesco-slide p  { text-shadow: 0 1px 10px rgba(4,19,50,.55); }

/* Owl controls */
.hesco-hero-carousel .owl-nav { position: absolute; inset: 0; pointer-events: none; }
.hesco-hero-carousel .owl-nav button.owl-prev,
.hesco-hero-carousel .owl-nav button.owl-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; pointer-events: auto;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important; font-size: 1.4rem; line-height: 1; transition: .3s;
}
.hesco-hero-carousel .owl-nav button.owl-prev { left: 18px; }
.hesco-hero-carousel .owl-nav button.owl-next { right: 18px; }
.hesco-hero-carousel .owl-nav button:hover { background: var(--hesco-primary) !important; }
.hesco-hero-carousel .owl-dots {
  position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
}
.hesco-hero-carousel .owl-dot { display: inline-block; }
.hesco-hero-carousel .owl-dot span {
  display: inline-block; width: 26px; height: 4px; margin: 0 4px;
  background: rgba(255,255,255,.4); transition: .3s;
}
.hesco-hero-carousel .owl-dot.active span { background: var(--hesco-accent); width: 40px; }
@media (max-width: 767.98px) { .hesco-hero-carousel .owl-nav { display: none; } }