[hidden] { display:none !important }
/* Layout: a navy hero whose right side is the five-colour brand swatch, one column per division; the page then walks through each division as a coloured row. */
:root {
  /* brand palette — one colour per division, red to navy */
  --c1:#AB1D2A; --c2:#741E3C; --c3:#3D1F4C; --c4:#221F54; --c5:#061F5C; /* c4 sits between the plum and the navy, so five divisions fit four colours */

  --bg:#F6F5F8; --surface:#FFFFFF; --ink:#16163A; --muted:#4F4B68; --line:#DEDBE6; --tint:#EEECF3;
  --accent:#3D1F4C; --accent-hover:#741E3C; --accent-edge:#6A3F86; --accent-ink:#3D1F4C; --on-accent:#FFFFFF;
  --on-dark-accent:#CDB3E3; /* the plum, lightened so it reads on the navy bands */
  --hero:#061F5C; --hero-ink:#F2F1F7; --hero-muted:#C3C2D6; --hero-line:#22346E;

  /* type, same as Educarte: Barlow Condensed headings, Inter text, Bricolage Grotesque wordmark */
  --display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mark:"Bricolage Grotesque", "Inter", system-ui, sans-serif;

  --s1:clamp(2.9rem, 6.6vw, 5.4rem); --s2:clamp(2rem, 3.8vw, 2.9rem); --s3:1.55rem;
  --wrap:1180px; --r:10px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0A0F2A; --surface:#121838; --ink:#ECEBF4; --muted:#ABA9C4; --line:#252B52; --tint:#1A2048;
  --accent-ink:#CDB3E3; --hero:#040F33; --hero-line:#1C2A5E; color-scheme:dark } }
:root[data-theme="dark"] {
  --bg:#0A0F2A; --surface:#121838; --ink:#ECEBF4; --muted:#ABA9C4; --line:#252B52; --tint:#1A2048;
  --accent-ink:#CDB3E3; --hero:#040F33; --hero-line:#1C2A5E; color-scheme:dark }

* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--hero) }
h1,h2,h3 { font-family:var(--display); font-weight:700; line-height:1.02; text-wrap:balance; margin:0; letter-spacing:.005em }
p { margin:0 }
a { color:inherit }
:focus-visible { outline:3px solid var(--accent-edge); outline-offset:3px; border-radius:4px }
.wrap { max-width:var(--wrap); margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)) }
.eyebrow { font-family:var(--display); font-weight:600; font-size:.95rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-ink) }
.lead { color:var(--muted); font-size:1.08rem; max-width:62ch }

.stripe { display:grid; grid-template-columns:repeat(5,1fr); height:6px }
.stripe i:nth-child(1){background:var(--c1)} .stripe i:nth-child(2){background:var(--c2)} .stripe i:nth-child(3){background:var(--c3)} .stripe i:nth-child(4){background:var(--c4)} .stripe i:nth-child(5){background:var(--c5); box-shadow:inset 0 -1px 0 var(--hero-line)}

