:root {
  --mfs-green: #97D729;
  --mfs-green-dark: #6FA31E;
  --bg-black: #101012;
  --bg-black-2: #18181B;
  --text-light: #F2F2EF;
  --text-muted: #A8A8A2;
}
html { overflow-anchor: none; height: 100%; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg-black);
  color: var(--text-light);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.6;
  overflow-anchor: none;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
/* Pushes the footer to the bottom on short pages instead of leaving a
   gap below it. The page's own content is wrapped in <main>. */
main { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Visually hidden but still readable by screen readers and search
   engines — used for the brand-name H1 that sits behind the logo image
   (the logo itself carries the visible branding). Uses clip/absolute
   positioning rather than display:none so it stays in the accessibility
   tree. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header
   The large ("hero") and small ("scrolled") states are both built with
   the brand and nav absolutely positioned inside the header, rather
   than switching flex-direction/justify-content between states — those
   properties can't be animated, so switching them caused the logo to
   visibly "snap"/flash into place instead of smoothly shrinking and
   sliding left. Everything below (position, size, gap) is a plain
   numeric value, so it transitions smoothly together. */
header {
  background: var(--mfs-green);
  position: sticky;
  top: 0;
  z-index: 100;
  height: 280px;
  overflow: hidden;
  transition: height 0.35s ease;
}
.brand {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
  /* Explicitly nowrap: this sits inside an absolutely-positioned,
     auto-width box, and browsers can be inconsistent about how they
     shrink-to-fit that combination — occasionally sizing it as if it
     had the full header's width available rather than just what the
     icon+wordmark actually need, which let the wordmark wrap onto its
     own line and collide with the nav links below it. Above the mobile
     breakpoint (where this row is the only thing shown) it should
     always stay on one line regardless. */
  flex-wrap: nowrap;
  transition: left 0.35s ease, top 0.35s ease, transform 0.35s ease, gap 0.35s ease;
}
/* flex-shrink:0 and max-width:none override the flex/img defaults that
   were letting these two get squeezed narrower than their real size
   whenever the row didn't have quite enough room — flex items shrink
   by default, and the global img{max-width:100%} reset compounds it,
   together compressing the wordmark's width while its height stayed
   pinned, which is what was making it look squished/stretched. An
   explicit width (matching the wordmark's true ~575:138 ratio at
   150px tall) keeps it locked to its real proportions no matter what. */
.brand img.icon { height: 190px; width: 190px; flex-shrink: 0; max-width: none; transition: height 0.35s ease, width 0.35s ease; }
.brand img.wordmark { height: 150px; width: 625px; flex-shrink: 0; max-width: none; transition: height 0.35s ease; }
.brand img.mobile-badge, .mobile-badge-link { display: none; } /* shown only at the mobile breakpoint below */
.nav-toggle { display: none; } /* shown only at the mobile breakpoint below */

nav {
  position: absolute;
  left: 50%;
  top: 230px;
  transform: translateX(-50%);
  display: flex;
  gap: 32px;
  transition: left 0.35s ease, top 0.35s ease, transform 0.35s ease, gap 0.35s ease;
}
nav a {
  color: #14210a;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
nav a:hover, nav a.active { border-color: #14210a; }

header.scrolled { height: 66px; }
header.scrolled .brand {
  left: 40px;
  top: 10px;
  transform: translateX(0);
  gap: 12px;
}
header.scrolled .brand img.icon { height: 46px; width: 46px; }
/* Needs its own explicit width, matching the wordmark's true ~575:138
   ratio at this smaller height — otherwise it inherits the large
   state's 625px width (added to stop it from being squeezed narrow)
   while only height shrinks, stretching it into a long, flat sliver. */
header.scrolled .brand img.wordmark { height: 34px; width: 142px; }
header.scrolled nav {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 28px;
}

/* Suspends the shrink animation for one frame when the compact state is
   applied immediately on page load (landing on a #hash), so it doesn't
   visibly animate from large to small — see the inline script above. */
header.no-anim,
header.no-anim .brand,
header.no-anim .brand img.icon,
header.no-anim .brand img.wordmark,
header.no-anim nav {
  transition: none !important;
}

/* Mobile header: a fixed-size bar with the round badge logo centered
   and a hamburger menu, instead of the shrink/grow hero header used on
   larger screens. header.scrolled is pinned to the exact same layout
   as the plain header here, so scrolling never changes its size —
   the JS still toggles that class same as always, it just has no
   visual effect at this width.
   Breakpoint is 900px, not 700px: the desktop header's icon+wordmark
   need roughly 850-900px of room to sit side by side without
   wrapping. Below that (but above where this used to kick in at
   700px), the wordmark was wrapping onto its own line and colliding
   with the nav links beneath it — switching to this compact layout
   earlier avoids that gap entirely. */
@media (max-width: 900px) {
  header, header.scrolled {
    height: 148px; /* badge (142px) plus a 3px margin top and bottom */
    overflow: visible; /* the dropdown nav below needs to extend past the header's own box */
  }
  .brand, header.scrolled .brand {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    gap: 0;
  }
  .brand img.icon, .brand img.wordmark { display: none; }
  .brand img.mobile-badge, .mobile-badge-link { display: block; }
  /* Explicit width (matching the image's real ~800x743 ratio) plus
     object-fit:contain rather than width:auto — belt-and-suspenders
     against anything upstream (flex sizing, the global img{max-width}
     reset) squishing it into an oval instead of keeping it round. */
  .brand img.mobile-badge { height: 142px; width: 155px; object-fit: contain; flex-shrink: 0; }

  /* Anchored to a fixed corner rather than vertically centered on the
     header, so it stays put in the top corner instead of drifting to
     the middle of the much taller badge-sized header. */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: #14210a;
    border-radius: 2px;
  }

  nav, header.scrolled nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 148px;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--mfs-green);
    box-shadow: 0 8px 16px rgba(0,0,0,0.35);
  }
  /* Needs to match (or beat) the specificity of "header.scrolled nav"
     above — otherwise, anywhere the header has already collapsed to its
     "scrolled" state (i.e. everywhere except sitting right at the very
     top of Home), that higher-specificity rule's display:none would
     always win over plain ".mobile-open", so tapping the hamburger
     would silently do nothing except right at the top of the page. */
  nav.mobile-open, header.scrolled nav.mobile-open { display: flex; }
  nav a {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(20,33,10,0.15);
    text-align: center;
  }
  /* The active-section underline (bold, opaque) is meant for the
     desktop nav bar; in the dropdown it just made whichever link
     happens to be "active" look like it had a heavier divider than the
     others. Keep all the dividers uniform here instead. */
  nav a:hover, nav a.active { border-color: rgba(20,33,10,0.15); }

  /* Hero intro card: the heading's default size/line-height (tuned for
     one line on desktop) looks oversized and too airy once it wraps to
     several lines on a narrow screen. */
  .hero h1 { font-size: 26px; line-height: 1.3; margin-bottom: 10px; }
  .hero p { font-size: 15px; }
  /* .btn only has horizontal margin, which does nothing to separate the
     two hero buttons once they wrap onto their own stacked lines —
     giving them margin on every side adds real space between them. */
  .hero .btn { margin: 8px; }
  /* The background image is desktop/tablet only — never shown on phones. */
  .hero-bg-layers, .hero-bg-fade { display: none; }
}

