:root {
  --occ-navy: #071c4a;
  --occ-blue: #0d4fa8;
  --occ-gold: #ffc72c;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "DM Sans", sans-serif; }

.occ-graduation-poster {
  min-height: 100vh;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(3,15,46,.97), rgba(5,25,65,.89) 44%, rgba(5,27,68,.55)),
    url("assets/graduation-background.png") center / cover no-repeat;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
}

.occ-graduation-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(2,9,29,.75));
}

.occ-graduation-poster > .container { position: relative; z-index: 1; }
.occ-logo-wrap { width: 68px; height: 68px; border-radius: 50%; background: #fff; padding: 6px; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.occ-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.occ-tracking { letter-spacing: .12em; }
.occ-notice-badge { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); padding: 10px 16px; border-radius: 99px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.occ-poster-panel { margin-top: 2rem; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid rgba(255,255,255,.24); border-radius: 1.7rem; background: linear-gradient(118deg, rgba(4,20,55,.86), rgba(7,39,88,.58)); box-shadow: 0 30px 80px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.occ-kicker { color: #cfe5ff; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.occ-kicker span { display: inline-block; width: 30px; height: 3px; margin-right: 8px; vertical-align: middle; background: var(--occ-gold); border-radius: 5px; }
.occ-poster-panel h1 { font-size: clamp(3.2rem, 7vw, 6rem); line-height: .94; font-weight: 800; letter-spacing: -.055em; }
.occ-poster-panel h1 em { color: var(--occ-gold); font-family: "Playfair Display", serif; }
.occ-intro { color: #d6e6ff; font-size: 1.05rem; line-height: 1.7; max-width: 680px; }
.occ-date-card { width: 105px; background: #fff; color: var(--occ-navy); border-radius: .7rem; overflow: hidden; text-align: center; box-shadow: 0 14px 35px rgba(0,0,0,.24); flex: 0 0 auto; }
.occ-date-card small { display: block; background: var(--occ-gold); font-size: .55rem; font-weight: 900; padding: .45rem; }
.occ-date-card strong { display: block; font-size: 2.4rem; line-height: 1; padding-top: .45rem; }
.occ-date-card span { display: block; font-size: .55rem; font-weight: 900; padding: .3rem 0 .55rem; color: #597099; }
.occ-package-card { position: relative; background: rgba(255,255,255,.96); color: var(--occ-navy); border-radius: 1.5rem; padding: 4.4rem 1.5rem 1.5rem; box-shadow: 0 25px 65px rgba(0,0,0,.3); }
.occ-cap { position: absolute; top: -2.6rem; left: 50%; transform: translateX(-50%); font-size: 6rem; filter: drop-shadow(0 15px 10px rgba(0,0,0,.25)); }
.occ-price { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 900; letter-spacing: -.06em; }
.occ-inclusion { min-height: 64px; display: grid; place-items: center; background: #eef6ff; border-radius: .8rem; padding: .75rem .5rem; font-size: .72rem; font-weight: 800; }
.occ-family-note { background: var(--occ-navy); color: #fff; border-radius: .6rem; padding: .75rem; font-size: .72rem; }
.occ-programme-title { color: var(--occ-gold); font-size: .72rem; font-weight: 900; letter-spacing: .16em; margin-bottom: .25rem; }
.occ-course { height: 100%; min-height: 70px; display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,.92); color: var(--occ-navy); border-radius: .85rem; padding: .8rem 1rem; }
.occ-course strong { font-size: .78rem; }
.occ-course span { color: var(--occ-blue); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.occ-venue { background: var(--occ-gold); color: var(--occ-navy); border-radius: .8rem; padding: 1rem 1.2rem; font-size: .82rem; }
.occ-venue a { color: var(--occ-navy); font-weight: 800; }

@media (max-width: 767.98px) {
  .occ-graduation-poster { background-attachment: scroll; background-position: 68% center; }
  .occ-poster-panel { border-radius: 1.1rem; }
  .occ-poster-panel h1 { font-size: 3.2rem; }
}

@media print {
  .occ-graduation-poster { print-color-adjust: exact; -webkit-print-color-adjust: exact; background-attachment: scroll; }
}