/* ------------------------------------------------------------------
   The Cambridge Builder — additions on top of the purchased template.
   Loaded after css/style.css. Values copied from the template's own
   field / typography rules so nothing here changes the template look.
   ------------------------------------------------------------------ */

/* 1. Select field — style.css only covers input + textarea, so a
      <select> fell back to the tiny native OS widget. Matched to
      input[type='text'] / .input-gray exactly. */

select.input-gray{
  display: inline-block;
  width: 100%;
  font-size: 1rem;
  color: #3d3d3d;
  background-color: #f6f6f6;
  border: 1px solid #d1d1d1;
  border-radius: 0;
  padding: 0.2rem 1rem 0;
  height: 3.6em;
  line-height: 3.4em;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath fill='%23999999' d='M0 0h11L5.5 7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  padding-right: 3rem;
  -webkit-transition: all .15s;
       -o-transition: all .15s;
          transition: all .15s;
}

select.input-gray:focus{
  background-color: #fff;
  border-color: #cee002;
  outline: 0;
}

select.input-gray:invalid{
  color: #999999;
}

/* 2. FAQ accordion — flattened off Bootstrap's rounded gray panels
      into the template's borderless vocabulary. */

.faq-accordion .panel,
.faq-accordion .panel-default{
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.faq-accordion .panel + .panel{
  margin-top: 0;
}

.faq-accordion .panel-heading{
  background: none;
  border: 0;
  border-top: 1px solid #ebebeb;
  border-radius: 0;
  padding: 0;
}

.faq-accordion .panel-title{
  font-size: 1.28rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
}

.faq-accordion .panel-title > a{
  display: block;
  position: relative;
  color: #000;
  padding: 2rem 4rem 2rem 0;
  text-decoration: none;
  -webkit-transition: color .15s;
       -o-transition: color .15s;
          transition: color .15s;
}

.faq-accordion .panel-title > a:hover,
.faq-accordion .panel-title > a:focus{
  color: #999999;
}

.faq-accordion .panel-title > a:after{
  content: '+';
  position: absolute;
  right: 0;
  top: 1.6rem;
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
  color: #cee002;
}

.faq-accordion .panel-title > a[aria-expanded='true']:after{
  content: '\2013';
}

.faq-accordion .panel-body{
  border: 0;
  padding: 0 4rem 2.4rem 0;
}

.faq-accordion .panel-body p{
  margin: 0;
}

/* 3. Contact-panel tel:/mailto: links — the template never linked these,
      so they inherited the global lime link colour (1.47:1 on white).
      Give them the template's field/body text colour instead. */

.row-contact a,
.contact-row a{
  color: #3d3d3d;
}

.row-contact a:hover,
.row-contact a:focus,
.contact-row a:hover,
.contact-row a:focus{
  color: #000;
}

/* 4. Bootstrap's .panel-group .panel-heading + .panel-collapse > .panel-body
      (specificity 0,3,1) was reinstating a #ddd hairline under each open
      question. Matched specificity to clear it. */

.faq-accordion.panel-group .panel-heading + .panel-collapse > .panel-body{
  border-top: 0;
}

/* 5. Brand lockup — the supplied logo is a wide horizontal lockup that
      already contains the wordmark, so the .brand-info text block is
      removed and the image given room to stay legible. */

.brand img{
  height: 3.8rem;
  width: auto;
  margin-right: 0;
}

.footer .brand img{
  height: 4.4rem;
}

@media (max-width: 767px){
  .brand img{
    height: 3rem;
  }
}

/* 6. Navbar phone number — now a tel: link with a phone icon. The template's
      global link colour is the lime accent, so the address is pinned back to
      its original muted grey / dark pairing. */

.navbar-address .navbar-phone,
.navbar-address .navbar-phone:hover,
.navbar-address .navbar-phone:focus{
  color: inherit;
  text-decoration: none;
}

.navbar-address .navbar-phone .icon-telephone{
  position: relative;
  top: 0.15em;
  margin-right: 0.6rem;
  font-size: 1.25em;
  color: #cee002;
}

.navbar-address .navbar-phone:hover .text-dark{
  color: #cee002;
}

/* 7. Team member contact lines (phone / LinkedIn under a profile). */

.team-contact a{
  color: #3d3d3d;
}

.team-contact a:hover,
.team-contact a:focus{
  color: #000;
}

.team-contact .icon-telephone,
.team-contact .ion-social-linkedin{
  position: relative;
  top: 0.15em;
  margin-right: 0.6rem;
  font-size: 1.15em;
  color: #cee002;
}

/* 8. Accreditation logos — official artwork, mixed aspect ratios and
      background colours, so they are capped to a common height and
      centred rather than stretched to the column. */

.partner-carousel-item img,
.row-partners .col-partner img{
  max-height: 8rem;
  width: auto;
  max-width: 100%;
}

.row-partners .col-partner{
  text-align: center;
}

/* 9. Accreditation note replacing the logo strip while applications are pending. */

.accreditation-note{
  max-width: 74rem;
  margin: 0 auto;
}

/* 10. Screen-reader-only heading (the hero headline is a slider layer, so the
       page needs a real h1 that does not disturb the design). */

.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 11. Contact page — the enquiry form and the contact details sat in adjacent
       grid columns with only the 30px bootstrap gutter between them, so the
       panel text ran straight up against the form fields. The panel is now a
       shaded card with its own padding, offset one column from the form, and
       spaced vertically when the two stack below 992px. */

.contact-panel{
  background: #f6f6f6;
  padding: 3.2rem 3rem;
}

.contact-panel .contact-title{
  margin-bottom: 2.4rem;
}

.contact-panel .contact-row{
  margin-bottom: 1.4rem;
}

.contact-panel .contact-row:last-of-type{
  margin-bottom: 2.4rem;
}

@media (max-width: 991px){
  .contact-panel{
    margin-top: 5rem;
  }
}

/* 12. Enquiry form failure message — links out to phone and email so a
       visitor is never left with a dead form. */

.error-message a{
  color: inherit;
  text-decoration: underline;
}

/* 13. Header contact block — phone and email stacked in the navbar address
       slot, both linked, each with a Linearicons glyph. */

.navbar-address{
  line-height: 1.5;
}

.navbar-address .navbar-phone{
  display: block;
  white-space: nowrap;
}

.navbar-address .navbar-email{
  font-size: 0.95em;
}

.navbar-address .navbar-phone .icon-telephone,
.navbar-address .navbar-phone .icon-envelope{
  position: relative;
  top: 0.15em;
  margin-right: 0.6rem;
  font-size: 1.2em;
  color: #cee002;
}

/* 14. Testimonials — the template shipped these in an Owl carousel, which threw
       "Can not detect viewport width" at init because the animsition wrapper has
       no resolved width at DOM-ready, and owl.carousel.css keeps .owl-carousel
       display:none until init succeeds. Result: three invisible testimonials.
       They are now a static three-column row on the template's own grid, so
       there is no JS dependency left to fail. */

.client-grid{
  margin-top: 4.8rem;
  display: flex;
  flex-wrap: wrap;
}

.client-grid-item{
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
}

.client-grid-item .client-img{
  width: auto;
  align-self: flex-start;
}

.client-grid-item .client-box{
  flex: 1;
}

/* 15. Hero legibility — white slider type sat directly on the photograph and
       was hard to read. A translucent panel now sits behind the text block
       (added as one of the template's own shape layers so it scales with the
       slider), plus a soft shadow on the type itself for the edges that fall
       outside the panel. */

.hero-scrim{
  border-radius: 0;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.rev_slider .slider-title,
.rev_slider .tp-caption{
  text-shadow: 0 1px 24px rgba(0,0,0,0.45);
}

.rev_slider .slider-title .link-arrow{
  color: #fff;
}

.rev_slider .slider-title .link-arrow:hover,
.rev_slider .slider-title .link-arrow:focus{
  color: #cee002;
}

/* 16. Calls to action — the template renders these as quiet text links, which
       left the site with no visual hierarchy of action. They are now the
       template's own .btn-yellow, with an outline variant for the secondary
       action of a pair, plus a persistent quote button in the header. */

.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3rem;
}

.btn-outline{
  background: none;
  color: #000;
  box-shadow: inset 0 0 0 2px #d8d8d8;
}

.btn-outline:hover,
.btn-outline:focus{
  background: #000;
  color: #fff;
  box-shadow: inset 0 0 0 2px #000;
}

.btn-sm{
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  height: 4.2rem;
  line-height: 4.2rem;
  font-size: 0.92em;
}


/* Hero button sits inside a slider caption, so it needs its own metrics */

.btn-hero{
  height: 5rem;
  line-height: 5rem;
  padding: 0 3.2rem;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-shadow: none;
}

/* 17. Hero panel — the template's four decorative shape layers were sized for a
       short three-word headline and could not be made to enclose this copy at
       every slider breakpoint. They are removed; the scrim now carries the lime
       accent itself as a left edge, which cannot fall out of alignment. */

.hero-scrim{
  border-left: 5px solid #cee002;
}


/* 19. Site map page — link list reusing the services grid. */

.sitemap-list h4{
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.28rem;
}

.sitemap-list h4 a{
  color: #000;
}

.sitemap-list h4 a:hover,
.sitemap-list h4 a:focus{
  color: #999999;
}

.sitemap-list .col-service{
  margin-top: 3rem;
}

.sitemap-list p{
  color: #999999;
}