@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600&family=Oswald:wght@200&family=Orbitron:wght@400&display=swap');
:root{ --bg:#0d0f12; --bg-2:#15181d; --bg-3:#1b1f26; --text:#e7eaee; --muted:#9aa3ad; --accent:#f59e0b; --link:#8bda7f; --nav-h:68px; }
*{box-sizing:border-box}
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font:300 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a{ color:var(--link); text-decoration: underline; text-underline-offset: 2px; } a:hover{ opacity:.9 }
img, video, iframe{ max-width:100%; height:auto; display:block; }

/* Top nav */
.navbar{ position:fixed; top:0; left:0; right:0; height:var(--nav-h); background:#0b0d10; border-bottom:1px solid #22262d;
  display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; z-index:1000; padding-inline:24px; }
.nav-brand{ font-weight:600; letter-spacing:.2px; user-select:none; }
.nav-center{ display:flex; justify-content:center; gap:5vw; white-space:nowrap; }
.nav-center a{ color:var(--text); text-decoration:none; font-style:normal; font-size:16px; }
.nav-center a.active{ font-style:italic; font-size:18px; }
.nav-right{ display:flex; justify-content:flex-end; }
.nav-right a{ background:#1d2430; padding:10px 16px; border-radius:999px; text-decoration:none; color:var(--text); border:1px solid #2a3340; }

main{ padding-top:calc(var(--nav-h) + 24px); }
.center-40{ width:min(40%, 900px); margin-inline:auto; }
.center-70{ width:min(70%, 1200px); margin-inline:auto; }

/* Offset anchors so fixed nav doesn't hide them */
h1, h2, h3, h4, .post{ scroll-margin-top: calc(var(--nav-h) + 14px); }

/* Home / Services */
.hero-strip{ width:auto; height:auto; display:block; margin-inline: auto; }
.services{ text-align:left }
.services .text-wrap{ position:relative; padding: min(5vw, 48px) 80px; }
.services .text-wrap .badges{ position:absolute; inset:0; pointer-events:none; }
.badge{ position:absolute; display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%;
  background:var(--bg-3); border:1px solid #2a3340; font-weight:600; font-size:13px; letter-spacing:.3px; z-index:0; }
.services .text-wrap p, .services .text-wrap pre{ position:relative; z-index:1; }
.badge.b1{ left:2%; top:-10px } .badge.b2{ right:6%; top:10px } .badge.b3{ left:8%; top:120px } .badge.b4{ right:2%; top:180px } .badge.b5{ left:40%; top:210px }

/* Awareness + Blog shared post styling */
body.blog, .body--awareness{  }
.posts{ margin-left:240px; padding:0 12px; width: calc(100% - 240px); }
.post{ background:var(--bg-2); border:1px solid #22262d; border-radius:12px; padding:20px; margin:18px 8px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight:300; font-size:20px; line-height:1.7; }
.post h2{ margin-top:0; font-size:26px; font-weight:300; }
.post .media{ width:40%; float:left; margin:0 18px 12px 0; }
.post iframe{ aspect-ratio:16/9; }
.post::after{ content:""; display:block; clear:both; }

/* Left vertical menu (Awareness only) */
.leftmenu{ position:fixed; top:var(--nav-h); left:0; width:240px; bottom:0; overflow:hidden;
  background:#1a1408; color:#fff3e0; padding:18px 12px 24px 16px; border-right:1px solid #2b1f0a; font-family:"Oswald", Arial Narrow, sans-serif; font-weight:200; }
.leftmenu h3{ font-size:14px; margin:8px 0 4px; color:#ffd391; }
.leftmenu ul{ list-style:none; margin:0; padding:0 0 0 12px; }
.leftmenu li{ margin:2px 0; font-size:13px; }
.leftmenu a{ color:#ffe0b3; text-decoration:none; } .leftmenu a:hover{ text-decoration:underline }

/* Blog exceptions */
.blog .post{ width:70%; margin-left:auto; margin-right:auto; }
.blog .media-row{ display:flex; gap:24px; flex-wrap:wrap }
.blog .media50{ width:50% }

/* Reposition badges to left/right sides only (not above/below) */
.services .text-wrap .badges{ position:absolute; top:0; bottom:0; left:-90px; right:-90px; pointer-events:none; }
.badge.b1{ left:-90px; top:5%; }
.badge.b2{ right:-90px; top:18%; }
.badge.b3{ left:-90px; top:40%; }
.badge.b4{ right:-90px; top:62%; }
.badge.b5{ left:-90px; top:82%; }

.left-menu{ position:fixed; top:76px; left:8px; width:220px; color:#ff8c00; z-index:900; padding-top:14px; }

.left-menu h4{ font-family:'Orbitron',sans-serif; font-weight:400; font-size:16px; margin:0; }

.left-menu a{ font-family:'Oswald',sans-serif; font-weight:200; font-size:16px; color:#ff8c00; text-decoration:none; display:block; margin:0; padding:0; font-style:normal; }

.left-menu ul{ list-style:none; margin:0; padding:0; }

.left-menu li{ margin:0; padding:0; }

/* Active left-menu item follows the URL hash */
body:has(#title-11:target) .left-menu a[href="#title-11"],
body:has(#title-21:target) .left-menu a[href="#title-21"],
body:has(#title-22:target) .left-menu a[href="#title-22"],
body:has(#title-31:target) .left-menu a[href="#title-31"],
body:has(#title-32:target) .left-menu a[href="#title-32"],
body:has(#title-33:target) .left-menu a[href="#title-33"],
body:has(#title-34:target) .left-menu a[href="#title-34"],
body:has(#title-35:target) .left-menu a[href="#title-35"],
body:has(#title-36:target) .left-menu a[href="#title-36"],
body:has(#title-37:target) .left-menu a[href="#title-37"],
body:has(#title-41:target) .left-menu a[href="#title-41"],
body:has(#title-42:target) .left-menu a[href="#title-42"],
body:has(#title-43:target) .left-menu a[href="#title-43"],
body:has(#title-44:target) .left-menu a[href="#title-44"]
{ font-style: italic; }

.center-nav a.active{ font-style: italic; font-size: 18px; }

.section-narrow{ width:40%; margin:0 auto; text-align:center; }

/* IT services section: width 50% (minimal change) */
.center-40.services{ width:50%; }

/* Blog: media blocks are 50% of the section width */
body.blog .post .media{ width:50%; }
/* Ensure embedded media fills the media block while preserving aspect ratio */
body.blog .post img.media, body.blog .post iframe.media{ max-width:100%; height:auto; display:block; }