/* ==========================================================================
   Arock Construction — Premium Design Layer
   Loaded last. Elevates every page to agency-quality finish.
   Depends on tokens from arock-site.css / arock-scroll-animations.css.
   ========================================================================== */

/* ── Luxury display font (architecture-grade) ─────────────────────── */


/* ── Enhanced token layer ─────────────────────────────────────────── */
:root {
  --ar-gold:            #FFB214;
  --ar-gold-deep:       #C8860A;
  --ar-gold-pale:       rgba(255,178,20,.10);
  --ar-gold-glow:       rgba(255,178,20,.22);
  --ar-ink:             #0A0A08;
  --ar-ink-soft:        #3A3630;
  --ar-muted:           #8A867E;
  --ar-surface:         #FAFAF8;
  --ar-surface-warm:    #F5F2EC;
  --ar-dark:            #0D0C09;
  --ar-dark-mid:        #161410;
  --ar-hairline:        rgba(0,0,0,.08);
  --ar-ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
  --ar-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ar-display:         'Cormorant Garamond', Georgia, serif;
  --ar-body:            'Plus Jakarta Sans', 'Urbanist', sans-serif;
  --ar-r-sm:            4px;
  --ar-r-md:            8px;
  --ar-r-lg:            14px;
  --ar-shadow-gold:     0 0 40px rgba(255,178,20,.15);
  --ar-shadow-card:     0 4px 12px rgba(0,0,0,.06), 0 20px 48px rgba(0,0,0,.08);
  --ar-shadow-lifted:   0 8px 24px rgba(0,0,0,.10), 0 32px 72px rgba(0,0,0,.12);
}


/* =========================================================================
   1. PRELOADER
   Brief branded sequence: Arock wordmark + amber sweep line.
   Dismissed by JS after page load; hidden instantly if prefers-reduced-motion.
   ========================================================================= */

#ar-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--ar-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity .55s var(--ar-ease), visibility .55s;
}

#ar-preloader.ar-done {
  opacity: 0;
  visibility: hidden;
}

.ar-pl-logo {
  font-family: var(--ar-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .45em;
  text-transform: none;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  animation: arPlLogoIn .5s var(--ar-ease) .1s forwards;
}

@keyframes arPlLogoIn {
  to { opacity: 1; transform: none; }
}

.ar-pl-track {
  width: 80px;
  height: 1.5px;
  background: rgba(255,255,255,.12);
  border-radius: 2px;
  overflow: hidden;
}

.ar-pl-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--ar-gold-deep), var(--ar-gold));
  border-radius: 2px;
  animation: arPlBar .9s var(--ar-ease) .25s forwards;
}

@keyframes arPlBar {
  from { width: 0;    opacity: 1; }
  85%  { width: 100%; opacity: 1; }
  to   { width: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #ar-preloader { display: none; }
}


/* =========================================================================
   2. CUSTOM CURSOR (desktop only)
   Amber dot + trailing ring. Scales on hover, inverts on dark backgrounds.
   ========================================================================= */

@media (pointer: fine), (min-width: 1025px) {
  body.ar-cursor-ready,
  body.ar-cursor-ready *,
  body.ar-cursor-ready *::before,
  body.ar-cursor-ready *::after {
    cursor: none !important;
  }

  #ar-cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    background: var(--ar-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    transition: width .2s, height .2s, background .2s, opacity .2s;
    will-change: transform;
    opacity: 0;
  }

  body.ar-cursor-ready #ar-cursor-dot { opacity: 1; }

  #ar-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 38px; height: 38px;
    border: 1.5px solid rgba(255,178,20,.65);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483646;
    transform: translate(-50%, -50%);
    transition: width .25s var(--ar-ease), height .25s var(--ar-ease), border-color .25s, opacity .25s;
    will-change: transform;
    opacity: 0;
  }

  body.ar-cursor-ready #ar-cursor-ring { opacity: 1; }

  body.ar-cursor-hover #ar-cursor-dot {
    width: 14px; height: 14px;
    background: #fff;
  }

  body.ar-cursor-hover #ar-cursor-ring {
    width: 54px; height: 54px;
    border-color: rgba(255,178,20,.9);
  }

  body.ar-cursor-dark #ar-cursor-ring {
    border-color: rgba(255,255,255,.75);
  }
}

@media (pointer: coarse) and (max-width: 1024px) {
  #ar-cursor-dot,
  #ar-cursor-ring {
    display: none !important;
  }
}


/* =========================================================================
   3. HEADER — frosted glass on scroll
   .ar-scrolled class added by JS when window.scrollY > 60
   ========================================================================= */

.site-header.ar-scrolled {
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transition: background-color .4s, backdrop-filter .4s, box-shadow .4s, border-color .4s !important;
}

/* Hide legacy header border line */
.site-header .header-wrap:before,
.site-header .header-wrap:after,
.header-wrap:before,
.header-wrap:after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* Flush hero layout - no negative margin offset */
.is-header-float .site-header ~ .elementor,
.is-header-float .site-header + .site-main,
.site-header ~ .elementor,
.site-header + .site-main,
.elementor,
.site-main {
  margin-top: 0 !important;
}

/* Disable stray active nav item golden dot */
.nav-menu > ul > li.current-menu-item > a::after {
  display: none !important;
}


/* =========================================================================
   4. TYPOGRAPHY — Cormorant display headings
   Applied to the large animated section titles + quote/blockquote elements.
   Body + nav remain Plus Jakarta Sans.
   ========================================================================= */

