/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */

.views-align-left {
    text-align: left;
}

.views-align-right {
    text-align: right;
}

.views-align-center {
    text-align: center;
}

.views-view-grid .views-col {
    float: left;
}

.views-view-grid .views-row {
    float: left;
    clear: both;
    width: 100%;
}

.views-display-link+.views-display-link {
    margin-left: 0.5em;
}

.ajax-progress.ajax-progress-fullscreen {
    z-index: 1261;
}

.webform-ajax-messages {
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
}

.webform-ajax-messages .messages {
    margin: 0;
    border-width: 10px 0 0 0;
    font-weight: bold;
}

.webform-ajax-messages .messages+.messages {
    margin: 0;
}

.webform-ui-dialog {
    top: 50px !important;
}

.toolbar-tray-open.toolbar-horizontal .webform-ui-dialog {
    top: 90px !important;
}

.captcha__description {
    margin-bottom: .75em;
}

.paragraph--unpublished {
    background-color: #fff4f4;
}


/* ===== MIRROR-GATE HERO ===== */
.section-mirror {
  position: relative;
  padding: 0;
  background: var(--surface, #f7f8fb);
  color: var(--text-color, #0f172a);
  isolation: isolate;
  overflow: hidden;
}

.mirror-hero {
  position: relative;
  min-height: 800px;         /* requested desktop height */
  height: 82vh;
  max-height: 1000px;
  border-radius: 28px;
  margin: clamp(20px, 3vw, 40px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 31, 58, 0.18);
  perspective: 1600px;       /* for mirror door swing */
  transform: translateZ(0);
}

/* Background layers for depth */
.mh-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  border-radius: inherit;
  filter: saturate(1.04) contrast(1.03);
  will-change: transform, opacity;
  transform: scale(1.06); /* subtle initial zoom */
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.2,.8,.16,1), opacity 1s ease;
  z-index: 0;
}

/* Soft readability + luxe tint */
.mh-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.26) 56%, rgba(255,255,255,.08) 100%),
    radial-gradient(120% 80% at 8% 12%, rgba(255,255,255,.18), transparent 60%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .9s ease .1s;
}

/* ===== Mirror Doors (center swing open) ===== */
.mh-doors {
  position: absolute; inset: 0; z-index: 4;
  display: grid; grid-template-columns: 1fr 1fr;
  pointer-events: none;
}
.mh-door {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, rgba(255,255,255,0) 2px 6px);
  box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset, 0 30px 60px rgba(10,31,58,.10);
}
.mh-door::after { /* specular highlight sweep */
  content: "";
  position: absolute; inset: -20% -10%;
  background: radial-gradient(60% 20% at 0% 0%, rgba(255,255,255,.8), transparent 60%);
  mix-blend-mode: screen; opacity: .0; transform: translateX(-12%);
  transition: opacity .8s ease, transform .8s ease;
}
.mh-door-left  { border-top-left-radius: 28px;  border-bottom-left-radius: 28px;  transform-origin: left center; }
.mh-door-right { border-top-right-radius: 28px; border-bottom-right-radius: 28px; transform-origin: right center; }

