:root {
  --navy: #031d2b;
  --deep-navy: #01131c;
  --orange: #f36b16;
  --gold: #f0b84d;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--navy);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

.holding-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 76% 18%, rgba(26, 78, 94, .55) 0%, rgba(8, 47, 64, .35) 30%, transparent 54%),
    linear-gradient(180deg, #062736 0%, #031d2b 58%, #01131c 100%);
}

.banner-stage {
  position: relative;
  width: min(100vw, 1664px);
  margin: 0 auto;
  line-height: 0;
}

.banner {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/*
  The approved artwork contains a decorative sample countdown.
  This live HTML layer sits directly over those sample boxes, fully
  covering them so the only visible countdown is the real one below.
*/
.countdown-overlay {
  position: absolute;
  left: 27.55%;
  top: 53.65%;
  width: 44.25%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.05%;
  line-height: 1;
}

.time-box {
  min-width: 0;
  aspect-ratio: 1.28 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #071e2c 0%, #03141f 100%);
  border: clamp(1px, .13vw, 2px) solid rgba(243, 107, 22, .96);
  border-radius: clamp(7px, .78vw, 14px);
  box-shadow:
    0 0 clamp(8px, 1.15vw, 20px) rgba(243, 107, 22, .42),
    inset 0 0 clamp(6px, .8vw, 14px) rgba(255,255,255,.025);
}

.time-box strong {
  display: block;
  color: #fff;
  font-size: clamp(1rem, 3.1vw, 3.25rem);
  font-weight: 900;
  letter-spacing: .015em;
  line-height: .95;
  text-shadow: 0 2px 3px rgba(0,0,0,.35);
}

.time-box span {
  display: block;
  margin-top: clamp(3px, .5vw, 8px);
  color: #f6f7f8;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: clamp(.38rem, .88vw, .9rem);
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 700px) {
  .holding-page { align-items: start; }
  .banner-stage { width: 100vw; }
  .countdown-overlay { gap: .8%; }
  .time-box { border-radius: 5px; }
  .time-box strong { font-size: clamp(.72rem, 3.2vw, 1.4rem); }
  .time-box span { font-size: clamp(.28rem, 1.35vw, .55rem); letter-spacing: .05em; }
}