/* ==========================================================================
   /rebranding-malta/ - additions on top of the shared campaign styles.

   Load order: uploads/tender-campaign/style.css (design system) -> uploads/website-campaign/
   websites.css (.e54-web: checklists, splits, reels, price card, thank-you blocks) -> this file.
   The wrapper is .e54-tender.e54-web.e54-rb, and every rule here is scoped .e54-rb, so nothing in
   this file can reach /tenders or /website-design-malta.
   ========================================================================== */

/* ---------------------------------------------------------------- hero */
.e54-rb .hero__text--strong { color: var(--white); font-weight: 600; }
.e54-rb .hero__ctas { margin-top: 28px; }
.e54-rb .hero__showcase { display: flex; justify-content: center; }
.e54-rb .showcase {
  width: min(340px, 100%);
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #111;
}
@media (max-width: 979px) {
  .e54-rb .showcase { width: min(260px, 70%); }
}

/* ---------------------------------------------------------------- shared bits */
/* websites.css gives .split--reel a bottom margin because cards follow it there; here it is the
   whole section. */
.e54-rb .split--reel { margin-bottom: 0; }
.e54-rb .cta-row { text-align: center; margin: clamp(30px, 4vw, 44px) 0 0; }
.e54-rb .checklist--signs { gap: 12px; margin: 22px 0 6px; }
.e54-rb .checklist--signs li { font-size: 16px; }
.e54-rb .closer.hl, .e54-rb .closer .hl { color: var(--accent); }

/* ---------------------------------------------------------------- what's included */
.e54-rb .deliverable {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  background: rgba(255, 255, 255, 0.03);
}
.e54-rb .deliverable__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 14px;
}
.e54-rb .deliverable p { font-size: 15.5px; color: rgba(255, 255, 255, 0.68); }
.e54-rb .related {
  text-align: center;
  margin-top: 18px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.6);
}
.e54-rb .related a { color: var(--white); font-weight: 700; margin: 0 8px; text-decoration: none; border-bottom: 2px solid var(--accent); white-space: nowrap; }
.e54-rb .related a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- why rebrand (5 cards) */
.e54-rb .benefits { grid-template-columns: 1fr; }
@media (min-width: 640px) { .e54-rb .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .e54-rb .benefits { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .e54-rb .benefits .card { padding: 24px 20px; } }

/* ---------------------------------------------------------------- work */
.e54-rb .workgrid { display: grid; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 700px) { .e54-rb .workgrid { grid-template-columns: repeat(2, 1fr); } }
.e54-rb .worktile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 1080 / 700;
  text-decoration: none;
  background: #111;
}
.e54-rb .worktile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.e54-rb .worktile:hover img { transform: scale(1.04); }
.e54-rb .worktile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.e54-rb .worktile__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 20px 16px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
}
.e54-rb .worktile__cap strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--white);
}

/* ---------------------------------------------------------------- price card */
.e54-rb .pricecard__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.e54-rb .pricecard__ctas .btn { margin-top: 0; }
.e54-rb .pricecard__alt { margin-top: 20px; font-size: 15px; }
.e54-rb .pricecard__alt a { color: var(--white); font-weight: 700; }

/* ---------------------------------------------------------------- closing */
.e54-rb .closing__punch {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 22px) !important;
  color: var(--white) !important;
  margin-top: 8px;
}