/* =============================================
   >>> THIS IS THE FILE TO PASTE. <<<
   Appearance > Customize > Additional CSS.
   Select all, paste, Publish. It replaces the whole
   box, and it already contains every rule that was
   live before, so nothing is lost.

   BiNexus: GeneratePress Additional CSS
   Live Revamp v1.0, full combined file

   FONTS required (add to theme functions.php
   or via a Custom Fonts plugin):
   Lato + Montserrat (existing site)
   Manrope (about page)
   Instrument Serif + JetBrains Mono (blog) are requested
   by <link> tags inside the blog HTML blocks, so they need
   nothing here.

   SECTIONS
   1  Site-wide GeneratePress overrides
   2  About page          body.page-about
   3  Portfolio page      body.page-portfolio
   4  Blog pages          body.page-blog     (index + posts)
   5  Blog post           body.page-post     (article typography)
   6  Live Power BI embed (portfolio + article)

   There is no second CSS file. all.css is the only one
   that gets pasted; a partial "blog-additional.css" used
   to exist and was deleted because pasting it by mistake
   wipes Sections 1 to 3.
   ============================================= */


/* =============================================
   SECTION 1, SITE-WIDE GP OVERRIDES
   (applies to all pages)
   ============================================= */

/* Hide GP header branding; keep nav visible */
#masthead .site-logo,
#masthead .site-branding,
#masthead .custom-logo-link,
#masthead .custom-logo,
#masthead .header-image,
#masthead .site-title,
#masthead .site-description,
.site-header .site-logo,
.site-header .site-branding,
.site-header .custom-logo-link,
.site-header .custom-logo,
.site-header .header-image,
.site-header .site-title,
.site-header .site-description {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide GP auto-injected page title */
.page-header,
.entry-header,
.page-title,
.entry-title {
  display: none !important;
}

/* Hide logo/branding injected inside content area */
.site-main .site-branding,
.site-main .custom-logo-link,
.site-main .custom-logo,
.content-area .site-branding,
.hfeed .site-branding:not(.site-header .site-branding),
.wp-block-site-logo:not(.site-header .wp-block-site-logo),
.below-header .site-branding,
.below-header .custom-logo-link,
.page-content .custom-logo,
.entry-content .custom-logo,
.wp-site-blocks .site-branding:not(header .site-branding) {
  display: none !important;
}

/* Full-width content wrapper */
.entry-content,
.page-content,
.post-content {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Dark showcase banner, full bleed (portfolio page) */
.entry-content > div[style*="background: #1a1f2e"],
.entry-content > div[style*="background:#1a1f2e"],
.page-content > div[style*="background: #1a1f2e"],
.page-content > div[style*="background:#1a1f2e"] {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Re-add padding to showcase and main content */
.entry-content .showcase,
.page-content .showcase,
.entry-content main,
.page-content main {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Widen report layout grid */
.report-layout {
  grid-template-columns: 1fr 1.8fr !important;
}

/* Showcase max-width */
.showcase {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Container width */
.grid-container,
.inside-header,
.inside-navigation,
.inside-site-header,
.site-main > .inside-article,
.page .inside-article,
.single .inside-article,
.entry-content,
.widget-area,
.footer-widgets,
.inside-footer {
  max-width: 1280px !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

:root {
  --gp-container-width: 1280px !important;
}

/* Site tokens */
:root {
  --bn-navy:       #1a1f2e;
  --bn-navy-mid:   #252b3b;
  --bn-accent:     #3dbfb8;
  --bn-accent2:    #2a9d8f;
  --bn-text:       #2c2c2c;
  --bn-text-light: #555;
  --bn-border:     #e2e6ea;
  --bn-bg:         #ffffff;
  --bn-bg-off:     #f7f8fa;
}

/* Body base */
body {
  font-family: 'Lato', sans-serif;
  color: var(--bn-text);
  line-height: 1.7;
  background: var(--bn-bg);
}

/* GP Header bar */
.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--bn-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  padding: 0 2rem !important;
}

.inside-header {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 80px !important;
  padding: 0 !important;
}

.site-header .site-logo img,
.site-branding img,
.custom-logo {
  height: 80px !important;
  width: auto !important;
  display: block !important;
  max-width: none !important;
}

.site-title,
.site-title a,
.site-description {
  display: none !important;
  font-size: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* GP Nav links */
.main-navigation a,
.nav-primary a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(26, 31, 46, 0.7) !important;
  text-decoration: none !important;
  padding: 0 1.1rem !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}

.main-navigation a:hover,
.nav-primary a:hover,
.main-navigation .current-menu-item > a,
.nav-primary .current-menu-item > a {
  color: var(--bn-navy) !important;
  border-bottom-color: var(--bn-accent) !important;
}

.main-navigation ul li a:focus,
.main-navigation ul li a:hover {
  background: none !important;
}

/* GP Footer */
.site-footer {
  background: var(--bn-navy) !important;
  padding: 2rem !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

.site-footer .inside-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.site-footer,
.site-footer p,
.site-footer .copyright-bar {
  font-family: 'Lato', sans-serif !important;
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  transition: color 0.2s !important;
}

.site-footer a:hover {
  color: var(--bn-accent) !important;
}

.footer-bar,
.footer-widgets {
  background: var(--bn-navy) !important;
}

/* Buttons */
.wp-block-button__link,
.generate-btn,
input[type="submit"],
button[type="submit"] {
  background: var(--bn-accent2) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.75rem !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s !important;
}

.wp-block-button__link:hover,
.generate-btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--bn-accent) !important;
  transform: translateY(-1px) !important;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select,
.wpforms-field input,
.wpforms-field textarea,
.wpcf7-form input,
.wpcf7-form textarea {
  font-family: 'Lato', sans-serif !important;
  font-size: 0.95rem !important;
  color: var(--bn-text) !important;
  background: #fff !important;
  border: 1.5px solid var(--bn-border) !important;
  border-radius: 5px !important;
  padding: 0.65rem 0.9rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--bn-accent) !important;
  box-shadow: 0 0 0 3px rgba(61, 191, 184, 0.12) !important;
}

/* Links */
.entry-content a,
.page-content a {
  color: var(--bn-accent2) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.2s, color 0.2s !important;
}

.entry-content a:hover,
.page-content a:hover {
  color: var(--bn-accent) !important;
  border-bottom-color: var(--bn-accent) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.25 !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.site-main h1,
.site-main h2,
.site-main h3 {
  color: var(--bn-navy) !important;
}

[style*="background: #1a1f2e"] h1,
[style*="background: #1a1f2e"] h2,
[style*="background:#1a1f2e"] h1,
[style*="background:#1a1f2e"] h2 {
  color: #ffffff !important;
}

/* Mobile nav */
@media (max-width: 768px) {
  .inside-header {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 1rem 0 !important;
  }

  .main-navigation a,
  .nav-primary a {
    height: auto !important;
    padding: 0.6rem 1rem !important;
    border-bottom: none !important;
    border-left: 3px solid transparent !important;
  }

  .main-navigation .current-menu-item > a,
  .nav-primary .current-menu-item > a {
    border-left-color: var(--bn-accent) !important;
    border-bottom: none !important;
  }
}


/* =============================================
   SECTION 2, ABOUT PAGE v1.0
   Scoped to body.page-about
   WordPress automatically adds the class
   "page-about" to the body on the /about/ page
   (based on the page slug; no numeric ID needed)
   ============================================= */

/* About page design tokens + base overrides */
body.page-about {
  --ink:        #0c0e14;
  --ink-soft:   #2a2f3a;
  --ink-mute:   #565d6e;
  --ink-faint:  #8b92a3;
  --line:       #e7e9ee;
  --line-soft:  #f0f2f6;
  --bg:         #f5f6f9;
  --bg-soft:    #fbfbfd;
  --card:       #ffffff;
  --brand:      #4f46e5;
  --brand-2:    #7c6cf6;
  --brand-soft: #eef0ff;
  --teal:       #0fb5ae;
  --shadow-sm:  0 1px 2px rgba(15,18,30,0.04), 0 2px 6px rgba(15,18,30,0.04);
  --shadow-md:  0 4px 12px rgba(15,18,30,0.06), 0 16px 40px -16px rgba(15,18,30,0.10);
  --shadow-lg:  0 12px 32px rgba(15,18,30,0.08), 0 32px 64px -24px rgba(15,18,30,0.14);
  font-family: 'Manrope', system-ui, sans-serif;
  background: #f5f6f9;
  background-image: radial-gradient(800px 500px at 90% -10%, rgba(124,108,246,0.10), transparent 60%),
                    radial-gradient(700px 400px at -10% 0%, rgba(15,181,174,0.08), transparent 55%);
  background-attachment: fixed;
  color: #2a2f3a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Hide GP site header. The about page uses its own floating pill nav */
body.page-about .site-header {
  display: none !important;
}

/* Hide GP site footer. The about page uses its own dark footer */
body.page-about .site-footer,
body.page-about .footer-bar {
  display: none !important;
}

/* Remove GP content area padding */
body.page-about .entry-content,
body.page-about .page-content {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Remove GP forced max-width/padding on main */
body.page-about .entry-content main,
body.page-about .page-content main {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Let the about page fill its full 1400px .wrap width, the same as the
   portfolio page. The site-wide GP rules (Section 1) cap these outer
   wrappers at 1280px; free them so .wrap is the only width constraint
   and the CV embed renders at full size. */
body.page-about .grid-container,
body.page-about .content-area,
body.page-about .site-main,
body.page-about .inside-article {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Reset heading font to Manrope for about page */
body.page-about h1,
body.page-about h2,
body.page-about h3,
body.page-about h4,
body.page-about h5,
body.page-about h6 {
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* Reset heading color overrides from site-wide rules */
body.page-about .entry-content h1,
body.page-about .entry-content h2,
body.page-about .entry-content h3,
body.page-about .entry-content h4,
body.page-about .entry-content h5,
body.page-about .entry-content h6,
body.page-about .page-content h1,
body.page-about .page-content h2,
body.page-about .page-content h3,
body.page-about .site-main h1,
body.page-about .site-main h2,
body.page-about .site-main h3 {
  color: inherit !important;
}

/* Reset link color overrides from site-wide rules.
   Scoped to bare links only (no class) so it doesn't strip the
   white text from .nav-cta / .btn-primary or the bottom outline
   from .btn-ghost; all our about-page links carry a class. */
body.page-about .entry-content a:not([class]),
body.page-about .page-content a:not([class]) {
  color: inherit !important;
  border-bottom: none !important;
}

body.page-about .entry-content a:not([class]):hover,
body.page-about .page-content a:not([class]):hover {
  color: inherit !important;
  border-bottom-color: transparent !important;
}

/* Reset button styles for about page (indigo instead of teal) */
body.page-about input[type="submit"],
body.page-about button[type="submit"] {
  background: linear-gradient(135deg, #4f46e5, #7c6cf6) !important;
  border-radius: 999px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

body.page-about input[type="submit"]:hover,
body.page-about button[type="submit"]:hover {
  background: linear-gradient(135deg, #4338ca, #6d5ce7) !important;
}

/* ── Layout ── */
body.page-about .wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Floating pill nav ── */
body.page-about .nav-wrap {
  position: sticky;
  top: 1.25rem;
  z-index: 200;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

body.page-about .nav-wrap header {
  pointer-events: auto;
  width: 100%;
  max-width: 1260px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(231,233,238,0.9);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

body.page-about .nav-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: #0c0e14;
}

body.page-about .nav-logo .dot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.78rem;
  box-shadow: 0 2px 8px rgba(79,70,229,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}

body.page-about .nav-logo .name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

body.page-about .nav-wrap nav {
  display: flex;
  gap: 0.1rem;
  align-items: center;
}

body.page-about .nav-wrap nav a {
  color: #565d6e !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 999px !important;
  transition: background 0.18s, color 0.18s !important;
  height: auto !important;
  border-bottom: none !important;
  border-left: none !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: flex !important;
  align-items: center !important;
}

body.page-about .nav-wrap nav a:hover {
  background: #f0f2f6 !important;
  color: #0c0e14 !important;
  border-bottom-color: transparent !important;
}

body.page-about .nav-wrap nav a.active {
  background: #0c0e14 !important;
  color: #ffffff !important;
}

body.page-about .nav-wrap nav a.nav-cta {
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%) !important;
  color: #ffffff !important;
  padding: 0.55rem 1.1rem !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3) !important;
}

body.page-about .nav-wrap nav a.nav-cta:hover {
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%) !important;
}

/* ── Hero ── */
body.page-about .hero {
  padding: 6rem 0 4rem !important;
  text-align: center !important;
  width: auto !important;
  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

body.page-about .hero h1 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(2.5rem, 6.5vw, 5rem) !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  max-width: 16ch !important;
  margin: 0 auto !important;
}

body.page-about .hero h1 * {
  color: inherit !important;
}

body.page-about .hero h1 .serif {
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 60%, #0fb5ae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

body.page-about .hero-sub {
  margin: 1.5rem auto 0 !important;
  max-width: 60ch !important;
  font-size: 1.15rem !important;
  color: #565d6e !important;
  line-height: 1.55 !important;
}

body.page-about .hero p,
body.page-about .hero .hero-label {
  color: #565d6e !important;
}

body.page-about .hero-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.5rem;
}

/* ── Buttons ── */
body.page-about .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, box-shadow 0.2s;
  border-bottom: none !important;
}

body.page-about .btn-primary {
  background: #0c0e14 !important;
  color: white !important;
  box-shadow: 0 6px 20px rgba(12,14,20,0.2) !important;
}

body.page-about .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(12,14,20,0.28) !important;
  color: white !important;
  border-bottom-color: transparent !important;
}

body.page-about .btn-ghost {
  background: rgba(255,255,255,0.8) !important;
  color: #0c0e14 !important;
  border: 1px solid #e7e9ee !important;
  backdrop-filter: blur(8px) !important;
}

body.page-about .btn-ghost:hover {
  background: white !important;
  transform: translateY(-2px) !important;
  color: #0c0e14 !important;
  border-bottom-color: transparent !important;
}

/* ── Main ── */
body.page-about main {
  padding: 2rem 0 5rem !important;
}

/* ── Bio card ── */
body.page-about .bio-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 3.5rem;
  box-shadow: var(--shadow-md);
  border: 1px solid #e7e9ee;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}

body.page-about .bio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 100% 0%, rgba(124,108,246,0.07), transparent 70%);
  pointer-events: none;
}

@media (max-width: 820px) {
  body.page-about .bio-card {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }
}

body.page-about .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4f46e5;
  background: #eef0ff;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

body.page-about .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4f46e5;
}

body.page-about .bio-text h2 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  margin-bottom: 1.5rem !important;
  max-width: 18ch !important;
}

body.page-about .bio-text h2 .serif {
  color: #4f46e5 !important;
}

body.page-about .bio-text p {
  font-size: 1.02rem;
  color: #2a2f3a;
  margin-bottom: 1rem;
  max-width: 56ch;
}

body.page-about .skills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 2rem;
}

body.page-about .pill {
  background: #fbfbfd;
  border: 1px solid #e7e9ee;
  color: #2a2f3a;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  transition: all 0.18s;
}

body.page-about .pill:hover {
  background: #eef0ff;
  border-color: #4f46e5;
  color: #4f46e5;
}

body.page-about .bio-photo {
  position: relative;
  aspect-ratio: 4 / 5;
}

body.page-about .bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}

/* ── Stats ── */
body.page-about .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (max-width: 720px) {
  body.page-about .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

body.page-about .stat-card {
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

body.page-about .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

body.page-about .stat-num {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0c0e14;
  letter-spacing: -0.04em;
  line-height: 1;
}

body.page-about .stat-num .accent {
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.page-about .stat-label {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #565d6e;
  font-weight: 500;
}

/* ── Section blocks ── */
body.page-about section.block {
  padding: 5rem 0;
}

body.page-about .section-head {
  text-align: center;
  margin-bottom: 3rem;
}

body.page-about .section-head h2 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin-top: 1rem !important;
  max-width: 22ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-about .section-head h2 .serif {
  color: #4f46e5 !important;
}

body.page-about .section-head p {
  margin: 1rem auto 0;
  max-width: 58ch;
  color: #565d6e;
  font-size: 1.05rem;
}

/* ── Power BI card ── */
body.page-about .pbi-card {
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-radius: 24px;
  padding: 1rem;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

body.page-about .pbi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem 1rem;
}

body.page-about .pbi-head .left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

body.page-about .pbi-head .icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f4d03f, #e8a317);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(232,163,23,0.35);
}

body.page-about .pbi-head .title {
  font-weight: 600;
  color: #0c0e14;
  font-size: 0.95rem;
}

body.page-about .pbi-head .meta {
  color: #8b92a3;
  font-size: 0.8rem;
}

body.page-about .pbi-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e7e9ee;
}

body.page-about .pbi-frame iframe {
  width: 100%;
  height: auto;
  aspect-ratio: var(--live-ar, 16 / 9);
  max-height: 100%;
  border: none;
  display: block;
}

/* ── CV embed facade (click-to-load poster) ───────────
   Same click-to-load pattern as the portfolio embeds: a static
   screenshot poster that swaps in the live Power BI iframe only when
   clicked, so the page paints instantly. The script that does the swap
   lives at the end of about-page-content.html. Mirrors the
   body.page-portfolio facade rules. */
body.page-about .pbi-frame { position: relative; }

body.page-about .embed-facade {
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f1f2f8 100%);
}

body.page-about .facade-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}
body.page-about .embed-facade:hover .facade-photo { transform: scale(1.03); }

body.page-about .facade-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,14,20,0.45) 0%, rgba(12,14,20,0) 42%);
  transition: background 0.25s ease;
  pointer-events: none;
}
body.page-about .embed-facade:hover .facade-scrim {
  background:
    linear-gradient(to top, rgba(12,14,20,0.5) 0%, rgba(12,14,20,0.05) 60%),
    linear-gradient(rgba(12,14,20,0.14), rgba(12,14,20,0.14));
}

