/* Shared preview chrome */
.prev-label{position:sticky;top:72px;z-index:5;background:#0057B7;color:#fff;padding:10px 32px;font:600 13px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.prev-note{max-width:1200px;margin:0 auto;padding:24px 32px 0;color:#5B6B7C;font:14px Inter,sans-serif}
.prev-note b{color:#0B1F33}

/* ===== A: Classic doorway arches ===== */
.cards-arch{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:end}
.cards-arch .card{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.cards-arch .card:hover{transform:translateY(-6px);box-shadow:none;border-color:transparent}
.cards-arch .card .im.logo{
  aspect-ratio:1/1.05;
  border-radius:999px 999px 0 0;
  background:#fff;
  border:1px solid #D5DEE8;
  border-bottom:3px solid var(--c);
  box-shadow:0 12px 32px rgba(11,31,51,.08);
  padding:28px 22px 24px;
  display:grid;place-items:center;
}
.cards-arch .card:hover .im.logo{box-shadow:0 18px 40px rgba(0,87,183,.14);border-color:#b9c9db}
.cards-arch .card .im.logo img{max-width:94%;max-height:148px}
.cards-arch .card .bd{
  background:#fff;
  border:1px solid #D5DEE8;
  border-top:0;
  border-radius:0 0 10px 10px;
  margin-top:0;
  box-shadow:0 10px 28px rgba(11,31,51,.06);
  padding:22px 20px 24px;
}
.cards-arch .card .bd{border-top:0}

/* ===== B: Soft portal niches (inset arch inside flat card) ===== */
.cards-portal{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cards-portal .card{border-radius:12px;overflow:hidden;border:1px solid #D5DEE8;background:#fff;box-shadow:0 6px 20px rgba(11,31,51,.05)}
.cards-portal .card .im.logo{
  aspect-ratio:1/1;
  margin:18px 18px 0;
  border-radius:999px 999px 14px 14px;
  background:linear-gradient(180deg,#F3F6FA 0%,#E8EEF5 100%);
  border:1px solid #D5DEE8;
  box-shadow:inset 0 8px 24px rgba(11,31,51,.06);
  padding:32px;
}
.cards-portal .card .bd{border-top:3px solid var(--c);padding:20px 20px 22px}

/* ===== C: Circular / oval logo frames ===== */
.cards-oval{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cards-oval .card{background:transparent;border:0;box-shadow:none;overflow:visible;text-align:center}
.cards-oval .card:hover{transform:translateY(-4px);box-shadow:none}
.cards-oval .card .im.logo{
  width:78%;
  margin:8px auto 0;
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  border:2px solid #D5DEE8;
  box-shadow:0 10px 30px rgba(11,31,51,.08);
  padding:28px;
  position:relative;
}
.cards-oval .card .im.logo:after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--c) 55%, #D5DEE8);
  pointer-events:none;
}
.cards-oval .card:hover .im.logo{border-color:#0057B7;box-shadow:0 14px 36px rgba(0,87,183,.16)}
.cards-oval .card .im.logo img{max-width:78%;max-height:90px}
.cards-oval .card .bd{
  background:#fff;border:1px solid #D5DEE8;border-radius:10px;
  margin-top:-36px;padding:48px 18px 22px;text-align:left;
  border-top:3px solid var(--c);box-shadow:0 8px 24px rgba(11,31,51,.05);
  position:relative;z-index:0;
}
.cards-oval .card .im.logo{z-index:1}

/* ===== D: Staggered asymmetric editorial ===== */
.cards-stagger{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.cards-stagger .card{border-radius:4px 4px 12px 12px;overflow:hidden;border:1px solid #D5DEE8;background:#fff;box-shadow:0 4px 16px rgba(11,31,51,.04)}
.cards-stagger .card:nth-child(1){margin-top:36px}
.cards-stagger .card:nth-child(2){margin-top:0}
.cards-stagger .card:nth-child(3){margin-top:48px}
.cards-stagger .card:nth-child(4){margin-top:12px}
.cards-stagger .card .im.logo{
  aspect-ratio:5/4;
  background:#F3F6FA;
  clip-path:polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  border-bottom:0;padding:36px 24px 24px;
}
.cards-stagger .card:nth-child(even) .im.logo{clip-path:polygon(0 0, 100% 14%, 100% 100%, 0 100%)}
.cards-stagger .card .bd{border-top:3px solid var(--c)}
.cards-stagger .card:nth-child(2) .im.logo,
.cards-stagger .card:nth-child(3) .im.logo{min-height:180px}

@media(max-width:1000px){
  .cards-arch,.cards-portal,.cards-oval,.cards-stagger{grid-template-columns:1fr 1fr}
  .cards-stagger .card{margin-top:0!important}
}
@media(max-width:820px){
  .cards-arch,.cards-portal,.cards-oval,.cards-stagger{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .cards-arch .card .im.logo{aspect-ratio:1/1}
  .cards-oval .card .im.logo{width:70%}
}