/* JOLU Property | aligned Contact Us and Future Developments pages.
   Targeted overrides, deliberately do not alter other pages or the shared menu. */
body.jolu-contact-page {
  background: url('../uploaded/Jolu/contactweb-adjust.jpg') center center / cover fixed no-repeat;
}
body.jolu-future-page {
  background: url('../uploaded/Jolu/careersweb-adjust.jpg') center center / cover fixed no-repeat;
}
.jolu-visually-hidden {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
@media (min-width: 992px) {
  /* Same starting height and sidebar spacing as Our Developments. */
  .jolu-aligned-page .side-nav { margin-top: 36px !important; }
  .jolu-contact-page .content-panel { margin: 36px 0 36px !important; }
  .jolu-future-page .content-panel { margin: 32px 0 36px !important; }
}
/* Contact: balanced dark JOLU panel and sidebar, no absolute/negative input positions. */
.jolu-contact-page .jolu-contact-panel {
  background: rgba(24, 60, 71, .9);
  color: #fff;
  margin: 0;
  padding: 28px 32px 30px;
  min-width: 0;
}
.jolu-contact-page .jolu-contact-panel a { color: #fff; }
.jolu-contact-page .jolu-contact-panel a:hover,
.jolu-contact-page .jolu-contact-panel a:focus { color: #f8b486; }
.jolu-contact-page .jolu-contact-panel > h1 {
  margin: 0 0 20px;
  padding: 0 0 12px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.6);
  font-size: 35px;
  line-height: 1.2;
}
.jolu-contact-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 26px;
}
.jolu-contact-details h2,
.jolu-contact-form h2 {
  margin: 0 0 11px;
  font-weight: 600;
  font-size: 17px;
  color: #fff;
}
.jolu-contact-details address { font-style: normal; line-height: 1.6; margin-bottom: 13px; }
.jolu-contact-details p { line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.jolu-contact-details a { text-decoration: underline; text-underline-offset: 2px; }
.jolu-contact-page .jolu-contact-image {
  width: 100%;
  max-height: 215px;
  min-height: 165px;
  display: block;
  object-fit: cover;
}
.jolu-contact-page .jolu-contact-form {
  border-top: 1px solid rgba(255,255,255,.3);
  padding: 23px 0 0;
  margin: 0;
}
.jolu-contact-page .jolu-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.jolu-contact-page .jolu-contact-fields .form-group { min-width:0; margin-bottom:14px; }
.jolu-contact-page .jolu-contact-fields .form-control {
  width:100%;
  height:46px;
  background:#fff;
  border-radius:2px;
  color:#193c47;
  font-size:15px;
}
.jolu-contact-page .jolu-contact-fields .jolu-message-field { grid-column:1 / -1; }
.jolu-contact-page .jolu-contact-fields textarea.form-control {
  min-height: 110px;
  height: auto;
  padding-top: 11px;
  resize: vertical;
}
.jolu-contact-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; }
.jolu-contact-page .jolu-contact-actions .btn {
  background-color:#ea803b;
  color:#fff;
  border:0;
  font-size:15px;
  font-weight:600;
  text-transform:none;
  padding:11px 20px;
  border-radius:2px;
}
.jolu-contact-page .jolu-contact-actions .btn:hover,
.jolu-contact-page .jolu-contact-actions .btn:focus { background-color:#c96022; color:#fff; }
.jolu-contact-page .jolu-contact-actions .mandatory {
  margin:0;
  color:rgba(255,255,255,.85);
  font-size:13px;
}
@media (min-width: 992px) {
  .jolu-contact-page .jolu-contact-panel { min-height:761px; }
}
/* Future developments: exactly the same gallery component and card proportions
   used on Our Developments, but without hard-coded wrapper heights. */
.jolu-future-page .jolu-future-gallery {
  margin-top: -20px;
  height: auto;
  min-height: 0;
  padding-bottom: 4px;
  overflow: visible;
}
.jolu-future-page .jolu-future-rule { margin-top: -7px; margin-bottom: 16px; }
.jolu-future-page .gallery li { height:253px; }
.jolu-future-page .gallery li a { height: 100%; }
.jolu-future-page .gallery li .title {
  font-size: 1.25em;
  text-shadow:0 1px 4px rgba(0,0,0,.85);
  line-height:1.25;
}
.jolu-future-page .gallery li .subtitle {
  font-size: .92em;
  text-shadow:0 1px 4px rgba(0,0,0,.85);
  line-height:1.2;
}
.jolu-future-page .gallery li a:focus-visible { outline: 3px solid #f4a16a; outline-offset: -3px; }
@media (max-width: 1199px) and (min-width: 992px) {
  .jolu-future-page .gallery li { width: 48%; }
}
@media (max-width: 991px) {
  /* No 781px mobile sidebar or negative-position form; natural stacking. */
  .jolu-aligned-page .side-nav { margin-top:0 !important; height: auto !important; }
  .jolu-aligned-page .side-nav > img { margin-top: 0 !important; }
  .jolu-aligned-page .content-panel { margin: 18px 0 30px !important; }
  .jolu-contact-page .jolu-contact-panel { padding:24px 22px; }
  .jolu-contact-page .jolu-contact-panel > h1 { font-size: 30px; }
  .jolu-future-page .jolu-future-gallery { margin:0; padding:0 15px; }
  .jolu-future-page .jolu-future-rule { margin: 0 0 14px; }
  .jolu-future-page .gallery li { height: 235px; }
  .jolu-future-page .gallery li .subtitle { bottom: 0 !important; font-size:.9em; }
  .jolu-future-page .gallery li .title { bottom: 22px !important; }
}
@media (max-width: 767px) {
  .jolu-contact-intro { grid-template-columns:1fr; gap:18px; }
  .jolu-contact-page .jolu-contact-image { max-height:190px; }
  .jolu-contact-page .jolu-contact-fields { grid-template-columns:1fr; }
  .jolu-contact-page .jolu-contact-panel { padding: 23px 19px; }
  .jolu-future-page .jolu-future-gallery { padding:0 15px; }
  .jolu-future-page .gallery { margin: 0; }
  .jolu-future-page .gallery li {
    float:none;
    width:100%;
    height:250px;
    margin: 0 0 18px;
  }
  .jolu-future-page .gallery li a { height:100%; }
  body.jolu-contact-page, body.jolu-future-page { background-attachment:scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .jolu-future-page .gallery li a { transition:none; }
  .jolu-future-page .gallery li:hover a { transform:none; }
}