body.page-about .facade-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  pointer-events: none;
}

body.page-about .facade-play {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 10px 26px rgba(12,14,20,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
body.page-about .facade-play::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 19px solid #4f46e5;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
body.page-about .embed-facade:hover .facade-play {
  transform: scale(1.08);
  background: #ffffff;
}

body.page-about .facade-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: rgba(12,14,20,0.6);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

body.page-about .embed-stage {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.page-about .embed-frame {
  opacity: 0;
  transition: opacity 0.4s ease;
}
body.page-about .embed-frame.is-ready { opacity: 1; }

body.page-about .embed-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: #fbfbfd;
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  color: #8b92a3;
  transition: opacity 0.35s ease;
}
body.page-about .embed-loader.is-done {
  opacity: 0;
  pointer-events: none;
}
body.page-about .bn-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #e7e9ee;
  border-top-color: #7c6cf6;
  animation: bn-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.page-about .bn-spinner { animation-duration: 1.6s; }
  body.page-about .embed-frame,
  body.page-about .facade-photo,
  body.page-about .facade-play,
  body.page-about .facade-scrim { transition: none; }
}

body.page-about .pbi-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 1.25rem !important;
  padding: 0.6rem 1.2rem !important;
  background: #eef0ff !important;
  color: #4f46e5 !important;
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: all 0.2s !important;
}

