/* ===========================================================
   EEB custom overrides - kept separate from style.css so the
   original template file is easy to diff against future Archo
   updates. Loaded after plugins.css and style.css.
   =========================================================== */

/* ---------- Hero caption action buttons: explicit spacing ----------
   The published site gets the gap from the .mt-30 / .ml-10 utility
   classes in style.css, but the GrapesJS editor canvas doesn't load
   those, so "Our Trades" and "Start Your Project" end up touching in
   the editor. Pin the spacing here (this file loads in both). */
.slider .caption .btn-curve,
.slider .hmone .btn-curve {
  margin-top: 30px !important;
}
.slider .caption .btn-curve + .btn-curve {
  margin-left: 16px !important;
}
@media (max-width: 767px) {
  .slider .caption .btn-curve + .btn-curve { margin-left: 0 !important; }
}

/* ---------- Portfolio + "Recent Work" gallery: more columns ----------
   Template default is 2-up on desktop; the editor canvas renders it
   4-up. Match the wider layout: 4 across on large screens, stepping
   down to 3 / 2 / 1. Isotope re-measures from these widths on load. */
.portfolio .gallery.twsty .items { width: 25%; }
.portfolio .gallery.twsty .items .item-img { height: 320px; }
@media (max-width: 1400px) { .portfolio .gallery.twsty .items { width: 33.3333%; } }
@media (max-width: 991px)  { .portfolio .gallery.twsty .items { width: 50%; } }
@media (max-width: 575px)  {
  .portfolio .gallery.twsty .items { width: 100%; }
  .portfolio .gallery.twsty .items .item-img { height: 260px; }
}

/* ---------- Text logo (replaces the template's logo-light/dark.png) ---------- */

.eeb-logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1;
  transition: color .3s;
}
.eeb-logo span {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .3px;
  color: rgba(255,255,255,0.65);
  display: none;
}
@media (min-width: 992px) {
  .eeb-logo span { display: inline-block; }
}
.light .eeb-logo, .nav-scroll .eeb-logo {
  color: #191514;
}
.light .eeb-logo span, .nav-scroll .eeb-logo span {
  color: #888;
}
.main-footer .eeb-logo,
.main-footer .eeb-logo span {
  color: #fff;
}
.main-footer .eeb-logo span {
  color: rgba(255,255,255,0.55);
  display: inline-block;
}

/* ---------- Compact nav CTA button ---------- */

.header-cta {
  display: flex;
  align-items: center;
  margin-left: 25px;
}
.btn-curve.btn-sm {
  padding: 9px 22px;
}
.btn-curve.btn-sm span {
  font-size: 14px;
  letter-spacing: 1px;
}
@media (max-width: 991px) {
  .header-cta { margin: 20px auto 0; }
}

/* ---------- About section service tags (replaces fabricated stats) ---------- */

.eeb-service-tag {
  border-left: 2px solid #BF7313;
  padding-left: 14px;
  margin-bottom: 20px;
}
.eeb-service-tag h6 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.eeb-cap-tag {
  background: #fff;
  padding: 22px 10px;
  box-shadow: 0px 10px 40px -4px rgba(0,0,0,.08);
  margin-bottom: 20px;
}
.eeb-cap-tag h6 {
  font-size: 14px;
  margin: 0;
}

.eeb-service-tag h6 a,
.eeb-cap-tag h6 a {
  color: inherit;
  text-decoration: none;
}
.eeb-service-tag h6 a:hover,
.eeb-cap-tag h6 a:hover {
  color: #BF7313;
}

/* ---------- Services grid: trades without a photo gallery yet ---------- */

.item-bx.eeb-nophoto .more {
  color: #999;
}
.item-bx.eeb-nophoto .more:after {
  background: #999;
}

/* ---------- Services grid: equal-height trade cards ---------- */
/* The trade blurbs vary in length, which left the cards ragged. Force the
   row to flex so every card in a row matches the tallest, make each card a
   vertical flex column, and pin the "View Photos" link to the bottom so the
   links line up across the grid regardless of copy length. */

.services .bord-box {
  display: flex;
  flex-wrap: wrap;
}
.services .bord-box .item-bx {
  display: flex;
  flex-direction: column;
  height: auto !important;   /* drop the template's height:100% so flex can equalise the row */
  padding: 45px 35px;
}
.services .bord-box .item-bx h6 {
  min-height: 46px;          /* keeps one- and two-line headings aligned */
}
.services .bord-box .item-bx .more {
  margin-top: auto !important;   /* beats .mt-30; pins the link to the card bottom */
  padding-top: 30px;
}
@media (max-width: 767px) {
  .services .bord-box .item-bx h6 { min-height: 0; }
}

