/* Behavior that Elementor's JavaScript provided on the WordPress site,
   reproduced in CSS so the Next.js build ships no jQuery/Elementor runtime. */

/* Elementor Pro "sticky: top" on the logo/nav section of header template #48.
   Elementor pins the section with fixed positioning and inserts an equal-height
   spacer so the page below does not jump. No .elementor-sticky--active rules
   target this element, so the effect is purely positional. */
.cb-sticky-header--pinned {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

/* Lightbox replacing the UAEL/Fancybox gallery overlay. */
.cb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding: 40px 70px;
}
.cb-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.cb-lightbox__close,
.cb-lightbox__nav {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 10px;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.cb-lightbox__close:hover,
.cb-lightbox__nav:hover {
  opacity: 1;
}
.cb-lightbox__close {
  top: 10px;
  right: 18px;
  font-size: 44px;
}
.cb-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 60px;
}
.cb-lightbox__nav--prev { left: 10px; }
.cb-lightbox__nav--next { right: 10px; }
.cb-lightbox__count {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  opacity: 0.75;
}
@media (max-width: 767px) {
  .cb-lightbox { padding: 50px 12px; }
  .cb-lightbox__nav { font-size: 40px; padding: 6px; }
}

/* 404 page. Uses the site's global typography and button styling; the layout
   here is our own, since Elementor's page styling is scoped per page id. */
.cb-404 {
  padding: 90px 20px 110px;
  text-align: center;
}
.cb-404__inner {
  max-width: 640px;
  margin: 0 auto;
}
.cb-404__eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 14px;
  margin: 0 0 14px;
}
.cb-404 .elementor-divider {
  padding: 0 0 10px;
}
.cb-404 .elementor-divider-separator {
  display: block;
  width: 90px;
  margin: 0 auto;
  border-top: 1px solid currentColor;
  opacity: 0.4;
}
.cb-404__title {
  font-size: 86px;
  line-height: 1.1;
  margin: 0 0 18px;
}
.cb-404__text {
  margin: 0 0 34px;
}
.cb-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
@media (max-width: 767px) {
  .cb-404 { padding: 60px 20px 70px; }
  .cb-404__title { font-size: 60px; }
}
.cb-404__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cb-404__text a:hover {
  opacity: 0.7;
}

