:root{
  --max-width:1100px;
  --content-width:900px;
  --card-bg: rgba(255,255,255,0.92);
  --accent: #1a1a1a;
  --primary-blue: #003F77;
}
@font-face{
  font-family: 'Fedra Sans';
  /* Use the Fedra files present in interim-site/fonts/ */
  src: url('fonts/FedraSansStd-Book.woff') format('woff'),
       url('../fonts/FedraSansStd-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Fedra Sans';
  src: url('fonts/FedraSansStd-Bold.woff') format('woff'),
       url('../fonts/FedraSansStd-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: 'Fedra Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color:var(--accent)}
body{
  background-image: url("images/background.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* .overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:0;
} */
.copyright{position:fixed;bottom:8px;right:12px;font-size:10px;color:rgba(255,255,255,0.4);z-index:2;text-align:right;max-width:300px}
.copyright a{color:rgba(255,255,255,0.4);text-decoration:none}
.container{position:relative;z-index:1;max-width:var(--max-width);width:92%;margin:auto;padding:48px 0;display:flex;flex-direction:column;align-items:center}
.logo{max-width:300px;height:auto;margin-bottom:120px}
.title{font-size:64px;line-height:1;margin:12px 0 36px;color:#fff;text-align:center;font-weight:700;letter-spacing:1px}
.subtitle{font-size:18px;line-height:1;margin:0 0 36px;color:#fff;text-align:center;font-weight:400;letter-spacing:0.03em; font-variant: all-small-caps;}
.notice{background:rgba(255,255,255,0.9);padding:18px 22px;border-radius:4px;max-width:var(--content-width);margin-bottom:28px;color:var(--primary-blue);text-align:center;display:flex;flex-direction:column;align-items:center}
.notice h3{margin:0 0 8px;font-size:20px;color:var(--primary-blue)}
.notice p{margin:0;font-size:15px;line-height:1.45;color:var(--primary-blue);text-align:center}
.cards{display:flex;gap:28px;width:100%;justify-content:center;max-width:var(--content-width);flex-wrap:wrap}
.cards{margin-bottom:28px}
.card{background:var(--primary-blue);padding:22px;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,0.25);flex:1 1 320px;min-width:220px;color:#fff;display:flex;flex-direction:column;align-items:center;min-height:auto;text-align:center}
.logo-wrap{width:100%;height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.card-logo{max-width:100%;height:auto;max-height:100px;display:block}
.logo-wrap a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.logo-wrap a .card-logo{max-height:100%;max-width:100%;height:auto;width:auto;display:block}
.card.right .card-logo{max-height:56px}
.card h2{margin:0 0 8px;font-size:18px;color:#fff}
.card p{margin:8px 0;color:#fff;font-size:15px}
.card a{color:#fff;text-decoration:underline}
.card p > a{display:inline;margin:6px 0;padding:0;background:transparent;border:none;border-radius:0;font-size:15px;font-weight:700;color:#fff;text-decoration:underline}
.card-label{font-weight:700;margin:6px 0;color:#fff;font-size:15px;text-align:center}
.card-label{font-weight:700;margin:6px 0;color:#fff;font-size:15px}

@media (max-width:800px){
  .title{font-size:40px}
  .cards{flex-direction:column;align-items:stretch;gap:16px}
  .card{flex:none;width:100%;min-width:0}
  .notice{padding:14px}
}

@media (max-width:480px){
  html,body{hyphens:auto}
  .card,
  .notice{hyphens:auto}
}