/* v102: portfolio balance, unified opportunities page and contact map. */

/* Equal breathing room around the portfolio heading. */
#works .works-main > .wrap > div:first-child {
  padding-block: clamp(38px, 4.4vw, 62px) !important;
}
#works .works-main > .wrap > div:first-child .works-title {
  margin: 0 !important;
}
#works .works-feature-grid {
  margin-top: 0 !important;
}

/* Keep the catalogue hero vivid and legible without crushing the photograph. */
#works .page-head .pg-bg {
  filter: brightness(1.13) saturate(1.08) contrast(1.02) !important;
}
#works .page-head .pg-scrim {
  background: linear-gradient(90deg,
    rgba(8, 19, 30, .64) 0%,
    rgba(8, 22, 34, .42) 38%,
    rgba(8, 22, 34, .10) 70%,
    rgba(8, 22, 34, .02) 100%) !important;
}

/* The Opportunities cover now matches the compact proportions of Portfolio. */
#services.unified-hub > .page-head,
#contact > .page-head {
  height: clamp(330px, 36vh, 390px) !important;
  min-height: clamp(330px, 36vh, 390px) !important;
  max-height: 390px !important;
  box-sizing: border-box;
  overflow: hidden;
}
#services.unified-hub > .page-head .pg-inner,
#contact > .page-head .pg-inner {
  min-height: inherit;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
#services.unified-hub > .page-head .pg-bg {
  filter: brightness(1.05) saturate(.94) contrast(1.03) !important;
  transform: scale(1.02);
}
#services.unified-hub > .page-head .pg-scrim {
  background: linear-gradient(90deg,
    rgba(12, 34, 51, .76) 0%,
    rgba(16, 46, 68, .54) 45%,
    rgba(18, 52, 76, .15) 78%,
    transparent 100%) !important;
}
#services.unified-hub > .page-head .wrap,
#contact > .page-head .wrap {
  padding-top: clamp(64px, 7vh, 76px) !important;
  padding-bottom: clamp(22px, 3vh, 30px) !important;
}
#services .page-head .headline {
  max-width: 22ch !important;
  color: #fff !important;
  font-size: clamp(2.25rem, 3.6vw, 3.75rem) !important;
  line-height: .98 !important;
  text-shadow: 0 4px 22px rgba(5, 21, 33, .32) !important;
}
#services .page-head .dek,
#services .page-head .pg-lead {
  color: rgba(255, 255, 255, .94) !important;
  text-shadow: 0 2px 14px rgba(5, 21, 33, .32) !important;
}

/* One visual system: three top-level routes, then a compact index and one article. */
#services.unified-hub {
  background:
    radial-gradient(circle at 82% 12%, rgba(89, 148, 180, .12), transparent 31%),
    linear-gradient(180deg, #eef4f6 0%, #f8faf9 43%, #eef4f6 100%) !important;
}
#services .unified-hub-nav {
  top: 72px;
  border: 0 !important;
  background: rgba(237, 244, 246, .94) !important;
  box-shadow: 0 15px 35px rgba(23, 59, 91, .08);
}
#services .unified-hub-nav .wrap {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
#services .unified-hub-tab {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 13px;
  min-height: 72px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(23, 59, 91, .14) !important;
  border-radius: 19px !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #173b5b !important;
  text-align: left;
  box-shadow: 0 10px 25px rgba(23, 59, 91, .07) !important;
}
#services .unified-hub-tab .hub-tab-no {
  grid-row: 1 / 3;
  align-self: center;
  color: #b98526;
  font: 800 .76rem/1 var(--sans);
  letter-spacing: .08em;
}
#services .unified-hub-tab .hub-tab-title {
  align-self: end;
  font: 820 clamp(.9rem, 1.05vw, 1rem)/1.1 var(--sans);
}
#services .unified-hub-tab small {
  align-self: start;
  margin-top: 5px;
  color: #667e90;
  font: 620 .72rem/1.25 var(--sans);
}
#services .unified-hub-tab.active {
  border-color: #173b5b !important;
  background: linear-gradient(140deg, #173b5b, #245f8d) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(23, 59, 91, .20) !important;
}
#services .unified-hub-tab.active small {
  color: rgba(255, 255, 255, .74);
}
#services .unified-hub-tab.active .hub-tab-no {
  color: #f0c86e;
}