/* Gallery category filter. Sits above the masonry grid on the Designs page. */
.cb-gallery-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 28px;
}
.cb-gallery-filter__btn {
  appearance: none;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 9px 18px;
  opacity: 0.65;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
.cb-gallery-filter__btn:hover {
  opacity: 1;
}
.cb-gallery-filter__btn.is-active {
  background: #54595f;
  border-color: #54595f;
  color: #fff;
  opacity: 1;
}
.cb-gallery-filter__count {
  font-size: 11px;
  opacity: 0.7;
  margin-inline-start: 4px;
}
@media (max-width: 767px) {
  .cb-gallery-filter__btn { padding: 8px 14px; font-size: 12px; }
}

/* =====================================================================
   Design refresh
   Everything below intentionally departs from the WordPress rendering.
   It is kept in one block so the whole design layer can be reverted
   without touching the mirrored Elementor stylesheets.
   ===================================================================== */

/* --- 1. Section rhythm -------------------------------------------------
   Several sections wrapped very little content in very large padding: the
   "years of experience" band was 150px top and bottom around 133px of
   content, and the About block carried 250px of top padding. */
.elementor-16 .elementor-element.elementor-element-7d30e21a {
  padding-top: 64px;
  padding-bottom: 64px;
}
.elementor-16 .elementor-element.elementor-element-58610f1b > .elementor-widget-wrap,
.elementor-16 .elementor-element.elementor-element-58610f1b > .elementor-element-populated {
  padding-top: 88px;
  padding-bottom: 88px;
}

/* --- 3. Let the About photograph run edge to edge ----------------------
   The photo was painted on the inner wrap, so it was boxed into the 1140px
   content container with white gutters either side. Moving it to the
   section (already full width) avoids a 100vw breakout, which would
   overflow by the width of the scrollbar. */
.elementor-16 .elementor-element.elementor-element-21e1734d {
  position: relative;
  background-image: url("/wp-content/uploads/2018/08/home-design-3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.elementor-16 .elementor-element.elementor-element-21e1734d::before {
  /* The same 28% tint Elementor applied, now spanning the full width. */
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(67, 64, 62);
  opacity: 0.28;
  pointer-events: none;
}
.elementor-16 .elementor-element.elementor-element-58610f1b > .elementor-widget-wrap,
.elementor-16 .elementor-element.elementor-element-58610f1b > .elementor-element-populated {
  background-image: none !important;
}
.elementor-16 .elementor-element.elementor-element-58610f1b > .elementor-widget-wrap > .elementor-background-overlay,
.elementor-16 .elementor-element.elementor-element-58610f1b > .elementor-element-populated > .elementor-background-overlay {
  display: none;
}
.elementor-16 .elementor-element.elementor-element-58610f1b {
  position: relative;
  z-index: 1;
}
.elementor-16 .elementor-element.elementor-element-78f6b37e {
  padding-top: 56px;
  padding-bottom: 56px;
}
.elementor-43 .elementor-element.elementor-element-2115abfa {
  padding-top: 52px;
  padding-bottom: 36px;
}

/* --- 2. Body copy contrast ---------------------------------------------
   Body text inherited the kit's #7A7A7A, which is 4.29:1 on white and so
   below the 4.5:1 WCAG AA threshold. Only the global custom property is
   changed, so elements with an explicit color (the white-on-dark contact
   panel) are untouched. */
.elementor-kit-262 {
  --e-global-color-text: #5f5f5f;
}
.elementor-widget-text-editor p,
.elementor-icon-box-description {
  font-weight: 400;
}

/* --- Designs page: give the gallery the full content width -------------
   The gallery sat in an 832px column beside the Facebook feed's 308px
   column, so on a 1425px viewport the work got 58% of the screen, while
   the feed's column ran 1469px tall against an 853px widget and left
   616px of dead space. Both columns now run full width and stack: the
   gallery takes all 1140px (so tiles grow from 277px to ~370px, using
   image resolution that was already being shipped), and the feed becomes
   a band beneath it at the 500px it was always configured for. */
.elementor-184 .elementor-element.elementor-element-41284df > .elementor-container {
  /* The row is flex-wrap: nowrap, so full-width columns would simply shrink
     to half each instead of stacking. */
  flex-wrap: wrap;
}
.elementor-184 .elementor-element.elementor-element-0bdd58b,
.elementor-184 .elementor-element.elementor-element-4e57bf1 {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.elementor-184 .elementor-element.elementor-element-4e57bf1 > .elementor-widget-wrap,
.elementor-184 .elementor-element.elementor-element-4e57bf1 > .elementor-element-populated {
  /* Copy on one side, feed on the other, so the band fills the width and
     the feed has some context rather than floating on its own. */
  padding-top: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 56px;
}
.cb-social-intro {
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 440px;
}
/* An explicit 500px basis, rather than letting the widget shrink to fit:
   Facebook's plugin measures its parent when it parses and caps at 500px. */
.elementor-184 .elementor-element.elementor-element-a77daff {
  flex: 0 0 500px;
  max-width: 100%;
}
.cb-social-intro__eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  margin: 0 0 12px;
}
.cb-social-intro__title {
  margin: 0 0 16px;
}
.cb-social-intro__text {
  margin: 0 0 28px;
}
.cb-social-intro__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cb-social-intro__text a:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .elementor-184 .elementor-element.elementor-element-4e57bf1 > .elementor-widget-wrap,
  .elementor-184 .elementor-element.elementor-element-4e57bf1 > .elementor-element-populated {
    gap: 32px;
    padding-top: 48px;
  }
  /* The button rendered 39px tall, under the ~44px minimum tap target. */
  .cb-social-intro .elementor-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The heading sat under 230px of blank space: 100px of section padding
   plus 130px on the column wrapper. */
.elementor-184 .elementor-element.elementor-element-47a0448d {
  padding-top: 56px;
  padding-bottom: 64px;
}
.elementor-184 .elementor-element.elementor-element-68260ab > .elementor-widget-wrap,
.elementor-184 .elementor-element.elementor-element-68260ab > .elementor-element-populated {
  padding-top: 48px;
}

/* Hero subhead. Sits between the headline and the button, over the photo. */
.cb-hero-sub__text {
  max-width: 620px;
  margin: 0 auto 6px;
  color: #fff;
  font-size: 20px;
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
@media (max-width: 767px) {
  .cb-hero-sub__text {
    font-size: 17px;
    padding: 0 18px;
  }
}

/* Header contact details are now links so the phone number is tappable on
   mobile. Inherit the bar's styling so the appearance is unchanged. */
.cb-contact-link,
.cb-contact-link:hover,
.cb-contact-link:focus {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.cb-contact-link:hover {
  opacity: 0.75;
}

/* Contact details rendered inside body copy (contact page). Inherits the
   surrounding colour so the appearance is unchanged; underlined so it still
   reads as a link. */
.cb-contact-inline,
a.cb-contact-inline:link,
a.cb-contact-inline:visited {
  color: inherit;
  /* Elementor resets link underlines, so this needs to outrank it: without
     the underline the number does not read as tappable. */
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.cb-contact-inline:hover {
  opacity: 0.7;
}