.project-grid { display: grid; gap: 28px; }
.project-card { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(320px, 1.05fr); overflow: hidden; border: 1px solid #e0e7f0; border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgba(7, 26, 58, .08); }
.project-visual { min-height: 340px; position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #071a3a, #143b75); }
.project-visual::before { content: ''; width: 300px; height: 300px; position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025); }
.project-visual.gold { background: linear-gradient(145deg, #8a6114, #d4a33c); }
.project-visual.light { background: linear-gradient(145deg, #dfe8f4, #f8fafc); }
.project-visual > span { position: absolute; top: 22px; left: 24px; color: rgba(255,255,255,.7); font: 800 2rem/1 Manrope, sans-serif; }
.project-visual.light > span { color: #17345f; }
.project-browser { width: min(78%, 360px); min-height: 205px; position: relative; z-index: 1; padding: 18px; border: 7px solid rgba(255,255,255,.88); border-radius: 14px; background: #f7f9fc; box-shadow: 0 24px 45px rgba(0,0,0,.25); transform: perspective(800px) rotateY(-7deg) rotateX(2deg); }
.project-browser i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #d5a63f; }
.project-browser strong { display: grid; place-items: center; min-height: 145px; margin-top: 12px; border-radius: 8px; color: #16345f; background: linear-gradient(135deg, #e8eef7, #fff); font-size: 1rem; }
.project-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 58px); }
.project-copy small { color: #a87517; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-copy h2 { margin: 12px 0; color: #071a3a; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.project-copy p { margin: 0 0 22px; color: #5c6a80; line-height: 1.75; }
.project-copy a { color: #0b4384; font-weight: 800; }
@media (max-width: 800px) { .project-card { grid-template-columns: 1fr; } .project-visual { min-height: 280px; } }

/* Dynamic TSA Modern project detail */
.modern-project-hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:70px;align-items:end}.modern-project-hero .kicker{margin-bottom:22px}.modern-project-facts{display:grid;gap:1px;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.06);backdrop-filter:blur(12px)}.modern-project-facts div{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.12)}.modern-project-facts div:last-child{border:0}.modern-project-facts dt{color:#d7ad55;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.modern-project-facts dd{margin:6px 0 0;color:#fff;font:700 .95rem/1.45 Manrope,sans-serif}.modern-project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.modern-project-gallery:has(.modern-project-screen:only-child){grid-template-columns:1fr}.modern-project-screen{position:relative;overflow:hidden;margin:0;border:1px solid #dce5ef;border-radius:22px;background:#fff;box-shadow:0 22px 55px rgba(7,26,58,.1)}.modern-project-screen img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.modern-project-screen figcaption{padding:13px 17px;color:#68778c;font-size:.75rem;font-weight:700}.modern-project-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.55fr);gap:70px;align-items:start}.modern-project-content{min-width:0}.modern-project-content>h2{margin:16px 0 20px;color:#071a3a;font:700 clamp(2rem,4vw,3rem)/1.1 Manrope,sans-serif;letter-spacing:-.045em}.modern-project-lead{padding-bottom:24px;border-bottom:1px solid #dbe3ec;color:#52647a!important;font-size:1.05rem!important}.modern-project-content h2{margin:38px 0 13px;color:#0a2853;font:700 clamp(1.45rem,2.5vw,2rem)/1.2 Manrope,sans-serif}.modern-project-content h3{margin:30px 0 12px;color:#0a2853;font:700 1.2rem Manrope,sans-serif}.modern-project-content p,.modern-project-content li{color:#5c6c80;font-size:.96rem;line-height:1.85}.modern-project-content a{color:#0b4e92;font-weight:700}.modern-project-content ul,.modern-project-content ol{padding-left:22px}.modern-project-aside{position:sticky;top:145px}.modern-project-aside .content-card{padding:28px}.modern-project-features{display:grid;gap:10px;margin-bottom:24px}.modern-project-feature{display:flex;align-items:center;gap:11px;padding:12px;border-bottom:1px solid rgba(255,255,255,.12)}.modern-project-feature span{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:10px;background:rgba(215,173,85,.14);color:#e5bc67}.modern-project-feature b{color:#dbe4f1;font-size:.78rem;line-height:1.4}.modern-project-aside .button{width:100%;justify-content:center;box-sizing:border-box}
@media(max-width:980px){.modern-project-hero-grid,.modern-project-layout{grid-template-columns:1fr;gap:36px}.modern-project-facts{grid-template-columns:repeat(3,1fr)}.modern-project-facts div{border-right:1px solid rgba(255,255,255,.12);border-bottom:0}.modern-project-aside{position:static}}
@media(max-width:720px){.modern-project-gallery,.modern-project-facts{grid-template-columns:1fr}.modern-project-facts div{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.modern-project-detail .detail-hero{padding:78px 0 65px}.modern-project-detail .detail-hero h1{font-size:clamp(2.35rem,12vw,3.5rem);letter-spacing:-.055em}.modern-project-detail .detail-section{padding:68px 0}.modern-project-layout{gap:32px}.modern-project-screen{border-radius:15px}}

/* Compact screen showcase shared by every dynamic project detail page. */
.modern-project-showcase {
  padding-block: clamp(58px, 7vw, 88px);
}

/* Project scope uses visible, semantic cards instead of a plain text list. */
.modern-project-scope-title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 20px !important;
}

.modern-project-scope-title > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  border-radius: 13px;
  color: #071a3a;
  background: linear-gradient(145deg, #efc665, #c79331);
  font-size: 18px;
}

.modern-project-feature {
  gap: 12px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}

.modern-project-feature span {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 11px;
  color: #071a3a;
  background: #e2b957;
  font-size: 16px;
}

.modern-project-feature b {
  color: #eef4fb;
  font-size: .8rem;
  line-height: 1.45;
}

.modern-project-showcase .detail-heading {
  max-width: 760px;
  margin-bottom: 30px;
}

.modern-project-gallery {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.modern-project-screen-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 340px;
  background: linear-gradient(145deg, #edf2f8, #fff);
}

.modern-project-screen-frame img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: top center;
}

.modern-project-screen figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  box-sizing: border-box;
}

.modern-project-screen figcaption span {
  color: #9b6f19;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.modern-project-screen figcaption b {
  color: #17345f;
  font: 700 .8rem/1.35 Manrope, sans-serif;
  text-align: right;
}

@media (max-width: 720px) {
  .modern-project-showcase {
    padding-block: 54px !important;
  }

  .modern-project-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 420px);
    grid-template-columns: none;
    justify-content: start;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 7.5vw 18px 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }

  .modern-project-gallery:has(.modern-project-screen:only-child) {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    padding-right: 0;
    overflow: hidden;
  }

  .modern-project-screen {
    scroll-snap-align: start;
  }

  .modern-project-screen-frame {
    max-height: 250px;
  }

  .modern-project-screen figcaption {
    min-height: 58px;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .modern-project-screen figcaption b {
    text-align: left;
  }
}