/* Header */
header.top { position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--hero); color:var(--hero-ink); border-bottom:1px solid var(--hero-line) }
.top .wrap { display:flex; align-items:center; gap:24px; padding-block:14px }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--mark); font-weight:800; font-size:1.4rem; letter-spacing:-.03em }
.brand svg { width:30px; height:30px; flex:none }
.nav { display:flex; gap:26px; margin-left:auto; align-items:center }
.nav a { text-decoration:none; color:#FFFFFF; font-weight:500; font-size:.95rem }
.nav a:hover { color:#FFFFFF; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px }
.nav .btn:hover { text-decoration:none }
.nav .btn.light, .nav .btn.light:hover { color:#061F5C }
.btn { display:inline-flex; align-items:center; gap:8px; font:600 .95rem var(--body); text-decoration:none; padding:.72rem 1.15rem; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:transform .15s, background .15s }
.btn:hover { transform:translateY(-1px) }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent-edge) }
.btn.primary:hover { background:var(--accent-hover) }
.btn.light { background:#FFFFFF; color:#061F5C; border-color:#FFFFFF }
.btn.light:hover { background:#E9ECF5 }
.btn.light.outlined { border-color:#061F5C }
.btn.ghost { border-color:var(--hero-line); color:var(--hero-ink); background:transparent }
.btn.ghost:hover { border-color:var(--hero-muted) }
.btn.line { border-color:var(--line); color:var(--ink); background:transparent }
.btn.line:hover { border-color:var(--muted) }
.nav .btn { padding:.55rem .95rem; color:var(--on-accent) }
.menu-btn { display:none; margin-left:auto; background:none; border:1px solid var(--hero-line); color:var(--hero-ink); border-radius:8px; padding:.45rem .8rem; font:600 .9rem var(--body) }

/* Hero */
.hero { background:var(--hero); color:var(--hero-ink); overflow:hidden }
.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:stretch; padding-block:72px 0 }
.hero-copy { padding-bottom:72px; min-width:0; align-self:center }
.hero h1 { font-size:var(--s1); max-width:15ch; text-transform:uppercase; letter-spacing:.01em }
.hero h1 em { font-style:normal; color:inherit }
.hero .eyebrow { display:inline-block; color:#fff; background:#3D1F4C; border:1px solid #6A3F86; padding:4px 10px; border-radius:4px }
.hero .lead { color:var(--hero-muted); margin-top:22px; font-size:1.15rem }
.hero-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }

.swatch { display:grid; grid-template-columns:repeat(5,1fr); min-height:440px; border-radius:12px 12px 0 0; overflow:hidden; min-width:0 }
.swatch a { display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:16px 12px; text-decoration:none; color:#fff; position:relative; transition:flex-basis .3s, filter .2s }
.swatch a:hover { filter:brightness(1.12) }
.swatch a:nth-child(1){background:var(--c1)} .swatch a:nth-child(2){background:var(--c2)} .swatch a:nth-child(3){background:var(--c3)} .swatch a:nth-child(4){background:var(--c4); box-shadow:inset 1px 0 0 rgba(255,255,255,.08)} .swatch a:nth-child(5){background:var(--c5); box-shadow:inset 1px 0 0 rgba(255,255,255,.12)}
.swatch b { font:700 1.25rem/1 var(--display); text-transform:uppercase; letter-spacing:.03em; writing-mode:vertical-rl; transform:rotate(180deg); align-self:flex-start; margin-bottom:auto }
.swatch small { font-size:.72rem; font-weight:500; opacity:.85; line-height:1.3 }

/* Sections */
section.band { padding-block:96px }
.sec-head { display:grid; gap:14px; margin-bottom:48px; max-width:760px }
.sec-head h2 { font-size:var(--s2) }

/* Divisions */
.divisions { display:grid; border-top:1px solid var(--line) }
.div-row { display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,1.1fr) auto; gap:28px; align-items:start; padding-block:34px; border-bottom:1px solid var(--line) }
.div-tag { width:72px; height:72px; border-radius:10px; display:grid; place-items:center; color:#fff }
.div-tag svg { width:34px; height:34px }
.div-row[data-c="1"] .div-tag{background:var(--c1)} .div-row[data-c="2"] .div-tag{background:var(--c2)} .div-row[data-c="3"] .div-tag{background:var(--c3)} .div-row[data-c="4"] .div-tag{background:var(--c4)} .div-row[data-c="5"] .div-tag{background:var(--c5)}
.div-row[data-c="4"] .div-tag, .div-row[data-c="5"] .div-tag { box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) }
.div-name { display:grid; gap:8px; min-width:0 }
.div-name h3 { font-size:var(--s3); text-transform:uppercase; letter-spacing:.02em }
.div-name p { color:var(--muted) }
.offer { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; min-width:0 }
.offer li { font-size:.94rem; padding-left:16px; position:relative }
.offer li::before { content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:1px; background:var(--muted) }
.div-row[data-c="1"] .offer li::before{background:var(--c1)} .div-row[data-c="2"] .offer li::before{background:var(--c2)} .div-row[data-c="3"] .offer li::before{background:var(--c3)} .div-row[data-c="4"] .offer li::before{background:var(--c4)} .div-row[data-c="5"] .offer li::before{background:var(--c5)}
:root[data-theme="dark"] .div-row[data-c="5"] .offer li::before { background:#5D78C9 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .div-row[data-c="5"] .offer li::before { background:#5D78C9 } }
.div-cta { font:600 .9rem var(--body); color:var(--accent-ink); text-decoration:none; white-space:nowrap; padding-top:4px }
.div-cta:hover { text-decoration:underline }

/* Sectors */
.sectors { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.sector { padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); display:grid; gap:8px; align-content:start }
.sector h3 { font-size:1.35rem }
.sector p { color:var(--muted); font-size:.94rem }
.sector span { font:600 .8rem var(--display); text-transform:uppercase; letter-spacing:.12em; color:var(--accent-ink) }

/* Educarte */
.product { background:var(--surface); border-block:1px solid var(--line) }
.product .wrap { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center }
.product-copy { display:grid; gap:18px; min-width:0 }
.product h2 { font-size:var(--s2) }
.pk { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-top:6px; padding:0; list-style:none }
.pk li { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; font-size:.95rem }
.pk b { display:block; font-weight:600 }
.pk span { color:var(--muted); font-size:.88rem }
.pk li::before { content:""; width:10px; height:10px; margin-top:7px; border-radius:2px; background:var(--c3) }
.pk li:first-child::before { background:var(--c3) }
.product-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px }

.slider { background:var(--hero); border-radius:14px; padding:14px; box-shadow:0 30px 60px -30px rgba(6,31,92,.6); min-width:0 }
.slider-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 4px 12px }
.dots3 { display:flex; gap:6px } .dots3 i { width:9px; height:9px; border-radius:50%; background:var(--hero-line) }
.slide-label { font:600 .85rem var(--display); text-transform:uppercase; letter-spacing:.12em; color:var(--hero-muted) }
.viewport { overflow:hidden; border-radius:8px }
.track { display:flex; transition:transform .5s cubic-bezier(.3,.7,.2,1) }
.slide { flex:0 0 100%; min-width:0; background:#F6F5F8; color:#16163A; padding:10px; display:grid; grid-template-columns:28% 1fr; gap:10px; min-height:270px }
.app-side { background:#061F5C; border-radius:6px; padding:12px 10px; display:grid; gap:8px; align-content:start }
.app-side b { color:#fff; font:800 .85rem var(--mark); letter-spacing:-.02em }
.app-side i { display:block; height:7px; border-radius:3px; background:rgba(255,255,255,.2) }
.app-side i.on { background:#FFFFFF }
.app-main { display:grid; gap:9px; align-content:start; min-width:0 }
.app-title { font:700 1rem var(--display); text-transform:uppercase; letter-spacing:.04em; color:#061F5C }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.tiles div { background:#fff; border:1px solid #DEDBE6; border-radius:6px; padding:8px; display:grid; gap:6px }
.tiles small { font:600 .6rem var(--body); color:#4F4B68; text-transform:uppercase; letter-spacing:.06em }
.tiles i { display:block; height:8px; width:60%; border-radius:3px; background:#AB1D2A }
.tiles div:nth-child(2) i { background:#741E3C; width:72% } .tiles div:nth-child(3) i { background:#061F5C; width:48% }
.chart { background:#fff; border:1px solid #DEDBE6; border-radius:6px; height:118px; padding:10px; display:flex; align-items:flex-end; gap:6px }
.chart i { flex:1; border-radius:3px 3px 0 0; background:#3D1F4C } .chart i:nth-child(odd) { background:#741E3C }
.rows { display:grid; gap:5px } .rows i { height:9px; border-radius:3px; background:#DEDBE6 }
.card-sheet { background:#fff; border:1px solid #DEDBE6; border-top:4px solid #061F5C; border-radius:6px; padding:10px; display:grid; gap:7px }
.sheet-row { display:grid; grid-template-columns:1fr 40px 26px; gap:8px; align-items:center }
.sheet-row i { height:8px; border-radius:3px; background:#DEDBE6 }
.sheet-row em { height:8px; border-radius:3px; background:#741E3C; display:block }
.sheet-row b { font:700 .8rem var(--display); color:#AB1D2A; text-align:center }
.fee-bar { display:grid; gap:4px } .fee-bar small { font:600 .62rem var(--body); color:#4F4B68 }
.fee-bar div { height:12px; border-radius:6px; background:#EEECF3; overflow:hidden } .fee-bar div i { display:block; height:100%; background:linear-gradient(90deg,#741E3C,#3D1F4C) }
.slider-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px 0 }
.slider-foot p { font-size:.78rem; color:var(--hero-muted) }
.s-ctrl { display:flex; gap:6px; align-items:center }
.s-ctrl button { background:transparent; border:1px solid var(--hero-line); color:var(--hero-ink); border-radius:6px; width:32px; height:32px; cursor:pointer; font:600 1rem var(--body) }
.s-ctrl button:hover { border-color:var(--hero-muted) }
.s-ctrl .pip { width:8px; height:8px; padding:0; border-radius:50%; border:0; background:var(--hero-line) }
.s-ctrl .pip[aria-current="true"] { background:#FFFFFF }

/* Why */
.why { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.why div { display:grid; gap:10px; align-content:start; padding-top:18px; border-top:3px solid var(--c3) }
.why h3 { font-size:1.35rem }
.why p { color:var(--muted); font-size:.95rem }

/* Process */
.process { background:var(--hero); color:var(--hero-ink) }
.process .eyebrow { color:#FFFFFF }
.process .lead { color:var(--hero-muted) }
.steps { display:grid; grid-template-columns:repeat(4,1fr); counter-reset:step; list-style:none; padding:0; margin:0 }
.steps li { padding:26px 24px 30px 0; border-top:1px solid var(--hero-line); display:grid; gap:10px; align-content:start; position:relative }
.steps li::before { counter-increment:step; content:counter(step, decimal-leading-zero); font:700 1.6rem/1 var(--display); color:#FFFFFF }
.steps li::after { content:""; position:absolute; top:-4px; left:0; width:8px; height:8px; background:#FFFFFF; border-radius:1px }
.steps h3 { font-size:1.4rem }
.steps p { color:var(--hero-muted); font-size:.95rem; max-width:30ch }

/* Contact */
.contact .wrap { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px }
.contact-info { display:grid; gap:18px; align-content:start; min-width:0 }
.contact-info h2 { font-size:var(--s2) }
.cards { display:grid; gap:10px; margin-top:8px }
.ci { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); min-width:0 }
.ci small { display:block; font:600 .8rem var(--display); text-transform:uppercase; letter-spacing:.1em; color:var(--muted) }
.ci b { font-weight:600; user-select:all; overflow-wrap:anywhere }
.copy { flex:none; background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:.35rem .7rem; font:500 .8rem var(--body); cursor:pointer }
.copy:hover { border-color:var(--muted) }
form.enquiry { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px; display:grid; grid-template-columns:1fr 1fr; gap:16px; min-width:0 }
.f { display:grid; gap:6px; min-width:0 }
.f.full { grid-column:1 / -1 }
.f label { font-weight:600; font-size:.88rem }
.f input, .f select, .f textarea { width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.7rem .8rem }
.f input:focus, .f select:focus, .f textarea:focus { outline:2px solid var(--c2); outline-offset:0; border-color:var(--c2) }
.form-foot { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:14px }
.form-note { color:var(--muted); font-size:.85rem; flex:1; min-width:200px }
.form-done { grid-column:1 / -1; padding:12px 14px; border-radius:8px; background:var(--tint); font-size:.92rem }

footer { background:var(--hero); color:var(--hero-muted); font-size:.9rem }
footer .wrap { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between; padding-block:36px }
footer .brand { color:var(--hero-ink); font-size:1.2rem }
footer nav { display:flex; flex-wrap:wrap; gap:20px }
footer a { text-decoration:none } footer a:hover { color:var(--hero-ink) }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } .track { transition:none } .btn:hover { transform:none } }
@media (max-width: 1000px) {
  .hero .wrap, .product .wrap, .contact .wrap { grid-template-columns:1fr }
  .hero-copy { padding-bottom:8px }
  .swatch { min-height:220px }
  .div-row { grid-template-columns:56px minmax(0,1fr); gap:16px 20px }
  .div-tag { width:56px; height:56px } .div-tag svg { width:28px; height:28px }
  .offer, .div-cta { grid-column:2 }
  .sectors, .why, .steps { grid-template-columns:1fr 1fr; gap:24px }
  .steps li { padding-right:12px }
}
@media (max-width: 720px) {
  .menu-btn { display:block }
  .nav { display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--hero); border-bottom:1px solid var(--hero-line); padding:8px max(16px, env(safe-area-inset-right,0px)) 16px max(16px, env(safe-area-inset-left,0px)) }
  .nav.open { display:flex }
  .nav a { padding:12px 0; border-bottom:1px solid var(--hero-line) }
  .nav .btn { margin-top:12px; justify-content:center; border-bottom:0 }
  .hero .wrap { padding-block:48px 0 }
  section.band { padding-block:64px }
  .swatch b { font-size:1rem } .swatch small { display:none }
  .offer, .sectors, .why, .steps, .pk, form.enquiry { grid-template-columns:1fr }
  .div-row { grid-template-columns:1fr } .offer, .div-cta { grid-column:1 }
  .slide { grid-template-columns:1fr } .app-side { display:none }
  form.enquiry { padding:20px }
}

/* ---------- Blog & CMS additions ---------- */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form-done.ok { background:var(--tint); border-left:4px solid var(--c5) }
.wrap.narrow { max-width:780px }
.sec-head-row { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; max-width:none }
.sec-head-row > div { display:grid; gap:14px; max-width:760px }
.page-title { font-size:var(--s2) }

.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.post-card a { display:grid; height:100%; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .15s, border-color .15s }
.post-card a:hover { transform:translateY(-2px); border-color:var(--muted) }
.post-card-media { aspect-ratio:16/9; background:var(--hero); max-width:100% }
.post-card-media img { width:100%; height:100%; object-fit:cover; display:block }
.post-card-art { display:block; width:100%; height:100%; background:linear-gradient(90deg, var(--c1) 0 20%, var(--c2) 20% 40%, var(--c3) 40% 60%, var(--c4) 60% 80%, var(--c5) 80%) }
.post-card-body { padding:20px 22px 22px; display:grid; gap:8px; align-content:start }
.post-card h3 { font-size:1.45rem }
.post-card p { color:var(--muted); font-size:.94rem }
.post-meta { font-size:.82rem; color:var(--muted) }
.post-tag { justify-self:start; font:600 .78rem var(--display); text-transform:uppercase; letter-spacing:.12em; color:var(--accent-ink) }

.blog-hero .wrap { grid-template-columns:1fr; padding-block:64px }
.blog-hero .hero-copy { padding-bottom:0 }
.blog-hero h1 { max-width:none }
.tag-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px }
.tag-filter a, .pager a { text-decoration:none; padding:6px 14px; border:1px solid var(--line); border-radius:999px; font-size:.88rem; color:var(--ink) }
.tag-filter a[aria-current], .pager a[aria-current] { background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.pager { display:flex; gap:8px; margin-top:40px; justify-content:center }

.preview-bar { background:#FFF4D6; color:#4A3500; padding:10px max(16px, env(safe-area-inset-left,0px)); text-align:center; font-size:.9rem }
.preview-bar a { font-weight:600 }
.post-head { background:var(--hero); color:var(--hero-ink); padding-block:56px 48px }
.post-head .wrap { display:grid; gap:14px }
.post-head h1 { font-size:clamp(2.2rem, 5vw, 3.6rem) }
.post-head .post-meta { color:var(--hero-muted) }
.post-head .post-tag { color:#FFFFFF }
.post-tags { display:flex; gap:12px; flex-wrap:wrap }
.back-link { color:var(--hero-muted); text-decoration:none; font-size:.9rem } .back-link:hover { color:#fff }
.post-cover { width:100%; border-radius:12px; margin-top:32px; display:block }
.prose { padding-block:40px 24px; font-size:1.08rem; line-height:1.75; display:grid; grid-template-columns:minmax(0,1fr); gap:1.1em; min-width:0 }
.prose img { max-width:100%; height:auto }
.prose h2 { font-size:2rem; margin-top:.6em } .prose h3 { font-size:1.55rem; margin-top:.4em } .prose h4 { font-size:1.25rem }
.prose a { color:var(--accent-ink); text-underline-offset:3px }
.prose ul, .prose ol { margin:0; padding-left:1.4em; display:grid; gap:.4em }
.prose blockquote { margin:0; padding:4px 0 4px 20px; border-left:4px solid var(--c3); color:var(--muted); font-size:1.12rem }
.prose img { border-radius:10px; display:block }
.prose figure { margin:0; display:grid; gap:8px } .prose figcaption { color:var(--muted); font-size:.88rem }
.prose code { background:var(--tint); padding:.1em .35em; border-radius:4px; font-size:.92em }
.prose pre { background:var(--hero); color:#EEF; padding:16px; border-radius:10px; overflow-x:auto; font-size:.9rem; margin:0 }
.prose pre code { background:none; padding:0 }
.prose hr { border:0; border-top:1px solid var(--line); width:100% }
.post-cta { background:var(--surface); border-block:1px solid var(--line) }
.post-cta h2 { font-size:var(--s2) }

@media (max-width: 1000px) { .post-grid { grid-template-columns:1fr 1fr } }
@media (max-width: 720px) { .post-grid { grid-template-columns:1fr } }