/* Dot Studio Technical Services — brand overrides
   Brand colour: #68256A (logo purple) · Font: Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  --ds-ink: #68256A;
}

h1, h2, h3, h4, h5, h6,
.rr-btn-primary,
.section-title,
.title {
  font-family: 'Montserrat', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.footer-widget-box .subscribe-form .title,
.interaction__content .desc {
  color: var(--ds-ink);
}

/* Body copy (paragraphs, descriptions, meta text) sitewide — keeps
   explicit white-on-dark rules intact since those set color directly
   rather than through --secondary. */
:root {
  --secondary: var(--ds-ink);
}

/* Header / footer logo sizing for the stacked & horizontal lockups */
.header__logo img,
.offset-logo img {
  max-height: 54px;
  width: auto;
}

.footer .footer-widget-box .subscribe-form img.ds-footer-logo {
  max-height: 60px;
  width: auto;
  margin-bottom: 18px;
}

/* ---- Logo preloader (ring-mark bloom + spin) ---- */
.loader-wrap {
  background: #F9F9FA;
  flex-direction: column;
}
.loader-wrap svg {
  fill: none;
}
.loader-wrap .loader-mark {
  position: relative;
  width: 120px;
  height: 120px;
  z-index: 20;
  animation: ds-breathe 2.8s ease-in-out infinite;
}
.loader-wrap .loader-mark svg {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.loader-wrap .loader-mark .ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: ds-spinCW 2.8s cubic-bezier(0.68, 0.02, 0.26, 0.98) infinite;
}
.loader-wrap .loader-mark .ring-left,
.loader-wrap .loader-mark .ring-right {
  animation-name: ds-spinCCW;
}
.loader-wrap .loader-mark .ring path {
  fill: #68256A;
  transform-box: fill-box;
  transform-origin: center;
  animation: ds-bloom .7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.loader-wrap .loader-mark .ring-top path { animation-delay: .05s; }
.loader-wrap .loader-mark .ring-right path { animation-delay: .15s; }
.loader-wrap .loader-mark .ring-bottom path { animation-delay: .25s; }
.loader-wrap .loader-mark .ring-left path { animation-delay: .35s; }

.loader-wrap .loader-brand {
  position: relative;
  z-index: 20;
  margin-top: 34px;
  font-size: 30px;
  font-weight: 700;
  color: #68256A;
  letter-spacing: .5px;
  text-transform: none;
  animation: ds-riseIn .8s cubic-bezier(0.22, 1, 0.36, 1) .45s backwards;
}
.loader-wrap .loader-sub {
  position: relative;
  z-index: 20;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #8E8E8E;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  animation: ds-riseIn .8s cubic-bezier(0.22, 1, 0.36, 1) .6s backwards;
}
.loader-wrap .loader-bar {
  position: relative;
  z-index: 20;
  margin-top: 30px;
  width: 168px;
  height: 3px;
  border-radius: 3px;
  background: rgba(104, 37, 106, .15);
  overflow: hidden;
  animation: ds-riseIn .8s ease .75s backwards;
}
.loader-wrap .loader-bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: #68256A;
  animation: ds-slide 1.4s cubic-bezier(0.45, 0, 0.55, 1) .9s infinite;
}

