/* 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; }

/* 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-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; padding:22px 18px 26px !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; }