.qodef-qi-animated-text .qodef-m-title,
.ar-display,
blockquote,
.qodef-qi-typeout-text .qodef-m-text {
  font-family: var(--ar-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

.qodef-qi-animated-text .qodef-m-title {
  font-size: clamp(40px, 4.2vw, 52px) !important;
  line-height: 1.15em !important;
  letter-spacing: -0.015em !important;
}

@media (max-width: 1024px) {
  .qodef-qi-animated-text .qodef-m-title {
    font-size: 36px !important;
  }
}

@media (max-width: 767px) {
  .qodef-qi-animated-text .qodef-m-title {
    font-size: 28px !important;
  }
}

/* The animated typeout headings look strong with Cormorant italic */
.qodef-qi-typeout-text .qodef-m-text {
  font-style: italic;
}

/* Eyebrow labels & textual button eyebrows */
.ar-eyebrow,
.elementor-widget-qi_addons_for_elementor_button .qodef-qi-button.qodef-layout--textual,
.qodef-qi-button.qodef-layout--textual {
  font-family: var(--ar-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.ar-eyebrow {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  color: var(--ar-gold) !important;
}


/* =========================================================================
   5. SHIMMER BUTTONS — gold sweep on hover
   Works on any .qodef-qi-button or .elementor-button
   ========================================================================= */

.qodef-qi-button,
.elementor-button,
.ar-btn {
  position: relative;
  overflow: hidden;
}

.qodef-qi-button::before,
.elementor-button::before,
.ar-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .55s var(--ar-ease);
  pointer-events: none;
}

.qodef-qi-button:hover::before,
.elementor-button:hover::before,
.ar-btn:hover::before {
  left: 160%;
}

/* Primary amber CTA — enhanced */
.qodef-qi-button.qodef-layout--filled {
  border-radius: var(--ar-r-sm);
  font-weight: 600;
  letter-spacing: .04em;
  transition:
    background-color .3s,
    box-shadow .3s,
    transform .35s var(--ar-ease);
}

.qodef-qi-button.qodef-layout--filled:hover {
  box-shadow: 0 12px 36px var(--ar-gold-glow);
  transform: translateY(-2px);
}


/* =========================================================================
   6. PORTFOLIO & PROJECT IMAGE OVERLAYS
   Luxury reveal: gradient + title slides up from bottom on hover.
   ========================================================================= */

/* Portfolio grid thumbnails */
.qodef-qi-portfolio-list .qodef-m-item,
.qodef-portfolio-list-holder .qodef-e-item {
  position: relative;
  border-radius: var(--ar-r-md);
  overflow: hidden;
}

.qodef-qi-portfolio-list .qodef-m-item::after,
.qodef-portfolio-list-holder .qodef-e-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,8,.80) 0%,
    rgba(10,10,8,.30) 38%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .45s var(--ar-ease);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--ar-r-md);
}

.qodef-qi-portfolio-list .qodef-m-item:hover::after,
.qodef-portfolio-list-holder .qodef-e-item:hover::after {
  opacity: 1;
}

/* Gold corner accent on project images */
.qodef-qi-portfolio-list .qodef-m-item .qodef-e-media::before,
.qodef-portfolio-list-holder .qodef-e-item .qodef-e-media::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 42px; height: 3px;
  background: var(--ar-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ar-ease) .1s;
  z-index: 2;
}

.qodef-qi-portfolio-list .qodef-m-item:hover .qodef-e-media::before,
.qodef-portfolio-list-holder .qodef-e-item:hover .qodef-e-media::before {
  transform: scaleX(1);
}

/* Project title slides up */
.qodef-qi-portfolio-list .qodef-m-item .qodef-e-title,
.qodef-portfolio-list-holder .qodef-e-item .qodef-e-title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 20px;
  z-index: 2;
  color: #fff;
  transform: translateY(100%);
  transition: transform .42s var(--ar-ease);
}

.qodef-qi-portfolio-list .qodef-m-item:hover .qodef-e-title,
.qodef-portfolio-list-holder .qodef-e-item:hover .qodef-e-title {
  transform: none;
}

/* Rounded corners on all gallery / popup images */
a.qodef-popup-item {
  border-radius: var(--ar-r-md) !important;
}

/* Lightbox trigger icon overlay */
a.qodef-popup-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10,10,8,.45) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  border-radius: var(--ar-r-md);
}

a.qodef-popup-item:hover::after { opacity: 1; }

/* =========================================================================
   6B. LIGHTBOX & FSLIGHTBOX MODAL CONTROLS & OVERLAY
   High-contrast, agency-quality overlay with frosted controls, crisp icons,
   proper maximum picture containment, and perfect cursor visibility.
   ========================================================================= */

.fslightbox-container {
  background: rgba(8, 8, 8, 0.95) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  z-index: 1000000000 !important;
}

.fslightbox-source {
  max-width: calc(100vw - 160px) !important;
  max-height: calc(100vh - 150px) !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.3s ease !important;
}

/* Lightbox Top Navigation Bar */
.fslightbox-container .fslightbox-nav {
  height: 80px !important;
  padding: 20px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000000050 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%) !important;
  pointer-events: none !important;
}

.fslightbox-container .fslightbox-nav > * {
  pointer-events: auto !important;
}

