/* =====================================================================
   Urban Elevator — site styles for Elementor builds
   Pairs with urban-elevator.js. Load site-wide (Elementor > Custom Code,
   or enqueue from the child theme).

   Everything is opt-in by CSS class (Advanced > CSS Classes).
   Hidden "before animation" states only apply when <html> has .ue-motion,
   which the head snippet adds. No JS / reduced motion / Elementor editor
   = everything simply shows, fully visible.
   Breakpoints match Elementor defaults: tablet <=1024px, mobile <=767px.
   ===================================================================== */

:root{
  --ue-blue:#0F52BA;
  --ue-blue-dk:#0B3F8F;
  --ue-ink:#111111;
  --ue-charcoal:#2a2a2a;
  --ue-body:#444444;
  --ue-muted:#6b6b6b;
  --ue-line:#d6d6d3;
  --ue-hair:#e3e3e0;
  --ue-tint:#fafafa;
  --ue-dark:#161616;
  --ue-grid-line:#e3e3de;
  --ue-header-h:100px;        /* expanded header */
  --ue-header-h-sm:80px;      /* compact header (after 40px scroll) */
  --ue-ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:1024px){ :root{ --ue-header-h:112px; --ue-header-h-sm:76px; } }
@media (max-width:767px){  :root{ --ue-header-h:84px;  --ue-header-h-sm:64px; } }

::selection{background:var(--ue-blue);color:#fff}
:focus-visible{outline:2px solid var(--ue-blue);outline-offset:3px}

/* ---------- HEADER (Theme Builder header template) ------------------- */
/* .ue-header  -> the header template's OUTER container
   .ue-logo    -> the logo Image widget                                  */
.ue-header{
  position:fixed !important; top:0; left:0; right:0; z-index:100;
  min-height:var(--ue-header-h) !important; --min-height:var(--ue-header-h);
  background:rgba(255,255,255,.97);
  transition:min-height .35s ease, box-shadow .35s ease;
}
.ue-header.is-compact{ min-height:var(--ue-header-h-sm) !important; --min-height:var(--ue-header-h-sm); box-shadow:0 1px 0 var(--ue-hair); }
body.admin-bar .ue-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .ue-header{ top:46px; } }
.elementor-editor-active .ue-header{ position:relative !important; }

.ue-logo img{ width:120px !important; height:auto !important; transition:width .35s ease; }
.ue-header.is-compact .ue-logo img{ width:56px !important; }
@media (max-width:1024px){ .ue-logo img{ width:88px !important; } .ue-header.is-compact .ue-logo img{ width:52px !important; } }
@media (max-width:767px){  .ue-logo img{ width:64px !important; } .ue-header.is-compact .ue-logo img{ width:46px !important; } }

/* First section on every page: clears the fixed header (matches mockup) */
.ue-below-header{ padding-top:208px !important; }
@media (max-width:1024px){ .ue-below-header{ padding-top:150px !important; } }
@media (max-width:767px){  .ue-below-header{ padding-top:108px !important; } }

/* ---------- SCROLL REVEAL  (.ue-reveal + optional .ue-delay-1..4) ---- */
.ue-motion .ue-reveal{ opacity:0; transform:translate3d(0,36px,0);
  transition:opacity 1s var(--ue-ease), transform 1.2s var(--ue-ease); }
.ue-motion .ue-reveal.is-in{ opacity:1; transform:none; }
.ue-delay-1{ transition-delay:120ms !important; }
.ue-delay-2{ transition-delay:240ms !important; }
.ue-delay-3{ transition-delay:360ms !important; }
.ue-delay-4{ transition-delay:480ms !important; }

/* ---------- WIPE REVEAL  (.ue-wipe) — image uncovers bottom-up ------- */
.ue-motion .ue-wipe{ clip-path:inset(100% 0 0 0); transition:clip-path 1.6s cubic-bezier(.7,0,.2,1); }
.ue-motion .ue-wipe.is-in{ clip-path:inset(0 0 0 0); }

/* ---------- GRAYSCALE -> COLOR  (.ue-color on an Image widget) ------- */
.ue-motion .ue-color img{ filter:grayscale(1); }