body.page-about .pbi-link:hover {
  background: #4f46e5 !important;
  color: white !important;
  border-bottom-color: transparent !important;
}

/* ── Contact ── */
body.page-about .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 820px) {
  body.page-about .contact-grid {
    grid-template-columns: 1fr;
  }
}

body.page-about .contact-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body.page-about .contact-card {
  display: flex !important;
  align-items: center !important;
  gap: 1.1rem !important;
  background: #ffffff !important;
  border: 1px solid #e7e9ee !important;
  border-radius: 18px !important;
  padding: 1.25rem 1.4rem !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s !important;
  color: inherit !important;
  border-bottom: none !important;
}

body.page-about .contact-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(79,70,229,0.3) !important;
  color: inherit !important;
}

body.page-about .contact-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eef0ff;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

body.page-about .contact-card:hover .contact-card-icon {
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);
  color: white;
}

body.page-about .contact-card-icon svg {
  width: 20px;
  height: 20px;
}

body.page-about .contact-card-text { flex: 1; }

body.page-about .contact-card-text strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0c0e14;
}

body.page-about .contact-card-text span {
  font-size: 0.86rem;
  color: #565d6e;
}

body.page-about .contact-card-arrow {
  color: #8b92a3;
  transition: transform 0.2s, color 0.2s;
}

body.page-about .contact-card:hover .contact-card-arrow {
  color: #4f46e5;
  transform: translateX(4px);
}

body.page-about .form-card {
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

body.page-about .form-card h3 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.4rem !important;
}

body.page-about .form-card p.lead {
  color: #565d6e;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}

/* ── About page footer ── */
body.page-about footer {
  padding: 4rem 0 3rem;
}

body.page-about .foot-card {
  background: #0c0e14;
  color: rgba(255,255,255,0.75);
  border-radius: 28px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

body.page-about .foot-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 250px at 80% 0%, rgba(124,108,246,0.18), transparent 60%),
              radial-gradient(500px 250px at 0% 100%, rgba(15,181,174,0.12), transparent 60%);
  pointer-events: none;
}

body.page-about .foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: relative;
}