/* Hero */
.hero {
  background: var(--bg-black-2);
  padding: 90px 40px;
  text-align: center;
  border-bottom: 1px solid #2a2a2a;
  position: relative;
  overflow: hidden;
}
.hero h1 { font-size: 38px; letter-spacing: 1px; margin-bottom: 14px; }
.hero p { color: var(--text-muted); font-size: 17px; max-width: 560px; margin: 0 auto 30px; }

/* Optional admin-uploaded background image(s): faded so it reads as
   texture rather than a photo, and faded to the section's own
   background color at the left/right edges so it never looks like a
   hard-edged box sitting on top of the page. Desktop/tablet only — see
   the mobile breakpoint below, which turns this off entirely.
   Each uploaded image is its own stacked layer div (rather than a
   single background-image) so that with more than one, site.js can
   cross-fade between them by toggling which layer has .active — with
   only one layer, that one is simply always .active and nothing
   cycles.
   Capped to the same 1200px content width as the rest of the page
   (see the shared "section" rule below) and centered, rather than
   stretching edge-to-edge — on an ultrawide monitor a full-bleed image
   was getting stretched thin and made the card look like a bare strip.
   Outside that 1200px column it just falls back to .hero's own plain
   background color, matching the rest of the page. */
.hero-bg-layers, .hero-bg-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
}
.hero-bg-layers { z-index: 0; }
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.hero-bg-layer.active { opacity: 0.32; }
.hero-bg-fade {
  z-index: 1;
  background: linear-gradient(to right,
    var(--bg-black-2) 0%,
    rgba(24, 24, 27, 0) 20%,
    rgba(24, 24, 27, 0) 80%,
    var(--bg-black-2) 100%);
}
.hero h1, .hero p, .hero .btn { position: relative; z-index: 2; }

