:root {
  --as-bg: #f7f5f2;
  --as-panel: #fff;
  --as-text: #17191d;
  --as-muted: #666b73;
  --as-accent: #c97d68;
  --as-line: #dedbd6;
  --as-shadow: 0 18px 45px rgba(21, 24, 29, .08);
  --as-thumb-gap: 10px;
  --as-visible-thumbs: 5;
}
.application-showcase { container-type: inline-size; width:100%; color:var(--as-text); background:var(--as-bg); font-family:inherit; box-sizing:border-box; }
.application-showcase *, .application-showcase *::before, .application-showcase *::after { box-sizing:border-box; }
.application-showcase__inner { max-width:1440px; margin:0 auto; padding:clamp(32px,5vw,76px) clamp(18px,4vw,64px); }
.application-showcase__eyebrow { margin:0 0 10px; color:var(--as-accent); font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; }
.application-showcase__heading { margin:0; font-size:clamp(30px,4vw,52px); line-height:1.08; font-weight:450; letter-spacing:-.035em; }
.application-showcase__intro { max-width:780px; margin:14px 0 34px; color:var(--as-muted); font-size:clamp(15px,1.4vw,18px); line-height:1.65; }
.application-showcase__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:clamp(28px,4vw,64px); align-items:start; }
.application-showcase__media { min-width:0; }
.application-showcase__stage { position:relative; overflow:hidden; aspect-ratio:16/9; background:#e9e6e1; box-shadow:var(--as-shadow); }
.application-showcase__main-image { width:100%; height:100%; display:block; object-fit:cover; opacity:1; transform:scale(1); transition:opacity .32s ease,transform .65s ease; }
.application-showcase__main-image.is-changing { opacity:.18; transform:scale(1.012); }
.application-showcase__stage-nav { position:absolute; top:50%; z-index:3; width:46px; height:58px; border:0; transform:translateY(-50%); color:#fff; background:rgba(13,15,18,.42); font-size:39px; line-height:1; cursor:pointer; opacity:.82; transition:background .2s ease,opacity .2s ease; }
.application-showcase__stage-nav:hover,.application-showcase__stage-nav:focus-visible { background:rgba(13,15,18,.72); opacity:1; outline:2px solid rgba(255,255,255,.85); outline-offset:-4px; }
.application-showcase__stage-nav--prev { left:0; }
.application-showcase__stage-nav--next { right:0; }
.application-showcase__caption { position:absolute; right:0; bottom:0; left:0; display:flex; align-items:end; justify-content:space-between; gap:16px; min-height:88px; padding:30px 22px 16px; color:#fff; background:linear-gradient(to top,rgba(0,0,0,.72),transparent); pointer-events:none; }
.application-showcase__caption-title { font-size:clamp(16px,1.8vw,22px); font-weight:650; }
.application-showcase__counter { flex:none; font-size:12px; letter-spacing:.14em; }
.application-showcase__thumb-rail { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr) 34px; gap:8px; align-items:center; margin-top:12px; }
.application-showcase__thumb-viewport { min-width:0; overflow:hidden; }
.application-showcase__thumbs { display:flex; gap:var(--as-thumb-gap); transition:transform .32s ease; will-change:transform; }
.application-showcase__thumb { flex:0 0 calc((100% - (var(--as-visible-thumbs) - 1) * var(--as-thumb-gap)) / var(--as-visible-thumbs)); position:relative; border:1px solid transparent; padding:0; aspect-ratio:16/9; overflow:hidden; cursor:pointer; background:#ddd; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.application-showcase__thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.application-showcase__thumb::after { content:""; position:absolute; inset:0; background:rgba(14,16,19,.18); transition:background .2s ease; }
.application-showcase__thumb:hover,.application-showcase__thumb:focus-visible { z-index:1; transform:translateY(-2px); outline:none; border-color:var(--as-accent); box-shadow:0 8px 20px rgba(19,21,25,.16); }
.application-showcase__thumb:hover::after,.application-showcase__thumb:focus-visible::after,.application-showcase__thumb[aria-current="true"]::after { background:transparent; }
.application-showcase__thumb[aria-current="true"] { border-color:var(--as-accent); box-shadow:inset 0 0 0 1px var(--as-accent); }
.application-showcase__rail-nav { width:34px; height:48px; border:1px solid var(--as-line); color:var(--as-text); background:var(--as-panel); font-size:27px; line-height:1; cursor:pointer; }
.application-showcase__rail-nav:hover,.application-showcase__rail-nav:focus-visible { border-color:var(--as-accent); color:var(--as-accent); outline:none; }
.application-showcase__rail-nav:disabled { opacity:.28; cursor:default; }
.application-showcase__progress { height:2px; margin-top:12px; overflow:hidden; background:var(--as-line); }
.application-showcase__progress-bar { width:0; height:100%; background:var(--as-accent); }
.application-showcase__progress-bar.is-running { animation:applicationShowcaseProgress var(--as-interval,5000ms) linear forwards; }
@keyframes applicationShowcaseProgress { from{width:0} to{width:100%} }
.application-showcase__lists { display:grid; gap:24px; }
.application-showcase__list-panel { padding:clamp(20px,2.4vw,30px); background:var(--as-panel); }
.application-showcase__list-title { position:relative; display:flex; align-items:center; gap:10px; margin:0 0 20px; padding-bottom:13px; font-size:17px; font-weight:700; }
.application-showcase__list-title::after { content:""; position:absolute; bottom:0; left:0; width:64px; height:2px; background:var(--as-accent); }
.application-showcase__icon { width:23px; height:23px; flex:none; stroke:var(--as-accent); fill:none; stroke-width:1.7; }
.application-showcase__list { margin:0; padding:0; list-style:none; display:grid; gap:10px 22px; }
.application-showcase__list--commercial { grid-template-columns:repeat(2,minmax(0,1fr)); }
.application-showcase__list li { position:relative; padding-left:15px; color:#353940; font-size:14px; line-height:1.5; }
.application-showcase__list li::before { content:""; position:absolute; top:.62em; left:0; width:4px; height:4px; border-radius:50%; background:var(--as-accent); }
.application-showcase__status { margin-top:12px; color:var(--as-muted); font-size:12px; line-height:1.45; }
.application-showcase__error { padding:24px; border:1px dashed #b96d5a; color:#784437; background:#fff7f4; line-height:1.55; }
@container (max-width:900px) { .application-showcase__grid{grid-template-columns:1fr}.application-showcase__lists{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (max-width:620px) { .application-showcase__inner{padding-inline:16px}.application-showcase__thumb-rail{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}.application-showcase{--as-visible-thumbs:3}.application-showcase__lists{grid-template-columns:1fr}.application-showcase__list--commercial{grid-template-columns:1fr 1fr}.application-showcase__stage-nav{width:38px;height:50px;font-size:34px} }
@media (prefers-reduced-motion:reduce) { .application-showcase__main-image,.application-showcase__thumbs,.application-showcase__thumb{transition:none}.application-showcase__progress-bar{animation:none!important} }

/* V1.2: full-width application-panel rule at the bottom, matching the approved layout. */
.application-showcase__list-panel {
  position: relative;
  padding-bottom: clamp(28px, 3vw, 38px);
}
.application-showcase__list-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--as-accent);
}
.application-showcase__list-title {
  padding-bottom: 0;
}
.application-showcase__list-title::after {
  display: none;
}

/* V1.3: compact application lists so the right column aligns with the media area. */
@container (min-width: 901px) {
  .application-showcase__grid {
    align-items: start;
  }

  .application-showcase__lists {
    gap: 14px;
  }

  .application-showcase__list-panel {
    padding: 18px 22px 22px;
  }

  .application-showcase__list-title {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.25;
  }

  .application-showcase__list {
    gap: 6px 20px;
  }

  .application-showcase__list li {
    font-size: 13.5px;
    line-height: 1.34;
  }

  .application-showcase__list-panel::after {
    height: 1px;
  }
}

/* Preserve comfortable spacing after the two-column layout collapses. */
@container (max-width: 900px) {
  .application-showcase__list-panel {
    padding: 22px 24px 28px;
  }
}


/* ================================================================
   V2.0 — equal-height reusable grid
   The media column defines the desktop module height. The two list
   cards share that height without changing the 16:9 image geometry.
   ================================================================ */
.application-showcase__intro {
  margin-bottom: 22px;
}
.application-showcase__intro::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 22px;
  background: var(--as-accent);
}

@container (min-width: 901px) {
  .application-showcase__grid {
    grid-template-columns: minmax(0, 1.56fr) minmax(370px, 1fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: stretch;
  }

  .application-showcase__media {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  /* Never distort the source image. The stage remains exactly 16:9. */
  .application-showcase__stage {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .application-showcase__main-image,
  .application-showcase__thumb img {
    object-fit: cover;
  }

  .application-showcase__thumb-rail {
    flex: 0 0 auto;
  }

  .application-showcase__progress {
    flex: 0 0 auto;
    margin-top: 10px;
  }

  .application-showcase__lists {
    display: grid;
    grid-template-rows: minmax(0, .42fr) minmax(0, .58fr);
    gap: 12px;
    min-height: 0;
    height: 100%;
  }

  .application-showcase__list-panel {
    display: flex;
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 20px 20px;
    overflow: hidden;
  }

  .application-showcase__list-title {
    flex: 0 0 auto;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .application-showcase__icon {
    width: 20px;
    height: 20px;
  }

  .application-showcase__list {
    align-content: start;
    gap: 5px 18px;
  }

  .application-showcase__list li {
    font-size: 12.75px;
    line-height: 1.28;
  }
}

/* At intermediate widths, preserve image proportions and let the lists flow. */
@container (min-width: 901px) and (max-width: 1120px) {
  .application-showcase__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr);
  }
  .application-showcase__list-panel {
    padding-inline: 16px;
  }
  .application-showcase__list li {
    font-size: 12px;
  }
}


/* ================================================================
   V2.1 — approved horizontal alignment refinements
   ================================================================ */
.application-showcase__intro {
  max-width: none;
}
.application-showcase__intro::after {
  width: 100%;
  background: var(--as-line);
}

@container (min-width: 901px) {
  .application-showcase__grid {
    align-items: stretch;
  }

  .application-showcase__lists {
    grid-template-rows: minmax(0, .43fr) minmax(0, .57fr);
  }

  .application-showcase__list-panel {
    justify-content: flex-start;
    padding: 16px 20px 16px;
  }

  .application-showcase__list-title {
    margin-bottom: 10px;
  }

  /* Seven residential rows fill the upper panel without artificial spacing. */
  .application-showcase__list:not(.application-showcase__list--commercial) {
    gap: 6px;
  }

  /* Twelve commercial/public rows render as two balanced six-row columns. */
  .application-showcase__list--commercial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    column-gap: 24px;
    row-gap: 8px;
  }

  .application-showcase__list li {
    line-height: 1.32;
  }

  .application-showcase__list-panel::after {
    height: 1px;
  }
}

@container (max-width: 900px) {
  .application-showcase__list--commercial {
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

/* ================================================================
   V2.2 — category filters and application-item deep links
   ================================================================ */
.application-showcase__lists { position: relative; }
.application-showcase__filter-tools {
  position: absolute;
  top: -26px;
  right: 0;
  z-index: 2;
}
.application-showcase__reset,
.application-showcase__category-link,
.application-showcase__list [data-as-application-item] {
  font: inherit;
}
.application-showcase__reset {
  border: 0;
  padding: 2px 0;
  color: var(--as-muted);
  background: transparent;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.application-showcase__reset:hover,
.application-showcase__reset:focus-visible,
.application-showcase__reset.is-active {
  color: var(--as-accent);
  outline: none;
}
.application-showcase__category-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}
.application-showcase__category-link:hover,
.application-showcase__category-link:focus-visible,
.application-showcase__category-link.is-active {
  color: var(--as-accent);
  outline: none;
}
.application-showcase__category-link .application-showcase__icon { transition: transform .2s ease; }
.application-showcase__category-link:hover .application-showcase__icon,
.application-showcase__category-link:focus-visible .application-showcase__icon { transform: translateX(2px); }
.application-showcase__list [data-as-application-item] {
  display: inline;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.application-showcase__list [data-as-application-item]:hover,
.application-showcase__list [data-as-application-item]:focus-visible {
  color: var(--as-accent);
  text-decoration-color: currentColor;
  outline: none;
}
.application-showcase[data-active-application-filter="rd"] [data-as-panel="cp"],
.application-showcase[data-active-application-filter="cp"] [data-as-panel="rd"] {
  opacity: .64;
}
@container (max-width: 900px) {
  .application-showcase__filter-tools { position: static; text-align: right; margin-bottom: 8px; }
}


/* V10.5 FINAL QA — tighter section rhythm and balanced occupancy. */
.application-showcase__inner{
  padding:clamp(38px,4vw,56px) clamp(18px,4vw,64px) clamp(34px,3.6vw,50px);
}
.application-showcase__intro{margin-top:12px;margin-bottom:18px;line-height:1.58}
.application-showcase__intro::after{margin-top:18px}
@container (min-width:901px){
  .application-showcase__grid{gap:clamp(26px,3vw,42px)}
  .application-showcase__lists{gap:10px}
}
@container (max-width:900px){
  .application-showcase__inner{padding-top:38px;padding-bottom:38px}
}


/* V10.6.5 — application module refinement */
.application-showcase__inner{
  padding:34px clamp(18px,4vw,64px) 32px;
}
.application-showcase__intro{
  margin-top:8px;
  margin-bottom:14px;
}
.application-showcase__intro::after{
  margin-top:14px;
}
.application-showcase__filter-tools{
  top:-25px;
}
.application-showcase__reset{
  padding:2px 0 2px 8px;
  color:#9a9a9a;
  background:var(--as-bg);
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:none;
}
.application-showcase__reset:hover,
.application-showcase__reset:focus-visible,
.application-showcase__reset.is-active{
  color:#777;
}
.application-showcase__list-panel::after{
  height:1px;
  opacity:.6;
}
.application-showcase__caption-title{
  font-size:16px;
  font-weight:600;
}
@container (max-width:900px){
  .application-showcase__inner{
    padding-top:32px;
    padding-bottom:30px;
  }
  .application-showcase__filter-tools{
    position:static;
    margin-bottom:8px;
  }
}


/* V10.6.6 — final application module refinement */

/* Match the same page width used by the modules above. */
.application-showcase__inner{
  width:min(var(--max), calc(100% - 48px));
  max-width:none;
  margin-inline:auto;
  padding-left:0;
  padding-right:0;
}

/* Increase the visual area and reduce the text column. */
.application-showcase__grid{
  grid-template-columns:minmax(0, 1.85fr) minmax(330px, .95fr);
  gap:28px;
  align-items:start;
}

/* Keep the application utility label away from the divider line. */
.application-showcase__filter-tools{
  top:-30px;
  right:10px;
}
.application-showcase__reset{
  display:inline-block;
  margin-right:4px;
  padding:2px 4px 3px 10px;
  background:var(--as-bg);
  line-height:1.2;
}

/* Prevent unnecessary equal-height stretching. */
.application-showcase__media,
.application-showcase__lists,
.application-showcase__list-panel{
  min-height:0;
  align-self:start;
}

@container (max-width:900px){
  .application-showcase__inner{
    width:min(100% - 32px, var(--max));
  }
  .application-showcase__grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .application-showcase__filter-tools{
    position:static;
    margin:0 0 8px auto;
  }
}