@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('assets/fonts/poppins-600.woff2') format('woff2'); }
:root { --petrol: #145463; --petrol-dark: #0F3F4B; --sand: #BA9B71; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: 'Poppins', system-ui, sans-serif; color: #fff; background: var(--petrol-dark); display: flex; flex-direction: column; min-height: 100vh; }
.logo { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); z-index: 2; width: 190px; height: auto; }
main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.pick { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 48px 72px; color: #fff; text-decoration: none; background: var(--petrol) center / cover no-repeat; overflow: hidden; }
.pick::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,63,75,.55) 0%, rgba(15,63,75,.35) 45%, rgba(15,63,75,.88) 100%); transition: background .3s; }
.pick:hover::before, .pick:focus-visible::before { background: linear-gradient(180deg, rgba(15,63,75,.4) 0%, rgba(15,63,75,.2) 45%, rgba(15,63,75,.8) 100%); }
.pick > * { position: relative; }
.pick small { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.pick b { display: block; font-size: clamp(30px, 4vw, 52px); font-weight: 600; line-height: 1.1; margin: 6px 0 18px; }
.pick span { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 12px 24px; border-radius: 999px; background: var(--sand); font-weight: 600; font-size: 15px; }
footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 16px; text-align: center; font-size: 12px; color: rgba(255,255,255,.6); z-index: 2; pointer-events: none; }
footer a { color: rgba(255,255,255,.85); pointer-events: auto; }
@media (max-width: 760px) {
  main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .logo { top: 24px; width: 150px; }
  .pick { padding: 0 24px 40px; min-height: 50vh; }
  .pick:last-child { padding-bottom: 72px; }
}