/* Unitz Dezignz sitewide polish. Loaded LAST on every page (after all theme,
   Elementor, and RevSlider stylesheets) and uses high-specificity selectors with
   !important so the theme cannot override it. No em dashes. */
:root{ --udz-accent:#2b2b2b; --udz-muted:#919191; --udz-gold:#B8946A; }
/* Mobile hero hidden by default (desktop). Shown via media query on phone. */
.udz-mobile-hero { display: none; }

/* Self-hosted Questrial (the site heading font) so headings render correctly even
   if Google Fonts is blocked or offline. This loads last, so it is the resolved
   source for the "Questrial" family; the Google Fonts link remains as a backup. */
@font-face{
  font-family:'Questrial';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/wp-content/uploads/fonts/questrial-v18-latin-regular.woff2') format('woff2');
}

/* Hide the broken THE STUDIO dropdown glyph (missing icon font). */
.elementskit-navbar-nav .elementskit-submenu-indicator,
.elementskit-navbar-nav a > i.icon-down-arrow1{ display:none !important; }

/* Nav hover and active underline (animated, accent), stays under current page. */
.elementskit-navbar-nav > li > a{
  background-image:linear-gradient(var(--udz-accent),var(--udz-accent)) !important;
  background-repeat:no-repeat !important;
  background-position:0 100% !important;
  background-size:0% 2px !important;
  transition:background-size .3s ease, color .25s ease !important;
}
.elementskit-navbar-nav > li > a:hover,
.elementskit-navbar-nav > li > a:focus,
.elementskit-navbar-nav > li.udz-active > a,
.elementskit-navbar-nav > li.current-menu-item > a,
.elementskit-navbar-nav > li.current-menu-ancestor > a{ background-size:100% 2px !important; }
.elementskit-navbar-nav > li > a:hover{ color:var(--udz-accent) !important; }

/* Remove the oversized PROJECTS background-text watermark (also cleared at source). */
.elementor-element-b784dca .qodef-background-text-section,
.elementor-element-b784dca .qodef-m-background-text{ display:none !important; }

/* Readable body paragraphs sitewide. */
.elementor-widget-text-editor p,
.udz-post-body p,
.udz-post-body h6,
.udz-about p{
  line-height:1.75 !important;
  margin-top:0 !important;
  margin-bottom:1.15em !important;
  max-width:760px !important;
  font-size:16px !important;
  font-weight:400 !important;
  color:#4a4a4a !important;
}
.elementor-widget-text-editor.elementor-align-center p,
.qodef-alignment--center .elementor-widget-text-editor p{ margin-left:auto !important; margin-right:auto !important; }
.qodef-m-text{ line-height:1.75 !important; }
.qodef-m-text p{ line-height:1.75 !important; margin-bottom:1.1em !important; }

/* Homepage hero heading: a refined, confident hero statement. Moderately sized
   (down from before) with an elegant semibold weight and tight line-height. The
   paragraph layer below was nudged down via its RevSlider data-xy y-offset to add
   a comfortable gap, and the label layer above keeps its separation. */
#slider-4-slide-7-layer-1 .qodef-m-title,
#slider-4-slide-7-layer-1.qodef-m-title{
  font-size:clamp(24px, 2.5vw, 38px) !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:-0.2px !important;
  max-width:600px !important;
}
#slider-4-slide-7-layer-5 .qodef-m-title,
#slider-4-slide-7-layer-5.qodef-m-title{
  letter-spacing:2.4px !important;
  font-weight:600 !important;
}

/* ITEM 1. Footer: compact, balanced, vertically aligned, logo left at a proper
   size, contact in the middle, nav on the right, copyright centered. */
.ekit-template-content-footer .elementor-element-253e1f19{ padding-top:50px !important; padding-bottom:30px !important; }
.ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{ align-items:flex-start !important; }
.ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container > .elementor-column > .elementor-element-populated{ padding-top:0 !important; }
.ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container > .elementor-column{ width:33.3333% !important; }
.ekit-template-content-footer .elementor-element-253e1f19 .elementor-element-populated{ padding:6px 22px !important; }
/* Footer logo: a neat stacked unit, UD monogram over the wordmark, centered. */
.ekit-template-content-footer .elementor-widget-image{ text-align:center !important; }
.ekit-template-content-footer .udz-foot-logo{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:14px !important; text-align:center !important; }
.ekit-template-content-footer .udz-foot-logo img{ height:auto !important; display:block !important; margin:0 auto !important; opacity:1 !important; filter:none !important; }
.ekit-template-content-footer .udz-foot-monogram{ width:100px !important; max-width:100px !important; }
.ekit-template-content-footer .udz-foot-wordmark{ width:210px !important; max-width:210px !important; }
/* The logo widget had a decorative transform (translateX -100px, translateY 50px)
   that dropped it below the other columns. Neutralise it so it sits at the top. */
