/* mire.cc design layer (2026-09-24), loaded after site.css.
 *
 * site.css keeps the behavioural parts (dropdowns, mobile nav, blog
 * loader, like button, contact form); this file restyles everything to
 * the look shared with about.ciso.li/MIRE (iamcisoli/MIRE/assets/
 * mire-theme.css): full-bleed sections, navy->green heroes, a deep-green
 * translucent header, Mulish headings, Open Sans text, dark footer.
 * Home-page sections use their own home-* classes.
 */

:root{
  --navy:#0b193d; --teal-2:#16504a; --green:#248b59; --green-hi:#3fcf7f;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --line:#e2e8f0;
  --paper:#ffffff; --soft:#f3f7f5; --dark:#0c1417;
  --deep:rgba(3,34,20,.86); --hdr:64px; --radius:16px; --wrap:1160px;
  --hero-grad:linear-gradient(90deg,#0b193d 0%,#0f2840 28%,#16504a 62%,#248b59 100%);
}

/* ---------- base ---------- */
body{ background:var(--paper); color:var(--ink-2); font-family:"Open Sans",system-ui,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5{ font-family:"Mulish",sans-serif; color:var(--ink); letter-spacing:-.015em; text-wrap:balance; }
h1,h2{ font-weight:800; }
h3,h4,h5{ font-weight:700; }
a{ color:var(--green); }
.site-surface{ max-width:none; margin:0; box-shadow:none; background:var(--paper); }
.stage{ max-width:var(--wrap); }
.eyebrow{ font:800 12px/1.3 "Mulish",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--green); }

/* ---------- header (sticky, deep green, translucent) ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--deep);
  -webkit-backdrop-filter:saturate(150%) blur(12px); backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-row{ max-width:var(--wrap); margin:0 auto; padding:0 24px; min-height:var(--hdr); }
.site-branding img{ width:34px; height:34px; border-radius:9px; }
.site-branding-text .site-title{ font:800 18px/1.1 "Mulish",sans-serif; color:#fff; letter-spacing:-.01em; }
.site-branding-text .site-description{ font:600 11px/1.3 "Mulish",sans-serif; color:rgba(255,255,255,.6); }
nav.main-nav > ul > li > a, .main-nav .dropdown-toggle{ color:rgba(255,255,255,.84); font:600 14px/1 "Mulish",sans-serif; }
nav.main-nav > ul > li > a:hover, .main-nav .dropdown-toggle:hover, nav.main-nav > ul > li > a.active{ color:#fff; }
.main-nav .dropdown-toggle{ border-color:rgba(255,255,255,.24); padding:9px 14px; }
.main-nav .dropdown-toggle:hover{ border-color:rgba(255,255,255,.5); }
.dropdown-menu{ border-radius:12px; border:1px solid var(--line); box-shadow:0 16px 40px rgba(15,23,42,.18); }
.dropdown-menu li a{ color:var(--ink); }
.dropdown-menu li a:hover{ background:var(--soft); color:var(--green); }
.nav-toggle span{ background:#fff; }
@media (max-width:760px){
  nav.main-nav{ background:rgba(3,34,20,.97); border-bottom:0; }
  .dropdown-menu{ background:transparent; border:0; }
  .dropdown-menu li a{ color:rgba(255,255,255,.8); }
  .dropdown-menu li a:hover{ background:rgba(255,255,255,.06); color:#fff; }
}

/* ---------- inner-page hero (page_hero, posts) ---------- */
.hero{ background:var(--hero-grad); color:#fff; }
.hero .hero-image{ display:none; }
.hero-text{ max-width:860px; padding:72px 24px 64px; }
.hero-text h1{ color:#fff; font-weight:900; font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.1; }
.hero-text p.lead{ color:rgba(255,255,255,.86); font-weight:400; font-size:clamp(1.05rem,2vw,1.25rem); margin-top:16px; }
.hero-divider{ display:none; }
.hero .article-date, .hero .hero-bottom{ color:var(--green-hi); font:800 13px/1 "Mulish",sans-serif; letter-spacing:.12em; text-transform:uppercase; margin-top:18px; }

/* ---------- bands ---------- */
.band{ padding:72px 0; }
.band.tinted{ background:var(--soft); }

/* ---------- blog cards ---------- */
.post-list{ gap:22px; }
.post-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05); }
.post-card:hover{ border-color:var(--line); transform:translateY(-3px); box-shadow:0 16px 36px rgba(15,23,42,.12); }
.post-card-text{ padding:20px 22px 22px; }
.post-card .post-date{ font:800 11px/1.3 "Mulish",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.post-card h2, .post-card h3{ font-size:1.2rem; line-height:1.25; }
.post-card h2 a:hover, .post-card h3 a:hover{ color:var(--green); }
.post-card .post-excerpt{ font-size:15px; color:var(--ink-2); }
.post-card .read-more, .read-more{ font:800 14px/1 "Mulish",sans-serif; color:var(--green); text-decoration:none; }

/* ---------- article ---------- */
.article-page{ max-width:780px; padding:48px 24px 72px; }
.article-body{ font-size:18px; line-height:1.75; color:var(--ink-2); }
.article-body h2{ font-size:1.7rem; margin:1.8em 0 .6em; }
.article-body h3{ font-size:1.3rem; margin:1.6em 0 .5em; }
.article-body img{ border-radius:12px; }
.article-body blockquote{ border-left:4px solid var(--green); background:var(--soft); margin:1.5em 0; padding:14px 20px; border-radius:0 12px 12px 0; }
.article-body pre, .article-body code{ font-family:"IBM Plex Mono",ui-monospace,monospace; }
.article-body pre{ background:var(--dark); color:#e5edf0; border-radius:12px; padding:16px 18px; }
.pill{ border-radius:999px; }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--dark); color:rgba(229,237,240,.7); padding:60px 0 32px; font-size:15px; border:0; }
.mf-in{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.mf-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:34px; }
.site-footer h4{ color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px; }
.site-footer a{ display:block; color:rgba(229,237,240,.75); text-decoration:none; margin-bottom:8px; }
.site-footer a:hover{ color:#fff; }
.site-footer .mf-brand{ display:flex; align-items:center; gap:10px; color:#fff; margin-bottom:14px; }
.site-footer .mf-brand img{ width:34px; height:34px; border-radius:9px; }
.site-footer .mf-brand b{ font:800 18px/1.1 "Mulish",sans-serif; }
.site-footer .mf-brand small{ display:block; font:600 11px/1.3 "Mulish",sans-serif; color:rgba(255,255,255,.6); }
.site-footer p{ margin:0; max-width:320px; }
.mf-legal{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding-top:20px; font-size:13px; }
.mf-legal a{ display:inline; margin:0; }
.mf-legal .build-tag{ opacity:.5; }
@media (max-width:860px){ .mf-grid{ grid-template-columns:1fr 1fr; } }

/* ================= home page ================= */
.home-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px; font:800 15px/1 "Mulish",sans-serif; text-decoration:none; }
.btn .material-icons{ font-size:18px; }
.btn-primary{ background:var(--green-hi); color:#052e16; box-shadow:0 10px 30px rgba(63,207,127,.35); }
.btn-ghost{ border:1px solid rgba(255,255,255,.35); color:#fff; }

.home-hero{ background:var(--hero-grad); color:#fff; position:relative; overflow:hidden; margin-top:calc(-1 * var(--hdr)); padding:calc(var(--hdr) + 36px) 0 120px; }
.home-hero-art{ width:100%; max-width:1180px; margin:0 auto; display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%); mask-composite:intersect; }
.home-hero-copy{ position:relative; z-index:1; text-align:center; max-width:820px; margin:10px auto 0; padding:0 24px; }
.home-hero .eyebrow{ color:var(--green-hi); }
.home-hero h1{ color:#fff; font-weight:900; font-size:clamp(2.1rem,5.2vw,3.7rem); line-height:1.1; margin:14px 0 18px; }
.home-hero p{ font-size:clamp(1.05rem,2vw,1.3rem); color:rgba(255,255,255,.86); margin:0 auto 30px; max-width:640px; }
.home-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.home-stats{ position:relative; z-index:2; margin-top:-72px; }
.home-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border-radius:var(--radius); box-shadow:0 20px 50px rgba(15,23,42,.14); overflow:hidden; border:1px solid var(--line); }
.home-stat{ padding:26px 24px; border-right:1px solid var(--line); }
.home-stat:last-child{ border-right:0; }
.home-stat b{ display:block; font:900 clamp(1.6rem,3vw,2.2rem)/1 "Mulish",sans-serif; color:var(--ink); letter-spacing:-.02em; }
.home-stat span{ display:block; margin-top:8px; font:700 12px/1.3 "Mulish",sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.home-stats-note{ text-align:right; font-size:12px; color:var(--muted); margin-top:10px; }

.home-section{ padding:96px 0; }
.home-intro{ display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:start; }
.home-intro h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:12px; }
.home-intro p{ margin:0 0 16px; }
.home-intro p.big{ font-size:1.2rem; color:var(--ink); font-weight:600; }

.home-feature{ background:var(--dark); color:#e5edf0; display:grid; grid-template-columns:1fr 1fr; }
.home-feature-art{ background:#000 url('/assets/img/MIRE-Server-BW.png') center/cover no-repeat; min-height:560px; }
.home-feature-copy{ padding:80px clamp(24px,6vw,88px); display:flex; flex-direction:column; justify-content:center; }
.home-feature blockquote{ margin:0; font:800 clamp(1.8rem,3.6vw,2.9rem)/1.12 "Mulish",sans-serif; color:#fff; letter-spacing:-.02em; }
.home-feature cite{ display:block; margin-top:14px; font-style:normal; color:rgba(229,237,240,.6); font-size:15px; }
.home-c3{ margin:40px 0 0; padding:0; list-style:none; display:grid; gap:18px; }
.home-c3 li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.home-c3 .k{ font:900 13px/1 "Mulish",sans-serif; color:#052e16; background:var(--green-hi); border-radius:8px; padding:7px 9px; letter-spacing:.06em; text-transform:uppercase; }
.home-c3 p{ margin:0; color:rgba(229,237,240,.85); }
.home-c3 i{ color:#fff; }

.home-soft{ background:var(--soft); }
.home-head{ max-width:720px; margin-bottom:44px; }
.home-head h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); margin-top:10px; }
.home-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.home-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.home-card .ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:rgba(36,139,89,.12); color:var(--green); margin-bottom:18px; }
.home-card h3{ font-size:1.25rem; font-weight:800; margin:0 0 10px; }
.home-card p{ margin:0 0 12px; font-size:15.5px; }
.home-card p:last-child{ margin:0; }

.home-reports-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.home-reports-head h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); margin-top:10px; }
.home-reports-head a{ font:800 15px/1 "Mulish",sans-serif; text-decoration:none; white-space:nowrap; }
.home-reports{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.home-report{ display:flex; flex-direction:column; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .15s, box-shadow .15s; }
.home-report:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(15,23,42,.1); }
.home-report-img{ aspect-ratio:1424/752; background:var(--navy) center/cover no-repeat; }
.home-report-body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.home-report .meta{ display:flex; justify-content:space-between; gap:10px; font:800 11px/1.3 "Mulish",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.home-report h3{ font-size:1.3rem; font-weight:800; margin:0; color:var(--ink); }
.home-report p{ margin:0; font-size:15px; color:var(--ink-2); flex:1; }
.home-report .go{ font:800 14px/1 "Mulish",sans-serif; color:var(--green); }

.home-cta{ background:linear-gradient(90deg,var(--navy),var(--teal-2) 60%,var(--green)); color:#fff; border-radius:24px; padding:56px clamp(24px,5vw,64px); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:96px; }
.home-cta h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:900; margin:0; }
.home-cta p{ margin:8px 0 0; color:rgba(255,255,255,.8); }

@media (max-width:900px){
  .home-stats-grid{ grid-template-columns:repeat(2,1fr); }
  .home-stat:nth-child(2){ border-right:0; } .home-stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .home-intro, .home-feature{ grid-template-columns:1fr; gap:28px; }
  .home-feature-art{ min-height:380px; }
  .home-cards, .home-reports{ grid-template-columns:1fr; }
  .home-section{ padding:72px 0; }
}
@media (max-width:600px){ .home-hero-art{ height:180px; object-fit:cover; } }

/* Blog index: the MIRE banner (logo + lettering) instead of a title.
   Whole image at every width (never cropped, the lettering is the point),
   edges faded into the hero gradient like the home page. */
.hero-banner{ padding:28px 0 0; }
.hero-banner-art{ display:block; width:100%; max-width:1180px; height:auto; margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%); mask-composite:intersect; }
.hero-banner .hero-text{ padding:4px 24px 56px; text-align:center; margin:0 auto; }
.hero-banner .hero-text p.lead{ margin:0 auto; max-width:640px; }
/* phones: crop the empty sides (logo + lettering are the middle ~40%) so they stay big */
@media (max-width:600px){ .hero-banner{ padding-top:12px; } .hero-banner-art{ height:clamp(130px,42vw,200px); object-fit:cover; } .hero-banner .hero-text{ padding-bottom:40px; } }