@keyframes ds-spinCW {
  0%       { transform: rotate(0deg); }
  38%, 50% { transform: rotate(-180deg); }
  88%,100% { transform: rotate(-360deg); }
}
@keyframes ds-spinCCW {
  0%       { transform: rotate(0deg); }
  38%, 50% { transform: rotate(180deg); }
  88%,100% { transform: rotate(360deg); }
}
@keyframes ds-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes ds-bloom {
  from { opacity: 0; transform: scale(.3); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ds-riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-slide {
  0%   { transform: translateX(110%); }
  100% { transform: translateX(-370%); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-wrap .ring, .loader-wrap .ring path, .loader-wrap .loader-mark,
  .loader-wrap .loader-bar span, .loader-wrap .loader-brand,
  .loader-wrap .loader-sub, .loader-wrap .loader-bar {
    animation: none;
  }
}

/* Services added from the admin: when the two-column services grid has an odd number of cards,
   the last card spans the row instead of leaving an empty cell. (No grid on the site is odd today.) */
.ts-grid.c2 > :last-child:nth-child(odd):not(:first-child) {
  grid-column: 1 / -1;
}

/* Language switch (English ⇄ العربية) in the header — both options shown side by side, no dropdown */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.lang-toggle .lang-toggle__opt {
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.lang-toggle .lang-toggle__opt[lang="ar"] { font-family: 'Cairo', 'Montserrat', sans-serif; }
.lang-toggle .lang-toggle__opt:hover { opacity: 0.85; }
.lang-toggle .lang-toggle__opt.is-active {
  opacity: 1;
  color: var(--ds-ink);
  pointer-events: none;
}
.lang-toggle .lang-toggle__sep {
  font-size: 13px;
  color: var(--black);
  opacity: 0.35;
}
/* The pill wrapper itself — same rounded-border treatment on every header (home and inner pages) */
.header-lan {
  display: flex;
  align-items: center;
  border: 1px solid rgba(17, 17, 17, 0.15);
  border-radius: 500px;
  padding: 9px 20px;
  margin-left: 20px;
}
@media (max-width: 575px) {
  .header-lan { margin-left: 12px; padding: 7px 14px; }
  .header-lan .lang-toggle .lang-toggle__opt { font-size: 14px; }
}
/* The base theme hides the language toggle below 768px entirely — on this bilingual (EN/AR)
   site that's the one header control mobile visitors actually need, so keep it visible there. */
@media (max-width: 767px) {
  .header-area .header-lan { display: flex; margin-left: 10px; }
}
/* Narrow phones: the hamburger icon sits right next to this pill, so tighten it further. */
@media (max-width: 400px) {
  .header-area .header-lan { padding: 6px 10px; margin-left: 6px; }
  .header-area .header-lan .lang-toggle { gap: 5px; }
  .header-area .header-lan .lang-toggle .lang-toggle__opt { font-size: 12px; }
}
/* The inner-page header's own gap between the language pill and the hamburger button stays a
   flat 30px all the way down to phone widths, which — stacked with the pill's own margin above —
   pushed the header-right group past the viewport edge and forced the whole page to scroll
   horizontally (clipping the content below it, e.g. the client-logo grid). Tighten that gap at
   the same breakpoints the pill itself tightens at. */
@media (max-width: 575px) {
  .header-area-5 .header-right { gap: 10px; }
}
@media (max-width: 400px) {
  .header-area-5 .header-right { gap: 6px; }
}
/* Very narrow phones (iPhone SE and similar, ~320-340px): logo + pill + hamburger still don't
   fit even at the tightened spacing above, so shrink the logo and the hamburger's own hit-box. */
@media (max-width: 340px) {
  .header-area-5 .header__logo img { max-width: 90px; }
  .header-area-5 .navicon { width: 40px; height: 40px; }
}

/* "Clients we've worked with" sector list: each <li> is name + <span>sector</span> laid out with
   flex (name gets its own flex item, `align-items:end` bottom-aligns the sector span next to it).
   On a long name ("Khalifa Bin Zayed Al Awal School", "Interior Company (Square Yards)") the name
   itself wraps onto two lines — at any width, this column sits beside a photo half the row's
   own width — but the span, a separate flex sibling rather than part of that text's own line
   flow, stays pinned to the row's bottom edge, landing far to the right on its own stray line
   instead of reading as the sector tag right after the name. Drop the flex layout so the span
   becomes ordinary inline content immediately after the name's own text, wrapping together with
   it like a normal sentence, right where the name ends. */
.about-team__wrapper .about-team__box .team-list li {
  display: block;
}
.about-team__wrapper .about-team__box .team-list li span {
  display: inline;
  margin-inline-start: 8px;
}

/* The home header used mix-blend-mode:exclusion (with a black backdrop) so header content
   auto-inverted to stay legible over any hero photo — a trick that only works for pure white
   content, that a child can't opt out of individually (an ancestor's blend mode groups its whole
   subtree; isolation on the child doesn't exempt it), and that this renderer doesn't actually
   blend reliably against a fixed-position header's backdrop anyway — it painted as a flat black
   box instead of blending through. Simplest reliable fix: drop blend-mode entirely and give the
   pill the same real, always-solid styling as the "Book a Free Consultation" button next to it
   (.rr-btn-primary — solid white, dark text, no scroll-state dependency), so it just always
   looks right instead of depending on tricks that don't render consistently. */
.header-lan {
  background: var(--white);
  border-color: var(--border);
}
.header-lan .lang-toggle .lang-toggle__opt,
.header-lan .lang-toggle .lang-toggle__sep {
  color: var(--black);
}

.header-area:not(.scrolled) {
  mix-blend-mode: normal;
  background-color: transparent;
}
.header-area:not(.scrolled) .main-menu li a {
  color: var(--white);
}
.header-area:not(.scrolled) .main-menu > ul > li:hover > a {
  color: #cccccc;
}

/* The vertical "Trusted Property Partner" strip on the home hero used a template placeholder
   glyph (a plain "W", sized by its own tiny 29x41 source file, with mix-blend-mode:exclusion to
   stay visible over the photo) — swapped for the real Dot Studio ring mark, which is a much
   larger square source image, so it needs an explicit small size here instead of relying on the
   source file's own pixel dimensions. Normal blend (not exclusion) since the mark is already
   white and exclusion doesn't reliably render as a blend in this renderer (see header-area fix
   above) — it would just show as a flat colour block instead of the actual mark. */
.hero-nav__content img {
  width: 26px;
  height: auto;
  mix-blend-mode: normal;
}