*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f7f6f2;
  --bg2:#ffffff;
  --bg3:#f0ede6;
  --surface:#ffffff;
  --border:#e2ddd5;
  --border2:#ccc8bf;
  --text:#1a1814;
  --muted:#6b6560;
  --dim:#9c978f;
  --edu:#1a6b45;
  --edu-light:#e8f5ef;
  --edu-mid:#2d8a5a;
  --health:#8b4500;
  --health-light:#fef3e6;
  --health-mid:#b35800;
  --mfg:#1a2e6b;
  --mfg-light:#eaedfa;
  --mfg-mid:#2441a0;
  --media:#6b1a55;
  --media-light:#f9edf6;
  --media-mid:#8e2372;
  --accent:#1a2e6b;
  --radius:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --font-head:'Playfair Display',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.05);
  --shadow-lg:0 4px 24px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);
}

body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.65;min-height:100vh;overflow-x:hidden}

/* ── NAV ───────────────────────────────── */
nav{position:sticky;top:0;z-index:100;background:rgba(247,246,242,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 2rem}
.nav-inner{max-width:1320px;margin:0 auto;height:60px;display:flex;align-items:center;gap:1.5rem}
.nav-logo{font-family:var(--font-head);font-size:1.25rem;font-weight:700;color:var(--text);cursor:pointer;letter-spacing:-.01em;flex-shrink:0;display:flex;align-items:center;gap:.5rem}
.nav-logo-dot{width:7px;height:7px;border-radius:50%;background:var(--edu);display:inline-block}
.nav-divider{width:1px;height:20px;background:var(--border2);flex-shrink:0}
.nav-filters{display:flex;gap:.25rem;flex:1;overflow-x:auto;scrollbar-width:none}
.nav-filters::-webkit-scrollbar{display:none}
.nav-btn{padding:.25rem .6rem;border-radius:2px;border:1px solid transparent;background:transparent;color:var(--muted);font-family:var(--font-body);font-size:.7rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s;letter-spacing:.01em;text-transform:uppercase}
.nav-btn:hover{color:var(--text);background:var(--bg3);border-color:var(--border)}
.nav-btn.active{background:var(--text);color:#fff;border-color:var(--text)}
.nav-btn[data-cat="education"].active{background:var(--edu);border-color:var(--edu)}
.nav-btn[data-cat="healthcare"].active{background:var(--health);border-color:var(--health)}
.nav-btn[data-cat="manufacturing"].active{background:var(--mfg);border-color:var(--mfg)}
.nav-btn[data-cat="media"].active{background:var(--media);border-color:var(--media)}
.nav-search{display:flex;align-items:center;gap:.5rem;background:var(--bg3);border:1px solid var(--border);border-radius:2px;padding:.3rem .85rem;flex-shrink:0;transition:border-color .15s}
.nav-search:focus-within{border-color:var(--border2)}
.nav-search input{background:none;border:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:.75rem;width:100px}
.nav-search input::placeholder{color:var(--dim)}
.search-icon{color:var(--dim);font-size:.8rem}

/* ── MASTHEAD ─────────────────────────── */
.masthead{border-bottom:1px solid var(--border);background:var(--bg2)}
.masthead-inner{max-width:1320px;margin:0 auto;padding:4rem 2rem 3.5rem;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end}
.masthead-kicker{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.kicker-rule{width:28px;height:1px;background:var(--dim)}
.masthead h1{font-family:var(--font-head);font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--text);max-width:760px}
.masthead h1 em{font-style:italic;color:var(--edu)}
.masthead-sub{font-size:.95rem;color:var(--muted);font-weight:300;margin-top:1.1rem;max-width:520px;line-height:1.75}
.masthead-stats{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-end}
.stat{text-align:right}
.stat-num{font-family:var(--font-head);font-size:2.4rem;font-weight:700;line-height:1;color:var(--text)}
.stat-label{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:.2rem}
.stat-rule{width:100%;height:1px;background:var(--border);margin:0}

/* ── MAIN ─────────────────────────────── */
main{max-width:1320px;margin:0 auto;padding:3rem 2rem 5rem}

/* ── SECTION HEADERS ─────────────────── */
.section-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem;padding-bottom:.9rem;border-bottom:1px solid var(--border)}
.section-head-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.section-head-count{font-size:.72rem;font-weight:500;color:var(--dim);margin-left:auto;font-family:var(--font-mono)}

/* ── FEATURED CARD ────────────────────── */
.featured-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;margin-bottom:3rem;cursor:pointer;transition:box-shadow .2s,transform .2s;box-shadow:var(--shadow)}
.featured-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.featured-visual{min-height:340px;display:flex;align-items:flex-end;padding:2rem;position:relative;overflow:hidden}
.featured-visual-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.featured-visual-bg::after{content:'';position:absolute;inset:0;pointer-events:none}
.visual-education .featured-visual-bg{background-color:#c8e8d8}
.visual-education .featured-visual-bg::after{background:linear-gradient(145deg,rgba(232,245,239,.68) 0%,rgba(29,107,69,.55) 100%)}
.visual-healthcare .featured-visual-bg{background-color:#fde0ba}
.visual-healthcare .featured-visual-bg::after{background:linear-gradient(145deg,rgba(254,243,230,.68) 0%,rgba(139,69,0,.55) 100%)}
.visual-manufacturing .featured-visual-bg{background-color:#c8d0f5}
.visual-manufacturing .featured-visual-bg::after{background:linear-gradient(145deg,rgba(234,237,250,.68) 0%,rgba(26,46,107,.55) 100%)}
.visual-media .featured-visual-bg{background-color:#f0cce8}
.visual-media .featured-visual-bg::after{background:linear-gradient(145deg,rgba(249,237,246,.68) 0%,rgba(107,26,85,.55) 100%)}
.featured-visual-num{position:absolute;bottom:-1rem;right:1.5rem;font-family:var(--font-head);font-size:9rem;font-weight:700;line-height:1;opacity:.08;color:var(--text)}
.featured-visual-category{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:2px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.featured-visual-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:5rem;opacity:.2}
.featured-body{padding:2.5rem 2.5rem 2.5rem;display:flex;flex-direction:column;gap:1rem;justify-content:center}
.cat-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .75rem;border-radius:2px;align-self:flex-start}
.pill-edu{background:var(--edu-light);color:var(--edu)}
.pill-healthcare{background:var(--health-light);color:var(--health)}
.pill-manufacturing{background:var(--mfg-light);color:var(--mfg)}
.pill-media{background:var(--media-light);color:var(--media)}
.featured-body h2{font-family:var(--font-head);font-size:1.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--text)}
.featured-tagline{font-size:.9rem;color:var(--muted);line-height:1.55}
.featured-excerpt{font-size:.88rem;color:var(--muted);line-height:1.7;font-weight:400}
.service-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{background:var(--bg3);border:1px solid var(--border);border-radius:2px;padding:.2rem .55rem;font-size:.68rem;color:var(--muted);font-family:var(--font-mono);letter-spacing:.02em}
.chip-edu{background:var(--edu-light);color:var(--edu);border-color:transparent}
.chip-healthcare{background:var(--health-light);color:var(--health);border-color:transparent}
.chip-manufacturing{background:var(--mfg-light);color:var(--mfg);border-color:transparent}
.chip-media{background:var(--media-light);color:var(--media);border-color:transparent}
.read-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text);border:1px solid var(--border2);border-radius:2px;padding:.45rem 1rem;transition:all .15s}
.read-btn:hover{background:var(--text);color:#fff;border-color:var(--text)}

/* ── GRID ─────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--border)}
.blog-card{background:var(--bg2);padding:1.75rem;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;gap:.85rem}
.blog-card:hover{background:var(--bg3)}
.card-meta{display:flex;align-items:center;justify-content:space-between}
.card-num{font-family:var(--font-mono);font-size:.68rem;color:var(--dim);font-weight:500}
.card-title{font-family:var(--font-head);font-size:1.08rem;font-weight:700;line-height:1.35;color:var(--text);letter-spacing:-.01em}
.card-tagline{font-size:.8rem;color:var(--muted);line-height:1.5}
.card-excerpt{font-size:.82rem;color:var(--muted);line-height:1.65;font-weight:400}
.card-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto}
.card-footer-row{display:flex;align-items:center;justify-content:space-between;margin-top:.25rem}
.card-arrow{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.blog-card:hover .card-arrow{color:var(--text)}

/* ── NO RESULTS ──────────────────────── */
.no-results{padding:5rem 2rem;text-align:center;display:none}
.no-results.show{display:block}
.no-results h3{font-family:var(--font-head);font-size:1.5rem;margin-bottom:.5rem;color:var(--muted)}
.no-results p{color:var(--dim);font-size:.875rem}

/* ── MODAL ────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(20,18,14,.6);backdrop-filter:blur(4px);overflow-y:auto;padding:2rem 1rem}
.modal-overlay.open{display:flex;align-items:flex-start;justify-content:center}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:780px;width:100%;overflow:hidden;box-shadow:var(--shadow-lg);margin:auto}
.modal-hero{padding:2.5rem 2.5rem 2rem;border-bottom:1px solid var(--border)}
.modal-kicker{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.modal-badge{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .75rem;border-radius:2px}
.modal-uc{font-size:.65rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-family:var(--font-mono)}
.modal-title{font-family:var(--font-head);font-size:1.9rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--text);margin-bottom:.6rem}
.modal-tagline{font-size:1rem;color:var(--muted);line-height:1.55}
.modal-body{padding:2rem 2.5rem}
.modal-section{margin-bottom:1.75rem}
.modal-section-label{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:.65rem;display:flex;align-items:center;gap:.5rem}
.modal-section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.modal-text{font-size:.88rem;line-height:1.75;color:var(--muted)}
.modal-services{display:flex;flex-wrap:wrap;gap:.5rem}
.modal-svc{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;border:1px solid var(--border);border-radius:2px;font-size:.75rem;font-family:var(--font-mono);color:var(--text)}
.svc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.how-steps{display:flex;flex-direction:column;gap:.85rem}
.how-step{display:grid;grid-template-columns:32px 1fr;gap:1rem;align-items:start}
.step-num{width:32px;height:32px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;font-family:var(--font-mono);flex-shrink:0}
.step-text{font-size:.85rem;color:var(--muted);line-height:1.7;padding-top:.4rem}
.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.benefit{padding:1rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg3)}
.benefit-icon{font-size:1.1rem;margin-bottom:.4rem}
.benefit-title{font-size:.8rem;font-weight:600;color:var(--text);margin-bottom:.25rem}
.benefit-text{font-size:.78rem;color:var(--muted);line-height:1.6}
.modal-scenario{border-left:3px solid;padding:1.1rem 1.25rem;background:var(--bg3);border-radius:0 var(--radius-md) var(--radius-md) 0}
.modal-scenario-label{font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:.4rem}
.modal-scenario-text{font-size:.84rem;color:var(--muted);line-height:1.75}
.modal-close{position:absolute;top:1.25rem;right:1.5rem;background:none;border:1px solid var(--border);border-radius:2px;width:32px;height:32px;cursor:pointer;font-size:1rem;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:all .15s}
.modal-close:hover{background:var(--text);color:#fff;border-color:var(--text)}
.modal-hero{position:relative}

/* ── FOOTER ───────────────────────────── */
footer{border-top:1px solid var(--border);background:var(--bg2);padding:2rem;text-align:center}
.footer-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-logo{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--text)}
.footer-note{font-size:.75rem;color:var(--dim)}

/* ── RESPONSIVE ──────────────────────── */
@media(max-width:900px){
  .featured-card{grid-template-columns:1fr}
  .featured-visual{min-height:200px}
  .masthead-inner{grid-template-columns:1fr;gap:1.5rem}
  .masthead-stats{flex-direction:row;align-items:center;justify-content:flex-start}
  .stat{text-align:left}
  .benefits-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  nav .nav-divider,.nav-search{display:none}
  .masthead h1{font-size:1.9rem}
  .modal-body{padding:1.5rem}
  .modal-hero{padding:1.75rem 1.5rem 1.5rem}
  .modal-title{font-size:1.4rem}
}
