:root{--text:#121212;--bg:#fff;--accent:#0a84ff;--muted:#666}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--bg)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #eee;
  display:flex; align-items:center; gap:12px; padding:10px 16px}
.brand{font-weight:800; color:#111; letter-spacing:.2px}

/* Desktop nav (always visible on wide) */
.nav-desktop{margin-left:auto; display:flex; gap:6px}
.nav-desktop a{padding:10px 12px; border-radius:10px; font-weight:600; color:#0a4a9a}
.nav-desktop a:hover{background:rgba(10,132,255,.08)}

/* Mobile nav using <details> (no JS) */
.nav-mobile{margin-left:auto; position:relative; display:none}
.nav-mobile summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile summary span{display:block; width:22px; height:2px; background:#222; margin:4px 0; border-radius:2px; transition:.25s}

/* Backdrop */
.nav-mobile[open]::before{
  content:""; position:fixed; top:56px; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.35); z-index:999;
}

/* Drawer panel with ultra-specific selector */
header.site-header details.nav-mobile .drawer{display:none}
header.site-header details.nav-mobile[open] .drawer{display:block !important}
header.site-header details.nav-mobile .primary-nav{
  position:fixed; top:56px; left:0; right:0; bottom:0; z-index:1000;
  background:#fff; padding:16px; display:block; overflow:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.08)
}
header.site-header details.nav-mobile .primary-nav a{
  display:block; padding:14px 8px; border-bottom:1px solid #efefef; color:#111
}
/* Hamburger to X */
.nav-mobile[open] summary span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-mobile[open] summary span:nth-child(2){opacity:0}
.nav-mobile[open] summary span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Switch */
@media (max-width:960px){
  .nav-desktop{display:none !important}
  .nav-mobile{display:block !important}
}

/* Hero / sections */
.hero{position:relative;min-height:56vh;display:grid;place-items:center;overflow:hidden}
.hero img{width:100%;height:clamp(48vh,68vh,78vh);display:block;object-fit:cover;filter:contrast(1.05)}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 50%,rgba(0,0,0,0) 80%)}
.hero .content{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(16px,6vw,64px);color:#fff}
.hero h1{margin:.2rem 0;font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.2;letter-spacing:.2px}
.hero p{margin:.2rem 0 1rem;max-width:52ch}
.cta{display:inline-block;background:var(--accent);color:#fff;padding:.78rem 1.05rem;border-radius:10px;box-shadow:0 2px 8px rgba(10,132,255,.25)}

.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid #e9e9e9;border-radius:12px;padding:16px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.04)}
h2{margin-top:2rem;font-size:clamp(1.1rem,2.4vw,1.4rem)}
table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem}
td,th{border:1px solid #e5e5e5;padding:.5rem;text-align:left}
footer{border-top:1px solid #eee;color:var(--muted);font-size:.9rem;padding:16px}
small.muted{color:var(--muted)}
figure{margin:0}
.grid.cols-2 > a.card figure{ aspect-ratio: 16/10; overflow:hidden; border-radius:10px; }
.grid.cols-2 > a.card figure img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:640px){
  main .grid.cols-2 figure.card img{ max-height:320px; width:100%; height:auto; object-fit:contain; }
  .hero h1{ font-size:clamp(1.4rem,6vw,2rem) }
  .hero p{ font-size:.95rem }
}
@media (max-width:780px){
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
}