/* ==========================================================================
   Baja Pool Plaster - global redesign layer (header, drawer, footer, atoms)
   Loaded on every page. Values are the approved homepage mockup's final
   "pool-light" tokens (styles.css sections 1, 16, 18-23).

   Elementor structure: the header and footer are UAE (Header Footer
   Elementor) templates. Every container/widget carries the mockup class
   names below via Advanced > CSS Classes, so layout lives here and all copy,
   links and images stay editable in Elementor.
   ========================================================================== */

/* 0. Fonts - self-hosted Latin subsets (variable weight), the same files the
   approved mockup embeds. No request to Google at runtime. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Tokens --------------------------------------------------------------*/
:root {
  --site-max: 1280px;
  --gutter: clamp(20px, 4vw, 44px);

  --navy-1000: #061C2A;
  --navy-950:  #092738;
  --navy-900:  #092738;
  --navy-800:  #124562;
  --navy-700:  #1A5C80;

  --aqua-400:  #63DDD8;
  --aqua-600:  #22A9E0;
  --cyan-500:  #0A82D0;

  --white:      #F6FBFF;
  --text-muted: #B7C9D5;

  --paper:     #FFFFFF;
  --paper-2:   #EAF7FC;
  --ink:       #0D2E42;
  --ink-soft:  #4F6879;
  --teal-ink:  #0A6FB4;

  --pool-ink:   #0A6FB4;
  --pool-500:   #0A82D0;
  --pool-400:   #22A9E0;
  --pool-300:   #63DDD8;
  --ice:        #EAF7FC;
  --ice-soft:   #F5FBFE;
  --water-deep: #063653;

  --line-dark:   rgba(246, 251, 255, .12);
  --line-dark-2: rgba(246, 251, 255, .07);
  --line-light:  rgba(10, 118, 190, .17);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --section-y: clamp(58px, 7.2vw, 106px);
  --shadow-card: 0 18px 44px -26px rgba(3, 14, 22, .85);
  --ease: cubic-bezier(.22, .61, .36, 1);

  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Header */
  --hdr-bg:        #FFFFFF;
  --hdr-bg-util:   #F2F9FD;
  --hdr-line:      rgba(7, 23, 34, .08);
  --hdr-line-soft: rgba(7, 23, 34, .055);
  --hdr-ink:       #10232E;
  --hdr-ink-soft:  #4A6675;
  --hdr-accent:      #0A6FB4;
  --hdr-accent-line: #22A9E0;
  --hdr-stuck: 74px;
  /* expanded header height (utility bar + masthead); refined by JS */
  --hdr-h: 123px;
  --hdr-top: 0px;

  /* Line icons (mockup SVGs) used as CSS masks so text stays editable */
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A15 15 0 0 1 4 5a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (max-width: 1100px) { :root { --hdr-stuck: 68px; } }
@media (max-width: 760px)  { :root { --hdr-stuck: 64px; --hdr-h: 115px; } }
/* WordPress toolbar for logged-in users sits above the fixed header */
.admin-bar { --hdr-top: 32px; }
@media (max-width: 782px) { .admin-bar { --hdr-top: 46px; } }
@media (max-width: 600px) { .admin-bar { --hdr-top: 0px; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.elementor [hidden] { display: none !important; }

/* 2. Elementor + Hello neutralisation inside the redesign documents -------
   Containers get no default padding/gap: every spacing value below comes
   from the mockup. Scoped to the header/footer templates and the homepage. */
.elementor .e-con {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px;
  --container-max-width: none;
  --content-width: 100%;
  /* Elementor turns every container into a wrapping flexbox below 767px; in
     column containers that makes Chrome size children at an intrinsic width
     and adds phantom height. Rows that should wrap declare it explicitly. */
  --flex-wrap-mobile: nowrap;
}
/* :where() keeps this at single-class weight so every mockup margin wins */
:where(.elementor) :where(.elementor-widget:not(:last-child)) { margin-block-end: 0; }
/* Elementor sizes container ::before (its background-overlay layer) with an
   explicit width/height; the redesign uses these pseudo-elements for washes,
   waves and photo grounds that are sized by their insets instead. */
.elementor .e-con::before,
.elementor .e-con::after { width: auto; height: auto; }
/* Containers and widgets size to their content; column containers still
   stretch their children, grid cells still fill. */
.elementor .e-con { --width: auto; }
.elementor .e-con > .elementor-widget { width: auto; }
:where(.elementor .e-con > .elementor-widget) { max-width: 100%; }
/* Icon List widget reset (chips, sign list, area links, footer lists) */
.elementor .elementor-widget-icon-list .elementor-icon-list-items { margin: 0; padding: 0; }
.elementor .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item { margin: 0; padding: 0; }
.elementor .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item::after { display: none; }
.elementor .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-text { padding: 0; color: inherit; }
.elementor .elementor-heading-title { color: inherit; margin: 0; padding: 0; }
/* p / span / div headings are labels, not display type: they take the
   typography of the class on their widget wrapper. */
.elementor :is(p, span, div).elementor-heading-title { font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; }
.elementor .elementor-widget-text-editor p { margin: 0; }
.elementor .elementor-widget-image { text-align: left; }
.elementor .elementor-widget-image img { display: block; }
.elementor a { color: inherit; text-decoration: none; }
.elementor a:hover { text-decoration: none; }
.elementor :focus-visible { outline: 2px solid var(--hdr-accent); outline-offset: 3px; border-radius: 4px; }
.elementor button { font: inherit; }

/* 3. Buttons (Elementor Button widget with .btn classes) -----------------*/
.elementor .btn .elementor-button,
.elementor a.btn,
.elementor .btn.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.elementor .btn .elementor-button:hover { transform: translateY(-2px); }
.elementor .btn .elementor-button:active { transform: translateY(0); }
.elementor .btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; }
.elementor .btn--primary .elementor-button {
  background: var(--pool-400);
  color: #04222A;
  box-shadow: 0 8px 24px -12px rgba(10, 130, 208, .55);
}
.elementor .btn--primary .elementor-button:hover,
.elementor .btn--primary .elementor-button:focus-visible {
  background: #3FBAEC;
  color: #04222A;
  box-shadow: 0 14px 32px -14px rgba(10, 130, 208, .7);
}
.elementor .btn--ghost .elementor-button {
  border-color: rgba(246, 251, 255, .28);
  color: var(--white);
  background: rgba(246, 251, 255, .04);
}
.elementor .btn--ghost .elementor-button:hover {
  border-color: var(--aqua-400);
  color: var(--aqua-400);
  background: rgba(117, 241, 221, .08);
}
.elementor .btn--ink .elementor-button {
  border-color: rgba(9, 32, 45, .22);
  color: var(--ink);
  background: transparent;
}
.elementor .btn--ink .elementor-button:hover { border-color: var(--ink); background: rgba(9, 32, 45, .04); color: var(--ink); }
.elementor .btn--sm .elementor-button { min-height: 46px; padding: 0 22px; font-size: 13px; }
.elementor .btn--block,
.elementor .btn--block .elementor-button-wrapper,
.elementor .btn--block .elementor-button { width: 100%; }
@media (max-width: 430px) {
  .elementor .btn--block .elementor-button { white-space: normal; padding-inline: 16px; line-height: 1.25; }
}

/* 4. Header (UAE header template) -----------------------------------------*/
.bp-header {
  position: fixed;
  top: var(--hdr-top);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-line);
  box-shadow: 0 4px 24px rgba(7, 23, 34, .06);
  color: var(--hdr-ink);
  font-family: var(--font-body);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.bp-header.is-stuck {
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 6px 26px rgba(7, 23, 34, .09);
}
.elementor .shell {
  width: min(var(--site-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* 4.1 Utility bar */
.bp-header .utility-bar {
  background: var(--hdr-bg-util);
  border-bottom: 1px solid var(--hdr-line-soft);
  color: var(--hdr-ink-soft);
  font-size: 13px;
  line-height: 1.4;
}
.bp-header .utility-bar > .shell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 38px;
  padding-block: 6px;
}
.bp-header .u-right { display: flex; flex-direction: row; align-items: center; gap: 24px; width: auto; }
.bp-header .u-item,
.bp-header .u-item a,
.bp-header .u-item p { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--hdr-ink-soft); }
.bp-header .u-item a:hover { color: var(--hdr-accent); }
.bp-header .u-item::before,
.bp-header .u-item--tel a::before {
  content: "";
  width: 14px; height: 14px; flex: none;
  background: currentColor;
  opacity: .7;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.bp-header .u-item--area { --ico: var(--ico-pin); }
.bp-header .u-item--hours { --ico: var(--ico-clock); }
.bp-header .u-item--tel::before { display: none; }
.bp-header .u-item--tel a { --ico: var(--ico-phone); }
.bp-header.is-stuck .utility-bar { display: none; }

/* 4.2 Masthead */
.bp-header .masthead { background: var(--hdr-bg); }
.bp-header .masthead > .shell {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  min-height: 84px;
  padding-block: 5px;
  transition: min-height .25s var(--ease);
}
.bp-header.is-stuck .masthead > .shell { min-height: var(--hdr-stuck); }
.bp-header .brand { margin-right: auto; width: auto; flex: none; }
.bp-header .brand a { display: block; }
.bp-header .brand img {
  width: 272px;
  height: auto;
  max-width: none;
  transition: width .25s var(--ease);
}
.bp-header.is-stuck .brand img { width: 232px; }

/* 4.3 Primary navigation - Elementor "WordPress Menu" widget showing the
   "Primary - Redesign" menu (Appearance > Menus). The widget title only
   feeds the nav's aria-label, so it is not shown. */
.elementor .elementor-widget-wp-widget-nav_menu h5 { display: none; }
.elementor .elementor-widget-wp-widget-nav_menu nav { display: block; }
.bp-header .primary-nav { width: auto; flex: none; }
.bp-header .primary-nav ul.menu {
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.8vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bp-header .primary-nav a {
  position: relative;
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.68;
  color: var(--hdr-ink);
  padding-block: 8px;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.bp-header .primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--hdr-accent-line);
  border-radius: 2px;
  transition: width .25s var(--ease);
}
.bp-header .primary-nav a:hover,
.bp-header .primary-nav a:focus-visible { color: var(--hdr-accent); }
.bp-header .primary-nav a:hover::after { width: 100%; }

/* Active page. WordPress also marks homepage anchor links (/#projects...) as
   "current" on the homepage, so only real page links count. */
.bp-header .primary-nav ul.menu > .current-menu-item > a:not([href*="#"]),
.bp-header .primary-nav ul.menu > .menu-item-has-children:has(> .sub-menu > .current-menu-item > a:not([href*="#"])) > a { color: var(--hdr-accent); }
.bp-header .primary-nav ul.menu > .current-menu-item > a:not([href*="#"])::after,
.bp-header .primary-nav ul.menu > .menu-item-has-children:has(> .sub-menu > .current-menu-item > a:not([href*="#"])) > a::after { width: 100%; }

/* 4.3b Dropdowns (Services, Resources). Opens on hover for mouse users and
   through the chevron button (aria-expanded, added by baja-global.js) for
   keyboard and touch users. Submenu links stay in the markup for crawlers. */
.bp-header .primary-nav li { position: relative; }
.bp-header .primary-nav .menu-item-has-children { display: flex; align-items: center; gap: 3px; }
.elementor .sub-toggle {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hdr-ink);
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.elementor .sub-toggle svg { width: 14px; height: 14px; transition: transform .22s var(--ease); }
.elementor .sub-toggle:hover,
.elementor .sub-toggle:focus-visible { color: var(--hdr-accent); background: rgba(10, 130, 208, .08); }
.elementor .sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.bp-header .primary-nav .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  z-index: 30;
  min-width: 268px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid rgba(10, 118, 190, .14);
  border-radius: 16px;
  box-shadow: 0 26px 50px -22px rgba(6, 46, 74, .38), 0 4px 12px -6px rgba(6, 46, 74, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.bp-header .primary-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.bp-header .primary-nav li:hover > .sub-menu,
.bp-header .primary-nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.bp-header .primary-nav li:hover > .sub-toggle svg { transform: rotate(180deg); }
.bp-header .primary-nav .sub-menu li + li { margin-top: 2px; }
.bp-header .primary-nav .sub-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--hdr-ink);
}
.bp-header .primary-nav .sub-menu a::after { display: none; }
.bp-header .primary-nav .sub-menu a:hover,
.bp-header .primary-nav .sub-menu a:focus-visible { color: var(--hdr-accent); background: rgba(10, 130, 208, .08); }
.bp-header .primary-nav .sub-menu .current-menu-item > a:not([href*="#"]) { color: var(--hdr-accent); background: rgba(10, 130, 208, .08); }

/* 4.4 Header CTA + menu toggle */
.bp-header .header-cta { display: flex; flex-direction: row; align-items: center; gap: 12px; width: auto; flex: none; }
.bp-header .header-cta .btn--primary .elementor-button {
  color: #071722;
  box-shadow: 0 2px 10px rgba(7, 23, 34, .12);
}
.bp-header .header-cta .btn--primary .elementor-button:hover { box-shadow: 0 4px 16px rgba(7, 23, 34, .18); }
.elementor .nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(7, 23, 34, .18);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--hdr-ink);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.elementor .nav-toggle:hover,
.elementor .nav-toggle:focus { border-color: var(--hdr-accent); color: var(--hdr-accent); background: transparent; }
.elementor .nav-toggle .bars { display: grid; gap: 4px; }
.elementor .nav-toggle .bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

/* 4.5 Mobile drawer */
.elementor .nav-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(3, 12, 19, .72);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.elementor .nav-scrim.is-open { opacity: 1; visibility: visible; }
.elementor .mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(390px, 88vw);
  background: var(--hdr-bg);
  border-left: 1px solid var(--hdr-line);
  color: var(--hdr-ink);
  font-family: var(--font-body);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .34s var(--ease), visibility .34s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.elementor .mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.elementor .mobile-nav__head {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hdr-line);
}
.elementor .mobile-nav__head .elementor-widget-image { width: auto; }
.elementor .mobile-nav__head img { width: 176px; height: auto; }
.elementor .mobile-nav__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(7, 23, 34, .18);
  border-radius: 50%;
  background: transparent;
  color: var(--hdr-ink);
  cursor: pointer;
}
.elementor .mobile-nav__close:hover,
.elementor .mobile-nav__close:focus { border-color: var(--hdr-accent); color: var(--hdr-accent); background: transparent; }
/* The drawer now moves focus to Close when it opens. After a tap or click
   that focus is not :focus-visible, so keep the resting look there. */