.ekit-template-content-footer .elementor-element-1c13e59,
.ekit-template-content-footer .elementor-element-1c13e59 > .elementor-widget-container{
  transform:none !important;
  --e-transform-translateX:0 !important;
  --e-transform-translateY:0 !important;
  margin:0 0 14px 0 !important;
}
.ekit-template-content-footer .udz-foot-contact p{ margin:0 0 8px !important; line-height:1.7 !important; font-size:15px !important; color:#3a3a3a !important; }
.ekit-template-content-footer .udz-foot-contact a{ color:#3a3a3a !important; }
.ekit-template-content-footer .udz-foot-contact strong{ color:#2b2b2b !important; }
/* Phone numbers stacked on their own lines under the Phone: label. */
.ekit-template-content-footer .udz-foot-phones a{ display:inline-block !important; margin-top:5px !important; }
.ekit-template-content-footer .elementor-element-11a03f10 p{ margin:0 0 8px !important; line-height:1.9 !important; }
/* Footer nav links: gold hover, left to right underline slide, slight nudge. */
.ekit-template-content-footer .elementor-element-11a03f10 a{
  position:relative !important; display:inline-block !important; text-decoration:none !important; color:#3a3a3a !important;
  background-image:linear-gradient(var(--udz-gold), var(--udz-gold)) !important;
  background-repeat:no-repeat !important; background-position:0 100% !important; background-size:0% 2px !important;
  transition:background-size .3s ease, color .3s ease, transform .3s ease !important;
}
.ekit-template-content-footer .elementor-element-11a03f10 a:hover,
.ekit-template-content-footer .elementor-element-11a03f10 a:focus{
  color:var(--udz-gold) !important; background-size:100% 2px !important; transform:translateX(4px) !important;
}
.ekit-template-content-footer .elementor-element-4bda64ea{ padding-top:14px !important; padding-bottom:14px !important; margin-bottom:0 !important; }
.ekit-template-content-footer .ekit-heading,
.ekit-template-content-footer .ekit-heading--title{ text-align:center !important; margin:0 !important; }

/* "Our clients say." heading: force the site heading font (Questrial, same as
   the other homepage section titles) and add clear spacing below before the
   reviews widget. */
/* "Our clients say." is a native qodef-m-title; the promo heading was tagged with
   the same class. Drop the custom size/weight so both inherit the exact theme
   section-title style (Questrial 400, the native section-title size), matching
   "Follow our projects". Keep only the family (safety), centering and spacing. */
.elementor-element-657ebee .qodef-m-title,
.elementor-element-657ebee h2.qodef-m-title{
  font-family:Questrial, sans-serif !important;
  text-align:center !important;
  margin:0 0 30px !important;
}

/* Google reviews: hard-clamp the live Trustindex widget so it cannot push past
   the divider line. Constrain to the homepage content width, centre it, and clip
   any overflow so the slider and arrows stay inside the line on every screen. */
/* The outer container is the hard boundary: capped at the 1140 content width,
   centred, and overflow clipped. Anything the live slider draws past 1140 (track,
   extra cards, arrows) is clipped here, so it never crosses the divider or the
   social rail. The slider itself is left free to work inside that box. */
.elementor-element-f6dd0ad,
.elementor-element-f6dd0ad > .elementor-widget-container,
.elementor-element-f6dd0ad .elementor-shortcode,
.elementor-element-f6dd0ad .udz-ti-mount{
  max-width:1140px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.elementor-element-f6dd0ad .ti-widget{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Watch Our Promo. The heading and the video block are flex children of the
   Elementor column's widget-wrap, which defaults to a ROW flex layout that
   left-aligns them. Force the section container, the column, and the widget-wrap
   to a centered vertical flex column so the heading sits on top, the enlarged
   9:16 video centers directly below, and the link centers below that. Maximum
   force: every rule is scoped to this section and uses !important. */
.elementor-element-c0b524a{ padding-top:64px !important; padding-bottom:64px !important; }
.elementor-element-c0b524a > .elementor-container{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  text-align:center !important; max-width:1140px !important; margin-left:auto !important; margin-right:auto !important;
}
.elementor-element-c0b524a .elementor-column,
.elementor-element-c0b524a .elementor-top-column{ width:100% !important; max-width:100% !important; }
.elementor-element-c0b524a .elementor-widget-wrap,
.elementor-element-c0b524a .elementor-element-populated{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important; text-align:center !important;
}
.elementor-element-c0b524a .udz-promo-heading-wrap{ display:block !important; width:100% !important; text-align:center !important; margin:0 0 30px !important; }
.elementor-element-c0b524a .udz-promo-heading{
  display:block !important; width:100% !important; text-align:center !important;
  margin-left:auto !important; margin-right:auto !important; margin-top:0 !important; margin-bottom:0 !important;
  font-family:Questrial, sans-serif !important;
}
.elementor-element-c0b524a .udz-video-block{ display:block !important; width:360px !important; max-width:90vw !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; }
.elementor-element-c0b524a .udz-video-block .udz-yt-frame{
  position:relative !important; display:block !important;
  width:100% !important; max-width:360px !important; margin-left:auto !important; margin-right:auto !important;
  height:0 !important; padding:0 0 177.78% 0 !important;
  overflow:hidden !important; border-radius:18px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.22) !important;
  background:#f2f1ee !important; border:1px solid #e2ded7 !important;
}
.elementor-element-c0b524a .udz-video-block .udz-yt-frame iframe{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; border:0 !important;
  border-radius:18px !important; background:transparent !important; z-index:2 !important;
}
.elementor-element-c0b524a .udz-yt-link{ display:block !important; width:100% !important; text-align:center !important; margin:18px 0 0 !important; }
.udz-yt-link a{ font-family:Montserrat, sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--udz-accent) !important; text-decoration:none !important; border-bottom:1px solid var(--udz-gold) !important; padding-bottom:2px !important; transition:color .25s ease !important; }
.udz-yt-link a:hover{ color:var(--udz-gold) !important; }

/* Scroll to top: replica of the live site's qodef back-to-top control. An
   icon-only thin up-arrow (no background, no border, no circle), fixed at
   right:30px bottom:40px, revealed on scroll, with the arrowhead stroke-draw
   animation on hover. The small trailing chevron is the fixed light grey from
   the original SVG. */
.udz-totop{
  position:fixed !important; right:30px !important; bottom:40px !important;
  width:70px !important; height:70px !important; padding:0 !important; margin:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border:0 !important; background:transparent !important; color:#1a1a1a !important;
  cursor:pointer !important; z-index:10000 !important;
  opacity:0 !important; visibility:hidden !important;
  transition:opacity .3s ease, visibility 0s .3s !important;
}
.udz-totop.is-visible{ opacity:1 !important; visibility:visible !important; transition:opacity .3s ease !important; }
.udz-totop .udz-totop-icon{ display:flex !important; align-items:center !important; justify-content:center !important; height:100% !important; overflow:hidden !important; }
.udz-totop svg{ display:block !important; width:70px !important; height:35px !important; transform:rotate(-90deg) !important; fill:currentColor !important; overflow:visible !important; }
.udz-totop svg > g:last-child > g > line{ stroke-dashoffset:0 !important; stroke-dasharray:35 !important; transition:.6s ease !important; }
.udz-totop:hover svg > g:last-child > g > line{ stroke-dashoffset:70 !important; }
.udz-totop:hover svg > g:last-child > g > line:last-child{ transition-delay:.15s !important; }
@media (max-width:600px){
  .udz-totop{ right:16px !important; bottom:22px !important; }
}

/* Social rail on the right: brand-colored letters with a subtle interactive
   hover. It sits in the strip right of the divider line; hidden at 1024px down. */
.elementor-element-634e2fe a{ position:relative !important; display:inline-block !important; }
/* Each item shows its letter by default and fades to its brand icon on hover.
   The rail itself is rotated -90deg, so the icon is counter-rotated +90deg to sit
   upright. Each item swaps independently based on which is hovered. */
.elementor-element-634e2fe a .udz-soc-label{ display:inline-block !important; transition:opacity .25s ease, transform .25s ease !important; }
.elementor-element-634e2fe a .udz-soc-ic{
  position:absolute !important; top:50% !important; left:50% !important; line-height:0 !important;
  opacity:0 !important; pointer-events:none !important;
  transform:translate(-50%,-50%) rotate(90deg) scale(.6) !important;
  transition:opacity .25s ease, transform .25s ease !important;
}
.elementor-element-634e2fe a .udz-soc-ic svg{ width:19px !important; height:19px !important; display:block !important; }
.elementor-element-634e2fe a:hover .udz-soc-label{ opacity:0 !important; transform:scale(.55) !important; }
.elementor-element-634e2fe a:hover .udz-soc-ic{ opacity:1 !important; transform:translate(-50%,-50%) rotate(90deg) scale(1.18) !important; }
.elementor-element-634e2fe a[href*="instagram"]{ color:#E1306C !important; }
.elementor-element-634e2fe a[href*="facebook"]{ color:#1877F2 !important; }
.elementor-element-634e2fe a[href*="twitter"]{ color:#1DA1F2 !important; }
.elementor-element-634e2fe a[href*="linkedin"]{ color:#0A66C2 !important; }
.elementor-element-634e2fe a[href*="pin.it"],
.elementor-element-634e2fe a[href*="pinterest"]{ color:#E60023 !important; }
.elementor-element-634e2fe a[href*="wa.me"],
.elementor-element-634e2fe a[href*="whatsapp"]{ color:#25D366 !important; }
.elementor-element-634e2fe a[href*="youtube"]{ color:#FF0000 !important; }

/* Mobile responsiveness. */
@media (max-width:1024px){
  .elementor-element-4359220, .elementor-element-634e2fe{ display:none !important; }
  html,body{ overflow-x:hidden !important; }
  img,video{ max-width:100% !important; height:auto; }
}
@media (max-width:900px){
  .udz-project-grid{ flex-direction:column !important; gap:30px !important; }
  .udz-col{ flex:1 1 100% !important; width:100% !important; min-width:0 !important; }
}
@media (max-width:782px){
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container > .elementor-column{ width:100% !important; }
  .ekit-template-content-footer .elementor-element-253e1f19{ padding-top:34px !important; }
  .ekit-template-content-footer .elementor-widget-image{ text-align:center !important; }
  .ekit-template-content-footer .elementor-widget-image img{ margin:0 auto !important; }
  .ekit-template-content-footer .udz-foot-contact{ text-align:center !important; }
}
@media (max-width:600px){
  .udz-project,.udz-blog{ padding-left:18px !important; padding-right:18px !important; }
  .udz-project-title,.udz-post-title,.udz-blog-title{ font-size:24px !important; }
  #slider-4-slide-7-layer-1 .qodef-m-title{ font-size:26px !important; }
}

/* Reach Us page: keep the full-width content section (office photo + RING US /
   MAIL US + the form) inside the content boundary so nothing crosses the right
   divider line. */
.elementor-element-7b3e0a5 > .elementor-container{ max-width:1140px !important; margin-left:auto !important; margin-right:auto !important; }
.elementor-element-7b3e0a5{ overflow-x:clip !important; }
.elementor-element-7b3e0a5 img,
.elementor-element-27664ef img,
.elementor-element-60503d6 img{ max-width:100% !important; height:auto !important; }

/* Reach Us contact form (Web3Forms). A polished card with soft depth, Questrial
   title, Montserrat uppercase labels and button, gold accent, smooth focus lift
   and glow, button hover lift; stays inside the column and stacks on mobile. */
.udz-contact-widget{ max-width:640px !important; margin:34px 0 0 !important; padding:32px 32px 36px !important; background:#fff !important; border:1px solid #ededed !important; border-radius:16px !important; box-shadow:0 22px 50px rgba(0,0,0,.09), 0 6px 16px rgba(0,0,0,.05) !important; }
.udz-cf-title{ font-family:Questrial, sans-serif !important; font-weight:400 !important; color:#111 !important; font-size:28px !important; letter-spacing:.035em !important; margin:0 0 18px !important; }
.udz-contact-form .udz-cf-row{ display:flex !important; gap:18px !important; }
.udz-contact-form .udz-cf-field{ flex:1 1 0 !important; min-width:0 !important; margin-bottom:16px !important; }
.udz-contact-form label{ display:block !important; font-family:Montserrat, sans-serif !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:#2b2b2b !important; margin-bottom:7px !important; }
.udz-contact-form label span{ color:var(--udz-gold) !important; }
.udz-contact-form input, .udz-contact-form textarea{ width:100% !important; box-sizing:border-box !important; padding:12px 14px !important; border:1px solid #dcdcdc !important; border-radius:10px !important; background:#fcfbfa !important; font-family:Roboto, sans-serif !important; font-size:15px !important; color:#333 !important; transition:border-color .25s ease, box-shadow .25s ease, transform .2s ease, background .25s ease !important; }
.udz-contact-form input:focus, .udz-contact-form textarea:focus{ outline:none !important; border-color:var(--udz-gold) !important; background:#fff !important; box-shadow:0 0 0 3px rgba(184,148,106,.18), 0 6px 16px rgba(0,0,0,.06) !important; transform:translateY(-1px) !important; }
.udz-contact-form textarea{ resize:vertical !important; min-height:120px !important; }
.udz-contact-form .udz-cf-invalid{ border-color:#d9534f !important; box-shadow:0 0 0 3px rgba(217,83,79,.12) !important; }
.udz-cf-botcheck{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.udz-cf-submit{ display:inline-block !important; margin-top:6px !important; padding:14px 36px !important; border:0 !important; border-radius:10px !important; background:var(--udz-accent) !important; color:#fff !important; font-family:Montserrat, sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.18em !important; text-transform:uppercase !important; cursor:pointer !important; box-shadow:0 6px 16px rgba(0,0,0,.12) !important; transition:background .25s ease, transform .2s ease, box-shadow .25s ease !important; }
.udz-cf-submit:hover{ background:var(--udz-gold) !important; transform:translateY(-3px) !important; box-shadow:0 12px 26px rgba(184,148,106,.4) !important; }
.udz-cf-submit:active{ transform:translateY(-1px) !important; }
.udz-cf-submit:disabled{ opacity:.6 !important; cursor:default !important; transform:none !important; box-shadow:none !important; }
#udz-cf-file{ display:block !important; width:100% !important; padding:10px !important; margin-top:6px !important; border:1px solid #ccc !important; border-radius:6px !important; font-family:Roboto, sans-serif !important; font-size:14px !important; background:#fafafa !important; cursor:pointer !important; }
.udz-cf-file-hint{ font-size:12px !important; color:#888 !important; font-weight:400 !important; }
.udz-cf-status{ margin:4px 0 12px !important; font-family:Roboto, sans-serif !important; font-size:14px !important; line-height:1.5 !important; }
.udz-cf-status.is-error{ color:#c0392b !important; }
.udz-cf-success{ padding:30px 26px !important; border:1px solid #ededed !important; border-radius:16px !important; background:#fff !important; text-align:center !important; max-width:640px !important; margin:34px 0 0 !important; box-shadow:0 22px 50px rgba(0,0,0,.09), 0 6px 16px rgba(0,0,0,.05) !important; }
.udz-cf-success-ic{ color:var(--udz-gold) !important; line-height:0 !important; }
.udz-cf-success p{ font-family:Roboto, sans-serif !important; font-size:16px !important; color:#2b2b2b !important; margin:12px 0 0 !important; line-height:1.6 !important; }
@media (max-width:600px){
  .udz-contact-widget, .udz-cf-success{ max-width:100% !important; width:100% !important; padding:24px 16px 28px !important; margin-left:0 !important; margin-right:0 !important; border-radius:12px !important; box-sizing:border-box !important; }
  .udz-contact-form .udz-cf-row{ flex-direction:column !important; gap:0 !important; }
  .udz-cf-submit{ width:100% !important; }
}

/* Portfolio listing tiles: premium 3D tilt-on-hover. JS sets the perspective
   rotate from the cursor position and toggles .udz-tilting; here we add the
   smooth return, the lift shadow, and a subtle contained image zoom. The tile
   clips the zoom (overflow:hidden) so nothing spills past the grid / divider. */
.udz-tile{ overflow:hidden !important; border-radius:0 !important; transition:transform .35s ease, box-shadow .35s ease; will-change:transform !important; transform-origin:center center !important; }
.udz-tile .udz-tile-img{ transition:transform .45s ease, opacity .3s ease !important; transform-origin:center center !important; }
.udz-tile.udz-tilting{ position:relative !important; z-index:3 !important; box-shadow:0 28px 55px rgba(0,0,0,.22) !important; }
.udz-tile.udz-tilting .udz-tile-img{ transform:scale(1.05) !important; opacity:1 !important; }
/* Keep the image bright on hover (override the theme dim) so the effect reads as
   a 3D tilt and lift, not a fade to white. */
.udz-tile:hover .udz-tile-img{ opacity:1 !important; }

/* Hero image slider: fills the RevSlider hero image layer exactly (same frame,
   size, position, responsive behavior as the original static image). Slides are
   stacked and pushed across horizontally by the JS; images cover the frame. */
#slider-4-slide-7-layer-0 .udz-hero-slider{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; overflow:hidden !important; z-index:5 !important; }
#slider-4-slide-7-layer-0 .udz-hero-slide{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; transform:translateX(100%); will-change:transform; }
#slider-4-slide-7-layer-0 .udz-hero-slide:first-child{ transform:translateX(0); }
#slider-4-slide-7-layer-0 .udz-hero-slide img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important; }

/* About Us (The Studio) page: the left text column was a tiny h6 heading + short
   text top-aligned against the tall image, leaving an awkward empty left area.
   Centre the text against the image, turn the heading into a proper title, set
   an elegant lead quote, and let the paragraphs fill the column. Scoped to the
   about section (2dc0982) so no other page is affected. */
.elementor-element-2dc0982 > .elementor-container{ align-items:center !important; }
.elementor-element-2dc0982 .elementor-element-7112927 > .elementor-element-populated{ padding-right:46px !important; padding-left:0 !important; }
.elementor-element-d467aa1 h6{
  font-family:Questrial, sans-serif !important;
  font-size:clamp(26px, 2.6vw, 34px) !important;
  font-weight:600 !important;
  line-height:1.22 !important;
  letter-spacing:.4px !important;
  color:#1a1a1a !important;
  text-transform:none !important;
  margin:0 0 22px !important;
}
.elementor-element-d467aa1 h6 b, .elementor-element-d467aa1 h6 strong{ font-weight:600 !important; }
.elementor-element-d467aa1 p{
  font-size:16px !important;
  line-height:1.85 !important;
  color:#4a4a4a !important;
  margin:0 0 17px !important;
  max-width:none !important;
}
.elementor-element-d467aa1 p:first-of-type{
  font-style:italic !important;
  font-size:18px !important;
  line-height:1.6 !important;
  color:#2b2b2b !important;
  border-left:3px solid var(--udz-gold) !important;
  padding-left:18px !important;
  margin:0 0 26px !important;
}
@media (max-width:900px){
  .elementor-element-2dc0982 .elementor-element-7112927 > .elementor-element-populated{ padding-right:0 !important; }
}

/* Awards page (doc 8493): match the heading to the site font, frame every award
   image as a matted card with a hover lift, tidy the grid gaps, centre the lone
   last image (the trailing cell was empty), and add a featured "most recent
   award" slot on top with a placeholder until the image is dropped in. All
   selectors are unique to the awards page, so nothing else is affected. */
/* trim the awards section's large 100px top padding (big white gap under the header) */
.elementor-element-228a8a2{ padding-top:40px !important; }
/* the GABA block is a separate award from the 2024 featured one above it: give the
   GABA heading clear top separation (a hairline divider) so it does not read as a
   caption of the 2024 image */
.elementor-element-20313ad6{ text-align:center !important; margin:56px 0 34px !important; padding-top:46px !important; border-top:1px solid #eceae6 !important; }
.elementor-element-20313ad6 .elementor-heading-title{
  font-family:Questrial, sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(28px, 3.6vw, 46px) !important;
  line-height:1.3 !important;
  letter-spacing:.6px !important;
  color:#1a1a1a !important;
}
/* matted frame for each award image */
.elementor-element-228a8a2 .elementor-widget-image-box .elementor-image-box-img{
  background:#fff !important;
  padding:12px !important;
  border:1px solid #e7e1d9 !important;
  box-shadow:0 10px 28px rgba(0,0,0,.09) !important;
  margin:0 !important;
  transition:transform .35s ease, box-shadow .35s ease !important;
}
.elementor-element-228a8a2 .elementor-widget-image-box:hover .elementor-image-box-img{
  transform:translateY(-5px) !important;
  box-shadow:0 20px 44px rgba(0,0,0,.14) !important;
}
.elementor-element-228a8a2 .elementor-widget-image-box .elementor-image-box-img img{
  display:block !important; width:100% !important; height:auto !important;
}
/* grid rhythm */
.elementor-element-228a8a2 .elementor-inner-section{ margin-bottom:34px !important; }
.elementor-element-228a8a2 .elementor-inner-section:last-of-type{ margin-bottom:0 !important; }
.elementor-element-228a8a2 .elementor-inner-section .elementor-column{ padding:0 17px !important; }
/* the trailing cell was empty: hide it and centre the lone last image */
.elementor-element-ed90661{ display:none !important; }
.elementor-element-7cc5d55 > .elementor-container{ justify-content:center !important; }
/* heading for the featured "most recent award" image, matched to the site font */
.udz-award-featured-title{
  font-family:Questrial, sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(24px, 3vw, 40px) !important;
  line-height:1.3 !important;
  letter-spacing:.5px !important;
  color:#1a1a1a !important;
  text-align:center !important;
  margin:14px 0 22px !important;
}
/* featured "most recent award" card on top */
.udz-award-featured{
  width:100%; max-width:720px; margin:8px auto 6px; align-self:center;
  background:#fff; padding:12px; border:1px solid #e7e1d9;
  box-shadow:0 12px 32px rgba(0,0,0,.10); box-sizing:border-box;
  transition:transform .35s ease, box-shadow .35s ease;
}
.udz-award-featured:hover{ transform:translateY(-5px); box-shadow:0 22px 48px rgba(0,0,0,.15); }
.udz-award-featured img{ display:block; width:100%; height:auto; }
.udz-award-featured.udz-needs-image{
  min-height:300px; border:2px dashed #d8cdbd; box-shadow:none;
  background:#faf8f6; display:flex; align-items:center; justify-content:center; padding:28px;
}
.udz-award-featured.udz-needs-image::after{
  content:"Add the most recent award image here  (site/awards-assets/recent-award.jpg)";
  color:#b8946a; font-family:Questrial, sans-serif; font-size:15px;
  letter-spacing:.4px; line-height:1.6; text-align:center;
}
@media (max-width:780px){
  .elementor-element-228a8a2 .elementor-inner-section .elementor-column{ padding:0 8px !important; }
}

/* ===== Image-beside-text template: shared by Reach Us (doc 2630) and About Me
   (doc 2245). Both pages reuse the SAME Elementor IDs (7b3e0a5 / 4563847 /
   9c83512 / 60503d6), present on no other page. The left image fills its half
   via ABSOLUTE positioning so it never drives page height: this both removes the
   white gap beside the taller text column AND fixes the zoom/reflow flash on
   refresh (an in-flow image briefly rendered at its natural 2500px height before
   the flex layout settled). Sharp square edges. The content grid is widened from
   the theme default (1100px) to 1300px so the image sits closer to the left. */
.elementor-element-7b3e0a5 > .elementor-container{ width:1300px !important; max-width:1300px !important; align-items:stretch !important; }
.elementor-element-4563847{ display:flex !important; }
.elementor-element-4563847 > .elementor-element-populated{ position:relative !important; width:100% !important; min-height:100% !important; padding:0 !important; }
.elementor-element-27664ef{ display:none !important; } /* redundant square overlay (Reach Us only) */
.elementor-element-60503d6{ position:absolute !important; inset:0 !important; margin:0 !important; width:100% !important; height:100% !important; max-width:none !important; }
.elementor-element-60503d6 > .elementor-widget-container,
.elementor-element-60503d6 .qodef-single-image,
.elementor-element-60503d6 .qodef-m-image{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; transform:none !important; --e-transform-translateX:0 !important; border-radius:0 !important; overflow:hidden !important; }
.elementor-element-60503d6 img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important; border-radius:0 !important; }
/* gutter so the text column does not butt against the full-bleed image */
.elementor-element-9c83512 > .elementor-element-populated{ padding:40px 0 40px 7% !important; margin:0 !important; }
.elementor-element-9c83512 .elementor-widget-text-editor{ margin-bottom:14px !important; }

/* Reach Us only (doc 2630): organize the RING US / MAIL US blocks (label above
   value, gold links, tight), plus CTA + map side by side and the button hover.
   Scoped by page doc id so the About Me bio paragraphs keep their own spacing. */
[data-elementor-id="2630"] .elementor-element-9c83512 h6{ font-family:Questrial, sans-serif !important; font-size:20px !important; font-weight:600 !important; letter-spacing:.4px !important; color:#1a1a1a !important; margin:0 0 8px !important; }
[data-elementor-id="2630"] .elementor-element-9c83512 .elementor-widget-text-editor p{ margin:0 0 2px !important; line-height:1.5 !important; }
[data-elementor-id="2630"] .elementor-element-9c83512 .elementor-widget-text-editor p strong{ display:block !important; font-size:11px !important; letter-spacing:1.2px !important; text-transform:uppercase !important; color:#9a8e80 !important; font-weight:700 !important; margin-top:12px !important; }
[data-elementor-id="2630"] .elementor-element-9c83512 .elementor-widget-text-editor p a{ color:var(--udz-gold) !important; font-weight:600 !important; text-decoration:none !important; }
[data-elementor-id="2630"] .elementor-element-9c83512 .elementor-widget-text-editor p a:hover{ text-decoration:underline !important; }

/* CTA + map placed side by side (wrapped in .udz-cta-map-row): two panels of the
   SAME width and the SAME height (a fixed 480px, so they match exactly), top
   aligned. The grey card fills its panel as a flex column: heading and text at
   the top, "Book an Appointment" pinned to the bottom. */
.udz-cta-map-row{ display:flex !important; gap:26px !important; align-items:stretch !important; max-width:1300px !important; margin:0 auto !important; padding:0 20px !important; box-sizing:border-box !important; }
.udz-cta-map-row > .elementor-element{ flex:1 1 50% !important; width:50% !important; max-width:50% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:flex !important; }
.udz-cta-map-row .elementor-container, .udz-cta-map-row .elementor-column, .udz-cta-map-row .elementor-element-populated, .udz-cta-map-row .elementor-widget-wrap, .udz-cta-map-row .elementor-widget, .udz-cta-map-row .elementor-widget-container{ width:100% !important; height:100% !important; margin:0 !important; }
.udz-cta-map-row .elementor-container{ max-width:100% !important; }
/* CTA grey card: fill the panel, lay out as a column, beautified */
.udz-cta-map-row .elementor-element-d3591c9, .udz-cta-map-row .elementor-element-d3591c9 .elementor-widget-container{ display:flex !important; padding:0 !important; }
.udz-cta-map-row .qodef-qi-call-to-action{ height:480px !important; min-height:480px !important; width:100% !important; display:flex !important; padding:0 !important; box-sizing:border-box !important; box-shadow:0 18px 44px rgba(0,0,0,.12) !important; }
.udz-cta-map-row .qodef-qi-call-to-action > .qodef-m-inner{ display:flex !important; flex-direction:column !important; width:100% !important; height:100% !important; padding:48px !important; box-sizing:border-box !important; }
.udz-cta-map-row .qodef-m-content{ margin:0 !important; }
.udz-cta-map-row .qodef-m-title{ font-family:Questrial, sans-serif !important; font-size:34px !important; font-weight:400 !important; letter-spacing:.5px !important; color:#fff !important; margin:0 0 18px !important; }
.udz-cta-map-row .qodef-m-text{ font-size:15.5px !important; line-height:1.85 !important; color:rgba(255,255,255,.9) !important; }
.udz-cta-map-row .qodef-m-text br{ display:none !important; } /* drop the trailing manual breaks */
.udz-cta-map-row .qodef-m-button{ margin-top:auto !important; padding-top:30px !important; } /* pin button to the bottom */
/* beautified button */
.udz-cta-map-row .elementor-element-d3591c9 a.qodef-qi-button{ display:inline-flex !important; align-items:center !important; padding:15px 40px !important; border:2px solid #fff !important; border-radius:2px !important; background:transparent !important; letter-spacing:.12em !important; text-transform:uppercase !important; font-size:13px !important; transition:background-color .3s ease, color .3s ease, border-color .3s ease !important; }
.udz-cta-map-row .elementor-element-d3591c9 a.qodef-qi-button .qodef-m-text{ color:#fff !important; }
.udz-cta-map-row .elementor-element-d3591c9 a.qodef-qi-button:hover{ background:#fff !important; border-color:#fff !important; }
.udz-cta-map-row .elementor-element-d3591c9 a.qodef-qi-button:hover .qodef-m-text{ color:#2b2b2b !important; }
/* map: exactly the same height as the card */
[data-elementor-id="2630"] .elementor-element-1406be3 iframe{ width:100% !important; height:480px !important; min-height:480px !important; display:block !important; border:0 !important; }

@media (max-width:1024px){
  /* stacked layout: image returns to normal flow as a banner (absolute fill needs
     a sibling to set the height, which is gone once columns stack) */
  .elementor-element-7b3e0a5 > .elementor-container{ width:auto !important; max-width:100% !important; }
  .elementor-element-4563847 > .elementor-element-populated{ position:static !important; min-height:0 !important; }
  .elementor-element-60503d6, .elementor-element-60503d6 > .elementor-widget-container, .elementor-element-60503d6 .qodef-single-image, .elementor-element-60503d6 .qodef-m-image{ position:static !important; height:auto !important; }
  .elementor-element-60503d6 img{ position:static !important; height:360px !important; }
  .elementor-element-9c83512 > .elementor-element-populated{ padding:30px 20px !important; }
  .udz-cta-map-row{ flex-direction:column !important; }
  .udz-cta-map-row > .elementor-element{ width:100% !important; max-width:100% !important; flex-basis:auto !important; }
  .udz-cta-map-row .qodef-qi-call-to-action{ height:auto !important; min-height:0 !important; }
  [data-elementor-id="2630"] .elementor-element-1406be3 iframe{ height:340px !important; min-height:340px !important; }
}

/* SEO: the single per-page <h1> injected on pages whose visible main heading is
   not an h1 (home, studio, architect, awards, services, reach us). Visually
   hidden but present for search engines and assistive tech. No design change. */
.udz-seo-h1{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

/* Instant promo video: a lightweight thumbnail + play-button facade fills the
   video frame; the heavy YouTube player iframe is loaded only when clicked
   (udz-polish.js Feature 7). Big initial-load saving, especially on mobile. */
.elementor-element-c0b524a .udz-yt-frame .udz-yt-facade{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; cursor:pointer !important; display:block !important; background:#000 !important; }
.elementor-element-c0b524a .udz-yt-frame .udz-yt-thumb{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.elementor-element-c0b524a .udz-yt-frame .udz-yt-playbtn{ position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; width:72px !important; height:50px !important; background:rgba(20,20,20,.72) !important; border-radius:14px !important; transition:background .25s ease, transform .25s ease !important; }
.elementor-element-c0b524a .udz-yt-frame .udz-yt-playbtn::before{ content:"" !important; position:absolute !important; top:50% !important; left:50% !important; transform:translate(-35%,-50%) !important; border-style:solid !important; border-width:11px 0 11px 19px !important; border-color:transparent transparent transparent #fff !important; }
.elementor-element-c0b524a .udz-yt-frame .udz-yt-facade:hover .udz-yt-playbtn{ background:#cc0000 !important; transform:translate(-50%,-50%) scale(1.06) !important; }
.elementor-element-c0b524a .udz-yt-frame iframe.udz-yt-iframe{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; border:0 !important; }

/* ===== Mobile fixes ===== */
/* Social links live only in the fixed right rail (hidden on phones) and not in
   the footer, so mobile had no social links. udz-polish.js Feature 8 clones them
   into this bar appended to the footer; it shows only on mobile. */
.udz-mobile-social{ display:none; }
@media (max-width:1024px){
  .udz-mobile-social{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; gap:10px 20px !important; padding:24px 16px !important; background:#faf8f6 !important; border-top:1px solid #e7e1d9 !important; }
  .udz-mobile-social a{ color:var(--udz-gold) !important; font-family:Montserrat, "Lato", sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; text-decoration:none !important; }
  .udz-mobile-social a:hover{ color:#1a1a1a !important; }
}
/* ===== Global mobile overflow fix (the main cause of pages looking broken) =====
   The theme hard-codes content-grid containers to a fixed 1100-1400px width with
   NO mobile override, so on a phone almost every section was wider than the screen
   and clipped on the right (stats numbers, intro, etc.). Make those containers
   full-width and clamp everything to the viewport. */
@media (max-width:1024px){
  html, body{ overflow-x:hidden !important; max-width:100vw !important; }
  .qodef-elementor-content-grid > .elementor-container{ width:auto !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; }
  .elementor-section > .elementor-container{ max-width:100% !important; }
  .elementor-widget img, .elementor-widget iframe{ max-width:100% !important; }
}

/* Footer on mobile: stack to one column, centre, wrap long text, fit the screen. */
@media (max-width:1024px){
  .ekit-template-content-footer{ overflow-x:hidden !important; }
  .ekit-template-content-footer .elementor-section,
  .ekit-template-content-footer .elementor-container,
  .ekit-template-content-footer .elementor-column,
  .ekit-template-content-footer .elementor-widget-wrap,
  .ekit-template-content-footer .elementor-widget{ max-width:100% !important; box-sizing:border-box !important; }
  .ekit-template-content-footer .elementor-container{ width:auto !important; flex-wrap:wrap !important; }
  .ekit-template-content-footer .elementor-column{ width:100% !important; flex:0 0 100% !important; }
  .ekit-template-content-footer .elementor-widget-text-editor,
  .ekit-template-content-footer .elementor-widget-text-editor *,
  .ekit-template-content-footer .elementskit-section-title-wraper,
  .ekit-template-content-footer .udz-foot-contact,
  .ekit-template-content-footer .udz-foot-logo{ text-align:center !important; }
  .ekit-template-content-footer .udz-foot-logo{ align-items:center !important; }
  .ekit-template-content-footer p,
  .ekit-template-content-footer a,
  .ekit-template-content-footer span,
  .ekit-template-content-footer li{ overflow-wrap:break-word !important; word-break:break-word !important; }
}

/* Header on mobile: keep ONE logo (the wordmark) on the left and the hamburger on
   the right; hide the duplicate ekit offcanvas logo; and draw the hamburger as 3
   bars because its icon-font glyph (icon-options) does not load (it was an empty
   square). The standalone logo was previously hidden, which removed the only logo;
   it is restored here. */
@media (max-width:1024px){
  .ekit-template-content-header .elementor-element-1d3dc175 > .elementor-container{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; }
  .ekit-template-content-header .elementor-element-7b927424{ display:block !important; width:auto !important; max-width:62% !important; flex:0 1 auto !important; }
  .ekit-template-content-header .elementor-element-7b927424 img{ max-width:160px !important; width:auto !important; height:auto !important; }
  .ekit-template-content-header .elementor-element-112db804{ flex:0 0 auto !important; width:auto !important; }
  .elementskit-nav-logo{ display:none !important; }
  .elementskit-menu-hamburger{ border:0 !important; background:transparent !important; padding:8px 4px !important; }
  .elementskit-menu-hamburger .ekit-menu-icon{ font-size:0 !important; display:inline-block !important; width:26px !important; height:2px !important; background:#1a1a1a !important; position:relative !important; margin:9px 0 !important; box-shadow:0 -8px 0 #1a1a1a, 0 8px 0 #1a1a1a !important; vertical-align:middle !important; }
}

/* Scroll-to-top: the theme ships its own qodef back-to-top button on top of the
   custom replica (.udz-totop), which showed two arrows. Hide the theme one. */
#qodef-back-to-top, .qodef-back-to-top, a.qodef-back-to-top, .qodef-m-back-to-top, .qodef-back-to-top-holder{ display:none !important; }

/* ========================================================================
   MOBILE MASTER OVERRIDE  (defined LAST in the file so it wins every tie).
   Diagnosed root cause: the divider and social rail are position:fixed at
   left:625px / left:700px, which forces the page wider than the phone; and
   body{overflow-x:hidden} cannot clip a fixed element. So the whole page had
   horizontal overflow, which made the footer (and other centred content) look
   shifted-right and clipped. This block kills the overflow at the source and
   hard-stacks the footer. Tested selectors at 375px and 414px.
   ======================================================================== */
@media (max-width:1024px){
  html{ overflow-x:hidden !important; }
  body{ overflow-x:hidden !important; width:100% !important; max-width:100% !important; position:relative !important; }

  /* the fixed divider + social rail: remove AND neutralise their fixed position
     so they can never widen the page (belt and suspenders) */
  .elementor-element-4359220, .elementor-element-634e2fe,
  .ekit-template-content-header .elementor-element-4359220,
  .ekit-template-content-header .elementor-element-634e2fe{
    display:none !important; position:static !important; left:auto !important; right:auto !important; width:0 !important; height:0 !important; overflow:hidden !important;
  }

  /* nothing may exceed the viewport width */
  .elementor, .elementor-section, .elementor-top-section, .elementor-inner-section,
  .elementor-container, .elementor-column, .elementor-widget, .elementor-widget-wrap,
  #rev_slider_4_1_wrapper, .rev_slider_wrapper, .rev_slider, .rs-module, .rs-module-wrap{ max-width:100% !important; }
  img, iframe, video, svg{ max-width:100% !important; }

  /* FOOTER: hard-stack to one column, centred, fit the screen, wrap long text.
     Scoped with the footer doc wrapper (.elementor-9506) AND the ekit footer for
     maximum specificity so it beats the theme/Elementor column widths. */
  .ekit-template-content-footer{ overflow-x:hidden !important; }
  .elementor-9506 > .elementor-section > .elementor-container,
  .elementor-9506 .elementor-container,
  .ekit-template-content-footer .elementor-container{ display:flex !important; flex-direction:column !important; align-items:center !important; width:100% !important; max-width:100% !important; }
  .elementor-9506 .elementor-column,
  .ekit-template-content-footer .elementor-column{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
  .elementor-9506 .elementor-widget-text-editor, .elementor-9506 .elementor-widget-text-editor *,
  .elementor-9506 .elementskit-heading, .elementor-9506 .elementskit-section-title-wraper,
  .ekit-template-content-footer .elementor-widget-text-editor, .ekit-template-content-footer .elementor-widget-text-editor *{ text-align:center !important; }
  .elementor-9506 p, .elementor-9506 a, .elementor-9506 span,
  .ekit-template-content-footer p, .ekit-template-content-footer a, .ekit-template-content-footer span{
    overflow-wrap:break-word !important; word-break:break-word !important; max-width:100% !important;
  }
  .elementor-9506 .elementor-column > .elementor-widget-wrap,
  .ekit-template-content-footer .elementor-column > .elementor-widget-wrap{ padding:8px 18px !important; }
}

/* ============================================
   MOBILE FIX v=mob6 - footer transforms + stats absolute
   Resets Elementor motion-effect translateX on footer contact/nav
   widgets and returns stats counters to normal flow.
   ============================================ */
@media (max-width: 767px) {

  /* FOOTER: kill the desktop translateX on ALL footer transform widgets.
     Previously only the logo (1c13e59) was reset. */
  .ekit-template-content-footer .elementor-element.e-transform,
  .ekit-template-content-footer .elementor-element-1c13e59,
  .ekit-template-content-footer .elementor-element-fc81713,
  .ekit-template-content-footer .elementor-element-66c16fe3 {
    transform: none !important;
    --e-transform-translateX: 0px !important;
    --e-transform-translateY: 0px !important;
  }
  .ekit-template-content-footer .elementor-element.e-transform > .elementor-widget-container {
    transform: none !important;
  }

  /* FOOTER: stack the three columns full width, centered. */
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-col-33 {
    width: 100% !important;
    text-align: center !important;
  }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-container {
    flex-direction: column !important;
  }

  /* STATS: return the 5 absolute counters to normal flow so they stop
     overlapping and drifting off the left edge. */
  .elementor-element-55dc7e8 .elementor-widget.elementor-absolute {
    position: static !important;
    transform: none !important;
    --e-transform-translateX: 0px !important;
    --e-transform-translateY: 0px !important;
  }

  /* STATS: stack the 5 columns full width. */
  .elementor-element-55dc7e8 .elementor-col-20 {
    width: 100% !important;
    text-align: center !important;
  }
  .elementor-element-55dc7e8 .elementor-container {
    flex-direction: column !important;
  }

  /* STATS: shrink the 100px inline digit so it fits the viewport. */
  .elementor-element-55dc7e8 .qodef-m-digit {
    font-size: 44px !important;
  }
}

/* ============================================
   MOBILE FIX v=mob7 - open menu panel + STUDIO submenu + hero button
   ============================================ */
@media (max-width: 1024px) {

  /* 1. MENU PANEL: solid white background so the hero no longer shows through */
  #ekit-megamenu-home-page-udz.elementskit-menu-offcanvas-elements {
    background: #ffffff !important;
  }

  /* 2. PANEL LOGO: restore the logo at the top of the open panel (was hard-hidden) */
  #ekit-megamenu-home-page-udz .elementskit-nav-identity-panel {
    display: block !important;
    padding: 20px 20px 10px !important;
  }
  #ekit-megamenu-home-page-udz .elementskit-nav-logo {
    display: inline-block !important;
  }
  #ekit-megamenu-home-page-udz .elementskit-nav-logo img {
    max-width: 170px !important;
    height: auto !important;
  }

  /* 3. STUDIO SUBMENU: force always-open so all 3 children are visible (no JS/icon needed) */
  #ekit-megamenu-home-page-udz .elementskit-submenu-panel {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding-left: 18px !important;
  }

  /* 4. HERO "About Us" button: match the gray Montserrat AWARDS button (override inline color/font) */
  rs-layer a.qodef-button.qodef-layout--outlined,
  rs-layer a.qodef-button.qodef-layout--outlined .qodef-m-text {
    color: #121212 !important;
    font-family: Montserrat, sans-serif !important;
  }
}

/* ============================================
   RESPONSIVE FIX v=mob8 - overflow, stats band, footer, hero button, panel logo
   Overflow culprit(s) found: the theme hard-codes the content-grid section
   container to a fixed pixel width with NO mobile media override, in
   emaurri-core.min.css / main.min.css:
     .qodef-content-grid-1400 .qodef-elementor-content-grid > .elementor-container{ width:1400px; max-width:1400px }
     (also 1100px / 1300px variants). Used by about-us section
     .elementor-element-7dc10ed, our-services (3 such sections) and about-me (1).
   Aggravator: the theme sets overflow-x:hidden on body only, not html, so a
   child wider than the viewport can still scroll the root element on mobile.
   Ruled out (checked in the 3 pages, not guessed): no elementor-section-stretched,
   no layout width:100vw + left:50% (the 100vw / 1448px hits are the logo srcset
   "sizes" attribute; margin:-1px is the clipped SEO h1), no inline px width over
   400 on content, no negative inline margins, no position:fixed bleed (the
   homepage rail/divider 634e2fe and 4359220 are present in the DOM but are
   display:none at <=1024 via udz-polish, and no fixed rule uses a large left).
   ============================================ */

/* A. GLOBAL OVERFLOW GUARD - stop sideways scroll on all pages/widths */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  .elementor-section, .elementor-container, .elementor-row, .elementor-widget-wrap {
    max-width: 100% !important;
  }
  /* neutralise full-bleed negative-margin rows that cause the bleed */
  .elementor-section.elementor-section-stretched,
  [style*="margin-left: -"], [style*="margin-right: -"] {
    margin-left: 0 !important; margin-right: 0 !important;
    width: 100% !important; left: auto !important;
  }
  /* content-grid section container: the fixed 1400px width offender found above */
  .qodef-content-grid-1400 .qodef-elementor-content-grid > .elementor-container,
  .qodef-elementor-content-grid > .elementor-container {
    width: 100% !important; position: static !important; left: auto !important; margin: 0 auto !important;
  }
}

/* B. STATS counters - also stack in the tablet/narrow band, not just <=767 */
@media (max-width: 1024px) {
  .elementor-element-55dc7e8 {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
    overflow: visible !important;
  }
  .elementor-element-55dc7e8 .elementor-widget.elementor-absolute {
    position: static !important; transform: none !important;
    --e-transform-translateX: 0px !important; --e-transform-translateY: 0px !important;
  }
  .elementor-element-55dc7e8 .elementor-col-20 {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  .elementor-element-55dc7e8 .elementor-container { flex-direction: column !important; }
  .elementor-element-55dc7e8 .qodef-m-digit { font-size: 44px !important; }
}

/* C. FOOTER - extend the transform reset up to 1024 so the tablet band stops shifting */
@media (max-width: 1024px) {
  .ekit-template-content-footer .elementor-element.e-transform,
  .ekit-template-content-footer .elementor-element-1c13e59,
  .ekit-template-content-footer .elementor-element-fc81713,
  .ekit-template-content-footer .elementor-element-66c16fe3 {
    transform: none !important; --e-transform-translateX: 0px !important; --e-transform-translateY: 0px !important;
  }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-col-33 { width: 100% !important; text-align: center !important; }
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-container { flex-direction: column !important; }
  /* tighten footer vertical rhythm so it reads cleaner */
  .ekit-template-content-footer .elementor-element-253e1f19 .elementor-col-33 { margin-bottom: 22px !important; }
}

/* D. PANEL LOGO - darken/enlarge the faint wordmark inside the open menu */
@media (max-width: 1024px) {
  #ekit-megamenu-home-page-udz .elementskit-nav-logo img {
    max-width: 190px !important; height: auto !important; filter: none !important; opacity: 1 !important;
  }
}

/* ---- HERO BUTTON DIAGNOSIS (not styled this round; confirm the id first) ----
   The layer I previously targeted, slider-4-slide-7-layer-2, is data-vbility="t,t,f,f"
   = visible on desktop and notebook only, HIDDEN on the two small breakpoints.
   The About Us button that IS visible on tablet and mobile is:
     rs-layer id="slider-4-slide-7-layer-6"
     data-vbility="f,f,t,t"    (hidden desktop/notebook, visible tablet + mobile)
     data-color="#000000"      (RevSlider JS writes inline color:#000000 = black)
     inline style="z-index:12;font-family:'Roboto';"
     anchor: a.qodef-shortcode.qodef-m.qodef-button.qodef-layout--outlined.qodef-underline--default.qodef-html--link
             href="/about-us/index.html", text "About Us"
   Its desktop/notebook twin is layer-2 (identical classes/color/font, vbility t,t,f,f).
   Note: the existing mob7 rule uses a bare "rs-layer a.qodef-button.qodef-layout--outlined"
   selector, so it ALREADY applies to layer-6 on mobile (color:#121212; font-family:Montserrat).
*/

/* ============================================
   MOBILE FIX v=mob9 - hero height fallback
   Root cause (diagnosed): on mobile the RevSlider hero height is set only by
   rs6.min.js at runtime (layout:fullscreen). When that JS does not finish
   initializing, layer-0 gets no height, .udz-hero-slider is height:100% of 0,
   and the hero collapses to a blank band. This adds the missing CSS height
   fallback so the hero always has a height on mobile, independent of the JS.
   Desktop is untouched (this is inside a max-width media query).
   ============================================ */
@media (max-width: 1024px) {
  /* Force a real height on the hero chain so it never collapses to 0 */
  #rev_slider_4_1_wrapper,
  #rev_slider_4_1,
  #rev_slider_4_1 rs-slide,
  #slider-4-slide-7-layer-0 {
    height: 70vh !important;
    min-height: 420px !important;
    max-height: 640px !important;
    visibility: visible !important;
  }
  /* The custom image slider fills that guaranteed height */
  #slider-4-slide-7-layer-0 .udz-hero-slider,
  #slider-4-slide-7-layer-0 .udz-hero-slide,
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    height: 100% !important;
    width: 100% !important;
  }
  /* Correct the sideways offset/oversize: on mobile layer-0 was width 1018px
     pushed 249px left. Pin it to the viewport so images are centered, not cropped off-screen. */
  #slider-4-slide-7-layer-0 {
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    --e-transform-translateX: 0px !important;
  }
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ============================================
   MOBILE FIX v=mob10 - hero WIDTH fix
   Diagnosed live: after mob9 the hero chain has height 420px (good) but the
   absolute-positioned .udz-hero-slide and its img compute to WIDTH 0, and the
   slides sit at left:372px (pushed off-screen). Height was fixed; width and
   horizontal offset were not. This forces full width and pins them to the left.
   ============================================ */
@media (max-width: 1024px) {
  #slider-4-slide-7-layer-0,
  #slider-4-slide-7-layer-0 .udz-hero-slider,
  #slider-4-slide-7-layer-0 .udz-hero-slide,
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    --e-transform-translateX: 0px !important;
  }
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

/* ============================================
   MOBILE FIX v=mob11 - hero z-index (final piece)
   Diagnosed live: mob9 fixed height, mob10 fixed width, but RevSlider's own
   empty <rs-slide> paints at z-index 20 ON TOP of .udz-hero-slider (z-index 5),
   covering the images with a transparent layer = blank. Raise the custom slider
   above RevSlider's empty layers so the images show.
   ============================================ */
@media (max-width: 1024px) {
  #slider-4-slide-7-layer-0 .udz-hero-slider {
    z-index: 30 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

/* ============================================
   HERO SLIDER FIX v=mob12 - opacity cross-fade
   Diagnosed live: the 9 RevSlider hero slides were all frozen at the same
   translateX(709px), so only one image showed and it never advanced. This
   stacks all 9 slides in the same spot and cross-fades them via opacity,
   which RevSlider's re-applied transform cannot clobber. Applies all widths.
   ============================================ */
#slider-4-slide-7-layer-0 .udz-hero-slider{ position:absolute !important; inset:0 !important; }
#slider-4-slide-7-layer-0 .udz-hero-slide{
  position:absolute !important; inset:0 !important;
  transform:none !important;
  opacity:0 !important;
  transition:opacity 1.2s ease !important;
  z-index:1 !important;
}
#slider-4-slide-7-layer-0 .udz-hero-slide.udz-hero-active{
  opacity:1 !important;
  z-index:2 !important;
}
#slider-4-slide-7-layer-0 .udz-hero-slide img{
  width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important;
}

/* ============================================
   MOBILE MASTER FIX v=mob13 - comprehensive mobile override
   Audited all pages at 375px. Root cause: Elementor's e-transform system
   applies translateX(Npx) on dozens of widgets via inline styles, pushing
   content hundreds of pixels off-screen on mobile. This single block fixes
   every mobile issue found across all pages. Desktop is completely untouched.
   ============================================ */
@media (max-width: 1024px) {

  /* 1. NUCLEAR TRANSFORM KILL - every widget with an Elementor motion-effect
     transform gets it stripped. This is the single fix for footer, contact
     form, and off-screen content on every page. */
  .elementor-element.e-transform,
  .elementor-element.e-transform > .elementor-widget-container,
  .elementor-element[style*="translateX"],
  .elementor-element[style*="translateY"] {
    transform: none !important;
    --e-transform-translateX: 0px !important;
    --e-transform-translateY: 0px !important;
    --e-transform-rotateZ: 0deg !important;
    --e-transform-scaleX: 1 !important;
    --e-transform-scaleY: 1 !important;
  }

  /* 2. GLOBAL WIDTH CLAMP - nothing exceeds viewport */
  *, *::before, *::after { box-sizing: border-box !important; }
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .elementor-section,
  .elementor-top-section,
  .elementor-inner-section,
  .elementor-container,
  .elementor-row,
  .elementor-column,
  .elementor-widget-wrap,
  .elementor-widget,
  .elementor-widget-container,
  .elementor-element-populated {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* 3. COLUMN STACKING - force single-column on mobile */
  .elementor-container {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* 4. ABSOLUTE-POSITIONED SPACERS - the blank gaps on our-services and awards
     are from widgets with position:absolute that have no visible content but
     reserve vertical space. Return them to normal flow. */
  .elementor-widget.elementor-absolute {
    position: static !important;
    transform: none !important;
    --e-transform-translateX: 0px !important;
    --e-transform-translateY: 0px !important;
    width: 100% !important;
  }

  /* 5. HEADER - hamburger within viewport */
  .ekit-template-content-header .elementor-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }
  .ekit-template-content-header .elementor-column {
    width: auto !important;
    flex: 0 1 auto !important;
    max-width: none !important;
  }
  /* Logo column sizing now handled in section 21 below */
  /* Hamburger column: shrink to content */
  .ekit-template-content-header .elementor-element-112db804 {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .elementskit-menu-hamburger {
    position: relative !important;
    right: auto !important;
  }

  /* 6. MENU PANEL - use ElementsKit's native left-slide mechanism.
     Default: left:-100vw (off-screen). Active: left:0 (visible).
     CRITICAL: do NOT set left:auto here, that breaks the hide mechanism. */
  .elementskit-menu-offcanvas-elements {
    max-width: 85vw !important;
    width: 85vw !important;
    background: #ffffff !important;
    z-index: 99999 !important;
  }
  .elementskit-menu-offcanvas-elements.active {
    left: 0 !important;
  }
  .elementskit-menu-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 100000 !important;
    cursor: pointer !important;
    font-size: 18px !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    color: #333 !important;
  }
  /* Overlay behind the menu panel */
  .elementskit-menu-overlay {
    display: none;
  }
  .elementskit-menu-overlay.active {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.4) !important;
    z-index: 99998 !important;
  }

  /* 7. SCROLL TO TOP - inside viewport */
  .udz-totop {
    right: 12px !important;
    bottom: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .udz-totop svg {
    width: 44px !important;
    height: 22px !important;
  }

  /* 8. PORTFOLIO / BLOG GRID - full width tiles */
  .udz-tile,
  .udz-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    transform: none !important;
  }
  /* Masonry/isotope grid - override absolute positioning */
  .qodef-grid.qodef-layout--masonry .qodef-grid-inner,
  .qodef-grid .qodef-grid-inner {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: auto !important;
  }
  .qodef-grid .qodef-grid-inner .qodef-e {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    margin-bottom: 20px !important;
  }

  /* 9. CONTACT FORM - full width centered */
  .udz-contact-widget {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 10. CTA + MAP - already handled by mob8, reinforce */
  .udz-cta-map-row {
    flex-direction: column !important;
    padding: 0 16px !important;
  }
  .udz-cta-map-row > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  /* 11. TEXT READABILITY - clamp font sizes and max-widths */
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .elementor-heading-title {
    max-width: 100% !important;
  }

  /* 12. IMAGES - never exceed container */
  img, video, iframe, svg, canvas {
    max-width: 100% !important;
    height: auto;
  }
  /* Hero images keep their fixed height */
  #slider-4-slide-7-layer-0 .udz-hero-slide img {
    height: 100% !important;
  }

  /* 13. SECTIONS WITH HARDCODED WIDTHS - override the theme 1100/1300/1400px */
  .qodef-content-grid-1400 .qodef-elementor-content-grid > .elementor-container,
  .qodef-content-grid-1300 .qodef-elementor-content-grid > .elementor-container,
  .qodef-content-grid-1100 .qodef-elementor-content-grid > .elementor-container,
  .qodef-elementor-content-grid > .elementor-container,
  [class*="qodef-content-grid"] .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 14. FOOTER MASTER - stack, center, fit, no transforms */
  .ekit-template-content-footer {
    overflow: hidden !important;
  }
  .ekit-template-content-footer .elementor-container {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  .ekit-template-content-footer .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
  }
  .ekit-template-content-footer .elementor-widget-wrap {
    padding: 8px 16px !important;
    justify-content: center !important;
  }
  .ekit-template-content-footer .elementor-element.e-transform {
    transform: none !important;
  }
  .ekit-template-content-footer p,
  .ekit-template-content-footer a,
  .ekit-template-content-footer span,
  .ekit-template-content-footer li {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  .ekit-template-content-footer .udz-foot-contact,
  .ekit-template-content-footer .udz-foot-logo,
  .ekit-template-content-footer .elementskit-section-title-wraper,
  .ekit-template-content-footer .elementor-widget-text-editor,
  .ekit-template-content-footer .elementor-widget-text-editor * {
    text-align: center !important;
  }

  /* 15. AWARDS - kill the blank gap from empty absolute spacers */
  .elementor-element-228a8a2 .elementor-widget.elementor-absolute,
  .elementor-element-228a8a2 .elementor-widget.e-transform {
    position: static !important;
    transform: none !important;
  }
  /* Award images full width */
  .elementor-element-228a8a2 .elementor-inner-section .elementor-column {
    width: 100% !important;
    padding: 0 8px !important;
    margin-bottom: 16px !important;
  }

  /* 16. OUR SERVICES - fix the top gap and mid-section gap */
  [data-elementor-id] .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget.elementor-absolute {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 17. ABOUT US / ABOUT ME - image-beside-text override for stacked layout */
  .elementor-element-7b3e0a5 > .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-element-60503d6 {
    position: static !important;
    height: auto !important;
  }
  .elementor-element-60503d6 img {
    position: static !important;
    height: 300px !important;
    width: 100% !important;
  }

  /* 18. REVSLIDER - keep contained */
  #rev_slider_4_1_wrapper,
  .rs-module-wrap,
  .rs-module,
  rs-slides,
  rs-slide {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  rs-layer {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* 19. BLOG CARDS - stack full width */
  .udz-blog-listing {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }
  .udz-card {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* 20. ELEMENTOR MOTION EFFECTS - disable the JS-driven motion on scroll */
  .elementor-motion-effects-element,
  .elementor-motion-effects-container,
  .elementor-motion-effects-layer {
    transform: none !important;
  }

  /* 21. HEADER LOGOS - show monogram + wordmark side by side on mobile.
     Monogram (column 33dfa08e) was hidden via elementor-hidden-tablet/phone.
     Wordmark (column 7b927424) stays visible. Both flex side by side,
     hamburger pushed to the right. */
  /* Monogram: square icon, fixed size */
  .ekit-template-content-header .elementor-element-33dfa08e {
    display: block !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    order: -1 !important;
    padding: 0 !important;
  }
  .ekit-template-content-header .elementor-element-33dfa08e img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
  }
  /* Wordmark: crop whitespace with scale+overflow so text fills the header.
     The original image (1448x184) has ~30% padding on each side. Scale up
     to eliminate that whitespace and make the text visually bigger. */
  .ekit-template-content-header .elementor-element-7b927424 {
    display: block !important;
    flex: 1 1 0% !important;
    margin-right: auto !important;
    padding: 0 !important;
    max-width: 90% !important;
    overflow: hidden !important;
  }
  .ekit-template-content-header .elementor-element-7b927424 .elementor-widget-container {
    overflow: hidden !important;
  }
  .ekit-template-content-header .elementor-element-7b927424 img {
    width: 170% !important;
    height: auto !important;
    max-width: none !important;
    margin-left: -35% !important;
    object-fit: contain !important;
  }

  /* 22. MOBILE HERO - hide RevSlider, collapse ALL parent containers,
     show clean HTML mobile hero instead */
  .wp-block-themepunch-revslider {
    display: none !important;
  }
  /* Collapse the Elementor section + every container down to the widget */
  .elementor-element-24c185d,
  .elementor-element-24c185d > .elementor-container,
  .elementor-element-24c185d .elementor-element-40ad124,
  .elementor-element-24c185d .elementor-widget-wrap,
  .elementor-element-24c185d .elementor-element-8dd7eef,
  .elementor-element-24c185d .elementor-widget-container {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .udz-mobile-hero {
    display: block !important;
  }
  .udz-mobile-hero__content {
    padding: 24px 20px 40px;
  }
  .udz-mobile-hero__image {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
  }
  .udz-mobile-hero__image .udz-hero-slider {
    position: relative;
    width: 100%;
    height: 260px;
  }
  .udz-mobile-hero__image .udz-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 260px;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
  }
  .udz-mobile-hero__image .udz-hero-slide.udz-hero-active {
    opacity: 1;
  }
  .udz-mobile-hero__image .udz-hero-slide img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
  }
  .udz-mobile-hero__subtitle {
    font-family: Montserrat, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #111;
    margin: 0 0 14px 0;
  }
  .udz-mobile-hero__heading {
    font-family: Montserrat, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.35;
    color: #111;
    margin: 0 0 18px 0;
  }
  .udz-mobile-hero__text {
    font-family: Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    margin: 0 0 60px 0 !important;
  }
  /* 23. ABOUT US button in mobile hero - match Awards button spacing */
  .udz-mobile-hero .qodef-button {
    margin-top: 10px !important;
  }

  /* 24. OUR SERVICES page - stack columns, full-width images, proper spacing */
  /* Hide fixed decorative divider and rotated social links on mobile */
  .elementor-3357 .elementor-fixed,
  .elementor-3357 .e-transform {
    display: none !important;
  }
  /* Stack the 50/50 columns vertically */
  .elementor-3357 .elementor-section > .elementor-container {
    flex-direction: column !important;
  }
  .elementor-3357 .elementor-col-50 {
    width: 100% !important;
  }
  /* Interior Design section: image column above text on mobile */
  .elementor-element-d2409d1 .elementor-element-8cef007 {
    order: -1 !important;
  }
  /* Full-width images */
  .elementor-3357 .qodef-single-image img {
    width: 100% !important;
    height: auto !important;
  }
  /* Fix text widgets that have constrained width */
  .elementor-3357 .elementor-widget__width-initial {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Spacing between service sections */
  .elementor-3357 .elementor-top-section {
    margin-bottom: 30px !important;
    padding: 0 15px !important;
  }
  /* Text size fix for mobile */
  .elementor-3357 .qodef-m-text {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .elementor-3357 .qodef-m-title {
    font-size: 26px !important;
    margin-bottom: 15px !important;
  }

  /* 25. REACH US (contact-us-2) page - stack columns, fix layout */
  /* Hide fixed decorative divider and social links on mobile (cause white space) */
  .elementor-8270 + .elementor-element-39df276,
  .elementor-element-39df276,
  .elementor-element-396360b {
    display: none !important;
  }
  /* Stack the 50/50 columns vertically */
  .elementor-2630 .elementor-section > .elementor-container {
    flex-direction: column !important;
  }
  .elementor-2630 .elementor-col-50,
  .elementor-2630 .elementor-col-100 {
    width: 100% !important;
  }
  /* Reset e-transform on image to prevent offset */
  .elementor-2630 .e-transform {
    transform: none !important;
  }
  /* Fix widget width constraints */
  .elementor-2630 .elementor-widget__width-initial {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Full-width images */
  .elementor-2630 .qodef-single-image img,
  .elementor-2630 .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
  }
  /* Remove excess top padding on main content (Elementor sets 90px on mobile) */
  .elementor-2630 .elementor-element-7b3e0a5 {
    padding-top: 15px !important;
    padding-bottom: 30px !important;
    margin-top: 0 !important;
  }
  /* Kill negative margin on RING US section that pulls it over the image */
  .elementor-2630 .elementor-element-0cf6ff3 {
    margin-top: 10px !important;
  }
  /* Kill negative margin on phone number widget container */
  .elementor-2630 .elementor-element-650a632 > .elementor-widget-container {
    margin-top: 0 !important;
  }
  /* Kill negative margin on mail section email widget */
  .elementor-2630 .elementor-element-c054690 > .elementor-widget-container {
    margin-top: 0 !important;
  }
  /* Remove 26% left padding from contact column on mobile */
  .elementor-2630 .elementor-element-9c83512 > .elementor-element-populated {
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
  }
  /* Remove right padding from inner column */
  .elementor-2630 .elementor-element-1f51092 > .elementor-element-populated,
  .elementor-2630 .elementor-element-85ee1df > .elementor-element-populated {
    padding: 0 !important;
  }
  /* Spacing for contact info sections */
  .elementor-2630 .elementor-inner-section {
    margin-bottom: 20px !important;
  }
  /* CTA + map row: stack properly, full width */
  .udz-cta-map-row {
    padding: 0 15px !important;
  }
  .udz-cta-map-row .elementor-col-100 {
    width: 100% !important;
  }
  .udz-cta-map-row .elementor-widget__width-auto {
    width: 100% !important;
  }
  /* Map iframe full width */
  .elementor-2630 .elementor-custom-embed iframe {
    width: 100% !important;
  }
  /* Contact form full width + prevent overlap */
  .udz-contact-widget {
    width: 100% !important;
    margin-top: 60px !important;
    clear: both !important;
  }
  /* Force mobile-only image to show */
  .elementor-2630 .elementor-element-27664ef {
    display: block !important;
  }
  .elementor-2630 .elementor-element-27664ef img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* ============================================
   FIX v=mob40 - portfolio video slide button placement
   The video element filled the whole slide box, so the picture letterboxed in
   the middle while the native play button and control bar attached to the box
   edges, floating over empty background (looked misplaced). Make the element
   hug the actual video picture in both orientations so the controls sit on the
   picture itself. Scoped ONLY to video slides; image slides are untouched.
   ============================================ */
.udz-swiper .swiper-slide.udz-slide--video{
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.udz-swiper .swiper-slide.udz-slide--video video{
  width:auto !important; height:auto !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; background:#000 !important;
}
/* keep the slider arrows above the video but never over its control bar */
.udz-swiper .swiper-button-next, .udz-swiper .swiper-button-prev{ z-index:11 !important; }

/* ============================================
   FIX v=mob41 - mobile footer social bar: desktop-style hover
   Same mechanic as the desktop rail (lines 231-249): on hover the text label
   fades and shrinks while the brand SVG logo scales in, centered on the link,
   in the network's brand color. No rotation here because this bar is
   horizontal (the desktop rail carries +90deg only to cancel its own -90deg).
   Resting look (gold uppercase labels) is unchanged.
   ============================================ */
@media (max-width:1024px){
  .udz-mobile-social a{ position:relative !important; display:inline-block !important; }
  .udz-mobile-social a .udz-soc-label{ display:inline-block !important; transition:opacity .25s ease, transform .25s ease !important; }
  .udz-mobile-social a .udz-soc-ic{
    position:absolute !important; top:50% !important; left:50% !important; line-height:0 !important;
    opacity:0 !important; pointer-events:none !important;
    transform:translate(-50%,-50%) scale(.6) !important;
    transition:opacity .25s ease, transform .25s ease !important;
  }
  .udz-mobile-social a .udz-soc-ic svg{ width:19px !important; height:19px !important; display:block !important; }
  .udz-mobile-social a:hover .udz-soc-label{ opacity:0 !important; transform:scale(.55) !important; }
  .udz-mobile-social a:hover .udz-soc-ic{ opacity:1 !important; transform:translate(-50%,-50%) scale(1.18) !important; }
  .udz-mobile-social a[href*="instagram"]:hover{ color:#E1306C !important; }
  .udz-mobile-social a[href*="facebook"]:hover{ color:#1877F2 !important; }
  .udz-mobile-social a[href*="twitter"]:hover{ color:#1DA1F2 !important; }
  .udz-mobile-social a[href*="linkedin"]:hover{ color:#0A66C2 !important; }
  .udz-mobile-social a[href*="pin.it"]:hover,
  .udz-mobile-social a[href*="pinterest"]:hover{ color:#E60023 !important; }
  .udz-mobile-social a[href*="wa.me"]:hover,
  .udz-mobile-social a[href*="whatsapp"]:hover{ color:#25D366 !important; }
  .udz-mobile-social a[href*="youtube"]:hover{ color:#FF0000 !important; }
}

/* ============================================
   FIX v=mob42 - desktop social rail: pitch black text labels
   The per-network rules (instagram/facebook/...) color the whole <a>, so the
   text labels inherited each brand color. Override ONLY the label text to black.
   The hover SVG logos use currentColor from the <a>, so they KEEP their brand
   colors (logos untouched, exactly as requested).
   ============================================ */
.elementor-element-634e2fe a .udz-soc-label{ color:#000000 !important; }

/* ============================================
   FIX v=mob45 - restore the Unitz Dezignz brand logo lockup in the hero band (hi-res, larger)
   The original site showed the logo-2a wordmark here (ARCHITECTURE.INTERIOR.
   LANDSCAPE tagline + gold "Unitz" / dark "Dezignz"); the mirror had replaced it
   with plain white UNITZ / DEZIGNZ text. Restore the original: lighten the house
   so the dark logo reads, hide the DEZIGNZ text widget, and render the logo image
   in place of the UNITZ text widget. Client wants exactly like the original.
   ============================================ */
/* light wash over the house so the dark logo is readable (band overlay was opacity:0) */
.elementor-element-dde9968 > .elementor-element-populated > .elementor-background-overlay{
  opacity:1 !important; background-color:rgba(255,255,255,0.5) !important;
}
/* hide the leftover DEZIGNZ text widget */
.elementor-element-e62a496{ display:none !important; }
/* centre the lockup */
.elementor-element-dde9968 > .elementor-widget-wrap{ text-align:center !important; }
/* render the brand logo in place of the UNITZ text widget */
.elementor-element-acb653c .qodef-custom-font-588{
  display:block !important; margin:0 auto !important;
  width:min(1050px, 80vw) !important; aspect-ratio:1448 / 184 !important;
  font-size:0 !important; line-height:0 !important; letter-spacing:0 !important; color:transparent !important;
  background:url("/wp-content/uploads/2021/11/logo-2a-hd.webp") center center / contain no-repeat !important;
}

/* ============================================
   FIX v=mob48 - footer: monogram stacked exactly above a bigger wordmark, at the
   extreme left with a gap; shorter footer. Uses trimmed (flush-left) logo images
   so the two align exactly, and runs the footer full width so the logo reaches
   the left with a small gap.
   ============================================ */
.ekit-template-content-footer .udz-foot-monogram{ width:70px !important; max-width:70px !important; }
.ekit-template-content-footer .udz-foot-wordmark{ width:260px !important; max-width:260px !important; }
/* shorter footer */
.ekit-template-content-footer .elementor-element-253e1f19{ padding-top:30px !important; padding-bottom:18px !important; }
.ekit-template-content-footer .elementor-element-4bda64ea{ margin-bottom:0 !important; padding:8px 0 12px 0 !important; }
.ekit-template-content-footer .udz-foot-contact p{ margin:0 0 8px !important; line-height:1.55 !important; }
@media (min-width:1025px){
  /* full width so the logo reaches the extreme left, with a small left gap */
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{ max-width:100% !important; width:100% !important; padding-left:clamp(34px,4.5vw,90px) !important; padding-right:clamp(24px,3vw,60px) !important; }
  /* logo: reset the entrance motion shift; monogram exactly above wordmark, hard-left */
  .ekit-template-content-footer .elementor-element-1c13e59{ transform:none !important; --e-transform-translateX:0px !important; --e-transform-translateY:0px !important; }
  .ekit-template-content-footer .elementor-element-5e0a8534 > .elementor-widget-wrap{ align-items:flex-start !important; }
  .ekit-template-content-footer .udz-foot-logo{ align-items:flex-start !important; text-align:left !important; gap:12px !important; margin:0 !important; }
  .ekit-template-content-footer .udz-foot-logo img{ margin:0 !important; }
  .ekit-template-content-footer .udz-foot-contact{ text-align:left !important; }
}

/* ============================================
   FIX v=mob49 - compact footer (desktop): emails beside phone/address, nav in
   horizontal rows instead of a tall vertical list, so the footer is shorter.
   ============================================ */
@media (min-width:1025px){
  /* contact: phone+address on the left, the two emails beside them (next to phone) */
  .ekit-template-content-footer .udz-foot-contact{
    display:grid !important; grid-template-columns:auto auto !important;
    column-gap:54px !important; row-gap:6px !important; align-items:start !important; justify-content:start !important;
  }
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(1){ grid-column:1 !important; grid-row:1 !important; }  /* Phone */
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(2){ grid-column:1 !important; grid-row:2 !important; max-width:280px !important; }  /* Address */
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(3){ grid-column:2 !important; grid-row:1 !important; }  /* Email 1 */
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(4){ grid-column:2 !important; grid-row:2 !important; }  /* Email 2 */
  /* nav: horizontal wrapping rows instead of 5 stacked links */
  .ekit-template-content-footer .elementor-element-66c16fe3 > .elementor-widget-container{
    display:flex !important; flex-wrap:wrap !important; gap:10px 28px !important; align-content:flex-start !important;
  }
  .ekit-template-content-footer .elementor-element-66c16fe3 > .elementor-widget-container > p{ margin:0 !important; }
}

/* ============================================
   FIX v=mob50 - footer: pull the contact + nav in close to the logo (cluster left)
   so the footer no longer spreads across the full width. Fixed-width logo column,
   controlled gaps, everything left-justified. Keep phone numbers on one line and
   give the address room so it stops wrapping into a thin strip.
   ============================================ */
@media (min-width:1025px){
  .ekit-template-content-footer .elementor-element-253e1f19 > .elementor-container{
    display:flex !important; flex-wrap:nowrap !important; justify-content:flex-start !important;
    align-items:flex-start !important; column-gap:clamp(34px,4vw,80px) !important;
  }
  .ekit-template-content-footer .elementor-element-5e0a8534{ width:auto !important; flex:0 0 300px !important; max-width:300px !important; }
  .ekit-template-content-footer .elementor-element-780c7774{ width:auto !important; flex:0 0 auto !important; }
  .ekit-template-content-footer .elementor-element-11a03f10{ width:auto !important; flex:0 1 auto !important; }
  /* phone stays on one line; address gets room */
  .ekit-template-content-footer .udz-foot-phones a{ white-space:nowrap !important; }
  .ekit-template-content-footer .udz-foot-contact > p:nth-child(2){ max-width:300px !important; }
  .ekit-template-content-footer .udz-foot-contact{ column-gap:46px !important; }
}

/* ============================================
   FIX v=mob51 - 4-column footer per client wireframe:
   [Logo] [Phone + Address] [Emails + About Us/The Architect] [Portfolio/Blog/Reach]
   Emails were moved out of the contact block into the links column, and the nav
   split into two stacks.
   ============================================ */
@media (min-width:1025px){
  /* contact is now just Phone over Address */
  .ekit-template-content-footer .udz-foot-contact{ display:block !important; }
  /* nav column = two stacks side by side (emails+about/architect | portfolio/blog/reach) */
  .ekit-template-content-footer .udz-foot-links{ display:flex !important; flex-wrap:nowrap !important; gap:clamp(36px,3.5vw,74px) !important; align-items:flex-start !important; }
  .ekit-template-content-footer .udz-foot-links-col{ display:flex !important; flex-direction:column !important; }
  .ekit-template-content-footer .udz-foot-links-col p{ margin:0 0 9px !important; line-height:1.55 !important; }
  .ekit-template-content-footer .udz-foot-links-col .udz-foot-eml{ white-space:nowrap !important; }
  /* gap between the emails and the nav links beneath them */
  .ekit-template-content-footer .udz-foot-links-col .udz-foot-eml + p:not(.udz-foot-eml){ margin-top:16px !important; }
}