/* ---------- PHOTO FRAME + PARALLAX ----------------------------------
   .ue-frame    -> container that defines the photo's box (set its Min
                   Height in Elementor per breakpoint)
   .ue-parallax -> the Image widget inside it (+ -slow / -fast)          */
.ue-frame{ position:relative; overflow:hidden; background:#d9d9d6; }
.ue-frame > .elementor-widget-image,
.ue-frame > .e-con-inner > .elementor-widget-image,
.ue-frame .ue-fill{ position:absolute !important; inset:0; width:auto !important; max-width:none !important; margin:0 !important; }
.ue-frame .elementor-widget-image .elementor-widget-container,
.ue-frame .elementor-widget-image a{ display:block; height:100%; }
.ue-frame img{ display:block; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; }
.ue-parallax img{ position:absolute; left:0; top:-12%; height:124% !important; will-change:transform; }
.ue-parallax-fast img{ top:-16%; height:132% !important; }

/* ---------- BLUEPRINT GRID  (.ue-grid + ONE preset) -------------------
   Put on a full-width section container. The script injects the layer. */
.ue-grid{ position:relative; isolation:isolate; }
.ue-grid-layer{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(to right,var(--ue-grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--ue-grid-line) 1px,transparent 1px);
  background-size:72px 72px; background-position:-1px -1px; }
.ue-grid--hero .ue-grid-layer{ bottom:22%; --ue-grid-line:#ecece8;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 8%,#000 34%,rgba(0,0,0,.7) 60%,transparent 92%),linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.6) 55%,#000 80%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 8%,#000 34%,rgba(0,0,0,.7) 60%,transparent 92%),linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.6) 55%,#000 80%);
  mask-composite:intersect; }
.ue-grid--page-header .ue-grid-layer{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 6%,#000 22%,rgba(0,0,0,.5) 45%,transparent 70%),linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 25%,rgba(0,0,0,.7) 55%,#000 85%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 6%,#000 22%,rgba(0,0,0,.5) 45%,transparent 70%),linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 25%,rgba(0,0,0,.7) 55%,#000 85%);
  mask-composite:intersect; }
.ue-grid--form .ue-grid-layer{ -webkit-mask-image:radial-gradient(ellipse 44% 28% at 34% 72%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%); mask-image:radial-gradient(ellipse 44% 28% at 34% 72%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%); }
.ue-grid--top-right .ue-grid-layer{ -webkit-mask-image:radial-gradient(ellipse 54% 41% at 100% 0%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%); mask-image:radial-gradient(ellipse 54% 41% at 100% 0%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%); }
.ue-grid--top-right-sm .ue-grid-layer{ -webkit-mask-image:radial-gradient(ellipse 45% 22% at 100% 0%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%); mask-image:radial-gradient(ellipse 45% 22% at 100% 0%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%); }
.ue-grid--bottom-left .ue-grid-layer{ -webkit-mask-image:radial-gradient(ellipse 40% 40% at 0% 100%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%); mask-image:radial-gradient(ellipse 40% 40% at 0% 100%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%); }
.ue-grid--chicago .ue-grid-layer{
  -webkit-mask-image:radial-gradient(ellipse 38% 22% at 88% 6%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%),radial-gradient(ellipse 26% 24% at 6% 44%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%);
  mask-image:radial-gradient(ellipse 38% 22% at 88% 6%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%),radial-gradient(ellipse 26% 24% at 6% 44%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.12) 70%,transparent 100%); }

/* ---------- HERO (homepage) -------------------------------------------
   .ue-hero          outer hero section container
   .ue-hero-title    Heading widget "Such great<br>heights."
   .ue-hero-tagline  Text widget "Over 40 years / of building cities."
   .ue-hero-stage    full-width container that holds media + copy
   .ue-hero-media    container holding the skyline Image widget
   .ue-hero-copy     container holding H1 eyebrow, paragraph, buttons
   .ue-hero-fade     add to title row + copy: fades out as photo opens  */
