/* Extracted from single-lumoria_project.php so it is cached once instead of being re-sent
   inside the HTML on every page view. Enqueued by
   lumoria_enqueue_template_styles() in functions.php. */

    #lumCaseSec, #lumCaseSec * { box-sizing: border-box; }
    #lumCaseSec {
      /* --lum-gold / --lum-gold-dark / --lum-ink / --lum-sub already live in :root */
      --lum-divider: rgba(29,18,53,.08);
      --lum-radius: 20px;
      font-family: var(--font-primary);
      max-width: 1500px;
      margin: 0 auto;
      padding: 40px 24px 64px;
    }

    /* ---------------- PHOTO GALLERY (page lead) ----------------
       Replaces the old single hero image. One rounded frame with hairline
       gaps: the lead photo carries the page and the rest read as a single
       object rather than a row of separate cards. The narrow and wide
       layouts are kept in separate media blocks so their span rules never
       have to out-specify each other. */
    #lumCaseSec .lum-case-gallery { margin-bottom: 44px; }
    #lumCaseSec .lum-case-gallery-grid {
      display: grid;
      gap: 8px;
      border-radius: var(--lum-radius);
      overflow: hidden;
      background: var(--lum-divider);
    }
    /* Photos past the fifth stay in the DOM for the lightbox only. */
    #lumCaseSec .lum-case-gallery-item.is-extra { display: none; }
    /* A lone photo is sized by ratio instead of by grid rows. */
    #lumCaseSec .lum-case-gallery.is-count-1 .lum-case-gallery-grid { grid-auto-rows: auto; }
    #lumCaseSec .lum-case-gallery.is-count-1 .lum-case-gallery-item {
      grid-column: 1 / -1;
      grid-row: auto;
      height: auto;
    }

    /* Narrow screens: lead photo full width, the rest pair up underneath. */
    @media (max-width: 640px) {
      #lumCaseSec .lum-case-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 27vw;
        gap: 6px;
      }
      #lumCaseSec .lum-case-gallery-item:first-child { grid-column: 1 / -1; grid-row: span 2; }
      /* An odd number of followers would leave a hole, so the last one widens. */
      #lumCaseSec .lum-case-gallery.is-count-2 .lum-case-gallery-item:nth-child(2),
      #lumCaseSec .lum-case-gallery.is-count-4 .lum-case-gallery-item:nth-child(4) { grid-column: 1 / -1; grid-row: span 2; }
      #lumCaseSec .lum-case-gallery.is-count-1 .lum-case-gallery-item { aspect-ratio: 4 / 3; }
    }

    /* Wide screens: 4-column mosaic with the lead photo at double size. */
    @media (min-width: 641px) {
      #lumCaseSec .lum-case-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: clamp(128px, 14.5vw, 200px);
      }
      #lumCaseSec .lum-case-gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
      /* Two, three or four photos would leave gaps in the 2x2 block beside
         the lead photo, so the followers widen to fill the row instead. */
      #lumCaseSec .lum-case-gallery.is-count-2 .lum-case-gallery-item { grid-column: span 2; grid-row: span 2; }
      #lumCaseSec .lum-case-gallery.is-count-3 .lum-case-gallery-item:nth-child(n+2) { grid-column: span 2; }
      #lumCaseSec .lum-case-gallery.is-count-4 .lum-case-gallery-item:nth-child(2) { grid-column: span 2; }
      /* A lone photo keeps the proportions the old hero image had. */
      #lumCaseSec .lum-case-gallery.is-count-1 .lum-case-gallery-item { aspect-ratio: 20 / 8; }
    }

    #lumCaseSec .lum-case-future {
      display: flex; align-items: flex-start; gap: 12px;
      margin: 22px 0 0; padding: 16px 20px;
      border: 1px solid rgba(68,189,161,.35); border-radius: 14px;
      background: rgba(68,189,161,.08);
      font-size: 15px; line-height: 1.6; color: var(--lum-gold-dark);
    }
    #lumCaseSec .lum-case-future i { margin-top: 3px; color: var(--lum-gold); flex-shrink: 0; }
    #lumCaseSec .lum-case-enquiry-lead { margin: -16px 0 22px; font-size: 13.5px; color: var(--lum-sub); }

    /* ---------------- TITLE BLOCK ---------------- */
    #lumCaseSec .lum-case-head { margin-bottom: 40px; }

    #lumCaseSec .lum-case-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 18px;
    }
    #lumCaseSec .lum-case-tag {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 7px 16px;
      background: var(--lum-gold);
      color: #fff;
      font-size: 13.5px;
      font-weight: var(--fw-semibold);
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    /* Secondary badge (the building's standard) sits quieter than the category. */
    #lumCaseSec .lum-case-tag-soft {
      background: #F7EBE2;
      color: var(--lum-ink);
    }

    #lumCaseSec .lum-case-title {
      font-size: var(--text-h1);
      font-weight: var(--fw-heading);
      line-height: var(--lh-tight);
      letter-spacing: var(--ls-h1);
      color: var(--lum-ink);
      margin: 0 0 14px;
    }

    #lumCaseSec .lum-case-address {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 20px;
      font-size: var(--text-base);
      color: var(--lum-sub);
    }
    #lumCaseSec .lum-case-address i {
      color: var(--lum-gold);
      font-size: 15px;
      flex-shrink: 0;
    }

    #lumCaseSec .lum-case-lead {
      max-width: 900px;
      font-size: var(--text-base);
      line-height: var(--lh-relaxed);
      color: var(--lum-sub);
    }
    #lumCaseSec .lum-case-lead p { margin: 0 0 14px; }
    #lumCaseSec .lum-case-lead p:last-child { margin-bottom: 0; }

    /* ---------------- PILL LIST (Unit Types / Best Suited For) ---------------- */
    #lumCaseSec .lum-case-pill-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 28px 0 0;
      padding: 0;
    }
    #lumCaseSec .lum-case-pill-list li {
      font-size: 14.5px;
      font-weight: 500;
      color: var(--lum-ink);
      background: #fff;
      border: 1.5px solid var(--lum-gold);
      border-radius: 999px;
      padding: 9px 20px;
    }

    /* ---------------- TEXT BLOCKS ---------------- */
    #lumCaseSec .lum-case-block { margin-bottom: 52px; }
    #lumCaseSec .lum-case-block:last-of-type { margin-bottom: 0; }

    #lumCaseSec .lum-case-h2 {
      font-family: var(--font-primary);
      font-weight: var(--fw-heading);
      font-size: var(--text-h2);
      color: var(--lum-ink);
      margin: 0 0 22px;
  line-height: 1.15;
  letter-spacing: var(--ls-h2);
}

    #lumCaseSec .lum-case-p {
      font-size: 16px;
      line-height: 1.75;
      color: var(--lum-sub);
      max-width: 1100px;
      margin: 0 0 20px;
    }
    #lumCaseSec .lum-case-p:last-child { margin-bottom: 0; }

    #lumCaseSec .lum-case-block p {
      font-size: 16px;
      line-height: 1.75;
      color: var(--lum-sub);
      max-width: 1100px;
      margin: 0 0 20px;
    }
    #lumCaseSec .lum-case-block p:last-child { margin-bottom: 0; }

    /* ---------------- KEY FIGURES ----------------
       Sized against the column these sit in, not the viewport. The two are not
       the same thing here: the 380px sidebar leaves at 1100px, so the content
       column JUMPS from 625px wide to 1052px as the window gets NARROWER. Any
       vw-based rule is wrong on one side of that jump, which is why four
       figures at 30px never fitted on a desktop -- 122px of column for a word
       needing 206px.

       Column count and type size move together, because it is the pair that
       decides whether a word fits. Every band is checked against
       "Residential", the longest single word these figures can hold: the Type
       figure prints category names. */
    #lumCaseSec .lum-case-main {
      /* Makes the content column queryable. Safe here: containment would trap
         position:fixed descendants, and the lightbox sits outside the layout. */
      container-type: inline-size;
      container-name: lumcase;
    }

    #lumCaseSec .lum-case-stats {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      margin: 0 0 52px;
    }
    #lumCaseSec .lum-case-stat {
      background: #fff;
      border: 1px solid var(--lum-divider);
      border-radius: var(--lum-radius);
      padding: 18px 20px;
      box-shadow: 0 8px 24px rgba(29,18,53,.05);
      /* A grid item's default min-width is auto, which refuses to shrink below
         its content and pushes the row wider than the column holding it. */
      min-width: 0;
    }
    #lumCaseSec .lum-case-stat-value {
      font-family: var(--font-primary);
      font-weight: 700;
      font-size: 26px;
      line-height: 1.15;
      color: var(--lum-gold);
      display: block;
      /* break-word, never `anywhere`: `anywhere` counts mid-word breaks toward
         the min-content width, so the track shrinks under the word and the
         browser splits "Commercial" across two lines. break-word steps in only
         when a word genuinely cannot fit a line of its own. */
      overflow-wrap: break-word;
      word-break: normal;
      hyphens: none;
    }
    #lumCaseSec .lum-case-stat-label {
      display: block;
      margin-top: 6px;
      font-size: 13px;
      color: var(--lum-sub);
      font-weight: var(--fw-medium);
      overflow-wrap: break-word;
    }

    @container lumcase (min-width: 480px) {
      #lumCaseSec .lum-case-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
      #lumCaseSec .lum-case-stat { padding: 20px 22px; }
      #lumCaseSec .lum-case-stat-value { font-size: 22px; }
    }
    @container lumcase (min-width: 620px) {
      #lumCaseSec .lum-case-stat { padding: 24px 26px; }
      #lumCaseSec .lum-case-stat-value { font-size: 26px; }
    }
    /* Four across only once the column can actually pay for it. Even at its
       widest -- 1052px, sidebar stacked -- four cards leave about 200px of
       text each, so the type settles rather than returning to 30px. */
    @container lumcase (min-width: 1000px) {
      #lumCaseSec .lum-case-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
      #lumCaseSec .lum-case-stat { padding: 22px 24px; }
      #lumCaseSec .lum-case-stat-value { font-size: 22px; }
    }

    /* Browsers without container queries never see the blocks above and would
       be left on the one-column base. Two columns is safe at every content
       width this layout produces (the narrowest is 593px), so they get that. */
    @supports not (container-type: inline-size) {
      @media (min-width: 641px) {
        #lumCaseSec .lum-case-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
        #lumCaseSec .lum-case-stat { padding: 24px 26px; }
        #lumCaseSec .lum-case-stat-value { font-size: 26px; }
      }
    }

    /* ---------------- AVAILABLE APARTMENT TYPES ----------------
       One card per type still free in this building, replacing the per-unit
       table. Cards sit in a three-column row at full width, two equal
       columns when there are two or four (.is-paired), and a lone card lies
       across the row, photo beside details (.is-single), so a row never ends
       in a gap. Written with logical
       properties so the Arabic build mirrors from the base rule; see the RTL
       notes in CLAUDE.md. */
    #lumCaseSec .lum-case-types-lead {
      margin-block: 0 22px;
      color: var(--lum-sub);
      font-size: 15px;
    }
    /* auto-fill, not auto-fit: auto-fit collapses the empty tracks, so a
       building with a single type stretched its one card across the whole
       column. auto-fill keeps them, so one card takes one column of three,
       the same size as each of Tubli Center's five. */
    #lumCaseSec .lum-case-types {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 22px;
    }
    @media (max-width: 520px) {
      #lumCaseSec .lum-case-types { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    }
    /* Two equal columns when three would leave the row unbalanced: two cards
       side by side, four as 2 x 2. A lone card spans the row with its photo
       beside the details (the row runs right to left in Arabic by itself),
       and stacks again on a phone. Set in single-lumoria_project.php by the
       card count. */
    #lumCaseSec .lum-case-types.is-paired { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #lumCaseSec .lum-case-types.is-single { grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 641px) {
      #lumCaseSec .lum-case-types.is-single .lum-case-type-card { flex-direction: row; }
      #lumCaseSec .lum-case-types.is-single .lum-case-type-media {
        flex: 0 0 50%;
        aspect-ratio: auto;
        min-height: 300px;
      }
      #lumCaseSec .lum-case-types.is-single .lum-case-type-body { padding: 24px 26px; }
    }
    @media (max-width: 640px) {
      #lumCaseSec .lum-case-types.is-paired { grid-template-columns: minmax(0, 1fr); }
    }
    #lumCaseSec .lum-case-type { display: flex; }
    #lumCaseSec .lum-case-type-card {
      display: flex;
      flex-direction: column;
      width: 100%;
      border: 1px solid var(--lum-divider);
      border-radius: var(--lum-radius);
      background: #fff;
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    /* A card that opens its unit type's page carries one link stretched over
       the whole card. The Enquire button sits above it so it still reaches
       the sidebar form rather than following the card. */
    #lumCaseSec .lum-case-type-card.is-linked { position: relative; cursor: pointer; }
    #lumCaseSec .lum-case-type-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
    }
    #lumCaseSec .lum-case-type-overlay:focus-visible { outline: 2px solid var(--lum-gold-dark); outline-offset: 2px; }
    #lumCaseSec .lum-case-type-card.is-linked .lum-case-type-cta { position: relative; z-index: 3; }
    #lumCaseSec .lum-case-type-card.is-linked:hover .lum-case-type-name { text-decoration: underline; text-underline-offset: 4px; }
    #lumCaseSec .lum-case-type-card:hover {
      transform: translateY(-3px);
      border-color: rgba(68,189,161,.35);
      box-shadow: 0 22px 44px -22px rgba(29,18,53,.22);
    }
    @media (prefers-reduced-motion: reduce) {
      #lumCaseSec .lum-case-type-card,
      #lumCaseSec .lum-case-type-card:hover { transform: none; transition: none; }
      #lumCaseSec .lum-case-type-card img { transition: none; }
    }

    /* Photo with the type name laid over its foot. The scrim is a gradient
       rather than a flat tint so a pale photo still carries white text. */
    #lumCaseSec .lum-case-type-media {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: var(--lum-divider);
    }
    #lumCaseSec .lum-case-type-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .45s ease;
    }
    #lumCaseSec .lum-case-type-card:hover .lum-case-type-media img { transform: scale(1.05); }
    #lumCaseSec .lum-case-type-media::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      height: 62%;
      background: linear-gradient(to top, rgba(29,18,53,.82), rgba(29,18,53,0));
      pointer-events: none;
    }
    #lumCaseSec .lum-case-type-media-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      color: rgba(29,18,53,.22);
    }
    #lumCaseSec .lum-case-type-name {
      position: absolute;
      inset-block-end: 16px;
      inset-inline-start: 20px;
      inset-inline-end: 20px;
      margin: 0;
      z-index: 1;
      color: #fff;
      font-size: 20px;
      font-weight: var(--fw-semibold);
      line-height: 1.25;
      text-shadow: 0 1px 12px rgba(29,18,53,.45);
    }

    #lumCaseSec .lum-case-type-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 18px 20px 20px;
    }
    #lumCaseSec .lum-case-type-detail {
      margin-block: 0 14px;
      color: var(--lum-sub);
      font-size: 13.5px;
    }
    #lumCaseSec .lum-case-type-facts {
      list-style: none;
      margin: 0 0 18px;
      padding: 0;
      display: grid;
      gap: 8px;
    }
    #lumCaseSec .lum-case-type-facts li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding-block-end: 8px;
      border-block-end: 1px solid var(--lum-divider);
      font-size: 14px;
    }
    #lumCaseSec .lum-case-type-facts li:last-child { border-block-end: 0; padding-block-end: 0; }
    #lumCaseSec .lum-case-type-fact-label { color: var(--lum-sub); }
    #lumCaseSec .lum-case-type-fact-value { font-weight: var(--fw-semibold); text-align: end; }

    /* Available / Not available. Never a count -- see
       lumoria_show_available_unit_count(). */
    #lumCaseSec .lum-case-type-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: flex-start;
      margin-block: 0 14px;
      padding: 4px 11px;
      border-radius: 999px;
      font-size: 12.5px;
      font-weight: var(--fw-semibold);
      line-height: 1.4;
    }
    #lumCaseSec .lum-case-type-status.is-available { background: rgba(68,189,161,.14); color: #1f7a64; }
    #lumCaseSec .lum-case-type-status.is-unavailable { background: var(--lum-divider); color: var(--lum-sub); }
    #lumCaseSec .lum-case-type-status i { font-size: 11px; }

    /* Greyed card for a type with every flat let. Building pages no longer
       show such types (single-lumoria_project.php keeps available ones only);
       kept for any card still marked .is-unavailable. */
    #lumCaseSec .lum-case-type-card.is-unavailable { background: #fafafa; }
    #lumCaseSec .lum-case-type-card.is-unavailable .lum-case-type-media img { filter: grayscale(1); opacity: .6; }
    #lumCaseSec .lum-case-type-card.is-unavailable .lum-case-type-facts,
    #lumCaseSec .lum-case-type-card.is-unavailable .lum-case-type-price { opacity: .6; }
    #lumCaseSec .lum-case-type-card.is-unavailable:hover { transform: none; box-shadow: none; border-color: var(--lum-divider); }
    #lumCaseSec .lum-case-type-card.is-unavailable:hover .lum-case-type-media img { transform: none; }

    /* Pinned to the foot so the price and button line up across a row of
       cards whose descriptions run to different lengths. */
    #lumCaseSec .lum-case-type-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-block-start: auto;
      padding-block-start: 16px;
      border-block-start: 1px solid var(--lum-divider);
    }
    #lumCaseSec .lum-case-type-price {
      display: flex;
      align-items: baseline;
      gap: 5px;
      flex-wrap: wrap;
    }
    #lumCaseSec .lum-case-type-price small { color: var(--lum-sub); font-size: 12.5px; }
    #lumCaseSec .lum-case-type-price strong {
      color: var(--lum-ink);
      font-size: 19px;
      font-weight: 700;
      line-height: 1.2;
    }
    #lumCaseSec .lum-case-type-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 999px;
      background: var(--lum-gold);
      color: #fff;
      font-size: 13.5px;
      font-weight: var(--fw-semibold);
      text-decoration: none;
      transition: background-color .2s ease, transform .2s ease;
    }
    #lumCaseSec .lum-case-type-cta:hover { background: var(--lum-gold-dark); color: #fff; }
    #lumCaseSec .lum-case-type-cta:focus-visible { outline: 2px solid var(--lum-gold-dark); outline-offset: 2px; }
    #lumCaseSec .lum-case-type-cta i { font-size: 11px; }

    /* Every unit taken: the greyed cards say so one by one, and this box
       offers the enquiry form as the way forward. */
    #lumCaseSec .lum-case-types + .lum-case-types-none { margin-block-start: 22px; }
    #lumCaseSec .lum-case-types-none {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 28px 26px;
      border: 1px solid var(--lum-divider);
      border-radius: var(--lum-radius);
      background: #fff;
    }
    #lumCaseSec .lum-case-types-none > i { color: var(--lum-gold); font-size: 20px; }
    #lumCaseSec .lum-case-types-none-title { margin: 0; font-weight: var(--fw-semibold); color: var(--lum-ink); }
    #lumCaseSec .lum-case-types-none-lead { margin: 0 0 10px; color: var(--lum-sub); font-size: 14px; }


    /* ---------------- CARRIED-OVER SEARCH ----------------
       What the visitor picked before opening this page, restated so a
       narrowed unit table never reads as the whole building, plus the way
       back out of it. Shared with the unit-type detail view, which loads this
       stylesheet alongside its own. */
    #lumCaseSec .lum-case-filtered,
    #lumCaseSec .lum-case-filter-notice {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      margin: 0 0 22px;
      padding: 14px 18px;
      border: 1px solid rgba(68,189,161,.35);
      border-radius: 14px;
      background: rgba(68,189,161,.08);
      color: #168B72;
      font-size: 15px;
    }
    #lumCaseSec .lum-case-filtered-label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #168B72;
      font-size: 13px;
      font-weight: var(--fw-semibold);
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    #lumCaseSec .lum-case-filtered-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #lumCaseSec .lum-case-filtered-chips li {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid var(--lum-divider);
      border-radius: 999px;
      background: #fff;
      color: var(--lum-ink);
      font-size: 14px;
      font-weight: var(--fw-semibold);
    }
    /* The field name is context, not the answer, so it stays quieter. */
    #lumCaseSec .lum-case-filtered-chips li span {
      color: var(--lum-sub);
      font-size: 12px;
      font-weight: 400;
    }
    #lumCaseSec .lum-case-filtered-clear {
      margin-inline-start: auto;
      color: #168B72;
      font-size: 14px;
      font-weight: var(--fw-semibold);
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color .2s ease;
    }
    #lumCaseSec .lum-case-filtered-clear:hover { color: var(--lum-gold-dark); }

    @media (max-width: 640px) {
      #lumCaseSec .lum-case-filtered-clear { margin-inline-start: 0; }
    }

    /* ---------------- UNITS FILTER BAR (unit-type detail view only) ----------------
       The unit-type detail view (/available-units/studio/) borrows this
       stylesheet for its unit cards and this bar -- see
       lumoria_template_style_partials() in functions.php. */
    #lumCaseSec .lum-case-unit-tools { margin-bottom: 18px; }
    /* Four controls -- search, building, size, rent -- sit on one row; auto-fit
       would strand a single control on a second row at most column widths. */
    #lumCaseSec .lum-case-unit-filters {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    @media (max-width: 780px) { #lumCaseSec .lum-case-unit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 460px) { #lumCaseSec .lum-case-unit-filters { grid-template-columns: minmax(0, 1fr); } }
    #lumCaseSec .lum-case-unit-filters input,
    #lumCaseSec .lum-case-unit-filters select {
      width: 100%;
      height: 44px;
      padding-inline: 14px;
      border: 1px solid var(--lum-divider);
      border-radius: 12px;
      background: #fff;
      color: var(--lum-ink);
      font-family: inherit;
      font-size: 13.5px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    #lumCaseSec .lum-case-unit-filters input::placeholder { color: rgba(4,39,47,.42); }
    #lumCaseSec .lum-case-unit-filters input:focus,
    #lumCaseSec .lum-case-unit-filters select:focus {
      border-color: var(--lum-gold);
      box-shadow: 0 0 0 3px rgba(68,189,161,.18);
    }
    #lumCaseSec .lum-case-unit-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-block-start: 12px;
    }
    #lumCaseSec .lum-case-unit-count { font-size: 13px; color: var(--lum-sub); }
    #lumCaseSec .lum-case-unit-clear {
      padding: 8px 16px;
      border: 1px solid var(--lum-divider);
      border-radius: 999px;
      background: #fff;
      color: var(--lum-ink);
      font-family: inherit;
      font-size: 13px;
      font-weight: var(--fw-semibold);
      cursor: pointer;
      transition: border-color .2s ease, color .2s ease;
    }
    #lumCaseSec .lum-case-unit-clear:hover { border-color: var(--lum-gold); color: var(--lum-gold-dark); }
    #lumCaseSec .lum-case-unit-clear:focus-visible { outline: 2px solid var(--lum-gold); outline-offset: 2px; }

    /* ---------------- FACILITIES & SERVICES ---------------- */
    /* Only on a future project, where the list describes the portfolio rather
       than the building itself. */
    #lumCaseSec .lum-case-facilities-note {
      margin: -6px 0 18px;
      color: var(--lum-sub);
      font-size: 14px;
      line-height: 1.6;
    }
    #lumCaseSec .lum-case-facilities {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
      margin: 28px 0 0;
      padding: 0;
    }
    #lumCaseSec .lum-case-facility {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #fff;
      border: 1px solid var(--lum-divider);
      border-radius: 14px;
      padding: 16px 20px;
      font-size: 14.5px;
      color: var(--lum-gold-dark);
    }
    #lumCaseSec .lum-case-facility-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #F7EBE2;
      color: var(--lum-gold);
      font-size: 15px;
    }

    /* Written facility cards (project_facility_cards) carry a title and a line
       of detail rather than a bare vocabulary name, so the icon tops the card. */
    #lumCaseSec .lum-case-facility.has-desc { align-items: flex-start; padding-block: 18px; }
    #lumCaseSec .lum-case-facility-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    #lumCaseSec .lum-case-facility-title {
      color: var(--lum-ink);
      font-weight: var(--fw-semibold);
      line-height: var(--lh-snug);
    }
    #lumCaseSec .lum-case-facility-desc { color: var(--lum-sub); font-size: 13.5px; line-height: 1.55; }
    /* The written note follows the grid rather than introducing it. */
    #lumCaseSec .lum-case-facilities + .lum-case-facilities-note { margin: 18px 0 0; }

    /* A status notice with a title of its own: the title states the stage, the
       line under it explains. */
    #lumCaseSec .lum-case-future-text { display: flex; flex-direction: column; gap: 4px; }
    #lumCaseSec .lum-case-future-title { font-weight: var(--fw-semibold); color: var(--lum-ink); }

    /* Written summary cards come two or three at a time. Four across would
       strand them in half the row, so the widest band follows the count. */
    @container lumcase (min-width: 1000px) {
      #lumCaseSec .lum-case-stats.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #lumCaseSec .lum-case-stats.is-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* ---------------- NEARBY LANDMARKS ---------------- */
    #lumCaseSec .lum-case-landmarks {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
      margin: 28px 0 0;
      padding: 0;
    }
    #lumCaseSec .lum-case-landmark {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--lum-divider);
      border-radius: 14px;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    #lumCaseSec .lum-case-landmark:hover {
      transform: translateY(-3px);
      border-color: rgba(68,189,161,.45);
      box-shadow: 0 18px 34px -22px rgba(29,18,53,.38);
    }
    #lumCaseSec .lum-case-landmark-media {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #F7EBE2;
    }
    #lumCaseSec .lum-case-landmark-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s ease;
    }
    #lumCaseSec .lum-case-landmark:hover .lum-case-landmark-media img { transform: scale(1.05); }
    /* No image chosen yet — a tinted panel keeps the grid even. */
    #lumCaseSec .lum-case-landmark-placeholder {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(68,189,161,.16), rgba(4,39,47,.10));
      color: var(--lum-gold);
      font-size: 26px;
    }
    #lumCaseSec .lum-case-landmark-body { padding: 14px 16px 16px; }
    #lumCaseSec .lum-case-landmark-name {
      font-size: 15px;
      color: var(--lum-ink);
      font-weight: var(--fw-semibold);
      line-height: var(--lh-snug);
    }
    /* The drive time rides on the image so the body stays a single clean line. */
    #lumCaseSec .lum-case-landmark-time {
      position: absolute;
      inset-block-end: 10px;
      inset-inline-start: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(4,39,47,.82);
      color: #fff;
      font-size: 12.5px;
      font-weight: 600;
      white-space: nowrap;
      backdrop-filter: blur(2px);
    }

    /* ---------------- PHOTO GALLERY TILES ---------------- */
    #lumCaseSec .lum-case-gallery-item {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      border: none;
      padding: 0;
      overflow: hidden;
      cursor: pointer;
      background: #F7EBE2;
    }
    #lumCaseSec .lum-case-gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.35s ease;
    }
    #lumCaseSec .lum-case-gallery-item:hover img { transform: scale(1.06); }
    #lumCaseSec .lum-case-gallery-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(29,18,53,0) 60%, rgba(29,18,53,.35) 100%);
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    #lumCaseSec .lum-case-gallery-item:hover::after { opacity: 1; }
    #lumCaseSec .lum-case-gallery-item:focus-visible {
      outline: 2px solid var(--lum-gold);
      outline-offset: -3px;
    }

    /* Sits on the last visible tile when the gallery holds more than five. */
    #lumCaseSec .lum-case-gallery-more {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(29,18,53,.5);
      color: #fff;
      font-family: var(--font-primary);
      font-size: clamp(14px, 1.5vw, 18px);
      font-weight: var(--fw-semibold);
      letter-spacing: .01em;
      transition: background .25s ease;
    }
    #lumCaseSec .lum-case-gallery-item:hover .lum-case-gallery-more { background: rgba(29,18,53,.6); }

    /* ---------------- ENQUIRY FORM ---------------- */
    /* ---------------- CONTENT + SIDEBAR LAYOUT ---------------- */
    #lumCaseSec .lum-case-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      gap: 48px;
      align-items: start;
    }
    #lumCaseSec .lum-case-main { min-width: 0; }

    #lumCaseSec .lum-case-aside {
      position: sticky;
      /* Clears the sticky site header (110px) so the card never slides under it. */
      top: 134px;
      min-width: 0;
    }

    /* ---------------- ENQUIRY CARD ---------------- */
    #lumCaseSec .lum-case-enquiry {
      background: #fff;
      border: 1px solid var(--lum-divider);
      border-radius: 24px;
      padding: 32px 30px;
      box-shadow: 0 18px 44px rgba(29,18,53,.07);
    }
    #lumCaseSec .lum-case-enquiry-title {
      font-size: var(--text-xl);
      font-weight: var(--fw-heading);
      line-height: var(--lh-snug);
      color: var(--lum-ink);
      margin: 0 0 24px;
    }

    #lumCaseSec .lum-case-enquiry-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    #lumCaseSec .lum-case-enquiry-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    #lumCaseSec .lum-case-enquiry-field { min-width: 0; }
    #lumCaseSec .lum-case-enquiry-field label {
      display: block;
      margin: 0 0 7px;
      font-size: 13px;
      font-weight: var(--fw-medium);
      color: var(--lum-ink);
    }
    #lumCaseSec .lum-case-enquiry-form input[type="text"],
    #lumCaseSec .lum-case-enquiry-form input[type="email"],
    #lumCaseSec .lum-case-enquiry-form input[type="tel"],
    #lumCaseSec .lum-case-enquiry-form textarea {
      width: 100%;
      padding: 13px 16px;
      border: 1px solid var(--lum-divider);
      border-radius: 12px;
      background: #fff;
      font-family: inherit;
      font-size: 15px;
      color: var(--lum-ink);
      outline: none;
      transition: border-color .25s ease, box-shadow .25s ease;
    }
    #lumCaseSec .lum-case-enquiry-form textarea { resize: vertical; min-height: 120px; }
    #lumCaseSec .lum-case-enquiry-form input::placeholder,
    #lumCaseSec .lum-case-enquiry-form textarea::placeholder { color: rgba(4,39,47,.45); }
    #lumCaseSec .lum-case-enquiry-form input:focus,
    #lumCaseSec .lum-case-enquiry-form textarea:focus {
      border-color: var(--lum-gold);
      box-shadow: 0 0 0 3px rgba(68,189,161,.15);
    }

    /* Building and Unit are filled in by the page and cannot be edited, so
       they read as a stated fact rather than as a text box that refuses to
       type. Still focusable, and the padding leaves room for the lock. */
    #lumCaseSec .lum-case-enquiry-form input[readonly] {
      background: rgba(29,18,53,.03);
      color: var(--lum-sub);
      cursor: default;
      padding-inline-end: 34px;
      text-overflow: ellipsis;
    }
    /* A pointer-only cue: the field is already announced as read-only, so a
       second announcement would just be noise. Drawn as an inline SVG rather
       than a Font Awesome glyph -- the subset in fontawesome-subset.css is
       generated by scanning PHP and JS for fa-* tokens, so an icon referenced
       only from CSS would not be included and would render as a blank box.
       inset-inline-end puts it on the correct side in Arabic. */
    #lumCaseSec .lum-case-enquiry-field.is-locked { position: relative; }
    #lumCaseSec .lum-case-enquiry-field.is-locked::after {
      content: "";
      position: absolute;
      inset-inline-end: 12px;
      inset-block-end: 14px;
      width: 11px;
      height: 13px;
      background: no-repeat center / contain
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%2304272f" opacity=".34"><path d="M144 144v48h160v-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192v-48C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64v192c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64h16z"/></svg>');
      pointer-events: none;
    }
    /* Keyboard focus still shows, so tabbing through does not appear to skip
       a field, but clicking one does not light it up like an editable box. */
    #lumCaseSec .lum-case-enquiry-form input[readonly]:focus {
      border-color: var(--lum-divider);
      box-shadow: none;
    }
    #lumCaseSec .lum-case-enquiry-form input[readonly]:focus-visible {
      border-color: var(--lum-gold);
      box-shadow: 0 0 0 3px rgba(68,189,161,.12);
    }

    #lumCaseSec .lum-case-enquiry-submit {
      width: 100%;
      margin-top: 4px;
      padding: 15px 24px;
      border: none;
      border-radius: 999px;
      background: var(--lum-gold);
      color: #fff;
      font-family: inherit;
      font-size: 15px;
      font-weight: var(--fw-semibold);
      line-height: 1;
      cursor: pointer;
      transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
    }
    #lumCaseSec .lum-case-enquiry-submit:hover {
      background: var(--lum-gold-dark);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(4,39,47,.18);
    }
    #lumCaseSec .lum-case-enquiry-submit:disabled { opacity: .6; cursor: default; transform: none; }

    #lumCaseSec .lum-case-enquiry-note {
      margin: 16px 0 0;
      text-align: center;
      font-size: 13px;
      line-height: 1.55;
      color: var(--lum-sub);
    }

    #lumCaseSec .lum-case-enquiry-toast {
      margin-top: 14px;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(68,189,161,.12);
      color: var(--lum-gold-dark);
      font-size: 13.5px;
      text-align: center;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .25s ease, transform .25s ease;
    }
    #lumCaseSec .lum-case-enquiry-toast.lum-case-toast-shown { opacity: 1; transform: translateY(0); }

    /* The sidebar drops below the content before it gets too narrow to use. */
    @media (max-width: 1100px) {
      #lumCaseSec .lum-case-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
      #lumCaseSec .lum-case-aside { position: static; max-width: 560px; }
    }
    @media (max-width: 560px) {
      #lumCaseSec .lum-case-enquiry { padding: 26px 20px; }
      #lumCaseSec .lum-case-enquiry-row { grid-template-columns: minmax(0, 1fr); }
    }

    /* ---------------- LOCATION MAP (page close) ----------------
       Full width under the content + sidebar layout, mirroring the gallery
       frame at the top so the page opens and closes on the same shape. */
    #lumCaseSec .lum-case-map {
      margin-top: 64px;
      padding-top: 48px;
      border-top: 1px solid var(--lum-divider);
    }
    #lumCaseSec .lum-case-map-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
    }
    #lumCaseSec .lum-case-map-intro { min-width: 0; }
    #lumCaseSec .lum-case-map-intro .lum-case-h2 { margin-bottom: 10px; }
    #lumCaseSec .lum-case-map-note {
      margin: 0;
      max-width: 62ch;
      font-size: 15px;
      line-height: var(--lh-prose);
      color: var(--lum-sub);
    }
    #lumCaseSec .lum-case-map-address {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin: 10px 0 0;
      font-size: 15px;
      line-height: 1.5;
      color: var(--lum-ink);
    }
    #lumCaseSec .lum-case-map-address i { margin-top: 3px; color: var(--lum-gold); flex-shrink: 0; }

    #lumCaseSec .lum-case-map-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      padding: 13px 24px;
      border-radius: 999px;
      background: var(--lum-gold);
      color: #fff;
      font-size: 14.5px;
      font-weight: var(--fw-semibold);
      line-height: 1;
      text-decoration: none;
      transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
    }
    #lumCaseSec .lum-case-map-btn:hover {
      background: var(--lum-gold-dark);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(4,39,47,.18);
    }
    #lumCaseSec .lum-case-map-btn:focus-visible { outline: 2px solid var(--lum-gold-dark); outline-offset: 3px; }

    #lumCaseSec .lum-case-map-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    /* Secondary action: the map, not the reviews, is the point of this block. */
    #lumCaseSec .lum-case-map-btn.is-ghost {
      background: #fff;
      border: 1px solid var(--lum-divider);
      color: var(--lum-ink);
    }
    #lumCaseSec .lum-case-map-btn.is-ghost:hover {
      background: #fff;
      border-color: var(--lum-gold);
      color: var(--lum-gold-dark);
    }

    #lumCaseSec .lum-case-map-frame {
      position: relative;
      border-radius: var(--lum-radius);
      overflow: hidden;
      border: 1px solid var(--lum-divider);
      background: #F7EBE2;
      aspect-ratio: 20 / 7;
    }
    #lumCaseSec .lum-case-map-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    /* ---------------- CLOSING CALL TO ACTION ----------------
       Only where project_closing_heading is written. Closes the page above the
       shared footer; its button leads back to the sidebar enquiry form. */
    #lumCaseSec .lum-case-closing {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 24px 40px;
      margin-top: 64px;
      padding: 44px 48px;
      border-radius: var(--lum-radius);
      background: var(--lum-gold-dark);
      color: #fff;
    }
    #lumCaseSec .lum-case-closing-body { flex: 1 1 420px; min-width: 0; }
    #lumCaseSec .lum-case-closing-title {
      margin: 0 0 10px;
      font-family: var(--font-primary);
      font-weight: var(--fw-heading);
      font-size: var(--text-h2);
      line-height: 1.15;
      letter-spacing: var(--ls-h2);
      color: #fff;
    }
    #lumCaseSec .lum-case-closing-text {
      margin: 0;
      max-width: 62ch;
      font-size: 16px;
      line-height: var(--lh-prose);
      color: rgba(255,255,255,.8);
    }
    #lumCaseSec .lum-case-closing-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      padding: 15px 28px;
      border-radius: 999px;
      background: var(--lum-gold);
      color: #fff;
      font-size: 15px;
      font-weight: var(--fw-semibold);
      line-height: 1;
      text-decoration: none;
      transition: background .25s ease, color .25s ease, transform .25s ease;
    }
    #lumCaseSec .lum-case-closing-btn:hover {
      background: #fff;
      color: var(--lum-gold-dark);
      transform: translateY(-1px);
    }
    #lumCaseSec .lum-case-closing-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

    @media (max-width: 640px) {
      #lumCaseSec .lum-case-closing { margin-top: 44px; padding: 32px 24px; }
      #lumCaseSec .lum-case-closing-btn { flex: 1 1 100%; justify-content: center; }
    }

    @media (max-width: 780px) {
      #lumCaseSec .lum-case-map-frame { aspect-ratio: 4 / 3; }
      #lumCaseSec .lum-case-map-actions { width: 100%; }
      #lumCaseSec .lum-case-map-btn { flex: 1 1 100%; justify-content: center; }
    }

    /* ---------------- RESPONSIVE ---------------- */
    @media (max-width: 640px) {
      #lumCaseSec { padding: 28px 16px 48px; }
      #lumCaseSec .lum-case-gallery { margin-bottom: 32px; }
      #lumCaseSec .lum-case-map { margin-top: 44px; padding-top: 36px; }
      #lumCaseSec .lum-case-block { margin-bottom: 40px; }
      #lumCaseSec .lum-case-stats { margin-bottom: 36px; }
      #lumCaseSec .lum-case-facilities,
      #lumCaseSec .lum-case-landmarks { grid-template-columns: 1fr; }
    }
  

    /* ---------------- PHOTO VIEWER ----------------
       The overlay the gallery opens into. single-lumoria_project.js arranges
       the template's bare overlay into three rows: a top bar (count, title,
       close), the stage (photo between the arrows) and a thumbnail strip.
       Shared by the building page and the unit-type page. */
    #lumCaseLightbox {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      flex-direction: column;
      background: rgba(3, 22, 27, .96);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      color: #fff;
    }
    #lumCaseLightbox.is-open { display: flex; animation: lumCaseViewerIn .2s ease-out; }
    @keyframes lumCaseViewerIn { from { opacity: 0; } to { opacity: 1; } }

    /* Top bar */
    #lumCaseLightbox .lum-case-lightbox-bar {
      display: flex;
      align-items: center;
      gap: 16px;
      flex: none;
      padding: 14px 20px;
    }
    #lumCaseLightbox .lum-case-lightbox-counter {
      min-width: 64px;
      color: rgba(255, 255, 255, .9);
      font-size: 14px;
      font-weight: var(--fw-semibold);
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em;
    }
    #lumCaseLightbox .lum-case-lightbox-title {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      color: rgba(255, 255, 255, .6);
      font-size: 14px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Round controls: close in the bar, arrows on the stage. */
    #lumCaseLightboxClose,
    #lumCaseLightbox .lum-case-lightbox-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 50%;
      background: rgba(255, 255, 255, .06);
      color: #fff;
      cursor: pointer;
      transition: background-color .2s ease, border-color .2s ease;
    }
    #lumCaseLightboxClose:hover,
    #lumCaseLightbox .lum-case-lightbox-nav:hover {
      background: rgba(255, 255, 255, .16);
      border-color: rgba(255, 255, 255, .34);
    }
    #lumCaseLightboxClose:focus-visible,
    #lumCaseLightbox .lum-case-lightbox-nav:focus-visible {
      outline: 2px solid rgba(255, 255, 255, .6);
      outline-offset: 2px;
    }
    #lumCaseLightboxClose { width: 40px; height: 40px; }
    #lumCaseLightbox .lum-case-lightbox-nav[hidden] { display: none; }

    /* Stage */
    #lumCaseLightbox .lum-case-lightbox-stage {
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      min-height: 0;
      padding: 4px 88px;
    }
    /* The photo itself. Addressed by id rather than "#lumCaseLightbox img",
       which would also size every thumbnail in the strip below. */
    #lumCaseLightboxImg {
      display: block;
      max-width: 100%;
      max-height: 100%;
      border-radius: 6px;
      object-fit: contain;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
      transition: opacity .25s ease;
      user-select: none;
      -webkit-user-drag: none;
    }
    #lumCaseLightboxImg.is-loading { opacity: 0; }

    #lumCaseLightbox .lum-case-lightbox-nav {
      position: absolute;
      top: 50%;
      width: 48px;
      height: 48px;
      transform: translateY(-50%);
    }
    #lumCaseLightboxPrev { inset-inline-start: 20px; }
    #lumCaseLightboxNext { inset-inline-end: 20px; }
    /* One chevron drawn pointing back; flipped for "next", and the pair swaps
       on an Arabic page so each still points the way it moves. */
    #lumCaseLightboxNext svg { transform: scaleX(-1); }
    [dir="rtl"] #lumCaseLightboxPrev svg { transform: scaleX(-1); }
    [dir="rtl"] #lumCaseLightboxNext svg { transform: none; }

    /* Thumbnail strip */
    #lumCaseLightbox .lum-case-lightbox-thumbs {
      display: flex;
      flex: none;
      gap: 8px;
      align-self: center;
      max-width: 100%;
      padding: 14px 20px 18px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .25) transparent;
    }
    #lumCaseLightbox .lum-case-lightbox-thumb {
      flex: none;
      width: 72px;
      height: 52px;
      padding: 0;
      border: 0;
      border-radius: 6px;
      overflow: hidden;
      background: rgba(255, 255, 255, .06);
      opacity: .45;
      cursor: pointer;
      transition: opacity .2s ease, box-shadow .2s ease;
    }
    #lumCaseLightbox .lum-case-lightbox-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #lumCaseLightbox .lum-case-lightbox-thumb:hover { opacity: .8; }
    #lumCaseLightbox .lum-case-lightbox-thumb.is-active {
      opacity: 1;
      box-shadow: 0 0 0 2px #fff;
    }
    #lumCaseLightbox .lum-case-lightbox-thumb:focus-visible {
      outline: 2px solid #44BDA1;
      outline-offset: 2px;
    }

    @media (max-width: 640px) {
      #lumCaseLightbox .lum-case-lightbox-bar { padding: 10px 12px; }
      #lumCaseLightbox .lum-case-lightbox-stage { padding: 0 12px; }
      /* On a phone the arrows sit over the photo's edges, darkened so they
         read on a light picture; swiping works too. */
      #lumCaseLightbox .lum-case-lightbox-nav {
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, .35);
        border-color: rgba(255, 255, 255, .2);
      }
      #lumCaseLightboxPrev { inset-inline-start: 16px; }
      #lumCaseLightboxNext { inset-inline-end: 16px; }
      #lumCaseLightbox .lum-case-lightbox-thumbs { padding: 12px 12px 14px; }
      #lumCaseLightbox .lum-case-lightbox-thumb { width: 56px; height: 42px; }
    }
    @media (max-width: 420px) {
      #lumCaseLightbox .lum-case-lightbox-title { visibility: hidden; }
    }
    @media (prefers-reduced-motion: reduce) {
      #lumCaseLightbox.is-open { animation: none; }
      #lumCaseLightboxImg,
      #lumCaseLightbox .lum-case-lightbox-thumb,
      #lumCaseLightboxClose,
      #lumCaseLightbox .lum-case-lightbox-nav { transition: none; }
    }
  

    /* ---------- Video tour ----------
       Building and unit-type videos (lumoria_render_video_block() in
       inc/unit-photos.php). An uploaded file plays in the browser's own player;
       a YouTube video is a link showing the page's own picture until it is
       clicked, when single-lumoria_project.js swaps in the player. */
    #lumCaseSec .lum-video-list { display: grid; gap: 18px; }
    #lumCaseSec .lum-video-list.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #lumCaseSec .lum-video {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: var(--lum-radius);
      overflow: hidden;
      background: var(--lum-ink);
    }
    #lumCaseSec .lum-video video,
    #lumCaseSec .lum-video iframe,
    #lumCaseSec .lum-video-yt,
    #lumCaseSec .lum-video-yt img {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
    }
    #lumCaseSec .lum-video video { object-fit: contain; background: #000; }
    #lumCaseSec .lum-video-yt { position: relative; color: #fff; }
    #lumCaseSec .lum-video-yt img { object-fit: cover; transition: transform .4s ease, filter .4s ease; }
    #lumCaseSec .lum-video-yt::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .28);
    }
    #lumCaseSec .lum-video-play {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: var(--lum-gold);
      color: #fff;
      font-size: 24px;
      transform: translate(-50%, -50%);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
      transition: transform .25s ease;
    }
    /* The triangle's visual centre sits left of its box. Physical on purpose:
       a play symbol points right in every language, so it is never mirrored
       (see DIRECTIONAL ICONS in rtl.css) and neither is its nudge. */
    #lumCaseSec .lum-video-play i { margin-left: 4px; }
    #lumCaseSec .lum-video-yt:hover img { transform: scale(1.03); }
    #lumCaseSec .lum-video-yt:hover .lum-video-play,
    #lumCaseSec .lum-video-yt:focus-visible .lum-video-play { transform: translate(-50%, -50%) scale(1.08); }
    #lumCaseSec .lum-video-yt:focus-visible { outline: 3px solid var(--lum-gold); outline-offset: -3px; }
    @media (max-width: 767px) {
      #lumCaseSec .lum-video-list.is-count-2 { grid-template-columns: 1fr; }
      #lumCaseSec .lum-video-play { width: 60px; height: 60px; font-size: 20px; }
    }
    @media (prefers-reduced-motion: reduce) {
      #lumCaseSec .lum-video-yt img,
      #lumCaseSec .lum-video-play { transition: none; }
    }