/* ---------- Portfolio gallery: zoom affordance on hover ---------- */

/* The template draws thin white lines that slide to the centre of each
   tile on hover, forming a "+" cross. Our brass zoom circle now sits
   there instead, so the cross just looked like a line struck through
   the magnifier icon. Drop it. */
.portfolio .gallery .items .item-img::before,
.portfolio .gallery .items .item-img::after {
  display: none !important;
}

.zoom-ic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.6);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #BF7313;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  font-size: 16px;
}
.item-img:hover .zoom-ic {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- CTA band (repurposed skills-circle section) ---------- */

.eeb-cta h6 {
  color: #BF7313;
}
.eeb-cta h4 {
  color: #fff;
}
.eeb-cta p {
  color: rgba(255,255,255,0.75);
}

/* ===========================================================
   Section backdrops: a faint blueprint / setting-out grid so the
   light sections don't read as flat empty white, and so the CTA
   band gets some depth over its photo. Pure CSS, no extra requests.
   =========================================================== */

/* ---- About section ("One Team, Start to Finish") ---- */
.about {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #faf6f0 45%, #f3ede4 100%);
}
.about > .container {
  position: relative;
  z-index: 2;
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(191, 115, 19, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 115, 19, 0.10) 1px, transparent 1px),
    linear-gradient(rgba(25, 21, 20, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 21, 20, 0.055) 1px, transparent 1px);
  background-size: 150px 150px, 150px 150px, 30px 30px, 30px 30px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(150% 130% at 70% 45%, #000 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.12) 88%);
          mask-image: radial-gradient(150% 130% at 70% 45%, #000 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.12) 88%);
}
/* oversized ghost section marker, bleeding off the lower-right */
.about::after {
  content: "01";
  position: absolute;
  right: -3vw;
  bottom: -6vw;
  z-index: 1;
  font-family: 'Teko', sans-serif;
  font-weight: 700;
  font-size: 30vw;
  line-height: .8;
  letter-spacing: -.03em;
  color: rgba(25, 21, 20, 0.045);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 767px) {
  .about::after { font-size: 55vw; bottom: -10vw; }
  .about::before { background-size: 110px 110px, 110px 110px, 22px 22px, 22px 22px; }
}
/* drop the template's empty near-white outline box - it just reads as
   clutter now that the section has the grid + ghost numeral */
.about .exp-content::after { display: none; }

/* ---- CTA band ("Have a project in mind?" / "Let's talk about your project")
   The template's parallaxie background fights any fixed framing or overlay,
   so the section markup now carries no bg; we own the whole thing here:
   a real construction photo under a dark wash, a brass top rule, and the
   same faint grid so it ties into the About section. ---- */
.eeb-cta {
  position: relative;
  border-top: 2px solid rgba(191, 115, 19, 0.55);
  background-color: #14141a;
  background-image:
    linear-gradient(158deg, rgba(14, 14, 19, 0.82) 0%, rgba(14, 14, 19, 0.70) 52%, rgba(24, 17, 9, 0.76) 100%),
    url("../img/sections/finished-2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 42%;
}
.eeb-cta .container {
  position: relative;
  z-index: 3;
}
.eeb-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 130px 130px;
  background-position: center;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.2) 55%, transparent 80%);
          mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.2) 55%, transparent 80%);
}

/* ---------- Contact page: Google Maps embed (no API key needed) ---------- */

.eeb-map-embed {
  position: relative;
  min-height: 460px;
  padding: 0;
}
.eeb-map-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 991px) {
  .eeb-map-embed { min-height: 340px; }
}

/* ---------- Contact page: direct-contact block (replaces the enquiry form) ---------- */

