/* ============================================================================
   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;
}

/* ── 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; }

/* ── 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; }