:root{--navy:#0B2236;--navy2:#12324B;--teal:#1A8FA0;--teal-dk:#127180;--slate:#5D6E7C;--bg:#F4F5F2;--white:#fff;--border:#DDE1DD;--display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;--body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--navy);background:var(--bg);line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dk);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}
/* header / footer (shared with site) */
header.site{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
header.site img{height:26px}
header.site nav a{color:var(--navy);margin-left:22px;font-weight:500;font-size:.95rem}
header.site nav a.cta{background:var(--teal);color:#fff;padding:9px 16px;border-radius:9px}
footer.site{background:var(--navy);color:#9FB4C2;padding:40px 0;font-size:.9rem;margin-top:60px}
footer.site a{color:#cddae3;margin-right:18px}
/* blog hero */
.blog-hero{background:linear-gradient(165deg,#0B2236,#12324B);color:#fff;padding:56px 0 50px}
.blog-hero .eyebrow{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.blog-hero h1{font-family:var(--display);font-size:clamp(2rem,4.5vw,3rem);font-weight:600;letter-spacing:-.02em;margin:10px 0 8px;line-height:1.08}
.blog-hero p{color:#B7C6D2;font-size:1.1rem;max-width:620px}
/* category filter */
.cats{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 4px}
.cats a{background:#fff;border:1px solid var(--border);border-radius:20px;padding:7px 15px;font-size:.85rem;color:var(--navy);font-weight:500}
.cats a.on,.cats a:hover{background:var(--teal);color:#fff;border-color:var(--teal);text-decoration:none}
/* post grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px;margin:34px 0}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,34,54,.1)}
.card a.cover{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#0B2236,#12324B);overflow:hidden}
.card a.cover img{width:100%;height:100%;object-fit:cover}
.card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card .chip{align-self:flex-start;background:rgba(26,143,160,.12);color:var(--teal-dk);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:20px;margin-bottom:10px}
.card h2{font-family:var(--display);font-size:1.2rem;font-weight:600;line-height:1.25;margin-bottom:8px}
.card h2 a{color:var(--navy)}
.card p{color:var(--slate);font-size:.92rem;flex:1}
.card .meta{margin-top:14px;color:var(--slate);font-size:.8rem;display:flex;gap:10px}
.empty{background:#fff;border:1px dashed var(--border);border-radius:16px;padding:48px;text-align:center;color:var(--slate);margin:34px 0}
/* pagination */
.pager{display:flex;gap:8px;justify-content:center;margin:20px 0 10px}
.pager a,.pager span{border:1px solid var(--border);background:#fff;border-radius:9px;padding:9px 15px;font-size:.9rem;color:var(--navy);font-weight:500}
.pager a:hover{border-color:var(--teal);color:var(--teal);text-decoration:none}
.pager .cur{background:var(--teal);color:#fff;border-color:var(--teal)}
.pager .off{opacity:.4;pointer-events:none}
/* single post */
article.post{background:#fff}
.post-head{padding:48px 0 26px}
.post-head .breadcrumb{font-family:var(--display);font-size:.78rem;color:var(--slate);letter-spacing:.02em;margin-bottom:16px}
.post-head .chip{display:inline-block;background:rgba(26,143,160,.12);color:var(--teal-dk);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:5px 12px;border-radius:20px;margin-bottom:14px}
.post-head h1{font-family:var(--display);font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin-bottom:14px}
.post-head .meta{color:var(--slate);font-size:.92rem;display:flex;gap:14px;flex-wrap:wrap}
.post-cover{margin:8px 0 10px}
.post-cover img{width:100%;border-radius:16px;max-height:460px;object-fit:cover}
.post-body{font-size:1.08rem;line-height:1.75;color:#273843;padding:14px 0 10px}
.post-body h2{font-family:var(--display);font-size:1.55rem;font-weight:600;margin:38px 0 12px;color:var(--navy);line-height:1.2}
.post-body h3{font-family:var(--display);font-size:1.2rem;font-weight:600;margin:28px 0 10px;color:var(--navy)}
.post-body h3.faq-q{color:var(--teal-dk)}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 20px 24px}.post-body li{margin:8px 0}
.post-body a{color:var(--teal-dk);text-decoration:underline}
.post-body blockquote{border-left:3px solid var(--teal);background:#fff;padding:12px 20px;margin:22px 0;color:var(--slate);font-style:italic}
.post-body .table-wrap,.post-body figure.table{overflow-x:auto;margin:24px 0}
.post-body figure.table table{margin:0}
.post-body table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
.post-body th,.post-body td{border:1px solid var(--border);padding:11px 14px;text-align:left;vertical-align:top}
.post-body th{background:#0B2236;color:#fff;font-family:var(--display);font-weight:500;font-size:.9rem}
.post-body tbody tr:nth-child(even){background:#f7f9f9}
.post-cta{background:linear-gradient(135deg,#0B2236,#12324B);color:#fff;border-radius:16px;padding:30px 32px;margin:40px 0}
.post-cta h3{font-family:var(--display);font-size:1.3rem;color:#fff;margin-bottom:8px}
.post-cta p{color:#B7C6D2;margin-bottom:16px}
.post-cta a{display:inline-block;background:var(--teal);color:#fff;padding:12px 24px;border-radius:9px;font-weight:600}
.post-cta a:hover{background:var(--teal-dk);text-decoration:none}
.related{margin:48px 0}
.related h2{font-family:var(--display);font-size:1.4rem;margin-bottom:18px}
.backlink{display:inline-block;margin:8px 0 0;color:var(--teal-dk);font-weight:600}
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  header.site nav a:not(.cta){display:none}
}