/* ===== Content ===== */
.mh-content {
  position: relative; z-index: 3;
  max-width: 760px;
  padding: clamp(24px, 3.2vw, 48px);
  margin-left: clamp(16px, 4vw, 80px);
  margin-right: clamp(16px, 3vw, 40px);
  margin-top: clamp(40px, 14vh, 180px);
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.40));
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(10,31,58,.14);
  opacity: 0; transform: translateY(24px);
  transition: opacity .75s ease .25s, transform .75s ease .25s;
}
.mh-content::before {
  content: "";
  position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  padding: 1px; background:
  linear-gradient(135deg, color-mix(in srgb, var(--primary, #0b5ed7) 60%, #fff 40%), transparent 40%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.mh-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-color, #6b7280);
  margin-bottom: 12px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease .36s, transform .55s ease .36s;
}
.mh-eyebrow::before {
  content: ""; width: 46px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary, #0b5ed7), transparent);
}

.mh-title { margin: 0 0 10px 0; }
.mh-title img {
  max-width: 420px; width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.10));
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .65s ease .42s, transform .7s cubic-bezier(.2,.7,.2,1) .42s;
}

.mh-text {
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.85;
  color: var(--text-muted, #223247);
  margin: 14px 0 26px;
  max-width: 62ch;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease .50s, transform .6s ease .50s;
}

/* CTAs */
.mh-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mh-btn,
.mh-btn-ghost {
  --btn-bg: var(--primary, #0b5ed7);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; font-weight: 700;
  text-decoration: none; letter-spacing: .01em;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, letter-spacing .28s, background .28s, color .28s, border-color .28s;
  opacity: 0; transform: translateY(18px);
}
.mh-btn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 98%, #fff 2%), var(--btn-bg));
  color: var(--btn-fg);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--btn-bg) 22%, transparent);
  transition-delay: .58s;
}
.mh-btn:hover { transform: translateY(-3px); letter-spacing: .02em; }
.mh-btn i {
  width: 18px; height: 18px; display: inline-block;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  background: currentColor; transition: transform .25s ease;
}
.mh-btn:hover i { transform: translateX(4px); }
.mh-btn-ghost {
  background: rgba(255,255,255,.6);
  color: var(--text-color, #0f172a);
  border: 1px solid color-mix(in srgb, var(--btn-bg) 40%, #cbd5e1 60%);
  transition-delay: .64s;
}
.mh-btn-ghost:hover { transform: translateY(-2px); }

/* ===== Reflective Floor (mirror) ===== */
.mh-floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 38%; z-index: 2; pointer-events: none;
  overflow: hidden;
}
.mh-floor::before { /* reflection of background */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; top: -2%;
  background: inherit; /* inherits from .mh-bg via parent stacking */
}
.mh-reflect-bg,
.mh-reflect-title {
  position: absolute; left: 0; right: 0;
  transform: scaleY(-1);
  filter: blur(1.2px) saturate(1.02);
  mask-image: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity .9s ease .4s, transform 1.2s ease .2s;
}
.mh-reflect-bg  { bottom: 0; height: 100%; background-size: cover; background-position: center; }
.mh-reflect-title { bottom: 14%; display: flex; justify-content: flex-start; padding-left: clamp(16px, 4vw, 80px); }

/* ===== ENTER STATE ===== */
.mirror-hero.is-in .mh-bg     { opacity: 1; transform: scale(1); }
.mirror-hero.is-in .mh-veil   { opacity: 1; }
.mirror-hero.is-in .mh-content,
.mirror-hero.is-in .mh-eyebrow,
.mirror-hero.is-in .mh-title img,
.mirror-hero.is-in .mh-text,
.mirror-hero.is-in .mh-btn,
.mirror-hero.is-in .mh-btn-ghost {
  opacity: 1; transform: translateY(0) scale(1);
}

/* Mirror doors swing open */
.mirror-hero.is-in .mh-door-left  { animation: doorLeft .95s cubic-bezier(.18,.86,.22,.99) forwards; }
.mirror-hero.is-in .mh-door-right { animation: doorRight .95s cubic-bezier(.18,.86,.22,.99) forwards; }
.mirror-hero.is-in .mh-door::after { opacity: .9; transform: translateX(0); }

@keyframes doorLeft {
  0% { transform: rotateY(0deg); opacity: 1; }
  60% { transform: rotateY(-70deg); opacity: 1; }
  100% { transform: rotateY(-90deg); opacity: 0; }
}
@keyframes doorRight {
  0% { transform: rotateY(0deg); opacity: 1; }
  60% { transform: rotateY(70deg); opacity: 1; }
  100% { transform: rotateY(90deg); opacity: 0; }
}

/* When open, enable reflections */
.mirror-hero.is-in .mh-reflect-bg,
.mirror-hero.is-in .mh-reflect-title { opacity: 1; }

/* ===== EXIT (scroll away) ===== */
.mirror-hero:not(.is-in) .mh-bg { opacity: 0; transform: scale(1.06); }
.mirror-hero:not(.is-in) .mh-veil { opacity: 0; }
.mirror-hero:not(.is-in) .mh-reflect-bg,
.mirror-hero:not(.is-in) .mh-reflect-title { opacity: 0; }

/* Device-specific assets (never overlap) */
.only-desktop { display: none !important; }
.only-mobile  { display: block !important; }

/* Responsive */
@media (min-width: 992px) {
  .only-desktop { display: block !important; }
  .only-mobile  { display: none !important; }
  .mh-content { margin-top: 14vh; }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .mh-bg, .mh-veil, .mh-content, .mh-eyebrow, .mh-title img, .mh-text,
  .mh-btn, .mh-btn-ghost, .mh-reflect-bg, .mh-reflect-title, .mh-door {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
}









/* Section: force pure white and remove any inherited background/video */
.skyline-pills {
  background: #fff !important;
  background-image: none !important;
}

/* Title */
.skyline-heading {
  font-size: 2.3rem; font-weight: 800; text-transform: uppercase; color: #111;
  line-height: 1.3; letter-spacing: .3px;
}
.skyline-heading span { color: var(--primary-color); }

/* Skyline layout (staggered heights like buildings) */
.skyline-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 28px;
  align-items: end;      /* align to bottom to get skyline feel */
}

/* Building card */
.sky-bld {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transition: transform .35s ease, box-shadow .35s ease;
}
.sky-bld:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
}

/* Image block — big heights */
.sky-bld-img { position: relative; overflow: hidden; }
.sky-bld-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease;
}
.sky-bld:hover .sky-bld-img img { transform: scale(1.06); }

/* Heights (adjust as you like) */
.sky-bld.h600 .sky-bld-img { height: 600px; }
.sky-bld.h640 .sky-bld-img { height: 640px; }
.sky-bld.h680 .sky-bld-img { height: 680px; }

/* Text below the image (not overlay) */
.sky-bld-body { padding: 18px 16px 20px; text-align: center; }
.sky-bld-body h3 { font-size: 1.25rem; font-weight: 700; color: #1b1b1b; margin: 0 0 6px; }
.sky-bld-body p  { font-size: .98rem; color: #555; line-height: 1.55; margin: 0; }

/* Decorative subtle facade lines (very light, keeps it premium) */
.sky-bld-img::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 46px),
    linear-gradient(to top, rgba(0,0,0,.06), rgba(0,0,0,0) 40%);
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .sky-bld.h680 .sky-bld-img { height: 640px; }
}
@media (max-width: 991.98px) {
  .skyline-wrap { grid-template-columns: 1fr 1fr; }
  .sky-bld.h680 .sky-bld-img { height: 580px; }
  .sky-bld.h640 .sky-bld-img { height: 540px; }
  .sky-bld.h600 .sky-bld-img { height: 520px; }
}
@media (max-width: 575.98px) {
  .skyline-wrap { grid-template-columns: 1fr; }
  .sky-bld.h680 .sky-bld-img,
  .sky-bld.h640 .sky-bld-img,
  .sky-bld.h600 .sky-bld-img { height: 420px; }
  .skyline-heading { font-size: 1.7rem; }
}