.eeb-contact-direct {
  padding: 70px 40px;
  max-width: 480px;
}
.eeb-contact-direct h6 {
  color: #BF7313;
  margin-bottom: 12px;
}
.eeb-contact-direct h3 {
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 16px;
}
.eeb-contact-direct > p {
  color: #666;
  margin-bottom: 28px;
}
.eeb-contact-line {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #e8e8e8;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: #191514;
  transition: color .25s;
}
.eeb-contact-line:last-of-type {
  border-bottom: 1px solid #e8e8e8;
}
.eeb-contact-line:hover {
  color: #BF7313;
}
.eeb-contact-line .icon {
  font-size: 30px;
  color: #BF7313;
  flex: none;
}
.eeb-contact-sub {
  font-size: 14px;
  color: #666;
  margin-top: 18px;
}
.eeb-contact-sub:first-of-type {
  margin-top: 24px;
}
@media (max-width: 575px) {
  .eeb-contact-direct { padding: 45px 0; }
  .eeb-contact-direct h3 { font-size: 25px; }
  .eeb-contact-line { font-size: 18px; }
}

/* ===========================================================
   Lightbox - vanilla component, styled to match the template's
   dark / brass visual language.
   =========================================================== */

.eeb-lightbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  background: rgba(9,9,9,0.95);
  display: none;
  flex-direction: column;
}
.eeb-lightbox.is-open { display: flex; }

.eeb-lightbox__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 30px;
  color: #fff;
}
.eeb-lightbox__title {
  color: #fff;
  font-size: 16px;
  margin: 0;
}
.eeb-lightbox__count {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}
.eeb-lightbox__close {
  background: none;
  border: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
}
.eeb-lightbox__close:hover { color: #BF7313; }

.eeb-lightbox__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 30px 30px;
  min-height: 0;
}
.eeb-lightbox__img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(191,115,19,0.3);
}
.eeb-lightbox__nav {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.eeb-lightbox__nav:hover { background: #BF7313; border-color: #BF7313; }

body.eeb-lb-open { overflow: hidden; }

@media (max-width: 767px) {
  .eeb-lightbox__stage { padding: 0 15px 20px; gap: 10px; }
  .eeb-lightbox__nav { width: 38px; height: 38px; font-size: 13px; }
  .eeb-lightbox__head { padding: 15px; }
}

/* ---------- Footer year / small helpers ---------- */
.eeb-year { }

/* ---------- Footer: contact + website links inherit the footer palette ---------- */
.main-footer .fotcont p a,
.main-footer .abot .eeb-foot-web a {
  color: #fff;
  transition: color .3s;
}
.main-footer .fotcont p a:hover,
.main-footer .abot .eeb-foot-web a:hover {
  color: #BF7313;
}
.main-footer .abot .eeb-foot-web {
  font-size: 13px;
  margin-top: 12px;
}

/* ---------- Preloader: EEB wordmark + "Loading" text ----------
   The Pace line (.pace) centres itself with position:fixed + inset:0 +
   margin:auto, i.e. against the visible viewport. The template's
   .loading-text uses top:calc(50% - 30px) resolved against #preloader's
   100vh, which on mobile is TALLER than the visible viewport, so the
   text drifts down onto the line. Pin both the wordmark and the text to
   the same fixed/inset/margin:auto frame the line uses, then offset each
   upward by a fixed pixel amount, so the spacing holds on every device. */
.loading-brand,
.loading-text {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: -webkit-max-content;
  width: max-content;
  height: -webkit-max-content;
  height: max-content;
  z-index: 9999;
}
.loading-text {
  -webkit-transform: translateY(-34px);
  transform: translateY(-34px);
}
.loading-brand {
  -webkit-transform: translateY(-74px);
  transform: translateY(-74px);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 14px;
  text-indent: 14px;          /* balance the trailing letter-spacing */
  text-transform: uppercase;
  white-space: nowrap;
}
/* Keep the template's fade-out; just neutralise the offsets on exit. */
.loading-text.isdone {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  top: 0;
  opacity: 0;
}
#preloader.isdone .loading-brand {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0;
  -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}
@media (max-width: 575px) {
  .loading-brand {
    font-size: 26px;
    letter-spacing: 9px;
    text-indent: 9px;
    -webkit-transform: translateY(-66px);
    transform: translateY(-66px);
  }
  .loading-text {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

/* ---------- Touch devices: drop the custom mouse cursor ----------
   The template hides the real pointer (body{cursor:none}) and draws a
   brass dot + ring that follow window.onmousemove. On a phone/tablet
   there is no mousemove, so the dot just sits where the last tap landed
   and never tracks scrolling. There is no pointer to represent on touch,
   so on hover-less / coarse-pointer devices we hide the fake cursor and
   put the normal pointer behaviour back. */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .mouse-cursor,
  .cursor-inner,
  .cursor-outer {
    display: none !important;
  }
}