.ue-hero-title .ue-line{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.ue-hero-title .ue-line > span{ display:block; }
.ue-hero-title .ue-dot{ display:inline-block; color:var(--ue-blue); }
.ue-hero-stage{ position:relative; height:80vh; min-height:620px; }
.ue-hero-media{ position:absolute !important; inset:0; overflow:hidden; background:#dcdcd8; clip-path:inset(0 0 0 38%); }
.ue-hero-media .elementor-widget-image{ position:absolute !important; inset:0; width:auto !important; margin:0 !important; }
.ue-hero-media .elementor-widget-image .elementor-widget-container{ height:100%; }
.ue-hero-media img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; object-position:center 42%; transform-origin:60% 40%; }
.ue-motion .ue-hero-media img{ filter:grayscale(1); }
.ue-hero-copy{ position:absolute !important; top:0; left:max(56px, calc((100% - 1440px) / 2 + 56px));
  width:calc(38% - max(56px, calc((100% - 1440px) / 2 + 56px)) - 72px); padding-top:8px; }
.ue-door{ position:absolute; top:0; bottom:0; background:#e9e9e6; z-index:2; }
.ue-door--seam{ width:2px; margin-left:-1px; background:var(--ue-blue); z-index:3; }
@media (max-width:1024px){
  .ue-hero-stage{ height:auto; min-height:0; display:flex; flex-direction:column-reverse; gap:40px; }
  .ue-hero-media{ position:relative !important; inset:auto; height:60vh; min-height:420px; clip-path:none; }
  .ue-hero-copy{ position:relative !important; left:auto; width:auto; max-width:680px; padding:0 32px; }
}
@media (max-width:767px){
  .ue-hero-media{ height:52vh; min-height:320px; }
  .ue-hero-copy{ padding:0 20px; }
}

/* ---------- SERVICES (sticky photo + hover swap) ----------------------
   .ue-services   section container
   .ue-svc-media  container with the 6 Image widgets (same order as list)
   .ue-svc-item   each service row (container or widget)
   .ue-svc-arrow  optional: the arrow inside each row                    */
.ue-svc-media{ position:sticky !important; top:120px; height:72vh; min-height:560px; overflow:hidden; background:#d9d9d6; }
.ue-svc-media .elementor-widget-image{ position:absolute !important; inset:0; width:auto !important; margin:0 !important; opacity:0; transition:opacity .8s ease; }
.ue-svc-media .elementor-widget-image .elementor-widget-container{ height:100%; }
.ue-svc-media img{ width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; filter:grayscale(1); transition:filter .8s ease; }
.ue-svc-media .is-active{ opacity:1; }
.ue-svc-media .is-active img{ filter:none; }
.ue-svc-media .elementor-widget-image:first-child{ opacity:1; }
.ue-svc-media.is-ready .elementor-widget-image:first-child:not(.is-active){ opacity:0; }
.ue-svc-item{ cursor:pointer; }
.ue-svc-item .elementor-heading-title{ transition:color .25s ease; }
.ue-svc-item.is-active .elementor-heading-title{ color:var(--ue-blue) !important; }
.ue-svc-arrow{ opacity:.55; transition:opacity .3s ease, transform .3s ease; }
.ue-svc-item.is-active .ue-svc-arrow{ opacity:1; transform:translateX(6px); }
@media (max-width:1024px){ .ue-svc-media{ position:relative !important; top:auto; height:420px; min-height:0; } }
@media (max-width:767px){  .ue-svc-media{ height:280px; } }

/* ---------- FORM (Elementor Pro Form widget with class .ue-form) ------ */
.ue-form-card{ background:var(--ue-tint); border:1px solid var(--ue-hair); padding:48px 48px 52px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06); }
@media (max-width:767px){ .ue-form-card{ padding:32px 22px 36px; } }
.ue-form .elementor-field-group{ margin-bottom:22px; }
.ue-form .elementor-field-label{ font-size:12px !important; font-weight:600 !important; letter-spacing:.12em; text-transform:uppercase; color:var(--ue-charcoal) !important; margin-bottom:6px; }
.ue-form .elementor-mark-required .elementor-field-label:after{ content:" *"; color:var(--ue-blue); padding:0; }
.ue-form .elementor-field-textual,
.ue-form .elementor-select-wrapper select{ font-size:16px !important; line-height:1.4; padding:9px 14px !important; min-height:0;
  border:1px solid #c4c4c0 !important; border-radius:2px !important; background:#fff !important; color:var(--ue-ink) !important;
  transition:border-color .15s ease, box-shadow .15s ease; }
.ue-form .elementor-field-textual:hover,
.ue-form .elementor-select-wrapper select:hover{ border-color:#8a8a8a !important; }
.ue-form .elementor-field-textual:focus,
.ue-form .elementor-select-wrapper select:focus{ border-color:var(--ue-blue) !important; box-shadow:0 0 0 3px rgba(15,82,186,.15); outline:none; }
.ue-form ::placeholder{ color:#8a8a8a; }
.ue-form .elementor-button{ background:var(--ue-blue) !important; color:#fff !important; border-radius:0 !important;
  font-size:15px !important; font-weight:600 !important; letter-spacing:.02em; padding:18px 34px !important; transition:background .2s ease; }
.ue-form .elementor-button:hover{ background:var(--ue-blue-dk) !important; }

/* ---------- TEXT LINK BUTTON  (.ue-link on a Button widget) ---------- */
.ue-link .elementor-button{ background:none !important; color:var(--ue-ink) !important; padding:0 0 4px !important; border-radius:0 !important;
  border-bottom:1px solid currentColor !important; font-size:15px; font-weight:600; }
.ue-link .elementor-button:hover{ color:var(--ue-blue) !important; }

/* ---------- MAINTENANCE PROGRAMS TABLE (HTML widget snippet) ---------- */
.ue-programs-wrap{ overflow:visible; }
.ue-programs{ width:100%; min-width:680px; border-collapse:separate; border-spacing:0; border:1px solid #e0e0dc; background:#fff; color:var(--ue-ink); font-size:16px; line-height:1.4; }
.ue-programs th, .ue-programs td{ border:0; padding:16px; }
.ue-programs thead th{ position:sticky; top:calc(var(--ue-header-h-sm) - 1px); z-index:2; background:#fff; padding:24px 12px 22px;
  border-top:3px solid var(--ue-ink); border-bottom:1px solid var(--ue-line); box-shadow:0 1px 0 var(--ue-line); text-align:center; vertical-align:bottom; }
.ue-programs thead th + th{ border-left:1px solid #e6e6e2; }
.ue-programs thead th:first-child{ text-align:left; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#555; }
.ue-programs thead th.is-featured{ border-top-color:var(--ue-blue); }
.ue-programs .ue-plan{ display:block; font-size:20px; font-weight:700; letter-spacing:-.01em; }
.ue-programs .ue-plan-sub{ display:block; font-size:13px; font-weight:400; color:#555; margin-top:6px; }
.ue-programs .ue-plan-count{ display:block; font-size:13px; font-weight:600; margin-top:12px; }
.ue-programs thead th.is-featured .ue-plan-count{ color:var(--ue-blue); }
.ue-programs .ue-group th{ background:#efefec; padding:12px 16px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ue-charcoal); text-align:left; }
.ue-programs tbody tr:not(.ue-group) th{ font-weight:400; text-align:left; border-top:1px solid #e6e6e2; }
.ue-programs tbody td{ text-align:center; border-top:1px solid #e6e6e2; border-left:1px solid #e6e6e2; }
.ue-programs tbody td:last-child{ background:rgba(15,82,186,.04); }
.ue-programs tbody tr:not(.ue-group):hover > *{ background:#f5f7fb; }
.ue-programs .ue-yes{ display:inline-flex; width:26px; height:26px; border-radius:50%; background:var(--ue-blue); align-items:center; justify-content:center; vertical-align:middle; }
.ue-programs .ue-no{ display:inline-block; width:14px; height:2px; background:#cfcfcb; vertical-align:middle; }
.ue-programs .ue-optional{ margin-left:10px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#555; border:1px solid #cfcfcb; padding:3px 7px; white-space:nowrap; }
@media (max-width:1024px){ .ue-programs thead th{ top:calc(var(--ue-header-h-sm) - 1px); } }
@media (max-width:767px){ .ue-programs-wrap{ overflow-x:auto; } .ue-programs thead th{ position:static; } }

/* ---------- REDUCED MOTION safety net ---------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ue-reveal, .ue-wipe{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  .ue-color img, .ue-hero-media img{ filter:none !important; }
}