@media (max-width: 720px) {
  body.page-about .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

body.page-about .foot-brand .name {
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

body.page-about .foot-brand .name .dot {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);
  box-shadow: 0 4px 12px rgba(79,70,229,0.4);
}

body.page-about .foot-brand p {
  margin-top: 1rem;
  color: rgba(255,255,255,0.6);
  max-width: 36ch;
  font-size: 0.95rem;
}

body.page-about .foot-col h4 {
  color: white !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  letter-spacing: 0.02em !important;
  font-family: 'Manrope', sans-serif !important;
}

body.page-about .foot-col a {
  display: block !important;
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  padding: 0.3rem 0 !important;
  transition: color 0.18s !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  border-bottom: none !important;
}

body.page-about .foot-col a:hover {
  color: white !important;
  border-bottom-color: transparent !important;
}

body.page-about .foot-bottom {
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* ── Mobile adjustments for about page ── */
@media (max-width: 768px) {
  body.page-about .nav-wrap nav a {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.8rem !important;
  }

  body.page-about .bio-card {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  body.page-about .contact-grid {
    grid-template-columns: 1fr;
  }

  body.page-about .foot-grid {
    grid-template-columns: 1fr;
  }
}


/* =============================================
   SECTION 3, PORTFOLIO PAGE v1.0
   Scoped to body.page-portfolio
   The class is added by a small inline script
   inside portfolio-content.html (WordPress core
   does not add page-{slug} to the body element).
   ============================================= */

/* Portfolio page design tokens + base overrides */
body.page-portfolio {
  --ink:        #0c0e14;
  --ink-soft:   #2a2f3a;
  --ink-mute:   #565d6e;
  --ink-faint:  #8b92a3;
  --line:       #e7e9ee;
  --line-soft:  #f0f2f6;
  --bg:         #f5f6f9;
  --bg-soft:    #fbfbfd;
  --card:       #ffffff;
  --brand:      #4f46e5;
  --brand-2:    #7c6cf6;
  --brand-soft: #eef0ff;
  --teal:       #0fb5ae;
  --shadow-sm:  0 1px 2px rgba(15,18,30,0.04), 0 2px 6px rgba(15,18,30,0.04);
  --shadow-md:  0 4px 12px rgba(15,18,30,0.06), 0 16px 40px -16px rgba(15,18,30,0.10);
  --shadow-lg:  0 12px 32px rgba(15,18,30,0.08), 0 32px 64px -24px rgba(15,18,30,0.14);
  /* How far below the top of the viewport the sticky section rail sits. The
     rail script reads this back, so the two can never drift apart. */
  --rail-top:   84px;
  font-family: 'Manrope', system-ui, sans-serif;
  background: #f5f6f9;
  background-image: radial-gradient(800px 500px at 90% -10%, rgba(124,108,246,0.10), transparent 60%),
                    radial-gradient(700px 400px at -10% 0%, rgba(15,181,174,0.08), transparent 55%);
  background-attachment: fixed;
  color: #2a2f3a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Hide GP site header. Portfolio uses its own floating pill nav */
body.page-portfolio .site-header { display: none !important; }

/* Hide GP site footer. Portfolio uses its own dark footer */
body.page-portfolio .site-footer,
body.page-portfolio .footer-bar { display: none !important; }

/* Remove GP content area padding */
body.page-portfolio .entry-content,
body.page-portfolio .page-content {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Remove GP forced max-width/padding on main */
body.page-portfolio .entry-content main,
body.page-portfolio .page-content main {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Let the portfolio fill its full 1400px .wrap width.
   The site-wide GP rules (Section 1) cap these outer wrappers at
   1280px, which makes the report windows (and the live Power BI
   embeds Power BI scales to fit inside them) render narrower and
   shorter than the standalone design. Free every GP wrapper so the
   .wrap (max-width: 1400px) is the only width constraint, matching
   the preview. */
body.page-portfolio .grid-container,
body.page-portfolio .content-area,
body.page-portfolio .site-main,
body.page-portfolio .inside-article {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Reset heading font to Manrope */
body.page-portfolio h1,
body.page-portfolio h2,
body.page-portfolio h3,
body.page-portfolio h4,
body.page-portfolio h5,
body.page-portfolio h6 {
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* Reset heading color overrides from site-wide rules */
body.page-portfolio .entry-content h1,
body.page-portfolio .entry-content h2,
body.page-portfolio .entry-content h3,
body.page-portfolio .entry-content h4,
body.page-portfolio .entry-content h5,
body.page-portfolio .entry-content h6,
body.page-portfolio .page-content h1,
body.page-portfolio .page-content h2,
body.page-portfolio .page-content h3,
body.page-portfolio .site-main h1,
body.page-portfolio .site-main h2,
body.page-portfolio .site-main h3 {
  color: inherit !important;
}

/* Reset link color overrides from site-wide rules.
   Scoped to bare links only (no class) so it doesn't strip
   colors / borders from .nav-cta / .btn-view / .nav-logo etc. */
body.page-portfolio .entry-content a:not([class]),
body.page-portfolio .page-content a:not([class]) {
  color: inherit !important;
  border-bottom: none !important;
}

body.page-portfolio .entry-content a:not([class]):hover,
body.page-portfolio .page-content a:not([class]):hover {
  color: inherit !important;
  border-bottom-color: transparent !important;
}

/* ── Layout ── */
body.page-portfolio .wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Floating pill nav ── */
body.page-portfolio .nav-wrap {
  position: sticky;
  top: 1.25rem;
  z-index: 200;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

body.page-portfolio .nav-wrap header {
  pointer-events: auto;
  width: 100%;
  max-width: 1260px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(231,233,238,0.9);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

body.page-portfolio .nav-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: #0c0e14;
}

body.page-portfolio .nav-logo .dot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.78rem;
  box-shadow: 0 2px 8px rgba(79,70,229,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}

body.page-portfolio .nav-logo .name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

body.page-portfolio .nav-wrap nav {
  display: flex;
  gap: 0.1rem;
  align-items: center;
}

body.page-portfolio .nav-wrap nav a {
  color: #565d6e !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 999px !important;
  transition: background 0.18s, color 0.18s !important;
  height: auto !important;
  border-bottom: none !important;
  border-left: none !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: flex !important;
  align-items: center !important;
}

body.page-portfolio .nav-wrap nav a:hover {
  background: #f0f2f6 !important;
  color: #0c0e14 !important;
  border-bottom-color: transparent !important;
}

body.page-portfolio .nav-wrap nav a.active {
  background: #0c0e14 !important;
  color: #ffffff !important;
}

body.page-portfolio .nav-wrap nav a.nav-cta {
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%) !important;
  color: #ffffff !important;
  padding: 0.55rem 1.1rem !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3) !important;
}

body.page-portfolio .nav-wrap nav a.nav-cta:hover {
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%) !important;
}

/* ── Hero ── */
body.page-portfolio .hero {
  padding: 3rem 0 2.2rem !important;
  text-align: left !important;
  width: auto !important;
  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

body.page-portfolio .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4f46e5;
  background: #eef0ff;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

body.page-portfolio .hero h1 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(2.1rem, 5.6vw, 3.5rem) !important;
  font-weight: 800 !important;
  color: #0c0e14 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  max-width: none !important;
  margin: 1.1rem 0 0 !important;
}

body.page-portfolio .hero h1 * {
  color: inherit !important;
}

/* The accent is colour only. It was set in Instrument Serif italic and is now
   the same face and weight as the rest of the headline, so the line reads as
   one phrase and the page needs no second webfont. */
body.page-portfolio .hero h1 .serif {
  font-family: 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: inherit !important;
  background: linear-gradient(120deg, #4f46e5 0%, #7c6cf6 55%, #0fb5ae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

body.page-portfolio .hero p {
  margin: 1rem 0 0 !important;
  max-width: 62ch !important;
  color: #565d6e !important;
  font-size: 1.02rem !important;
  line-height: 1.62 !important;
}

body.page-portfolio .hero-meta {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body.page-portfolio .meta-pill {
  background: #ffffff;
  border: 1px solid #e7e9ee;
  padding: 0.44rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #2a2f3a;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* ── Main ── */
body.page-portfolio main {
  padding: 0 0 4rem !important;
}

/* ── Lane shell: sticky rail beside one continuous stream ──
   Every report stays on the page. The rail is a position marker and a
   shortcut, not a filter, so nothing is hidden behind a tab and the page
   still reads top to bottom with JavaScript off. */
body.page-portfolio .lanes {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding-bottom: 2rem;
}

body.page-portfolio .lane-rail {
  position: sticky;
  top: var(--rail-top);
  align-self: start;
}

body.page-portfolio .lane-rail-label {
  margin: 0 0 12px;
  padding-left: 30px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b92a3;
}

body.page-portfolio .lane-rail-nav { position: relative; }

body.page-portfolio .lane-rail-nav::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 2px;
  background: #e7e9ee;
}

body.page-portfolio .lane-fill {
  position: absolute;
  left: 9px;
  top: 16px;
  width: 2px;
  height: var(--rail-prog, 0%);
  max-height: calc(100% - 32px);
  border-radius: 2px;
  background: linear-gradient(180deg, #4f46e5, #7c6cf6 60%, #0fb5ae);
  transition: height 0.15s linear;
}

body.page-portfolio a.lane-link {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: none !important;
}

body.page-portfolio .lane-tick {
  justify-self: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f5f6f9;
  border: 2px solid #e7e9ee;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

body.page-portfolio .lane-link-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

body.page-portfolio .lane-link-name {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #565d6e;
  transition: color 0.18s ease;
}

body.page-portfolio .lane-link-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: #8b92a3;
  background: #f0f2f6;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
  padding: 2px 7px;
}

body.page-portfolio a.lane-link:hover .lane-link-body { background: rgba(255,255,255,0.7); }
body.page-portfolio a.lane-link:hover .lane-link-name { color: #0c0e14; }

body.page-portfolio a.lane-link:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 3px;
  border-radius: 14px;
}

body.page-portfolio a.lane-link[aria-current="true"] .lane-link-body {
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

body.page-portfolio a.lane-link[aria-current="true"] .lane-link-name { color: #0c0e14; }

body.page-portfolio a.lane-link[aria-current="true"] .lane-link-count {
  color: #4f46e5;
  background: #eef0ff;
}

body.page-portfolio a.lane-link[aria-current="true"] .lane-tick {
  background: #4f46e5;
  border-color: #eef0ff;
  transform: scale(1.12);
}

body.page-portfolio .lane-rail-foot {
  margin: 18px 0 0;
  padding-left: 30px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #8b92a3;
}

/* ── Lane bands ── */
body.page-portfolio .lane-stream { min-width: 0; }

body.page-portfolio .lane { scroll-margin-top: calc(var(--rail-top) + 12px); }
body.page-portfolio .lane + .lane { margin-top: 64px; }
body.page-portfolio .lane:focus { outline: none; }

body.page-portfolio .lane-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  margin-bottom: 22px;
  border: 1px solid #e7e9ee;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

body.page-portfolio .lane-band h2 {
  margin: 0 !important;
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #0c0e14 !important;
  line-height: 1.25 !important;
}

body.page-portfolio .lane-band p {
  margin: 5px 0 0;
  max-width: 72ch;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #565d6e;
}

body.page-portfolio .lane-count {
  flex: none;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #4f46e5;
  background: #eef0ff;
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
}

/* ── Report card ── */
body.page-portfolio .lane-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

body.page-portfolio .report {
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

body.page-portfolio .report:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

body.page-portfolio .report-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

/* Manrope, not a display serif. The old serif numeral sat on a line height
   below 1 and clipped its own glyph inside the gradient text clip. */
body.page-portfolio .report-top .num {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #4f46e5;
}

body.page-portfolio .report-top .cat {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4f46e5;
  background: #eef0ff;
  border-radius: 999px;
  padding: 5px 11px;
}

body.page-portfolio .report-top h3 {
  margin: 7px 0 0 !important;
  font-size: 1.32rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.22 !important;
  color: #0c0e14 !important;
}

/* Two tracks, not CSS columns. Multi-column flows one paragraph across the
   gutter and splits it mid sentence. Every card here holds exactly two
   paragraphs, so a grid keeps each one whole. */
body.page-portfolio .report-prose {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
  align-items: start;
}

body.page-portfolio .report-prose p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.62;
  color: #2a2f3a;
}

body.page-portfolio .report-prose p + p { color: #565d6e; }

body.page-portfolio .report-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #f0f2f6;
}

body.page-portfolio .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

body.page-portfolio .tag-pill {
  background: #f5f6f9;
  border: 1px solid #e7e9ee;
  color: #565d6e;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
}

body.page-portfolio a.btn-view {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: #0c0e14 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 0.62rem 1.12rem !important;
  border-radius: 999px !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: 0 6px 18px rgba(12,14,20,0.18) !important;
  transition: transform 0.18s, box-shadow 0.2s, background 0.18s !important;
}

body.page-portfolio a.btn-view:hover {
  transform: translateY(-1px) !important;
  background: #171b26 !important;
  box-shadow: 0 10px 24px rgba(12,14,20,0.28) !important;
  color: #ffffff !important;
  border-bottom-color: transparent !important;
}

body.page-portfolio a.btn-view:focus-visible,
body.page-portfolio .embed-facade:focus-visible,
body.page-portfolio a.lane-backtop:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 3px;
}

body.page-portfolio .btn-view svg { transition: transform 0.2s; }
body.page-portfolio .btn-view:hover svg { transform: translate(2px, -2px); }

body.page-portfolio .report-spec {
  margin: 14px 0 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: #8b92a3;
  letter-spacing: 0.01em;
}

/* ── Showcase treatment ── */
body.page-portfolio .report.report-feature {
  padding: 28px;
  border-radius: 26px;
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #4f46e5, #7c6cf6 50%, #0fb5ae) border-box;
  box-shadow: var(--shadow-lg);
}

body.page-portfolio .report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  background: #f5f6f9;
  border: 1px solid #e7e9ee;
  border-radius: 16px;
}

body.page-portfolio .report-stat b {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0c0e14;
}

body.page-portfolio .report-stat span {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8b92a3;
}

body.page-portfolio .report-disclaimer {
  margin: 14px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #8b92a3;
}

body.page-portfolio .lane-next {
  border: 1px dashed #d5d9e3;
  border-radius: 22px;
  padding: 24px;
  background: rgba(255,255,255,0.55);
}

body.page-portfolio .lane-next h3 {
  margin: 0 !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #2a2f3a !important;
}

body.page-portfolio .lane-next p {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #565d6e;
}

body.page-portfolio a.lane-backtop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none !important;
  color: #565d6e !important;
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-bottom: 1px solid #e7e9ee !important;
  border-radius: 999px;
  padding: 9px 16px;
  box-shadow: var(--shadow-sm);
}

body.page-portfolio a.lane-backtop:hover { color: #0c0e14 !important; }

/* ── Embed ── */
body.page-portfolio .embed {
  background: #fbfbfd;
  border: 1px solid #e7e9ee;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

body.page-portfolio .embed-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #e7e9ee;
  background: white;
}

body.page-portfolio .embed-dots {
  display: flex;
  gap: 0.4rem;
}

body.page-portfolio .embed-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e7e9ee;
}

body.page-portfolio .embed-dots span:nth-child(1) { background: #ff5f57; }
body.page-portfolio .embed-dots span:nth-child(2) { background: #febc2e; }
body.page-portfolio .embed-dots span:nth-child(3) { background: #28c840; }

body.page-portfolio .embed-title {
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  color: #8b92a3;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Says whether a poster opens a live report or is only a screenshot. All
   twelve are published to the web today, so every one reads Live embed. */
body.page-portfolio .embed-flag {
  margin-left: auto;
  flex: none;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8b92a3;
  background: #f0f2f6;
  border-radius: 999px;
  padding: 4px 9px;
}

body.page-portfolio .embed iframe {
  width: 100%;
  height: auto;
  aspect-ratio: var(--live-ar, 16 / 9);
  max-height: 100%;
  border: none;
  display: block;
}

/* ── Embed facade (click-to-load poster) ──────────────
   Shows a static report screenshot in place of the live iframe.
   The real Power BI embed is injected by JS only when a visitor
   clicks, so the page paints instantly and no report renders until
   it's wanted. Posters are <img loading="lazy">, so off-screen ones
   don't download until scrolled near. */
body.page-portfolio .embed { position: relative; }

body.page-portfolio .embed-facade {
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  /* fallback shown if a screenshot is missing */
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f1f2f8 100%);
}

body.page-portfolio .facade-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}
body.page-portfolio .embed-facade:hover .facade-photo { transform: scale(1.03); }

body.page-portfolio .facade-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,14,20,0.45) 0%, rgba(12,14,20,0) 42%);
  transition: background 0.25s ease;
  pointer-events: none;
}
body.page-portfolio .embed-facade:hover .facade-scrim {
  background:
    linear-gradient(to top, rgba(12,14,20,0.5) 0%, rgba(12,14,20,0.05) 60%),
    linear-gradient(rgba(12,14,20,0.14), rgba(12,14,20,0.14));
}

body.page-portfolio .facade-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  pointer-events: none;
}

body.page-portfolio .facade-play {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 10px 26px rgba(12,14,20,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
body.page-portfolio .facade-play::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 19px solid #4f46e5;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
body.page-portfolio .embed-facade:hover .facade-play {
  transform: scale(1.08);
  background: #ffffff;
}

body.page-portfolio .facade-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: rgba(12,14,20,0.6);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* injected live embed + loading overlay.
   The stage keeps the poster's --ar; the live iframe takes the
   report's own ratio (--live-ar, default 16/9) and is flex-centred,
   so the report sits centred in the window instead of stretched to
   fill and top-aligned. (Content inside the cross-origin PBI iframe
   can't be repositioned, so we centre the iframe box itself.) */
body.page-portfolio .embed-stage {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.page-portfolio .embed-frame {
  opacity: 0;
  transition: opacity 0.4s ease;
}
body.page-portfolio .embed-frame.is-ready { opacity: 1; }

body.page-portfolio .embed-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: #fbfbfd;
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  color: #8b92a3;
  transition: opacity 0.35s ease;
}
body.page-portfolio .embed-loader.is-done {
  opacity: 0;
  pointer-events: none;
}
body.page-portfolio .bn-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #e7e9ee;
  border-top-color: #7c6cf6;
  animation: bn-spin 0.8s linear infinite;
}
@keyframes bn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  body.page-portfolio .bn-spinner { animation-duration: 1.6s; }
  body.page-portfolio .embed-frame,
  body.page-portfolio .facade-photo,
  body.page-portfolio .facade-play,
  body.page-portfolio .facade-scrim { transition: none; }
}

/* ── Footer (portfolio) ── */
body.page-portfolio footer {
  padding: 4rem 0 3rem;
}

body.page-portfolio .foot-card {
  background: #0c0e14;
  color: rgba(255,255,255,0.75);
  border-radius: 28px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

body.page-portfolio .foot-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 250px at 80% 0%, rgba(124,108,246,0.18), transparent 60%),
              radial-gradient(500px 250px at 0% 100%, rgba(15,181,174,0.12), transparent 60%);
  pointer-events: none;
}

body.page-portfolio .foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: relative;
}

@media (max-width: 720px) {
  body.page-portfolio .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

body.page-portfolio .foot-brand .name {
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

body.page-portfolio .foot-brand .name .dot {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);
  box-shadow: 0 4px 12px rgba(79,70,229,0.4);
}

body.page-portfolio .foot-brand p {
  margin-top: 1rem;
  color: rgba(255,255,255,0.6);
  max-width: 36ch;
  font-size: 0.95rem;
}

body.page-portfolio .foot-col h4 {
  color: white !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  letter-spacing: 0.02em !important;
  font-family: 'Manrope', sans-serif !important;
}

body.page-portfolio .foot-col a {
  display: block !important;
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  padding: 0.3rem 0 !important;
  transition: color 0.18s !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  border-bottom: none !important;
}

body.page-portfolio .foot-col a:hover {
  color: white !important;
  border-bottom-color: transparent !important;
}

body.page-portfolio .foot-bottom {
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* ── Mobile adjustments for portfolio page ── */

/* Below this the card is too narrow for two readable prose columns. */
@media (max-width: 860px) {
  body.page-portfolio .report-prose {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The rail stops being a column and becomes a row of pills that sticks
   under the pill nav, with the progress line along its bottom edge. */
@media (max-width: 900px) {
  body.page-portfolio { --rail-top: 76px; }

  body.page-portfolio .lanes {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body.page-portfolio .lane-rail {
    z-index: 20;
    margin: 0 -2rem 22px;
    padding: 10px 2rem 12px;
    background: rgba(245,246,249,0.97);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid #e7e9ee;
  }

  body.page-portfolio .lane-rail-label,
  body.page-portfolio .lane-rail-foot { display: none; }

  body.page-portfolio .lane-rail-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  body.page-portfolio .lane-rail-nav::-webkit-scrollbar { display: none; }

  body.page-portfolio .lane-rail-nav::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 2px;
  }

  body.page-portfolio .lane-fill {
    left: 0;
    top: auto;
    bottom: 0;
    width: var(--rail-prog, 0%);
    height: 2px;
    max-height: none;
    max-width: 100%;
    transition: width 0.15s linear;
  }

  body.page-portfolio a.lane-link {
    flex: none;
    grid-template-columns: auto auto;
    gap: 0;
    padding: 0;
  }

  body.page-portfolio .lane-tick { display: none; }

  body.page-portfolio .lane-link-body {
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #e7e9ee;
    background: #ffffff;
    white-space: nowrap;
  }

  body.page-portfolio a.lane-link[aria-current="true"] .lane-link-body {
    border-color: #4f46e5;
  }

  body.page-portfolio .lane-band { flex-wrap: wrap; gap: 10px; }

  body.page-portfolio .lane { scroll-margin-top: calc(var(--rail-top) + 60px); }
}

@media (max-width: 768px) {
  body.page-portfolio .nav-wrap nav a {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.8rem !important;
  }

  body.page-portfolio .foot-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body.page-portfolio .wrap { padding-left: 1rem; padding-right: 1rem; }

  body.page-portfolio .lane-rail {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.page-portfolio .report { padding: 18px; border-radius: 18px; }
  body.page-portfolio .report.report-feature { padding: 20px; border-radius: 20px; }
  body.page-portfolio .report-top { gap: 14px; }
  body.page-portfolio .report-top .num { font-size: 1.85rem; }
  body.page-portfolio .report-top h3 { font-size: 1.12rem !important; }
  body.page-portfolio .report-foot { align-items: flex-start; }
  body.page-portfolio a.btn-view { width: 100%; justify-content: center !important; }
  body.page-portfolio .facade-play { width: 46px; height: 46px; }
  body.page-portfolio .facade-play::before {
    border-left-width: 13px;
    border-top-width: 8px;
    border-bottom-width: 8px;
  }
  body.page-portfolio .facade-label { font-size: 0.72rem; padding: 0.4rem 0.8rem; }
  body.page-portfolio .lane-next { padding: 18px; }
}


/* =============================================
   SECTION 4, BLOG PAGES v1.0
   Scoped to body.page-blog
   The class is added by a small inline script inside
   blog-content.html and blog-pl-matrix-content.html
   (WordPress core does not add page-{slug} to <body>).

   This section carries the chrome shared by the blog
   index and every post: tokens, pill nav, hero, footer,
   and the GeneratePress resets. Post-only typography
   lives in SECTION 5.

   This file is also appended verbatim to all.css, which
   stays the single combined file to paste into
   Appearance > Customize > Additional CSS. Keep the two
   in step if you edit either.

   FONTS: Manrope only, plus JetBrains Mono for code blocks
   in a post. Both are requested by the <link> tags inside the
   blog HTML blocks, so nothing needs adding to functions.php.
   The blog pages do not use Instrument Serif; the Portfolio
   page still does, for its report numerals.
   ============================================= */

/* Blog design tokens + base overrides */
body.page-blog {
  --ink:        #0c0e14;
  --ink-soft:   #2a2f3a;
  --ink-mute:   #565d6e;
  --ink-faint:  #8b92a3;
  --line:       #e7e9ee;
  --line-soft:  #f0f2f6;
  --bg:         #f5f6f9;
  --bg-soft:    #fbfbfd;
  --card:       #ffffff;
  --brand:      #4f46e5;
  --brand-2:    #7c6cf6;
  --brand-soft: #eef0ff;
  --teal:       #0fb5ae;
  --shadow-sm:  0 1px 2px rgba(15,18,30,0.04), 0 2px 6px rgba(15,18,30,0.04);
  --shadow-md:  0 4px 12px rgba(15,18,30,0.06), 0 16px 40px -16px rgba(15,18,30,0.10);
  --shadow-lg:  0 12px 32px rgba(15,18,30,0.08), 0 32px 64px -24px rgba(15,18,30,0.14);
  font-family: 'Manrope', system-ui, sans-serif;
  background: #f5f6f9;
  background-image: radial-gradient(800px 500px at 90% -10%, rgba(124,108,246,0.10), transparent 60%),
                    radial-gradient(700px 400px at -10% 0%, rgba(15,181,174,0.08), transparent 55%);
  background-attachment: fixed;
  color: #2a2f3a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Smooth jumps for the in-article contents links */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Hide GP site header. Blog uses its own floating pill nav */
body.page-blog .site-header { display: none !important; }

/* Hide GP site footer. Blog uses its own dark footer */
body.page-blog .site-footer,
body.page-blog .footer-bar { display: none !important; }

/* Remove GP content area padding */
body.page-blog .entry-content,
body.page-blog .page-content {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Remove GP forced max-width/padding on main */
body.page-blog .entry-content main,
body.page-blog .page-content main {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Free every GP wrapper so .wrap is the only width constraint */
body.page-blog .grid-container,
body.page-blog .content-area,
body.page-blog .site-main,
body.page-blog .inside-article {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Reset heading font to Manrope */
body.page-blog h1,
body.page-blog h2,
body.page-blog h3,
body.page-blog h4,
body.page-blog h5,
body.page-blog h6 {
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* Reset heading colour overrides from the site-wide rules */
body.page-blog .entry-content h1,
body.page-blog .entry-content h2,
body.page-blog .entry-content h3,
body.page-blog .entry-content h4,
body.page-blog .entry-content h5,
body.page-blog .entry-content h6,
body.page-blog .page-content h1,
body.page-blog .page-content h2,
body.page-blog .page-content h3,
body.page-blog .site-main h1,
body.page-blog .site-main h2,
body.page-blog .site-main h3 {
  color: inherit !important;
}

/* Reset link colour overrides from the site-wide rules.
   Scoped to bare links only (no class) so it does not strip
   colours from .nav-cta / .read-link / .nav-logo etc.

   :not(.page-post) matters. Without it this selector scores
   higher than every prose-link rule in SECTION 5, so article
   links inherit the body colour instead of going indigo, and
   no amount of !important further down fixes it. The post page
   does not need the reset anyway: its bare links are the nav
   and footer ones, and those already carry higher-specificity
   colours of their own. */
body.page-blog:not(.page-post) .entry-content a:not([class]),
body.page-blog:not(.page-post) .page-content a:not([class]) {
  color: inherit !important;
  border-bottom: none !important;
}

body.page-blog:not(.page-post) .entry-content a:not([class]):hover,
body.page-blog:not(.page-post) .page-content a:not([class]):hover {
  color: inherit !important;
  border-bottom-color: transparent !important;
}

/* -- Layout -- */
body.page-blog .wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* -- Floating pill nav -- */
body.page-blog .nav-wrap {
  position: sticky;
  top: 1.25rem;
  z-index: 200;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

body.page-blog .nav-wrap header {
  pointer-events: auto;
  width: 100%;
  max-width: 1100px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(231,233,238,0.9);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

body.page-blog .nav-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: #0c0e14;
}

body.page-blog .nav-logo .dot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.78rem;
  box-shadow: 0 2px 8px rgba(79,70,229,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}

body.page-blog .nav-logo .name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

body.page-blog .nav-wrap nav {
  display: flex;
  gap: 0.1rem;
  align-items: center;
}

body.page-blog .nav-wrap nav a {
  color: #565d6e !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 999px !important;
  transition: background 0.18s, color 0.18s !important;
  height: auto !important;
  border-bottom: none !important;
  border-left: none !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: flex !important;
  align-items: center !important;
}

body.page-blog .nav-wrap nav a:hover {
  background: #f0f2f6 !important;
  color: #0c0e14 !important;
  border-bottom-color: transparent !important;
}

body.page-blog .nav-wrap nav a.active {
  background: #0c0e14 !important;
  color: #ffffff !important;
}

body.page-blog .nav-wrap nav a.nav-cta {
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%) !important;
  color: #ffffff !important;
  padding: 0.55rem 1.1rem !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3) !important;
}

body.page-blog .nav-wrap nav a.nav-cta:hover {
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%) !important;
}

/* -- Hero (index) -- */
body.page-blog .hero {
  padding: 5rem 0 3rem !important;
  text-align: center !important;
  width: auto !important;
  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

body.page-blog .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4f46e5;
  background: #eef0ff;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

body.page-blog .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4f46e5;
}

body.page-blog .hero h1 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(2.4rem, 5.5vw, 4rem) !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  max-width: 16ch !important;
  margin: 0 auto !important;
}

body.page-blog .hero h1 * { color: inherit !important; }

body.page-blog .hero h1 .serif {
  font-family: 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 60%, #0fb5ae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

body.page-blog .hero p {
  margin: 1.25rem auto 0 !important;
  max-width: 58ch !important;
  color: #565d6e !important;
  font-size: 1.1rem !important;
}

/* -- Main -- */
body.page-blog main {
  padding: 3rem 0 5rem !important;
}

/* -- Tag pills (shared) -- */
body.page-blog .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}

body.page-blog .tag-pill {
  background: #fbfbfd;
  border: 1px solid #e7e9ee;
  color: #2a2f3a;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

body.page-blog .tag-pill.feat {
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
}

/* -- Featured post card (index) -- */
body.page-blog .featured {
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-radius: 28px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}

body.page-blog .featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 200px at 100% 0%, rgba(124,108,246,0.07), transparent 70%);
  pointer-events: none;
}

@media (max-width: 900px) {
  body.page-blog .featured {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

body.page-blog a.featured-img {
  display: block !important;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #0c0e14;
  box-shadow: var(--shadow-md);
  position: relative;
  border-bottom: none !important;
  transition: transform 0.25s, box-shadow 0.25s;
}

body.page-blog a.featured-img:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-bottom-color: transparent !important;
}

body.page-blog .featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page-blog .featured-body { position: relative; }

body.page-blog .featured h2 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem) !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.18 !important;
  margin: 0 0 1rem !important;
  text-wrap: pretty;
}

/* Same title string as the article h1, so it keeps the same
   face too. Indigo rather than the gradient: the card heading is
   small enough that a gradient reads as muddy. */
body.page-blog .featured h2 .serif {
  font-family: 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: #4f46e5 !important;
  letter-spacing: inherit;
}

body.page-blog .featured .meta {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: #8b92a3;
  margin-bottom: 1.25rem;
}

body.page-blog .featured .meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c3c9d4;
}

body.page-blog .featured p {
  color: #565d6e;
  font-size: 1rem;
  max-width: 52ch;
  margin: 0 0 1.6rem;
}

body.page-blog a.read-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: #0c0e14 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.4rem !important;
  border-radius: 999px !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: 0 6px 18px rgba(12,14,20,0.18) !important;
  transition: transform 0.15s, box-shadow 0.2s !important;
}

body.page-blog a.read-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(12,14,20,0.28) !important;
  color: #ffffff !important;
  border-bottom-color: transparent !important;
}

body.page-blog .read-link svg { transition: transform 0.2s; }
body.page-blog .read-link:hover svg { transform: translateX(3px); }

/* -- Coming soon (index) -- */
body.page-blog .coming-soon {
  margin-top: 2rem;
  background: #ffffff;
  border: 1px dashed #d6dae4;
  border-radius: 28px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

body.page-blog .cs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #eef0ff;
  color: #4f46e5;
  margin-bottom: 1.1rem;
}

body.page-blog .coming-soon h2 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.6rem !important;
}

body.page-blog .coming-soon p {
  color: #565d6e;
  max-width: 48ch;
  margin: 0 auto 1.5rem;
  font-size: 0.98rem;
}

body.page-blog a.cs-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  padding: 0.6rem 1.15rem !important;
  background: #eef0ff !important;
  border-radius: 999px !important;
  border-bottom: none !important;
  transition: background 0.18s, transform 0.15s !important;
}

body.page-blog a.cs-link:hover {
  background: #e2e5ff !important;
  transform: translateY(-1px) !important;
  color: #4f46e5 !important;
  border-bottom-color: transparent !important;
}

/* -- Footer (blog) -- */
body.page-blog footer { padding: 4rem 0 3rem; }

body.page-blog .foot-card {
  background: #0c0e14;
  color: rgba(255,255,255,0.75);
  border-radius: 28px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

body.page-blog .foot-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 250px at 80% 0%, rgba(124,108,246,0.18), transparent 60%),
              radial-gradient(500px 250px at 0% 100%, rgba(15,181,174,0.12), transparent 60%);
  pointer-events: none;
}

body.page-blog .foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: relative;
}

@media (max-width: 720px) {
  body.page-blog .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

body.page-blog .foot-brand .name {
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

body.page-blog .foot-brand .name .dot {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);
  box-shadow: 0 4px 12px rgba(79,70,229,0.4);
}

body.page-blog .foot-brand p {
  margin-top: 1rem;
  color: rgba(255,255,255,0.6);
  max-width: 36ch;
  font-size: 0.95rem;
}

body.page-blog .foot-col h4 {
  color: white !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  letter-spacing: 0.02em !important;
  font-family: 'Manrope', sans-serif !important;
}

body.page-blog .foot-col a {
  display: block !important;
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  padding: 0.3rem 0 !important;
  transition: color 0.18s !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  border-bottom: none !important;
}

body.page-blog .foot-col a:hover {
  color: white !important;
  border-bottom-color: transparent !important;
}

body.page-blog .foot-bottom {
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* -- Mobile adjustments for blog pages -- */
@media (max-width: 768px) {
  body.page-blog .wrap { padding: 0 1.25rem; }

  body.page-blog .nav-wrap { padding: 0 0.5rem; }

  body.page-blog .nav-wrap header {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }

  body.page-blog .nav-wrap nav a {
    padding: 0.5rem 0.55rem !important;
    font-size: 0.78rem !important;
  }

  body.page-blog .featured { padding: 1.25rem; border-radius: 22px; }

  body.page-blog .foot-card { padding: 2rem 1.5rem; border-radius: 22px; }

  body.page-blog .foot-grid { grid-template-columns: 1fr; }
}


/* =============================================
   SECTION 5, BLOG POST (long-form article) v1.0
   Scoped to body.page-post, which is added alongside
   page-blog by the script in the post's HTML block.
   Everything here is article typography; the nav, hero,
   footer and tokens come from SECTION 4.
   ============================================= */

/* -- Theme furniture on a single post --
   The article is a POST, not a page (migrated so it gets categories,
   tags and the feed), so GeneratePress adds the things it adds to every
   post: a meta footer with the category and tag links, previous/next
   navigation, and an author box. The markup below supplies its own
   version of all of that, so hide the theme's.

   .entry-header and .entry-title are already hidden site-wide in
   SECTION 1, which takes care of the duplicate title and the byline
   above the content.

   #comments and .comments-area used to be in this list. They came out
   on 2026-09-18 when comments were turned on for the blog: hiding the
   comment area while the post accepts comments gives you a thread
   readers can post to from the feed and never see on the page. The
   per-post setting and the site default are both handled by
   deploy/wp_deploy.py, see COMMENT_STATUS there. */
body.page-post .entry-meta,
body.page-post footer.entry-meta,
body.page-post .post-navigation,
body.page-post .nav-below,
body.page-post .author-info {
  display: none !important;
}

/* -- The post tail: sharing, likes, comments --
   Everything below is a sibling of .post-article, not a child, so none of
   it inherits the article's 1160px shell. Left alone it renders edge to
   edge against a centred article, which reads as broken rather than as
   full bleed.

   840px matches .post-narrow, the running-text measure, so the comment box
   lines up with the paragraphs above it rather than with the figures, which
   deliberately break out wider. The extra 3rem covers the side padding, so
   the CONTENT lands on 840 and not on 792.

   The comment form itself is Jetpack's, served in a cross-origin iframe.
   Nothing inside it can be reached from here: its colours come from
   Settings > Discussion > Jetpack Comments. Only the frame around it is
   ours, which is what this styles.

   The sharing and likes widgets had the same alignment problem before
   comments were turned on. They are included because fixing one and not
   the other looks worse than fixing neither.

   They are matched as children of .entry-content, NOT as siblings of
   .post-article. The Custom HTML block wraps the article in its own
   <main>, so .post-article is a generation below the widgets and a
   sibling combinator matches nothing. Verified against the live DOM:
   `.post-article ~ div.sharedaddy` returns 0 elements,
   `.entry-content > div.sharedaddy` returns 2. */
body.page-post .comments-area,
body.page-post .entry-content > div.sharedaddy {
  max-width: calc(840px + 3rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

body.page-post .comments-area {
  margin-top: 1rem;
  margin-bottom: 4.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid #e7e9ee;
}

body.page-post .comments-area .comment-reply-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin: 0 0 1.25rem !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* The heading carries a "Cancel reply" link that only appears mid thread.
   It should not inherit the heading's size when it does show up. */
body.page-post .comments-area .comment-reply-title small {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.4rem;
}

/* -- Article shell -- */
body.page-post .post-article {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* The readable measure. Figures, tables and code break out
   wider than this; running text does not. 840px at 17px is
   roughly 80 characters a line: wider than the 720px this
   started at, still short of an unreadable full-bleed wall. */
body.page-post .post-narrow {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

/* -- Post header -- */
body.page-post .post-head { padding-top: 3.5rem; }

body.page-post a.back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #565d6e !important;
  text-decoration: none !important;
  border-bottom: none !important;
  margin-bottom: 1.75rem !important;
  transition: color 0.18s !important;
}

body.page-post a.back-link:hover {
  color: #4f46e5 !important;
  border-bottom-color: transparent !important;
}

body.page-post a.back-link svg { transition: transform 0.18s; }
body.page-post a.back-link:hover svg { transform: translateX(-3px); }

body.page-post .post-head h1 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(2rem, 4.6vw, 3.1rem) !important;
  font-weight: 800 !important;
  color: #0c0e14 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 1.1rem !important;
  text-wrap: pretty;
}

/* Same face and weight as the rest of the headline. Only the
   colour changes, exactly as the Portfolio hero does it. */
body.page-post .post-head h1 .serif {
  font-family: 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: inherit;
  background: linear-gradient(135deg, #4f46e5 0%, #7c6cf6 60%, #0fb5ae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

body.page-post .deck {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.55;
  color: #565d6e;
  margin: 0 0 1.6rem;
  max-width: 54ch;
}

body.page-post .post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: #8b92a3;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid #e7e9ee;
}

body.page-post .post-meta .author { font-weight: 600; color: #2a2f3a; }

body.page-post .post-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c3c9d4;
}

body.page-post .cover-figure {
  margin: 2.5rem 0 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #0c0e14;
}

body.page-post .cover-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* -- Running text -- */
body.page-post .post-body {
  padding: 3rem 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #2a2f3a;
}

body.page-post .post-body p {
  margin: 0 0 1.4rem;
  text-wrap: pretty;
}

body.page-post .post-body ul,
body.page-post .post-body ol {
  margin: 0 0 1.6rem;
  padding-left: 1.35rem;
}

body.page-post .post-body li { margin-bottom: 0.7rem; }

body.page-post .post-body strong { font-weight: 700; color: #0c0e14; }

/* Prose links. Declared after the SECTION 4 bare-link reset so
   these win, and specific enough to leave buttons alone. */
body.page-post .post-body p > a,
body.page-post .post-body li > a,
body.page-post .post-body blockquote a {
  color: #4f46e5 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(79,70,229,0.35) !important;
  transition: border-color 0.18s, color 0.18s !important;
}

body.page-post .post-body p > a:hover,
body.page-post .post-body li > a:hover,
body.page-post .post-body blockquote a:hover {
  color: #3730a3 !important;
  border-bottom-color: #4f46e5 !important;
}

/* -- Section headings -- */
body.page-post .post-body h2 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(1.45rem, 3vw, 1.85rem) !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  margin: 3.25rem 0 1.1rem !important;
  padding-top: 1.75rem;
  border-top: 1px solid #e7e9ee;
  scroll-margin-top: 6rem;
  text-wrap: balance;
}

body.page-post .post-body h3 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0c0e14 !important;
  letter-spacing: -0.02em !important;
  margin: 2.25rem 0 0.85rem !important;
  scroll-margin-top: 6rem;
}

/* -- Contents card -- */
body.page-post .post-toc {
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  margin: 0 0 2.75rem;
  box-shadow: var(--shadow-sm);
}

body.page-post .post-toc h2 {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.09em !important;
  color: #8b92a3 !important;
  margin: 0 0 0.9rem !important;
  padding-top: 0 !important;
  border-top: none !important;
}

body.page-post .post-toc ol {
  margin: 0;
  padding-left: 1.15rem;
  columns: 2;
  column-gap: 2rem;
  font-size: 0.92rem;
}

@media (max-width: 620px) {
  body.page-post .post-toc ol { columns: 1; }
}

body.page-post .post-toc li {
  margin-bottom: 0.45rem;
  break-inside: avoid;
  color: #8b92a3;
}

/* Four elements deep so this outscores the .post-body li > a
   prose rule above, which would otherwise turn the whole
   contents card indigo. */
body.page-post .post-toc ol li > a {
  color: #2a2f3a !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: color 0.18s, border-color 0.18s !important;
}

body.page-post .post-toc ol li > a:hover {
  color: #4f46e5 !important;
  border-bottom-color: rgba(79,70,229,0.4) !important;
}

/* -- Figures (break out wider than the text measure) -- */
body.page-post .post-body figure {
  width: min(1100px, calc(100vw - 3rem));
  box-sizing: border-box;
  max-width: none;
  margin: 2.25rem 0 2.5rem;
  margin-left: 50%;
  transform: translateX(-50%);
}

body.page-post .post-body figure img,
body.page-post .post-body figure svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid #e7e9ee;
  background: #ffffff;
  box-shadow: var(--shadow-md);
}

body.page-post .post-body figcaption {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: #8b92a3;
  text-align: center;
}

body.page-post .diagram-figure svg { padding: 0.5rem; }

/* -- Tables -- */
body.page-post .table-wrap {
  width: min(1100px, calc(100vw - 3rem));
  box-sizing: border-box;
  max-width: none;
  margin: 2rem 0 2.25rem;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e7e9ee;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

body.page-post table.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  margin: 0 !important;
  min-width: 340px;
}

body.page-post table.post-table th,
body.page-post table.post-table td {
  padding: 0.75rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid #f0f2f6;
  vertical-align: top;
}

body.page-post table.post-table thead th {
  background: #fbfbfd;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8b92a3;
  border-bottom: 1px solid #e7e9ee;
  white-space: nowrap;
}

body.page-post table.post-table tbody th[scope="row"] {
  font-weight: 600;
  color: #0c0e14;
}

body.page-post table.post-table tbody tr:last-child th,
body.page-post table.post-table tbody tr:last-child td {
  border-bottom: none;
}

/* Numeric columns read better right aligned and tabular */
body.page-post table.post-table td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.page-post table.results-table td { text-align: right; }
body.page-post table.results-table thead th:not(:first-child) { text-align: right; }

body.page-post table.results-table tr.is-best th,
body.page-post table.results-table tr.is-best td {
  background: rgba(15,181,174,0.07);
}

body.page-post table.results-table tr.is-worst th,
body.page-post table.results-table tr.is-worst td {
  background: rgba(220,38,38,0.06);
}

/* -- Code -- */
body.page-post .post-body code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: #eef0ff;
  color: #3730a3;
  padding: 0.14em 0.42em;
  border-radius: 5px;
  white-space: nowrap;
}

body.page-post pre.code-block {
  width: min(1100px, calc(100vw - 3rem));
  box-sizing: border-box;
  max-width: none;
  margin: 2rem 0 2.25rem;
  margin-left: 50%;
  transform: translateX(-50%);
  background: #0c0e14;
  border: 1px solid #1c2233;
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-md);
}

body.page-post pre.code-block code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.7;
  background: none;
  color: #dfe3f0;
  padding: 0;
  border-radius: 0;
  white-space: pre;
  display: block;
}

/* -- Blockquote -- */
body.page-post .post-body blockquote {
  margin: 2.25rem 0;
  padding: 0.35rem 0 0.35rem 1.5rem;
  border-left: 3px solid #4f46e5;
  background: none;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #0c0e14;
}

body.page-post .post-body blockquote p {
  margin: 0 0 0.75rem;
  font-style: italic;
}

body.page-post .post-body blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.85rem;
  color: #8b92a3;
}

/* -- Callout -- */
body.page-post .callout {
  margin: 2.25rem 0;
  background: #eef0ff;
  border: 1px solid #dcdfff;
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
}

body.page-post .callout h3 {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.09em !important;
  color: #4f46e5 !important;
  margin: 0 0 0.6rem !important;
}

body.page-post .callout p { margin: 0; font-size: 0.98rem; }

/* -- Headline statistic -- */
body.page-post .post-body p.stat-line {
  margin: 2rem 0;
  padding: 1.1rem 1.4rem;
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-left: 3px solid #0fb5ae;
  border-radius: 12px;
  font-size: 1.2rem;
  color: #0c0e14;
}

/* -- Resource links -- */
body.page-post a.resource-link {
  display: flex !important;
  flex-direction: column;
  gap: 0.2rem;
  background: #ffffff !important;
  border: 1px solid #e7e9ee !important;
  border-bottom: 1px solid #e7e9ee !important;
  border-radius: 14px;
  padding: 1.1rem 1.35rem;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s !important;
}

body.page-post a.resource-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #c7c9f5 !important;
}

body.page-post .rl-title {
  font-weight: 700;
  font-size: 1rem;
  color: #4f46e5;
  letter-spacing: -0.01em;
}

body.page-post .rl-sub {
  font-size: 0.82rem;
  color: #8b92a3;
  font-variant-numeric: tabular-nums;
}

/* -- Closing CTA -- */
body.page-post .post-cta {
  margin: 3.5rem 0 1rem;
  background: #0c0e14;
  border-radius: 24px;
  padding: 2.75rem 2.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

body.page-post .post-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 250px at 50% 0%, rgba(124,108,246,0.28), transparent 62%);
  pointer-events: none;
}

body.page-post .post-cta h2 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 0.75rem !important;
  position: relative;
}

