/* ============================================================================
   site.css — Prime MEP Consultants structural / brand overrides
   ----------------------------------------------------------------------------
   Layout, logo sizing, and component tweaks that apply regardless of which
   colour palette (theme-template.css or theme-brand.css) is active. Loaded last
   so it wins over the template stylesheet. Accent COLOURS live in the palette
   files, not here.
   ============================================================================ */

/* ── Logo sizing ─────────────────────────────────────────────────────────── */
/* The brand logo is a near-square, mark-dominant lockup (the wordmark is a small
   part of it), so it needs to fill the header bar to stay legible. The template
   caps it at max-height:36px, leaving it tiny inside the 110px-tall bar — override
   with higher specificity so it fills the bar's height. The bar height itself is
   set by the nav, so enlarging the logo (≤ bar height) does NOT make the bar taller. */
.full-width-header .rs-header .menu-area .logo-area img,
.full-width-header .rs-header .menu-area.sticky .logo-area img { max-height: 96px; height: auto; }
/* Keep the preload mark comfortably inside the 100px spinner ring (a 64px square
   nearly touches it). 46px square leaves an even gap all around. */
#pre-load .loader-icon img { width: 46px; height: auto; }
.mobile-navbar-menu .canvas-logo { padding: 0 0 25px; }
.mobile-navbar-menu .canvas-logo img { height: 64px; width: auto; }
.rs-footer.footer-main-home .footer-top .footer-logo a img { height: 132px; width: auto; }

/* Keep the topbar email from forcing lowercase styling; tidy the address row */
.toolbar-area .rs-contact-info li { text-transform: none; }
.toolbar-area .toolbar-sl-share .opening em { text-transform: none; }
/* Keep the topbar contact row on a single 50px line (no wrap → no double-height bar) */
.toolbar-area.topbar-style1 .toolbar-contact .rs-contact-info { white-space: nowrap; }
/* Office-hours clock icon spacing in the topbar "opening" slot */
.toolbar-area.topbar-style1 .toolbar-sl-share .opening em i { margin-right: 6px; }

/* ── Hero slider buttons: identical height (template ships .more vs .know with
   different vertical padding, which made the two buttons mismatch) ─────────── */
.rs-slider.slider-style1 .slider-bottom .readon.more,
.rs-slider.slider-style1 .slider-bottom .readon.more.know {
  padding-top: 16px; padding-bottom: 16px; line-height: 1.2;
  vertical-align: top; border: 0;
}
/* Lay the pair out with a real gap (they used to touch when they wrapped onto
   two lines); on phones keep them side by side as two equal-width buttons. */
.rs-slider.slider-style1 .slider-bottom { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 575px) {
  .rs-slider.slider-style1 .slider-bottom { flex-wrap: nowrap; gap: 10px; }
  .rs-slider.slider-style1 .slider-bottom .readon.more,
  .rs-slider.slider-style1 .slider-bottom .readon.more.know {
    flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap;
    font-size: 15px; padding-left: 10px; padding-right: 10px;
  }
}

/* ── Home side-photo sections ("Your Benefit", "Why Choose Us") ─────────────
   The photos are portrait crops of a person; when the columns stack on tablet
   the box turns landscape, so anchor to the top to keep the face in frame. */
.rs-faq.faq-style1 .faq-images,
.rs-choose.choose-style1 .video-item { background-position: center top; }

/* ── Hero / slider readability ───────────────────────────────────────────── */
.rs-slider.slider-style1 .slider .slider-item { background-color: #0c2230; }
.rs-slider.slider-style1 .slider .slider-item:before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,22,32,.62) 0%, rgba(8,22,32,.34) 42%, rgba(8,22,32,.06) 100%);
  z-index: 1;
}
/* Slide 2 right-aligns its copy, so mirror the scrim or the white text lands on
   the pale blueprint half and disappears. */