.btn {
  display: inline-block;
  background: var(--mfs-green);
  color: #14210a;
  font-weight: 700;
  padding: 13px 30px;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin: 0 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn.outline { background: transparent; border: 2px solid var(--mfs-green); color: var(--mfs-green); }

/* Sections */
section { padding: 70px 40px; max-width: 1200px; margin: 0 auto; }
.section-title { font-size: 26px; text-align: center; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-sub { text-align: center; color: var(--text-muted); margin-bottom: 46px; font-size: 15px; }

/* Services */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.service-card {
  background: var(--bg-black-2);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 30px 26px;
  transition: border-color 0.2s, transform 0.2s;
}
.service-card:hover { border-color: var(--mfs-green); transform: translateY(-3px); }
.service-card .icon-badge {
  width: 46px; height: 46px;
  background: var(--mfs-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #14210a; margin-bottom: 16px;
}
.service-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--mfs-green); }
.service-card ul { list-style: none; color: var(--text-muted); font-size: 14px; }
.service-card li { padding: 4px 0; }
.service-card li::before { content: "\203A "; color: var(--mfs-green); }

/* Gallery */
.gallery-section { background: var(--bg-black-2); border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
.gallery-toolbar { display: flex; justify-content: center; gap: 10px; margin-bottom: 34px; flex-wrap: wrap; }
.filter-pill {
  border: 1px solid #3a3a3a;
  padding: 7px 18px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  font-family: inherit;
}
.filter-pill.active { background: var(--mfs-green); color: #14210a; border-color: var(--mfs-green); font-weight: 700; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.gallery-item {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #1e2b12;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #2a2a2a;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .overlay {
  position: absolute; inset: 0;
  background: rgba(16,16,18,0.75);
  display: flex; align-items: flex-end;
  padding: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 13px; font-weight: 700; color: var(--mfs-green);
}
.gallery-item:hover .overlay { opacity: 1; }
.gallery-empty { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* Portfolio pagination — built up around the .gallery-grid by JS when
   there's more than 7 rows' worth of pieces. */
.portfolio-pager { overflow: hidden; transition: height 0.4s ease; }
.portfolio-track {
  display: flex;
  align-items: flex-start; /* without this, flex stretches every page to match the tallest one, defeating the per-page height resize in site.js */
  transition: transform 0.4s ease;
}
.portfolio-track > .gallery-grid { flex: 0 0 100%; width: 100%; align-content: start; }
.portfolio-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
}
.portfolio-controls.single-page { display: none; }
.portfolio-page-indicator { flex: 1; text-align: center; }
.portfolio-nav {
  background: rgba(255,255,255,0.06);
  border: 1px solid #333;
  color: var(--text-light);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
}
.portfolio-nav:hover:not(:disabled) { background: rgba(255,255,255,0.16); }
.portfolio-nav:disabled { opacity: 0.3; cursor: default; }
.portfolio-page-indicator { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* Lightbox */
.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 85vh; border-radius: 4px; }
.lightbox .lightbox-caption { text-align: center; margin-top: 14px; color: var(--text-light); font-size: 14px; }
.lightbox-close {
  position: absolute; top: 24px; right: 32px;
  color: var(--text-light); font-size: 32px; cursor: pointer; line-height: 1;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--text-light);
  font-size: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
@media (max-width: 700px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 18px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* Contact */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
@media (max-width: 800px) { .contact-wrap { grid-template-columns: 1fr; } }
.contact-form label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; margin-top: 16px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  background: var(--bg-black-2);
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 11px 12px;
  color: var(--text-light);
  font-size: 14px;
  font-family: inherit;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .btn { margin: 22px 0 0; display: inline-block; }
.contact-info h3 { color: var(--mfs-green); margin-bottom: 14px; font-size: 18px; }
.contact-info p { color: var(--text-muted); font-size: 14px; margin-bottom: 10px; }
.form-message { padding: 12px 16px; border-radius: 4px; font-size: 14px; margin-bottom: 10px; }
.form-message.success { background: rgba(151,215,41,0.15); color: var(--mfs-green); border: 1px solid var(--mfs-green); }
.form-message.error { background: rgba(226,75,74,0.15); color: #e24b4a; border: 1px solid #e24b4a; }

/* Footer */
footer { background: var(--mfs-green); color: #14210a; padding: 50px 40px 30px; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
footer h4 { margin-bottom: 14px; font-size: 16px; }
footer p, footer a { font-size: 14px; opacity: 0.85; display: block; margin-bottom: 8px; }
.footer-bottom {
  max-width: 1200px;
  margin: 30px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(20,33,10,0.25);
  font-size: 12px;
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
/* Uses the darker of the two greens already defined at the top of this
   file, rather than the footer's own brighter green — deliberately low
   contrast against the footer background so it reads as "quiet
   maintenance link" rather than drawing the eye. */
.footer-admin-link { color: var(--mfs-green-dark) !important; opacity: 1; margin-bottom: 0; flex-shrink: 0; }
.footer-admin-link:hover { text-decoration: underline; }

/* Admin */
.admin-body { background: #f4f4f2; color: #1a1a1a; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; background: #14210a; color: #fff; padding: 24px 0; flex-shrink: 0; }
.admin-sidebar .brand-mini { display: flex; align-items: center; gap: 10px; padding: 0 20px 24px; }
.admin-sidebar .brand-mini img { height: 36px; width: 36px; }
.admin-sidebar .brand-mini span { font-weight: 700; font-size: 14px; }
.admin-sidebar a {
  display: block; padding: 12px 20px; color: #d8e8c0; font-size: 14px;
  border-left: 3px solid transparent;
}
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(151,215,41,0.15); border-left-color: var(--mfs-green); color: #fff; }
.admin-main { flex: 1; padding: 32px 40px; max-width: 1100px; }
.admin-main h1 { font-size: 24px; margin-bottom: 24px; }
.admin-card { background: #fff; border: 1px solid #e2e2de; border-radius: 8px; padding: 24px; margin-bottom: 24px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
.admin-table th { color: #666; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
img.thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.admin-btn {
  display: inline-block; background: var(--mfs-green-dark); color: #fff; border: none;
  padding: 9px 18px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.admin-btn.secondary { background: #e2e2de; color: #333; }
.admin-btn.danger { background: #c0392b; }
.admin-form label { display: block; font-size: 13px; color: #555; margin: 14px 0 6px; font-weight: 600; }
.admin-form input, .admin-form select, .admin-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; font-family: inherit;
}
.admin-form textarea { min-height: 90px; }
.admin-checklist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.admin-checklist label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; background: #f4f4f2; padding: 6px 10px; border-radius: 4px; }
.admin-flash { padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; font-size: 14px; }
.admin-flash.success { background: #eaf7d9; color: #3b6d11; border: 1px solid #97C459; }
.admin-flash.error { background: #fbe4e4; color: #a32d2d; border: 1px solid #f09595; }
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #14210a; }
.login-box { background: #fff; padding: 40px; border-radius: 8px; width: 340px; text-align: center; }
.login-box img { height: 70px; margin: 0 auto 16px; }
.login-box h1 { font-size: 18px; margin-bottom: 20px; }
.drag-handle { cursor: grab; color: #999; }

/* Blog */
.blog-section { padding: 70px 40px; max-width: 900px; margin: 0 auto; }
.blog-post-grid { display: flex; flex-direction: column; gap: 30px; }
.blog-post-card {
  background: var(--bg-black-2);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.blog-post-cover { width: 260px; flex-shrink: 0; object-fit: cover; min-height: 180px; }
.blog-post-body { padding: 24px; flex: 1; min-width: 240px; }
.blog-post-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; flex-wrap: wrap; }
.blog-post-body h2 { font-size: 20px; margin-bottom: 10px; }
.blog-post-body h2 a { color: var(--text-light); }
.blog-post-body h2 a:hover { color: var(--mfs-green); }
.blog-post-excerpt { color: var(--text-muted); font-size: 14px; margin-bottom: 14px; }
.blog-read-more { color: var(--mfs-green); font-weight: 700; font-size: 13px; }

.blog-post-full { max-width: 760px; }
.blog-post-title { font-size: 30px; margin: 10px 0 20px; letter-spacing: 0.5px; }
.blog-post-cover.blog-post-cover { width: 100%; max-height: 420px; border-radius: 8px; margin-bottom: 24px; }
.blog-post-content { font-size: 16px; line-height: 1.8; color: var(--text-light); }
.blog-post-content p { margin-bottom: 18px; }
.blog-post-content h2 { font-size: 22px; margin: 30px 0 14px; color: var(--mfs-green); }
.blog-post-content img { max-width: 100%; border-radius: 6px; margin: 14px 0; }
.blog-post-content blockquote { border-left: 3px solid var(--mfs-green); padding-left: 16px; color: var(--text-muted); margin: 18px 0; }
.blog-post-content code { background: var(--bg-black-2); padding: 2px 6px; border-radius: 4px; font-size: 14px; }
.blog-post-content a { color: var(--mfs-green); text-decoration: underline; }
.blog-post-content .enlargeable img { cursor: zoom-in; }
.blog-post-full .blog-read-more { display: inline-block; margin-top: 30px; }

@media (max-width: 600px) {
  .blog-post-card { flex-direction: column; }
  .blog-post-cover { width: 100%; }
}

/* Homepage News preview section */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.news-card {
  background: var(--bg-black-2);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 24px;
}
.news-card-date { font-size: 12px; color: var(--text-muted); margin: 10px 0 8px; }
.news-card h3 { font-size: 17px; margin-bottom: 10px; }
.news-card h3 a:hover { color: var(--mfs-green); }
.news-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }