/* ============== HEADER & FOOTER ============== */
#site-header{
  position:sticky; top:0; z-index:1000;
  background:#0C257A;                /* deep blue header */
  box-shadow:inset 0 -4px 0 #DA1F26;  /* red underline stays */
}
#site-header .container{
  width:min(1100px,92vw); margin-inline:auto; padding:.7rem 0;
  display:flex; align-items:center; justify-content:space-between;
}
#site-header .brand{ font-weight:800; color:#fff }
#site-header .brand img{ display:block; height:42px }
#site-header nav a{ margin:0 .7rem; color:#fff; font-weight:600; letter-spacing:.2px }
#site-header nav a:hover{ text-decoration:underline; color:#fff }

main{ min-height:50vh }
#site-footer{ background:#fff; border-top:3px solid #DA1F26 }
#site-footer .container{ width:min(1100px,92vw); margin-inline:auto; padding:16px 0 }

/* ============== NAV: DESKTOP & MOBILE ============== */
.desktop-nav{ display:flex; gap:1rem }

/* hamburger inherits color (white) */
.hamburger{
  display:none; background:transparent; border:0;
  width:44px; height:44px; position:relative; cursor:pointer; color:#fff;
}
.hamburger svg{ display:block; margin:auto }

/* mobile menu; ensure hidden state wins */
.mobile-nav[hidden]{display:none !important}
.mobile-nav{
  position:fixed; inset:0; z-index:2000;
  background:#0C257A; display:grid; align-content:start; padding:80px 24px;
}
.mobile-nav a{
  color:#fff; font-size:20px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.2);
}

/* show hamburger under 960px */
@media (max-width: 960px){
  .desktop-nav{ display:none }
  .hamburger{ display:block }
}

/* ============== HERO (VIDEO + LOWER TITLE) ============== */
#hero{
  position:relative;
  min-height:clamp(420px, 60vh, 700px);
  overflow:hidden;
  background:#000;
}
#hero .hero-media{ position:absolute; inset:0; z-index:0; }
#hero video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  display:block;
}
#hero .hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.48) 55%, #fff 100%);
}

/* Text layer on video, shifted down more */
#hero .hero-inner{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:flex-start;
  flex-direction:column; gap:14px; text-align:center; padding:0 2rem;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  transform: translateY(18vh); /* LOWER the block (title sits where old CTA was) */
}

/* Big uppercase title */
.hero-title{
  color:#0C257A;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:clamp(44px, 7vw, 96px);
  line-height:1.03;
  text-shadow:
    0 1px 0 rgba(255,255,255,.8),
    0 0 18px rgba(218,31,38,.20);
}

/* Elegant paragraph */
.hero-lead{
  color:#1b3b8f; /* slightly deeper blue than #2A4592 for contrast */
  font-weight:600;
  line-height:1.55;
  letter-spacing:.2px;
  max-width:86ch;
  font-size:clamp(17px, 2.2vw, 24px);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

/* Spectacular CTA */
.hero-cta{ margin-top:10px }
.btn{
  display:inline-block; padding:.78rem 1.15rem;
  border-radius:16px; border:2px solid #DA1F26; text-decoration:none;
  line-height:1; font-weight:800; letter-spacing:.3px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn.primary{
  background:#DA1F26; color:#fff;
  box-shadow:0 6px 20px rgba(218,31,38,.35), 0 0 0 2px rgba(218,31,38,.18) inset;
}
.btn.primary:hover{
  background:#fff; color:#DA1F26;
  box-shadow:0 10px 26px rgba(218,31,38,.42), 0 0 0 2px #DA1F26 inset;
  transform:translateY(-1px);
}
/* subtle pulse */
.glow{ animation:pulseSoft 2.2s ease-in-out infinite }
@keyframes pulseSoft{
  0%,100%{ box-shadow:0 6px 20px rgba(218,31,38,.35), 0 0 0 2px rgba(218,31,38,.18) inset }
  50%{ box-shadow:0 12px 28px rgba(218,31,38,.55), 0 0 0 2px rgba(218,31,38,.22) inset }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .glow{ animation:none }
  #hero video{ animation:none }
}

/* Sections */
.section{ padding:28px 0 }
.section .container{ width:min(1100px,92vw); margin-inline:auto }
.section-title{
  color:#0C257A; font-weight:900; letter-spacing:.3px;
  font-size:clamp(22px,2.6vw,30px); margin:0 0 12px 0;
  border-left:6px solid #DA1F26; padding-left:10px;
}

/* 3×3 grid, responsive */
.grid-9{
  display:grid; gap:14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){
  .grid-9{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 600px){
  .grid-9{ grid-template-columns: 1fr }
}

/* Card — blue frame, white background, cinematic hover */
.card{
  display:block; background:#fff; border:3px solid #0C257A;
  border-radius:14px; overflow:hidden;
  box-shadow:0 6px 24px rgba(12,37,122,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(12,37,122,.16);
}
.card .thumb{ margin:0; aspect-ratio:16/9; overflow:hidden; background:#eef2ff }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block }

/* Title inside card */
.card .title{
  color:#0C257A; font-weight:800; font-size:clamp(16px,1.8vw,18px);
  margin:10px 12px 12px;
  border-top:4px solid #DA1F26; padding-top:10px;
}

/* ========== FOOTER REVEAL (smooth) ========== */
.reveal-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  background:#0C257A; color:#fff; border-top:4px solid #DA1F26;
  transform:translateY(100%);
  opacity:0;
  transition:transform 0.8s ease-out, opacity 0.8s ease-out;
}
.reveal-footer .foot-wrap{
  width:min(1100px,92vw); margin:0 auto; padding:18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.reveal-footer a{color:#fff; font-weight:700; text-decoration:none; margin-left:14px}
body.footer-reveal .reveal-footer{ transform:translateY(0); opacity:1 }
.no-js .reveal-footer{ position:static; transform:none; opacity:1 }
/* kill legacy slide so bottom-offset reveal can work */
.reveal-footer{ transform:none !important; }
/* EMERGENCY: force footer visible on-screen */
.reveal-footer{
  position: fixed !important;
  left: 0; right: 0; bottom: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  display: block !important;
  min-height: 90px;           /* adjust if your footer is taller */
  z-index: 900;
}
/* v2: unpin footer so JS can slide it */
.reveal-footer{
  bottom:-220px !important;     /* start hidden below viewport */
  transform:none !important;    /* kill any old translateY rules */
  opacity:0 !important;         /* JS will fade it in */
}
/* ===== PSG-like full-screen footer ===== */
.reveal-footer{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  background:#0C257A; color:#fff; border-top:4px solid #DA1F26;
}

/* Grid rows: links + banner + copy */
.reveal-footer .foot-wrap{
  width:min(1200px,92vw); margin:0 auto; padding:28px 16px 16px;
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:24px;
  align-items:start;
}
.reveal-footer .foot-col{}
.reveal-footer .foot-title{
  margin:0 0 10px; color:#b8c6ff; font-weight:800; letter-spacing:.2px;
  font-size:clamp(14px,1.2vw,16px);
}
.reveal-footer .foot-list{ list-style:none; padding:0; margin:0; }
.reveal-footer .foot-list li{ margin:8px 0; }
.reveal-footer .foot-list a{
  color:#fff; text-decoration:none; opacity:.95; font-weight:700;
}
.reveal-footer .foot-list a:hover{ text-decoration:underline; opacity:1; }

/* Socials + logo on the right */
.reveal-footer .foot-col-right{ text-align:left; }
.reveal-footer .foot-social{ margin:2px 0 12px; }
.reveal-footer .soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; margin-right:8px;
  background:rgba(255,255,255,.08); outline:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 16px rgba(12,37,122,.25);
  transition:transform .15s ease, background .15s ease, outline-color .15s ease;
}
.reveal-footer .soc:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.14); outline-color:rgba(255,255,255,.35);
}
.reveal-footer .soc img{ filter:brightness(0) invert(1); }

.reveal-footer .foot-logo{
  display:block; margin-top:10px;
  opacity:.12; filter:grayscale(100%);
  transform:translateX(48px); /* ~1.25cm nudge */
}

/* Giant banner line */
.reveal-footer .foot-banner{
  width:min(1200px,92vw); margin:20px auto 10px;
  font-weight:900; line-height:1; letter-spacing:.5px;
}
.reveal-footer .foot-banner .small{
  display:block; color:#aab7ff; font-weight:800;
  font-size:clamp(18px,2.2vw,26px); margin-bottom:4px;
}
.reveal-footer .foot-banner .big{
  display:block; color:#fff; text-transform:uppercase;
  font-size:clamp(48px,12vw,160px);
  letter-spacing:1px;
}

/* Copyright */
.reveal-footer .foot-copy{
  width:min(1200px,92vw); margin:8px auto 16px; text-align:center;
  padding:10px 0 8px; border-top:3px solid #DA1F26;
  font-weight:700; font-size:clamp(14px,1.9vw,17px); letter-spacing:.2px;
}

/* Mobile stacking */
@media (max-width: 860px){
  .reveal-footer .foot-wrap{
    grid-template-columns: 1fr; gap:18px; text-align:center;
  }
  .reveal-footer .foot-col-right{ text-align:center; }
  .reveal-footer .foot-logo{ transform:none; margin:8px auto 0; }
  .reveal-footer .soc{ margin:0 6px; }
}
/* === PSG-like full-screen footer (content) === */
.reveal-footer{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  background:#0C257A; color:#fff; border-top:4px solid #DA1F26;
}

/* Top grid: three columns */
.reveal-footer .foot-wrap{
  width:min(1200px,92vw); margin:0 auto; padding:28px 16px 10px;
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:28px; align-items:start;
}

/* Column titles + lists */
.reveal-footer .foot-title{
  margin:0 0 10px; color:#b8c6ff; font-weight:800; letter-spacing:.2px;
  font-size:clamp(14px,1.2vw,16px);
}
.reveal-footer .foot-list{ list-style:none; padding:0; margin:0; }
.reveal-footer .foot-list li{ margin:8px 0; }
.reveal-footer .foot-list a{ color:#fff; text-decoration:none; opacity:.95; font-weight:700; }
.reveal-footer .foot-list a:hover{ text-decoration:underline; opacity:1; }

/* Socials with labels (always visible); if icon missing, .no-icon tightens padding */
.reveal-footer .foot-social{ margin:2px 0 12px; display:flex; flex-wrap:wrap; gap:10px; }
.reveal-footer .soc{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px;
  background:rgba(255,255,255,.08); outline:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 16px rgba(12,37,122,.25);
  transition:transform .15s ease, background .15s ease, outline-color .15s ease;
}
.reveal-footer .soc .ico{ display:block; filter:brightness(0) invert(1); }
.reveal-footer .soc.no-icon{ padding:10px 12px; } /* if SVGs missing, keep it tidy */
.reveal-footer .soc .label{ color:#fff; font-weight:800; letter-spacing:.2px; }
.reveal-footer .soc:hover{ transform:translateY(-1px); background:rgba(255,255,255,.14); outline-color:rgba(255,255,255,.35); }

/* Logo on the RIGHT */
.reveal-footer .foot-col-right{ text-align:left; }
.reveal-footer .foot-logo{
  display:block; margin-top:12px;
  opacity:.12; filter:grayscale(100%);
  transform:translateX(48px); /* ~1.25cm nudge right */
}

/* Giant banner text */
.reveal-footer .foot-banner{
  width:min(1200px,92vw); margin:24px auto 10px; line-height:1;
}
.reveal-footer .foot-banner .small{
  display:block; color:#aab7ff; font-weight:900; letter-spacing:.35px;
  font-size:clamp(22px,2.6vw,34px);  /* bigger than before */
}
.reveal-footer .foot-banner .big{
  display:block; color:#fff; text-transform:uppercase; letter-spacing:1.2px;
  font-weight:900;
  font-size:clamp(64px,14vw,200px);  /* huge, crisp */
}

/* Copyright */
.reveal-footer .foot-copy{
  width:min(1200px,92vw); margin:12px auto 16px; text-align:center;
  padding:10px 0 8px; border-top:3px solid #DA1F26;
  font-weight:700; font-size:clamp(14px,1.9vw,17px); letter-spacing:.2px;
}

/* Mobile */
@media (max-width: 860px){
  .reveal-footer .foot-wrap{
    grid-template-columns: 1fr; gap:18px; text-align:center;
  }
  .reveal-footer .foot-col-right{ text-align:center; }
  .reveal-footer .foot-logo{ transform:none; margin:8px auto 0; }
  .reveal-footer .foot-social{ justify-content:center; }
}
/* === PSG-style full-screen footer (structure kept from earlier) === */
.reveal-footer{
  position:relative;            /* for the watermark layer */
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:#0C257A; color:#fff; border-top:4px solid #DA1F26;
}

/* Watermark logo across the whole footer */
.reveal-footer .foot-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("/v2/assets/logos/logo-site.png");
  background-repeat:no-repeat;
  background-position:center;      /* centered by default */
  background-size:80vmin auto;     /* large, responsive */
  opacity:.05;                      /* soft fade */
  filter:grayscale(100%);
}

/* Columns */
.reveal-footer .foot-wrap{
  position:relative; z-index:1;             /* above watermark */
  width:min(1200px,92vw); margin:0 auto; padding:28px 16px 12px;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; align-items:start;
}
.reveal-footer .foot-title{
  margin:0 0 10px; color:#b8c6ff; font-weight:800; letter-spacing:.2px;
  font-size:clamp(14px,1.2vw,16px);
}
.reveal-footer .foot-list{ list-style:none; padding:0; margin:0; }
.reveal-footer .foot-list li{ margin:8px 0; }
.reveal-footer .foot-list a{
  color:#fff; text-decoration:none; opacity:.95; font-weight:700;
}
.reveal-footer .foot-list a:hover{ text-decoration:underline; opacity:1; }

/* Socials — vertical, crisp, icon + label; labels always visible */
.reveal-footer .foot-social-vert{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.reveal-footer .soc{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.reveal-footer .soc .ico{ display:block; filter:brightness(0) invert(1); opacity:.95; }
.reveal-footer .soc .label{ color:#fff; font-weight:800; letter-spacing:.2px; }
.reveal-footer .soc:hover .label{ text-decoration:underline; }

/* Slogan */
.reveal-footer .foot-banner{
  position:relative; z-index:1;
  width:min(1200px,92vw); margin:24px auto 10px; line-height:1;
}
.reveal-footer .foot-banner .small{
  display:block; color:#aab7ff; font-weight:900; letter-spacing:.35px;
  font-size:clamp(22px,2.6vw,34px);
}
.reveal-footer .foot-banner .big{
  display:block; color:#fff; text-transform:uppercase; letter-spacing:1.2px;
  font-weight:900; font-size:clamp(96px,14vw,220px);  /* huge & crisp */
}

/* Copyright pinned at the bottom inside the footer */
.reveal-footer .foot-copy{
  position:relative; z-index:1;
  width:min(1200px,92vw); margin:12px auto 16px; text-align:center;
  padding:10px 0 8px; border-top:3px solid #DA1F26;
  font-weight:700; font-size:clamp(14px,1.9vw,17px); letter-spacing:.2px;
}

/* Mobile */
@media (max-width: 860px){
  .reveal-footer .foot-wrap{
    grid-template-columns:1fr; gap:18px; text-align:center;
  }
  .reveal-footer .foot-social-vert{ align-items:center; }
  .reveal-footer .foot-bg{ background-size:90vw auto; opacity:.06; }
}
/* -- Fix: force header logo to solid white (no fade/invert) -- */
#site-header img,
#site-header .site-logo,
#site-header .site-logo img{
  opacity: 1 !important;
  filter: none !important;           /* cancel any invert/brightness from elsewhere */
  -webkit-filter: none !important;
  mix-blend-mode: normal !important; /* avoid blending with the blue bar */
}

/* If your header uses an inline SVG logo */
#site-header svg { fill: #FFFFFF !important; color: #FFFFFF !important; }
/* -- Force header logo to pure white using mask (keeps click + size) -- */
#site-header .brand{
  position: relative;
  display: inline-block;
}
#site-header .brand img{
  opacity: 0 !important;          /* hide original pixels (may be translucent) */
}

/* White overlay shaped by the PNG, matches the img box exactly */
#site-header .brand::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;            /* keep the link clickable */
  background: #fff;                /* pure white */
  -webkit-mask-image: url("/v2/assets/logos/logo-site.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-image: url("/v2/assets/logos/logo-site.png");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
  /* cancel any inherited blending/filters just in case */
  mix-blend-mode: normal;
  filter: none;
}
/* Mobile typography tweak (≤420px) */
@media (max-width: 420px){
  body{ font-size: 17px; line-height: 1.75; }
  #article h1{ font-size: clamp(26px, 6vw, 34px); }
  #article .tag{ font-size: .9rem; padding: 6px 12px; }
  a.back{ padding: 12px 18px; }
}
/* Article-only readability boost */
#article{
  font-size: 18px;        /* was smaller; match main pages */
  line-height: 1.75;
}

#article p,
#article li { font-size: 1em; }

#article h1{
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.15;
}

/* mobile fine-tune */
@media (max-width: 420px){
  #article{ font-size: 17px; }         /* slight bump on phones */
}