.elementor .mobile-nav__close:focus:not(:focus-visible):not(:hover) { border-color: rgba(7, 23, 34, .18); color: var(--hdr-ink); }
.elementor .mobile-nav ul { list-style: none; margin: 0; padding: 10px 22px 8px; }
.elementor .mobile-nav li + li { border-top: 1px solid var(--hdr-line-soft); }
.elementor .mobile-nav ul a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--hdr-ink);
}
.elementor .mobile-nav ul a::after {
  content: "";
  width: 16px; height: 16px; flex: none;
  background: currentColor; opacity: .38;
  -webkit-mask: var(--ico-chevron) center / contain no-repeat;
  mask: var(--ico-chevron) center / contain no-repeat;
}
.elementor .mobile-nav ul a:hover { color: var(--hdr-accent); }
.elementor .mobile-nav ul.menu > .current-menu-item > a:not([href*="#"]),
.elementor .mobile-nav ul.menu > .menu-item-has-children:has(> .sub-menu > .current-menu-item > a:not([href*="#"])) > a { color: var(--hdr-accent); }

/* Drawer submenus: collapsible once baja-global.js has added the toggles
   (without JS they simply stay open, so every link remains reachable). */
.elementor .mobile-nav .menu-item-has-children { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.elementor .mobile-nav .menu-item-has-children > a::after { display: none; }
.elementor .mobile-nav .sub-toggle { width: 44px; height: 44px; border: 1px solid rgba(7, 23, 34, .16); }
.elementor .mobile-nav .sub-toggle svg { width: 16px; height: 16px; }
.elementor .mobile-nav ul.sub-menu { grid-column: 1 / -1; padding: 0 0 12px 14px; margin: 0; border-left: 2px solid rgba(10, 130, 208, .18); }
.elementor .mobile-nav .sub-menu li + li { border-top: 0; }
.elementor .mobile-nav .sub-menu a {
  min-height: 44px;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--hdr-ink-soft);
}
.elementor .mobile-nav .sub-menu a::after { width: 14px; height: 14px; }
.elementor .mobile-nav .sub-menu .current-menu-item > a:not([href*="#"]) { color: var(--hdr-accent); }
.elementor .mobile-nav .bp-nav-ready li:not(.is-open) > .sub-menu { display: none; }
.elementor .mobile-nav__foot {
  margin-top: auto;
  padding: 22px;
  border-top: 1px solid var(--hdr-line);
  display: grid;
  gap: 12px;
}
.elementor .mobile-nav__foot .btn--primary .elementor-button { color: #071722; box-shadow: 0 2px 10px rgba(7, 23, 34, .12); }
.elementor .mobile-nav__foot .meta { font-size: 13.5px; line-height: 1.68; color: var(--hdr-ink-soft); }
.elementor .mobile-nav__foot .meta p { margin: 0; }
.elementor .drawer-tel { color: var(--hdr-accent) !important; font-weight: 700; }

/* 4.6 Header responsive (mockup 16.3 / 16.8 / 19.2 values) */
@media (max-width: 1240px) {
  .bp-header .brand img { width: 252px; }
  .bp-header.is-stuck .brand img { width: 220px; }
}
/* Seven top-level items (Reviews added 2026-10-07): between 1101 and 1199px the
   row would push the Free Estimate button past the content edge, so spacing and
   the logo tighten slightly here (nav text stays 14px). Wider screens unchanged. */
@media (min-width: 1101px) and (max-width: 1199px) {
  .bp-header .masthead > .shell { gap: 20px; }
  .bp-header .brand img { width: 228px; }
  .bp-header.is-stuck .brand img { width: 212px; }
  .bp-header .primary-nav ul.menu { gap: 16px; }
  .bp-header .primary-nav a { font-size: 14px; }
}
@media (max-width: 1100px) {
  .bp-header .primary-nav { display: none; }
  .elementor .nav-toggle { display: inline-flex; }
  .bp-header .header-cta .btn--primary { display: none; }
  .bp-header .utility-bar > .shell { min-height: 44px; padding-block: 0; }
  .bp-header .u-item { min-height: 44px; }
  .bp-header .masthead > .shell { min-height: 78px; }
  .bp-header .brand img { width: 236px; }
  .bp-header.is-stuck .brand img { width: 206px; }
}
@media (max-width: 860px) {
  .bp-header .brand img { width: 218px; }
  .bp-header.is-stuck .brand img { width: 196px; }
}
@media (max-width: 760px) {
  .bp-header .u-item--hours { display: none !important; }
  .bp-header .masthead > .shell { min-height: 70px; padding-block: 8px; }
  .bp-header .brand img { width: 204px; }
  .bp-header.is-stuck .brand img { width: 186px; }
  .elementor .mobile-nav__head img { width: 164px; }
}
@media (max-width: 460px) {
  .bp-header .u-item--area { display: none !important; }
}
@media (max-width: 430px) {
  .bp-header .brand img { width: 180px; }
  .bp-header.is-stuck .brand img { width: 170px; }
  .elementor .mobile-nav__head img { width: 148px; }
}
@media (max-width: 380px) {
  .bp-header .brand img { width: 164px; }
  .bp-header.is-stuck .brand img { width: 158px; }
}

/* Pages that are not yet redesigned keep their own layout; the fixed header
   just needs room above them. */
body:not(.home) main#content,
body:not(.home) main.site-main { padding-top: var(--hdr-h); }

/* 5. Footer (UAE footer template) -----------------------------------------*/
.bp-footer {
  background: var(--navy-1000);
  border-top: 1px solid var(--line-dark-2);
  padding-top: clamp(52px, 6vw, 84px);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
}
.bp-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr);
  gap: clamp(26px, 3vw, 46px);
  padding-bottom: clamp(40px, 5vw, 62px);
}
.bp-footer .footer-brand img { width: 250px; height: auto; max-width: 100%; }
.bp-footer .footer-brand .footer-blurb p {
  margin: 20px 0 0;
  font-size: 14.6px;
  color: #93ABBA;
  line-height: 1.65;
  max-width: 34ch;
}
.bp-footer .footer-social { margin-top: 22px; }
.bp-footer .footer-social { --justify-content: flex-start; text-align: left; }
.bp-footer .footer-social .elementor-social-icons-wrapper { display: flex; justify-content: flex-start; gap: 10px; }
.bp-footer .footer-social .elementor-grid-item { display: block; }
.bp-footer .footer-social .elementor-social-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  font-size: 17px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: transparent;
  color: #A9BECC;
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.bp-footer .footer-social .elementor-social-icon svg { width: 17px; height: 17px; fill: currentColor; }
.bp-footer .footer-social .elementor-social-icon:hover { color: var(--aqua-400); border-color: rgba(117, 241, 221, .4); transform: translateY(-2px); background: transparent; }
.bp-footer .footer-col h2 {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .17em;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--aqua-400);
  margin: 0 0 18px;
  font-weight: 700;
}
.bp-footer .footer-links .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.bp-footer .footer-links .elementor-icon-list-item { margin: 0; padding: 0; }
.bp-footer .footer-links .elementor-icon-list-item::after { display: none; }
.bp-footer .footer-links .elementor-icon-list-item,
.bp-footer .footer-links .elementor-icon-list-item a { display: flex; align-items: flex-start; gap: 11px; font-size: 14.6px; line-height: 1.55; color: #A9BECC; }
.bp-footer .footer-links .elementor-icon-list-item a:hover { color: var(--white); }
.bp-footer .footer-links .elementor-icon-list-text { color: inherit; padding: 0; }
.bp-footer .footer-contact .elementor-icon-list-icon { width: 15px; flex: none; margin-top: 4px; }
.bp-footer .footer-contact .elementor-icon-list-icon svg { width: 15px; height: 15px; fill: var(--aqua-400); }
.bp-footer .footer-legal {
  border-top: 1px solid var(--line-dark-2);
  padding-block: 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.2px;
  color: #7B96A7;
}
.bp-footer .footer-legal p { margin: 0; }
.bp-footer .footer-legal .elementor-widget { width: auto; }
.bp-footer .footer-legal .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.bp-footer .footer-legal .elementor-icon-list-item a { color: #7B96A7; font-size: 13.2px; }
.bp-footer .footer-legal .elementor-icon-list-item a:hover { color: var(--aqua-400); }

/* Footer layout (2026-10-19). The Google Business Profile map was removed from the
   global footer: the owner rule keeps GBP-specific data (map, CID, address) on
   location pages only, and the global NAP follows the original website.
   >= 1280px: brand + five link columns in one row (base six-track grid above).
   1101–1279px: brand on its own row, the five link columns below.
   <= 1100px: brand full width, link columns in three/two/one columns. */
@media (min-width: 1280px) {
  /* wider Contact track so the unbreakable e-mail address fits */
  .bp-footer .footer-grid { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr); }
}
@media (max-width: 1279px) {
  .bp-footer .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bp-footer .footer-brand { grid-column: 1 / -1; }
  .bp-footer .footer-brand .footer-blurb { max-width: 560px; }
}
/* 761–1279px: the full-width brand row is laid out horizontally (logo · blurb · social)
   so the row has no empty right half. Phones keep the stacked brand block. */
@media (min-width: 761px) and (max-width: 1279px) {
  .bp-footer .footer-grid > .footer-brand { --flex-direction: row; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 36px; }
  .bp-footer .footer-grid > .footer-brand > .elementor-widget { width: auto; margin: 0; }
  .bp-footer .footer-grid > .footer-brand .footer-logo { flex: 0 0 auto; }
  .bp-footer .footer-grid > .footer-brand .footer-blurb { flex: 1 1 auto; max-width: 560px; }
  .bp-footer .footer-grid > .footer-brand .footer-blurb p { margin: 0; }
  .bp-footer .footer-grid > .footer-brand .footer-social { flex: 0 0 auto; margin-left: auto; }
}
@media (max-width: 1100px) {
  .bp-footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-footer .footer-brand img { width: 248px; }
  .bp-footer .footer-links .elementor-icon-list-items { gap: 2px; }
  .bp-footer .footer-links .elementor-icon-list-item a,
  .bp-footer .footer-contact .elementor-icon-list-item { min-height: 36px; align-items: center; }
  .bp-footer .footer-contact .elementor-icon-list-icon { margin-top: 0; }
  .bp-footer .footer-legal .elementor-icon-list-item a { min-height: 36px; display: inline-flex; align-items: center; }
}

@media (max-width: 760px) {
  .bp-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-footer .footer-brand img { width: 224px; }
  /* The phone CTA bar stays up over the footer, so the space it needs is
     reserved inside the navy footer (below) instead of as body padding, which
     showed as a light band under the footer. */
  html body:is(.home, .elementor-page, .category-reviews, .category-projects, .bp-article) { padding-bottom: 0; }
}
/* Legacy LePopup "Click to Call / Request a Quote" bar (popup 13): never shown
   where the redesign dock exists. The popup is appended to <body>, so it is
   matched from body (the Reviews/Projects landings carry .bp-landing on an
   inner wrapper, which the earlier rules relied on). */
body:has(#ctaDock) [id^="lepopup-popup-13"],
body:is(.category-reviews, .category-projects) [id^="lepopup-popup-13"] { display: none !important; }

/* Service Areas hub (/service-areas/): the direct-answer section uses the full
   page container like the sections below it (the shared .answer block is
   capped at 880px elsewhere). Heading and intro keep a readable measure; the
   "at a glance" card spans the container, with a fixed label column so the
   values stay on short single lines. */
.elementor-page .sa-answer .answer { max-width: none; }
.elementor-page .sa-answer .answer h2 { max-width: 820px; }
.elementor-page .sa-answer .fact-box dl > div { grid-template-columns: minmax(150px, 280px) minmax(0, 1fr); }
@media (max-width: 560px) {
  .elementor-page .sa-answer .fact-box dl > div { grid-template-columns: minmax(0, 1fr); }
}

/* Floating CTA dock: visible by default. The dock's own styles (baja-home.css)
   start it hidden (opacity 0 / visibility hidden / pushed 18px down) and relied
   on JavaScript scroll observers to add .is-on; when those callbacks did not
   run, the dock never appeared. It is now shown without waiting for JS or a
   transition; only .is-closed (the X, for the current session) hides it. */
html :is(.home, .elementor-page, .bp-landing) .ctadock {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition: none;
}
@media (max-width: 760px) {
  html :is(.home, .elementor-page, .bp-landing) .ctadock { transform: none; }
}

/* Floating CTA dock clearance (dock: baja-home.css / baja-home.js). The dock
   remains visible over the footer, so the footer ends with room for it: the
   copyright line and the Google map always scroll clear of the buttons.
   Desktop dock = 22px offset + ~74px tall; phone bar = 70px + safe area. */
body:not(.dock-closed) .bp-footer { padding-bottom: 104px; }
@media (max-width: 760px) {
  body:not(.dock-closed) .bp-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 460px) {
  .bp-footer .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .bp-footer .footer-brand img { width: 204px; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor *, .elementor *::before, .elementor *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}