#services .hub-panel.hub-panel-v102 {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(38px, 4.5vw, 62px) 0 clamp(66px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(220px, 285px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 52px);
}
#services .hub-panel[hidden],
#services .hub-panel > .chapter[hidden],
#services .hub-panel > .enquiry[hidden] {
  display: none !important;
}
#services .hub-panel > .direction-overview {
  display: none !important;
}
#services .hub-panel > .subpage-index {
  grid-column: 1;
  position: sticky !important;
  top: 176px !important;
  align-self: start;
  border: 0 !important;
  background: transparent !important;
}
#services .hub-panel > .subpage-index .wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column;
  gap: 9px !important;
  padding: 0 !important;
}
#services .hub-panel > .subpage-index button {
  justify-content: flex-start !important;
  min-height: 58px !important;
  padding: 14px 44px 14px 17px !important;
  border: 1px solid rgba(23, 59, 91, .13) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #173b5b !important;
  font-size: .82rem !important;
  line-height: 1.24 !important;
  box-shadow: 0 8px 22px rgba(23, 59, 91, .06) !important;
}
#services .hub-panel > .subpage-index button::before {
  content: attr(data-step);
  flex: 0 0 28px;
  color: #b98526;
  font-size: .69rem;
  letter-spacing: .08em;
}
#services .hub-panel > .subpage-index button::after {
  content: '→' !important;
  position: absolute;
  right: 17px;
  color: #b98526;
  font-size: 1rem !important;
}
#services .hub-panel > .subpage-index button.active {
  border-color: #173b5b !important;
  background: #173b5b !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(23, 59, 91, .18) !important;
}
#services .hub-panel > .subpage-index button.active::before,
#services .hub-panel > .subpage-index button.active::after {
  color: #efc76b;
}
#services .hub-panel > section.chapter,
#services .hub-panel > .enquiry {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(23, 59, 91, .10) !important;
  border-radius: 28px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 55px rgba(23, 59, 91, .10);
  overflow: hidden;
}
#services .hub-panel > section.chapter > .wrap,
#services .hub-panel > .enquiry > .wrap {
  width: 100% !important;
  padding: clamp(32px, 4vw, 54px) !important;
}
#services .hub-panel .chapter-title {
  max-width: 20ch;
  font-size: clamp(1.9rem, 3vw, 3.1rem) !important;
  line-height: 1 !important;
  letter-spacing: -.042em !important;
}
#services .hub-panel .chapter-intro {
  max-width: 66ch;
  font-size: .98rem;
  line-height: 1.65;
}
#services .hub-panel .caps {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#services .hub-panel .cap {
  border: 1px solid rgba(23, 59, 91, .11) !important;
  border-radius: 20px !important;
  background: linear-gradient(155deg, #fff, #edf4f6) !important;
  box-shadow: 0 11px 26px rgba(23, 59, 91, .06);
}
#services .hub-panel .cap.cap-collapsible {
  position: relative;
  grid-template-columns: 42px minmax(0, 1fr) 34px !important;
  gap: 14px !important;
  padding: 19px 20px !important;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#services .hub-panel .cap.cap-collapsible:hover,
#services .hub-panel .cap.cap-collapsible:focus-visible {
  border-color: rgba(23, 59, 91, .30) !important;
  box-shadow: 0 15px 32px rgba(23, 59, 91, .11);
  outline: none;
}
#services .hub-panel .cap.cap-collapsible .idx {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
#services .hub-panel .cap.cap-collapsible h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center;
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  font-weight: 780 !important;
}
#services .hub-panel .cap.cap-collapsible::after {
  content: '+';
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  color: #b98526;
  font: 700 1.35rem/1 var(--sans);
}
#services .hub-panel .cap.cap-collapsible:not(.expanded) .cap-shot,
#services .hub-panel .cap.cap-collapsible:not(.expanded) .cap-body {
  display: none !important;
}
#services .hub-panel .cap.cap-collapsible.expanded {
  grid-template-columns: 42px minmax(0, .9fr) minmax(0, 1.15fr) 34px !important;
  background: #fff !important;
}
#services .hub-panel .cap.cap-collapsible.expanded::after {
  content: '−';
  grid-column: 4;
}
#services .hub-panel .cap.cap-collapsible.expanded .cap-shot {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100%;
  margin-top: 12px !important;
}
#services .hub-panel .cap.cap-collapsible.expanded .cap-body {
  display: block !important;
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
}
#services .hub-panel .hub-context-cta {
  margin-top: 26px !important;
}