.rs-slider.slider-style1 .slider .slider-item.slide-bg2:before {
  background: linear-gradient(270deg, rgba(8,22,32,.62) 0%, rgba(8,22,32,.34) 42%, rgba(8,22,32,.06) 100%);
}
.rs-slider.slider-style1 .slider .slider-item .container { position: relative; z-index: 2; }
/* Match the template's 6-level specificity so the overlay text turns white. */
.rs-slider.slider-style1 .slider .slider-item .slider-inner .content-part .sl-subtitle,
.rs-slider.slider-style1 .slider .slider-item .slider-inner .content-part .sl-title,
.rs-slider.slider-style1 .slider .slider-item .slider-inner .content-part .sl-desc { color: #fff; }
.rs-slider.slider-style1 .slider .slider-item .slider-inner .content-part .sl-subtitle { letter-spacing: 1px; }

/* ── Hero fills the first screen on phones/tablets ───────────────────────────
   Below the desktop breakpoint each slide is at least one viewport tall minus
   the header above it, with the copy centred vertically. 100svh (the viewport
   with the mobile browser's toolbars showing) keeps it from jumping as iOS /
   Android collapse their address bar; plain vh is the fallback. --hdr-h is
   measured by site.js; 96px is the mobile header height if JS hasn't run. */
@media (max-width: 991px) {
  .rs-slider.slider-style1 .slider .slider-item {
    display: flex !important; flex-direction: column; justify-content: center;
    min-height: calc(100vh - var(--hdr-h, 96px));
    min-height: calc(100svh - var(--hdr-h, 96px));
  }
  .rs-slider.slider-style1 .slider .slider-item .container { width: 100%; }
  .rs-slider.slider-style1 .slider .slider-item .slider-inner { padding: 40px 0; }
  /* When the copy outgrows a short screen (e.g. 320×568), slides grow to fit;
     stretch them to the tallest so slide 2 never shows a gap underneath. */
  .rs-slider.slider-style1 .slider .slick-track { display: flex; }
  .rs-slider.slider-style1 .slider .slick-slide { height: auto; }
}
/* Phones turned sideways: the tablet-width type sizes leave the buttons below
   the fold, so use the small-phone sizes when the screen is short. */
@media (max-width: 991px) and (max-height: 500px) and (orientation: landscape) {
  .rs-slider.slider-style1 .slider .slider-item .slider-inner { padding: 20px 0; }
  .rs-slider.slider-style1 .slider .slider-item .slider-inner .content-part .sl-title {
    font-size: 32px; line-height: 40px; margin-bottom: 10px;
  }
  .rs-slider.slider-style1 .slider .slider-item .slider-inner .content-part .sl-desc {
    font-size: 15px; line-height: 25px; margin-bottom: 20px;
  }
}

/* ── Section title accent bar uses the active palette colour ─────────────── */
.sec-title .sub-text { color: var(--brand); }

/* ── Why-Choose skill bars: the template floats each "%" label well above its
   bar, which collides when two bars sit close. Give the labels, bars and rating
   equal-height rows (so they line up) and sit each % neatly above its own bar. */
.rs-choose .working-skill-part .row.y-middle { align-items: flex-start; }
.rs-choose .working-skill-part .col-lg-4 .title-inner {
  height: 38px; margin: 0 0 14px; display: flex; align-items: center;
}
.rs-choose .working-skill-part .col-lg-8 > .rs-skillbar {
  height: 38px; margin: 0 0 14px; display: flex; flex-direction: column; justify-content: center;
}
.rs-choose .working-skill-part .col-lg-8 > .icon-list-item {
  height: 38px; margin: 0; display: flex; align-items: center;
}
.rs-choose .working-skill-part .cl-skill-bar .skillbar .skill-bar-percent {
  top: -24px; right: 0; font-size: 14px; line-height: 1; height: auto; font-weight: 400;
}

/* ── Core values / why-choose icon lists ─────────────────────────────────── */
.value-grid .value-item {
  background: #fff; border: 1px solid #e9eef2; border-radius: 8px;
  padding: 34px 28px; height: 100%; transition: .3s;
}
.value-grid .value-item:hover { box-shadow: 0 18px 40px rgba(15,42,60,.10); transform: translateY(-4px); }
.value-grid .value-icon {
  width: 64px; height: 64px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; margin-bottom: 20px;
  background: var(--brand); color: #fff; font-size: 26px;
}
.value-grid .value-item h4 { font-size: 20px; margin-bottom: 12px; }
.value-grid .value-item p { margin: 0; }

/* ── Service detail layout ───────────────────────────────────────────────── */
/* The service hero reuses the square 620×620 card photo; cap its height so it
   reads as a banner instead of a full-column square. */
.svc-detail .svc-hero {
  width: 100%; height: 380px; object-fit: cover; object-position: center;
  border-radius: 8px; margin-bottom: 30px;
}
.svc-detail h2 { font-size: 30px; margin: 24px 0 16px; }
.svc-detail h3 { font-size: 22px; margin: 24px 0 14px; }
.svc-scope { list-style: none; padding: 0; margin: 0 0 10px; }
.svc-scope li { position: relative; padding: 0 0 12px 32px; }
.svc-scope li:before {
  content: "\f058"; font-family: FontAwesome; position: absolute; left: 0; top: 0;
  color: var(--brand);
}
.svc-sidebar { background: #f5f8fa; border-radius: 8px; padding: 30px 28px; }
.svc-sidebar .sidebar-title { font-size: 20px; margin-bottom: 18px; }
.svc-side-list { list-style: none; padding: 0; margin: 0; }
.svc-side-list li { border-bottom: 1px solid #e3eaef; }
.svc-side-list li:last-child { border-bottom: 0; }
.svc-side-list li a { display: block; padding: 12px 0; color: #010d14; font-weight: 500; }
.svc-side-list li.active a, .svc-side-list li a:hover { color: var(--brand); padding-left: 6px; }
.side-cta { background: var(--brand); color: #fff; border-radius: 8px; padding: 30px 28px; margin-top: 26px; }
.side-cta h4 { color: #fff; font-size: 20px; margin-bottom: 12px; }
.side-cta p { color: rgba(255,255,255,.9); margin-bottom: 18px; }
.btn-side { display: inline-block; background: #fff; color: var(--brand); font-weight: 600; padding: 12px 26px; border-radius: 4px; }
.btn-side:hover { background: #010d14; color: #fff; }

/* ── Projects filter grid ────────────────────────────────────────────────── */
.project-item .project-content .category a { pointer-events: none; }

/* Project cards (home teaser + projects grid). The template overlays the title
   block on the image, so each card's height = the image's natural height — fine
   when every photo is the same size, but our real photos vary, giving a ragged
   grid. Force a uniform cover-cropped image height so all cards align, keep long
   titles clamped to 2 lines, and pad them clear of the 87px arrow box. */
.rs-project.project-style1 .project-item .project-img a img {
  /* Uniform cover-cropped height so all cards align; the sky-heavy source photos
     were pre-cropped to their building band so center cover keeps the building. */
  width: 100%; height: 290px; object-fit: cover; object-position: center; display: block;
}
.rs-project.project-style1 .project-item .project-content .project-inner {
  /* Fixed-height white block, content bottom-aligned, so every card covers the
     same amount of its 290px image regardless of title/category line count —
     keeps the visible image area uniform across the grid. */
  padding-right: 100px; min-height: 138px; align-content: flex-end;
}
.rs-project.project-style1 .project-item .project-content .project-inner .title {
  font-size: 18px; line-height: 25px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rs-project.project-style1 .project-item .project-content .project-inner .category { color: #5a6b75; }

/* ── Team / CEO profile ──────────────────────────────────────────────────── */
.ceo-card { background: #fff; border: 1px solid #e9eef2; border-radius: 10px; overflow: hidden; }
.ceo-photo { background: var(--brand); display: flex; align-items: center; justify-content: center; padding: 30px; }
.ceo-photo img { width: 100%; max-width: 320px; border-radius: 8px; }
.ceo-body { padding: 40px; }
.ceo-body .role { color: var(--brand); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 14px; }
.ceo-body h3 { font-size: 28px; margin: 6px 0 18px; }
.ceo-creds { list-style: none; padding: 0; margin: 18px 0 0; }
.ceo-creds li { position: relative; padding: 0 0 10px 28px; }
.ceo-creds li:before { content: "\f111"; font-family: FontAwesome; font-size: 8px; position: absolute; left: 0; top: 6px; color: var(--brand); }

/* ── Forms (contact + careers; template scopes these to .contact-style1) ──── */
.contact-wrap .from-control {
  width: 100%; padding: 14px 20px; border: 1px solid #e1e8ed; border-radius: 4px;
  background: #fff; font-size: 15px; color: #333; line-height: 1.5;
}
.contact-wrap textarea.from-control { min-height: 160px; resize: vertical; }
.contact-wrap .from-control:focus { border-color: var(--brand); outline: none; }
.contact-wrap .from-control::placeholder { color: #9aa7b0; }

/* ── Careers application form ────────────────────────────────────────────── */
.career-form .mb-25 { margin-bottom: 25px; }
.career-form .cf-label { display: block; font-weight: 600; font-size: 15px; color: #010d14; margin-bottom: 8px; }
.career-form .cf-label span { color: #d92d20; }
.career-form select.from-control {
  appearance: none; height: auto; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6b75' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center;
}
.career-form select.from-control:invalid { color: #9aa7b0; }
.career-form select.from-control option { color: #333; }
.career-form .is-invalid { border-color: #d92d20 !important; }
.career-form .cf-error { display: block; color: #d92d20; font-size: 13px; margin-top: 6px; }
/* The file input covers the whole drop zone (invisible) so click AND drag-drop
   both work natively, and the browser's "required" bubble still anchors to it. */
.career-form .cv-drop {
  position: relative; border: 2px dashed #c5d3dc; border-radius: 6px; background: #f8fafb;
  padding: 28px 20px; text-align: center; color: #5a6b75; transition: border-color .2s, background .2s;
}
.career-form .cv-drop:hover, .career-form .cv-drop.is-over { border-color: var(--brand); background: #eef4f8; }
.career-form .cv-drop.has-file { border-style: solid; border-color: var(--brand); }
.career-form .cv-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.career-form .cv-drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.career-form .cv-drop i { display: block; font-size: 34px; color: #9aa7b0; margin-bottom: 6px; }
.career-form .cv-drop .cv-name { display: block; color: #010d14; font-size: 17px; margin-bottom: 4px; word-break: break-all; }
.career-form .cv-drop span { font-size: 13px; }
.career-form .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.career-form .cf-note { font-size: 13px; color: #5a6b75; margin: 0 0 18px; }
.career-form .cf-status:empty { display: none; }
.career-form .cf-status { border-radius: 6px; padding: 14px 18px; margin-bottom: 20px; }
.career-form .cf-status.is-error { background: #fef3f2; color: #b42318; }
.career-form .cf-status.is-ok { background: #ecfdf3; color: #067647; }
.career-form button[disabled] { opacity: .6; cursor: wait; }
.career-sent { background: #ecfdf3; border-radius: 8px; padding: 36px 32px; color: #067647; }
.career-sent h3 { color: #067647; font-size: 24px; margin: 0 0 10px; }
.career-sent p { margin: 0; color: #1b2a33; }

/* ── Contact page ────────────────────────────────────────────────────────── */
.contact-page-map { padding-bottom: 0; scroll-margin-top: 100px; }
.contact-page-map iframe { width: 100%; height: 450px; border: 0; display: block; }
.contact-info-card { background: #f5f8fa; border-radius: 8px; padding: 36px 32px; height: 100%; }
.contact-info-card .ci-item { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-info-card .ci-item:last-child { margin-bottom: 0; }
.contact-info-card .ci-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.contact-info-card .ci-text h4 { font-size: 18px; margin: 0 0 4px; }
.contact-info-card .ci-text p, .contact-info-card .ci-text a { margin: 0; color: #5a6b75; word-break: break-word; }
.contact-info-card .ci-text a:hover { color: var(--brand); }

/* ── Careers ─────────────────────────────────────────────────────────────── */
.careers-perks .perk { background: #fff; border: 1px solid #e9eef2; border-radius: 8px; padding: 30px; height: 100%; }
.careers-perks .perk i { font-size: 30px; color: var(--brand); margin-bottom: 16px; display: block; }
.careers-perks .perk h4 { font-size: 19px; margin-bottom: 10px; }

/* "Voices From Our Engineers" quote cards (careers page). */
.voice-card {
  background: #fff; border: 1px solid #e9eef2; border-radius: 10px;
  padding: 34px 34px 30px; height: 100%; position: relative;
  display: flex; flex-direction: column;
}
.voice-card .voice-quote { width: 52px; height: auto; margin-bottom: 18px; }
.voice-card > p { font-size: 17px; font-style: italic; line-height: 1.75; color: #0a0a0a; flex: 1 1 auto; }
.voice-card .voice-person { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.voice-card .voice-person img { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px; }
.voice-card .voice-person h4 { font-size: 18px; margin: 0 0 2px; }
.voice-card .voice-person span { color: #5a6b75; font-size: 15px; }

/* ── FAQ accordion (native <details>; no Bootstrap-version dependency) ────── */
.faq-accordion details {
  background: #fff; border: 1px solid #e5ecf0; border-radius: 8px;
  margin-bottom: 16px; padding: 0 26px; transition: box-shadow .3s;
}
.faq-accordion details[open] { box-shadow: 0 12px 30px rgba(15,42,60,.08); border-color: var(--brand); }
.faq-accordion summary {
  list-style: none; cursor: pointer; padding: 22px 30px 22px 0; position: relative;
  font-size: 18px; font-weight: 600; color: #010d14;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary:after {
  content: "\f067"; font-family: FontAwesome; position: absolute; right: 0; top: 22px;
  font-size: 14px; color: var(--brand); transition: transform .3s;
}
.faq-accordion details[open] summary:after { content: "\f068"; }
.faq-accordion .faq-body { padding: 0 0 22px; }
.faq-accordion .faq-body p { margin: 0; color: #5a6b75; }

/* ── Generic content prose for inner pages ───────────────────────────────── */
.prose h2 { font-size: 32px; margin: 30px 0 16px; }
.prose h3 { font-size: 23px; margin: 26px 0 14px; }
.prose p { margin-bottom: 18px; }
.prose .lead-p { font-size: 19px; color: #34434c; }

/* ── Partner placeholder tiles (until real client logos arrive) ──────────── */
.rs-partner .logo-img img { max-height: 90px; width: auto; margin: 0 auto; }

/* ── Testimonials + Leadership: make the two cards equal height and top-aligned
   (the testimonial slider card stretches to match the taller CEO card). ───── */
@media (min-width: 992px) {
  #rs-testimonial > .container > .row { align-items: stretch; }
  #rs-testimonial > .container > .row > .col-lg-6 { display: flex; flex-direction: column; }
  /* .testi-item-content IS the white card; flex-fill it to match the CEO card. */
  #rs-testimonial .testi-item-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  #rs-testimonial .ceo-card { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
}
/* Match the testimonial card's corners/border to the CEO card so both blocks look consistent. */
#rs-testimonial .testi-item-content { border: 1px solid #e9eef2; border-radius: 10px; }

/* Address links (home "Our office" + footer) read as plain text but highlight on hover. */
.rs-contact .contact-box .content-text a { color: inherit; }
.rs-contact .contact-box .content-text a:hover,
.rs-footer .address-widget li .desc a:hover { color: var(--brand); }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.mt-30 { margin-top: 30px; } .mb-0 { margin-bottom: 0; }
.bg-pale { background: #f5f8fa; }
img { max-width: 100%; height: auto; }

/* ── LinkedIn wordmark ("Linked" + boxed "in"), used instead of the bare "in"
   icon where the client wants the full word: footer and the CEO card. ────── */
.li-wordmark {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 20px;
  line-height: 1; letter-spacing: -.3px; color: #fff;
}
.li-wordmark span {
  display: inline-block; margin-left: 2px; padding: 2px 3px 1px; border-radius: 3px;
  background: #fff; color: #0a66c2;
}
.li-wordmark--color { color: rgba(0,0,0,.9); }
.li-wordmark--color span { background: #0a66c2; color: #fff; }
.footer-social a:hover .li-wordmark, .ceo-linkedin a:hover .li-wordmark { opacity: .8; }
.ceo-linkedin a { display: inline-flex; align-items: center; }
.ceo-linkedin .li-wordmark { font-size: 24px; }