/* Slide Counter Badge */
.fslightbox-container .fslightbox-slide-number-container {
  position: relative !important;
  height: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(22, 20, 16, 0.88) !important;
  border: 1px solid rgba(255, 178, 20, 0.35) !important;
  border-radius: 30px !important;
  padding: 8px 18px !important;
  color: #FAFAF8 !important;
  font-family: var(--ar-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.fslightbox-container .fslightbox-slide-number-container span:first-child {
  color: var(--ar-gold, #FFB214) !important;
  font-weight: 700 !important;
}

.fslightbox-container .fslightbox-slash {
  background: rgba(255, 255, 255, 0.35) !important;
  height: 12px !important;
  margin: 0 4px !important;
}

/* Lightbox Toolbar & Close Button */
.fslightbox-container .fslightbox-toolbar {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  height: auto !important;
  background: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.fslightbox-container .fslightbox-toolbar-button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  background: rgba(22, 20, 16, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.fslightbox-container .fslightbox-toolbar-button:hover {
  background: var(--ar-gold, #FFB214) !important;
  border-color: var(--ar-gold, #FFB214) !important;
  color: #0A0A08 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 24px rgba(255, 178, 20, 0.6) !important;
}

.fslightbox-container .fslightbox-toolbar-button svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 0.5px !important;
  transition: transform 0.25s ease !important;
}

.fslightbox-container .fslightbox-toolbar-button:hover svg {
  transform: rotate(90deg) !important;
  fill: #0A0A08 !important;
  stroke: #0A0A08 !important;
}

/* Lightbox Forward & Backward Navigation Buttons */
.fslightbox-slide-btn-container {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1000000050 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fslightbox-slide-btn-container-previous {
  left: 28px !important;
}

.fslightbox-slide-btn-container-next {
  right: 28px !important;
}

.fslightbox-container .fslightbox-slide-btn {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 50% !important;
  background: rgba(22, 20, 16, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.fslightbox-container .fslightbox-slide-btn:hover {
  background: var(--ar-gold, #FFB214) !important;
  border-color: var(--ar-gold, #FFB214) !important;
  color: #0A0A08 !important;
  transform: scale(1.12) !important;
  box-shadow: 0 0 28px rgba(255, 178, 20, 0.65), 0 10px 36px rgba(0, 0, 0, 0.6) !important;
}

.fslightbox-container .fslightbox-slide-btn svg {
  width: 26px !important;
  height: 26px !important;
  stroke: currentColor !important;
  stroke-width: 2.5px !important;
  fill: none !important;
  display: block !important;
  transition: transform 0.25s ease, stroke 0.2s ease !important;
}

.fslightbox-container .fslightbox-slide-btn line {
  stroke: currentColor !important;
  stroke-width: 2.5px !important;
}

.fslightbox-container .fslightbox-slide-btn path {
  fill: currentColor !important;
}

.fslightbox-slide-btn-container-previous:hover .fslightbox-slide-btn svg {
  transform: translateX(-4px) !important;
  stroke: #0A0A08 !important;
}

.fslightbox-slide-btn-container-next:hover .fslightbox-slide-btn svg {
  transform: translateX(4px) !important;
  stroke: #0A0A08 !important;
}

/* Lightbox Mobile / Tablet Responsiveness */
@media (max-width: 768px) {
  .fslightbox-slide-btn-container-previous {
    left: 12px !important;
  }
  .fslightbox-slide-btn-container-next {
    right: 12px !important;
  }
  .fslightbox-container .fslightbox-slide-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .fslightbox-container .fslightbox-slide-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  .fslightbox-source {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 130px) !important;
  }
  .fslightbox-container .fslightbox-nav {
    height: 60px !important;
    padding: 10px 16px !important;
  }
  .fslightbox-container .fslightbox-toolbar-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
  .fslightbox-container .fslightbox-slide-number-container {
    padding: 6px 14px !important;
    font-size: 12px !important;
  }
}

/* Magnific Popup Enhancement */
.mfp-bg {
  background: rgba(10, 10, 8, 0.95) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  z-index: 1000000000 !important;
}

.mfp-wrap {
  z-index: 1000000001 !important;
}

.mfp-close {
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  right: 24px !important;
  top: 24px !important;
  background: rgba(22, 20, 16, 0.88) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 50% !important;
  color: #FFFFFF !important;
  font-size: 26px !important;
  opacity: 1 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.mfp-close:hover {
  background: var(--ar-gold, #FFB214) !important;
  border-color: var(--ar-gold, #FFB214) !important;
  color: #0A0A08 !important;
  transform: scale(1.1) !important;
}

.mfp-arrow {
  width: 58px !important;
  height: 58px !important;
  background: rgba(22, 20, 16, 0.88) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important;
  transition: all 0.28s ease !important;
  cursor: pointer !important;
}

.mfp-arrow:hover {
  background: var(--ar-gold, #FFB214) !important;
  border-color: var(--ar-gold, #FFB214) !important;
  transform: scale(1.12) !important;
}

.mfp-arrow-left { left: 28px !important; }
.mfp-arrow-right { right: 28px !important; }
.mfp-img {
  max-height: calc(100vh - 140px) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}


/* =========================================================================
   7. SERVICE / PROCESS CARDS — premium glass surface
   ========================================================================= */

.qodef-qi-process .qodef-process-item .qodef-e-inner {
  border-radius: var(--ar-r-md) !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: var(--ar-shadow-card);
}

.qodef-qi-process .qodef-process-item:hover .qodef-e-inner {
  box-shadow: var(--ar-shadow-lifted) !important;
  border-color: rgba(255,178,20,.35) !important;
}

/* Service list items with hover arrow shift */
.qodef-shortcode .qodef-e-inner {
  border-radius: var(--ar-r-md);
}


/* =========================================================================
   8. STAT COUNTERS — refined display
   ========================================================================= */

.qodef-qi-counter .qodef-m-digit {
  font-family: var(--ar-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums lining-nums;
}

.qodef-qi-counter .qodef-m-separator .qodef-m-line {
  background: linear-gradient(90deg, var(--ar-gold-deep), var(--ar-gold));
  height: 1.5px !important;
  border: none !important;
}

.qodef-qi-counter .qodef-m-label {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ar-muted);
}


/* =========================================================================
   9. NEWS / BLOG CARDS — premium styling
   ========================================================================= */

.qodef-addons-blog-slider .qodef-blog-item .qodef-e-inner {
  border-radius: var(--ar-r-md);
  overflow: hidden;
  box-shadow: var(--ar-shadow-card);
  transition: transform .45s var(--ar-ease), box-shadow .45s var(--ar-ease);
}

.qodef-addons-blog-slider .qodef-blog-item:hover .qodef-e-inner {
  box-shadow: var(--ar-shadow-lifted);
}

.qodef-addons-blog-slider .qodef-e-media-image {
  border-radius: 0;
}

/* Category badge on blog cards */
.qodef-addons-blog-slider .qodef-e-category a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ar-gold-deep);
  background: var(--ar-gold-pale);
  padding: 4px 10px;
  border-radius: 3px;
}


/* =========================================================================
   10. TESTIMONIAL / QUOTE STYLING
   ========================================================================= */

blockquote {
  position: relative;
  padding: 28px 28px 28px 48px;
  border-left: none;
  background: #fff;
  border-radius: var(--ar-r-md);
  box-shadow: var(--ar-shadow-card);
  font-family: var(--ar-display);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  color: var(--ar-ink-soft);
}

blockquote::before {
  content: '\201C';
  font-family: var(--ar-display);
  font-size: 80px;
  line-height: 1;
  color: var(--ar-gold);
  position: absolute;
  top: 8px;
  left: 16px;
  opacity: .6;
}

blockquote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--ar-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ar-muted);
}

blockquote cite::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--ar-gold);
  vertical-align: middle;
  margin-right: 10px;
}


/* =========================================================================
   11. MARQUEE BAND & 3D BACKGROUND IMAGE SCROLL (Desktop & Mobile)
   ========================================================================= */

/* Section Container with Fixed Background Parallax Window on Scroll (Desktop & Mobile) */
.elementor-element.elementor-element-4d46a10,
.elementor-section.elementor-element-4d46a10 {
  position: relative !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  background-color: #1C1D24 !important;
  background-image: none !important;
  padding: clamp(60px, 8vw, 130px) 0 !important;
  min-height: clamp(200px, 28vh, 320px) !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  clip-path: inset(0) !important;
  -webkit-clip-path: inset(0) !important;
}

/* The Fixed Background Layer — Stays Fixed in Place on Mobile & Desktop Scroll */
.elementor-element.elementor-element-4d46a10::before,
.elementor-section.elementor-element-4d46a10::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-image: url("/assets/img/3d-render-abstract-deatailed-shape-dynamic-futuristic-background.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
  will-change: transform !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
}

.elementor-element.elementor-element-4d46a10 > .elementor-background-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(20, 20, 24, 0.45) 50%, rgba(10, 10, 10, 0.75) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.elementor-element.elementor-element-4d46a10 .elementor-container,
.elementor-element.elementor-element-4d46a10 .elementor-column,
.elementor-element.elementor-element-4d46a10 .elementor-widget-wrap,
.elementor-element.elementor-element-4d46a10 .elementor-widget,
.elementor-element.elementor-element-4d46a10 .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
}

/* Marquee Scroller Wrapper */
.qodef-qi-text-marquee {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  display: flex !important;
  user-select: none !important;
}

.qodef-qi-text-marquee .qodef-m-content {
  display: flex !important;
  width: max-content !important;
  white-space: nowrap !important;
  will-change: transform !important;
}

/* The Continuous Marquee Track Animation */
.qodef-qi-text-marquee .qodef-m-text.qodef-text--original {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  white-space: nowrap !important;
  animation: qode-move-horizontal-normal-text-marquee 25s linear infinite !important;
}

.qodef-qi-text-marquee .qodef-m-text.qodef-text--copy {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  white-space: nowrap !important;
  animation: qode-move-horizontal-normal-text-marquee-copy 25s linear infinite !important;
}

/* Pause on hover if user hovers */
.qodef-qi-text-marquee:hover .qodef-m-text {
  animation-play-state: paused !important;
}

/* Marquee Text Typography & Distinctive Luxury Font */
.qodef-qi-text-marquee .qodef-m-text-item {
  font-family: 'Arkipelago', 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(38px, 6.5vw, 108px) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  padding: 0 clamp(20px, 3.5vw, 48px) !important;
  display: inline-block !important;
  white-space: nowrap !important;
  color: #FFFFFF !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

/* Alternating Gold/Amber Colors matching Desktop Brand Look */
.qodef-qi-text-marquee .elementor-repeater-item-8193270 {
  color: #FFFFFF !important;
}

.qodef-qi-text-marquee .elementor-repeater-item-22a3254 {
  color: var(--ar-gold, #FFB214) !important;
}

.qodef-qi-text-marquee .elementor-repeater-item-f105cca {
  color: #FFFFFF !important;
}

.qodef-qi-text-marquee .elementor-repeater-item-b3fcd12 {
  color: var(--ar-gold, #FFB214) !important;
}

/* Infinite Seamless Marquee Keyframes */
@keyframes qode-move-horizontal-normal-text-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes qode-move-horizontal-normal-text-marquee-copy {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* Mobile Specific Refinements (< 768px) */
@media (max-width: 767.98px) {
  .elementor-element.elementor-element-4d46a10,
  .elementor-section.elementor-element-4d46a10 {
    padding: 50px 0 !important;
    min-height: 180px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .qodef-qi-text-marquee .qodef-m-text.qodef-text--original,
  .qodef-qi-text-marquee .qodef-m-text.qodef-text--copy {
    animation-duration: 20s !important;
  }

  .qodef-qi-text-marquee .qodef-m-text-item {
    font-size: clamp(34px, 8.5vw, 56px) !important;
    padding: 0 20px !important;
  }
}

/* Fixed Background Parallax Window for CTA Section (Desktop & Mobile) */
.elementor-element.elementor-element-6c2f5ce,
.elementor-section.elementor-element-6c2f5ce {
  position: relative !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  background-color: #0C0C0C !important;
  background-image: none !important;
  clip-path: inset(0) !important;
  -webkit-clip-path: inset(0) !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.elementor-element.elementor-element-6c2f5ce::before,
.elementor-section.elementor-element-6c2f5ce::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-image: url("/assets/img/arock-house-front-06-1500x1000.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
  will-change: transform !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
}

.elementor-element.elementor-element-6c2f5ce > .elementor-background-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.72) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.elementor-element.elementor-element-6c2f5ce .elementor-container {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================================
   12. SECTION DIVIDERS — amber hairline
   ========================================================================= */

.elementor-section::before {
  content: none; /* Opt-in only on specific sections */
}

.ar-divider {
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, var(--ar-gold-deep), var(--ar-gold));
  border-radius: 2px;
  margin-bottom: 24px;
}

/* Gold rule under h2 headings in light sections */
.elementor-widget-heading .elementor-heading-title {
  position: relative;
  display: inline-block;
}


/* =========================================================================
   13. "FOR SALE" SECTION — premium property card
   ========================================================================= */

/* Property listing cards */
.qodef-real-estate-listing-holder .qodef-m-item,
.qodef-property-list-holder .qodef-e-item {
  border-radius: var(--ar-r-lg);
  overflow: hidden;
  box-shadow: var(--ar-shadow-card);
  transition: transform .45s var(--ar-ease), box-shadow .45s;
}

.qodef-real-estate-listing-holder .qodef-m-item:hover,
.qodef-property-list-holder .qodef-e-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--ar-shadow-lifted);
}

/* Price badge */
.qodef-real-estate-listing-holder .qodef-e-price,
.qodef-property-list-holder .qodef-e-price {
  font-family: var(--ar-display);
  font-weight: 600;
  font-size: 1.4em;
  color: var(--ar-gold-deep);
}


/* =========================================================================
   14. CONTACT SECTION — premium form
   ========================================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select,
.wpcf7-text,
.wpcf7-email,
.wpcf7-textarea {
  border-radius: var(--ar-r-sm) !important;
  border: 1.5px solid var(--ar-hairline) !important;
  padding: 14px 16px !important;
  font-family: var(--ar-body) !important;
  font-size: 15px !important;
  background: #fff !important;
  transition: border-color .25s, box-shadow .25s !important;
  outline: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-textarea:focus {
  border-color: var(--ar-gold) !important;
  box-shadow: 0 0 0 3px var(--ar-gold-pale) !important;
}

/* `select` alone (above) has lower specificity than arock-site.css's global
   `:focus-visible { outline: 2px solid var(--arock-accent); outline-offset: 3px }`
   WCAG focus ring, so — unlike the text/textarea fields above, whose
   `input[type="..."]` base rule already out-specifies it — a <select> like
   the Contact form's "Project Type" field showed BOTH: this soft gold glow
   AND the generic amber ring floating 3px outside it. `:focus-visible` here
   matches that pseudo-class's specificity to win and suppress the outline,
   leaving just the glow above (still a WCAG-valid focus indicator). */
select:focus-visible {
  outline: none !important;
}

input[type="submit"],
button[type="submit"],
.wpcf7-submit {
  background: var(--ar-gold) !important;
  color: var(--ar-ink) !important;
  border: none !important;
  border-radius: var(--ar-r-sm) !important;
  padding: 14px 32px !important;
  font-family: var(--ar-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .3s, transform .35s var(--ar-ease), box-shadow .3s !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
  background: var(--ar-gold-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px var(--ar-gold-glow) !important;
}


/* =========================================================================
   15. FOOTER — premium dark multi-column
   ========================================================================= */

.site-footer {
  position: relative;
  background: var(--ar-dark) !important;
  overflow: hidden;
}

/* Subtle grain texture via CSS noise */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .4;
}

/* Amber atmospheric glow top-left */
.site-footer::after {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 480px; height: 480px;
  background: radial-gradient(ellipse, rgba(255,178,20,.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.site-footer .elementor-container,
.site-footer .qodef-footer-top,
.site-footer .qodef-footer-bottom,
.site-footer > div {
  position: relative;
  z-index: 1;
}

/* Footer heading */
.site-footer .elementor-heading-title,
.site-footer .widget-title {
  font-family: var(--ar-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: .02em !important;
  color: rgba(255,255,255,.9) !important;
  margin-bottom: 18px !important;
}

/* Footer links */
.site-footer a {
  color: rgba(255,255,255,.55);
  transition: color .25s;
}

.site-footer a:hover {
  color: var(--ar-gold);
}

/* Icon list — brand-colour all icons site-wide, exception for footer */
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
  color: var(--ar-gold) !important;
}

.ih-icon-wrap {
  color: var(--ar-gold) !important;
}

.site-footer .elementor-icon-list-icon i,
.site-footer .elementor-icon-list-icon svg,
.site-footer .ih-icon-wrap {
  color: #fff !important;
}

/* Footer icon list items */
.site-footer .elementor-icon-list-item {
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 7px 0;
}

.site-footer .elementor-icon-list-item:first-child {
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Footer copyright bar */
.site-footer .site-info {
  border-top: none !important;
  padding-top: 0 !important;
}

.site-info:not(.site-footer .site-info),
.qodef-footer-bottom {
  border-top: 1px solid rgba(255,178,20,.12) !important;
  padding-top: 20px !important;
}


/* =========================================================================
   16. MOBILE NAVIGATION — premium slide-in
   ========================================================================= */

@media (max-width: 1024px) {
  .mobile-navigation,
  #mobile-navigation,
  .qodef-mobile-navigation {
    background: var(--ar-dark) !important;
    border-left: 3px solid var(--ar-gold) !important;
    box-shadow: -12px 0 48px rgba(0,0,0,.5) !important;
  }

  .mobile-navigation a,
  .qodef-mobile-navigation a {
    color: rgba(255,255,255,.82) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }

  .mobile-navigation a:hover,
  .qodef-mobile-navigation a:hover {
    color: var(--ar-gold) !important;
  }

  /* Hamburger icon — amber on open */
  .menu-icon.icon-close .icon-bar,
  .qodef-mobile-header-opener.opened .icon-bar {
    background: var(--ar-gold) !important;
  }
}


/* =========================================================================
   17. HERO SECTION — deeper cinematic scrim + title refinement
   ========================================================================= */

/* Slide nav arrows — minimal line style */
.bdt-prime-slider .bdt-slidenav,
.bdt-slideshow .bdt-slidenav {
  border: 1.5px solid rgba(255,255,255,.35) !important;
  border-radius: 2px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: transparent !important;
  transition: background .3s, border-color .3s !important;
}

.bdt-prime-slider .bdt-slidenav:hover,
.bdt-slideshow .bdt-slidenav:hover {
  background: rgba(255,178,20,.18) !important;
  border-color: var(--ar-gold) !important;
}

/* Slide counter — amber fraction display */
.bdt-prime-slider .bdt-ps-fraction-count {
  font-family: var(--ar-display);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
}

.bdt-prime-slider .bdt-ps-fraction-count .bdt-ps-current {
  color: var(--ar-gold);
  font-size: 16px;
}

/* =========================================================================
   17. MOBILE HEADER & NAVIGATION DRAWER (< 992px)
   ========================================================================= */

@media (max-width: 991px) {
  /* Header Bar Layout on Mobile */
  .site-header {
    height: 64px !important;
    max-height: 64px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background-color: transparent !important;
  }

  .site-header .header-wrap {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .site-header .header-wrap-inner {
    width: 100% !important;
    height: 100% !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
  }

  /* Centered Brand Logo */
  .site-header .site-branding {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    pointer-events: auto !important;
  }

  .site-header .site-branding-wrap {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .site-header .site-branding-left,
  .site-header .site-branding-right {
    display: none !important;
  }

  .site-header .site-branding-center .site-title {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .site-header .site-branding-center .site-title a.site-logo-link {
    height: 28px !important;
    min-width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .site-header .site-branding-center img.logo-colored,
  .site-header .site-branding-center img.logo-negative,
  .site-header .site-branding-center img.logo-white {
    max-height: 26px !important;
    width: auto !important;
  }

  .site-header .site-navigation {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .site-header .site-navigation .menu-wrap {
    width: 100% !important;
    background: none !important;
    padding: 0 !important;
  }

  .site-header .site-navigation .layout-medium {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: static !important;
  }

  /* Hide legacy inline navigation on mobile - replaced by full drawer */
  .site-header .nav-menu {
    display: none !important;
  }

  /* Hamburger Menu Toggle */
  .site-header .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 10 !important;
    border-radius: 4px !important;
  }

  .site-header .menu-toggle .lines {
    position: relative !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    top: auto !important;
    left: auto !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
  }

  .site-header .menu-toggle .lines::before,
  .site-header .menu-toggle .lines::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    width: 20px !important;
    height: 2px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    transition: transform 0.3s ease, top 0.3s ease !important;
  }

  .site-header .menu-toggle .lines::before {
    top: -6px !important;
  }

  .site-header .menu-toggle .lines::after {
    top: 6px !important;
  }

  /* Scrolled Header */
  .site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  .site-header.is-scrolled .menu-toggle .lines,
  .site-header.is-scrolled .menu-toggle .lines::before,
  .site-header.is-scrolled .menu-toggle .lines::after {
    background-color: #0c0c0c !important;
  }

  /* Completely Remove/Hide Search Elements across mobile & header */
  .site-header .search-toggle,
  .site-header .search-container,
  .search-toggle,
  .search-container {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================================================
   Mobile Navigation Drawer (Fullscreen Luxury Dark Overlay)
   ========================================================================= */

.ar-mobile-drawer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ar-mobile-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.ar-mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ar-mobile-drawer__content {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #0C0C0C;
  background: linear-gradient(180deg, #101010 0%, #0A0A0A 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 32px 20px;
  z-index: 2;
  box-sizing: border-box;
  transform: translateY(-8px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ar-mobile-drawer.is-open .ar-mobile-drawer__content {
  transform: translateY(0);
}

.ar-mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  min-height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
  width: 100%;
  flex-shrink: 0;
}

.ar-mobile-drawer__close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.25s, transform 0.25s, border-color 0.25s, color 0.25s;
}

.ar-mobile-drawer__close:hover,
.ar-mobile-drawer__close:active {
  background: var(--ar-gold, #FFB214);
  color: #0C0C0C;
  border-color: var(--ar-gold, #FFB214);
  transform: rotate(90deg);
}

.ar-mobile-drawer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
}

.ar-mobile-drawer__logo img {
  max-height: 26px;
  width: auto;
  display: block;
}

.ar-mobile-drawer__header-spacer {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  visibility: hidden;
  pointer-events: none;
}

.ar-mobile-drawer__nav {
  margin-bottom: 20px;
  width: 100%;
}

.ar-mobile-drawer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ar-mobile-drawer__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ar-mobile-drawer__link {
  display: flex;
  align-items: center;
  padding: 13px 4px;
  font-family: var(--ar-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 19px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.25s, transform 0.25s, padding-left 0.25s;
  position: relative;
}

.ar-mobile-drawer__link:hover {
  color: var(--ar-gold, #FFB214);
  padding-left: 6px;
}

.ar-mobile-drawer__link.active,
.ar-mobile-drawer__item.is-active .ar-mobile-drawer__link {
  color: var(--ar-gold, #FFB214);
  font-weight: 600;
}

.ar-mobile-drawer__link-num {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 178, 20, 0.65);
  margin-right: 14px;
  font-family: 'Urbanist', monospace;
  letter-spacing: 0.06em;
}

.ar-mobile-drawer__link-text {
  letter-spacing: 0.01em;
}

.ar-mobile-drawer__active-dot {
  width: 6px;
  height: 6px;
  background-color: var(--ar-gold, #FFB214);
  border-radius: 50%;
  margin-left: auto;
  box-shadow: 0 0 10px rgba(255, 178, 20, 0.9);
}

.ar-mobile-drawer__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.ar-mobile-drawer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ar-mobile-drawer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.25s;
}

.ar-mobile-drawer__contact-item svg {
  color: var(--ar-gold, #FFB214);
  flex-shrink: 0;
}

.ar-mobile-drawer__contact-item:hover {
  color: #ffffff;
}

.ar-mobile-drawer__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #FFB214 0%, #D98D00 100%);
  color: #0C0C0C;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 4px;
  box-shadow: 0 4px 16px rgba(255, 178, 20, 0.3);
  transition: transform 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
}

.ar-mobile-drawer__cta-btn:active {
  transform: scale(0.98);
}

/* =========================================================================
   Mobile Hero Slider & Paragraph Typography Refinements (< 768px)
   ========================================================================= */

@media (max-width: 767px) {
  /* Hero Scrim with Rich Dark Gradient for Flawless Legibility */
  .elementor-11 .elementor-element.elementor-element-5312973d > .elementor-background-overlay,
  .elementor-element-733b2ef5 .bdt-slideshow .bdt-overlay-default,
  .bdt-prime-slider .bdt-overlay-default,
  .bdt-slideshow .bdt-overlay-default {
    background: linear-gradient(180deg, rgba(6, 6, 6, 0.45) 0%, rgba(6, 6, 6, 0.65) 42%, rgba(6, 6, 6, 0.88) 100%) !important;
    opacity: 1 !important;
  }

  /* Hero Main Content Wrapper */
  .bdt-prime-slider-skin-slide .bdt-prime-slider-wrapper {
    margin: 0 auto !important;
    padding: 0 18px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .bdt-prime-slider-skin-slide .bdt-prime-slider-desc {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Amber Accent Line on Mobile */
  #bdt-733b2ef5 .bdt-prime-slider-desc .bdt-main-title::before,
  .bdt-prime-slider-desc .bdt-main-title::before {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 3px !important;
    border-radius: 2px !important;
    margin: 0 auto 16px auto !important;
    background: linear-gradient(90deg, #FFB214, #D98D00) !important;
    box-shadow: 0 0 10px rgba(255, 178, 20, 0.6) !important;
  }

  /* Hero Headline on Mobile */
  .bdt-prime-slider-desc .bdt-main-title .bdt-title-tag,
  .elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-prime-slider-desc .bdt-main-title .bdt-title-tag {
    font-family: 'Urbanist', var(--ar-display, sans-serif) !important;
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.22 !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: -0.015em !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85) !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
  }

  /* Excerpt Container */
  .bdt-prime-slider .bdt-slide-text-mobile,
  .elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-text-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 0 !important;
    width: 100% !important;
  }

  /* Excerpt Paragraph on Mobile */
  .bdt-prime-slider .bdt-slide-text-mobile .bdt-slider-excerpt,
  .bdt-prime-slider .bdt-slide-text-mobile .bdt-slider-excerpt p,
  .elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-text-mobile .bdt-slider-excerpt,
  .elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-text-mobile .bdt-slider-excerpt p,
  .bdt-slide-text-mobile .bdt-slider-excerpt,
  .bdt-slide-text-mobile .bdt-slider-excerpt p,
  .bdt-prime-slider-skin-slide .bdt-slide-text-mobile .bdt-slider-excerpt,
  .bdt-prime-slider-skin-slide .bdt-slide-text-mobile .bdt-slider-excerpt p {
    color: rgba(255, 255, 255, 0.94) !important;
    font-family: var(--ar-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 14.5px !important;
    line-height: 1.68 !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    max-width: min(90vw, 380px) !important;
    margin: 0 auto 20px auto !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Details CTA Button on Mobile */
  .bdt-slide-text-mobile .bdt-slide-btn,
  .elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-text-mobile .bdt-slide-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #FFB214 0%, #D98D00 100%) !important;
    color: #0A0A08 !important;
    padding: 13px 32px !important;
    border-radius: 9999px !important;
    border: none !important;
    font-family: var(--ar-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 18px rgba(255, 178, 20, 0.4) !important;
    margin: 0 auto !important;
    text-decoration: none !important;
    transition: transform 0.25s, box-shadow 0.25s !important;
  }

  .bdt-slide-text-mobile .bdt-slide-btn:active {
    transform: scale(0.97) !important;
  }

  .bdt-slide-text-mobile .bdt-slide-btn .bdt-prime-slider-button-text {
    color: #0A0A08 !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Slider Navigation Arrows on Mobile */
  .bdt-prime-slider-skin-slide .bdt-navigation-arrows {
    position: absolute !important;
    bottom: 18px !important;
    right: 18px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    z-index: 50 !important;
  }

  .bdt-prime-slider-skin-slide .bdt-prime-slider-next,
  .bdt-prime-slider-skin-slide .bdt-prime-slider-previous {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 6px !important;
    background: rgba(12, 12, 12, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s !important;
  }

  .bdt-prime-slider-skin-slide .bdt-prime-slider-next:active,
  .bdt-prime-slider-skin-slide .bdt-prime-slider-previous:active,
  .bdt-prime-slider-skin-slide .bdt-prime-slider-next:hover,
  .bdt-prime-slider-skin-slide .bdt-prime-slider-previous:hover {
    background-color: var(--ar-gold, #FFB214) !important;
    border-color: var(--ar-gold, #FFB214) !important;
    color: #0C0C0C !important;
  }

  .bdt-prime-slider-skin-slide .bdt-prime-slider-next svg,
  .bdt-prime-slider-skin-slide .bdt-prime-slider-previous svg {
    color: currentColor !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* Section Paragraphs & Typography on Mobile */
  .elementor-element-1a87507 .elementor-heading-title {
    font-size: 16px !important;
    line-height: 1.62 !important;
    color: #3D3935 !important;
    font-weight: 400 !important;
    margin-bottom: 20px !important;
  }

  .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p {
    font-size: 14.5px !important;
    line-height: 1.68 !important;
    color: #44403C !important;
    margin-top: 12px !important;
  }

  .qodef-qi-process .qodef-e-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }

  .qodef-qi-process .qodef-e-text {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #55514E !important;
  }
}


/* =========================================================================
   18. SCROLL REVEAL — enhanced stagger for card grids
   ========================================================================= */

.ar-fade {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s var(--ar-ease),
    transform .7s var(--ar-ease);
}

.ar-fade.ar-visible {
  opacity: 1;
  transform: none;
}

/* Per-child stagger inside a revealed grid */
.ar-stagger .ar-fade:nth-child(1) { transition-delay: .04s; }
.ar-stagger .ar-fade:nth-child(2) { transition-delay: .10s; }
.ar-stagger .ar-fade:nth-child(3) { transition-delay: .16s; }
.ar-stagger .ar-fade:nth-child(4) { transition-delay: .22s; }
.ar-stagger .ar-fade:nth-child(5) { transition-delay: .28s; }
.ar-stagger .ar-fade:nth-child(6) { transition-delay: .34s; }


/* =========================================================================
   19. MAGNETIC BUTTON WRAPPER
   (transform set by JS; overflow:visible ensures the movement is visible)
   ========================================================================= */

.ar-magnetic {
  display: inline-block;
  will-change: transform;
  transition: transform .4s var(--ar-ease-spring);
}

.ar-magnetic:hover {
  transition: transform .15s var(--ar-ease);
}


/* =========================================================================
   20. AMBIENT TEXT SELECTION — brand-consistent
   ========================================================================= */

::selection {
  background: rgba(255,178,20,.25);
  color: var(--ar-ink);
}


/* =========================================================================
   21. IMAGE RENDERING & REVEAL
   ========================================================================= */

img[loading="lazy"] {
  filter: none;
}

img[loading="lazy"].ar-loaded {
  filter: none;
}


/* =========================================================================
   22. PREMIUM LINK HOVER — amber underline sweep on body links
   ========================================================================= */

.elementor-widget-text-editor a,
.entry-content a,
.qodef-e-text a {
  color: var(--ar-gold-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--ar-gold), var(--ar-gold));
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 0 1.5px;
  transition: background-size .35s var(--ar-ease), color .25s;
}

.elementor-widget-text-editor a:hover,
.entry-content a:hover,
.qodef-e-text a:hover {
  color: var(--ar-gold-deep);
  background-size: 100% 1.5px;
}


/* =========================================================================
   23. PAGE TRANSITION FADE
   .ar-leaving class added on internal link click before navigation.
   ========================================================================= */

body.ar-leaving {
  opacity: 0;
  transition: opacity .3s ease;
}


/* =========================================================================
   24. FLOATING CONTACT BADGE
   Persistent "Get in Touch" pill anchored bottom-left (above mobile nav).
   ========================================================================= */

#ar-contact-badge {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--ar-dark);
  border: 1px solid rgba(255,178,20,.28);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  font-family: var(--ar-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transition: background .3s, border-color .3s, color .3s, transform .35s var(--ar-ease), opacity .35s;
  opacity: 0;
  transform: translateY(8px);
}

#ar-contact-badge.ar-visible {
  opacity: 1;
  transform: none;
}

#ar-contact-badge:hover {
  background: var(--ar-gold);
  border-color: var(--ar-gold);
  color: var(--ar-ink);
}

#ar-contact-badge::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--ar-gold);
  border-radius: 50%;
  flex-shrink: 0;
  animation: arPulse 2s ease infinite;
}

#ar-contact-badge:hover::before {
  background: var(--ar-ink);
  animation: none;
}

@keyframes arPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,178,20,.6); }
  50%       { box-shadow: 0 0 0 5px rgba(255,178,20,0); }
}

@media (max-width: 767px) {
  #ar-contact-badge { display: none; }

  .arock-top {
    right: 14px !important;
    bottom: 14px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
  }
}


/* =========================================================================
   25. REDUCED MOTION — zero animations
   ========================================================================= */

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

  #ar-preloader { display: none; }

  img[loading="lazy"] { filter: none; }

  .ar-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   Global Search Removal & Suppression (Desktop & Mobile)
   ========================================================================= */
.search-toggle,
.search-container,
.search-box,
.search-form,
.ar-search-icon,
.ar-mobile-drawer__search-btn,
.ar-mobile-drawer__search,
.ar-mobile-drawer__search-form,
[class*="search-toggle"],
[class*="search-box"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================================
   26. "Discover Our Story" Section (Cards Slider + Tabs) Responsive Optimization
   ========================================================================= */

/* Cards slider core containment */
.elementor-element-5d7320c,
.elementor-11 .elementor-element.elementor-element-5d7320c {
  visibility: visible !important;
  opacity: 1 !important;
}

.qodef-qi-cards-slider {
  position: relative;
  width: 100%;
}

.qodef-qi-cards-slider .qodef-e-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 240px;
  overflow: visible;
}

.qodef-qi-cards-slider .qodef-m-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  will-change: transform, opacity;
}

.qodef-qi-cards-slider .qodef-m-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.qodef-qi-cards-slider .qodef-m-fake-card {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.qodef-qi-cards-slider .qodef-m-navigation {
  position: relative;
  display: flex;
  gap: 12px;
  margin-top: 18px;
  z-index: 40;
}

.qodef-qi-cards-slider .qodef-m-navigation .qodef-nav {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ar-hairline, rgba(0,0,0,0.15));
  background: #ffffff;
  color: var(--ar-ink, #0A0A08);
  transition: all 0.25s ease;
}

.qodef-qi-cards-slider .qodef-m-navigation .qodef-nav:hover {
  background: var(--ar-gold, #FFB214);
  border-color: var(--ar-gold, #FFB214);
  color: #0A0A08;
}

.qodef-qi-cards-slider .qodef-m-navigation .qodef-nav svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
  .elementor-11 .elementor-element.elementor-element-dfdca5b {
    padding: 24px 16px 40px !important;
  }

  .elementor-11 .elementor-element.elementor-element-e46f4b3 {
    width: 100% !important;
    margin: 0 0 28px 0 !important;
  }

  .elementor-11 .elementor-element.elementor-element-e46f4b3 > .elementor-element-populated {
    margin: 0 !important;
    padding: 0 !important;
  }

  .elementor-11 .elementor-element.elementor-element-5d7320c > .elementor-widget-container {
    padding: 0 !important;
  }

  .elementor-11 .elementor-element.elementor-element-24de773 {
    width: 100% !important;
    margin: 0 !important;
  }

  .elementor-11 .elementor-element.elementor-element-24de773 > .elementor-element-populated {
    margin: 0 !important;
    padding: 0 4px !important;
  }

  .elementor-11 .elementor-element.elementor-element-5326bc5 > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
  }

  .qodef-qi-cards-slider {
    overflow: hidden;
    border-radius: 12px;
  }

  .qodef-qi-cards-slider .qodef-m-card {
    border-radius: 12px;
  }

  .qodef-qi-cards-slider .qodef-m-card img {
    border-radius: 12px;
  }
}

/* =========================================================================
   27. STORY SECTION TABS (HISTORY / MISSION / VISION) BULLETPROOF STYLING
   ========================================================================= */
html body .elementor-11 .elementor-element.elementor-element-5326bc5,
html body .elementor-element.elementor-element-5326bc5,
html body .qodef-qi-tabs-horizontal,
html body .qodef-qi-tabs-horizontal.qodef-layout--simple,
html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation,
html body ul.qodef-tabs-horizontal-navigation {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 0 6px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
  list-style: none !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation::-webkit-scrollbar,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation::-webkit-scrollbar {
  display: none !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li,
html body ul.qodef-tabs-horizontal-navigation li {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: unset !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li .qodef-tab-title,
html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li h3,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li .qodef-tab-title,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li h3 {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: unset !important;
  max-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li a,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li a,
html body ul.qodef-tabs-horizontal-navigation li a {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: unset !important;
  max-width: max-content !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: #78716C !important;
  padding: 6px 2px 10px 2px !important;
  position: relative !important;
  cursor: pointer !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: color 0.2s ease !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li.ui-tabs-active a,
html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li.active a,
html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li a.active,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li.ui-tabs-active a,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li.active a,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li a.active {
  color: #0A0A08 !important;
  font-weight: 700 !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li a:after,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li a:after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -6px !important;
  height: 2.5px !important;
  background-color: #FFB214 !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.25s ease, background-color 0.25s ease !important;
  z-index: 2 !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li.ui-tabs-active a:after,
html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li.active a:after,
html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li a.active:after,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li.ui-tabs-active a:after,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li.active a:after,
html body .qodef-qi-tabs-horizontal ul.qodef-tabs-horizontal-navigation li a.active:after {
  transform: scaleX(1) !important;
  background-color: #FFB214 !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content,
html body .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content {
  font-size: 15.5px !important;
  line-height: 1.72 !important;
  color: #44403C !important;
  max-width: 100% !important;
  padding-top: 14px !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p,
html body .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p {
  font-size: 15.5px !important;
  line-height: 1.72 !important;
  color: #44403C !important;
  position: relative !important;
  padding-left: 18px !important;
  margin: 0 !important;
}

html body .elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p::before,
html body .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  bottom: 3px !important;
  width: 3.5px !important;
  background-color: #FFB214 !important;
  border-radius: 2px !important;
}

/* =========================================================================
   28. WHY HOMEOWNERS CHOOSE AROCK — HIGH CONTRAST & VISIBILITY OVERRIDES
   ========================================================================= */
section.elementor-element-b29e53e,
.elementor-11 .elementor-element.elementor-element-b29e53e {
  background-color: #0d0c09 !important;
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-bottom: 0 !important;
}

.arock-choose-wrap,
.arock-choose-left,
.arock-choose-right,
.arock-benefit-card {
  visibility: visible !important;
  opacity: 1 !important;
}

.arock-choose-title,
.elementor-11 .elementor-element.elementor-element-b29e53e h2.arock-choose-title,
.elementor-11 .elementor-element.elementor-element-b29e53e .arock-choose-title {
  color: #ffffff !important;
  font-family: 'Urbanist', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-bottom: 0 !important;
}

.arock-choose-eyebrow {
  color: #FFB214 !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

.arock-choose-brand {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.arock-choose-sub {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.arock-benefit-card {
  background: #141310 !important;
  border: 1px solid rgba(255, 178, 20, 0.12) !important;
}

.arock-benefit-card h3,
.elementor-11 .elementor-element.elementor-element-b29e53e .arock-benefit-card h3,
.elementor-11 .elementor-element.elementor-element-b29e53e h3 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  line-height: 1.35 !important;
}

.arock-benefit-card:hover h3 {
  color: #FFB214 !important;
}

.arock-benefit-card p,
.elementor-11 .elementor-element.elementor-element-b29e53e .arock-benefit-card p {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.arock-choose-cta {
  color: #FFB214 !important;
  border-color: rgba(255, 178, 20, 0.4) !important;
  background-color: transparent !important;
}

.arock-choose-cta:hover {
  background-color: rgba(255, 178, 20, 0.12) !important;
  border-color: #FFB214 !important;
}