/* Contact details and a live office map share the desktop width equally. */
#contact .chapter:first-of-type {
  padding-top: clamp(46px, 5vw, 70px) !important;
  padding-bottom: clamp(54px, 6vw, 84px) !important;
}
#contact .contact-map-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: clamp(28px, 4vw, 54px) !important;
}
#contact .contact-map-left {
  display: flex;
  flex-direction: column;
}
#contact .contact-map-left .data {
  width: 100%;
}
#contact .contact-map-left .contact-proof {
  grid-template-columns: 1fr !important;
  margin-top: 30px !important;
}
#contact .contact-map-card {
  position: relative;
  min-height: 500px;
  border: 1px solid rgba(23, 59, 91, .14);
  border-radius: 28px;
  background: #dfe9ed;
  box-shadow: 0 22px 50px rgba(23, 59, 91, .14);
  overflow: hidden;
}
#contact .contact-map-image-link,
#contact .contact-map-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
}
#contact .contact-map-image-link {
  color: inherit;
}
#contact .contact-map-image {
  object-fit: cover;
  object-position: center;
}
#contact .contact-map-link {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #173b5b !important;
  font: 800 .8rem/1 var(--sans);
  text-decoration: none;
  box-shadow: 0 11px 25px rgba(10, 36, 55, .18);
  backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
  #services .hub-panel.hub-panel-v102 {
    width: min(100% - 32px, 760px);
    grid-template-columns: 1fr;
    padding-top: 28px;
  }
  #services .hub-panel > .subpage-index {
    grid-column: 1;
    position: relative !important;
    top: auto !important;
  }
  #services .hub-panel > .subpage-index .wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #services .hub-panel > section.chapter,
  #services .hub-panel > .enquiry {
    grid-column: 1;
    grid-row: auto;
  }
  #contact .contact-map-layout {
    grid-template-columns: 1fr !important;
  }
  #contact .contact-map-card,
  #contact .contact-map-image-link,
  #contact .contact-map-image {
    min-height: 420px;
  }
}

@media (max-width: 760px) {
  #works .works-main > .wrap > div:first-child {
    padding-block: 34px !important;
  }
  #services.unified-hub > .page-head,
  #contact > .page-head {
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
  }
  #services.unified-hub > .page-head .wrap,
  #contact > .page-head .wrap {
    padding-top: 66px !important;
    padding-bottom: 20px !important;
  }
  #services .page-head .headline {
    font-size: clamp(1.82rem, 8.4vw, 2.5rem) !important;
  }
  #services .unified-hub-nav {
    position: relative !important;
    top: auto !important;
  }
  #services .unified-hub-nav .wrap {
    grid-template-columns: 1fr !important;
  }
  #services .unified-hub-tab {
    min-height: 62px !important;
  }
  #services .hub-panel > .subpage-index .wrap {
    grid-template-columns: 1fr !important;
  }
  #services .hub-panel > section.chapter > .wrap,
  #services .hub-panel > .enquiry > .wrap {
    padding: 28px 22px !important;
  }
  #services .hub-panel .caps {
    grid-template-columns: 1fr !important;
  }
  #services .hub-panel .cap.cap-collapsible.expanded {
    grid-template-columns: 34px minmax(0, 1fr) 30px !important;
  }
  #services .hub-panel .cap.cap-collapsible.expanded::after {
    grid-column: 3;
  }
  #services .hub-panel .cap.cap-collapsible.expanded .cap-shot,
  #services .hub-panel .cap.cap-collapsible.expanded .cap-body {
    grid-column: 2 / 4 !important;
  }
  #services .hub-panel .cap.cap-collapsible.expanded .cap-shot {
    grid-row: 2 !important;
  }
  #services .hub-panel .cap.cap-collapsible.expanded .cap-body {
    grid-row: 3 !important;
  }
  #contact .contact-map-card,
  #contact .contact-map-image-link,
  #contact .contact-map-image {
    min-height: 360px;
  }
}