body.page-post .post-cta p {
  color: rgba(255,255,255,0.7);
  max-width: 46ch;
  margin: 0 auto 1.75rem;
  position: relative;
  font-size: 1rem;
}

body.page-post .cta-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

body.page-post a.btn-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: #ffffff !important;
  color: #0c0e14 !important;
  text-decoration: none !important;
  font-size: 0.93rem !important;
  font-weight: 600 !important;
  padding: 0.78rem 1.5rem !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  transition: transform 0.15s, background 0.2s !important;
}

body.page-post a.btn-cta:hover {
  transform: translateY(-2px) !important;
  color: #0c0e14 !important;
}

body.page-post a.btn-cta.ghost {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

body.page-post a.btn-cta.ghost:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

/* -- Mobile adjustments for the article -- */
@media (max-width: 768px) {
  body.page-post .post-article { padding: 0 1.25rem; }
  body.page-post .post-head { padding-top: 2.5rem; }
  body.page-post .post-body { padding-top: 2.25rem; font-size: 1rem; }

  /* Breakout blocks are already capped at 100vw - 3rem, so on a
     phone they simply fill the column. Trim the radius to match. */
  body.page-post .post-body figure img,
  body.page-post .post-body figure svg,
  body.page-post .table-wrap,
  body.page-post pre.code-block { border-radius: 12px; }

  body.page-post pre.code-block { padding: 1.1rem 1.15rem; }
  body.page-post .post-cta { padding: 2rem 1.4rem; border-radius: 20px; }
  body.page-post .cover-figure { border-radius: 16px; }
}

/* Meta rows wrap on narrow phones and leave a dangling bullet.
   Drop the separators and lean on the gap instead. */
@media (max-width: 520px) {
  body.page-blog .featured .meta .dot,
  body.page-post .post-meta .dot { display: none; }
  body.page-blog .featured .meta,
  body.page-post .post-meta { gap: 0.1rem 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-blog a.featured-img,
  body.page-blog a.read-link,
  body.page-post a.resource-link,
  body.page-post a.btn-cta { transition: none; }
}


/* =============================================
   SECTION 6, LIVE POWER BI EMBED
   The P&L article only (body.page-post, under
   "Try it yourself"). This is a real iframe that loads
   with the page; every embed on the Portfolio page is a
   click-to-load poster instead.

   The wrapper is a <figure> inside .post-body, so it already
   inherits the wider-than-text breakout from SECTION 5.
   Do not set margins here or that breakout is fought.
   ============================================= */

body.page-post .live-frame {
  background: #fbfbfd;
  border: 1px solid #e7e9ee;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15,18,30,0.06), 0 16px 40px -16px rgba(15,18,30,0.10);
}

/* 600 x 373.5, the size Power BI hands out in its embed snippet,
   expressed as a ratio so the frame scales to any width. */
body.page-post .live-stage {
  aspect-ratio: 1200 / 747;
  background: #ffffff;
}

body.page-post .live-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* The window chrome. Section 3 styles the same bits for the
   Portfolio page, but that scope does not reach a post. */
body.page-post .live-frame .embed-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #e7e9ee;
  background: #ffffff;
}

body.page-post .live-frame .embed-dots {
  display: flex;
  gap: 0.4rem;
}

body.page-post .live-frame .embed-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

body.page-post .live-frame .embed-dots span:nth-child(1) { background: #ff5f57; }
body.page-post .live-frame .embed-dots span:nth-child(2) { background: #febc2e; }
body.page-post .live-frame .embed-dots span:nth-child(3) { background: #28c840; }

body.page-post .live-frame .embed-title {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  color: #8b92a3;
  font-weight: 500;
  margin-left: auto;
  margin-right: auto;
  padding-right: 56px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  body.page-post .live-frame { border-radius: 12px; }
}


/* =============================================
   SECTION 7, PILL NAV ON SMALL SCREENS v1.0
   Scoped to all three nav scopes at once.

   WHY THIS EXISTS
   The pill nav is a fixed 60px flex row that never
   wrapped and never scrolled, so its width was simply
   assumed to fit. It did not. Measured on the live site
   at a 390px viewport, before this section existed:

     /            4 items   page overflowed by 31px
     /about/      4 items   page overflowed by 31px
     /blog/       4 items   page overflowed by 15px
     /power-bi-files/  5 items   overflowed by 64px, and
                  "Free Stuff" wrapped to two lines, 56px
                  tall inside a 60px pill

   Every one of those is a horizontal scrollbar on a phone.
   The two-line burst is the "Free Stuff" label being the
   first nav item with a space in it: nothing set
   white-space, so it was the item flex chose to break.

   WHAT IT DOES, in the order the pixels come back
   1. Hides the BiNexus wordmark below 620px. The gradient
      B dot stays and is still the link home, so nothing is
      lost but about 60px of width.
   2. white-space: nowrap, so a squeeze can never again show
      up as a silently wrapped pill. Overflow is visible and
      debuggable; a burst pill is not.
   3. Tightens link padding and type a little.
   4. Lets the nav itself scroll horizontally as a backstop,
      with the scrollbar hidden. This is the part that makes
      the fix durable: the PAGE can no longer overflow no
      matter how many items are added later, because the nav
      absorbs it. With 1 to 3 applied it does not engage
      above 320px, so it is insurance, not the mechanism.

   The 620px breakpoint is one the file already uses, rather
   than a fourth invented one. It sits last in the file on
   purpose: the existing rules at 768px are !important with
   the same specificity, so source order is what decides.
   ============================================= */

@media (max-width: 620px) {

  /* 1. Wordmark off, dot stays */
  body.page-about .nav-logo .name,
  body.page-portfolio .nav-logo .name,
  body.page-blog .nav-logo .name {
    display: none !important;
  }

  body.page-about .nav-logo,
  body.page-portfolio .nav-logo,
  body.page-blog .nav-logo {
    flex: 0 0 auto;
  }

  /* 0. Reclaim the theme gutter. This is the big one.
     GeneratePress puts 30px of padding on each side of .site-content and
     nothing in this file resets it, so on a 390px phone the pill starts
     60px narrower than the screen. That is 16 per cent of the viewport
     gone before a single nav item is laid out, and it is why the nav still
     had to scroll even after the wordmark came off.

     Cancelled with a negative margin rather than the usual
     width:100vw / margin-left:-50vw breakout, because 100vw includes the
     scrollbar and would reintroduce the exact horizontal overflow this
     section exists to remove. The number is exact rather than a guess:
     the gutter measures a flat 30px at every width from 320 to 768, and
     this block stops at 620. It becomes 40px at 1024, well outside. */
  body.page-about .nav-wrap,
  body.page-portfolio .nav-wrap,
  body.page-blog .nav-wrap {
    margin-left: -30px;
    margin-right: -30px;
    padding: 0 0.5rem;
  }

  body.page-about .nav-wrap header,
  body.page-portfolio .nav-wrap header,
  body.page-blog .nav-wrap header {
    padding: 0.5rem 0.5rem 0.5rem 0.6rem;
    gap: 0.4rem;
  }

  /* 4. The nav is the flexible part, and the backstop.
     min-width: 0 is required: a flex item defaults to
     min-width: auto, which refuses to shrink below its
     content and is what pushed the page wide. */
  body.page-about .nav-wrap nav,
  body.page-portfolio .nav-wrap nav,
  body.page-blog .nav-wrap nav {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  body.page-about .nav-wrap nav::-webkit-scrollbar,
  body.page-portfolio .nav-wrap nav::-webkit-scrollbar,
  body.page-blog .nav-wrap nav::-webkit-scrollbar {
    display: none;
  }

  /* 2 and 3 */
  body.page-about .nav-wrap nav a,
  body.page-portfolio .nav-wrap nav a,
  body.page-blog .nav-wrap nav a {
    white-space: nowrap !important;
    flex: 0 0 auto;
    padding: 0.5rem 0.45rem !important;
    font-size: 0.76rem !important;
  }

  /* The CTA keeps more of its padding. It is the only
     conversion element on the page and a 40px pill that
     reads as a button is worth the 8px it costs.

     It is also pinned to the right edge of the scroller. On the narrowest
     phones the four text links still do not all fit, and without this the
     first thing to disappear off the edge is Contact, which is the worst
     possible item to lose. Sticky keeps it parked and visible while
     Portfolio, Blog, Free Stuff and About scroll underneath it. It already
     carries an opaque gradient background, so nothing shows through. */
  body.page-about .nav-wrap nav a.nav-cta,
  body.page-portfolio .nav-wrap nav a.nav-cta,
  body.page-blog .nav-wrap nav a.nav-cta {
    padding: 0.5rem 0.7rem !important;
    position: sticky;
    right: 0;
    z-index: 1;
  }
}